《补充JavaScript》PPT课件.ppt

补充：JavaScript基础,黄淮学院 计算机科学系 王春华 ,1,温故而知新,2,HTML,主要内容,3,1. JavaScript简介,3. JavaScript内置对象,推荐自学材料：JavaScript教程.exe,要求：达到能使用JS内置对象进行客户端编程的目的。,2. JavaScript语法,1. JavaScript简介,4,Java 与JavaScript 区别,JavaScript 特点,第一个JavaScript程序,第一个JavaScript程序,5,firstPage.html,身世不同,基于对象和面向对象,解释和编译,强变量和弱变量,嵌入方式不一样,静态联编和动态联编,Java 与JavaScript 区别,6,Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发; Java的前身是Oak语言。,而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言, 它的前 身是Live Script。,身世不同,基于对象和面向对象,解释和编译,强变量和弱变量,嵌入方式不一样,静态联编和动态联编,Java 与JavaScript 区别,7,JavaScript是一种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象(Object Based)和事件驱动(Event Driver)的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。,Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。,身世不同,基于对象和面向对象,解释和编译,强变量和弱变量,嵌入方式不一样,静态联编和动态联编,Java 与JavaScript 区别,8,Java的源代码在传递到客户端执行之前，必须先经过编译，因而客户端上必须具有相应平台上的解释器，它可以通过编译器或解释器实现跨平台。,两种语言在其浏览器中所执行的方式不一样。,JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。,身世不同,基于对象和面向对象,解释和编译,强变量和弱变量,代码格式不一样,嵌入方式不一样,Java 与JavaScript 区别,9,Java采用强类型变量检查，即所有变量在编译之前必须作声明。如：int i= 2; String name = “Merry”;,两种语言所采取的变量是不一样的。,JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。 i= 2; name = “Merry”; 说明i是整型，而name是字符串。,Java 与JavaScript 区别,10,身世不同,基于对象和面向对象,解释和编译,强变量和弱变量,代码格式不一样,嵌入方式不一样,Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。,JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。,Java 与JavaScript 区别,11,身世不同,基于对象和面向对象,解释和编译,强变量和弱变量,嵌入方式不一样,代码格式不一样,在HTML文档中，两种编程语言的标识不同。JavaScript使用来标识，而Java使用来标识。,1. JavaScript简介,12,Java 与JavaScript 区别,JavaScript 特点,第一个JavaScript程序,JavaScript 特点,13,JavaScript 代码可以很容易地嵌入到 HTML 页面中。浏览器对 JavaScript 脚本程序进行解释运行。,JavaScript 与 Java 一样，对大小写是敏感的,在 JavaScript 中，注释有三种写法：一种是 HTML 注释的写法：，还有两种和 Java 语言相同，分别为：“/单行注释“和“/*多行注释*/“,除了可以将 JavaScript 代码嵌入 HTML 中之外，还可以专门将 JavaScript 代码写在单独 的文件中，再导入。如：,主要内容,1. JavaScript简介,3. JavaScript内置对象,2. JavaScript语法,2. JavaScript语法,15,变量定义,函数定义,函数“Number(字符串)”可将字符串转换为数值。 函数“String(数值)”可以将数值转换为字符串。,2. JavaScript语法(2),16,变量定义,函数定义,JavaScript 中定义一个函数的基本格式是,function 函数名(参数列表) return 值; 也可以在使用中直接匿名定义： var arg1 = function(参数列表) return 值; ,以上介绍的几个知识点，都是JS与JAVA有差别的语法，其它的常用语句与JAVA类似。,2. JavaScript语法（3）举例,17,控制语句 if 、for、while,主要内容,1. JavaScript简介,3. JavaScript内置对象,2. JavaScript语法,3. JavaScript内置对象,19,JavaScript 提供的内置对象来对网页进行操作，内置对象由浏览器提供，可以直接使用，不用事先定义。,window,负责操作浏览器窗口，负责窗口状态，开闭等,document,负责操作浏览器载入的文档(HTML 文件)。它从属于 window,history,location,可以代替后退(前进)按钮访问历史记录，从属于 window,访问地址栏，也是从属于 window,3. JavaScript内置对象,20,window,document,history,location,window 对象,21,window 对象的作用有如下几个：,出现提示框,打开、关闭窗口,定时器,window 对象可以跳出提示框。主要有如下功能： window.alert(“内容“)：出现消息框 window.confirm(“内容“)：出现确认框 mpt(“内容“)：出现输入框,例window1.html,window 对象,22,出现提示框,打开、关闭窗口,定时器,window.open(pageURL,name,parameters) pageURL 为子窗口路径 name 为子窗口句柄 parameters 为子窗口状态参数 （见备注）,例window2.html,window 对象,23,出现提示框,打开、关闭窗口,定时器,例timer.html,window 对象负责管理和控制页面的定时器，定时器的作用是让某个函数隔一段时间之后运行一次，格式为： timer = window.setTimeout(“需要运行的函数“,“时间(用毫秒计)“); 如果要清除定时器，则可以： clearTimeout(timer);,3. JavaScript内置对象,24,window,document,history,location,document,25,在网页上输出,设置网页的属性,访问文档元素，特别是表单元素,writeln()函数为输出一些简单却重复的代码提供很大的便利。,例：显示出一个 8*8 的国际象棋棋盘，正常的方法需要写一个 8 行 8 列的表格代码，那样会使源代码非常的冗长，借助 writeln()和循环方法，省去了很多 HTML 代码的编写。,例：chess.html,document,26,在网页上输出,设置网页的属性,访问文档元素，特别是表单元素,例：document2.html,document 可以进行一些简单网页属性的设置，如网页标题、颜色等，并且可以得到网页的某些属性，如当前地址。比较常用的有：通过 document.title 来访问标题，通过document.location 来获取网页当前的地址,document,27,在网页上输出,设置网页的属性,访问文档元素，特别是表单元素,例：document3.html validate.html,document 可以访问文档中的元素(如图片、表单、表单中的控件等)，前提是元素的 name属性是确定的。 访问方法为：document.元素名.子元素名。比如，名为 form1 的表单中有一个文本框 account，其中的内容可以用如下代码获得： var account = document.form1.account.value;,3. JavaScript内置对象,28,window,document,history,location,history,29,history 对象包含用户的浏览历史等信息，用到这个对象的原因，是因为它可以代替后退 (前进)按钮访问历史记录，该对象从属于 window。,history.back()：返回上一页，相当于点了浏览器上的 后退按钮 history.forward()：返回下一页，相当于点了浏览器上的前进按钮 history.go(n)：n 为整数，正数表示向前进 n 格页面，负数表示向后退 n 格页面,history 最常用的函数为：,例：history.html,3. JavaScript内置对象,30,window,document,history,location,location,31,location 对象可以访问浏览器地址栏，也是从属于 window，最常见功能就是跳转到另一个网页。跳转的方法是修改location的href属性。,例 location1.html location2.html,总结,32,学习了JS语言的基本语法和基本内置对象，并通过一些常见的应用，讲解了这些知识点的使用方法。,值得一提的是，本讲只是讲解了JS的基本内容，客户端编程更深的内容，请参考更多的JS知识。,