• （一）JavaScript
  • （1）基本概念
  • （2）基本类型
    • （1）变量
    • （2）数组
  • （3）函数
  • （4）事件
  • （5）表单校验
  • （6）DOM
    • （1）DOM节点
    • （2）Document对象
  • （7）BOM
    • （1）Browser五大对象
    • （2）Window对象
    • （3）Location对象
    • （4）History对象
  • （8）Demo练习
    • （1）表单隔行换色
    • （2）复选框全选
    • （3）省市联动

（一）JavaScript

（1）基本概念

• JavaScript
  • 解释性脚本语言
  • 弱类型
  • 作用：完成表单的验证
  • ECMA：JavaScript的一个国际标准
  • BOM：Browser Object Model 浏览器对象模型
  • DOM：Document Object Model 文档对象模型
• Javascript和HTML的整合
  • 单独.js文件导入
  • < script > < /script >

（2）基本类型

（1）变量

• 变量声明
  • var 变量名=初始化值;（最好有分号）
  • 注释使用//
• 原始类型（使用typeof可以判定）
  • undefined
  • boolean
  • number
  • string
  • object ：变量是引用类型（typeof运算符对null会返回object）
• 引用类型
  • Array
  • String
  • Boolean
  • Number
  • Date
  • Math
  • RegExp

（2）数组

• 声明数组（JS中数组的长度是可变的，类似于ArrayList）

  new Array();
  new Array(size);
  new Array(element0, element0, ..., elementn);
  

• join()方法：打印时数组插入分隔符
• shift()方法：删除并返回数组的第一个元素

（3）函数

• 因为JavaScript是弱类型的
  • 所以函数声明不需要返回值类型，参数也不需要类型 ```java //1th way to state a function function 函数名（参数）{ 函数体； }

  //2th way to state a function var 函数名=function(参数){ 函数体 } ```

（4）事件

• 常见事件
  • onclick 鼠标单击（例如在input button 中将onclick和事件绑定，编写函数）
  • onsubmit 表单提交
  • onload 页面加载（例如放在body标签内，当加载页面时调用函数）
  • onchange事件（select表单选择时触发）
• 将事件和函数绑定
  • 通过标签的属性
  • 给元素派发事件 ```java

  <form … onsubmit=”return checkForm()”> ```

• 焦点
  • onfocus 得到焦点
  • onblur 失去焦点

（5）表单校验

• 利用Document对象可以对表单提交的元素进行校验（比如在注册时检查输入是否为空）
• JS从页面中获取元素（利用document）：

   var obj = document.getElementById("id值");
   var value = obj.value;  //获取value属性值
  

• this作为参数传入函数时指的是当前dom对象

（6）DOM

（1）DOM节点

• 节点分类
  • document 整个文档
  • element 比如head节点
  • attribute 比如href属性
  • text 具体的文本

（2）Document对象

• 获取对象
  • document.getElementById(“id”) //通过id获取元素
  • document.getElementsByTagName(“tag”) //通过标签获取元素，返回的是数组类型
  • document.getElementsByClassName(“class”)
  • document.getElementsByName(“name”)
• 修改属性
  • dom对象.value = ; //修改值
  • dom对象.innerHTML = ; //设置标签体
  • dom对象.style.属性 = ; //设置dom对象的属性

	var usernameObj = document.getElementById("username"); //根据元素ID获取对象
	document.getElementById("span_1").innerHTML=usernameObj.value; //调用innerHTML方法给span标签赋值

（7）BOM

（1）Browser五大对象

• Browser对象
  • Window
  • History
  • Location 定位
  • Navigator
  • Screen

（2）Window对象

• 通过Window对象可以获取其他四个对象的只读引用
  • window.location
• 常用方法
  • alert() 警告框
  • confirm() 确认提醒，返回值为ture | false
  • prompt() 获取用户的输入
  • open(url) 打开新页面（广告弹窗中常用）
  • close() 关闭当前页面
• 使用BOM-Window构造定时器（window.setInterval可以简写为setInterval）
  • setInterval(function,ms)：周期执行函数
  • setTimeOut(function,ms) ：延迟ms之后，只执行一次
  • clear

//JS操纵HTML对象步骤：
//获取对象
var Obj = document.getElementById("id"); 

//操纵对象属性
obj.style.backgroundColor="#ff0";

（3）Location对象

• location
  • 获取当前页面URL
  • 设置当前页面URL（完成网页跳转）

	var url = window.location.href; //获取地址栏URL
	window.location.href = "http://www.baidu.com"; //设置跳转URL

（4）History对象

• go(int)方法

	function goBack(){ //后退一个网页
		history.go(-1);
	}

（8）Demo练习

• 实现表单的隔行换色

（1）表单隔行换色

		<script>
			//当前页面加载成功
			onload=function(){
				//1.获取所有的tr
				var arr = document.getElementsByTagName("tr");
				//alert(arr);
				//alert(arr.length);
				//2.判断奇偶数
				for(var i = 1; i < arr.length; i++){
					if(i%2 == 0){
						arr[i].style.backgroundColor = "aqua";
					}else{
						arr[i].style.backgroundColor = "coral";
					}
				}
			}
		</script>

（2）复选框全选

• 由一个单选框决定其他所有复选框的状态（比如购物车中常见的全选按钮）

		<script>
			function checkAll(obj){
				//获取当前框的状态
				var flag = obj.checked;
				//获取所有复选框
				var arr = document.getElementsByClassName("itemSelect");
				//改变所有复选框的状态
				for(var i=0; i < arr.length; i++){
					arr[i].checked = flag;
				}
			}
		</script>

（3）省市联动

• 在复选框中选中省之后后面的选项中是对应的市区集合选择（比如注册或者购买火车票的时候）

		<script>
			function selCity(index){
				var cities = arr[index];
				var cityChoices = document.getElementsByName("city")[0]; //ByName返回的是数组类型，获取市的下拉选项：因为只有一个元素，所以取[0]，
				cityChoices.innerHTML = ("<option >-请选择-</option> 	");
				for(var i=0; i < cities.length; i++){
					cityChoices.innerHTML += ("<option>" + cities[i] + "</option>");
				}
			}
		</script>