javascript教程

JavaScript讲义LAMP兄弟连—杨永胜Javascript的作用•实现网页的动态效果•例如：下拉菜单、用户验证、滚动文字与图片，•与php搭配可以实现一些高级的应用，•比如去哪儿网的地名拼音查询到地名全名Javascript与java•是两个公司开发的不同的产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发，服务器端语言，与数据库打交道；•而JavaScript是Netscape公司的产品，javaScript是一种浏览器脚本语言，由客户端浏览器解析执行。课程结构•JavaScript的基本语法•运算符•程序的流程控制•函数•对象•JavaScript的内部对象•专门用于对象的语句•数组如何将javascript嵌入网页•方法一：嵌入html页面•scripttype=“text/javascrpt”/script•可以放在head/head之间•也可以放在body/body内部•尽管也可以放在html之前或/html之后，但web标准并不提倡这样做•IE与FF默认脚本语言就是javascript，所以type经常省略第一个javascript程序•范例t1.html•动态改变网页背景如何将javascript嵌入网页•方法二：链接外部的js文件•scriptsrc=“aa.js”/script•使用外部文件优点：•1、最大限度的实现重用，方便维护；•2、浏览器会缓存，如果文件大，节省下载时间。如何将javascript嵌入网页ahref=“javascript:alert(newDate());”javascript/ainputtype=buttonvalue=testonclick=“alert(newDate())”Javascript错误调试•错误调试：•FF安装firebug插件；•IE点击黄色小叹号标；•显然firebug能够更详细的阐述错误信息JavaScript的基本语法•JavaScript中的标识符–标识符是指JavaScript中定义的符号，例如，变量名，函数名，数组名等。标识符可以由任意顺序的大小写字母、数字、下划线（_）和美元符号（$）组成，但标识符不能以数字开头，不能是JavaScript中的保留关键字。–合法的标识符举例：indentifler、username、user_name、_userName、$username–非法的标识符举例：int、98.3、HelloWorldJavaScript的基本语法•JavaScript严格区分大小写–computer和Computer是两个完全不同的符号•JavaScript程序代码的格式–每条功能执行语句的最后必须用分号（;）结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开。•JavaScript程序的注释–/*…….*/中可以嵌套“//”注释，但不能嵌套“/*….*/”JavaScript中保留的关键字abstractbooleanbreakbytecasecatchcharclasscontinuedefaultifforfloatfinallyfinalfalseextendselsedoubledoimplementsimportinstanceintinterfacelongnativenewnullbackagethissynchronizedswitchsuperstaticshortreturnpublicprotectedprivatethrowthrowstransienttruetryvoidvolatilewhile基本数据类型1数值数据（number）•a)整数–十六进制以0x或0X开头，例如0x8a。–八进制必须以0开头，例如：0123。–十进制的第一位不能是0（数字0除外），例如：123。–整型数据范围：-253~253，所以，一般不用考虑其范围问题•b)小数–12.32、192.98、5E7、4e5等。基本数据类型2文本数据（string）–“thisisJavaScriptppt”、’abc’、“a”、“”。–字符串中的特殊字符，需要以反斜杠（\）后跟一个普通字符来表示，例如：–\r（回车符）、\n（换行符）\t（制表符）、–\’、\”、\\.单引号或双引号需要配对使用，另字符串包含单引号或双引号，需要转义基本数据类型布尔值（boolean）–true和false.真与假•强制数据类型转换：-字符串转换为数字：parseInt(12abc);转换结果为：12；变量•定义一个变量，系统就会为之分配一块内存，程序可以用变量名来表示这块内存中的数据•声明变量要使用var关键字–例如：varname=“abc”;•声明变量的同时为其赋值–例如：name=“zhangsan”;•对已赋值的变量赋予一个其他类型的数据–例如：name=1243;•不事先声明变量而直接使用–例如：x=1234;变量类型•变量类型测试：•使用typeof（）;•undefined（变量申明却未赋值的数据类型）运算符•算术运算符•赋值运算符•比较运算符•逻辑运算符•位运算符算术运算符•+加法运算符或正值运算符，例如：x+5，＋6。“+”还能实现多个字符串的相加，也能将字符串与其它的数据类型连成一个新的字符串，条件是该表达式中至少有一个字符串，例如：“x”+123的结果是“x123”.（范例）•-减法运算符或负值运算符，例如：7–3,-8.•*乘法运算符，例如：3*6.•/除法运算符，例如，9/4.•%求模运算符（也就算术中的求余）5/2.算术运算符•++将变量值加1后再将结果赋给这个变量。“＋＋”有两种用法：++x,x++.前者是变量在参与其它运算之前先将自己加1后再用新的值参与其它的运算，而后者是先用原值参与其它运算后，再将自己加1，例如：b=++a是a先自增，即a的值加1后，才赋值给b;而b=a++是先将a赋值给b后，a再自增。•--将变量值减1后再将结果赋给这个变量，与++的用法一样。赋值运算符赋值运算符的作用是将一个值赋给一个变量，最常用的赋值运算符是“=”。还可以由“=”赋值运算符和其它一些运算符组合产生一些新的赋值运算符，例如，“+=”,”*=”等。•=将一个值或表达式的结果赋给变量例如：x=3;•+=例如：x+=3等价于x=x+3;•-=例如：x-=3等价于x=x–3;•*=例如：x*=3等价于x=x*3;•/=例如：x/=3等价于x=x/3;•%=例如：x%=3等价于x=x%3;比较运算符•常见的比较运算符号：•==!===•注意：不要将比较运算符“＝＝”误写成“＝”。逻辑运算符•&&–逻辑与，当左右两边操作数都为true时，返回true,否则返回false.•||–逻辑或，当左右两边操作数都为false时，返回false,否则返回true.•!–逻辑非，当操作数为true时返回false,否则返回true.位运算符•任何信息在计算机中都是以二进制的形式保存的，位运算用于对操作数中的每一个二进制位进行运算，包括位逻辑运算符和位移运算符。•&两边操作数转换为二进制按位与；•|两边操作数转换为二进制按位或；•^两边操作数转换为二进制按位异或；程序的流程控制•顺序结构•if条件选择语句•switch选择语句•while循环语句•dowhile语句•for循环语句•break与continue语句If条件选择语句1、if(条件语句){执行语句;}•多加：if(x==null)或if(typeof(x)==“undefined”)可以简写成if(!x).2、if(条件语句）{执行语句块1;}else{执行语句2;}（范例9：闰年）•多加：变量＝布尔表达式?语句1：语句2;•例如：y=x0?x:-x;If条件选择语句3、if(条件语句1){执行语句1;}elseif(条件语句2){执行语句2;}…………elseif(条件语句n){执行语句n;}else{执行语句n+1;}（范例10：问好）If语句的嵌套if(x1){if(y==1)alert(“x1,y==1”);elsealert(“x1,y!=1”);}elseif(x10){if(y==1)alert(“x10,y==1”);elsealert(“x10,y!=1”);}（范例11：退休）Switch选择语句switch(表达式){case取值1：语句块1;break;case取值2：语句块2;break;………….case取值n：语句块n;break;defaule：语句块n+1;break;}（范例：星期几）Varx=2;Switch(x){case1:alert(“monday”);break;case2:alert(“Tuesday”);break;case3:alert(“wendnesday”);break;default:alert(“sorry,Idon’tknow”);}Case1:Case2:Case3:Case4:Case5:alert(“workingday”);break;Default:alert(“offday”);While循环语句while(条件表达式语句){执行语句块;}（范例：表格）varx=1;while(x3)//如果加上分号会怎样呢？{alert(“x=”+x);x++;}dowhile语句do{执行语句块;}while(条件表达式语句）;注意：条件不满足时，dowhile至少执行一次for循环语句for(初始化表达式;循环条件表达式;循环后的操作表达式){执行语句块;}scriptlanguage=“javascript”varoutput=“”;for(varx=1;x10;x++){output=output+“x=”+x;}alert(output);/script（范例：for双变量、99乘法表）break与continue语句break语句：st:while(true){while(true){breakst;}}continue语句：varoutput=“”;for(varx=1;x10;x++){if(x%2==0)continue;output=output+”x=”+x;}alert(output);函数•函数的作用与定义•全局变量与局部变量•参数个数可变的函数•创建动态函数•JavaScript中的系统函数函数的作用。。。。。。。。。。函数1。。。。。。。。。。函数2。。。。。。。。。。函数1。。。。。。。。。。主程序。。。。。函数3。。。。。。。。。函数1。。。。。。。。。。。。函数2。。。。。。。。。。。。函数3函数的定义与调用•定义一个函数的格式如下：function函数名（参数列表）{程序代码：return表达式;}•对函数进行调用的同种方式：1.函数名（传递给函数的参数1,传递给函数的参数2,…）2.变量＝函数名（传递给函数的参数1,传递给函数的参数2,…）3.对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert(“sum=”+square(2,3));scriptlanguage=“javascript”varmsg=“全局变量”;functionsquare(x,y){varsum;sum=x*x+y*y;returnsum;}functionshow(){varmsg=“局部变量”;alert(msg);}//varsum;alert(“sum”+sum);sum=square(2,3);alert(“sum=”+sum);show();/script全局变量与局部变量的比较scriptlanguang=“javascript”varmsg=“全局变量”;functionshow(){//varmsg;msg=“局部变量”;}show();alert(msg);/script结果是什么？参数