案例1：表格行悬停提示效果

【参考文献】

1.JavaScript前端开发模块化教材(人民邮电出版社)赵健保

2.https://www.w3cschool.cn/

任务导入：

在Web标准中，HTML定义了页面结构和内容，CSS定义了页面布局和外观，如颜色、字体、边框、边距和版式布局等，而JavaScript定义了页面交互行为，比如元素交互、表单验证、网页游戏等。也就是说JavaScript是让HTML和CSS协同运作的粘合剂。

所以要想成为Web开发工程师，掌握JavaScript必不可少。正式开始学习JavaScript前端开发之前，需要先配置JavaScript编辑器和Web浏览器，其中JavaScript编辑器用于编写HTML、CSS和JavaScript前端代码，Web浏览器用于Web应用的开发测试。

任务一：学会如何配置JavaScript前端编码和测试环境

任务二：体验鼠标mouseover、mouseout事件时表格行背景变色效果开发。

任务实施：

1.安装和配置Visual Studio Code

下载地址：https://code.visualstudio.com/Download

本人电脑安装的Windows操作系统，右键单击“我的电脑”->属性，显示系统类型为“64位”。user版会安装在当前计算机帐户目录，这意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。而system版本可以安装在非用户目录，例如C盘根目录，任何帐户都可以使用。故选择安装“User Installer 64bit”。

初学者可以将软件的language改为中文，方法如下：

(1)打开“vscode” ，按快捷键“Ctrl+Shift+P”。

(2)在顶部搜索框中输入“configure language”，按回车键。

(3)然后选择安装其他language

(4)安装中文简体，安装完后如下图所示

2.安装Chrome浏览器及Chrome开发者工具初探

下载地址：https://www.google.cn/chrome/

打开Chrome 开发者工具

•在Chrome菜单中选择 更多工具 > 开发者工具

•在页面元素上右键点击，选择 “检查”

•使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

开发者工具简介：

3.在VScode编写代码

源代码：

运行效果：

4.源代码讲解

(1)<5> 5>

扩展生成HTML5文档代码

(2)行数：2

声明必须是 HTML 文档的第一行，位于 标签之前。

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

(3)行数：3

向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english。你的页面如果是中文页面，可将其改为

(4)行数：5，6，7

元素可提供有关页面的元信息(meta-information)

(5)行数：9-24

了解CSS id 选择器：https://www.w3school.com.cn/css/css_syntax_id_selector.asp

(6)行数：57-69

使用 var 关键词来声明变量，JavaScript变量学习图

HTML DOM Document 对象，getElementById() 方法，getElementsByTagName()方法。

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

详细资料参考网址：https://www.w3school.com.cn/jsref/dom_obj_document.asp

HTML DOM addEventListener() 方法

document.addEventListener() 方法用于向文档添加事件句柄。

鼠标事件：

再来看一段代码：

实例使用 addEventListener() 方法在同一个按钮中添加多个事件。

点我

运行效果图：

强化训练：

结合本任务实施过程，重置本地环境，重新搭建JavaScript前端编码和测试环境，将Web站点根目录设置为”d:/wwwroot”，编写一个鼠标悬停图片透明度变化的页面，具体要求是从百度下载6张同类主题的图片，规范文件名称和调整大小后，使用ul和li标签插入到网页中，定义样式表让6张图片排成2行3列，设置当鼠标悬停图片在任意图片上时，图片透明度改为半透明(opacity为0.5)，当鼠标移开后恢复到正常透明度，保存并测试你的页面。