javaWeb核心技术第三篇之JavaScript第一篇

- 概述
  - JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言
  - 作用:给页面添加动态效果,校验用户信息等.
- 入门案例
  - js和html的整合
    - 方式1:内联式
      "通过<script></script>标签实现,在标签体中编写js代码即可"
    - 方式2:外联式
      "编写外部的js文件,通过srcipt标签的src属性引入即可"
    - 注意事项:
      "     script标签可以放在页面的任何位置,一般放在head中
            一个页面可以有多个srcipt标签
            script标签一旦使用了src属性,它的标签体就会失效"
- 组成部分
  - ECMAScript:核心语法
    - 变量声明
      - 格式:  var 变量名称 = 初始化赋值;
      - 注意事项:
        - var可以省略,但是不建议省略
        - 末尾的分号也可以省略,但是不建议
    - 数据类型
      - 原始类型(5种)
        - Undefined:undefined
        - Null:null
        - Number:一切数字
        - String:一切被引号引起来的字符串
        - Boolean: true 或 false
        - 运算符typeof
          "用来判断给定值的数据的所属类型  例如: typeof age;"
      - 引用类型:javaScript第二天内容
    - 运算符
      - 等性运算符
        - ==   !=
          "判断数值"
        - ===    !==
          "判断数值和类型"
      - 关系运算符
        - >  <  >=  <=
      - 逻辑运算符
        - &&  ||   !
        - 非空对象 非0数字 非空字符串 都为true 其他为false
    - 语句
      "几乎和java一样"
      - if  ...   else  ...
      - for(){}方式
    - 函数
      "用来完成指定操作的代码片段,在java中叫方法,在js中叫函数"
      - 方式1: 普通函数
        " function 函数名称(参数列表){
        	 ... 
        }"
      - 方式2(匿名函数): 
        "var 函数名称 = function(参数列表){
        	...
        }"
      - 函数返回值:在函数中直接使用return返回结果即可
      - 注意事项:参数列表中的参数可以不写类型
    - 事件
      "具体的某件事情"
      - 单击事件: onclick
        "单击鼠标时触发"
      - 表单提交事件: onsubmit
        "提交form表单时触发"
      - 页面加载成功事件: onload
        "当页面加载完毕后触发"
    - 事件和事件源的绑定
      - 方式1:绑定事件
        " 实现方式:通过标签的事件属性 
         例如:<xxx onclick="函数名(参数列表)"></xxx>"
      - 方式2:派发事件
        "	实现方式:获取标签对象(元素)
                	对象.事件名称=function(){}"
      - 使用步骤:
        - 1.确定事件
        - 2.编写函数
          - 获取元素
          - 处理元素
  - BOM(浏览器对象模型):操作浏览器
    - window 窗口
      - 常用属性
        "通过它获取其他的四个对象
        eg:window.history  == history
        注意:使用window的对象或属性时,window可以省略不写"
      - 常用方法
        - 定时器
          - var 定时器id = setInterval()  设置周期执行定时器
            - 格式1:setInterval(函数名称,毫秒值);
              "周期执行,每隔多少毫秒执行一次指定函数"
              - 注意:每个定时器都会返回一个定时器id,定时器id主要用在清除定时器时.
            - 格式2:setInterval("函数名称(参数列表)",毫秒值);
              - "周期执行,每隔多少毫秒执行一次指定函数 可传递参数"
          - clearInterval() 清除周期执行定时器
            - 使用方式:clearInterval(定时器id)
              "作用:将正在使用的定时器清除"
          - setTimeout()  单次执行定时器
            - 格式1:setTimeout(函数名称,毫秒值);
              "单次执行,多少毫秒后执行指定函数,只执行一次"
            - 格式2:setTimeout("函数名称(参数列表)",毫秒值);
              "单次执行,多少毫秒后执行指定函数,只执行一次  可传递参数"
            - 注意:每个定时器都会返回一个定时器id,定时器id主要用在清除定时器时.
          - clearTimeout()
            - 使用方式:clearTimeout(定时器id)
        - 警告框
          - alert();
        - 对话框
          - prompt();
            "可以传入两个参数,第一个为提示信息,第二个为默认值"
        - 确认框
          - confirm();
            "可以传入一个参数,为确认信息"
        - 扩展
          - 打开  open(url);
          - 关闭  colse();
    - history 历史
      - 常用方法
        - forward();  下一个页面
        - back();   返回上一个页面
        - go(Number);   ★
          - go(number);   向后跳转几个页面
          - go(-number);   向前跳转几个页面
    - location 连接  ★★
      - 常用属性
        - href
          - kk;   得到当前页面的路径
          - kk=url;  跳向指定的页面
    - navigator 了解
    - screen 了解
  - DOM(文档对象模型):操作文档 (明天内容)
    - 获取一个元素(标签)对象
      - var obj = document.getElementById("id值");
        "通过id获取一个标签对象"
      - 获取对象中的value值
        "通过对象的value属性    对象.value;"

回顾:
	javaScript:直译式的脚本语言,直接嵌入html使用即可
	js和html整合:
		方式1:内联式
			通过script标签实现,直接在标签体中编写js代码即可
		方式2:外联式(首先要编写外部的js文件,后缀名以*.js结尾)
			通过script标签的src属性实现
	js组成部分:
		ECMAScript:核心语法
			变量声明
				var 变量名称 = 初始化值;
			数据类型
				原始类型:(5种)
					Undefined: undefined   var age;
					Number:
					String:
					Null: null
					Boolean:
					
					typeof 对象;
				引用类型:
			运算符
				等性运算符:
					== !=
					=== !==
				关系运算符:
					> < >= <=
				逻辑运算符:
					&& || !
					
					"abc" || false
					"abc" || "123"
					
					"abc" && "123"
					"abc" && false
			语句
				if("123"){}
				for(){}
			函数
				方式1:普通函数
					function 函数名(){}
				方式2:匿名函数
					var 函数名 = function (参数,参数){}
				调用函数:
					函数名(参数,参数);
				返回值:
					return 返回值;
			事件
				onclick:单击事件
				onsubmit:表单提交事件
				onload:页面加载成功事件
				
			事件和事件源绑定
				方式1:绑定事件
					通过标签的事件属性
					<xxx onclick = "func()"></xxx>
				方式2:派发事件
					a.获取事件源(获取标签对象)
						var 对象 = document.getElementById("id");
					b.给事件源派发事件
						对象.事件名称 = function(){
							....
						}
		BOM:操作浏览器
			window:窗口
				属性:
					通过window获取其他的四个对象即可.使用window的属性或方法的时候window可以省略不写
				方法:
					定时器:
						周期执行:
							var interId = setInterval();
								setInterval("函数名称()",毫秒值);
								setInterval(函数名称,毫秒值);
							clearInterval(id);
						单次执行:	
							var timeId = setTimeout();
								
							clearTimeout(id);
					警告框:
					对话框:
					确认框:
					打开和关闭:
			history:历史
				方法:
					forward();
					back();
					go(number);
			location:连接 ★★
				属性:
					href
						kk;
						kk = url;
		DOM:操作文档
			var 对象 = document.getElementById("id");
			对象.属性名称; 获取
			对象.属性名称 = 值; 设置
/////////////////////////////////
案例1-完善表单校验
	需求分析:
		当表单提交的时候,校验表单中的用户名和密码是否符合格式,如果不符合,则在相应的输入框后面填写提示信息且不允许表单提交,
		反之可以提交
	技术分析:
		事件
		正则表达式:
		DOM对象:
///////////////////////////
	DOM:
		操作value属性
			获取value属性的值:
				获取一个标签对象:
					var 标签对象 = document.getElementById();
				获取value属性的值:
					标签对象.value;
			设置value属性的值:
				获取一个标签对象:
					var 标签对象 = document.getElementById();
				设置value属性的值
					标签对象.value = 值;
		操作标签体:
			获取标签体内容:
				获取一个标签对象:
					var 标签对象 = document.getElementById();
				获取标签体的内容:
					标签对象.innerHTML;
			设置标签体内容:
				获取一个标签对象:
					var 标签对象 = document.getElementById();
				设置标签体的内容:
					标签对象.innerHTML = "<xxx>值</xxx>";
	正则表达式:
		1.编写正则表达式
			用户名：var zz = /^[a-z0-9_-]{3,16}$/;
			密码：var zz = /^[a-z0-9_-]{6,18}$/;
			校验为空: /^\s*$/
		2.校验
			var str = "123";
			zz.test(str);		Boolean
///////////////////////
	步骤分析:
		1.确定事件(表单提交事件)
			<form onsubmit="retrun checkForm()"></form>
			<form id="formId"></form>
		2.编写checkForm函数
			function checkForm(){
				//0/设置全局开关
				var flag = true;
				//a.获取用户名和密码输入框对象
					var 对象 = document.getElementById("id");
				//b.获取用户名和密码的值
					var val = 对象.value;
				//c.编写正则表达式
					
				//d.校验
					if(zz.test(val)){
						//校验不通过
						给对应的span标签中填写提示信息
						flag = false;
					}else{
						//校验通过
						给对应的span标签中填写提示信息
					}
				//e.返回值
				return flag;
					
			}
		
案例2-表格各行换色
	需求分析:
		当页面加载成功后,给表格的奇数行和偶数行添加不同的背景颜色
	技术分析:
		事件
		DOM:
	//////////////////////
		步骤分析:
			1.确定事件(页面加载成功事件)
				onload = function(){
					
				}
			2.编写匿名函数
				a.获取当前页面所有行对象
					var trObjArr = document.getElementsByTagName("tr");
				b.遍历数组对象,给计数行和偶数行添加不同的背景颜色
					for(var i=0;i<trObjArr.length;i++){
						if(i%2==0){
							trObjArr[i].style.backgroundColor = "颜色";
						}else{
							trObjArr[i].style.backgroundColor = "颜色";
						}
					}
		
案例3-复选框全选和全不选
	需求分析:
		当点击头部的复选框的时候,要使其他复选框的状态和头部的保持一致.
	技术分析:
		单击事件
		DOM
		操作元素的checked属性
	/////////////////////////////
	步骤分析:
		1.确定事件(单击事件)
			给头部的复选框添加单击事件
		2.编写函数
			a.获取头部复选框状态
				对象.checked;
			b.获取其他的复选框对象
			c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性
案例4-省市二级联动
	需求分析:
		当省份的下拉选改变的时候,根据选中的省份查询其所对应的市,将所对应的市,展示到市的下拉选中.
	技术分析:
		改变事件
		数组
		Dom操作
	/////////////////////
	步骤分析:
		1.确定事件(改变事件)
			给省份的下拉选添加改变事件
		2.编写changePro函数
			function changePro(){
				a.获取选中省份所对应的市数组(value)
					var cityArr = arr[value];
				b.获取市的下拉选对象
					var cityObj = document.getElementById("cityId");
				
				c.遍历市数组,将每一个市拼成option追加到市的下拉选中
					cityObj.innerHTML += "";
					
			}