08 JavaScript(js)

JavaScript(js)

一.引言

1. Javascript(js):基于浏览器的,解释型的,面向对象的编程语言

2. 编程语言的分类:
       编译型语言  ---- C  C++  (运行效率高,不能跨平台)   		 源码 -- 针对特定系统的可执行的机器指令
       解释型语言  ---- html  js   (运行效率低,可以跨平台)		源码 -- 由不同的软件直接对源码进行逐行翻译解释执行
       先编译后解释 ---- java  C#  (运行效率较高,可以跨平台)		源码 -- .class -- jvm执行

3. 作用 :用来嵌入到html页面里,为“网页”添加动画效果
     1)html + css  --- 静态网页(里面的数据不会改变)
     2)servlet + jsp --- 动态网页(在网页中嵌入java代码改变数据)
     3)js --- 添加动画效果(按钮功能的添加,表单数据的验证),在网页刷新后,所有动
             画效果会消失。

二. 第一个js程序

1.向html页面里嵌入js代码的方式
    <head>
	    <script type="text/javascript">  js 代码 </script>
	</head>
	
2.在js代码里输出的API
    1)向浏览器窗口打印输出HelloWorld
	   document.write("

HelloWorld

"
); 2)以警告框的形式打印输出结果 window.alert("HelloWorld"); 注意:如果函数或者属性是window对象的,则window可以省略 3)向浏览器的控制台输出结果,相当于java里的System.out.println(); console.info("HelloWorld");

三.js的语法

1.js是一种弱数据类型语言
  
    java -- 是强数据类型语言(变量的类型和值的类型一致)
	   int a = 3;   String str="hehe";
	   
	js -- 弱数据类型语言(只有值有类型,变量没有类型)
	   var a = 3;   a ="hehe";
	   
2.js里的变量定义
  
    1)变量可以多次重复声明定义赋值,值以最后一次有值的赋值为准
	
	2)没有块作用域的概念
	   java --if(true){ int a=3; }
	              System.out.println(a);   ---error
	   js ---> if(true) { var a = 3; }
	           alert(a);    ---- ok
			   
	3) 只有定义在函数里的,并且用var关键字声明的变量,才叫“局部变量”,只在函数内有效
	
	4)没有用var声明的变量一定是“全局变量”,到处可见
	
3.数据类型
  
    1)基本数据类型
	   
	   数字类型 -- 不分小数和整数
	   字符串类型 -- 不分字符和字符串,用单引号或者双引号声明定义   'hehe'
	   布尔类型 -- true|false0 | 0(false)     非空 | null(falseif(a!=null){}  <---> if(a){}      if(3)<-->if(true)
			
	2)特殊的数据类型
	    null   undefined   NaN(not a number)
		
	3)复合数据类型:数组  日期  对象  函数类型
	
  4.运算符
  
    1)数学运算符: + - *  /  %
	
       注意:只要有可能计算出结果,js就会自动做类型切换算出结果。

    2) 判断相等性: ==   ===
       == 比较值是否相等
          var a=3;   var b="3";     alert(a==b); --> true
       === 比较值和类型是否完全相同
          var a=3;  var b="3"   alert(a===b) --> false

    3) typeof 判断变量的类型		

  5.流程控制 --- 与java一致

四.函数类型 【重点】

1.在js里函数被认定为一种数据类型,一个函数也可以称为“一个函数类型的值”,保存这个值的变量就是函数名
     
  2.定义函数
  
    1)使用关键字function定义函数
	    
		java -- 修饰符  返回值类型  函数名(形参类型 参数名,....) {  函数体 }
		        public int add(int a,int b){  return a+b; }
				
	    js -- function 函数名(参数名,....){  函数体  }
		        function add(a,b){  return a+b; }
				
	2)隐式声明定义
	    语法:var 函数名 = function(参数表){ 函数体 }
		      用function定义一个函数,将其看做是一个值,将这个值赋值给变量。
			  
	    例如:var add = function(a,b){ return a+b; }
		
		使用:变量名(实参);
		
	3)函数类型值可以在变量间赋值
	    var f1 = function(){ return "hehe" } ;
        var f2 = f1 ;    --> 将f1里保存的“函数类型值”赋值给变量f2,成功后f2里保存的也是一个函数类型值,
        var f3 = f1();   --> 调用f1函数将函数的返回值赋值给f2变量,成功后f2里保存的是f1函数的结果(是一个字符串)
  
3.注意事项:
    1)js里没有“方法重载”,调用函数时可以传入多于 or 少于形参数量的实参。js将所有的实参默认保存在一个叫做arguments的数组里。 
	  
	   // 练习:  请定义一个函数,可以计算所有实参的和并返回
        function sumArgs(){
           // 计算所有实参的和  ---- arguments数组
           var result = 0;
           for( var i=0;i<arguments.length;i++){
               result += arguments[i];
           }
           return result;
        }
        alert( sumArgs(1,2,"3",true));
	  
	2)函数的参数可以又是一个函数,函数里面可以再次定义其他函数,称为“内联函数”

五.对象类型

1.在js里只有对象,没有类。任意两个对象都不一样
  
2.定义一个对象
    语法: var obj = {属性名:属性值,属性名:属性值,......... };   
	       obj.新属性名=;
		   
		var stu1 = {id:1,name:"张三",age:15};
		stu1.sex = "male";
		stu1.mattied = false;

3.访问对象的属性
  
    1)访问一个属性:   对象名.属性名   或者    对象名["属性名"]
    
		alert(stu1.name);   	alert(stu1["name"]);

	2)遍历所有属性: for( 变量名 in 对象名){  对象名[ 变量名] }
	     循环每执行一次,都会从对象中获取一个属性名,赋值给指定的变量名。
	     
         for(pro in stu1){
         	alert(pro+"------"+stu1[pro]);
         }
         
4.js里的对象理论上没有方法功能,只由属性组成,但是可以通过语法模拟java里的对象功能
     // 请定义一个对象有name和age两个属性,有getName方法,有play方法(play方法返回一个字符串值)
		var stu ={ name:"zhangsan" , age:18 , getName:function(){ return this.name; } ,
             		play:function(){ return "hehe";} };
	 // 遍历对象的所有属性,判断属性的类型:是函数则调用并打印返回值,不是函数则直接打印值。
        for(pro in stu){
		   if( typeof stu[pro] == "function" ){
		       document.write("

"+stu[pro]()+"

"
); }else{ document.write("

"+pro+"---"+stu[pro]+"

"
); } }

六.数组Array

 1.特点:js里的数组长度不固定,可以任意扩展;数据可以是任意类型。
  
2.创建:var 数组名 = [元素1,元素2..... ];
          创建好以后可以任意扩展,添加任意元素。
		  
3.访问:
     1)一个元素(通过下标访问,从0开始)  ---  arr1[3]
	 2)遍历( 与java一样,用for循环遍历 )
	      for(var i=0;i<arr1.length;i++){  arr1[i] }
		  
4.数组常见函数
     数组对象.sort() ---> 对数组里的元素按照自然顺序升序排列
	 数组对象.sort(排序函数名) ---> 可以再排序函数里自定义排序规则
	 
	 function abc(a,b){  return b-a;}
     arr2.sort(abc);

七.js里的常见的内置对象

1.字符串类型
     var str = "hehe";
	 var str2 = new String("hehe");
	
	注意:获取字符串的长度是length属性,不是length函数
	
2.Math : 相当于java里的工具类,里面的函数相当于java里的静态函数,可以用Math直接调用
  
     var ran = Math.random();
	 
3.日期类型 Date 
    1)var  d1 = new Date();   --> 得到当前浏览器时间对象
	   var  d2 = new Date("1992-04-01");  ---> 创建一个指定日期值的date对象
	   
	2)常见函数:
	     getFullYear() ---> 获得四位的年
		 getMonth()  ---> 获得日期对象里的月(0~11)
		 。。。。。

八. js的常规执行方式

1.js代码靠事件触发运行,当网页里的标签产生浏览器能够捕获的特定事件时,触发js代码运行。
  
    事件模型: 事件源(网页里的标签)    事件对象(浏览器能够捕获的事件)     监听器
	
	代码开发步骤:
	  1)确定事件源(需要监听的html标签),确定需要监听的事件
	  2)为事件源注册监听器,同时提供js代码产生动态效果
	  
	为html标签注册监听器方式
	<标签名  监听器="js代码">   ------> js代码比较少
	<标签名  监听器="调用js的函数"> ---》js代码多,功能复杂
	eg:
	
	  
2.常见事件监听器
        鼠标相关
			onclick		单击事件*
			ondblclick	双击事件
			onmouseover	鼠标移入*
			onmouseout	鼠标移出*
			onmousemove	鼠标移动
			onmousedown	鼠标按下
			onmouseup	鼠标松开
		键盘相关,网页上任意标签 body
			onKeyDown	按键按下*
			onKeyUp		按键抬起
		body相关事件
			onload =  fun	//页面加载完毕后触发	*****
			onunload	窗口离开时触发(刷新,返回,前进,主页...)
			onscroll	页面滚动
			onresize	缩放页面
		form表单控件相关事件****
			onblur		当前元素失去焦点				
			onchange	当前元素失去焦点,并且值改变时	(监听value属性值得修改)  
			onsubmit	表单提交时	(验证表单数据是否格式正确)
  
3.注意事项
    1)事件冒泡:发生在内部元素的事件默认会向外部元素扩散
	   取消事件冒泡  ===  event.cancelBubble=true;
	   
	   event -- 代表监听的事件对象, event.clientX--事件产生点的横坐标     event.clientY -- 事件产生点的纵坐标
	            event.source -- 产生事件的事件源
	   
	2)通过事件监听可以取消某些标签的默认行为
	
	   超链接标签 -->  
	   
	   表单标签 --> 

九.DOM编程 – document object model文档对象模型

.概念解析
  
   1.软件解析xml文档的两种方式: dom   sax
   
      dom -- 浏览器软件将html文档加载进内存,封装成一颗“文档树”,html里的所有标签都被封装成“标签对象”成为“文档树”上的一个节点。
	         父标签对象对子标签对象拥有所有的操作权限(增删改查)
	  sax -- 将文档逐行解释找到对应的标记,当再次访问时会重新逐行解释(一次快)	 
	  dom里的常见内置对象  
	    document --- 代表整个文档对象(主要只body部分,地址栏以下,状态栏以上)
		window ---- 代表整个浏览器窗口对象,document是window的一个属性,使用window功能时,window可以省略
		
   2.获取html文档里的相应的标签对象

     1)目的:通过修改标签的属性或样式,达到修改文档和添加动态效果的目的
       
	 2)API
	      var tag = document.getElementById("标签的id属性值");    【重点】element元数标签
		  var tags = document.getElementsByTagName("标签名");     --- 返回值是一个数组
		             父标签.getElementsByTagName("标签名");
		  var tags = document.getElementsByName("标签的name属性值"); --- 通常只有表单标签会定义name属性
		  var tags = document.getElementsByClassName("标签的class属性值");  --- 通过css样式获取标签

	 3)修改属性或者样式
	      修改 --- tag.属性名=新值
		  获取 --- var value = tag.属性名
		  添加或者修改样式 
		   --单独指定一个css样式  tag.style.color="red"     tag.style.backgourndColor="blue"
		   --批量修改指定一类风格   tag.className ="一个class值"
   
   3.标签对象的常见属性一
     
     1)innerHTML:代表标签体里的内容(文本,一个标签)	 

	 2) this : 代表产生事件的当前标签对象
  
   4.删除标签对象
     1) parentTag.removeChild(childTag);  --- 从父标签对象中删除孩子标签对象
	 
	 2)标签对象的一些关系属性:
	     tag.parentNode --- 获取tag的父标签对象
		 tag.childNodes --- 获取tag的所有孩子节点(文本,子标签)
		 tag.firstChild --- 获取tag的第一个孩子
		 tag.lastChild 
		 tag.nextSibling --- 获取tag的下一个同级标签
		 tag.previousSibling --- 获取tag的上一个同级标签
  
        注意:存在浏览器差异,谷歌浏览器会将标签间的空格也算作一个节点。
		
	 3)在js里,以tbody为表格的基础标签
	     <table>
		    <tbody>
			   <tr> .... </tr>
			</tbody>
		 </table>
		 
	 4)删除辅助功能:弹出确认框
	     var ba = window.confirm("提示文字");    ---》 函数返回一个boolean值代表确认框里的选择
  
  5.添加新的标签
  
    1)创建一个新标签 --  var tag = document.createElement("标签名");
	     eg:  <h1>HelloWorld</h1>
		      var tag = document.createElement("h1");
			  tag.innerHTML = "HelloWorld";
			  
	2)添加到网页里的指定位置
	     parentTag.appendChild(newTag);  ---> 将newTag添加到现有标签的最后面,称为父标签的最后一个孩子节点
         parentTag.insertBefore(newTag,oldTag);  ---> 将newTag添加到oldTag之前
  
    3)为新标签添加事件的代码
	     newTag.onclick = function(){  js功能代码 或者 直接调用现有的函数 }
  
  6.替换标签的方法
      parentTag.replaceChild(newTag,oldTag);  --> 用新标签替换掉旧的标签
  
 Dom编程注意事项: innerHTML(普通标签) 和 value(表单元素)
 
 //选中所有
          function selectAll() {
              //1. 获取所有的checkbox标签
              var inps = document.getElementsByTagName("input");
              for(var i=0;i<inps.length;i++){
                  if(inps[i].type == "checkbox"){
                      //2. 设置它们的属性checked为true
                      inps[i].checked = true;
                  }
              }
          }

十.下拉列表的处理

1. options -- 下拉列表标签对象的一个属性,属性值为数组类型。作用是获取下拉列表里的所有的option选项标签对象
  
2. selectedIndex -- 下拉列表标签的一个属性,表示被选中的option的下标

3. 下拉列表需要注册onchange事件(失去焦点并且值发生改变)

4. 清空下拉列表:  tag.options.length = 0;

5. 生成下拉列表里的一个option标签:  var opt = new Option(text,value);


<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
    <title>CITYJS</title>
    <script type="text/javascript">
        var liaoning = [{text:"沈阳",value:"shengyang"},{text:"大连",value:"dalian"},{text:"铁岭",value:"tieling"}];
        var shanxi = [{text:"朔州",value:"shuozhou"},{text:"太原",value:"taiyuan"},{text:"运城",value:"yuncheng"}];
        var jiangsu = [{text:"南京",value:"nanjing"},{text:"无锡",value:"wuxi"},{text:"徐州",value:"xuzhou"}];

        function getCityArray(proValue) {
            if(proValue == "liaoning") return liaoning;
            if(proValue == "shanxi") return shanxi;
            if(proValue == "jiangsu") return jiangsu;
        }

        // 当第一个下拉列表失去焦点并且值改变时,执行该函数。 函数会初始化city下拉列表填充数据
        function initCity(tag) {
            // 此处tag参数代表 pro下拉列表
            //1. 获取被选中的省份名
            var proValue = tag.options[tag.selectedIndex].value;
            //2. 根据省份名获取对应的城市数组
          var cityArray = getCityArray(proValue);
            //3. 遍历数组,将数组里的每一个对象封装成option,设置给城市下拉列表
            var citySelect = document.getElementById("city");
            citySelect.options.length = 1;// 清空下拉列表
            for (var i=0;i<cityArray.length;i++){
                var obj = cityArray[i]; // 一个城市对象 ( text,value)
                var opt = new Option(obj.text,obj.value); // 封装一个option选项
                //将封装好的opt设置到城市下拉列表里 citySelect
                citySelect.options[i+1] = opt;
            }
        }
    </script>
</head>
<body>
    <select name="pro" onchange="initCity(this)">
        <option>请选择省</option>
        <option value="liaoning">辽宁</option>
        <option value="shanxi">山西</option>
        <option value="jiangsu">江苏</option>
    </select>
    <select name="city" id="city">
        <option>请选择城市:</option>
    </select>
</body>
</html>

十一.BOM — browser object model 浏览器对象模型

1.bom -- 一组与浏览器相关的内置对象以及他们的函数和属性  (window)
  
2.window的常用功能(使用window的函数时,可以省略window)
    
	1open("url")  --- 打开一个新的浏览器窗口,并在窗口里显示url指定的资源。函数有返回值,为当前打开的新窗口对象
              var w = window.open("url");
           close() --- 关闭窗口对象

        2)对话框
            警告框 -- window.alert("......");
            确认框 -- var ba = window.confirm("....");
            提示输入框 --- var str = window.prompt("....");

        3)定时器
            var id = window.setTimeout(fun,time);   --- 在time毫秒后,执行一次fun函数
		window.clearTimeout(id);      ---移除定时器
		
		var id = window.setInterval(fun,time);  --- 周期定时器,每隔time毫秒,执行一次fun函数
        window.clearInterval(id);
		
		eg:显示系统时间
		
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>SYSDATE</title>
    <style type="text/css">
        #d1{width: 38%;height: 50px;background: #5494F3}
    </style>

    <script type="text/javascript">
        function fun() {
            var d1 = document.getElementById("d1");
            d1.innerHTML = new Date();
        }
        window.setInterval(fun,1000);//系统时间动态进行(1秒进行一次)

        function fun2() {
            var d2 = document.getElementById("d2");
            d2.innerHTML = d2.innerHTML+".";
        }
        var interval2 = window.setInterval(fun2,1000);

        function fun3() {
            window.clearInterval(interval2);
            location.href="/mavenweb/emp/showEmp";
        }
        window.setTimeout(fun3,5000);//5秒以后跳到showEmp(action)
    </script>
</head>
<body>
    <div id="d1"></div>
    <div id="d2">正在加载</div>
</body>
</html>
		

	4)location -- window的一个属性,而location有一个href属性,用来在js代码里向其他资源跳转(类似于超链接)
         location.href = "url";
		 
	5)history -- 是window的一个属性
	    history.back() -- 退回到上一个浏览的网页
		history.forward() -- 前进
		history.go(num) -- num为负数则表示后退,num为正数是前进 , num为0表示刷新

轮播图

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>LunBoTu</title>
    <style type="text/css">
        #d1{width:300px;height: 420px;margin: 10px auto}
    </style>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

        var imageArray = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"];
        var num = 0;
        function changeImageSrc() {
            if(num==5){num=0;}
            var image = document.getElementById("image");
            image.src="../viewjs/image/"+imageArray[num++];
        }
        var id1 = window.setInterval(changeImageSrc,1000);
        function stop() {
            window.clearInterval(id1);
        }
        function start() {
            id1 = window.setInterval(changeImageSrc,1000);
        }

    </script>
</head>
<body>
    <div id="d1" onmouseout="start()" onmouseover="stop()">
        <img src="../viewjs/image/1.jpg" id="image"/>
    </div>
</body>
</html>

十二.代码结构的调整

1.添加事件的处理方式
   
      1)标签式事件处理 
	      <标签名 onclick="js函数">
		  
	  2)编程式事件处理
	      <script type="text/javascript">
		      
			  XXXXXXX      ------------  网页加载的时候运行,按照出现在html文档里的先后顺序运行,可能优于body内容先执行
			  
			  //等到网页全部内容加载完成后,执行function里的代码
			  window.onload = function(){
			        XXXXXXXXX  ---- 网页全部加载完成(body加载完成)
					
					var tag = 得到需要添加事件的标签对象;
					tag.onclick = function(){
					     事件处理的js代码
					};
			  }
			  
		  </script>
		  
       
		  
   2.可以将js代码单独定义在一个以.js为结尾的文件中,在网页里需要使用时通过<script>标签引入
   
      <head>
	  
	     <link rel="stylesheet" type="text/css" href="css文件路径"/>
		 
		 <style type="text/css"> ...... </style>
		 
		 <script type="text/javascript" src="单独的js文件路径"></script>
		 
		 <script type="text/javascript">
		      自己的js代码
		 </script>
		 
	  </head>
  
  
  
  
<img src="/*****/imageAction" click="fun" /> <a href="" onclick="img.onclick();"> .... </a>

1. Javascript(js):基于浏览器的,解释型的,面向对象的编程语言

2. 编程语言的分类:
       编译型语言  ---- C  C++  (运行效率高,不能跨平台)   		 源码 -- 针对特定系统的可执行的机器指令
       解释型语言  ---- html  js   (运行效率低,可以跨平台)		源码 -- 由不同的软件直接对源码进行逐行翻译解释执行
       先编译后解释 ---- java  C#  (运行效率较高,可以跨平台)		源码 -- .class -- jvm执行

3. 作用 :用来嵌入到html页面里,为“网页”添加动画效果
     1)html + css  --- 静态网页(里面的数据不会改变)
     2)servlet + jsp --- 动态网页(在网页中嵌入java代码改变数据)
     3)js --- 添加动画效果(按钮功能的添加,表单数据的验证),在网页刷新后,所有动
             画效果会消失。

二. 第一个js程序

1.向html页面里嵌入js代码的方式
    <head>
	    <script type="text/javascript">  js 代码 </script>
	</head>
	
2.在js代码里输出的API
    1)向浏览器窗口打印输出HelloWorld
	   document.write("

HelloWorld

"
); 2)以警告框的形式打印输出结果 window.alert("HelloWorld"); 注意:如果函数或者属性是window对象的,则window可以省略 3)向浏览器的控制台输出结果,相当于java里的System.out.println(); console.info("HelloWorld");

三.js的语法

1.js是一种弱数据类型语言
  
    java -- 是强数据类型语言(变量的类型和值的类型一致)
	   int a = 3;   String str="hehe";
	   
	js -- 弱数据类型语言(只有值有类型,变量没有类型)
	   var a = 3;   a ="hehe";
	   
2.js里的变量定义
  
    1)变量可以多次重复声明定义赋值,值以最后一次有值的赋值为准
	
	2)没有块作用域的概念
	   java --if(true){ int a=3; }
	              System.out.println(a);   ---error
	   js ---> if(true) { var a = 3; }
	           alert(a);    ---- ok
			   
	3) 只有定义在函数里的,并且用var关键字声明的变量,才叫“局部变量”,只在函数内有效
	
	4)没有用var声明的变量一定是“全局变量”,到处可见
	
3.数据类型
  
    1)基本数据类型
	   
	   数字类型 -- 不分小数和整数
	   字符串类型 -- 不分字符和字符串,用单引号或者双引号声明定义   'hehe'
	   布尔类型 -- true|false0 | 0(false)     非空 | null(falseif(a!=null){}  <---> if(a){}      if(3)<-->if(true)
			
	2)特殊的数据类型
	    null   undefined   NaN(not a number)
		
	3)复合数据类型:数组  日期  对象  函数类型
	
  4.运算符
  
    1)数学运算符: + - *  /  %
	
       注意:只要有可能计算出结果,js就会自动做类型切换算出结果。

    2) 判断相等性: ==   ===
       == 比较值是否相等
          var a=3;   var b="3";     alert(a==b); --> true
       === 比较值和类型是否完全相同
          var a=3;  var b="3"   alert(a===b) --> false

    3) typeof 判断变量的类型		

  5.流程控制 --- 与java一致

四.函数类型 【重点】

1.在js里函数被认定为一种数据类型,一个函数也可以称为“一个函数类型的值”,保存这个值的变量就是函数名
     
  2.定义函数
  
    1)使用关键字function定义函数
	    
		java -- 修饰符  返回值类型  函数名(形参类型 参数名,....) {  函数体 }
		        public int add(int a,int b){  return a+b; }
				
	    js -- function 函数名(参数名,....){  函数体  }
		        function add(a,b){  return a+b; }
				
	2)隐式声明定义
	    语法:var 函数名 = function(参数表){ 函数体 }
		      用function定义一个函数,将其看做是一个值,将这个值赋值给变量。
			  
	    例如:var add = function(a,b){ return a+b; }
		
		使用:变量名(实参);
		
	3)函数类型值可以在变量间赋值
	    var f1 = function(){ return "hehe" } ;
        var f2 = f1 ;    --> 将f1里保存的“函数类型值”赋值给变量f2,成功后f2里保存的也是一个函数类型值,
        var f3 = f1();   --> 调用f1函数将函数的返回值赋值给f2变量,成功后f2里保存的是f1函数的结果(是一个字符串)
  
3.注意事项:
    1)js里没有“方法重载”,调用函数时可以传入多于 or 少于形参数量的实参。js将所有的实参默认保存在一个叫做arguments的数组里。 
	  
	   // 练习:  请定义一个函数,可以计算所有实参的和并返回
        function sumArgs(){
           // 计算所有实参的和  ---- arguments数组
           var result = 0;
           for( var i=0;i<arguments.length;i++){
               result += arguments[i];
           }
           return result;
        }
        alert( sumArgs(1,2,"3",true));
	  
	2)函数的参数可以又是一个函数,函数里面可以再次定义其他函数,称为“内联函数”

五.对象类型

1.在js里只有对象,没有类。任意两个对象都不一样
  
2.定义一个对象
    语法: var obj = {属性名:属性值,属性名:属性值,......... };   
	       obj.新属性名=;
		   
		var stu1 = {id:1,name:"张三",age:15};
		stu1.sex = "male";
		stu1.mattied = false;

3.访问对象的属性
  
    1)访问一个属性:   对象名.属性名   或者    对象名["属性名"]
    
		alert(stu1.name);   	alert(stu1["name"]);

	2)遍历所有属性: for( 变量名 in 对象名){  对象名[ 变量名] }
	     循环每执行一次,都会从对象中获取一个属性名,赋值给指定的变量名。
	     
         for(pro in stu1){
         	alert(pro+"------"+stu1[pro]);
         }
         
4.js里的对象理论上没有方法功能,只由属性组成,但是可以通过语法模拟java里的对象功能
     // 请定义一个对象有name和age两个属性,有getName方法,有play方法(play方法返回一个字符串值)
		var stu ={ name:"zhangsan" , age:18 , getName:function(){ return this.name; } ,
             		play:function(){ return "hehe";} };
	 // 遍历对象的所有属性,判断属性的类型:是函数则调用并打印返回值,不是函数则直接打印值。
        for(pro in stu){
		   if( typeof stu[pro] == "function" ){
		       document.write("

"+stu[pro]()+"

"
); }else{ document.write("

"+pro+"---"+stu[pro]+"

"
); } }

六.数组Array

 1.特点:js里的数组长度不固定,可以任意扩展;数据可以是任意类型。
  
2.创建:var 数组名 = [元素1,元素2..... ];
          创建好以后可以任意扩展,添加任意元素。
		  
3.访问:
     1)一个元素(通过下标访问,从0开始)  ---  arr1[3]
	 2)遍历( 与java一样,用for循环遍历 )
	      for(var i=0;i<arr1.length;i++){  arr1[i] }
		  
4.数组常见函数
     数组对象.sort() ---> 对数组里的元素按照自然顺序升序排列
	 数组对象.sort(排序函数名) ---> 可以再排序函数里自定义排序规则
	 
	 function abc(a,b){  return b-a;}
     arr2.sort(abc);

七.js里的常见的内置对象

1.字符串类型
     var str = "hehe";
	 var str2 = new String("hehe");
	
	注意:获取字符串的长度是length属性,不是length函数
	
2.Math : 相当于java里的工具类,里面的函数相当于java里的静态函数,可以用Math直接调用
  
     var ran = Math.random();
	 
3.日期类型 Date 
    1)var  d1 = new Date();   --> 得到当前浏览器时间对象
	   var  d2 = new Date("1992-04-01");  ---> 创建一个指定日期值的date对象
	   
	2)常见函数:
	     getFullYear() ---> 获得四位的年
		 getMonth()  ---> 获得日期对象里的月(0~11)
		 。。。。。

八. js的常规执行方式

1.js代码靠事件触发运行,当网页里的标签产生浏览器能够捕获的特定事件时,触发js代码运行。
  
    事件模型: 事件源(网页里的标签)    事件对象(浏览器能够捕获的事件)     监听器
	
	代码开发步骤:
	  1)确定事件源(需要监听的html标签),确定需要监听的事件
	  2)为事件源注册监听器,同时提供js代码产生动态效果
	  
	为html标签注册监听器方式
	<标签名  监听器="js代码">   ------> js代码比较少
	<标签名  监听器="调用js的函数"> ---》js代码多,功能复杂
	eg:
	
	  
2.常见事件监听器
        鼠标相关
			onclick		单击事件*
			ondblclick	双击事件
			onmouseover	鼠标移入*
			onmouseout	鼠标移出*
			onmousemove	鼠标移动
			onmousedown	鼠标按下
			onmouseup	鼠标松开
		键盘相关,网页上任意标签 body
			onKeyDown	按键按下*
			onKeyUp		按键抬起
		body相关事件
			onload =  fun	//页面加载完毕后触发	*****
			onunload	窗口离开时触发(刷新,返回,前进,主页...)
			onscroll	页面滚动
			onresize	缩放页面
		form表单控件相关事件****
			onblur		当前元素失去焦点				
			onchange	当前元素失去焦点,并且值改变时	(监听value属性值得修改)  
			onsubmit	表单提交时	(验证表单数据是否格式正确)
  
3.注意事项
    1)事件冒泡:发生在内部元素的事件默认会向外部元素扩散
	   取消事件冒泡  ===  event.cancelBubble=true;
	   
	   event -- 代表监听的事件对象, event.clientX--事件产生点的横坐标     event.clientY -- 事件产生点的纵坐标
	            event.source -- 产生事件的事件源
	   
	2)通过事件监听可以取消某些标签的默认行为
	
	   超链接标签 -->  
	   
	   表单标签 --> 

九.DOM编程 – document object model文档对象模型

.概念解析
  
   1.软件解析xml文档的两种方式: dom   sax
   
      dom -- 浏览器软件将html文档加载进内存,封装成一颗“文档树”,html里的所有标签都被封装成“标签对象”成为“文档树”上的一个节点。
	         父标签对象对子标签对象拥有所有的操作权限(增删改查)
	  sax -- 将文档逐行解释找到对应的标记,当再次访问时会重新逐行解释(一次快)	 
	  dom里的常见内置对象  
	    document --- 代表整个文档对象(主要只body部分,地址栏以下,状态栏以上)
		window ---- 代表整个浏览器窗口对象,document是window的一个属性,使用window功能时,window可以省略
		
   2.获取html文档里的相应的标签对象

     1)目的:通过修改标签的属性或样式,达到修改文档和添加动态效果的目的
       
	 2)API
	      var tag = document.getElementById("标签的id属性值");    【重点】element元数标签
		  var tags = document.getElementsByTagName("标签名");     --- 返回值是一个数组
		             父标签.getElementsByTagName("标签名");
		  var tags = document.getElementsByName("标签的name属性值"); --- 通常只有表单标签会定义name属性
		  var tags = document.getElementsByClassName("标签的class属性值");  --- 通过css样式获取标签

	 3)修改属性或者样式
	      修改 --- tag.属性名=新值
		  获取 --- var value = tag.属性名
		  添加或者修改样式 
		   --单独指定一个css样式  tag.style.color="red"     tag.style.backgourndColor="blue"
		   --批量修改指定一类风格   tag.className ="一个class值"
   
   3.标签对象的常见属性一
     
     1)innerHTML:代表标签体里的内容(文本,一个标签)	 

	 2) this : 代表产生事件的当前标签对象
  
   4.删除标签对象
     1) parentTag.removeChild(childTag);  --- 从父标签对象中删除孩子标签对象
	 
	 2)标签对象的一些关系属性:
	     tag.parentNode --- 获取tag的父标签对象
		 tag.childNodes --- 获取tag的所有孩子节点(文本,子标签)
		 tag.firstChild --- 获取tag的第一个孩子
		 tag.lastChild 
		 tag.nextSibling --- 获取tag的下一个同级标签
		 tag.previousSibling --- 获取tag的上一个同级标签
  
        注意:存在浏览器差异,谷歌浏览器会将标签间的空格也算作一个节点。
		
	 3)在js里,以tbody为表格的基础标签
	     <table>
		    <tbody>
			   <tr> .... </tr>
			</tbody>
		 </table>
		 
	 4)删除辅助功能:弹出确认框
	     var ba = window.confirm("提示文字");    ---》 函数返回一个boolean值代表确认框里的选择
  
  5.添加新的标签
  
    1)创建一个新标签 --  var tag = document.createElement("标签名");
	     eg:  <h1>HelloWorld</h1>
		      var tag = document.createElement("h1");
			  tag.innerHTML = "HelloWorld";
			  
	2)添加到网页里的指定位置
	     parentTag.appendChild(newTag);  ---> 将newTag添加到现有标签的最后面,称为父标签的最后一个孩子节点
         parentTag.insertBefore(newTag,oldTag);  ---> 将newTag添加到oldTag之前
  
    3)为新标签添加事件的代码
	     newTag.onclick = function(){  js功能代码 或者 直接调用现有的函数 }
  
  6.替换标签的方法
      parentTag.replaceChild(newTag,oldTag);  --> 用新标签替换掉旧的标签
  
 Dom编程注意事项: innerHTML(普通标签) 和 value(表单元素)
 
 //选中所有
          function selectAll() {
              //1. 获取所有的checkbox标签
              var inps = document.getElementsByTagName("input");
              for(var i=0;i<inps.length;i++){
                  if(inps[i].type == "checkbox"){
                      //2. 设置它们的属性checked为true
                      inps[i].checked = true;
                  }
              }
          }

十.下拉列表的处理

1. options -- 下拉列表标签对象的一个属性,属性值为数组类型。作用是获取下拉列表里的所有的option选项标签对象
  
2. selectedIndex -- 下拉列表标签的一个属性,表示被选中的option的下标

3. 下拉列表需要注册onchange事件(失去焦点并且值发生改变)

4. 清空下拉列表:  tag.options.length = 0;

5. 生成下拉列表里的一个option标签:  var opt = new Option(text,value);


<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
    <title>CITYJS</title>
    <script type="text/javascript">
        var liaoning = [{text:"沈阳",value:"shengyang"},{text:"大连",value:"dalian"},{text:"铁岭",value:"tieling"}];
        var shanxi = [{text:"朔州",value:"shuozhou"},{text:"太原",value:"taiyuan"},{text:"运城",value:"yuncheng"}];
        var jiangsu = [{text:"南京",value:"nanjing"},{text:"无锡",value:"wuxi"},{text:"徐州",value:"xuzhou"}];

        function getCityArray(proValue) {
            if(proValue == "liaoning") return liaoning;
            if(proValue == "shanxi") return shanxi;
            if(proValue == "jiangsu") return jiangsu;
        }

        // 当第一个下拉列表失去焦点并且值改变时,执行该函数。 函数会初始化city下拉列表填充数据
        function initCity(tag) {
            // 此处tag参数代表 pro下拉列表
            //1. 获取被选中的省份名
            var proValue = tag.options[tag.selectedIndex].value;
            //2. 根据省份名获取对应的城市数组
          var cityArray = getCityArray(proValue);
            //3. 遍历数组,将数组里的每一个对象封装成option,设置给城市下拉列表
            var citySelect = document.getElementById("city");
            citySelect.options.length = 1;// 清空下拉列表
            for (var i=0;i<cityArray.length;i++){
                var obj = cityArray[i]; // 一个城市对象 ( text,value)
                var opt = new Option(obj.text,obj.value); // 封装一个option选项
                //将封装好的opt设置到城市下拉列表里 citySelect
                citySelect.options[i+1] = opt;
            }
        }
    </script>
</head>
<body>
    <select name="pro" onchange="initCity(this)">
        <option>请选择省</option>
        <option value="liaoning">辽宁</option>
        <option value="shanxi">山西</option>
        <option value="jiangsu">江苏</option>
    </select>
    <select name="city" id="city">
        <option>请选择城市:</option>
    </select>
</body>
</html>

十一.BOM — browser object model 浏览器对象模型

1.bom -- 一组与浏览器相关的内置对象以及他们的函数和属性  (window)
  
2.window的常用功能(使用window的函数时,可以省略window)
    
	1open("url")  --- 打开一个新的浏览器窗口,并在窗口里显示url指定的资源。函数有返回值,为当前打开的新窗口对象
          var w = window.open("url");
       close() --- 关闭窗口对象
  
    2)对话框
	    警告框 -- window.alert("......");
		确认框 -- var ba = window.confirm("....");
		提示输入框 --- var str = window.prompt("....");
		
    3)定时器
	    var id = window.setTimeout(fun,time);   --- 在time毫秒后,执行一次fun函数
		window.clearTimeout(id);      ---移除定时器
		
		var id = window.setInterval(fun,time);  --- 周期定时器,每隔time毫秒,执行一次fun函数
        window.clearInterval(id);
		
	4)location -- window的一个属性,而location有一个href属性,用来在js代码里向其他资源跳转(类似于超链接)
         location.href = "url";
		 
	5)history -- 是window的一个属性
	    history.back() -- 退回到上一个浏览的网页
		history.forward() -- 前进
		history.go(num) -- num为负数则表示后退,num为正数是前进 , num为0表示刷新

十二.代码结构的调整

1.添加事件的处理方式
   
      1)标签式事件处理 
	      <标签名 onclick="js函数">
		  
	  2)编程式事件处理
	      <script type="text/javascript">
		      
			  XXXXXXX      ------------  网页加载的时候运行,按照出现在html文档里的先后顺序运行,可能优于body内容先执行
			  
			  //等到网页全部内容加载完成后,执行function里的代码
			  window.onload = function(){
			        XXXXXXXXX  ---- 网页全部加载完成(body加载完成)
					
					var tag = 得到需要添加事件的标签对象;
					tag.onclick = function(){
					     事件处理的js代码
					};
			  }
			  
		  </script>
		  
   2.可以将js代码单独定义在一个以.js为结尾的文件中,在网页里需要使用时通过<script>标签引入
   
      <head>
	  
	     <link rel="stylesheet" type="text/css" href="css文件路径"/>
		 
		 <style type="text/css"> ...... </style>
		 
		 <script type="text/javascript" src="单独的js文件路径"></script>
		 
		 <script type="text/javascript">
		      自己的js代码
		 </script>
		 
	  </head>
  
  
  
  
<img src="/*****/imageAction" click="fun" /> <a href="" onclick="img.onclick();"> .... </a>

你可能感兴趣的:(javaweb)