113WebJavaScript.docx

1、113WebJavaScript JavaScript 简介JavaScript 是脚本语言JavaScript 是世界上最流行的编程语言JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。1.JavaScript：写入 HTML 输出实例document.write(This is a heading);document.write(This is a paragrap

2、h);2.JavaScript：对事件作出反应alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。onclick 单击事件。3.JavaScript：改变 HTML 内容使用 JavaScript 来处理 HTML 内容是非常强大的功能。x=document.getElementById(demo) /查找元素x.innerHTML=Hello JavaScript; /改变内容您会经常看到 document.getElementByID(some id)。这个方法是 HTML DOM 中定义的。DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标

3、准。4.JavaScript：改变 HTML 图像JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。JavaScript：改变 HTML 样式改变 HTML 元素的样式，属于改变 HTML 属性的变种。x=document.getElementById(demo) /找到元素x.style.color=#ff0000; /改变样式5.JavaScript：验证输入JavaScript 常用于验证用户的输入。if isNaN(x) alert(Not Numeric);6.提示：JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。Java

4、（由 Sun 发明）是更复杂的编程语言。ECMA-262 是 JavaScript 标准的官方名称。JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。 JavaScript 使用HTML 中的脚本必须位于 与 标签之间。脚本可被放置在 HTML 页面的 和 部分中。1. 标签如需在 HTML 页面中插入 JavaScript，请使用 标签。 和 会告诉 JavaScript 在何处开始和结束。 和 之间的代码行包含了 JavaScript：alert(My Firs

5、t JavaScript);您无需理解上面的代码。只需明白，浏览器会解释并执行位于 和 之间的 JavaScript。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。 中的 JavaScript在本例中，JavaScript 会在页面加载时向 HTML 的 写文本：document.write(This is a heading);document.write(This is a paragraph);2.JavaScript 函数和事件上面例子中的 JavaScript 语句，会在页面加载时执行。通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们

6、把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。 或 中的 JavaScript提示：我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 元素创建之后再执行脚本。3.外部的 JavaScript也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 标签的 src 属性中设置该 .js 文件：在 或 中引用脚本文件都是可以的。实际运行效果与您在 标签中编写脚本完全一致。提示：外部脚本不能包含 标签。Insert title here /js注释可以这样 /*也可

7、以这样*/ /1.js中的函数都是公有的 /2.js的函数返回值类型不用声明 function f2() /js中单引号和双引号作用相同 alert(范传奇); JavaScript 输出JavaScript 通常用于操作 HTML 元素。如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。请使用 id 属性来标识 HTML 元素：通过指定的 id 来访问 HTML 元素，并改变其内容：My First Paragraphdocument.getElementById(demo).innerHTML=My First

8、 JavaScript;JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id=demo 的 HTML 元素，并把它的内容（innerHTML）替换为 My First JavaScript。警告请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：Windows 8 中的 JavaScript提示：微软支持通过 JavaScript 创建 Windows 8 app。对于因特网和视窗操作系统，JavaScript 都意味着未来。 JavaScript 语句JavaScr

9、ipt 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。下面的 JavaScript 语句向 id=demo 的 HTML 元素输出文本 Hello World：document.getElementById(demo).innerHTML=Hello World;分号 ;分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条语句。在 JavaScript 中，用分号来结束语句是可选的。1.JavaScript 代码JavaScript 代码（或者只有 JavaScript）是 JavaScript 语句的序列。浏览器会按

10、照编写顺序来执行每条语句。本例将操作两个 HTML 元素：document.getElementById(demo).innerHTML=Hello World;document.getElementById(myDIV).innerHTML=How are you?;2.JavaScript 代码块JavaScript 语句通过代码块的形式进行组合。块由左花括号开始，由右花括号结束。块的作用是使语句序列一起执行。JavaScript 函数是将语句组合在块中的典型例子。下面的例子将运行可操作两个 HTML 元素的函数：实例function myFunction()document.getEle

11、mentById(demo).innerHTML=Hello World;document.getElementById(myDIV).innerHTML=How are you?;3.JavaScript 对大小写敏感。JavaScript 对大小写是敏感的。当编写 JavaScript 语句时，请留意是否关闭大小写切换键。空格JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性对代码行进行折行您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：document.write(Hello World!);提示：JavaScript 是脚本语言。浏览器

12、会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。 JavaScript 注释JavaScript 不会执行注释。我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。单行注释以 / 开头。多行注释以 /* 开始，以 */ 结尾。 JavaScript 变量变量是存储信息的容器。我们使用 var 关键词来声明变量：var carname;变量声明之后，该变量是空的（它没有值）。如需向变量赋值，请使用等号：carname=Volvo;提示：一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。1.一条语句，多个变量您可以在一条语句中

13、声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：var name=Gates, age=56, job=CEO;声明也可横跨多行：var name=Gates,age=56,job=CEO;Value = undefined在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。在执行过以下语句后，变量 carname 的值将是 undefined：var carname;2.重新声明 JavaScript 变量如果重新声明 JavaScript 变量，该变量的值不会丢失：在以下两条语句执行后，变量 carname 的值依然是 Volvo：v

14、ar carname=Volvo;var carname;JS 对象字符串、数字、布尔、数组、对象、Null、Undefined3.JavaScript 拥有动态类型JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：实例var x / x 为 undefinedvar x = 6; / x 为数字var x = Bill; / x 为字符串JavaScript 字符串字符串是存储字符（比如 Bill Gates）的变量。字符串可以是引号中的任意文本。您可以使用单引号或双引号：4.JavaScript 数字JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

15、：实例var x1=34.00; /使用小数点来写var x2=34; /不使用小数点来写极大或极小的数字可以通过科学（指数）计数法来书写：实例var y=123e5; / 12300000var z=123e-5; / 0.00123JavaScript 布尔5.布尔（逻辑）只能有两个值：true 或 false。var x=truevar y=false6.JavaScript 数组下面的代码创建名为 cars 的数组：var cars=new Array();cars0=Audi;cars1=BMW;cars2=Volvo;或者 (condensed array):var cars=ne

16、w Array(Audi,BMW,Volvo);或者 (literal array):实例var cars=Audi,BMW,Volvo;数组下标是基于零的，所以第一个项目是 0，第二个是 1，以此类推。7.JavaScript 对象对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：var person=firstname:Bill, lastname:Gates, id:5566;上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。空格和折行无关紧要。声明可横跨多行：var pers

17、on=firstname : Bill,lastname : Gates,id : 5566;8对象属性有两种寻址方式：实例name=person.lastname;name=personlastname;9.Undefined 和 NullUndefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。实例cars=null;person=null;10.声明变量类型当您声明新变量时，可以使用关键词 new 来声明其类型：var carname=new String;var x= new Number;var y= new Boolean;var cars= ne

18、w Array;var person= new Object;JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。 JavaScript 函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。1.JavaScript 函数语法函数就是包裹在花括号中的代码块，前面使用了关键词 function：function functionname()这里是要执行的代码当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。提示：JavaScript 对大小写敏感。关键词 functi

19、on 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。调用带参数的函数在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数，由逗号 (,) 分隔：myFunction(argument1,argument2)当您声明函数时，请把参数作为变量来声明：function myFunction(var1,var2)这里是要执行的代码变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息：带有返回值的函数有时，我们会希望函数将值返回调用它的地方。通过

20、使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。语法function myFunction()var x=5;return x;上面的函数会返回值 5。注释：整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。函数调用将被返回值取代：var myVar=myFunction();myVar 变量的值是 5，也就是函数 myFunction() 所返回的值。即使不把它保存为变量，您也可以使用返回值：document.getElementById(demo).innerHTML=myFun

21、ction();demo 元素的 innerHTML 将成为 5，也就是函数 myFunction() 所返回的值。您可以使返回值基于传递到函数中的参数：实例计算两个数字的乘积，并返回结果：function myFunction(a,b)return a*b;document.getElementById(demo).innerHTML=myFunction(4,3);demo 元素的 innerHTML 将是：12在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：function myFunction(a,b)if (ab) return; x=a+b如果 a 大于 b

22、，则上面的代码将退出函数，并不会计算 a 和 b 的总和。2.局部 JavaScript 变量在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。3.全局 JavaScript 变量在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。4.JavaScript 变量的生存期JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删

23、除。向未声明的 JavaScript 变量来分配值如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。这条语句：carname=Volvo;将声明一个全局变量 carname，即使它在函数内执行。 示例:猜数字Insert title here /在页面加载时生成随机数,在页面加载后, /用户点击猜时使用这个随机数. var ran = parseInt(Math.random()*100); function guess() /获取文本框内的值 var n = document.getElementById(num).value; /获取span var span = docume

24、nt.getElementById(result); /判断该值是不是数字 if(isNaN(n) /不是,给予提示 span.innerHTML = 请输入数字; else /是,开始猜 if(nran) span.innerHTML = 大了; else if(nran) span.innerHTML = 小了; else span.innerHTML = 对了; JavaScript 内置对象JavaScript 对象JavaScript 中的所有事物都是对象：字符串、数值、数组、函数.此外，JavaScript 允许自定义对象。JavaScript 提供多个内建对象，比如 String

25、、Date、Array 等等。1.属性和方法属性是与对象相关的值。方法是能够在对象上执行的动作。举例：汽车就是现实生活中的对象。汽车的属性：car.name=Fiat汽车的方法：car.start()2.JavaScript 中的对象在 JavaScript 中，对象是数据（变量），拥有属性和方法。当您像这样声明一个 JavaScript 变量时：var txt = Hello;您实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说，length 的值是 5。字符串对象同时拥有若干个内建的方法。属性：txt.length=5方法：

26、txt.indexOf()txt.replace()txt.search()提示：在面向对象的语言中，属性和方法常被称为对象的成员。3.创建 JavaScript 对象JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。你也可以创建自己的对象。创建新 JavaScript 对象有很多不同的方法，并且您还可以向已存在的对象添加属性和方法。4.访问对象的属性访问对象属性的语法是：objectName.propertyName本例使用 String 对象的 length 属性来查找字符串的长度：var message=Hello World!;var x=message.length;5.访问对象的方法您可以通过下面的语法调用方法：objectName.methodName()这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写：var message=Hello world!;var x