PDFￗﾪﾻﾻￆ￷

Size: px

Start display at page:

Download "PDFￗﾪﾻﾻￆ￷"

辅步
5 years ago
Views:

1 JS 变量变量是用于存储信息的容器 : x=5; length=66.10; 还记得在学校里学过的代数吗? 当您回忆在学校学过的代数课程时, 想到的很可能是 :x=5, y=6, z=x+y 等等还记得吗, 一个字母可以保存一个值 ( 比如 5), 并且可以使用上面的信息计算出 z 的值是 11 您一定没有忘记, 对吧这些字母称为变量, 变量可用于保存值 (x=5) 或表达式 (z=x+y) JavaScript 变量正如代数一样,JavaScript 变量用于保存值或表达式可以给变量起一个简短名称, 比如 x, 或者更有描述性的名称, 比如 length JavaScript 变量也可以保存文本值, 比如 carname="volvo" JavaScript 变量名称的规则 : 变量对大小写敏感 (y 和 Y 是两个不同的变量 ) 变量必须以字母或下划线开始注释 : 由于 JavaScript 对大小写敏感, 变量名也对大小写敏感实例在脚本执行的过程中, 可以改变变量的值可以通过其名称来引用一个变量, 以此显示或改变它的值

2 声明 ( 创建 ) 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"; 与这些语句的效果相同 :

3 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 变量间使用的运算符

4 JavaScript 运算符运算符 = 用于赋值运算符 + 用于加值运算符 = 用于给 JavaScript 变量赋值算术运算符 + 用于把值加起来 JavaScript 算术运算符 y=5 JavaScript 赋值运算符

5 用于字符串的 + 运算符 + 运算符用于把文本值或字符串变量加起来 ( 连接起来 ) 对字符串和数字进行加法运算规则是 : 如果把数字与字符串相加, 结果将成为字符串

6 JavaScript 比较和逻辑运算符比较和逻辑运算符用于测试 true 或 false 比较运算符比较运算符在逻辑语句中使用, 以测定变量或值是否相等给定 x=5, 下面的表格解释了比较运算符 : 逻辑运算符逻辑运算符用于测定变量或值之间的逻辑给定 x=6 以及 y=3, 下表解释了逻辑运算符 :

7 条件运算符 JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符语法 variablename=(condition)?value1:value2 例子 greeting=(visitor=="pres")?"dear President ":"Dear "; 如果变量 visitor 中的值是 "PRES", 则向变量 greeting 赋值 "Dear President ", 否则赋值 "Dear" JavaScript 消息框警告框警告框经常用于确保用户可以得到某些信息当警告框出现后, 用户需要点击确定按钮才能继续进行操作语法 : alert(" 文本 ") 确认框确认框用于使用户可以验证或者接受某些信息当确认框出现后, 用户需要点击确定或者取消按钮才能继续进行操作如果用户点击确认, 那么返回值为 true 如果用户点击取消, 那么返回值为 false 语法 : confirm(" 文本 ") 带有折行的警告框 alert(" 再次向您问好! 在这里, 我们向您演示 " + '\n' + " 如何向警告框添加折行 ")

8 提示框 : 提示框经常用于提示用户在进入页面前输入某个值当提示框出现后, 用户需要输入某个值, 然后点击确认或取消按钮才能继续操纵如果用户点击确认, 那么返回值为输入的值如果用户点击取消, 那么返回值为 null 语法 : prompt(" 文本 "," 默认值 ") JavaScript 函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 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 事件, 这样按钮被点击时函数才会执行

9 如何定义函数创建函数的语法 : function 函数名 (var1,var2,...,varx) { 代码... } var1, var2 等指的是传入函数的变量或值 { 和 } 定义了函数的开始和结束注意 : 无参数的函数必须在其函数名后加括号 : function 函数名 () { 代码... } return 语句 return 语句用来规定从函数返回的值因此, 需要返回某个值的函数必须使用这个 return 语句例子 1 下面的函数会返回两个数相乘的值 (a 和 b): function prod(a,b) { x=a*b return x } 返回到哪里?????????? 2 当您调用上面这个函数时, 必须传入两个参数 : product=prod(2,3) 而从 prod() 函数的返回值是 6, 这个值会存储在名为 product 的变量中 JavaScript 变量的生存期当您在函数内声明了一个变量后, 就只能在该函数中访问该变量当退出该函数后, 这个变量会被撤销这种变量称为本地变量您可以在不同的函数中使用名称相同的本地变量, 这是因为只有声明过变量的函数能够识别其中的每个变量

10 如果您在函数之外声明了一个变量, 则页面上的所有函数都可以访问该变量这些变量的生存期从声明它们之后开始, 在页面关闭时结束. JavaScript 事件事件 JavaScript 使我们有能力创建动态页面事件是可以被 JavaScript 侦测到的行为网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件比方说, 我们可以在用户点击某按钮时产生一个 onclick 事件来触发某个函数事件在 HTML 页面中定义 * 鼠标点击 * 页面或图像载入 * 鼠标悬浮于页面的某个热点之上 * 在表单中选取输入框 * 确认表单 * 键盘按键 onload 和 onunload 当用户进入或离开页面时就会触发 onload 和 onunload 事件 onload 事件常用来检测访问者的浏览器类型和版本, 然后根据这些信息载入特定版本的网页 onload 和 onunload 事件也常被用来处理用户进入或离开页面时所建立的 cookies 例如, 当某用户第一次进入页面时, 你可以使用消息框来询问用户的姓名姓名会保存在 cookie 中当用户再次进入这个页面时, 你可以使用另一个消息框来和这个用户打招呼 :"Welcome John Doe!"

11 onfocus, onblur 和 onchange onfocus onblur 和 onchange 事件通常相互配合用来验证表单下面是一个使用 onchange 事件的例子用户一旦改变了域的内容,check () 函数就会被调用 <input type="text" size="30" id=" " onchange="check ()"> onsubmit onsubmit 用于在提交表单之前验证所有的表单域下面是一个使用 onsubmit 事件的例子当用户单击表单中的确认按钮时,checkForm() 函数就会被调用假若域的值无效, 此次提交就会被取消 checkform() 函数的返回值是 true 或者 false 如果返回值为 true, 则提交表单, 反之取消提交 <form method="post" action="xxx.htm" onsubmit="return checkform()"> onmouseover 和 onmouseout onmouseover 和 onmouseout 用来创建动态的按钮下面是一个使用 onmouseover 事件的例子当 onmouseover 事件被脚本侦测到时, 就会弹出一个警告框 : <a href=" onmouseover="alert('an onmouseover event');return false"> <img src="w3school.gif" width="100" height="30"> </a> JavaScript 特殊字符插入特殊字符反斜杠用来在文本字符串中插入省略号换行符引号和其他特殊字符请看下面的 JavaScript 代码 :

$write(txt) 在 JavaScript 中, 字符串使用单引号或者双引号来起始或者结束这意味着上面的字符串将被截为 :We are the so-called 要解决这个问题, 就必须把在 "Viking" 中的引号前面加上反斜杠 (\) 这样就可以把每个双引号转换为字面上的字符串 var txt="we are the so-called \"Vikings\" from the$

12 var txt="we are the so-called "Vikings" from the north." document.write(txt) 在 JavaScript 中, 字符串使用单引号或者双引号来起始或者结束这意味着上面的字符串将被截为 :We are the so-called 要解决这个问题, 就必须把在 "Viking" 中的引号前面加上反斜杠 (\) 这样就可以把每个双引号转换为字面上的字符串 var txt="we are the so-called \"Vikings\" from the north." document.write(txt) 现在 JavaScript 就可以输出正确的文本字符串了 :We are the so-called "Vikings" from the north 这是另一个例子 : document.write ("You \& me are singing!") 上面的例子会产生以下输出 : You & me are singing! 下面的表格列出了其余的特殊字符, 这些特殊字符都可以使用反斜杠来添加到文本字符串中 :

13 JavaScript 指导方针 JavaScript 对大小写敏感名为 "myfunction" 的函数和名为 "myfunction" 的函数是两个不同的函数, 同样, 变量 "myvar" 和变量 "myvar" 也是不同的空格 JavaScript 会忽略多余的空格所以您可以在代码中添加适当的空格, 使得代码的可读性更强下面的两行是等效的 : name="hege" name = " Hege" 换行您可以在文本字符串内部使用反斜杠对代码进行折行下面的例子是正确的 : document.write("hello \ World!") 但是不能像这样折行 : document.write \ ("Hello World!") JavaScript 对象简介注意 : 对象只是一种特殊的数据对象拥有属性和方法内建的 JavaScript 对象

14 属性属性指与对象有关的值在下面的例子中, 我们使用字符串对象的长度属性来计算字符串中的字符数目 <script type="text/javascript"> var txt="hello World!" document.write(txt.length) </script> 上面的代码输出为 :12 方法方法指对象可以执行的行为 ( 或者可以完成的功能 ) 在下面的例子中, 我们使用字符串对象的 touppercase() 方法来显示大写字母文本 <script type="text/javascript"> var str="hello world!" document.write(str.touppercase()) </script> 上面的代码输出为 : HELLO WORLD! JavaScript 字符串 (String) 对象 String 对象用于处理已有的字符块

15 JavaScript Date( 日期 ) 对象定义日期

16 Date 对象用于处理日期和时间可以通过 new 关键词来定义 Date 对象以下代码定义了名为 mydate 的 Date 对象 : 操作日期通过使用针对日期对象的方法, 我们可以很容易地对日期进行操作在下面的例子中, 我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日 ): var mydate=new Date() mydate.setfullyear(2008,7,9) 比较日期日期对象也可用于比较两个日期下面的代码将当前日期与 2008 年 8 月 9 日做了比较 : var mydate=new Date(); mydate.setfullyear(2008,7,9); var today = new Date(); if (mydate>today) { alert("today is before 9th August 2008"); } else { alert("today is after 9th August 2008"); } JavaScript Array( 数组 ) 对象数组对象的作用是 : 使用单独的变量名来存储一系列的值

17 1: var mycars=new Array() mycars[0]="saab" mycars[1]="volvo" mycars[2]="bmw" 也可以使用一个整数自变量来控制数组的容量 : var mycars=new Array(3) mycars[0]="saab" mycars[1]="volvo" mycars[2]="bmw" 2: var mycars=new Array("Saab","Volvo","BMW") 访问数组通过指定数组名以及索引号码, 你可以访问某个特定的元素下面是代码行 : document.write(mycars[0]) 下面是输出 : Saab 修改已有数组中的值如需修改已有数组中的值, 只要向指定下标号添加一个新值即可 : mycars[0]="opel"; 现在, 以上代码 : document.write(mycars[0]); 将输出 : Opel JavaScript Boolean( 逻辑 ) 对象 Boolean 对象

18 您可以将 Boolean 对象理解为一个产生逻辑值的对象包装器 Boolean( 逻辑 ) 对象用于将非逻辑值转换为逻辑值 (true 或者 false) JavaScript Math( 算数 ) 对象 Math( 算数 ) 对象的作用是 :

19 执行常见的算数任务 Math 对象 Math( 算数 ) 对象的作用是 : 执行普通的算数任务 Math 对象提供多种算数值类型和函数无需在使用这个对象之前对它进行定义算数值 JavaScript 提供 8 种可被 Math 对象访问的算数值 : * 常数 * 圆周率 * 2 的平方根 * 1/2 的平方根 * 2 的自然对数 * 10 的自然对数 * 以 2 为底的 e 的对数 * 以 10 为底的 e 的对数这是在 Javascript 中使用这些值的方法 :( 与上面的算数值一一对应 ) * Math.E * Math.PI * Math.SQRT2 * Math.SQRT1_2 * Math.LN2 * Math.LN10 * Math.LOG2E * Math.LOG10E 算数方法除了可被 Math 对象访问的算数值以外, 还有几个函数 ( 方法 ) 可以使用函数 ( 方法 ) 实例 : 下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入 document.write(math.round(4.7)) 上面的代码输出为 :5 数 : 下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机 document.write(math.random())

20 上面的代码输出为 :

21 JavaScript RegExp 对象 RegExp 对象用于规定在文本中检索的内容检索的内容什么是 RegExp? RegExp 是正则表达式的缩写当您检索某个文本时, 可以使用一种模式来描述要检索的内容 RegExp 就是这种模式简单的模式可以是一个单独的字符更复杂的模式包括了更多的字符, 并可用于解析格式检查替换等等您可以规定字符串中的检索位置, 以及要检索的字符类型, 等等

PowerPoint 演示文稿

PowerPoint 演示文稿按钮对象 (button) 当 JavaScript 读到标记中的 type 属性值为 button 时, 自动建立一个按钮对象, 并将该对象放到表单对象的 elements 数组当中按钮对象包括 : 普通按钮 (button) 提交按钮 (submit) 重置按钮 (reset) 1. 使用按钮对象的格式 document.forms[ 索引值 ].elements[ 索引值