一、 JavaScript概述
● javaScript历史
JavaScript 是由Netscape公司（美国网景公司）开发的一种脚本语言（无需编译即可运行），Netscape公司将这种 脚本语言 命名为 LiveScript ，与java一样，也是面向对象的语言，可由浏览器直接解释运行。
Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以利用 Livescript 为 Java的普及做铺垫，于是两家签订协议，将 LiveScript 改为 JavaScript。
● JavaScript与html,css关系
JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互。弥补了HTML的缺陷。
JavaScript 作为一种直译式脚本语言，用来为网页添加各式各样的动态功能（javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
二、 基本语法
● 写在哪里？
javaScript脚本写在一组<script>标签中，此标签可以放在head中或body中，一般习惯放在 head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件
● 对话框
alert(‘welcome!’); 提示对话框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="index.js">
alert("在引入外部文件的标签中调用函数");
</script>
<!-- 当引入外部文件时，该引入的标签内部的函数无效 -->
<script>
// 调用一个对话框的库函数
alert("Hello World");
function test(){
alert("Hello");
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="test()"/>
</body>
</html>
index.js 文件：
alert("外部的JS文件");
● 变量
声明变量用var关键字，例如 var name;
声明变量的同时对其赋值，var test=“THIS IS A BOOK”
● JavaScript支持的数据类型
1、数值型(number)：其中包括整型数和浮点型数。
2、布尔型(boolean)：即逻辑值，true或flase。
3、字符串型：由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）
4: undefined类型
5: Object类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 使用 var 进行声明
var a;
// javaScript是弱类型语言，变量没有固定类型，赋了什么值就是什么类型
// 1.整型 浮点型
a=10;
// alert(a);
// alert(typeof(a)); //typeof() 返回数据类型
a="abc";
// alert(a); //num
// alert(typeof(a));
// 2.布尔类型
b="a";
// alert(a==b); //false
// 3.字符串，单引号、双引号都表示字符串
// alert(typeof(b)); //string
// 4.undefined类型：未定义的变量
var g;
// alert(typeof(g));
// 5.Object类型
var date = new Date();
alert(date.getFullYear()); //2024
alert(date.getMonth()+1); //5+1
</script>
</head>
<body>
</body>
</html>三、 基本语法-运算符
● 算术运算符
+ 可以进行“加法”与“连接”运算，如果2个运算符中的一个是字符串，javascript就将另一个转换成字符串，然后将2个运算数连接起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 算数运算符 + - * / % ++ --
+可以进行“加法”与“连接”运算，
如果2个运算符中的一个是字符串，
javascript就将另一个转换成字符串，
然后将2个运算数连接起来。*/
var a = "10";
var b = 5;
// alert(a+b); // 字符串连接： 105
var c = 10;
// alert(b+c); // 加法： 15
// 减法时：当字符串是数字时，会自动转化为数字
// alert(a-b); // 5 说明在减法时自动转换字符串为数字
var d = "a";
//alert(c-d); // NaN --- not a number
// alert(a-d); // NaN
// alert(d-b); //NaN
</script>
</head>
<body>
</body>
</html>● 赋值运算符
● 比较运算符
比较运算符在逻辑语句中使用，以测定变量或值是否相等。
给定 x=5，下面的表格解释了比较运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a = "10";
var b = 10;
// 等于：只比较值的大小
alert(a==b); // true
// 全等于：既比较值的大小，又比较值的类型
alert(a===b); // false
</script>
</head>
<body>
</body>
</html>● 逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符：
● 条件运算符
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
语法：
var result = (条件表达式)?结果1:结果2
//当条件成立返回?后的内容，否则返回:后的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a = "10";
var b = 10;
var c = (a==b)?"等于":"全等于";
alert(c);
var c = (a===b)?"等于":"全等于";
alert(c);
</script>
</head>
<body>
</body>
</html>● 基本语法-控制语句
第一种是选择结构：
1.单一选择结构（if）
2.二路选择结构（if/else）
3.多路选择结构（switch）
第二种类型的程序控制结构是循环结构：
1.由计数器控制的循环（for）
2.在循环的开头测试表达式（while）
3.在循环的末尾测试表达式（do/while）
4.break continue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a = "10";
var b = 10;
var c = (a==b)?"等于":"全等于";
// alert(c);
var c = (a===b)?"等于":"全等于";
// alert(c);
// 控制语句
/*
第一种是选择结构
1.单一选择结构（if）
2.二路选择结构（if/else）
3.多路选择结构（switch）
第二种类型的程序控制结构是循环结构。
1.由计数器控制的循环（for）
2.在循环的开头测试表达式（while）
3.在循环的末尾测试表达式（do/while）
4.break continue
*/
for(var i=0;i<5;i++){
alert(i);
}
</script>
</head>
<body>
</body>
</html>四、 函数
● 定义函数
函数定义的基本语法：
function functionName([arguments]){
javascript statements
[return expression]
}
function：表示函数定义的关键字;
functionName：表示函数名;
arguments：表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;
statements：表示实现函数功能的函数体;
return expression：表示函数将返回expression的值，同样是可选的的语句。
● 调用
<script type= "text/javascript">
function fun(){
alert(“test”);
}
fun();//函数名调用
function fun2(){
fun();//在其他函数中调用
}
</script>
● 全局函数
• parseInt(arg) ：把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN” 。
var a = "123";
var b = "12a";
var c = "a12";
alert(parseInt(a)); // 123
alert(parseInt(b)); // 12
alert(parseInt(c)); // NaN• parseFloat(arg) ：把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN” 。
• typeof (arg)：返回arg值的数据类型。
• eval(arg) ：可运算某个字符串。
五、 事件
一些常用的事件:
onclick()：鼠标点击时；
onblur()：标签失去焦点；
onfocus()：标签获得焦点；
onmouseover()：鼠标被移到某标签之上；
onmouseout：鼠标从某标签移开；
onload()：是在网页加载完毕后触发相应的的事件处理程序；
onchange()：是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 为了让事件调用到，要编写函数
function test(){
console.log("事件被触发");//相当于print
}
function textblur(id){
console.log(id+"文本框失去焦点");//相当于print
}
function textfocus(id){
console.log(id+"文本框获得焦点");//相当于print
}
function textchange(id){
console.log(id+"文本框失去焦点且内容被修改");//相当于print
}
//test(); //而在这里调用 tset() 时，网页并没有加载
</script>
</head>
<body onload="test()"> <!-- 不会在执行到这一行时立即触发onload，而是等整个网页加载完毕后触发 -->
<!-- 一些常用的事件:
// onclick()：鼠标点击时；
// onblur()：标签失去焦点；
// onfocus()：标签获得焦点；
// onmouseover()：鼠标被移到某标签之上；
// onmouseout：鼠标从某标签移开；
// onload()：是在网页加载完毕后触发相应的的事件处理程序；（一般写在body里）
// onchange()：是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
-->
<!-- 需要打开 调试 -->
<!-- 鼠标点击事件 -->
<input type="button" value="单击按钮的触发事件" onclick="test()" name="" id=""><!-- onclick后跟函数 -->
<div onclick="test()">
点击文字的触发事件
</div>
<!-- 失去焦点事件 -->
<input type="text" name="" id="1" onblur="textblur(id)" onfocus="textfocus(id)">
<!-- 获得焦点事件 -->
<input type="text" name="" id="2" onblur="textblur(id)" onfocus="textfocus(id)">
<!-- 移入标签触发事件 -->
<div onmouseover="test()">
鼠标移入触发
</div>
<!-- 移除标签触发事件 -->
<div onmouseout="test()">
鼠标移除触发
</div>
<!-- 失去焦点且内容改变时触发 -->
<input type="text" name="" id="3" onchange="textchange(id)" onblur="textblur(id)">
</body>
</html>六、 Html DOM
DOM（Document Object Model ）：文档对象（网页中的标签），通过html dom，可用javaScript操作html文档的所有标签
● 查找 元素
通常，通过 JavaScript，需要操作 HTML 标签。为了做到这件事情，必须首先找到该标签。
● 有四种方法来做这件事：
通过 id 找到 HTML 标签
document.getElementById(“id");
通过标签名找到 HTML 标签
document.getElementsByTagName("p");
通过类名找到 HTML 标签
document.getElementsByClassName("p");
通过name找到 HTML 标签
document.getElementsByName(“name");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
我们现在已经掌握通过触发事件调用javaScript函数了
接下来需要通过 JavaScript函数对网页的标签进行操作
如何在jS中操作网页标签？
jS认为：网页中的每个标签都是一个对象,这一类标签对象称为 HTML Dom对象
如何在 JS中获得网页的标签对象？
在网页加载完毕后，JS中会生成一个document对象（表示整个HTML文档）
里面提供了一个 getElementById() 方法
*/
function test(){
var tojb1 = document.getElementById("txt1");//通过标签id获得网页中的标签对象
// alert(tojb1);
// console.log(tojb1.value);
var tojb2 = document.getElementById("txt2");
tojb2.value = tojb1.value; // 将 2的值 赋给 1
tojb1.value = "";
tojb1.type="radio";
}
//改变图片
var i = 2;
function changeImg(){
var img = document.getElementById("img1");
img.src="img/"+i+".jpg"; //改变图片的src的值
if(i==4){
i=1;
return;
}
i++;
}
</script>
</head>
<body>
<input type="text" name="" id="txt1" value=""> <!-- 一个标签就是一个对象 -->
<input type="text" name="" id="txt2" value="">
<input type="button" onclick="test()" value="测试">
<!-- 改变图片 -->
<img src="img/1.jpg" alt="" id="img1" onclick="changeImg()"/>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.green{
width: 50px;
height: 50px;
background-color: green;
border: 20;
border-color: black;
}
.red{
width: 50px;
height: 50px;
background-color: red;
border: 20;
border-color: black;
}
</style>
<script>
function changeByTag(){
var a = document.getElementsByTagName("div");
a[2].style.backgroundColor="red";
}
function changeOne() {
var a = document.getElementsByClassName("green");
// alert(a.length); //结果是一个集合对象而不是标签
a[0].innerHTML = "a";
}
function changeM() {
var a = document.getElementsByClassName("green");
for(var i = 0;i<a.length;i++){
a[i].innerHTML = "a";
}
a[1].style.width="200px";
a[1].style.backgroundColor = "red";
}
</script>
</head>
<body>
<div class="green"></div><br />
<div class="green"></div><br />
<div class="green"></div><br />
<div class="green"></div><br />
<button onclick="changeOne()">改变一个</button>
<button onclick="changeByTag()()">改变一个</button>
<button onclick="changeM()">改变全部</button>
</body>
</html>● 改变 HTML
Html dom允许javaScript 改变html标签的内容。
改变 HTML 标签的属性
document.getElementById(“username").value=“new value";
document.getElementById("image").src=“new.jpg";
修改 HTML 内容的最简单的方法时使用 innerHTML 属性
document.getElementById(“div”).innerHTML=new HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
var divobj1 = document.getElementById("d1");
var divobj2 = document.getElementById("d2");
var divobj3 = document.getElementById("d3");
var divobj4 = document.getElementById("d4");
var divobj5 = document.getElementById("d5");
// divobj2.value=divobj1.value; // div 没有 value属性
divobj2.innerText=divobj1.innerText;//获取内部的文本内容
divobj4.innerText=divobj3.innerText;
divobj5.innerHTML=divobj3.innerHTML;//获取内部的文本内容和文本格式
}
</script>
</head>
<body>
div1:<div id="d1">html dom对象</div>
div2:<div id="d2"></div>
div3:<div id="d3">
<b>html dom对象</b>
</div>
div4:<div id="d4"></div>
div5:<div id="d5"></div>
<!-- 触发用的按钮 -->
<input type="button" name="" id="" value="触发" onclick="test()">
</body>
</html>● 改变 CSS
html dom允许 javaScript改变html标签的样式。
语法：
document.getElementById("id").style.property=new style;
例：
document.getElementById("p2").style.backgroundImage="url(bg.jpg)";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
var divobj1=document.getElementById("d1");
divobj1.style.backgroundColor="green";
divobj1.style.width="200px";
divobj1.style.height="200px";
}
</script>
</head>
<body>
<div style="background-color: aqua;" id="d1">
aaaa
</div>
<input type="button" name="" id="" value="改变属性" onclick="test()">
</body>
</html>七、 内置对象
● String字符串
属性
length 用法：返回该字符串的长度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var s = "abcde";
console.log(s.length); // 5
</script>
</head>
<body>
</body>
</html>方法
charAt(n)：返回该字符串位于第n位的单个字符
indexOf(char)：返回指定char首次出现的位置
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中
例如：'1&2&345&678'.split('&')返回数组：1,2,345,678。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var s = "abcde";
// 属性：
// length 用法：返回该字符串的长度
console.log(s.length); // 5
// 方法
// charAt(n)：返回该字符串位于第n位的单个字符.
console.log(s.charAt(2)); // c
// indexOf(char)：返回指定char首次出现的位置.
console.log(s.indexOf('d')); // 返回首次出现的位置，即 3
// lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
//substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.
console.log(s.substring(1,3)); // bc
//substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.
console.log(s.substr(1,3)); // bcd
//split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。
console.log ("1&2&345&678".split('&')); //返回数组：['1', '2', '345', '678']
</script>
</head>
<body>
</body>
</html>● Array数组
数组的定义方法：
var <数组名> = new Array();
这样就定义了一个空数组。以后要添加数组元素，就用：
<数组名>[下标] = 值;
如果想在定义数组的时候直接初始化数据，用：
var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);
还可以：
var <数组名> = [<元素1>, <元素2>, <元素3>...];
属性：
length ：数组的长度，即数组里有多少个元素。
方法：
join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间
reverse() ：使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成：[3, 2, 1]
sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。但不能对数字排序
需要调用排序函数。
function sortNumber(a,b){
return a - b;
}
// 再将函数作为参数放到方法中
array.sort(sortNumber);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//声明数组
var a = new Array();
a[0] = 1;
a[1] = "ab"; // 数组可以随意放任何东西
a[2] = true;
//还可以跳过
a[4] = 3;
console.log(a);
var b = new Array(2, "bc", false);
console.log(b);
var c = [3, "cd", null];
console.log(c);
//数组属性 length
//数组方法：
// join( < 分隔符 > )：（即将数组转为字符串）
// 返回一个字符串， 该字符串把数组中的各个元素串起来， 用 < 分隔符 > 置于元素与元素之间
s = a.join("@");
console.log(s);
// reverse()：
// 使数组中的元素顺序反过来。 如果对数组[1, 2, 3] 使用这个方法， 它将使数组变成：[3, 2, 1]
s = b.reverse();
console.log(s);
// sort()：
// 使数组中的元素按照一定的顺序排列。 如果不指定 < 方法函数 > ，则按字母顺序排列。 但不能对数字排序
var e = ['d', 'a', 'c', 'b'];
e.sort();
console.log(e); //['a', 'b', 'c', 'd']
// 但不能对数字排序
var f = [2, 1, 4, 7, 11];
f.sort();
console.log(f); //[1, 11, 2, 4, 7]
// 这里就需要我们自定义一个排序，就像Java的重写方法一样
function numSort(a, b) {
return a - b;
}
// 这个时候在调用sort()方法,然后将函数作为参数传进去
f.sort(numSort);
console.log(f);
</script>
</head>
<body>
</body>
</html>● Date
获取日期（需要 new Date() ）
new Date() ：返回当日的日期和时间
getFullYear() ：返回四位数字年份
getDate() ：返回一个月中的某一天 (1 ~ 31)
getMonth() ：返回月份 (0 ~ 11)
getDay() ：返回一周中的某一天 (0 ~ 6)
getHours() ：返回 Date 对象的小时 (0 ~ 23)
getMinutes() ：返回 Date 对象的分钟 (0 ~ 59)
getSeconds() ：返回 Date 对象的秒数 (0 ~ 59))
● Math
Math 对象，提供对数据的数学计算。（不用创建对象，直接调用）
属性
PI ：返回 π（3.1415926535...)
方法
Math.abs(x) ：绝对值计算；
Math.pow(x,y) ：数的幂；x的y次幂
Math.sqrt(x) ：计算平方根；
Math.ceil(x) ：对一个数进行上舍入
Math.floor(x) ：对一个数进行下舍入。
Math.round(x) ：把一个数四舍五入为最接近的整数
Math.random() ：返回 0 ~ 1 之间的随机数
Math.max(x,y) ：返回 x 和 y 中的最大值
Math.min(x,y) ：返回 x 和 y 中的最小值
八、 计时
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
方法：
setTimeout(“函数”,”时间”)：未来的某时执行代码
clearTimeout()：取消setTimeout()
setInterval(“函数”,”时间”)：每隔指定时间重复调用
clearInterval()：取消setInterval()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function hello() {
alert("Hello");
}
// 返回值是计时器的编号
var t; //必须定义在外面，否则函数调用不到
var t2;
// 方法：
// setTimeout(“函数”,”时间”)：未来的某时执行代码 （定时调用一次）
function beginTime() {
t = setTimeout("hello()", 3000); // 前面是调用的函数名 后面是定时 3000ms
}
function stopTime() {
clearTimeout(t); //里面填计时器的编号
}
// setInterval(“函数”,”时间”)：每隔指定时间重复调用
// clearInterval()：取消setInterval()
function beginInterval() {
t2 = setInterval("hello()", 3000);
}
function stopInterval() {
clearInterval(t2);
}
//在网页上显示一个电子表 年月日 时分秒 在一个div显示出来 ，打开网页自动开始执行
</script>
</head>
<body>
<button onclick="beginTime()">开始计时</button>
<button onclick="stopTime()">停止计时</button>
<button onclick="beginInterval()">开始循环计时</button>
<button onclick="stopInterval()">停止循环计时</button>
</body>
</html>电子表练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.aclock {
background-color: aquamarine;
width: 300px;
font-size: 40px;
color: azure;
text-align: center;
}
</style>
</head>
<body>
<div id="box" class="aclock"></div>
<button onclick="stopTime()">暂停</button>
<button onclick="beginTime()">开始</button>
</body>
<script>
function oclock() {
var date = new Date();
var divObj = document.getElementById("box");
// divObj.innerText = date;
// divObj.innerText = date.toLocaleString();
divObj.innerText = date.getFullYear() + "年" + date.getMonth() + "月" + date.getDay() + "日" +
date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
// oclock();
var t = setInterval("oclock()", 10);
function beginTime() {
t = setInterval("oclock()", 10);
}
function stopTime() {
clearInterval(t);
}
</script>
</html>