JavaScript学习笔记.doc_咨信网zixin.com.cn

资源描述

JavaScript 在数百万张页面中，JavaScript被用来改进设计、验证表单、检测浏览器、创建cookies，等等等等。JavaScript是因特网上最流行的脚本语言，并且可以在所有主要的浏览器中运行，比方说Internet、Explorer、Mozilla、Firefox、Netscape和Opera。什么是JavaScript？ l JavaScript被设计用来向HTML页面添加交互行为。 l JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）。 l JavaScript由数行可执行计算机代码组成。 l JavaScript通常被直接嵌入HTML页面。 l JavaScript是一种解释性语言（就是说，代码执行不进行预编译）。 l 所有的人无需购买许可证均可使用JavaScript。 Java和JavaScript是相同的吗？不同！在概念和设计方面，Java和JavaScript是两种完全不同的语言。 JavaScript能做什么？ JavaScript为HTML设计师提供了一种编程工具。 HTML创作者往往都不是程序员，但是JavaScript却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的HTML页面当中。 JavaScript可以将动态的文本放入HTML页面类似于这样一段JavaScript声明可以将一段可变的文本放入HTML页面：document.write(“<h1>”+name+”</h1>”) JavaScript可以对事件作出响应可以将JavaScript设置为当某时间发生时才会被执行，例如页面载入完成或者当用户点击某个HTML元素时。 JavaScript可以读写HTML元素 JavaScript可以读取及改变HTML元素的内容。 JavaScript可被用来验证数据在数据被提交到服务器之前，JavaScript可被用来验证这些数据。 JavaScript可被用来检测访问者的浏览器 JavaScript可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。 JavaScript可被用来创建cookies JavaScript可被用来存储和取回位于访问者的计算机中的信息。真实的名称是ECMAscript JavaScript的正式名称是”ECMAscript”。这个标准由ECMA组织发展和维护。这个标准仍然处于发展中。 HTML的<script>标签用于把JavaScript插入HTML页面当中。如何把JavaScript放入HTML页面 <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> 上面的代码会在HTML页面中产生这样的输出： Hello World! 解释：如果需要把一段JavaScript插入HTML页面，需要使用<script>标签（同时使用type属性来定义脚本语言。这样，<script type=”text/javascript”>和</script>就告诉浏览器JavaScript从何处开始，到何处结束。 <html> <body> <script type="text/javascript"> ... </script> </body> </html> document.write字段是标准的JavaScript命令，用来向页面写入输出。把document.write命令输入到<script type=”text/javascript”>与</script>之间后，浏览器就会把它当作一条JavaScript命令来执行。这样浏览器就会像页面写入”Hello World!”。 <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> 注意：如果不使用<script>标签，浏览器就会把document.write(“Hello World!”)当作纯文本来处理，也就是说会把这条命令本身写到页面上。当页面载入时，会执行位于body部分的JavaScript。当被调用时，位于head部分的JavaScript才会被执行。在哪里放置JavaScript 页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时我们希望当页面载入时执行脚本，而有时我们则希望当用户触发事件时才执行脚本。位于head部分的脚本：当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到head部分后，就可以确保在需要使用脚本之前，它已经被载入了。 <html> <head> <script type="text/javascript"> .... </script> </head> .... 位于body部分的脚本：在页面载入时脚本就会被执行。当你把脚本放置于body部分后，它就会生成页面的内容。 <html> <head> </head> <body> <script type="text/javascript"> .... </script> </body> </html> 在body和head部分的脚本：你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到body，又可以放置到head部分。 <html> <head> <script type="text/javascript"> .... </script> </head> <body> <script type="text/javascript"> .... </script> </body> </html> 使用外部JavaScript 有时，也许希望在若干个页面中运行JavaScript，同时不在每个页面中写相同的脚本。为了达到这个目的，你可以将JavaScript写入一个外部文件之中。然后以.js为后缀保存这个文件。注意：外部文件不能包含<script>标签。然后把.js文件指定给<script>标签中”src”属性，就可以使用这个外部文件了： <html> <head> <script src="xxx.js">....</script> </head> <body> </body> </html> 提示：可以把.js文件放到网站目录中通常存放脚本的子目录中，这样更容易管理和维护。 JavaScript是由浏览器执行的语句序列。 JavaScript语句 JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。这个JavaScript语句告诉浏览器向网页输出”Hello world”: document.write("Hello world"); 通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯，而且在web上的JavaScript案例中也常常会看到这种情况。分号是可选的（根据JavaScript标准），浏览器把行末作为语句的结尾。正因如此，常常会看到一些结尾没有分号的例子。注释：通过使用分号，可以在一行中写多条语句。 JavaScript代码 JavaScript代码是JavaScript语句的序列。浏览器按照编写顺序依次执行每条语句。本例向网页输出一个标题和两个段落： <script type="text/javascript"> document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); </script> JavaScript代码快 JavaScript可以分批地组合起来。代码快以左花括号开始，以右花括号结束。代码快的作用是一并地执行语句序列。本例向网页输出一个标题和两个段落： <script type="text/javascript"> { document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); } </script> 上例的用处不大。仅仅演示了代码快的使用而已。通常，代码块用于在函数或条件语句中把若干语句组合起来（比方说如果条件满足，就可以执行这个语句分组了）。 JavaScript注释可用于增强代码的可读性。 JavaScript注释可添加注释来对JavaScript进行解释，或者提高其可读性。单行的注释以//开始。本例用单行注释来解释代码： <script type="text/javascript"> // 这行代码输出标题： document.write("<h1>This is a header</h1>"); // 这行代码输出段落： document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); </script> JavaScript多行注释多行注释以/*开头，以*/结尾。本例使用多行注释来解释代码： <script type="text/javascript"> /* 下面的代码将输出一个标题和两个段落 */ document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); </script> 使用注释来防止执行在本例中，我们用注释来阻止一行代码的执行： <script type="text/javascript"> document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); //document.write("<p>This is another paragraph</p>"); </script> 在本例中，我们用注释来阻止若干行代码的执行： <script type="text/javascript"> /* document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); */ </script> 在行末使用注释在本例中，注释放置在语句的行末： <script type="text/javascript"> document.write("Hello"); // 输出 "Hello" document.write("World"); // 输出 "World" </script> 变量是用于存储信息的容器：x=5;length=66.10; JavaScript变量正如代数一样，JavaScript变量用于保存值或表达式。可以给变量起一个简短名称，比如x，或者更有描述性的名称，比如length。 JavaScript 变量也可以保存文本值，比如 carname="Volvo"。 JavaScript 变量名称的规则： l 变量对大小写敏感（y和Y是两个不同的变量） l 变量必须以字母或下划线开始注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。声明（创建）JavaScript变量在JavaScript中创建变量经常被成为“声明”变量。可以通过var语句来声明JavaScript变量： var x; var carname; 在以上声明之后，变量并没有值，不过可以在声明它们时向变量赋值： var x=5; var carname=”Volvo”; 注释：在为变量赋文本值时，请为该值加引号。向JavaScript变量赋值通过赋值语句向JavaScript变量赋值： x=5; carname=”Volvo”; 变量名在=符号的左边，而需要向变量赋的值在=的右侧。在以上语句执行后，变量x中保存的值是5，而carname的值是Volvo。向未声明的JavaScript变量赋值如果所赋值的变量还未进行过声明，该变量会自动声明。这些语句： x=5; carname="Volvo"; 与这些语句的效果相同： var x=5; var carname="Volvo"; 重新声明JavaScript变量如果再次声明了JavaScript变量，该变量也不会丢失其原始值。 var x=5; var x; 在以上语句执行后，变量x的值仍然是5。在重新声明该变量时，x的值不会被重置或清除。 JavaScript算术正如代数一样，可以使用JavaScript变量来做算术： y=x-5; z=y+5; 运算符 = 用于赋值。运算符 + 用于加值。运算符=用于给JavaScript变量赋值。算术运算符+用于把值加起来。 y=5; z=2; x=y+z; 在以上语句之行后，x的值是7。 JavaScript算术运算符算术运算符用于执行变量与赋值之间的算术运算。给y=5，下面的表格解释了这些算术运算符：运算符描述例子结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 (保留整数) x=y%2 x=1 ++ 累加 x=++y x=6 -- 递减 x=--y x=4 JavaScript赋值运算符赋值运算符用于给JavaScript变量赋值。给定x=10和y=5，下面的表格见识了赋值运算符：运算符例子等价于结果 = x=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 用于字符串的 + 运算符 + 运算符用于把文本值或字符串变量加起来（连接起来）。如需把两个或多个字符串变量连接起来，请使用 + 运算符。 txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; 在以上语句执行后，变量txt3包含的值是"What a verynice day"。要想在两个字符串之间增加空格，需要把空格插入一个字符串之中： txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; 或者把空格插入表达式中： txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; 在以上语句执行后，变量txt3包含的值是： "What a very nice day" 对字符串和数字进行加法运算请看这些例子： x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x); 规则是：如果把数字与字符串相加，结果将成为字符串。比较和逻辑运算符用于测试true或false。比较运算符比较运算符在逻辑语句中使用，以测定变量或值是否相等。给定x=5，下面的表格解释了比较运算符：运算符描述例子 == 等于 x==8 为 false === 全等（值与类型） x===5 为 true；x==="5" 为 false != 不等于 x!=8 为 true > 大于 x>8 为 false < 小于 x<8 为 true >= 大于或等于 x>=8 为 false <= 小于或等于 x<=8 为 true 如何使用可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动： if(age<18) document.write(“Too young”); 逻辑运算符逻辑运算符用于测定变量或值之间的逻辑。给定x=6以及y=3，下表解释了逻辑运算符：运算符描述例子 && and (x < 10 && y > 1) 为 true || or (x==5 || y==5) 为 false ! not !(x==y) 为 true 条件运算符 JavaScript还包含了基于某些条件对变量进行赋值的条件运算符。语法 variablename=(condition)?value1:value2 例子 greeting=(visitor==”PRES”)?”Dear President”:”Dear”; 如果变量visitor中的值是”PRES”，则想变量greeting赋值”Dear President”，否则赋值”Dear”。 JavaScript中的条件语句用于完成不同条件下的行为。条件语句在编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务。在JavaScript中，可以使用下面几种条件语句： if 语句在一个指定的条件成立时执行代码。 if...else 语句在指定的条件成立时执行代码，当条件不成立时执行另外的代码。 if...else if....else 语句使用这个语句可以选择执行若干块代码中的一个。 switch 语句使用这个语句可以选择执行若干块代码中的一个。 If语句如果希望指定的条件成立时执行代码，就可以使用这个语句。语法： if (条件) { 条件成立时执行代码 } 注意：请使用小写字母。使用大写的IF会出错！实例1 <script type="text/javascript"> //Write a "Good morning" greeting if //the time is less than 10 var d=new Date() var time=d.getHours() if (time<10) { document.write("<b>Good morning</b>") } </script> 实例2 <script type="text/javascript"> //Write "Lunch-time!" if the time is 11 var d=new Date() var time=d.getHours() if (time==11) { document.write("<b>Lunch-time!</b>") } </script> 注意：请使用双等号(==)来比较变量！注意：在语法中没有else。仅仅当条件为true时，代码才会执行。 If…else语句如果希望条件成立时执行一段代码，而条件不成立时执行另一段代码，那么可以使用if…else语句。语法： if (条件) { 条件成立时执行此代码 } else { 条件不成立时执行此代码 } 实例： <script type="text/javascript"> //If the time is less than 10, //you will get a "Good morning" greeting. //Otherwise you will get a "Good day" greeting. var d = new Date() var time = d.getHours() if (time < 10) { document.write("Good morning!") } else { document.write("Good day!") } </script> If…else if…else语句当需要选择多套代码中的一套来运行时，请使用if…else if…else语句。 if (条件1) { 条件1成立时执行代码 } else if (条件2) { 条件2成立时执行代码 } else { 条件1和条件2均不成立时执行代码 } 实例： <script type="text/javascript"> var d = new Date() var time = d.getHours() if (time<10) { document.write("<b>Good morning</b>") } else if (time>10 && time<16) { document.write("<b>Good day</b>") } else { document.write("<b>Hello World!</b>") } </script> JavaScript中的条件语句用于完成基于不同条件的行为。 JavaScript Switch语句如果希望选择执行若干代码快中的一个，可以使用switch语句：语法： switch(n) { case 1: 执行代码块 1 break case 2: 执行代码块 2 break default: 如果n即不是1也不是2，则执行此代码 } 工作原理：switch后面的(n)可以是表达式，也可以（并通常）是变量。然后表达式中的值会与case中的数字做比较，如果与某个case相匹配，那么其后的代码就会被执行。break的作用是防止代码自动执行到下一行。实例： <script type="text/javascript"> //You will receive a different greeting based //on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc. var d=new Date() theDay=d.getDay() switch (theDay) { case 5: document.write("Finally Friday") break case 6: document.write("Super Saturday") break case 0: document.write("Sleepy Sunday") break default: document.write("I'm looking forward to this weekend!") } </script> 可以在JavaScript中创建三种消息框：警告框、确认框、提示框。 JavaScript消息框警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法： alert(“文本”) 实例1： <html> <head> <script type="text/javascript"> function disp_alert() { alert("我是警告框！！") } </script> </head> <body> <input type="button" onclick="disp_alert()" value="显示警告框" /> </body> </html> 实例2（带有折行的警告框）： <html> <head> <script type="text/javascript"> function disp_alert() { alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。") } </script> </head> <body> <input type="button" onclick="disp_alert()" value="显示警告框" /> </body> </html> 确认框确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为true。入股哦用户点击取消，那么返回值为false。语法： confirm(“文本”) 实例： <html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show a confirm box" /> </body> </html> 提示框提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。语法： prompt(“文本”,”默认值”) 实例： <html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("请输入您的名字","Bill Gates") if (name!=null && name!="") { document.write("你好！" + name + " 今天过得怎么样？") } } </script> </head> <body> <input type="button" onclick="disp_prompt()" value="显示提示框" /> </body> </html> 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码快。实例：函数（如何调用函数）： <html> <head> <script type="text/javascript"> function myfunction() { alert("您好！") } </script> </head> <body> <form> <input type="button" onclick="myfunction()" value="调用函数"> </form> <p>通过点击这个按钮，可以调用一个函数。该函数会提示一条消息。</p> </body> </html> 带有参数的函数（如何向函数传递变量，以及如何在函数中使用该变量）： <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <input type="button" onclick="myfunction('您好！')" value="调用函数"> </form> <p>通过点击这个按钮，可以调用一个带参数的函数。该函数会输出这个参数。</p> </body> </html> 带有参数的函数2（如何向函数传递多个变量，以及如何在函数中使用这些变量）： <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <input type="button" onclick="myfunction('早安！')" value="在早晨"> <input type="button" onclick="myfunction('晚安！')" value="在夜晚"> </form> <p>通过点击这个按钮，可以调用一个函数。该函数会输出传递给它的参数。</p> </body> </html> 返回值的函数（如何从函数返回值）： <html> <head> <script type="text/javascript"> function myFunction() { return ("您好，祝您愉快！") } </script> </head> <body> <script type="text/javascript"> document.write(myFunction()) </script> <p>body 部分中的脚本调用一个函数。</p> <p>该函数返回一段文本。</p> </body> </html> 带有参数并返回值的函数（如何想函数输入两个参数值，并返回值）： <html> <head> <script type="text/javascript"> function product(a,b) { return a*b } </script> </head> <body> <script type="text/javascript"> document.write(product(6,5)) </script> <p>body 部分中的脚本调用一个带有两个参数（6 和 5）的函数。</p> <p>该函数会返回这两个参数的乘积。</p> </body> </html> JavaScript函数将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的.js文件，那么甚至可以从其他的页面中调用）。函数在页面起始位置定义，即<head>部分。 <html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!") } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" > </form> </body> </html> 假如上面的例子中的alert(“Hello world!!”)没有被写入函数，那么当页面被载入时它就会执行。现在，当用户击中按钮时，脚本才会执行。我们给按钮添加了onClick事件，这样按钮被点击时函数才会执行。如何定义函数创建函数的语法： function 函数名(var1,var2,...,varX) { 代码．．． } var1,var2等指的是传入函数的变量或值。” { “ 和 ” } ”定义了函数的开始和结束。注意：无参数的函数必须在其函数名后加括号： function 函数名() 　　{ 　　代码．．．　　} 注意：别忘记JavaScript中大小写字母的重要性。”function”这个词必须是小写，否则JavaScript就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。 return语句 return语句用来规定从函数返回的值。因此，需要返回某个值的函数必须使用这个return语句。例子：下面的函数会返回两个数相乘的值(a和b): function prod(a,b) { x=a*b return x } 当您调用上面这个函数时，必须传入两个参数： product=prod(2,3) 而从prod()函数的返回值是6，这个值会存储在名为product的变量中。 JavaScript变量的生存期当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。 JavaScript中的循环用来将同一段代码执行指定的次数（或者当指定的条件为true时）。实例： For循环（如何编写loop循环来按照指定的次数执行相同的代码）： <html> <body> <script type="text/javascript"> for (i = 0; i <= 5; i++) { document.write("数字是 " + i) document.write("<br />") } </script> <h1>解释：</h1> <p>for 循环的步进值从 i=0 开始。</p> <p>只要 <b>i</b> 小于等于 5，循环就会继续运行。</p> <p>循环每循环一次，<b>i</b> 就会累加 1。</p> </body> </html> 循环产生HTML标题（如何使用loop循环来产生不同的HTML标题）： <html> <body> <script type="text/javascript"> for (i = 1; i <= 6; i++) { documen

展开阅读全文