14.1JavaScript简介
1.JavaScript是一种脚本编写语言
2.JavaScript具有简单性
3.JavaScript是动态的
4.JavaScript具有跨平台性
14.2JavaScript基本语法
14.2.1常亮和变量
1.常量是不可以改变的
整型常量：可以使用十六进制，八进制，和十进制表示其值
实型常量：由整数部分加小数部分表示
布尔值：布尔常量只有两种状态：true或false
字符型常量：使用
'或"括起来的一个或几个字符空值：空值null，表示什么都没有
特殊字符：以/开头的不可显示的特殊字符
2.变量在程序运行期间是可以改变的
主要作为数据的存取容器
使用变量最好声明
变量声明主要为了明确变量的名字，类型，作用域
申明变量使用
var，声明时可存储值也可以不存储全局变量：定义在所有函数体外
局部变量：定义在函数体之内
3.变量命名的注意点
变量名只能由字母，数字和下划线
_组成，以字母开头，除此之外不能有空格和其它字符变量名不能使用关键字
变量名最好与实际意义对应起来
14.2.2表达式和运算符
1.表达式
表达式就是常量，变量，布尔和运算符的集合
因此表达式可以分为算术表达式，字符表达式，赋值表达式以及布尔表达式
2.运算符
-
算数运算符：数学运算
算术运算符 -
逻辑运算符：比较两个布尔值，返回一个布尔值
逻辑运算符 -
比较运算符：比较表达式的值，返回一个布尔值
比较运算符
14.2.3基本语句
1.if..else语句
if(条件){
执行语句1
} else {
执行语句2
}
2.for语句
for(初始化,条件,增量){
语句集;
...
}
3.switch语句
switch()
{
case: 条件1:
语句块1
case: 条件2:
语句块2
.......
default
语句块N
}
4.while循环
while(条件){
语句集;
...
}
5.break语句
//跳出循环
break;
6.continue语句
//挑出当前循环周期
continue;
14.2.4函数
function 函数名称 (参数表) {
函数执行部分
}
14.3JavaScript的事件
JavaScript是基于对象的语言，而基于对象的基本特征，就是采用事件驱动
通常鼠标或键盘的动作称之为事件，由鼠标或键盘引发的一连串程序的动作，称之为事件驱动
对事件进行处理的函数或程序，则称之为事件处理程序
14.3.1onClick事件
鼠标单击事件---当用户单击鼠标时，产生onClick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onClick</title>
</head>
<body>
<div align="center">
<img src="img/2.jpg" width="778" height="407">
<!-- 全屏显示网页 -->
<input type="button" name="fullsreen" value="全屏" onclick="window.open(document.location,'big','fullscreen=yes')">
<!-- 还原到原来的窗口 -->
<input type="button" name="close" value="还原" onclick="window.close()">
</div>
</body>
</html>
14.3.2onchange事件
1.与表单相关的事件
2.当利用text或者textarea元素输入的字符值改变时发生该事件
3.当在select表格中的一个选项状态改变也会发生该事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange</title>
</head>
<body>
招商加盟：
<form id="form1" name="form1" method="post" action="">
<p>您的姓名：
<input type="text" name="textfield" />
</p>
<p><br />
留言内容：<br />
<br />
<textarea name="textarea" cols="50" rows="5" onchange=alert("输入留言内容") /></textarea>
</p>
</form>
</body>
</html>
14.3.3onSelect事件
文本框中的内容被选中时所发生的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onSelect</title>
</head>
<body>
<input name="atra" id="atra" tabindex="1" value="选择输入的名字" size="16" onselect=alert("选择输入的名称")>
</body>
</html>
14.3.4onFocus事件
单击表单对象时，即将光标放在文本框或选择框时产生onFocus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onFocus</title>
</head>
<body>个人爱好：
<form name="form1" method="post" action="">
<p>
<label><input type="radio" name="RadioGroup1" value="游戏" onfocus=alert("选择游戏！") />游戏</label>
<br>
<label><input type="radio" name="RadioGroup1" value="上网" onfocus=alert("选择上网！") />上网</label>
<br>
<label><input type="radio" name="RadioGroup1" value="唱歌" onfocus=alert("选择唱歌！") />唱歌</label>
<br>
<label><input type="radio" name="RadioGroup1" value="跳舞" onfocus=alert("选择跳舞！") />跳舞</label>
<br>
<label><input type="radio" name="RadioGroup1" value="画画" onfocus=alert("选择画画！") />画画</label>
<br>
</p>
</form>
</body>
</html>
14.3.5onLoad事件
加载网页文档时，会产生该事件，onLoad事件的作用是在首次载入一个页面文件时检测cookie的值，并用一个变量为其赋值，使其可以被源代码使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onLoad</title>
<script type="text/javascript">
function show(string) {
alert(string);
}
</script>
</head>
<body onload="show('欢迎光临')">
</body>
</html>
14.3.6onUnload
当退出网页时引发onUnload事件，并可更新cookie的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onLoad</title>
<script type="text/javascript">
function show(string) {
alert(string);
}
</script>
</head>
<body onunload="show('关闭本文档')">
</body>
</html>
14.3.7onBlur事件
失去焦点正好与获得焦点事件对应，当text对象，textarea对象或select对象不在拥有焦点而退到后台时，引发该事件
//将光标移动到任意一个文本框，再将文本框移动到其他的位置，就会触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onLoad</title>
<script type="text/javascript">
function show(string) {
alert(string);
}
</script>
</head>
<body>
<p>会员注册：</p>
<p>账号：
<input type="text" name="textfield1" onblur="show('文档中的账号文本域失去焦点')" />
</p>
<p>密码：
<input type="text" name="textfield2" onblur="show('文档中的密码文本域失去焦点')" />
</p>
</body>
</html>
14.3.8onMouseOver事件
鼠标移动到某对象范围的上方时触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onMouseOver</title>
<style type="text/css">
<!--
#Layer{
position: absolute;
width: 257px;
height: 171px;
z-index: 1;
visibility: hidden;
}
-->
</style>
<script type="text/javascript">
function MM_findObj(n,d) {
var p,i,x;
if (!d) d = document;
if ((p=n.indexOf("?"))>0 && parent.frames.length) {
d = parent.frames[n.substring(p+1)].document;
n = n.substring(0,p);
}
if (!(x = d[n] && d.all)) x = d.all[n];
for (var i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
for (var i = 0; !x&&d.layers&&i<d.layers.length; i++) x = MM_findObj(n,d.layers[i].document);
if (!x && d.getElementById) x = d.getElementById(n);
return x;
}
function MM_showHideLayers() {
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (var i = 0; i < (args.length-2); i+=3) {
if ((obj=MM_findObj(args[i])) != null) {
v = args[i+2];
if (obj.style) {
obj = obj.style;
v = (v=='show')?'visible':(v=='hide')?'hidden':v;
}
obj.visibility = v;
}
}
}
</script>
</head>
<body>
<input type="submit" name="Submit" onmouseover="MM_showHideLayers('Layer','','show')" value="显示图像" />
<div id="Layer"><img src="img/2.jpg" width="257" height="171"></div>
</body>
</html>
14.3.9onMouseOut事件
鼠标指针离开某对象范围时触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onMouseOver</title>
<style type="text/css">
<!--
#Layer{
position: absolute;
width: 257px;
height: 171px;
z-index: 1;
visibility: hidden;
}
-->
</style>
<script type="text/javascript">
function MM_findObj(n,d) {
var p,i,x;
if (!d) d = document;
if ((p=n.indexOf("?"))>0 && parent.frames.length) {
d = parent.frames[n.substring(p+1)].document;
n = n.substring(0,p);
}
if (!(x = d[n] && d.all)) x = d.all[n];
for (var i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
for (var i = 0; !x&&d.layers&&i<d.layers.length; i++) x = MM_findObj(n,d.layers[i].document);
if (!x && d.getElementById) x = d.getElementById(n);
return x;
}
function MM_showHideLayers() {
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (var i = 0; i < (args.length-2); i+=3) {
if ((obj=MM_findObj(args[i])) != null) {
v = args[i+2];
if (obj.style) {
obj = obj.style;
v = (v=='show')?'visible':(v=='hide')?'hidden':v;
}
obj.visibility = v;
}
}
}
</script>
</head>
<body>
<input type="submit" name="Submit" onmouseout="MM_showHideLayers('Layer','','show')" value="显示图像" />
<div id="Layer"><img src="img/2.jpg" width="257" height="171"></div>
</body>
</html>
14.3.10onDblClick事件
鼠标双击时触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onDblClick</title>
<script type="text/javascript">
function show(theURL,winName,features) {
window.open(theURL,winName,features);
}
</script>
</head>
<body ondblclick="show('christmas.htm','','width = 700,height = 530')">
双击此链接，可以打开“christmas.htm”文档
</body>
</html>
14.3.11其它常用事件
1
2
3
4
14.4浏览器的内部对象
浏览器对象navigator：提供有关浏览器的信息
文档对象document：document对象包含了与文档元素一起工作的对象
窗口对象windows：windows对象处于对象层次的最顶端，它提供了处理浏览器窗口的方法和属性
位置对象location：location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象
窗口对象history：history对象提供了与历史清单有关的信息
14.4.1navigator对象
存取浏览器的相关信息
navigator常用属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>navigator</title>
<script type="text/javascript">
function check() {
name = navigator.appName;
document.write("你现在使用的是"+navigator.appName+"网页浏览器");
}
</script>
</head>
<body onload="check()">
</body>
</html>
14.4.2document对象
anchor锚对象：是指<a name=...></a>标记在HTML源代码中存在时产生的对象，它包含了文档中所有的anchor信息
links链接对象：是指用<a href = ...></a>标记链接一个超文本或超媒体的元素作为一个特定的URL
form窗体对象：是文档对象的一个元素，它含有多种格式的对象存储信息，使用它可以在JavaScript脚本中编写程序，并可以用来动态改变文档的行为
document对象有以下方法：write()，writeln()用来实现在Web页面上显示输出信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<script type="text/javascript">
function Links() {
n = document.links.length;
s= "";
for (i = 0; i < n; i++) {
s = s+document.links[i].href+"\n";
if (s == "") {
s == "没有任何链接";
}else{
alert(s);
}
}
}
</script>
</head>
<body>
<form>
<input type="button" value="所有链接地址" onclick="Links()"><br>
</form>
<p>
<a href="#">文档1</a><br>
<a href="#">文档2</a><br>
<a href="#">文档3</a><br>
<a href="#">文档4</a><br>
<a href="#">文档5</a><br>
</p>
</body>
</html>
14.4.3windows对象
windows对象处于对象层次的最顶端，它提供了处理navigator窗口的方法和属性
windows对象常用的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体大小和行距</title>
<style type="text/css">
.gy{
-webkit-filter: glow(color=pink,direction=5)
}
</style>
</head>
<body>
<div class="gy"><p align="center" ><font style="filter: grayscale(20%);">你好</font></p></div>
</body>
</html>
14.4.4location对象
location对象是一个静态的对象，它描述的是一个窗口对象打开的地址
location常见的属性
14.4.5history对象
history对象是浏览器的浏览历史
back()：后退，与单击后退按钮是等效的
forward()：前进，与单击前进按钮是等效的
go()：后退，用来进入指定的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history</title>
</head>
<body>
<a href="index1.html">history对象</a>
<form name="form1" method="post" action="">
<input type="button" name="按钮1" value="返回" onclick="history.back()">
<input type="button" name="按钮2" value="前进" onclick="history.forward()">
</form>
</body>
</html>
