第一章JavaScript入门.ppt

1、Web编程基础,Chapter1-JavaScript入门,2020年7月29日星期三,提纲,JavaScript概述 编写JavaScript代码,1.1 JavaScript概述,JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，它是通过嵌入或导入到标准的HTML文档中实现的。 用来实现用户与浏览器的交互以及浏览器与服务器的异步通信。 提供用户交互 动态更改内容 数据验证,1.1 JavaScript概述,JavaScript的特点 简单性。解释性语言，在程序运行过程中边解释边执行。 动态性。可以直接对用户操作做出响应，不需要经过Web服务器程序处理。 跨平台性。依赖于

2、Web浏览器本身，与操作环境无关。 基于对象。可以调用其自身提供的对象或其他语言创建的对象，并采用面向对象的编程方法来设置对象的属性、调用对象的方法。 事件驱动。对用户操作的响应采用以事件驱动的方式进行。所谓事件，通常是指在网页中执行了某种操作所产生的动作。 节省与服务器端的交互时间。,1.2 编写JavaScript脚本,创建脚本代码块： 一个或多个脚本语句 标签 指示浏览器后面的文本是脚本的一部分 type 属性 指定文件类型和在该脚本中使用的脚本语言 language属性 指定script标记内代码行所使用的脚本语言,1.2 编写JavaScript脚本,1.2 编写JavaScript

3、脚本,1.2 编写JavaScript脚本,绑定对象事件： 通过script标记的event和for属性把某个对象与指定事件绑定起来 事件处理程序代码 for属性的值为某个页面元素的ID，event属性的值则是该元素的事件名称，该元素必须支持event属性指定的事件 当页面元素产生该事件时，将执行script标记中的脚本语句,1.2 编写JavaScript脚本,示 例, 绑定对象事件示例 var username=document.getElementById(txtUsername).value; var p1=document.getElementById(p1); p1.innerHT

4、ML=username+用户，您好！; 用户名： ,用prompt对话框取得用户输入,动态Web页面：脚本可以根据用户输入或其他变量调整内容 var ：声明变量，变量名间用逗号隔开 标识符 由字母、数字、下划线和美元符号组成，不能以数字开头。 注释 单行注释：/ 多行注释：/* . */ prompt方法:两个参数 第一个参数提示用户要键入的信息类型 第二个参数：可选，文本字段中显示的默认字符串,用prompt对话框取得用户输入,用prompt对话框取得用户输入,通过 window 对象的prompt方法显示的提示对话框,用户键入值的文本字段,课堂练习,使用window对象的prompt方法,

5、使用window对象的alert方法,课堂练习, prompt对话框 var name; name = mpt(请输入您的姓名,Mary); document.write(欢迎您 + name + !); window.alert(期待下次光临！); ,调用外部脚本库： 从外部文件中导入脚本语句。语法如下： 把通用功能编写为JavaScript函数，保存为.js的脚本库，在各个HTML文档顶部的head元素中导入该脚本库。 需要修改所有HTML文档中的函数定义时，对脚本库进行修改即可。 便于实现网站的模块化设计。,1.2 编写JavaScript脚本,示 例, 导入外部脚本

6、文件示例 welcome(); ,function welcome() document.write(Now is +new Date().toLocaleString()+.); document.write(Welcome to JavaScript!); ,通过属性调用脚本： 通过设置事件属性可以调用JavaScript脚本，如onclick属性,1.2 编写JavaScript脚本, 通过HTML属性调用脚本 单击这里 关闭窗口 ,处理不支持脚本的情况： 支持script标记的浏览器将忽略包含与之间的HTML注释标记,1.2 编写JavaScript脚本,处理不支持脚本的情况： 对于不

7、支持或禁止运行JavaScript脚本的浏览器，可以使用noscript标记指定要显示的HTML内容，语法如下： 要显示的HTML内容 ,1.2 编写JavaScript脚本,1.2 编写JavaScript脚本, 代码屏蔽示例 document.write(这是执行JavaScript代码的结果。); 本网页包含JavaScript代码，但您的浏览器不支持或禁止JavaScript代码运行。 ,小结,javascript脚本放在标记中，可以放在HTML文档的任意位置，注意标记嵌套； 浏览器按先后顺序从上到下解释执行HTML文档 ； Javascript脚本可以通过绑定对象事件来处理事件: 事件处理程序代码 可以通过属性调用脚本，注意超链接中href