任务5使用JavaScript实现网页.pptxVIP

任务使用JavaScript实现网页

任务介绍利用JavaScript实现显示文本网页，如图所示，对JavaScript有一个简单认识。

任务分析JavaScript类似C++和Java等的基本对象语言，它与CSS配合应用可以实现很多动态的网页效果，本任务主要目的让学生了解什么是JavaScript，了解JavaScript的基本应用方法，掌握如何在网页中调用JavaScript脚本代码。

1JavaScript基础

相关知识--JavaScript概述

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。JavaScript是基于对象的语言，安全简单，用于向HTML页面添加交互行为，利用它可以完成以下任务：读写HTML元素：JavaScript程序可以读取及改变当前HTML页面内某个元素的内容。验证用户输入的数据：在数据被提交到服务器之前验证这些数据。响应事件：页面加载完成或者单击某个HTML元素时，调用指定的JavaScript程序。检测访问者的浏览器：根据所检测到的浏览器，为这个浏览器载入相应的页面。创建cookies：存储和取回位于访问者的计算机中的信息。

相关知识--在网页中调用JavaScript

脚本语句可以嵌入在HTML标签内，以响应输入的事件。spanonClick=”JavaScript：alert(“hi”)”点击/span标签内添加脚本语句

JavaScript的脚本程序包含在HTML中，可以放在页面的任何位置，它在页面中的位置决定了什么时候装在脚本，如果希望在其他所有内容之前装载脚本，就要确保脚本在页面的head/head之间。其语法格式为：scriptlanguage=”JavaScript”JavaScript语言代码;…/scripthead内添加脚本代码段

如果网页中要引用的脚本存放在一个文件中，这个文件以.js为扩展名，则在网页调用时，使用script标记的src属性来引用这个外部脚本文件。采用引用脚本文件的方式，可以提高程序代码的利用率，引用的语句通常放在head/head中，引用格式为：scripttype=”text/javascript”src=”脚本文件名.js”/script引用脚本文件案例

制作树形菜单2

树形菜单效果图使用JavaScirpt和CSS实现树形菜单的制作，单击一级目录显示二级目录

JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。事件在HTML页面中定义，表常用事件描述属性当以下情况发生时，出现此事件onchange用户改变域的内容onclick鼠标点击某个对象onfocus元素获得焦点onkeydown某个键盘的键被按下onkeypress某个键盘的键被按下或按住onkeyup某个键盘的键被松开onload某个页面或图像被完成加载

续属性当以下情况发生时，出现此事件onmousedown某个鼠标按键被按下onmousemove鼠标被移动onmouseout鼠标从某元素移开onmouseover鼠标被移到某元素之上onmouseup某个鼠标按键被松开onreset重置按钮被点击onresize窗口或框架被调整尺寸onselect文本被选定onsubmit提交按钮被点击onunload用户退出页面表常用事件描述案例

tab选项卡切换3

选项卡切换效果Tab选项卡切换效果既节约了网页空间，又增强了网页动态效果，是当前网页常用的特效方式。

设置函数function函数名()JavaScript函数是一种基于对象的脚本语言，JavaScript代码复用的单位是函数。JavaScript中的函数可以独立存在，而且JavaScript中的函数完全可以作为一个类来使用(而且它还是该类的唯一的构造器)。函数也可以是一个对象，函数本身就是Function实例。

Functionfunctionname([参数列表]){执行代码}或Varfunctionname=function([参数列表]){执行代码}JavaScript中定义方法（函数）的方式有两种：第一种称为定义式，第二种称为变量式。在实际应用中二者没有区别，但在调用中顺序上差异：定义式可以在调用之后再定义，而变量式则不可以。函数定义当调用该函数时，才会执行函数内的代码。在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。参数列表中的参数，参数可以没有，也可以多个，由逗号“，”分