JS学习笔记

JavaScript有何特点JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，主要用于创建具有交互性较强的动态页面。主要具有如下特点：�基于对象：JavaScript是基于对象的脚本编程语言，能通过DOM（文档结构模型）及自身提供的对象及操作方法来实现所需的功能。�事件驱动：JavaScript采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗口事件等，并执行指定的操作。�解释性语言：JavaScript是一种解释性脚本语言，无需专门编译器编译，而是在嵌入JavaScript脚本的HTML文档载入时被浏览器逐行地解释，大量节省客户端与服务器端进行数据交互的时间。�实时性：JavaScript事件处理是实时的，无须经服务器就可以直接对客户端的事件做出响应，并用处理结果实时更新目标页面。�动态性：JavaScript提供简单高效的语言流程，灵活处理对象的各种方法和属性，同时及时响应文档页面事件，实现页面的交互性和动态性。�跨平台：JavaScript脚本的正确运行依赖于浏览器，而与具体的操作系统无关。只要客户端装有支持JavaScript脚本的浏览器，JavaScript脚本运行结果就能正确反映在客户端浏览器平台上。�开发使用简单：JavaScript基本结构类似C语言，采用小程序段的方式编程，并提供了简易的开发平台和便捷的开发流程，就可以嵌入到HTML文档中供浏览器解释执行。同时JavaScript的变量类型是弱类型，使用不严格。�相对安全性：JavaScript是客户端脚本，通过浏览器解释执行。它不允许访问本地的硬盘，并且不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失。JavaScript能做什么1.表单验证使用JavaScript脚本语言能有效验证客户端提交的表单上数据的合法性，如数据合法则执行下一步操作，否则返回错误提示信息，如图2.网页特效使用JavaScript脚本语言，结合DOM和CSS能创建绚丽多彩的网页特效，如火焰状闪烁文字、文字环绕光标旋转等。火焰状闪烁文字效果如图3.交互式菜单使用JavaScript脚本可以创建具有动态效果的交互式菜单，完全可以与falsh制作的页面导航菜单相媲美。如图4.动态页面使用JavaScript脚本可以对Web页面的所有元素对象进行访问并使用对象的方法访问并修改其属性实现动态页面效果，其典型应用如网页版俄罗斯方块、扑克牌游戏等。如图5.数值计算JavaScript脚本将数据类型作为对象，并提供丰富的操作方法使得JavaScript用于数值计算。如图JavaScript编程起步“HelloWorld！”程序像学习C、Java等其他语言一样，先来看看使用JavaScript脚本语言编写的“HelloWorld!”程序：//源程序1.1!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.0//EN=content-typecontent=text/html;charset=gb2312titleSamplePage!/title/headbodybrcenterscriptlanguage=javascript1.2type=text/javascriptdocument.write(HelloWorld!);/script/center/body/html将上述代码保存为.html(或.html)文件并双击打开，系统调用默认浏览器解释执行，结果如图JavaScript脚本编程一般分为如下步骤：�选择JavaScript语言编辑器编辑脚本代码；�嵌入该JavaScript脚本代码到HTML文档中；�选择支持JavaScript的浏览器浏览该HTML文档；�如果错误则检查并修正源代码，重新浏览，此过程重复直至代码正确为止；�处理不支持JavaScript脚本的情况。HTML标记的核心事件，如onclick（单击按钮）、ondbclick、onkeydown、onkeypress、onkeyup、onmousedown、onmousemove、onmouseover、onmouseout等鼠标和键盘触发事件。查看浏览器版本htmlheadmetahttp-equiv=content-typecontent=text/html;charset=gb2312titleSamplePage！/titlescriptlanguage=javascripttype=text/javascriptfunctionPrintVersion(){varmsg=;msg+=浏览器名称:+navigator.appName+\n;msg+=浏览器版本:+navigator.appVersion+\n;msg+=浏览器代码:+navigator.appCodeName+\n;alert(msg);}/script/headbodybrcenterp鼠标单击按钮显示当前浏览器的版本信息/pformname=MyForminputtype=buttonname=MyButtonvalue=鼠标单击onclick=PrintVersion()/form/center/body/html程序运行后，面单JavaScript语言基础项目简要说明举例Token(语言符号)Javascrip脚本语言中最小的词汇单元，是一个字符序列6，“Iamaboy”，所有的标识符和关键字Literal(常量)拥有固定值的表达式6，“Iamaboy”，[1，2，3]Identifer(标识符)变量、函数、对象等的名称num，alert，yourSexExpression(表达式)标识符、运算符等组合起来的一个语句，返回该语句执行特定运算后的值x+1，(num+1)/5Statement(语句)达到某个特定目的的强制性命令，脚本程序由多个语句构成varnum=5；functionsum(x,y){result=x+y;return(result);}Keyword(关键字)作为脚本语言一部分的字符串，不能用作标识符使用if，for，var，functionReserved(保留字)有可能作为脚本语言一部分的字符串，但并不严格限制其不能作为标识符const，short，long脚本执行顺序JavaScript脚本解释器将按照程序代码出现的顺序来解释程序语句，因此可以将函数定义和变量声明放在head和/head之间，此时与函数体相关的操作不会被立即执行。大小写敏感JavaScript脚本程序对大小写敏感，相同的字母，大小写不同，代表的意义也不同，如变量名name、Name和NAME代表三个不同的变量名。在JavaScript脚本程序中，变量名、函数名、运算符、关键字、对象属性等都是对大小写敏感的。同时，所有的关键字、内建函数以及对象属性等的大小写都是固定的，甚至混合大小写，因此在编写JavaScript脚本程序时，要确保输入正确，否则不能达到编写程序的目的。空白字符空白字符包括空格、制表符和换行符等，在编写脚本代码时占据一定的空间，但脚本被浏览器解释执行时无任何作用。脚本程序员经常使用空格作为空白字符，JavaScript脚本解释器是忽略任何多余空格的。考察如下赋值语句：s=s+5;以及代码：s=s+5;上述代码的运行结果相同，浏览器解释执行第一个赋值语句时忽略了其中的空格。值得注意的是，浏览器解释执行脚本代码时，并非语句中所有的空格均被忽略掉。考察如下变量声明：x=typeofy;x=typeofy;上面这两行代码代表的意义是不同的。第一行是将运算符typeof作用在变量y上，并将结果赋值给变量x；而第二行是直接将变量typeofy的值赋给了x，两行代码的意义完全不同。在编写JavaScript脚本代码时经常使用一些多余的空格来增强脚本代码的可读性，并有助于专业的JavaScript脚本程序员（或者非专业人员）查看代码结构，同时有利于脚本代码的日后维护。变量作用域要讨论变量的作用域，首先要清楚全局变量和局部变量的联系和区别：�全局变量：可以在脚本中的任何位置被调用，全局变量的作用域是当前文档中整个脚本区域。�局部变量：只能在此变量声明语句所属的函数内部使用，局部变量的作用域仅为该函数体。声明变量时，要根据编程的目的决定将变量声明为全局变量还是局部变量。一般而言，保存全局信息（如表格的原始大小、下拉框包含选项对应的字符串数组等）的变量需声明为全局变量，而保存临时信息（如待输出的格式字符串、数学运算中间变量等）的变量则声明为局部变量。考察如下代码：//源程序2.1!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.0//EN=Content-Typecontent=text/html;charset=gb2312titleSamplePage!/titlescriptlanguage=JavaScripttype=text/javascript!--vartotal=100;functionadd(num){vartotal=2*num;alert(\n局部变量:\n\ntotal=+total+\n);returntrue;}--/script/headbodyonload=add(total)centerforminputtype=buttonvalue=局部和全局变量测试onclick=javascript:alert('\n全局变量:\n\ntotal='+total+'\n');/form/center/body/html浏览器载入上述代码后，弹出警告框显示局部变量total的值，弱类型JavaScript脚本语言像其他程序语言一样，其变量都有数据类型，具体数据类型将在下一节中介绍。高级程序语言如C++、Java等为强类型语言，与此不同的是，JavaScript脚本语言是弱类型语言，在变量声明时不需显式地指定其数据类型，变量的数据类型将根据变量的具体内容推导出来，且根据变量内容的改变而自动更改，而强类型语在变量声明时必须显式地指定其数据类型。变量声明时不需显式指定其数据类型既是JavaScript脚本语言的优点也是缺点，优点是编写脚本代码时不需要指明数据类型，使变量声明过程简单明了；缺点就是有可能造成因微妙的拼写不当而引起致命的错误。htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312titleSamplePage!/titlescriptlanguage=JavaScripttype=text/javascript!--//弱类型测试函数functionTest(){varmsg=\n弱类型语言测试:\n\n;msg+=''600''*5=+('600'*6)+\n;msg+=''600''-5=+('600'-5)+\n;msg+=''600''/5=+('600'/5)+\n;msg+=''600''+5=+('600'+5)+\n;alert(msg);}--/script/headbodycenterforminputtype=buttonvalue=弱类型测试onclick=Test()/form/center/body/html程序运行后，在原始页面单击“弱