JavaScript教程--从入门到精通(2)

2023-03-04 07:25:01JavaScript011

JavaScript教程--从入门到精通(2),第1张

JavaScript基本数据结构

JavaScript提供脚本语言的编程与C++非常相似它只是去掉了C语言中有关指针等容易产生的错误并提供了功能强大的类库对于已经具备C++或C语言的人来说学习JavaScript脚本语言是一件非常轻松愉快的事

一 JavaScript代码的加入

JavaScript的脚本包括在HTML中它成为HTML文档的一部分与HTML标识相结合构成了一个功能强大的Internet网上编程语言可以直接将JavaScript脚本加入文档

<Script Language = JavaScript >JavaScript语言代码 JavaScript 语言代码</Script>

说明　通过标识<Script></Script>指明JavaScript脚本源代码将放入其间　通过属性Language = JavaScript 说明标识中是使用的何种语言这里是JavaScript语言表示在JavaScript中使用的语言

下面是将JavaScript脚本加入Web文档中的例子:l<HTML><Head><Script Language = JavaScript >document Write( 这是赛迪网互动学校 )document close()</Script></Head></HTML>

在浏览器的窗口中调用l 则显示这是赛迪网互动学校字串见图所示

图说明: Document write()是文档对象的输出函数其功能是将括号中的字符或变量值输出到窗口 document close()是将输出关闭可将<Script></Script>标识放入head></Head>或<Body></Body>之间将JavaScript标识放置<Head></Head>在头部之间使之在主页和其余部分代码之前装载从而可使代码的功能更强大可以将JavaScript标识放置在<Body></Body>主体之间以实现某些部分动态地创建文档

二基本数据类型

JavaScript脚本语言同其它语言一样有它自身的基本数据类型表达式和算术运算符以及程序的基本框架结构 JavaScript提供了四种基本的数据类型用来处理数字和文字而变量提供存放信息的地方表达式则可以完成较复杂的信息处理

基本数据类型

在JavaScript中四种基本的数据类型数值（整数和实数）字符串型（用号或括起来的字符或数值）布尔型（使True或False表示）和空值在JavaScript的基本类型中的数据可以是常量也可以变量由于JavaScript采用弱类型的形式因而一个数据的变量或常量不必首先作声明而是在使用或赋值时确定其数据的类型的当然也可以先声明该数据的类型它是通过在赋值时自动说明其数据类型的

常量　整型常量JavaScript的常量通常又称字面常量它是不能改变的数据其整型常量可以使用十六进制八进制和十进制表示其值　实型常量实型常量是由整数部分加小数部分表示如可以使用科学或标准方法表示 E e 等

布尔值

布尔常量只有两种状态 True或False 它主要用来说明或代表一种状态或标志以说明操作流程它与C＋＋是不一样的 C＋＋可以用1或0表示其状态而JavaScript只能用True或False表示其状态

字符型常量

使用单引号（）或双引号（）括起来的一个或几个字符如 This is a book of JavaScript ewrt 等　空值JavaScript中有一个空值null 表示什么也没有如试图引用没有定义的变量则返回一个Null值　特殊字符同C语言一样 JavaScript中同样以有些以反斜杠（／）开头的不可显示的特殊字符通常称为控制字符　变量

变量的主要作用是存取数据提供存放信息的容器对于变量必须明确变量的命名变量的类型变量的声明及其变量的作用域　变量的命名JavaScript中的变量命名同其计算机语言非常相似这里要注意以下两点 A 必须是一个有效的变量即变量以字母开头中间可以出现数字如test text 等除下划线（－）作为连字符外变量名称不能有空格（＋）（－）（）或其它符号 B 不能使用JavaScript中的关键字作为变量在JavaScript中定义了40多个类键字这些关键是JavaScript内部使用的不能作为变量的名称如Var int double true不能作为变量的名称在对变量命名时最好把变量的意义与其代表的意思对应起来以免出现错误

变量的类型

在JavaScript中变量可以用命令Var作声明:var mytest该例子定义了一个mytest变量但没有赋予它的值 Var mytest= This is a book 该例子定义了一个mytest变量同时赋予了它的值在JavaScript中变量以可以不作声明而在使用时再根据数据的类型来确其变量的类型如 x= y= xy= True cost= 等其中x整数 y为字符串 xy为布尔型 cost为实型　变量的声明及其作用域JavaScript变量可以在使用前先作声明并可赋值通过使用var关键字对变量作声明对变量作声明的最大好处就是能及时发现代码中的错误因为JavaScript是采用动态编译的而动态编译是不易发现代码中的错误特别是变量命名的方面对于变量还有一个重要性──那就是变量的作用域在JavaScript中同样有全局变量和局部变量全局变量是定义在所有函数体之外其作用范围是整个函数而局部变量是定义在函数体之内只对其该函数是可见的而对其它函数则是不可见的 三表达式和运算符

1 表达式

在定义完变量后就可以对它们进行赋值改变计算等一系列操作这一过程通常又叫称一个叫表达式来完成可以说它是变量常量布尔及运算符的集合因此表达式可以分为算术表述式字串表达式赋值表达式以及布尔表达式等

2 运算符

运算符完成操作的一系列符号在JavaScript中有算术运算符如＋ * /等有比较运算符如!＝＝＝等有逻辑布尔运算符如！（取反） | ||有字串运算如＋＋＝等在JavaScript主要有双目运算符和单目运算符其双目运算符由下列组成操作数1 运算符操作数2即由两个操作数和一个运算符组成如＋ This + that 等单目运算符只需一个操作数其运算符可在前或后（1）算术运算符JavaScript中的算术运算符有单目运算符和双目运算符双目运算符 +（加）（减） *（乘） /（除） %（取模） |（按位或） &(按位与) <<（左移） >>（右移） >>>（右移零填充）单目运算符（取反） ~（取补） ++（递加）（递减）（2）比较运算符比较运算符它的基本操作过程是首先对它的操作数进行比较尔后再返回一个true或False值有8个比较运算符:<(小于) >(大于) <=(小于等于) >=(大于等于) ==(等于) !=(不等于) （3）布尔逻辑运算符在JavaScript中增加了几个布尔逻辑运算符: !（取反) &=（与之后赋值） &（逻辑与） |=（或之后赋值） |（逻辑或） ^=（异或之后赋值） ^（逻辑异或） ?:（三目操作符） ||（或） ==(等于) |=(不等于) 其中三目操作符主要格式如下操作数？结果1 结果2若操作数的结果为真则表述式的结果为结果1 否则为结果2

四范例 下面是一个跑马灯效果的JavaScript文档

l<><head><script Language= JavaScript >var msg= 这是一个跑马灯效果的JavaScript文档 var interval = var spacelen = var space = var seq= function Scroll() { len = msg lengthwindow status = msg substring( seq+ )seq++if ( seq >= len ) { seq = spacelenwindow setTimeout( Scroll ()interval )}elsewindow setTimeout( Scroll()interval )} function Scroll () { var out= for (i= i<=spacelen/space lengthi++) out += space out = out + msglen=out lengthwindow status=out substring(seq len)seq++if ( seq >= len ) { seq = }window setTimeout( Scroll ()interval )} Scroll()</script><body></body></>

lishixinzhi/Article/program/Java/JSP/201311/19285

JavaScript程序构成

JavaScript脚本语言的基本构成是由控制语句函数对象方法属性等来实现编程的

一程序控制流在任何一种语言中程序控制流是必须的它能使得整个程序减小混乱使之顺利按其一定的方式执行下面是JavaScript常用的程序控制流结构及语句:1 if条件语句　基本格式if（表述式）语句段1 else语句段2 　功能若表达式为true 则执行语句段1 否则执行语句段2 　说明 if else 语句是JavaScript中最基本的控制语句通过它可以改变语句的执行顺序表达式中必须使用关系语句来实现判断它是作为一个布尔值来估算的它将零和非零的数分别转化成false和true 若if后的语句有多行则必须使用花括号将其括起来　if语句的嵌套if（布尔值）语句1 else（布尔值）语句2 else if（布尔值）语句3 ……else 语句4 　在这种情况下每一级的布尔表述式都会被计算若为真则执行其相应的语句否则执行else后的语句　2 For循环语句　基本格式for（初始化条件增量）语句集　功能实现条件循环当条件成立时执行语句集否则跳出循环体　说明初始化参数告诉循环的开始位置必须赋予变量的初值条件是用于判别循环停止时的条件若条件满足则执行循环体否则跳出增量主要定义循环控制变量在每次循环时按什么方式变化三个主要语句之间必须使用逗号分隔　3 while循环　基本格式while（条件）语句集该语句与For语句一样当条件为真时重复循环否则退出循环　For与while语句两种语句都是循环语句使用For语句在处理有关数字时更易看懂也较紧凑而while循环对复杂的语句效果更特别

4 break和continue语句与C++语言相同使用break语句使得循环从For或while中跳出 continue使得跳过循环内剩余的语句而进入下一次循环

二函数函数为程序设计人员提供了一个丰常方便的能力通常在进行一个复杂的程序设计时总是根据所要完成的功能将程序划分为一些相对独立的部分每部分编写一个函数从而使各部分充分独立任务单一程序清晰易懂易读易维护 JavaScript函数可以封装那些在程序中可能要多次用到的模块并可作为事件驱动的结果而调用的程序从而实现一个函数把它与事件驱动相关联这是与其它语言不样的地方

1 JavaScript函数定义Function 函数名（参数变元）{函数体Return 表达式}说明　当调用函数时所用变量或字面量均可作为变元传递　函数由关键字Function定义　函数名定义自己函数的名字　参数表是传递给函数使用或操作的值其值可以是常量变量或其它表达式　通过指定函数名（实参）来调用一个函数　必须使用Return将值返回　函数名对大小写是敏感的　2 函数中的形式参数在函数的定义中我们看到函数名后有参数表这些参数变量可能是一个或几个那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments Length来检查参数的个数例 Function function_Name(exp exp exp exp )Number =function _Name arguments lengthif (Number>）document wrile(exp )if (Number>)document write(exp )if(Number>)document write(exp )

三事件驱动及事件处理1 基本概念JavaScript是基于对象(object based)的语言这与Java不同 Java是面向对象的语言而基于对象的基本特征就是采用事件驱动(event driven) 它是在用形界面的环境下使得一切输入变化简单化通常鼠标或热键的动作我们称之为事件（Event）而由鼠标或热键引发的一连串程序的动作称之为事件驱动（Event Driver）而对事件进行处理程序或函数我们称之为事件处理程序（Event Handler）

2 事件处理程序在JavaScript中对象事件的处理通常由函数(Function)担任其基本格式与函数全部一样可以将前面所介绍的所有函数作为事件处理程序格式如下 Function 事件处理名（参数表）{事件处理语句集 ……}

3 事件驱动JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的它主要有以下几个事件（1）单击事件onClick当用户单击鼠标按钮时产生onClick事件同时onClick指定的事件处理程序或代码将被调用执行通常在下列基本对象中产生 button（按钮对象）checkbox（复选框）或（检查列表框）radio （单选钮）reset buttons（重要按钮）submit buttons（提交按钮）

例可通过下列按钮激活change()文件 <Form><Input type= button Value= onClick= change() ></Form>在onClick等号后可以使用自己编写的函数作为事件处理程序也可以使用JavaScript中内部的函数还可以直接使用JavaScript的代码等例 <Input type= button value= onclick=alert( 这是一个例子）（2）onChange改变事件当利用text或texturea元素输入字符值改变时发该事件同时当在select表格项中一个选项状态改变后也会引发该事件例 <Form><Input type= text name= Test value= Test onCharge= check( this test) ></Form>（3）选中事件onSelect当Text或Textarea对象中的文字被加亮后引发该事件（4）获得焦点事件onFocus当用户单击Text或textarea以及select对象时产生该事件此时该对象成为前台对象（5）失去焦点onBlur当text对象或textarea对象以及select对象不再拥有焦点而退到后台时引发该文件他与onFocas事件是一个对应的关系（6）载入文件onLoad当文档载入时产生该事件 onLoad一个作用就是在首次载入一个文档时检测cookie的值并用一个变量为其赋值使它可以被源代码使用（7）卸载文件onUnload当Web页面退出时引发onUnload事件并可更新Cookie的状态

四范例范例下例程序是一个自动装载和自动卸载的例子即当装入HTML文档时调用loadform()函数而退出该文档进入另一HTML文档时则首先调用unloadform()函数确认后方可进入 <HTML><HEAD><script Language= JavaScript ><! function loadform(){alert( 这是一个自动装载例子! )}function unloadform(){alert( 这是一个卸载例子! )}// ></Script></HEAD><BODY OnLoad= loadform() OnUnload= unloadform() ><a >调用</a></BODY></HTML>　范例这是一个获取浏览器版本号的程序该程序首先显示一个波浪一提示信息之后显示浏览器的版本号有关信息 <><head><script language= JavaScript ><! // >function makeArray(n){this length=nreturn this}function hexfromdec(num) {hex=new makeArray( )var hexstring= var shifthex= var temp =numfor(x= x>= x ) {hex[x]=Math round(temp /shifthex )hex[x ]=temp hex[x] * shifthextemp =hex[x ]shifthex /= }for (x= x>= x ) { hexstring+=getletter(hex[x])}return (hexstring)}　function getletter(num) {if (num <) { return num}else {if (num == ) { return A }if (num == ) { return B }if (num == ) { return C }if (num == ) { return D }if (num == ) { return E }if (num == ) { return F }}}function rainbow(text){var color_d var allstring= for(i= i<text lengthi=i+ ){color_d = *Math sin(i/(text length/ ))color_h =hexfromdec(color_d )allstring+= <FONT COLOR= +color_h + ff +color_h + >+text substring(i i+ )+ </FONT>}return allstring}　function sizefont(text){var color_d var allstring= var flag= for(i= j= i<text lengthi=i+ ){if (flag== ) {j++if (j>= ) {flag= }}if (flag== ) {j=j if (j<= ) {flag= }}allstring+= <FONT SIZE= + j + >+ text substring(i i+ ) + </FONT>}return allstring}document write( <font size= ><CENTER>)document write( <BR><BR>)document write( sizefont( 这是一个获取WEB浏览器的程序 ))document write( </CENTER></font>)document write( 浏览器名称: +navigator appName+ <br>)document write( 版本号: +navigator appVersion+ <br>)document write( 代码名字: +navigator appCodeName+ <br>)document write( 用户代理标识: +navigator userAgent)</script><body></body></>输出结果图所示

图

lishixinzhi/Article/program/Java/JSP/201311/19230

分成几步走：

【第一步】

首先通过视频或者书籍，学习JS的基本语法、基本特性等，

同时了解JS都有哪些内置函数、内置属性等，

建立起对JS都能做什么，它用来做什么，它都能实现什么功能等基本的宏观概念；

【第二步】

给自己预定一个大概可以实现的JS功能，然后试图去完成它，不用非要做到全原创

通过抄袭代码放到你的网页上去，让它可以达到你的要求，其中有一些不符合你要求的地方，对其进行修改，修改的过程中，你就必须要去了解它的功能实现步骤，这个步骤使用得多了，你有脑海里就会建立起一个JS程序编写的流程概念，给自己独立写代码打下基础

这个过程以及第三步甚至是以后，你都需要用到搜索引擎，学习如何使用搜索引擎来准确查找你要实现的某个细节功能；

【第三步】