JavaScript 快速入门资料

1、JavaScript快速入门,2,主要内容：,JavaScript：是属于网络的脚本语言！被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。 是因特网上最流行的脚本语言。 JQuery：是一个 JavaScript 库。极大地简化了 JavaScript 编程。 JSON：是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。 Ajax：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页

2、面的情况下。,3,1JavaScript简介,写入 HTML 输出 document.write(This is a heading); 对事件作出反应 点击这里 改变 HTML 内容 x=document.getElementById(demo) /查找元素 x.innerHTML=Hello JavaScript; /改变内容 改变 HTML 图像 改变 HTML 样式 验证输入 if isNaN(x) alert(Not Numeric); 实例：javascript/test1.html,4,简单性 没有复杂的语法和规则，它的变量类型采用弱类型，并未使用严格的数据类型，易于学习和掌握。

3、 大小写敏感 事件驱动 可以编程通过输入设备应答用户动作。 使用分号组合语句 在JavaScript中分号不是必要的。但好的做法是脚本语句（如声明变量）之后使用分号。 安全性高 不允许访问本地硬盘，不能将数据存入到服务器，不允许对网络文档进行修改和删除，有效防止数据的丢失。,5,2JavaScript程序结构,JavaScript是脚本语言，单条JavaScript语句就能构成一个完整程序，程序结构十分简单。 JavaScript程序需要结合到具体HTML文件才能正确执行。 js独立脚本文件形式 标记块形式 具体的事件属性方式,6,独立js脚本文件形式,通过标记将JavaScript文件引入文

4、件中 标记有两个重要属性:language和src language表示脚本程序使用的语言，这里是JavaScript src表示JavaScript文件路径,通过独立的文件定义JavaScript程序，适合于创建在网站中重用的脚本功能。,7,标记块形式,通过标记和HTML结合，即通过将其直接嵌入HTML文件 语句块中的JavaScript程序在整个页面中可以重用。 重用度没有独立的JavaScript文件通用。 document.write(Hello JavaScript!) ,8,具体的事件属性方式,通过事件属性和HTML结合，即将JavaScript程序语句直接写在HTML标记的事件属

5、性中，而不需要标记。 程序设计方式灵活 代码无法重用 ,实例1 ：标记块形式 通过将其直接嵌入HTML文件。, 欢迎光临JavaScript世界 document.write(Hello JavaScript!) this is JavaScript , 欢迎你！ alert(“大家好才是真的好！”); 都好！ ,实例1-1 ：, 欢迎你！ alert(大家好才是真的好！); 都好！ ,实例1-2 ：,实例2 ：使用JavaScript源文件：source.htm,JavaScriptCode.js：,alert(“大家好才是真的好！”);, 欢迎你！ 都好！ ,13,3变量与数组,变量和数组

6、是JavaScript的基础。JavaScript和C语言属于同一语系，许多基本语法一样。 JavaScript定义变量只有一个关键字“var”。 例：在JavaScript中定义一个用户名变量的语法为 var strUserName;,14,JavaScript中变量,Javascript中变量是一种智能化变量，所有变量都以var关键字声明，不再区分具体数字类型。 var strName; var i =0 ; var变量在声明时，其具体数据类型不确定，当具体的初始数值被设置给变量后，变量的类型才确定。 JavaScript中的变量可以直接使用，但建议先定义后使用，这样有利于提高程序的可读性

7、。 JavaScript语句后面可以加分号，也可以不加，建议加上。,15,变量命名需要遵守以下六个规则,变量命名必须以一个英文字母或是下划线为开头，也就是变量名第一个字符必须是A到Z或是a到z之间的字母或是“_”。 变量名长度在0255字符之间。 除了首字符，其他字符可以使用任何字符、数字及下划线，但是不可以使用空格。 不可以使用JavaScript的运算符号，例如：+，等。 不可以使用JavaScript用到的关键字。 在JavaScript中，变量名大小写是有所区别的。,16,变量, var Welcome = 欢迎您！; var i = 10; i = i + 1; document.w

8、rite(Welcome); document.write(i); ,案例名称：使用变量 程序名称：2.htm,17,声明数组,用new和Array关键字。 new代表建立一个新的对象。 Array是JavaScript内置的一个对象。,由于JavaScript区分大小写，所以Array的首字母必须是大写。,18,使用数组, var UserName = new Array(2); UserName0 = Bill; UserName1 = Bob; document.write(UserName0); document.write(); document.write(UserName1);

9、document.write(); ,案例名称：使用数组 程序名称：3.htm,19,4表达式与运算符,程序主要功能是运算，例如加、减、乘、除等基本操作。 算术运算符主要提供加、减、乘、除、取余等操作。, document.write(3*2); document.write(); document.write(3/2); document.write(); document.write(3%2); ,案例名称：算术运算符 程序名称：4.htm,20,逻辑运算符,逻辑运算符包括：与运算符“ var b = 你好，; a += b; document.write(a); ,案例名称：字符串运算符

10、 程序名称：6.htm,22,条件表达式, a = (43) ? 5 : 7; b = (4); document.write(b); ,案例名称：条件表达式 程序名称：7.htm,23,5JavaScript语句分类,JavaScript提供的语句可以分为以下4大类： 条件和分支语句 ifelse语句，switch语句。 循环语句 for语句， while语句，dowhile语句，break语句和continue语句。 对象操作语句 new，this和with。 注释语句 “/” 或 “/* */”。,24,控制语句之条件语句if 语句,案例名称：if语句 程序名称：8.htm, var i

11、Hour = 13; if (iHour ,25,switch语句,案例名称：switch语句 程序名称：9.htm, var val = ; var i = 5; switch(i) case 3: val = 三;break; case 4: val = 四;break; case 5: val = 五;break; default: val = 不知道; document.write(val); ,26,流控制语句之循环语句,for语句的基本语法： for (初始化部分；条件部分；更新部分) 语句块 ,for语句,27,for 语句, var iSum = 0; for(var i =

12、0; i ,案例名称：for 语句 程序名称：10.htm,28,while 语句, var iSum = 0; var i = 0; while( i,案例名称：while 语句 程序名称：11.htm,29,break语句, for(i = 1; i ); ,案例名称：break语句 程序名称：12.htm,30,continue语句, for(i = 1; i ); ,案例名称：continue语句 程序名称：13.htm,31,7JavaScript函数,为了实现函数的定义和调用，JavaScript语句提供了两个关键字： function return JavaScript函数的基本

13、语法如下： function 函数名称(参数表) 语句块; ,32,函数定义和调用, function getSqrt(iNum) var iTemp = Math.sqrt(iNum); document.write(iTemp); getSqrt(9); ,案例名称：函数定义和调用 程序名称：14.htm,定义,调用,33,函数的返回值, function f(y) var x = y * y; return x; for(x = 0; x ); ,案例名称：函数的返回值 程序名称：15.htm,34,事件的概念,事件驱动和事件处理 JavaScript脚本是基于对象的语言，它采用事件驱动

14、。它是在图形界面环境下，鼠标或键盘产生的动作称为事件，由点击鼠标或键盘产生的一系列程序动作称为事件驱动，而对事件进行处理的程序或函数，称为事件处理程序。 JavaScript事件主要包括三大类 超级链接事件 浏览器事件 界面事件 click()、MouseOut()、MouseOver()和 MouseDown()等。,JavaScript中的事件都是与对象相关联的，而不是语言本身所有。,当事件发生时，必须调用相应事件处理程序。事件处理程序为事件发生时所调用的函数。,事件驱动,onClick单击事件 通常产生onClick事件的对象有button、checkbox、radio、 reset、s

15、ubmit、图片等。例： onChange事件 当利用text、textarea元素输入字符值改变时发生该事件；当select元素的选择项发生变化时也产生该事件。 onLoad 当页面载入时产生该事件。例： onUnload 当WEB页面关闭时产生该事件。例： ,常用事件,37,单击事件, ,案例名称：鼠标单击事件 程序名称：16.htm,38,下拉列表, 北京 上海 广州 function func() alert(你选择了 + selAddr.value); ,案例名称：处理下拉列表 程序名称：17.htm,39,提交事件,提交事件即：onsubmit。控制光标停留位置即：focus()。

16、 格式：表单名 + 控件名 + focus() 表单名：指的是form的名字，例： 控件名：指的是光标所要停留的某个控件的名字，例： ,40,案例名称：提交事件 程序名称：18.htm 程序说明：用onsubmit事件，做一个登录功能的校验。,41,8JavaScript中常用内部对象,JavaScript中内置对象提供了JavaScript函数的强有力支持。 三种常用的对象 数学算法有关的Math对象 和日期时间控制相关的Date对象 字符串相关的String对象 内置对象都有自己的方法和属性，访问属性的语法是：“对象名.属性名称”。 访问方法的语法是：“对象名.方法名称（参数表）”。,42

17、,日期时间控制相关的Date对象,Date类提供JavaScript获取系统日期特性的底层调用，通过这种调用可以获得当前的系统日期和时间 getDate()、getYear()、getMoth() getMinutes()、getHours()、getSeconds() setTimeout是一个系统调用，用来设定延迟执行. setTimeout(showTime(),1000);,43,使用Date对象, var curr=new Date(); document.write(今天是); switch(curr.getDay() case 0:document.write(周日,休息了！);

18、break; case 1:document.write(周一,需要工作！);break; case 2:document.write(周二,需要工作！);break; case 3:document.write(周三,需要工作！);break; case 4:document.write(周四,需要工作！);break; case 5:document.write(周五,需要工作！);break; case 6:document.write(周六,休息了！);break; ,案例名称：使用Date对象 程序名称：19.htm,44,网页时钟,利用Date对象可以方便地做一个网页时钟。 程序名

19、称：网页时钟,45,数学相关方法：Math对象,Math类提供了很多方法，可以处理常用的数据操作。 document.write(Math.PI+); document.write(Math.max(100,200)+); document.write(Math.sqrt(3)+); document.write(Math.random(); ,46,Math对象常用的方法与属性,常用方法：abs()、acos()、exp()、round()、tan()等 常用属性：PI、E、LN2等, var a = Math.sin(Math.PI); var b = Math.sin(1); docum

20、ent.write(a+) document.write(b) ,案例名称：使用Math对象 程序名称：20.htm,47,字符串相关对象String,JavaScript语言中，所有字符串都是String类的对象，都可以通过String类方法和属性进行操作。 String对字符串的处理主要提供了下列方法。 charAt(idx)：第一个字符位置是“0”，返回指定位置处的字符。 indexOf(Chr)：返回指定子字符串的位置，从左到右，找不到返回1。 lastIndexOf(chr)：返回指定子字符串的位置，从右到左。找不到返回1。 toLowerCase()：将字符串中的字符全部转化成小写

21、。 toUpperCase()：将字符串中的字符全部转化成大写。 通过new关键字生成字符串对像 var s=new String(“I love Java!”);,48, var str = I am a boy, I like programming!; a = str.charAt(3); b = str.indexOf(a); c = str.lastIndexOf(a); d = str.toUpperCase(); document.write(a + ); document.write(b + ); document.write(c + ); document.write(d +

22、 ); ,案例名称：使用字符串处理函数 程序名称：21.htm,49,案例：字符串扫描统计, var str = I am a girl, I like cat var Count = 0; for( i = 0; i ,案例名称：使用字符串处理函数 程序名称：string.htm,50,parseInt()函数和parseFloat()函数,parseInt()函数功能是从一个字符串中提出一个整数，如果遇到字符串中除了数字以外的字符，parseInt()就停止转换，返回已有的结果。 如果第一个字符不是数字，parseInt()就返回“NaN”值。ParseFloat()函数和parseInt

23、()函数相似，区别parseFloat()可以提取小数。,51,parseInt函数和parseFloat函数, var a = parseInt(“12a39.0Ch123ina); var b = parseFloat(123.12a3China); document.write (a + ); document.write (b); ,案例名称：使用parseInt函数和parseFloat函数 程序名称：22.htm,52,isNaN(chr)函数, function nonull() var username=frm.username.value; if(username=) ale

24、rt(用户名不能为空！); return false; else if(isNaN(username) alert(必须为数字); return false; ,一般用来校验表单的内容是否为数字,53,9浏览器内部对象,使用浏览器的内部对象系统，可实现与HTML文档进行交互。 它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程者的劳动，提高设计Web页面的能力。,54,浏览器对象层次,55,浏览器对象主要包括的几个类,window：窗口对象，每一个这样的对象代表一个浏览器窗口。处于对象层次的最顶层，提供了处理处理浏览器窗口的方法和属性。 document：文档对象，含有当前

25、网页的各种特性，如标题、背景及使用的语言等。对于实现动态Web页起关键作用，是对象系统的核心。 location：位置对象，含有当前网页的URL地址。提供了处理当前URL的方法和属性，是一个静态对象。 history：历史对象，含有以前访问过的网页的URL地址。提供了与浏览器访问的历史记录有关的信息。 forms：表单组对象，为处理表单及其中的界面对象提供属性和方法，每一个表单是这个数组中的一个单独元素。 anchors ：锚组对象，为处理锚提供属性和方法。每一个锚就是这个数组中的一个元素。 links：超级链接组对象，为处理超级链接提供属性和方法，每一个超级链接就是这个数组中的一个元素。,5

26、6,文档对象功能及其作用,主要作用是把HTML页面的基本元素（如links、anchor）封装起来，提供给编程人员使用。 文档对象中的三个重要对象： anchors：锚对象。 links：链接对象。 form：表单对象 文档对象中的属性： Alinkcolor、linkcolor、vlinkcolor、bgclor、fgcolor 文档对象中的方法： Clear()、write()、writeln(),57,10DOM模型,DOM（Document Object Model，文档对象模型）提供了文档的定位模型。如当读取Form表单中的某一个元素时就要用到DOM来定位了。 HTML DOM模型的

27、本质在于将HTML文档中的任何一个标记等价为一个对象，标记属性对应对象成员变量，属性值对应对象状态；标记间的父子关系对应于对象间的父子关系。而整个HTML文档对应document对象，其它所有标记都对应document子对象。,58,示例, Hello World! var txt=document.getElementById(intro).innerHTML; document.write(txt); /html,获取元素内容的最简单方法是使用 innerHTML 属性。 innerHTML 属性对于获取或替换 HTML 元素的内容很有用。,59,DOM定位模型,程序名称：23.htm function do_Copy() var str = frm1.txtBox1.value; frm2.txtBox2.value= str; ,60,窗口对象及输入输出,输出可以通过文档对象的方法来实现，而输入则通过窗口对象来实现。 窗口对象。该对象包括许多有用的属性、方法和事件驱动程序，编程人员可以利用窗口对象控制浏览器窗口显示的各个方面，如对话框、框架等。 窗口对象的事件驱动。窗口对象主要有装入W