第三讲JavaScript入门
一、JavaScript基本介绍
（一）JavaScript简介
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级[编程语言。虽然它是作为开发[Web]页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
特点：
1 函数优先
2 即时编译（解释性语言）
3 面向对象
用途：网页验证，动态特效，可以动态的操作html标签，可以动态的操作css样式
历史版本：ES5/ES6 主要学习ES5
（二）JavaScript组成
1：基础语法部分 ESMAScript
2：DOM对象 document object model 文档对象模型
3：BOM对象 Browers Object model 浏览器对象模型
（三）JavaScript引入方式
css的引入方式：行内，内嵌，外链
1、行内式
将JS的代码写在html元素中
<input type="button" onclick="alert('我是弹出框')" value="点击" />
2、内嵌式:
语法：将js代码的代码写在script标签中，
<script type="text/javascript">
function show(){
alert("我是内嵌式");
}
</script>
注意：script标签可以写在html页面的任何位置，一般是放在整个html的后面
3、外链式
1：创建一个js文件
2：在html中引入外部的js文件
function show2(){
alert("我是外链式");
}
注意：一个HTML页面可以引入多个js文件
注意：当html页面中既有内嵌式也有外链式，使用就近原则
注意：外链式的script标签之间不能写js代码
小结：
行内式，比较适合，功能单一，代码简单的元素
内嵌式：适合当前页面，不同元素具有相同特效的js代码
外链式：适合不同页面，具有相同特显的元素（符合代码分离原则）
二、ECMAScript
ECMAScript主要是Javascript的一部分，主要包含了js的基础语法
变量，常量，运算符，数据类型，if语句，循环，数组，基础对象，函数，事件
1、变量
java变量
int a = 10; 初始化一个变量 （先声明，后赋值）
js变量
var 变量名= 值;
var a = 10;
注意：
-
声明变量的时候，尽量不要同名，否则前面的变量不能使用了。
-
js的变量，是没有数据类型的，所以js是一门弱类型语言，当给变量赋值之后，才会知道变量的类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//声明变量
var a;
//变量赋值
a = 10;
a = 10.5;
var a = "abc";
//使用变量
alert(a);
</script>
</head>
<body>
</body>
</html>
2、数据类型
js数据类型分为两大类：基本数据类型 引用数据类型
基本数据类型：
数字型，字符串，布尔类型，null类型，未定义类型 undefined
//1：声明变量 测试变量的数据类型 typeof
var a; //undefined 未定义
a = 10.1; //number 数字型
a = true; //boolean 布尔类型 true/false
a = "abc"; //string 字符串
a = null; //null 型（Object下的null值）
测试变量的数据类型 使用 typeof 变量
alert(typeof 变量)
引用数据类型：
object, 数组，function
3、运算符
1、赋值运算符：= += -= *= /=
//1:赋值运算符
var a = 10;
a+=10; //a = a+10;
a-=10;
2、算术运算符:+ - * / % ++ –
+有两种用法 1：算数运算符 2：字符串拼接
//1:赋值运算符
// var a = 10;
// a+=10; //a = a+10;
// a-=10;
// a+=1;
// a = (int)a+1;
// a = a+1;
//算数运算符
//var a = 10;
//var b = 0;
//alert(a%b); //3.3333333333333335 近似值
//Infinity 正无穷 (数字类型) -Infinity 负无穷 (数字类型)
//NaN not a number 数字类型
//alert(typeof (10%0));
var a = 1;
//1 3 3 5 5
alert((a++)+(++a)+(a++)+(++a)+(a++));
//17
3、关系运算符（比较运算符）:> < >= <= == === !=
==和===的区别
==在js中表示等值比较，和类型无关
===在js中称为恒等 类似java中equals
先比较类型，如果类型不一样，直接返回false
如果类型一致，再比较值，如果值相等，返回true，否则返回false
注意：js中1表示true，0表示false
4、条件运算符: ? : var flag = a>b ? true : false ; 三目或者三元运算符
var a = 100,b = 200,c = 300;
var max = (a>b?a:b)>c?(a>b?a:b):c;
5：逻辑运算符 && || ！ & |
面试题：&&和&的区别
&&称之为短路与：第一个表达式为fasle，后面的表达式无须运算，结果为fasle，只有表达式都为true，结果才为true
&:每个表达式都需运算，最终的结果和&&的结果是一样的，&的结果是0或者1，&&的结果是true或者false
&&的效率较高
&可以用在用户页面验证
面试题：|| 和 |的区别
|| 表示短路或，只要第一个表达式为true，后面的表达式无需运算，最终为true
| 第一个表达式为true，继续执行后面的表达式，直到最后一个
4、分支结构
1）if结构 true或者false 或者1和0 都可以作为条件
var age = 20;
var a;
if(a=1){
alert("我是成年人")
}
注意：赋值语句也可以作为if的条件判断
2）if…else…结构 if(条件){语句；} else {语句；}
var age = 20;
var a;
if(a=1){
alert("我是成年人")
}else{
alert("未成年")
}
3）多重if结构 if(条件1){语句1；}else if(条件2){语句2；} else if(条件n){语句n}…else{语句；}
计算人体的BMI值
//计算人体的BMI
//计算公式为：BMI=体重（千克）除以身高（米）的平方。
var h = 1.75;
var w = 70;
var bmi = w/(h*h);
alert(bmi);
if(bmi<18.5){
alert("偏瘦");
}else if(bmi<24){
alert("正常");
}else if(bmi<35){
alert("肥胖");
}else{
alert("该减肥了...");
}
4）switch：
var a = 3;
switch(a){
case 1:alert(11111);break;
case 2:alert(22222);break;
case 3:alert(33333);break;
case 4:alert(44444);break;
default:alert(55555);break;
}
注意：如果条件是范围判断，推荐使用if结构，如果条件是常量，推荐使用switch
注意：Java中switch结构中常量值是：byte,short,int,String（jdk1.7新特性）,char,枚举（jdk1.5后新特性）
5、循环结构
三种循环
while循环
语法
1 初始变量
while(2 范围判断){
3：循环体
4：变量步进
}
1-100的累加和
var i = 1;
var sum = 0;
循环
while(i<=100){
sum+=i;
i++;
}
do{ }while( );
1 初始变量
do{
3：循环体
4：变量步进
}while(2 范围判断)；
for循环
语法
for(1初始变量;2 范围判断;3 步进){
循环体…
}
99乘法表
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+(i*j)+" ");
}
document.write("<br>");
}
forEach循环
使用规律：当不知道循环次数的时候，使用while循环，反之使用for循环
面试题：do while和while的区别
do while先执行，后判断 至少会执行1次 1-n
while 先判断，后执行 0-n
6、数组
//1：数组的声明
//java int[] arr = new int[3];
//初始化一个数组 动态初始化：先声明长度，再确定元素的个数
var arr = new Array();
//赋值
arr[0] = 10;
arr[1] = "abc";
arr[2] = true;
arr[3] = 10.5;
//静态初始化
var arr2 = [10,20,30,40,50];
alert(arr2);
注意：js的数组，没有下标越界，而且可以添加任意类型的元素
循环的操作：添加，删除，修改，查询，遍历，排序，判断
遍历
//遍历数组1
for(var i = 0;i<arr2.length;i++){
// document.write(arr2[i]+" ");
}
//for in 循环
for(var i in arr2){
document.write(arr2[i]+" ");
}
冒泡排序
var arr = [90,20,-88,66,200,33,45];
//冒泡排序
for(var j=0;j<arr.length;j++){
var flag;
for(var i = 0;i<arr.length-j-1;i++){
if(arr[i]>arr[i+1]){
flag = arr[i];
arr[i] = arr[i+1];
arr[i+1] = flag;
}
}
}
//sort写法
arr.sort(function(c,d){return c-d});
7、函数
函数是具有特定功能的代码块，通过事件的触发来调用，类似于java中方法。
语法：
function 函数名(参数){
函数体；
}
//js的函数的声明
function show(i,j){
return i+j;
}
var sum = show(10,20);
注意：js的函数的形参无需声明类型，直接西形参名
注意：js函数的形参和实参的个数不一致
注意：js的函数名不要和关键字重名
注意：声明在函数中变量称为局部变量，范围在函数体中，声明在函数外的变量称为全局变量，作用范围每个方法都可以使用
8、事件和事件绑定
什么事件?
HTML4.0之后新增的特性。通过浏览器页面中元素的一系列触发调用指定的一段JavaScript脚本。
js事件汇总：
事件绑定：
1）直接在标签中绑定
<input type="button" onclick="show();" value="标签绑定"/>
//直接在标签中绑定
function show(){
alert("我是点击事件");
}
2）在js脚本中获取要绑定事件的对象，通过代码绑定
<input type="button" id="btn" value="动态绑定"/>
//获取button对象
var btn = document.getElementById("btn");
//动态绑定js事件，调用函数
// btn.onclick = function(){
// alert("我是动态点击事件");
// }
btn.onclick = show2;
function show2(){
alert("我是动态点击事件");
}
//直接调用函数了
btn.onclick = show2();
function show2(){
alert("我是动态点击事件");
}
js常用事件:
- 焦点事件：输入框
onfocus:获得焦点事件
onblur：失去焦点事件
<input type="text" id="txt" onblur="showText()" onfocus="clearText()" value="我是文本框" />
function clearText(){
var txt = document.getElementById("txt");
txt.value = "";
}
function showText(){
var txt = document.getElementById("txt");
txt.value = "我是文本框";
}
- 键盘事件
onkeydown:键盘按下时
onkeyup：键盘释放时
- 鼠标事件
onclick
ondblclick
onmouseover
onmouseout/onmouseleave
<input type="button" onm ousedown="alert('鼠标按下事件')" value="鼠标按下事件"/>
<input type="button" onm ouseup="alert('鼠标弹起事件')" value="鼠标弹起事件"/>
<input type="button" onm ouseover="alert('鼠标悬停事件')" value="鼠标悬停事件"/>
<input type="button" onm ouseout="alert('鼠标移开事件')" value="鼠标移开事件"/>
<input type="button" onm ouseover="alert('鼠标悬停事件')" onm ouseout="alert('鼠标移开事件')" value="鼠标移开事件"/>
<input type="button" ondblclick="alert('鼠标双击事件')" value="鼠标双击事件"/>
- 下拉列表改变事件
onchange 下拉列表框中内容的改变事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id = "per" onchange="changePerson()">
<option value="">--请选择人物--</option>
<option value="马保国">马保国</option>
<option value="拜登">拜登</option>
<option value="特朗普">特朗普</option>
<option value="马化腾">马化腾</option>
</select>
</body>
</html>
<script type="text/javascript">
function changePerson(){
var per = document.getElementById("per").value;
if("马保国" === per){
document.body.style.background = "url(img/mbg.jpg)";
}else if("拜登" === per){
document.body.style.background = "url(img/bd.jpg)";
}else if("特朗普" === per){
document.body.style.background = "url(img/tlp.jpg)";
}else if("马化腾" === per){
document.body.style.background = "url(img/mht.jpg)";
}else{
document.body.style.background = "white";
}
document.body.style.backgroundSize = "cover";
}
</script>
三、DOM模型
（一）DOM简介
HTML DOM是HTML Document Object Model(文档对象模型)的缩写，HTML DOM则是专门适用于HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。 Javascript就可以利用HTML DOM动态地修改网页。
（二）查找元素
1、document.getElementById(“Id”) 通过id属性的值获取元素
function show(){
//通过id获取dom对象
var txt = document.getElementById("txt");
//document.write 会将之前的页面覆盖
//document.write(txt.value);
alert(txt.value);
}
注意：id必须唯一，如果有重名的，获取第一个元素对象
2、document.getElementsByName(“name”)通过name属性值获取元素
function show2(){
//通过name获取dom对象
var txt = document.getElementsByName("txt");
//document.write 会将之前的页面覆盖
//document.write(txt.value);
for(var i=0;i<txt.length;i++){
alert(txt[i].value);
}
}
注意：name属性获取的是一个nodeList，是一个数组对象，可以通过循环分别获取每个元素
3、document.getElementsByClassName(“class”)通过class属性值获取元素
function show3(){
//通过classname获取dom对象
var txt = document.getElementsByClassName("txt")
for(var i=0;i<txt.length;i++){
alert(txt[i].value);
}
}
注意：className属性获取的是一个nodeList，是一个数组对象，可以通过循环分别获取每个元素
4、document.getElementsByTagName(“标签名”)通过标签名获取元素
function show4(){
//通过TagName获取dom对象
var txt = document.getElementsByTagName("input");
for(var i=0;i<txt.length;i++){
alert(txt[i].value);
}
}
注意：TagName属性获取的是一个nodeList，是一个数组对象，可以通过循环分别获取每个元素
注意：最常用的是id获取
1、表单验证
需求：当单击登录按钮时，对页面中的账号和密码进行非空验证，如果没有填写内容，给出错误消息提示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="success.html" method="get">
<p>
用户名 :<input type="text" onblur="checkName()" id = "txt" />
</p>
<p>
密码 :<input type="password" onblur="checkPwd()" id = "pwd" />
</p>
<p>
<input type="submit" onclick="return checkAll();" value="登录" />
</p>
</form>
</body>
</html>
<script type="text/javascript">
function checkName(){
//1:获取用户名
var txt = document.getElementById("txt").value;
if(""==txt || null ==txt){
alert("用户名不能为空");
return false;
}else{
return true;
}
}
function checkPwd(){
//1:获取用户名
var pwd = document.getElementById("pwd").value;
if(pwd.length<6 || pwd.length>18){
alert("密码长度在6-18之间");
return false;
}else{
return true;
}
}
function checkAll(){
if(checkName()&checkPwd()){
return true;
}else {
return false;
}
}
</script>
2、全选全不选
需求：根据全选按钮的状态改变下面子项复选框的状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox" onclick="changeALll()" id="ckall" />全选<br>
<input type="checkbox" name="hobby" onclick="removeCk()" />抽烟<br>
<input type="checkbox" name="hobby" onclick="removeCk()" />喝酒<br>
<input type="checkbox" name="hobby" onclick="removeCk()" />烫头<br>
</body>
</html>
<script type="text/javascript">
function changeALll(){
//获取全选的状态
var flag = document.getElementById("ckall").checked;
var ck = document.getElementsByName("hobby");
for(var i = 0;i<ck.length;i++){
ck[i].checked = flag;
}
}
//全不选
function removeCk(){
var ck = document.getElementsByName("hobby");
var flag;
for(var i = 0;i<ck.length;i++){
flag = ck[i].checked;
if(!flag){
break;
}
}
var ckall = document.getElementById("ckall");
ckall.checked = flag;
}
</script>
（三）修改元素
1 修改元素的文本信息
2 修改元素的样式
需求：单击按钮改变div的样式（背景色，边框，大小）
3 升级表单验证
需求:将表单验证时的错误提示消息显示在对象文本框的后面。