第10章JavaScript的应用

10.1 JavaScript概述

10.1.1 JavaScript简介

10.1.1.1 简单性

10.1.1.2 动态性

10.1.1.3 跨平台性

10.1.1.4 安全性

10.1.1.5 基于对象的语言

10.1.2 JavaScript入门案例

10.1.3 JavaScript放置的位置

10.1.3.1 head标记中的脚本

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>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()</p><form><input name="btncal" type="button" onclick="message();" value="计算并显示两个数的和"/></form></body>
</html>

图片

10.1.3.2 body标记中的脚本

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><p id="clk">Clicke Here</p><script>var demo = document.getElementById("clk");demo.onclick = msg;function msg(){alert("我是body中的javascript脚本");}</script></body>
</html>

图片

10.1.3.3 外部js文件中的脚本

html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/demo.js">document.write("这条语句没有执行")</script></head><body><input name="btn1" type="button" onclick="message()" value="调用外部js文件中的函数"/></body>
</html>

js代码

javascript">function message(){alert("调用外部js文件")
}

图片

10.1.3.4 事件处理代码中的脚本

代码

	<body><input name="btn1" type="button" onclick="alert('happy')" value="调用外部js文件中的函数"/></body>

图片

10.2 JavaScript语法

10.2.1 语法基础

1.区分大小写

2.变量不区分类型

3.每行代码结尾可以省略分号

4.注释与C、C++、Java等语言相同

10.2.2 标识符和常用变量

10.2.2.1 标识符

不能使用关键字，数字开头，中文名

10.2.2.2 变量声明

var关键字可以应用javascript任何类型的变量声明

10.2.2.3 变量类型

6种

1.Number数值型 2.String字符型 3.Boolean布尔型 4.Null型 5.Undefined型 6.Objext型

10.2.3 运算符与表达式（数学知识和计算机语言知识）

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语句，if - else语句，switch - case语句

10.2.4.2 循环语句

for语句，while语句，do - while语句

10.2.5 函数

10.2.5.1 定义函数

function 函数名（var1）{

函数代码

}

var是传入函数的变量

10.2.5.2 函数返回值

return 返回值

10.2.5.3 函数调用

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>函数调用</title><script>function sayHello(){alert("Hello World!");}</script></head><body><button onclick="sayHello()">单击这里</button></body>
</html>

图片

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

各式各样的类型都能被称作对象

10.3.1.2 属性

如长度，宽度等

10.3.1.3 方法

可以执行的行为，能调用功能或者自己写一个功能

10.3.2 常用对象

10.3.2.1 window对象

1.窗口操作

1.moveBy（x,y）:对当前位置进行移动x，y的值

2.moveTo （x,y）:对当前位置进行移动到x，y的值

3.resizeBy（x，y）：对当前大小进行调整x，y的值

4.resizeTo（x，y）：对当前大小进行调整到x，y的值

2.打开和关闭窗口

打开窗口

语法：window.open（url，name，features，replace）；

url：要载入窗体的URL。
name：新建窗体的名称。
features：代表窗体特性的字符串，字符串中每个特性使用逗号分隔。
replace：一个布尔值，说明新载人的页面是否替换当前载入的页面，此参数通常不用指定。

关闭窗口

语法：window.close（）；

3.系统对话框

alert（）：显示提示信息

confirm（）：弹出消息对话框（包含一个ok和cancel按钮）

prompt（）：一个带输入的对话框

javascript代码

javascript">		<script type="text/javascript">function moveWin(){myWindow.moveTo(50,50)}</script>

html代码

		<script  type="text/javascript">myWindow = window.open("," , width=200,height=100)myWindow.document.write("this is my window");</script><input type="button" value="MovemyWindow" onclick="moveWin()"/>

10.3.2.2 document对象

作用：描述当前窗口或指定窗口对象的文档

代码：

        <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>

10.3.2.3 location对象

作用：用于获取或设置窗体的url，并且可以用于解析url

10.3.2.4 navigator对象

作用：用于检测浏览器与操作系统的版本

10.3.2.5 screen对象

作用：用于获取屏幕的信息

10.4 JavaScript事件

10.4.1 事件及事件处理

10.4.2 常用事件

1.页面事件

2.鼠标事件

3.键盘事件

10.4.3 事件应用举例

如：鼠标单击，键盘按键

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 = "";}}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/p1.jpg" alt="5"/><img src="img/p5.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">&lt;</a><a href="javascript:;" id="next" class="arrow">&gt;</a></div></body>
</html>

图片