10.1 JavaScript概述
JavaScript是一种轻量级的编程语言，它被广泛用于增强网页的交互性，为用户提供更丰富的网页体验。以下是JavaScript的几个核心特性。
10.1.1 JavaScript简介
JavaScript的语法简单，易于学习，使得开发者能够快速上手并开发出动态的网页应用。
10.1.1.2 动态性
JavaScript能够在网页加载后动态地修改网页内容，无需重新加载页面，这为用户带来了流畅的体验。
10.1.1.3 跨平台性
JavaScript可以在多种浏览器和平台上运行，这使得开发者能够为更广泛的用户群体提供服务。
10.1.1.4 安全性
JavaScript具有严格的安全机制，以防止恶意代码的执行，保护用户的数据安全。
10.1.1.5 基于对象的语言
JavaScript是一种基于对象的脚本语言，它支持面向对象的编程风格，使得代码更加模块化和可重用。
10.1.2 JavaScript入门案例
在本节中，我们将通过一个简单的入门案例来展示JavaScript的基本用法。例如，我们可以通过JavaScript来改变网页上的文本内容，或者响应用户的点击事件。
<!--示例程序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 JavaScript放置的位置
JavaScript代码可以放置在HTML文档的不同位置，以适应不同的使用场景：
10.1.3.1 head标记中的脚本
将JavaScript代码放在<head>标签中，可以在页面加载时就执行脚本，但这样可能会阻塞页面的渲染。
10.1.3.2 body标记中的脚本
将JavaScript代码放在<body>标签的底部，可以确保在执行脚本之前页面已经完全加载。
10.1.3.3 外部js文件中的脚本
将JavaScript代码放在外部文件中，可以提高代码的可维护性，并允许多个页面共享相同的脚本。
10.1.3.4 事件处理代码中的脚本
事件处理代码通常放在HTML元素的事件属性中，如onclick，用于响应用户的交互。
案例代码
<!--示例程序10.3-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>body中的JavaScript脚本</title>
</head>
<body>
<p id="clk">Clicke Here</p>
<script type="text/javascript">
var demo = document.getElementById("clk");
demo.onclick = msg;
function msg() {
alert("我是body中的JavaScript脚本");
}
</script>
</body>
</html>
<!--示例程序10.4-->
<!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="btn1" type="button" onclick="message()" value="调用外部js文件的JavaScript函数">
</form>
</body>
</html>
10.2 JavaScript语法
10.2.1 语法基础
JavaScript的语法基础是编写有效脚本的关键：
10.2.1.1 区分大小写
JavaScript是区分大小写的语言，这意味着变量名var1和Var1会被视为两个不同的变量。
10.2.1.2 变量不区分类型
JavaScript是一种弱类型语言，变量可以存储任何类型的数据，无需声明变量的类型。
10.2.1.3 每行代码结尾可以省略分号
虽然JavaScript允许省略每行代码结尾的分号，但为了代码的清晰性和避免潜在的错误，建议使用分号。
10.2.1.4 注释与C、C++、Java等语言相同
JavaScript支持单行(//)和多行(/* ... */)注释，这与C、C++和Java等语言相同。
10.2.2 标识符和常用变量
10.2.2.1 标识符
标识符是变量、函数等的名称，它必须以字母、下划线或美元符号开始，后面可以跟字母、数字或下划线。
10.2.2.2 变量声明
在JavaScript中，可以使用var、let或const关键字来声明变量。
10.2.2.3 变量类型
JavaScript支持多种数据类型，包括数字、字符串、布尔值、对象等。
10.2.3 运算符与表达式
JavaScript提供了丰富的运算符来构建表达式：
10.2.3.1 算术运算符和表达式
算术运算符如+、-、*、/等，用于执行基本的数学运算。
10.2.3.2 关系运算符和表达式
关系运算符如==、===、!=、!==等，用于比较两个值。
10.2.3.3 逻辑运算符和表达式
逻辑运算符如&&、||等，用于构建逻辑表达式。
10.2.3.4 赋值运算符和表达式
赋值运算符如=，用于将值赋给变量。
10.2.3.5 条件运算符和表达式
条件运算符（三元运算符）?:，用于基于条件选择两个值中的一个。
10.2.3.6 逗号运算符和表达式
逗号运算符,，用于在一条语句中执行多个表达式。
10.2.4 程序设计
10.2.4.1 条件分支语句
条件分支语句如if、else if、else，用于根据不同的条件执行不同的代码块。
10.2.4.2 循环语句
循环语句如for、while、do...while，用于重复执行一段代码。
10.2.5 函数
10.2.5.1 定义函数
函数是一段可以重复使用的代码块，可以通过关键字function或ES6的箭头函数语法来定义。
10.2.5.2 函数返回值
函数可以通过return关键字返回值。
10.2.5.3 函数调用
定义函数后，可以通过函数名加括号来调用函数。
<!--示例程序10.6-->
<!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 对象基础
10.3.1.1 概述
对象是JavaScript中存储数据的一种方式，它由属性和方法组成。
10.3.1.2 属性
属性是对象的变量，用于存储数据。
10.3.1.3 方法
方法是对象的函数，用于执行操作。
10.3.2 常用对象
JavaScript提供了一些内置对象，用于与浏览器交互：
10.3.2.1 window对象
window对象代表浏览器窗口，提供了许多与窗口相关的属性和方法。
10.3.2.2 document对象
document对象代表整个HTML文档，允许JavaScript访问和修改页面内容。
<!--示例程序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相关的属性和方法。
<!--示例程序10.12-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location对象使用</title>
<script type="text/javascript">
function currLocation() {
alert(window.location)
}
function newLocation() {
window.location = "示例程序10.10.html"
}
</script>
<body>
<input type="button" onclick="currLocation()" value="显示当前的URL" />
<input type="button" onclick="newLocation()" value="改变URL" />
</body>
</html>
10.3.2.4 navigator对象
navigator对象包含了有关用户浏览器的信息。
10.3.2.5 screen对象
screen对象包含了有关用户屏幕的信息。
10.4 JavaScript事件
10.4.1 事件及事件处理
事件是用户或浏览器触发的动作，如点击、按键等。事件处理是JavaScript响应这些事件的方式。
10.4.2 常用事件
JavaScript支持许多内置事件，如click、mouseover、keydown等。
10.4.3 事件应用举例
例如，当用户点击一个按钮时，改变页面上的文本内容。
<!--示例程序10.17-->
<!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.17-->
<!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 span.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 = "";
}
}
buttons[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="1" />
</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>