4.1JavaScript简介
4.1.1什么是JavaScript(了解)
全称JavaScript，简称JS，由Netscape公司提供的。
是嵌入在html网页中的一门脚本语言，专门用于实现网页的交互。
JS嵌入在网页中，由浏览器负责解析并执行。为网页添加各式各样的动态效果或为表单添加校验，为用户提供更好的浏览体验。
JS语言和其他语言一样，有自身的基本数据类型、表达式、运算符、语句等程序的基本组成部分。
JS目前已经被广泛的用于web应用开发。
4.1.2JS特点和优势(了解)
1、特点：
(1)JS是一门直译式的语言，直接执行源代码（是一边解释一边执行，不像Java需要提前编译为class文件再运行）
(2)JS是一门弱类型的语言
2、优势：
(1)良好的交互性
(2)一定的安全性
(3)跨平台性（有浏览器的地方就可以执行JS）
4.1.3在HTML书写JS的方式(掌握)
1、在script标签内部可以书写JS代码：
示例：
<head>
...
<!-- 第一种引入JS的方式 -->
<script> alter("引入JS的第一种方式..."); </script>
</head>
script标签可以放在head或body或页面的其他位置中，通常会放在head或body中
如<style>内部只能放 css代码
2、通过script标签引入外部的JS文件
将所有JS代码放在一个单独的JS文件中（后缀名为.js），再通过script标签引入JS文件即可，例如：
<head>
...
<!-- 第二种引入JS的方式 -->
<script src="demo.js"></script>
</head>
注意事项: <mark>如果script标签是用于引入JS文件的，就不要在该标签内部再书写JS代码，否则写了也不会执行</mark>！！
例如：
<script src="demo.js"> alert(333);//此处的代码执行不到 </script>
4.2JavaScript语法
4.2.1注释格式
JS的注释符合和Java的注释符合相同，如下：
// 单行注释内容
/* 多行注释内容 */
4.2.2数据类型
1、基本数据类型
<mark>JS的基本数据类型</mark>一共有<mark>五种</mark>（ java里面是八种），分别为
- 数值类型(number)、
- 字符串类型(string)、
- 布尔类型(boolean)、
- undefined、
- null。
(1)数值类型
JS中的数值底层都是浮点型，
但在需要时会自动的和整型之间进行转换
（<mark>如果能显示为整型，会按整型显示，但是底层还是浮点型</mark>）
，例如：
2.4+3.6 结果是6，而不是6.0
NaN //无穷大
Infinity //无穷大
-Infinity
1/Infinity //无穷小？？
(2)字符串类型
JS中的字符串是基本数据类型，和Java中不同的是，JS中的字符串可以用<mark>单引号</mark>或双引号引起来。例如：
var str1 = "Hello JS";
var str2 = 'Hello JS';
<mark>在 JS 中字符串属于基本数据类型</mark>。
<mark>但也有对应的包装对象</mark>。
var s1 = "abc"; //s1的类型 string
var s1 = new String("abc"); //s2的类型是 Object
(3)布尔类型
布尔类型常用条件测试中，值为true和false。
var flag = true ;
(4)<mark>undefined</mark>
undefined 类型的值只有一个，就是 undefined。（<mark>表示未定义！</mark>）
即，<mark>声明了便令，但是没有为变量赋值，此时，变量的值就是 undefined。</mark>
var x;
alert(x);// x的值为undefined
除了故意没赋值，还有赋值失败了，也是undefined。
(5)<mark>null</mark>
<mark>null类型的值也只有一个, 就是null</mark>。
<mark>表示空值</mark>。
可以作为函数的返回值，表示函数返回的是一个空的对象
值为undefined和null的变量是不能调用属性或方法的，否则，就会抛出异常。
2、复杂数据类型
JS的复杂数据类型主要指对象
var p = {
name : "张三",
age : 18
}
var arr = [ 100 , false , "abc" ];
var fn = function(){
alter("aaa")
}
<mark>需要注意的是，在JS中，数组、函数也属于对象</mark>
4.2.3 变量声明
1、<mark>在JS中通过var声明变量</mark>，例如：
var a = 10; //声明变量，赋值为数值10
var b = true; //声明变量，赋值为布尔值true
var c = "Hello JS"; //声明变量，赋值为字符串"Hello JS"
2、<mark>在JS中声明的变量不区分类型，可以指向任意的数据类型</mark>，例如：
var x = 10; //声明变量，赋值为数值10
x = true; //将x赋值为布尔值true
x = "Hello JS"; //将x赋值为字符串"Hello JS"
所以，js 是一个弱类型的语言
但是，<mark>js 是一门严格区分大小写的语言。！！！</mark>
但是，js在其他方面一点都不严格。
如，
- js中如果一行代码后面没有分号结束，也可以正常解析。
var x = 100` `var y = "abc"
- js 中声明同名的变量，也不会报错。
var s1 = "Hello JS"; //var x ; x = 100 ; var s1 = "abc" ; //var x ; x = "abc" ; alert(s1); //弹框 abc
4.2.4 JS运算符
JS和Java中的运算符大致相同，例如：
算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式
。。。
4.2.5 JS语句
JS中的语句和Java中的大致相同
1、if分支结构
if分支结构用于基于不同的条件来执行不同的动作。语法结构如下：
if (条件 1){
当条件 1 为 true 时执行的代码
}else if (条件 2){
当条件 2 为 true 时执行的代码
}else{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
2、switch语句
使用 switch 语句来选择要执行的多个代码块之一。语法结构如下：
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
执行原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
3、for循环语句 – 循环代码块一定的次数
for 循环的语法结构如下：
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}
4、while循环 – 在指定条件为真时循环执行代码块
JS中while循环也分为while和do/while循环，下面为while循环语法结构:
while (条件){
需要执行的代码
}
while 循环会在指定条件为真时循环执行代码块。
案例1：if分支案例
例子: 接收用户输入的成绩，判断成绩所属的等级
80~100(包括80，也包括100) 优秀
60~80(包括60，但不包括80) 中等
0~60(包括0，但不包括60) 不及格
其他值 输入有误
代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS的语句</title>
<script type="text/javascript"> /* 80~100(包括80，也包括100) 优秀 60~80(包括60，但不包括80) 中等 0~60(包括0，但不包括60) 不及格 其他值 输入有误 */ var score = prompt("请输入您的成绩："); //会有弹框，提示信息 if(score >= 80 && score <= 100 ){ alert("您的成绩属于：优秀！"); } else if(score>=60 && socre<80){ alert("您的成绩属于：中等！"); } else if(score>=0 && socre<60){ alert("您的成绩属于：不及格！"); } else{ alert("输入有误！"); } </script>
</head>
<body>
</body>
</html>
案例2：switch语句案例
实现一个简易的计算器：可以接收用户输入的两个数值和一个操作符(+、-、*、/)，根据操作符号的不同，对两个数值执行不同的运算。
代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS的语句</title>
<script type="text/javascript"> var col = function(num1,num2,opt){ switch(opt){ case "+": alert("两个数的和为："+(num1+num2)); break; case "-": alert("两个数的减为："+(num1-num2)); break; case "*": alert("两个数的乘为："+(num1*num2)); break; case "/": alert("两个数的和为："+(num1/num2)); break; default : alert("输入有误！"); } } /* 实现一个简易的计算器： 可以接收用户输入的两个数值和一个操作符(+、-、*、/)， 根据操作符号的不同， 对两个数值执行不同的运算。 */ //第一种实现： /* var num1 = prompt("请输入数值1"); num1 = parseFloat(num1); var num2 = prompt("请输入数值2"); num2 = parseFloat(num2); var opt = prompt("请输入操作符(+、-、*、/)"); col(num1,num2,opt); */ //第二种实现： var s1 = prompt("请输入两个数值和一个运算符，用逗号分隔，如(1,2,+)"); var arr = s1.split(","); var num1 = arr[0]-0; var num2 = arr[1]-0; var opt = arr[2]; col(num1,num2,opt); </script>
</head>
<body>
</body>
</html>
案例3：for循环语句案例
遍历1100之间的所有整数，求1100之间所有整数的和，并输出到控制台;
代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS的语句</title>
<script type="text/javascript"> /* 遍历1~100之间的所有整数， 求1~100之间所有整数的和， 并输出到控制台; */ var sum = 0 ; for(var i=1 ; i<=100 ; i++){ sum+=i; } alter("1~100之间所有整数的和："+sum); </script>
</head>
<body>
</body>
</html>
案例4：while循环语句案例
遍历下面数组中的元素，将元素输出到控制台。
var arr = [123, "abc", false, new Object() ];
代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS的语句</title>
<script type="text/javascript"> /* 遍历下面数组中的元素，将元素输出到控制台。 */ var arr = [123, "abc", false, new Object() ]; var index = 0 ; while(index<arr.length){ //alert(arr[index]); console.log(arr[index]); index++ ; } </script>
</head>
<body>
</body>
</html>
4.2.6 JS数组
Array 对象用于在单个的变量中存储多个值。
(1)通过Array构造函数创建数组
例如，声明一个空数组：
var arr1 = new Array();
例如，声明一个指定初始值的数组：
var arr2 = new Array(88,"Hello" ,true , 100);
(2)通过数组直接量创建数组
例如，声明一个空数组：
var arr1 = [];
例如，声明一个指定初始值的数组：
var arr2 = [88,"Hello" ,true , 100];
提示：数组的length属性可以返回数组的长度
∗∗重点∗∗：js 数组长度可变
var arr = [];
console.log("1......"+arr.length);//0
arr[9] = "abc";
console.log("2......"+arr.length);//10
arr[99] = 100;
console.log("3......"+arr.length);//100
arr.length = 10 ;
console.log("4......"+arr.length);//10
4.2.7 JS函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块，前面使用了关键词 function。
声明函数的语法:
function funName([参数1,参数2,…]){
需要执行的代码
}
调用函数：funName([参数1,参数2,…])
示例：声明一个函数, 接收两个数值并计算两个数值的乘积，并返回结果：
function getSum(a,b){
return a*b;
}
fn(3*7);//返回21
4.2.8 综合练习
练习1
(自己完成)
声明一个函数fn，在函数中实现：
遍历指定的两个数值(例如1和100)之间的整数，
将是3的倍数的数值存入到一个数组中，
并将数组返回。
1、声明fn函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS的语句</title>
<script type="text/javascript">
/* 声明一个函数fn，在函数中实现： 遍历指定的两个数值(例如1和100)之间的整数， 将是3的倍数的数值存入到一个数组中，并将数组返回。 */
var fn = function(arr){
var sum = 0 ;
for(var i=0 ; i<arr.length ; i++){
if(arr[i]%3==0){
sum+=arr[i];
}
}
return sum ;
}
var arr = [1,2,3,4,5,6,7,8,9];
var result = fn(arr);
alert(result); //18
</script>
</head>
<body>
</body>
</html>
练习 03-电灯开关
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>电灯开关案例</title>
<style> body{padding:20px;font-size:20px;} #div1{width:30%;border:1px solid red;padding:5px;margin-bottom:20px;} </style>
<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.min.js"></script>
<script> var isOn = false ; //onclick 绑定点击事件 function changeImg(){ //1. 通过元素的id值获取img元素 (返回一个JS对象) var img = document.getElementById("img1");// document - 表示整个文档的对象。 if(isOn){ img.src = "imgs/off.gif"; isOn=false ; }else{ img.src = "imgs/on.gif"; isOn=true; } } </script>
</head>
<body>
<input type="button" value="开/关灯" onclick="changeImg()" /> <br/><br/>
<img id="img1" src="imgs/off.gif"/>
</body>
</html>
练习 04-元素的dom操作
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>元素的增删改查</title>
<!--加入样式表-->
<style type="text/css"> 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>
<!--引入jquery的js库-->
<!-- <script src="js/jquery-1.8.3.min.js"></script> -->
<script type="text/javascript"> /** 练习1、添加元素:添加一个div元素到body中 */ function addNode(){ //1. 创建一个新的div元素 //createElement //element.innerHtml var e = document.createElement("div"); //2. 获取body元素 document.body document.body.appendChild(e); //3. 将div元素添加/追加到body元素的最后面 document.appendChild(element); } /** 练习2、删除元素: 删除id为div_2的元素 */ //parentNode function deleteNode(){ var e = document.getElementById("div_2"); e.parentNode.removeChild(e); } /** 练习3、更新元素内容：将div_3的内容更新为当前时间 */ function updateNode(){ var e = document.getElementById("div_3"); e.innerHTML = new Date().toLocaleString(); } </script>
</head>
<body>
<input type="button" onclick="addNode()" value="创建一个div添加到body中"/>
<input type="button" onclick="deleteNode()" value="删除id为div_2的元素"/>
<input type="button" onclick="updateNode()" value="将div_3的内容更新为当前时间"/><hr/>
<div id="div_1">
div_1
</div>
<div id="div_2">
div_2
</div>
<div id="div_3">
div_3
</div>
<div id="div_4">
div_4
</div>
</body>
</html>
练习：05-网页换肤
<html>
<head>
<meta charset="utf-8"/>
<title>网页换肤</title>
<style type="text/css"> 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>
<!-- 引入外部的CSS文件 -->
<link rel="stylesheet" href="css/none.css" id="link"/>
<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"> /** 练习1：执行下面的函数，切换字体大小 */ function resize(size){ //1.获取div元素，为div设置样式(字体大小) var d = document.getElementById("newstext"); //2.为div设置字体大小 element.style.fontSize d.className = size; //d.style.fontSize } //定义数组，存放不同的皮肤（css文件的路径） var styleArr = ["css/red.css","css/green.css","css/blue.css"]; var i = 0; /** 练习2：执行下面的函数，为页面切换不同的皮肤 */ function changeStyle(){ var l = document.getElementById("link"); link.href = styleArr[i]; i++; if(i>=2){ i=0; } } </script>
</head>
<body >
<h2>达内时代科技集团简介</h2>
<div id="change-font">
<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>
达内时代科技集团有限公司，是中国高端IT培训的领先品牌，致力于培养面向互联网、电信和金融领域的Java、C++、C#、.Net、软件测试、嵌入式、PHP、android等方面的中高端软件人才。
</p>
<p>
达内创办于2002年，专注IT职业教育17年，2014年在美国纳斯达克上市公司。目前，已开设24大课程方向，在全国70多个城市建立了330家培训中心，真正实现“一地学习，全国就业”。高薪聘请总监级名师全职授课，术业有专攻，名师出高徒。实施“因材施教，分级培优”教学方案，让每一位学员都成才，让强者更强。采用“先学习，就业后付款”的模式，已帮助80万名学员成功就业。
</p>
<p>
达内优秀的教学效果和行业领先的经营模式赢得了社会各界的广泛赞誉和好评，荣获了各界权威机构的颁奖：达内成为业界唯一的一家2006、2007、2008、2009连续4年入选德勤评选的 “中国高科技高成长50强公司”、“亚太地区高科技高成长500强公司”，获得首届中国留学人才归国创业“腾飞”奖、中关村管理委员会指定的“软件人才培养示范基地”、被《计算机世界》评选的“就业服务杰出贡献奖”、被《中国计算机报》评选的“最具影响力培训机构奖”、被搜狐评为“中国十大教育集团”、被腾讯评为“中国大学生心目中最具影响力的IT品牌”。
有实力、有信誉，要培训，就选上市公司！
</p>
</div>
<hr/>
</body>
</html>
总结
查找元素
document.getElementById(元素的id值);
--根据id获取id的元素，返回的是一个js对象，表示当前获取到的元素。
document.getElementsByTagName(元素名/标签名);
--根据元素的名称，获取当前文件中指定名称的所有元素组成的数组。
document.body
--获取当前文档中的body元素
ele.parentNode
--获取当前元素的父元素
增删改元素
document.createElement(元素名/标签名);
--根据元素名称创建一个元素，返回时一个js对象，表示当前创建的元素。
parent.appendChild(child);
--通过父元素调用 appendChild方法，添加一个元素到父元素内部。（追加）
parent.removeChild(child);
--通过父元素调用removeChild方法，删除已有的子元素。
ele.innerHTML
--获取或设置元素的所有内容。
如：
var div3 = document.getElementById("div_3");
div3.innerHTML --获取div3元素的所有内容
div3.innerHTML = "xxx" -- 为div3 元素设置html内容，原内容将会被覆盖
element.value -- 获取或设置表单项元素的 value值
如：
<input type="text" name="username" id="user" value="张三"/>
var inp=document.getElementById("user");
inp.value -- 获取用户名输入框中的值
inp.value = "李四" -- 将用户名的值改为 "李四"
京公网安备 11010502036488号