• 熟悉js和html的整合
• 掌握js的基本语法
• 理解js的事件处理
学习内容：
学习产出：
任务1：js
【任务步骤】
1）
什么是js
？
全称javascript，和java毫无关系。Javascript是一种客户端（在浏览器运行）编程语言，代码存在的位置可以在html任何一处，body也行，head也行，目的为了增加和用户的交互性
2）
为什么要学习js
？
开发角度：处理网页事件+开发分工。
测试角度：为了安全性测试+自动化测试（js也能定位html元素）。
3）
如何掌握js
？
js有以下内容需要掌握。
• js语法 js和html整合 js对象概念 js变量 js函数
• js应用 js事件使用 js修改HTML内容、css样式和图片
任务2：js和html整合
【任务步骤】
js使用说明:
• js代码必须在script标签中
• js严格区分大小写
• js可以在网页任何位置
• 注释分为单行注释和多行注释。 // 单行注释 /* 多行注释 */
• js代码支持基于对象的语言 对象包含两个部分，通过对象名字调用对象方法。
2.1 js和html内部整合
js和html整合案例
//内部整合，使用script标签 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>7km</title> <script type="text/javascript"> //我是js单行注释 /* 我是js多行注释 */ //对象名字.对象方法（"实际参数"） document.write("落花不是无情物<br/>"); document.write("化作春泥更护花<br/>"); </script> </head> <body> <script type="text/javascript"> //我是js单行注释 /* 我是js多行注释 */ //对象名字.对象方法（"实际参数"） document.write("落花不是 <font color='red'>无情物</font>22<br/>"); document.write("化作春泥更护花<br/>"); </script> <p>好好学习</p> <script type="text/javascript"> //我是js单行注释 /* 我是js多行注释 */ //对象名字.对象方法（"实际参数"） document.write("江山如画<br/>"); document.write("人生如梦<br/>"); </script> </body> </html>
2.2 js和html外部整合
1）新建js文件
Js文件中内容包含一句代码。
//js代码
document.write("表独立兮山之上<font color='red'>云容容兮而在下</font>22");
2）在html中使用script标签的src属性整合起来即可。
//Html内容如下。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>新的7km</title> </head> <body> <!-- src 引用js路径的位置和引用图片路径位置是一致的--> <script type="text/javascript" src="kmjs/kmjs.js"> </script> <p>昔我往矣，杨柳依依</p> <!-- src 引用js路径的位置和引用图片路径位置是一致的--> <script type="text/javascript" src="kmjs/kmjs.js"> </script> </body> </html>小结：
• js和html的整合可以内部和外部结合。
• 需要理解对象和方法的概念。
• Js代码默认执行顺序是从上往下的，如果想被事件调用触发执行，可以封装成函数。
任务3：函数
【任务步骤】
js无参函数
js有参函数
代码包装成一个具有固定功能的代码块，这个代码块只有被调用的时候才会被执行。
函数的格式分为以下两个部分。
（1）函数的定义：
function 函数名字(可选形式参数1,参数2)
{
函数体
可选 return 函数结果返回值
}
（2）函数的调用
凭借函数的名字调用，函数名(实际参数)。
例子：两个数加法函数
===》固定功能代码块===》思路：
1. 取名字==》函数名
2. 运算的内容==》参数
3. 结果====》return 语句
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>我的函数</title> </head> <body> <script type="text/javascript"> /* 函数的格式就分为两个部分 函数的定义: function 函数名字(可选形式参数1,参数2) { 函数体 可选 return 函数结果返回值 } 函数的调用： 凭借函数的名字调用 函数名(实际参数) */ //例子加法函数===》严格照搬格式 function kmadd(a,b) { var c;//var 定义变量 标记 存放内容 c =a+b; //用c存放函数的结果 return c; //函数的结果是c } //函数的调用 document.write("第一次使用加法的结果"+kmadd(1,2)+"<br/>"); document.write("第二次使用加法的结果"+kmadd(12,21)+"<br/>"); document.write("第三次使用加法的结果"+kmadd(121,211)+"<br/>"); </script> <p>km的狗</p> </body> </html>小结：
（1）严格照搬格式。
（2）函数增加了代码复用性。
（3）有了函数触发了代码执行时机（只有调用才会被执行）。
任务4：鼠标点击事件
【任务步骤】
鼠标点击事件使用
使用事件的具体思路如下：
（1）事件（onclick单击事件）可以当做是HTML标签的属性。
（2）把事件触发的内容封装在函数中（控制代码触发事件）。
（3）对要操作的html元素进行定位并存放到变量中去。
（4）操作该变量即可（比如修改文字、修改样式、修改图片等）。
（5）通过事件调用函数即可。
鼠标点击事件案例如下：鼠标点击事件案例
/* 例子1：js的点击事件修改html的内容 点击 p标签 文字更换成 万事皆如意 使用的document对象的innerHTML 例子2：（首先准备好三张图片）js的 点击事件修改html元素的样式 点击p标签 第一张图片的样式颜色 大小改变了 使用的document对象的style 例子3：js的点击事件图片修改 要求 不管点击按钮 还是图片，图片都可以修改 使用的document对象的src 实现代码如下： */ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>鼠标点击案例</title> <script type="text/javascript"> // 例子1：js的点击事件修改html的内容 点击 p标签 文字更换成 万事皆如意 //使用的document对象的innerHTML function km001() { //1.定位操作的元素 //现在操作jw1 相当于操作定位到的html元素 var km001=document.getElementById("aaa"); //2.操作元素即可 //读取 //弹出框 //获取元素 // alert(km001.innerHTML); //修改元素内容 km001.innerHTML="万事皆如意!"; } function km002() { //定位元素 var km002=document.getElementById("bbb"); //sytle后面接的就是 所有css属性 // css表示方式 和js表示方式区别 // font-size ==转成js表示法==> fontSize km002.style.color="red"; km002.style.fontSize="25px"; } //还有图片 function km003() { //定位元素 操作谁定位谁 var kmimg3=document.getElementById("ccc"); //注意图片路径一定要是英文路径~ //加一个要求 //点击一次修改图片 ，再次点击 图片可以恢复 //kmimg3.src="kmimg/guaiguai.jpg"; //如果 src 包含match("内容") if(kmimg3.src.match("xiaohuangren.jpg")) { // //如果 src 包含match("内容") 执行的代码 //代表此时是第一张图片==》乖乖 kmimg3.src="kmimg/guaiguai.jpg"; } else //否则 { //乖乖===》小黄人 kmimg3.src="kmimg/xiaohuangren.jpg"; } } </script> </head> <body> <p onclick="km1()" id="aaa">没勇气说喜欢</p> <hr width="90%" color="red"/> <p id="bbb" onclick="km2()">小黄人</p> <hr width="90%" color="red"/> <button onclick="km3()"> 整容按钮</button> <hr width="90%" color="red"/> <img onclick="km3()" src="kmimg/xiaohuangren.jpg" alt="图片下载失败" id="ccc"/> </body> </html>
任务5： 鼠标其它事件
【任务步骤】
以下是鼠标移入事件onmousemove和移出事件onmouseout的案例。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script> function kmbigImg() { var aaa1=document.getElementById("aaa"); aaa1.style.height="300px"; aaa1.style.width="300px"; } function kmnormalImg() { var aaa2=document.getElementById("aaa"); aaa2.style.height="100px"; aaa2.style.width="100px"; } </script> </head> <body> <h2>再见莫妮卡</h2> <img onmousemove="kmbigImg()" onmouseout="kmnormalImg()" src="kmimg/xiaohuangren.jpg" id="aaa"/> </body> </html>
三、课程总结
我们主要学习了js的一些基本语法以及和html的整合，介绍了js的函数和鼠标事件。要想同时变化文字和图片，将变化文字的代码和变化图片的代码放在同一函数即可。
