10.1 JavaScript概述
10.1.1 JavaScript简介
JavaScript是一种轻量级、解释型的编程语言，广泛用于Web开发，为网页增加动态交互功能。其主要特点包括：
简单性：语法简洁，易于学习和使用。
动态性：可以直接对用户输入做出响应，无需重新加载页面。
跨平台性：只要有支持JavaScript的浏览器，就可以在任何平台上运行。
安全性：通过浏览器提供的安全机制，限制了对本地系统的访问。
基于对象的语言：几乎所有的事物都是对象，包括数组、函数等。
10.1.2 JavaScript入门案例
一个简单的JavaScript例子是弹出一个警告框
10.1.3 JavaScript放置的位置
JavaScript代码可以放置在HTML文档的多个位置：
head标记中的脚本：通常用于定义函数或全局变量。
body标记中的脚本：在页面加载时执行，适合处理页面内容。
外部js文件中的脚本：通过<script src="path/to/file.js"></script>引入，便于代码复用和维护。
事件处理代码中的脚本：直接绑定在HTML元素的事件属性上，如onclick。
10.1.3.1 head标记中的脚本
script标记放在头部head 标记中，通过JavaScript 代码必须定义成函数形式，并在主体body标记内调用或通过事件触发。放在head标记内的脚本在页面装载时同时载入，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。
【例题10.2】
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>head中定义的JS函数</title><script type="text/javascript">function message(){alert("调用JS函数！sum(100,200)="+sum(100,200));}function sum(x,y){return x+y;}//返回函数计算结果</script></head><body><h4>head标记内定义两个JS函数</h4><p>无返回值函数：message()</p><p>有返回值函数：sum(x,y)</p><form><input name="btncal" type="button" onclick="message()" value="计算并显示两个数的和"/></form></body>
</html>
10.1.3.2 body标记中的脚本
script 标记放在主体 body标记中，JavaScript 代码可以定义成函数形式，在主体 body 标记内调用或通过事件触发。也可以在script标记内直接编写脚本语句，在页面装载时同时执行相关代码，这些代码执行的结果直接构成网页的内容，在浏览器中可以查看。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>head中定义的JS函数</title><script type="text/javascript">function message(){alert("调用JS函数！sum(100,200)="+sum(100,200));}function sum(x,y){return x+y;}//返回函数计算结果</script></head><body><h4>head标记内定义两个JS函数</h4><p>无返回值函数：message()</p><p>有返回值函数：sum(x,y)</p><form><input name="btncal" type="button" onclick="message()" value="计算并显示两个数的和"/></form></body>
</html>
10.1.3.3 外部js文件中的脚本
除了将JavaScript代码写在head和body部分以外，也可将JavaScript 函数单独写成个js文件，在HTML文档中引用该js文件。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>调用外部js文件的JavaScript函数</title><script type="text/javascript" src="js/demo.js">document.write("这条语句没有执行,被忽略掉了!");</script></head><body><form><input name="btnl" type="button" onclick="message()" value="调用外部js文件的JavaScript函数"/></form></body>
</html>function message(){alert("happy");
}
10.1.3.4 事件处理代码中的脚本
JavaScript 代码除了上述三种放置位置外，还可直接写在事件处理代码中。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>直接在事件处理代码中加入JavaScript代码</title></head><body><form><input type="button" onclick="alert('直接在事件处理代码中加入 JavaScript 代码')" value="直接调用JavaScript代码"></form></body>
</html>
10.2 JavaScript语法
10.2.1 语法基础
区分大小写：变量名、函数名等区分大小写。
变量不区分类型：声明变量时不需要指定类型，类型会在运行时确定。
每行代码结尾可以省略分号：但推荐为了代码清晰度和一致性而使用分号。
注释：支持单行注释//和多行注释/*...*/。
10.2.2 标识符和常用变量
标识符：用于变量名、函数名等，必须以字母、下划线或美元符号开头，后续可以包含数字。
变量声明：使用var关键字，如var x = 10;。
变量类型：包括数字（Number）、字符串（String）、布尔（Boolean）、对象（Object）等。
10.2.3 运算符与表达式
JavaScript支持多种运算符，包括算术运算符（+, -, *, /）、关系运算符（==, !=, >, <）、逻辑运算符（&&, ||, !）、赋值运算符（=, +=, -=）、条件运算符（? :）和逗号运算符（,）。
10.2.4 程序设计
条件分支语句：if, else if, else。
循环语句：for, while, do...while。
10.2.5 函数
定义函数：使用function关键字，如function myFunction() { ... }。
函数返回值：使用return语句返回值。
函数调用：通过函数名调用，如myFunction();。
10.2.5.1 定义函数
function函数名(varl，var2，var3){/*函数代码*/】val、var2、var3 等指的是传人函数的变量或值，为函数的参数;大括号定义了函数的开始和结束。
10.2.5.2 函数返回值
需要返回某个值的函数必须使用return 语句。例如:
function sum( a , b ){x=a+ b;return X;
}JavaScript 中的函数无须对函数的返回值进行申明，直接使用returm，返回值的类型可以是本节提到的6种类型中的任意一种。
10.2.5.3 函数调用
函数的调用很简单，可以通过其名字加上括号中的参数进行调用。如调用上面的sum函数，可以这样写:sum(5，8)。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>函数调用</title><script type="text/javascript">function sayHello(){alert("Hello World!");}</script></head><body><button onclick="sayHello()">单击这里</button></body>
</html>
10.3 JavaScript对象
10.3.1 对象基础
概述：对象是JavaScript的基本数据类型之一，包含属性和方法。
属性：描述对象的状态，如person.name。
方法：描述对象的行为，如person.sayHello()。
10.3.2 常用对象
window对象：代表浏览器窗口，包含方法和属性用于控制窗口。
document对象：代表整个HTML文档，用于操作DOM。
location对象：提供有关当前URL的信息，并允许修改URL来刷新或导航到新页面。
navigator对象：提供有关浏览器的信息。
screen对象：提供有关用户屏幕的信息。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>移动窗口</title><script type="text/javascript">function moveWin(){myWindow.moveTo(50,50);}</script></head><body><script type="text/javascript">myWindow=window.open(",",width=200,height=100)myWindow.document.write("This is'myWindow'");</script><input type="button" value="Move'myWindow'" onclick="moveWin()"/></body>
</html>
【例题10.8】
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>confirm()的使用</title></head><body><script>var useChoice=window.confirm("请选择“确定”或“取消”");if(userChoice ==true){document.write("OK!");}if(userChoice==false){document. write("Cancel!");}</script></body>
</html> 
【例题10.9】
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>prompt()的使用</title></head><body><script type="text/javascript" ><!-- document.write("您的爱好是---"+prompt('请问您的爱好？','请输入')); -->var hobby=prompt('请问您的爱好？','请输入');document.write("您的爱好是---"+hobby);</script></body>
</html>
【例题10.10】
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> Document 属性</title></head><body><img src="img/1.bmp" BORDER="0" alt=""/><br /><script type="text/javascript">document.write("文件地址："+document.location+"<br/>")document.write("文件标题"+document.title+"<br/>");document.write("图片路径"+document.images[0].src+"<br/>");</script></body>
</html> 
10.3.2.3 location对象
location 对象用于获取或设置窗体的URL,并且可以用于解析URL，是JavaScript 中最重要的对象之一，location的中文意思是“位置"。location既是window对象的属性又是document对象的属性，即“window.location== document. location;”。
【例题10.12】
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>location对象使用</title><script type="text/javascript">function currLocation(){alert(window.location)}function newLocaton(){window.location="示例10.10.html"}</script></head><body><input type="button" onclick="currLocation()" value="显示当前的URL"/><input type="button" onclick="newLocaton()" value="改变URL"/></body>
</html> 
10.4 JavaScript事件
10.4.1 事件及事件处理
事件是文档或浏览器窗口中发生的特定动作，如点击、加载、移动等。事件处理函数是在事件发生时执行的代码。
10.4.2 常用事件
鼠标事件：onclick, ondblclick, onmouseover等。
键盘事件：onkeydown, onkeyup, onkeypress等。
表单事件：onsubmit, onfocus, onblur等。
窗口事件：onload, onresize, onscroll等。
10.4.3 事件应用举例
事件的应用常见于下面几种场景：鼠标单击某一元素、页面或图像载人、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。
【例题10.14】onLoad事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onLoad事件</title></head><body onload="checkCookies()"><script type="text/javascript">function checkCookies () {if(navigator.cookieEnabled==true)alert("已启用Cookies");elsealert("未启用Cookies");}</script><p>提示框会告诉你，浏览器是否已启用Cookies。</p></body>
</html>
【例题10.15】onchange事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onchange事件</title><script type="text/javascript">function myFunction(){var x=document.getElementById("fname");x.value=x.value.toUpperCase();}</script></head><body>请输入英文字符：<input type="text" id="fname" onchange="myFunction()"/><p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p></body>
</html>
【例题10.16】鼠标事件（mouseOver，mouseOut，mouseDown，mouseUp）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>鼠标事件</title><script type="text/javascript">function mouseOver(obj){obj.style.color="blue";obj.innerHTML="把鼠标移开"}function mouseOut(obj){obj.style.color="red";obj.innerHTML="把鼠标移到上面"}function mouseDown(obj){obj.style.backgroundColor="blue";obj.innerHTML="请释放鼠标按钮";}function mouseUp(obj){obj.style.backgroundColor="red";obj.innerHTML="请按下鼠标按钮";}</script></head><body><div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" style="background-color: green;width: 120px;height: 20px;padding: 20px;color: #ffffff;">把鼠标移到上面</div><br /><div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" style="background-color: green;width: 120px;height: 20px;padding: 20px;color: #ffffff;">请按下鼠标按钮</div></body>
</html> 
【例题10.17】onkeypress，onkeydown事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>键盘事件</title><script type="text/javascript">function keyDown(){alert("你按下了按键");if(event.ctrlKey){alert("你按下了Ctrl键");}}function keyPress(){alert("你按下了键，并且释放了按键");}</script></head><body onkeydown="keyDown()" onkeypress="keyPress()"></body>
</html>
10.5 综合案例——轮播广告
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片轮播效果</title><style type="text/css">*{margin: 0;padding: 0;text-decoration: none;}body{padding: 20px;}#container{position: relative;width: 600px;height: 400px;border:1px solid #333;overflow:hidden;margin-left: auto;margin-right: auto;}#list{position: absolute;z-index: 1;width: 4200px;height: 400px;}#list img{float: left;width: 600px;height: 400px;}#buttons{position: absolute;left: 250px;bottom: 20px;z-index: 2;height: 10px;width: 100px;}#buttons span{float: left;margin-right: 5px;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 50%;background: #333;cursor: pointer;}#buttons.on{background: orangered;}.arrow{position: absolute;top: 180px;z-index: 2;display: none;width: 40px;height: 40px;font-size: 36px;font-weight: bold;line-height: 39px;text-align: center;color: #fff;background-color: RGBA(0,0,0,.3);cursor: pointer;}.arrow:hover{background-color: RGBA(0,0,0,.7);}#container:hover.arrow{display: block;}#prev{left: 20px;}#next{right: 20px;}</style><script type="text/javascript">window.onload=function(){var container=document.getElementById('container');var list=document.getElementById('list');var buttons=document.getElementById('buttons').getElementsByTagName('span');var prev=document.getElementById('prev');var next=document.getElementById('next');var index=1;var timer;function animate(offset){var newLeft=parseInt(list.style.left)+offset;list.style.left=newLeft+'px';//无限滚动判断if(newLeft>-600){list.style.left=-3000+'px';}if(newLeft<-3000){list.style.left=-600+'px';}} function play(){// 重复执行的定时器timer=setInterval(function(){next.onclick();},2000)}function stop(){clearInterval(timer);}function buttonsShow(){// 将之前的小圆点的样式清楚for(var i=0;i<buttons.length;i++){if(buttons[i].className=="on"){buttons[i].className="";}}// 数组从0开始,index需要减1buttons[index-1].className="on";}prev.onclick=function(){index-=1;if(index<1){index=5}buttonsShow();animate(600);};next.onclick=function(){index+=1;if(index>5){index=1}animate(-600);buttonsShow();};for(var i=0;i<buttons.length;i++){(function(i){buttons[i].onclick=function(){var clickIndex=parseInt(this.getAttribute('index'));var offset=600*(index-clickIndex);animate(offset);index=clickIndex;buttonsShow();}})(i)}container.onmouseover=stop;container.onmouseout=play;play();}</script></head><body><div id="container"><div id="list" style="left: -600px;"><img src="img/p5.jpg" alt="5"/><img src="img/p1.jpg" alt="1"/><img src="img/p2.jpg" alt="2"/><img src="img/p3.jpg" alt="3"/><img src="img/p4.jpg" alt="4"/><img src="img/p5.jpg" alt="5"/><img src="img/p1.jpg" alt="5"/></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow"><</a><a href="javascript:;" id="next" class="arrow">></a></div></body>
</html>