专业编程基础技术教程

网站首页 > 基础教程 正文

实战式方法学习JavaScript(1) javascript与jquery实战教程

ccvgpt 2024-11-03 13:23:44 基础教程 66 ℃

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

【参考文献】

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

实战式方法学习JavaScript(1) javascript与jquery实战教程

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）<html:5> </html:5>

扩展生成HTML5文档代码

（2）行数：2

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

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

（3）行数：3

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

（4）行数：5，6，7

<meta> 元素可提供有关页面的元信息（meta-information）

（5）行数：9-24

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

<table>标签定义HTML表格。thead表头、tr行、td单元格。

（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() 方法用于向文档添加事件句柄。

鼠标事件：

再来看一段代码：

<body>

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

<button id="myBtn">点我</button>

<p id="demo"></p>

<script>

var x = document.getElementById("myBtn");

x.addEventListener("mouseover", myFunction);

x.addEventListener("click", mySecondFunction);

x.addEventListener("mouseout", myThirdFunction);

function myFunction() {

document.getElementById("demo").innerHTML += "Moused over!<br>"

}

function mySecondFunction() {

document.getElementById("demo").innerHTML += "Clicked!<br>"

}

function myThirdFunction() {

document.getElementById("demo").innerHTML += "Moused out!<br>"

}

</script>

</body>

运行效果图：


强化训练：

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

Tags：

猜你喜欢

最近发表
标签列表