一、JavaScript简介
1.1 什么是JavaScript
JavaScript，简称JS，由NetScape(网景)公司提供的一门语言；
JS是一门嵌入在网页中执行的脚本语言，专门用于实现网页交互；
JS嵌入在网页中，由浏览器负责解析并执行。为网页添加各种各样的动态效果或者为表单添加校验，目的是为了提供更好的用户体验；
JS和其他语言一样，有自身的数据类型、表达式、运算符、语句等程序的基本组成部分；
JS目前已经被广泛的应用于Web开发。
1.2 JS特点和优势(了解)
1、特点：
(1)JS是一门直译式的语言，直接执行的就是源代码，是一边解释一遍执行，没有编译的过程（不像Java需要提前编译为class文件再运行）
(2)JS是一门弱类型的语言。
Java中声明变量：
String s1 = "Hello Java";
int num = 100;
JS中声明变量:
var s1 = "Hello JS";
var num = 100;
var x = 100;
x = "abc";
x = true;
x = [];
x = {};
2、优势：
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)：只要有浏览器的地方都能执行JS
1.3 在HTML书写JS的方式
1、在script标签内部可以书写JS代码：
<!-- 引入JS的第一种方式: 直接在script标签内部书写JS代码 -->
<script type="text/javascript">
/* 在script标签内部可以书写JS代码和JS注释 */
alert( "引入JS的第 1 种方式...." );//alert在网页中弹出一个警告框
</script>
2、通过script标签引入外部的JS文件
<!-- 引入JS的第二种方式: 引入外部的JS文件 -->
<script type="text/javascript" src="test.js"></script>
需要注意的是:
(1)引入JS文件的script标签最好不要自闭，如果自闭了可能会导致部分浏览器引入JS文件失败！例如：
<script src="demo.js"/>
(2)引入JS文件的script标签内部不要再写JS代码，即使写了也无法执行
<!-- 引入JS的第二种方式: 引入外部的JS文件 -->
<script src="demo.js">
alert( 333 ); //此处的代码是不会执行的!
</script>
(3)script标签通常会放在head或body标签内部（放在其他地方也可以执行）
(4)通过事件绑定,也可以将JS代码直接写在元素上,例如:
<input type="button" value="别点我" onclick="alert('不让你点你非要点!!!')"/>
二、JavaScript语法
2.1 注释格式
JS的注释符合和Java的注释符合相同，如下：
// 单行注释内容
/* 多行注释内容 */
2.2 数据类型
1、基本数据类型
JS的基本数据类型一共有五种，分别是数值类型、字符串类型、布尔类型、undefined、null。
(1)数值类型(number)
JS中的数值在底层都是浮点型，但在需要时会自动的和整型之间进行转换，例如：
2.4+3.6 结果是6，而不是6.0
还有一些是js数值类型中的特殊值：
Infinity 正无穷大
-Infinity 负无穷大
NaN 非数值
(2)字符串(string)
JS中字符串属于基本数据类型，并且JS中的字符串类型可以使用单引号或者双引号引起来，例如：
var str1 = "Hello JS";
var str2 = 'Hello JS';
JS的字符串类型在底层有对应的包装对象--String
var str3 = "Hello JS"; // typeof str3 -- string
//js中的一个运算符typeof：是用来返回变量或者是表达式的数据类型
var str4 = new String("Hello JS"); // typeof str4 -- Object
str3.valueOf(); // 当需要时，会将字符串转成对应的包装对象，从而调用属性或方法
str4.valueOf();
(3)布尔类型(boolean)
布尔类型常用于条件测试中，值为true和false。
(4)undefined 和 null
undefined类型的值只有一个，就是undefined，从字面上理解就是变量未定义，当声明了变量但没有为变量赋值时，该变量的值就是undefined。
null类型的值也只有一个，就是null，表示空值，可以用于函数的返回值，表示函数返回的是一个空的对象。
2、复杂数据类型
JS的复杂数据类型主要指对象(JS的内置对象、JS自定义对象、数组、函数)
2.3 变量声明
1、在JS中通过var关键字声明变量，例如：
var a = 10; //声明一个变量,赋值为10
var b = true; //声明一个变量, 赋值为true
var c = "Hello JS"; //声明一个变量,赋值为字符串"Hello JS";
2、在JS中声明的变量不区分类型，可以指向任意类型的数据，例如：
var x = 10; //声明一个变量x, 并赋值为10, 此时变量x的数据类型为 number
x = "abc"; //将字符串"abc"赋值给x, 此时变量x的数据类型为string
x = false; //将布尔值false赋值给x, 此时变量x的数据类型为boolean
x = []; //将数组赋值给x, 此时变量x的数据类型为object。
x = {}; //将对象赋值给x, 此时变量x的数据类型为object
...
2.4 JS运算符
JS和Java中的运算符大致相同，例如：
算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式1 : 表达式2
...........
2.5 JS语句
JS中的语句和Java中的大致相同
1、if分支结构
if分支结构用于基于不同的条件来执行不同的动作。语法结构如下：
if (条件 1){
当条件 1 为 true 时执行的代码
}else if (条件 2){
当条件 2 为 true 时执行的代码
}else{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
案例1：if分支案例
(1)例子: 接收用户输入的成绩，判断成绩所属的等级
80~100(包括80，也包括100) 优秀
60~80(包括60，但不包括80) 中等
0~60(包括0，但不包括60) 不及格
其他值 输入有误
(2)代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
/* 案例1：if分支案例：
接收用户输入的成绩，判断成绩所属的等级
80~100(包括80，也包括100) 优秀
60~80(包括60，但不包括80) 中等
0~60(包括0，但不包括60) 不及格
其他值 输入有误
*/
//prompt函数可以弹框提示用户输入成绩, 并返回用户输入的内容
var score = prompt("请输入你的成绩：")
//console.log();是浏览器提供的一个方法，可以将内容输出到浏览器的控制台上。
console.log(score);
if( score >= 80 && score <=100 ){
alert("您的成绩属于：优秀！");
}else if( score >= 60 && score < 80 ){
alert("您的成绩属于：中等！");
}else if( score >= 0 && score < 60 ){
alert("您的成绩属于：不及格！");
}else{
alert("您输入的成绩不合法，请重新输入！");
}
</script>
</head>
<body>
<h1>js的语句示例...</h1>
</body>
</html>2、switch语句
使用 switch 语句来选择要执行的多个代码块之一。语法结构如下：
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
执行原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
案例2：switch语句案例
（1）实现一个简易的计算器：
可以接收用户输入的两个数值和一个操作符(+、-、*、/)，根据操作符号的不同，对两个数值执行不同的运算。
（2）代码实现如下：
/** 2、switch语句案例：实现一个简易的计算器：可以接收用户输入的两个数值和一个运算符
(+、-、*、/)，根据运算符的不同，对两个数值执行不同的运算。 */
var s = prompt("请输入数值1、运算符、数值2，中间用逗号分隔："); // "100,+,5"
var arr = s.split(","); //[ "100", "+", "5" ]，split元素是用来建立一个分割的作用
var num1 = parseFloat( arr[0] );//转换成字符串类型
var opt = arr[1]; // + - * /
var num2 = parseFloat( arr[2] );
switch( opt ){
case "+":
alert( "两个数的和为: "+( num1+num2 ) );
break;
case "-":
alert( "两个数的差为: "+( num1-num2 ) );
break;
case "*":
alert( "两个数的乘积为: "+( num1*num2 ) );
break;
case "/":
alert( "两个数的商为: "+( num1/num2 ) );
break;
default:
alert( "您输入的运算符不合法! ");
}
3、for循环语句 -- 循环代码块一定的次数
for 循环的语法结构如下：
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}
案例3：for循环语句案例
（1）例题：
遍历1~100之间的所有整数，求1~100之间所有整数的和，并输出到控制台;
（2）代码实现如下：
//for循环实现上面的练习
var sum1 = 0;
for( var i=1; i<=100; i++ ){
sum1 += i; //sum1 = sum1+i;
}
console.log( "(for)1~100之间所有整数的和为: "+sum1 );
//while循环实现上面的练习
var sum2 = 0, i=1;
while( i <= 100 ){
sum2 += i;
i++;
}
console.log( "(while)1~100之间所有整数的和为: "+sum2 );
4、while循环 -- 在指定条件为真时循环执行代码块
JS中while循环也分为while和do/while循环，下面为while循环语法结构:
while (条件){
需要执行的代码
}
while 循环会在指定条件为真时循环执行代码块。
案例4：while循环语句案例
（1）遍历下面数组中的元素，将元素输出到控制台。
var arr = [123, "abc", false, new Object() ];
（2）代码实现如下：
var arr = [123, "abc", false, new Object() ]
//for循环实现遍历数组
for( var i=0; i< arr.length; i++ ){
console.log( arr[i] );
}
console.log( "------------------------" );
//while循环实现遍历数组
var i = 0;
while( i < arr.length ){
console.log( arr[i] );
i++;
}
2.6 JS数组
JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等
声明方式一：
(1)声明一个空数组
var arr1 = [];
(2)声明一个指定初始值的数组
var arr2 = [88, "Hello", true, 123];
声明方式二:
(3)通过Array函数创建一个空数组
var arr3 = new Array();
(4)声明一个指定初始值的数组
var arr4 = new Array(88, "Hello", true, 123);
关于JS中数组的细节:
(1)JS中的数组可以存放任意类型数据
(2)JS中数组的长度可以通过length属性获取或设置，并且JS中数组的长度是可以被任意改变。
//声明一个空数组
var arr1 = [];
console.log( arr1.length ); //此时数组长度为 0
arr1.length = 10;
console.log( arr1.length ); //此时数组长度为 10
arr1[99] = "abc";
console.log( arr1.length ); //此时数组长度为 100
arr1.length = 0;
console.log( arr1.length ); //此时数组长度为 0
2.7 JS函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块，前面使用了关键词 function。
声明函数的语法:
function funName([参数1,参数2,…]){
需要执行的代码
}
调用函数: funName([参数1,参数2,…]);
//声明一个函数，接收两个数值并计算两个数值的和并返回
function getSum(a, b){
return a + b;
}
var sum = getSum(123, 345);
console.log( sum );
另外,也可以按照如下方式声明函数:
var funName = function ([参数1,参数2,…]){
需要执行的代码
}
调用函数: funName([参数1,参数2,…]);
2.8 综合练习
(自己完成)声明一个函数fn，在函数中实现：遍历指定的两个数值(例如1和100)之间的整数，将是3的倍数的数值存入到一个数组中，并将数组返回。
1、声明fn函数
function fn(x,y){
var arr = [];
for(var i=x,j=0;i<y;i++){
if(i%3==0){
arr[j] = i;
j++;
}
}
return arr;
}
2、调用fn函数, 获取1~100之间是3的倍数的数值组成的数组
var arr = fn(1,100);
3、遍历数组中的元素, 输出在网页上(提示: document.write("输出的内容") )
for(var i=0;i<arr.length;i++){
document.write(arr[i]+" ");
}
三、DOM操作
DOM: (Document Object Model)文档对象模型，DOM是由W3C组织制定的一种处理HTML(包括xml)文件的标准API
DOM提供了对整个HTML文档的访问模型，将文档作为一个树形结构，树的每个节点都表示了一个HTML标签或者标签中的文本。
在JS中，是将每一个HTML元素、属性、内容都当成一个一个的JS对象，利用对象的方法和属性，可以方便的访问、修改、添加、删除HTML中的元素、属性和内容
3.1 案例：电灯开关
用Eclipse软件编写：
（1）点击电灯可以实现开/关灯，代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js开、关灯练习</title>
<style type="text/css">
body{
padding:20px;
font-size:20px;
}
img{
width:200px;
height:200px;
}
</style>
<script type="text/javascript">
/** 练习：点击按钮，开灯或关灯 */
var flag = "off"; //表示灯默认的关闭状态
function changeImg(){
//1.通过id属性获取img元素(返回表示img元素的JS对象)
var img = document.getElementById("light");
if( flag == "off" ){ //表示灯是关闭状态,点击后则需要打开
//2.通过img元素的src属性值修改图片的路径
img.src = "imgs/on.jpg"; //开灯
flag = "on";
}else{ //表示灯是打开状态, 点击后则需要关闭
img.src = "imgs/off.jpg"; //关灯
flag = "off";
}
}
</script>
</head>
<body>
<img src="imgs/off.jpg" id="light"><br/>
<input type="button" value="开/关灯" onclick="changeImg()"/>
</body>
</html>（2）代码分析：
<script type="text/javascript">
/* 声明一个函数，用来点击按钮，触发函数 */
function changeimg(){
//3.所以定义一个用来表示灯泡状态的值
var flag = "off";//表示灯的默认值是处于关闭状态的
//1.通过元素的id属性获取img元素（返回表示img元素的JS对象）
var img = document.getElementById("light");
//4.判断灯的状态
if(flag == "off"){//表示灯是关闭状态，点击按钮后需要打开
//5.所以将这个img.src = "imgs/on.jpg";提到判断语句里面
img.src = "imgs/on.jpg";//开灯
flag = "on";
}else{//表示灯是打开的，点击后则需要关闭
img.src = "imgs/off.jpg";//关灯
flag = "off";
}
/* //2.通过img元素的src属性值修改图片的路径
img.src = "imgs/on.jpg";//只有这个判断只能开不能关，除非刷新网页 */
/*1. document:表示当前这个HTML文档
by:是通过；get:是获取；Element：是元素
整个意思就是说：在整个文档里面通过id获取所需的元素
2.声明一个对象用来接收：var img = document.getElementById(light);*/
}
</script>
（3）效果为：
3.2 案例：增删改元素
点击网页中的按钮对html元素进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsDOM操作增删改</title>
<style>
div { border:#0099FF 2px solid;
height:60px;
width:350px;
margin:20px 10px;
padding:5px 7px;
line-height:60px;
font-size:26px;
text-align:center;
}
#div_1{ background-color:#d400ff; }
#div_2{ background-color:#FF3399; }
#div_3{ background-color:#00FF00; }
#div_4{ background-color:#FFFF66; }
#info{ width:250px;
height:90px;
font-size:22px;
padding:5px;
resize:none;
}
input{font-size:18px;}
</style>
<script>
/*练习1、添加元素：添加一个div元素到body中 */
function addNode(){
//1.创建一个新的div元素并声明一个变量（返回的是一个JS对象，表示新创建的div元素）
var oNewDiv = document.createElement("div");
//4.给新创建的div里面添加内容
/*oNewDiv.innerHTML的作用：1.获取当前元素的内容，当前元素如果为空就返回一个字符串
2.通过这个属性可以给元素设置内容，设置了新内容将会把原先的内容全部覆盖掉*/
oNewDiv.innerHTML = "我是一个新添加的div元素";
//2.获取body元素（父元素）
//var oBody = document.getElementsByTagName("body")[0];
/* 在整个文档里通过标签名获取元素，此方法返回的一定是一个数组 ，好处就是通过元素名
可以获取元素，还可以通过下标设定要找的元素*/
/* 更简便的获取body元素的方法如下： */
var oBody = document.body;
//3.通过父元素调用方法将div添加到父元素内部
oBody.appendChild(oNewDiv);
}
/*练习2、删除元素：删除id为div_2的元素 */
function deleteNode(){
//1.获取要删除的元素（id为div_2的元素）
var oDiv2 = document.getElementById("div_2");
//2.获取要删除的父元素
var oParent = oDiv2.parentNode;
/* parentNode属性：不管它的父元素是谁，都能通过这个属性获取当前元素的父元素 */
//3.通过父元素调用方法将div_2删除
oParent.removeChild(oDiv2);
}
/*练习3、更新元素：更新div_3元素里面的内容 */
function updateNode(){
//1.获取要更新的元素（id为div_3）
var oDiv3 = document.getElementById("div_3");
//2.更新元素里面的内容（innerHTML）
console.log(oDiv3.innerHTML);//更新之前的内容
oDiv3.innerHTML = "我是新的div_3";//设置内容
console.log(oDiv3.innerHTML);//更新之后的内容
}
</script>
</head>
<body>
<!-- 1.在body里面创建三个按钮和四个div元素 -->
<input type="button" value="第一个添加元素的按钮" onclick="addNode()" /><br /><br />
<input type="button" value="第二个删除元素的按钮" onclick="deleteNode()" /><br /><br />
<input type="button" value="第三个更新元素的按钮" onclick="updateNode()" /><br/><br />
<hr />
<div id="div_1">
第一个div
</div>
<div id="div_2">
第二个div
</div>
<div id="div_3">
第三个div
</div>
<div id="div_4">
第四个div
</div>
</body>
</html>
3.3 案例：网页换肤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js-网页换肤</title>
<style>
body{
font-size:18px ;
font-family: "微软雅黑";
}
hr{
border: 1px solid yellow;
}
a{
font-size: 17px;
font-weight: 500;
}
a:hover{
color:#0099FF;
}
h2,#change-font{
text-align: center;
}
#newstext{
padding: 10px;
margin: 0 auto;
letter-spacing: 2px;
}
/* 预先定一些选择器 */
.min{
font-size: 16px;
}
.middle{
font-size: 18px;
}
.max{
font-size: 20px;
}
.super-max{
font-size: 24px;
}
</style>
<link href="css/none.css" id="link" rel="stylesheet"/>
<script>
/*练习1：执行下面的函数，切换字体大小 */
function resize(selector){
//1.获取包裹技能内容的div元素（id为newstext）
var oDiv = document.getElementById("newstext");
//2.将接收到的选择器的名字（selector）设置给div的class(className)属性值
oDiv.className = selector;
}
/*练习2：执行下面的函数，为页面切换不同的皮肤 */
function changeStyle(){
//3.1定义数组，存放不同的皮肤（css文件的路径）
var cssArr = ["css/red.css","css/green.css","css/blue.css"]
var index = 0;//表示数组的下标
//1.获取link标签（id=“link”）
var oLink = document.getElementById("link");
/* 2.为link标签href属性设置属性值，指向css/red.css,这样指向的只是一个固定路径
oLink.href = "css/red.css"; */
//3.所以用以下这些来设置：
//3.2把第二个改为如下：
oLink.href = cssArr[index];
index++;
if(index == cssArr.length){
index = 0;
}
}
</script>
</head>
<body>
<h2>云缨技能介绍</h2>
<div id="change-font">
<!-- javascript:void(0)：阻止超链接发生跳转，和普通按钮没什么区别 -->
<a href="javascript:void(0)" onclick="resize('min')">小字体</a>
<a href="javascript:void(0)" onclick="resize('middle')">中字体</a>
<a href="javascript:void(0)" onclick="resize('max')">大字体</a>
<a href="javascript:void(0)" onclick="resize('super-max')">超大字体</a>
<a href="javascript:void(0)" onclick="changeStyle()">换肤</a>
</div>
<hr />
<div id="newstext" class="middle">
<p>云缨与神兵“掠火”心念相通，每释放一个技能，
便会领悟一层枪意，三层枪意分别为坚意、锐意和真意。</p>
<p>使用普通攻击会消耗枪意，并施放对应的枪意技，减少一、二技能1.25冷却时间。</p>
<p>【一层枪意： 坚意·止戈】 对周围近距离敌人造成四次伤害，并获得2秒护盾、
释放期间可移动。</p>
<p>【二层枪意： 锐意·摧城 】 刺出三次中距离攻击造成伤害，
命中后回复生命值，已损生命越多，回复效果越好。</p>
<p>【三层枪意： 真意·燎原】 蓄势后对远距离一条直线上所有敌人造成伤害，
目标已损生命值越多，造成伤害越高。释放期间还可以高速移动并跨越地形。</p>
</div>
</body>
</html>
3.4 总结：JS获取元素
（1）document.getElementById( id值 )
-- 通过元素的id值，获取一个元素。返回的是表示该元素的js对象。
（2）document.getElementsByTagName( 元素名 )
-- 通过元素名称获取当前文档中的所有指定名称的元素，返回的是一个数组，其中包含了所有指定名称的元素。
（3）document.body
-- 获取当前文档中的body元素
（4）ele.parentNode
-- 获取当前元素的父元素。obj表示当前元素
3.5 总结：JS增删改元素
（1）document.createElement( 元素名称 )
-- 根据元素名称创建指定名称的元素，返回的是表示新创建元素的js对象
（2）parent.appendChild( child )
-- 通过父元素添加子元素，其中parent表示父元素，child表示子元素
（3）parent.removeChild( child )
-- 通过父元素删除子元素，其中parent表示父元素，child表示子元素
（4）ele.innerHTML
-- 获取当前元素的html内容(从开始标签到结束标签之间的所有内容)
-- 或者, 还可以设置当前元素的html内容(如果元素内部有内容，将会覆盖原有内容)
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
