java web入门基础（js和语法①）

1.js的string对象

            ****创建string对象

                      var  str="abc";

           *****方法和属性：

                         ****属性：length  字符串的长度

                         ****方法：

                                   （1）与html相关的方法

                                                 --bold（）  加粗；

                                                  --fontcolor(“颜色”) 设置字符串的颜色；

                                                  --fontsize("大小")设置字符串大小

                                                  --link（“链接地址”）把字符串变成链接

                                                 --sub（）和sup（）方法下标和上标   

	    <script type="text/javascript">
          var str="abcdefg";
		  document.write(str.length);
		  
		  //bold方法
		  document.write("<hr/>");
		  var str1="abcd";
		  document.write(str1.bold());
		  //fontcolor方法
		   document.write("<hr/>");
		   var str2="adqweqwe";
		   document.write(str2.fontcolor("red"));
		   //fontsize方法
		   document.write("<hr/>");
		   var str3="gggggggg";
		   document.write(str3.fontsize("100px"));
		   //link方法
		   document.write("<hr/>");
		   var str4="hahahhaha";
		   document.write(str4.link("01.html"));
		   //sub方法和sup方法
		   document.write("<hr/>");
		   var s1="100";
		   var s2="200";
		   var s3="300";
		   document.write(s1.sub());
		   document.write(s3);
		   document.write(s2.sup());
		   
		</script>

                                   （2）与java相似的方法

                                                     --- concat（）连接字符串

                                                     ---charAt（）返回位置的字符串

                                                    ---indexOf()   返回字符串所在的位置

                                                     ---split()      切分字符串

                                                     ---replace（） 替换字符串

                                                                        ***第一个参数：原始字符

                                                                        ****第二个参数：要替换的字符

                                                      -----substr()和substring()

                                                                       ****substr()  从第几位开始，向后截取几位

                                                                       ****substring（）从第几位到第几位，不包括后面一位

	    <script type="text/javascript">
        //concat方法
		var str1="abc";
		var str2="def";
		document.write(str1.concat(str2));
        //charAt方法
        document.write("<hr/>");
        var str3="abcdefg";
        document.write(str3.charAt(0));	
        //indexOf方法	
        document.write("<hr/>");
        var str4="pqiuyt";
         document.write(str4.indexOf("q"));	
        //split方法
    	document.write("<hr/>");
		var str5="a-b-c-d";
	    document.write(str5.split("-"));
		//replace方法
	    document.write("<hr/>");
        var str6="abcd";
		document.write(str6);
		document.write("<br/>");
		document.write(str6.replace("a","q"));
		//substr方法和substring方法
		document.write("<hr/>");
		var str7="abcdefghigk";
		document.write(str7.substr(5,3));//fgh   从第5位开始向后截取3个字符
		document.write("<br/>");
		document.write(str7.substring(3,5));//de  从第3为开始到第5为结束  [3,5)
		</script>

2.js的Array对象

               ****创建数组（3种）

                       --var arr1=[1,2,3];       //注意这是[]  []中没有值的时候是空数组

                      --var arr2=new Array(3);    //数组长度是3

                      ---var arr3=new Array(1,2,3);  //数组中元素是123

                ****l属性：length查看数组的长度

                ****方法：

                            ----concat（）方法：数组的连接；

                            -----join（)：在数组元素中添加分隔符

                            ----push()方法：向数组末尾添加元素，返回数组的新长度

                                              ****如果添加的是一个数组，这时会把该数组当成一个字符串添加进去

                           -----pop()方法：删除最后一个元素并且返回该元素

                           -----reverse（）方法：颠倒数组中的元素的顺序

	    <script type="text/javascript">
		//length
		var arr1=[1,2,3];
		document.write(arr1);
        //concat方法
		document.write("<hr/>");
		var arr11=[1,2,3];
		var arr12=[4,5,6];
		document.write(arr11.concat(arr12));
		//jion方法
	    document.write("<hr/>");
        var arr13=new Array(3);
		arr13[0]="a";
		arr13[1]="b";
		arr13[2]="c";
		document.write(arr13);
		document.write("<hr/>");
		document.write(arr13.join("-"));
		//push方法
		             //字符串测试push
		document.write("<hr/>");
		var arr14=new Array(3);
		arr14[0]="tom";
		arr14[1]="lucy";
		arr14[2]="jack";
		document.write("old Array:"+arr14+"<br/>");
		document.write("old length:"+arr14.length+"<br/>");
		arr14.push("zhangsan");
		document.write("new Array:"+arr14+"<br/>");
		document.write("new length:"+arr14.length+"<br/>");
		document.write("<hr/>");
		
		                 //数组测试push
        var arr15=["aaa","bbb","ccc"];
		var arr16=["www","qqq"];
		document.write("old array:"+arr15+"<br/>");
		document.write("old length:"+arr15.length+"<br/>");
		arr15.push(arr16);    
        document.write("new Array:"+arr15+"<br/>");
		document.write("new Length:"+arr15.length+"<br/>");
		for(var i=0;i<arr15.length;i++){
		    //alert(arr15[i]);
		}
	    //pop方法
		document.write("<hr/>");
		var arr17=["zhangsan","lisi","wangwu","zhaoliu"];
		document.write("old arrya:"+arr17+"<br/>");
        document.write("return:"+arr17.pop()+"<br/>");
		document.write("new Array:"+arr17);
        //reverse方法
		document.write("<hr/>");
		var arr18=["zhangsan1","lisi1","wangwu1","zhaoliu1"];
		document.write(arr18+"<br/>");
		arr18.reverse();
		document.write(arr18+"<br/>");		
		</script>

                      

3.js的Date对象            

        ****在java获取当前时间

                                  Date date=new Date（);

                                         //格式化：

                                        //tolocalString（）可以把日期转化成当前格式

      *****js获取当前的时间

                               var date=new Date（）；

                      转换成当前系统的格式toLocaleString();

     *****获取当前年的方法

                    getFullYear（）方法：     返回当前年的方法

                    getMonth()方法： 返回当前的月份，注意：返回值为0-11

                    getDay（）方法：  返回天数    注意：外国把星期日当成第一天返回0  其他的是1-6  

                   getDate（）方法：获取当前的天数1-31 

                   getHours()方法：获取当前小时   

                   getMinutes（）方法：获取当前分钟

                  getSeconds（）方法：获取当前秒

                  getTime（）方法：获取毫秒数     返回从1970，1，1开始的毫秒数

                                   ****场景：使用毫秒数处理缓存的效果（没有缓存）

                                              http:www.baidu.com?毫秒数                      

     <script type="text/javascript">
	 //获取当前时间
	 var date=new Date();
	 document.write(date);
	 //转换成习惯的格式
	 document.write("<hr/>");
	 document.write(date.toLocaleString());
	 //得到当前年getFullyear
	 document.write("<hr/>");
	 document.write(date.getFullYear());
	 //获取当前的月getMonth（）
	 document.write("<hr/>");
	 document.write(date.getMonth()+1);   //注意返回的是0-11所以+11所以符合日常
	 //获取当前的星期getDay（）；
	 document.write("<hr/>");	 
	 document.write(date.getDay());
	 //获取当前的天getDate()
	 document.write("<hr/>");
     document.write(date.getDate());
     //获取当前的小时：getHours();
      document.write("<hr/>");	
      document.write(date.getHours());	  
	  //获取当前的分钟getMinutes()
      document.write("<hr/>");
      document.write(date.getMinutes());
      //获取当前的秒getSeconds（）
       document.write("<hr/>");
       documen.write(date.getSeconds());	
     //获取毫秒数getTime()
        document.write("<hr/>");  
        documen.write(date.getTime());	   
	 </script>

4.js的Math对象

                         ***属性：PI（圆周率）

              *****数学的运算  Math中的方法是静态方法，使用的话直接使用Math.方法（）

              ****ceil（x）方法   ：向上舍入

              ****floor（x）方法： 向下舍入

              ****round（x）方法：  四舍五入

              *****random（）方法：得到一个随机数（伪随机数）0-1之间的随机数

                             得到0-9的随机数   Math.random()*10;

             ******max(x,y)方法：返回最大值

            *******min（x，y）方法;返回最小值

               *****pow（x，y）方法：x的y次方

     <script type="text/javascript">
	 //ceil()  floor()  round()方法
	   var mm=10.4;
	   document.write(mm);
	   document.write("<hr/>");
	   document.write(Math.ceil(mm));
	   document.write("<hr/>");
	   document.write(Math.floor(mm));
	   document.write("<hr/>");
	   document.write(Math.round(mm));
	
	   
	//random()方法
	   document.write("<hr/>");
	   document.write(Math.random());
	       //得到0-9的随机数
		document.write("<hr/>");
		document.write(Math.random()*10);
	 </script>

5.js的全局函数

                  **由于不属于任何一个对象，直接使用

                  ***eval（）：执行js代码，如果字符串是js代码可以直接执行

                  ***encodeURI（）：对字符进行编码encodeURIComponent（）

                 ***decodeURI（）：对字符进行解码decodeURIComponent（）

                 ***isNaN()：判断当前的字符串是否是数字

                                    *****是数字的时候返回false   

                                    *******不是数字返回true

                   ****parseInt():转换成数字型

     <script type="text/javascript">
     //eval()方法
	 var str="alert('123');";
	 //eval(str);
	 //encodeURI()
     document.write("<hr/>");
	 var str1="测试中文aaa123";
	 var encode1=encodeURI(str1);
	 document.write(encode1);
	 //decodeURI()
	 document.write("<hr/>");
     var decode1=decodeURI(encode1);
	 document.write(decode1);
	 //isNaN
	 document.write("<hr/>");
	 var str2="123";
	 document.write(isNaN(str2));
	 //parseInt方法
	 document.write("<hr/>");
	 var str3="123";
	 document.write(str3+1);
	 document.write("<br/>");
	 document.write(parseInt(str3)+1);
	 </script>

6.js的函数重载

                   **** java中一个类中方法名相同，参数列表不同

                   ****js中的重载？不存在

                                   ****会调用最后一个函数（面试题目）

                                             （1）js不存在重载

                                               （2）js可以通过其他的方式模拟实现重载arguments

		function add1(){
		   //比如传递的是两个参数
		   if(arguments.length==2){
		        return arguments[0]+arguments[1];
		   }else if(arguments.length==3){
		       return arguments[0]+arguments[1]+arguments[2];
		   }else if(arguments.length==4){
		      return arguments[0]+arguments[1]+arguments[2]+arguments[3];
		   }else{
		      return 0;
		   }
		}
		alert(add1(1,2));  //3
		alert(add1(1,2,3)); //6
		alert(add1(1,2,3,4));//10
		alert(add1(1,2,3,4,5));//0

7.js的BOM对象

                 ***BOM：浏览器对象模型

                  ***有哪些对象

                                ****navigator：获取客户机（浏览器）的信息

                                               ---navigator.属性   （document.write(navigator.appName);                     

                                 ****screen：获取屏幕的信息

	  //screen对象
	  document.write("<hr/>");
	  document.write(screen.width);
	  document.write("<br/>");
	  document.write(screen.height);

                                 *****location：请求的URL地址

                                                 ---href属性

                                                          ****获取请求的url地址

                                                          ****设置url地址

                                                                       ----页面放置一个按钮，按钮上绑定一个事件，点击按钮会跳转

<html>
     <head>
	     <title>示例</title>
	 </head>
	 <body>
	 <input type="button" value="tiaozhuan" onclick="href1();"/>   
	 <hr/>
     <script type="text/javascript">
	 //href1（）方法
	 function href1(){
	     //alert("aaa");
		 location.href="01.html";
	 }
	 </script>
	 </body>
</html>

                                                                           *****onclick是一个鼠标点击事件   onclick="js代码";

                                 *****history：请求的url的历史

                                               ----创建三个页面

                                                              1.创建第一个页面a.html写一个超链接到b.html 

<html>
     <head>
	     <title>示例</title>
	 </head>
	 <body>
        <h1>AAAAAAAA</h1>
		<a href="b.html">AAAAAAAA</a>

     <script type="text/javascript">
	 </script>
	 </body>
</html>

                                                              2.创建b.html链接到c.html

<html>
     <head>
	     <title>示例</title>
	 </head>
	 <body>
      <h1>BBBBBBBBBBB</h1>
	  <a href="c.html">BBBBBBBBB</a>
	  <br/>
	  <input type="button" value="back" onclick="back1();">
	  <br/>
	  <input type="button" value="next" onclick="next1();">
     <script type="text/javascript">
	 //到上一个页面
	 function back1(){
	     history.go(-1);
	 }
	 //到下一个页面
	 function next1(){
	    history.go(1);
	 }
	 </script>
	 </body>
</html>

                                                               3.创建c.html

                                                ----到上一个页面：history.back();           history.go(-1);

                                               -----到下一个页面：history.forward();      history.go(1);

<html>
     <head>
	     <title>示例</title>
	 </head>
	 <body>
     <h1>CCCCCCCC</h1>
     <script type="text/javascript">
	 </script>
	 </body>
</html>

                                 ******window(*********)

                                                ****窗口对象

                                                ****顶层对象（所有的BOM对象都是在window里面操作的）

                                                ****方法：

                                                        **window.alert（）

                                                                           -简写alert（）

                                                       **confirm（）：确认提示框

                                                                         ---var flag=window.confirm("显示内容");

	  var flag=window.confirm("是否删除");
	  if(flag==true){
	       alert("删除成功");
	  }else{
	        alert("删除失败");
	  }

                                                        **prompt（）：输入的对话框

                                                                      --window.prompt("提示信息","默认值")；

                                                                       --windo.prompt("please input","0");

                                                        **open（）：打开一个新的窗口

                                                                        open（"打开新窗口的URL","","窗口特征，比如宽高"）

                                                                        ---创建一个按钮，点击按钮，打开一个新的窗口

                                                                            window.open("1.html","","width=200,height=100");

                                                **close（浏览器兼容其比较差）：关闭窗口          window.close();

                                                       **做定器

                                                                 ---setInterval（"js代码"，毫秒数） 1秒=1000毫秒

                                                                                --每3秒执行alert（）方法

                                                                                           window.setInterval("alert('123')",3000);   会有一个返回值

                                                                 ---setTimeout("js代码"，毫秒数)

                                                                                 --表示在4000毫秒数之后执行，但是只会执行一次

                                                                                           window.settimeout("alert('abc')",4000);  会有一个返回值

                                                                 ---clearInterval():清除掉setInterval设置的定时器   通过setInterval的返回值

                                                                 ---clear Timeout（）：清除掉setTimeout设置的定时器     通过setTimeout的返值

<html>
     <head>
	     <title>示例</title>
	 </head>
	 <body>
	 <input type="button" value="interval" onclick="clear1();">
	 <input type="button" value="timeout" onclick="clear2();">
	 
     <script type="text/javascript">
	  //var id1=setInterval("alert('123')",1000);
	  var id2=setTimeout("alert('abc')",1000);
	  //清除setInterval
      function clear1(){
	     clearInterval(id1);
	  }
	  //清除setTimeout
	  function clear2(){
	     clearTimeout(id2);
	  }
	 </script>
	 </body>
</html>

8.js的DOM对象

              *DOM 文档对象模型

               **文档：超文本标记文档html，xml

               **对象：提供了属性和方法

               **模型：使用属性和方法操作超文本标记文档

               *****可以使用js里面的DOM提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

               ***想要超文本标记文档进行操作，首先需要对标记型文档里面的所有内容封装成对象

                                 ----需要把html中的标签，属性，内容封装成对象

               ***要想对标记型文档进行操作，解析标记型文档（html）

        ***解析过程

                     根据html的层级结构在内存中分配一个树形结构，需要把html中的每个部分封装成对象

                     --document对象：整个文档

                     --element对象：标签对象

                      --属性对象：

                      --文本对象：

                      --Node节点对象：这个对象是这些对象的父对象

                                     ******如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

        ****DHTML：是很多技术的简称

                      **html：封装数据

                       **css：使用属性和属性值设置样式

                       **DOM：操作html文档（标记型文档）

                       **javascript：专门指的是javascript的语法和语句（ECMAScript）

9.document对象

          ***每个载入的html文档都会变成document对象

          ****常用方法：

                         *****write（）方法

                                          （1）向页面输出变量（值）

                                          （2）向页面输出html代码

                        ******getElementById();通过id获取元素

<html>
     <head>
	     <title>示例</title>
	 </head>
	 <body>
     <input type="text" id="nameid" name="aaaa">
	 
     <script type="text/javascript">
	 //write()方法
      document.write("<hr/>")
	 //getElementById()方法
	 var input1=document.getElementById("nameid");  //得到的是一个对象  传递的参数是标签中id的值
	      //得到input中的value值
	      alert(input1.name);         //标签的对象和属性名称
	      //向input中设置一个value
	      input1.value="bbbbb";
	 </script>
	 </body>
</html>

                      *****getElementsByName（）

                                       ---通过标签的name属性值得到值

                                       ---返回的是多个对象，数组对象

<html>
     <head>
	     <title>示例</title>
	 </head>
	 <body>
     <input type="text" name="name1" value="aaaaaa"/><br/>
	 <input type="text" name="name1" value="bbbbbb"/><br/>
	 <input type="text" name="name1" value="cccccc"/><br/>
	 <input type="text" name="name1" value="dddddd"/><br/>
	 
     <script type="text/javascript">
     var inputs=document.getElementsByName("name1");     //传递的是标签里面的name的值
	 alert(inputs.length);
	 //遍历inputs对象数组
	 for(var i=0;i<inputs.length;i++){
	    //将对象赋值给input
	    var input1=inputs[i];
		//显示各个对象的value值
		alert(input1.value);
	 }
	 </script>
	 </body>
</html>

                       *****getElementsByTagName("标签的名称"):

<html>
     <head>
	     <title>示例</title>
	 </head>
	 <body>
     <input type="text" name="name1" value="aaaaaa"/><br/>
	 <input type="text" name="name1" value="bbbbbb"/><br/>
	 <input type="text" name="name1" value="cccccc"/><br/>
	 <input type="text" name="name1" value="dddddd"/><br/>
	 
     <script type="text/javascript">
      //getElementsByTagName()
	   var inputs=document.getElementsByTagName("input");  //传入的参数是标签名称  返回的也是对象数组
	   alert(inputs.length);
	   //遍历
	   for(var i=0;i<inputs.length;i++){
	       var input1=inputs[i];
		   alert(input1.value);
	   }
	 </script>
	 </body>
</html>

                   *****注意：只有一个标签只能使用name得到，这个使用getElemensByName返回的是一个数值，这是不需要遍历，只通过数组下标来获取就行var inputs=document.getElementsByName("name11")[0];

 10.window弹窗案例

                   ---实现过程

                             1.创建一个页面

                                       ****有两个输入项和一个按钮

                                       ****按钮上面有一个事件，弹出一个新窗口open方法

                             2.创建弹出页面

                                       *****表格

                                       *****每个表格有个按钮

                                       *****按钮上有事件：把当前的编号和姓名传递到第一页页面

                      ----做这个案例的时候会遇到个问题：

                                       ****由于我们现在访问的是本地的文件，js安全性，谷歌浏览器的安全性特别高，不允许访问本地文件

                                       ****在实际开发中，没有这样的问题，实际开发中不可能访问本地文件

 <html>
 <head>
  
  <title></title>
 </head>
 <body>
  编号：<input type="text" id="numid"/><br/>
  姓名：<input type="text" id="nameid"/><br/>
  <input type="button" value="选择" onclick="open1()"/>
  <script type="text/javascript">
  function open1(){
    //open方法
	window.open("user.html","","width=250,height=150");
  }
  </script>
 </body>
</html>

<html>
   <head>
   <title>user网页</title>
   </head>
   <body>
      <table border="1" bordercolor="blue">
      <tr>
		<td>操作</td>
		<td>编号</td>
		<td>姓名</td>
      </tr>
      <tr>
		<td><input type="button" value="选择" onclick="s1('100','东方不败')"/></td>
		<td>100</td>
		<td>东方不败</td>
      </tr>
      <tr>
		<td><input type="button" value="选择" onclick="s1('101','岳不群')"/></td>
		<td>101</td>
		<td>岳不群</td>
      </tr>
      <tr>
		<td><input type="button" value="选择" onclick="s1('102','林平之)"/></td>
		<td>102</td>
		<td>林平之</td>
      </tr>
      </table>
      <script type="text/javascript">
	  //实现s1方法
	  function s1(num1,name1){
	      //需要把num1和name1赋值到windo页面
		  //跨页面操作opener  得到windo页面
		  var pwin=window.opener;
		  document.getElementById(numid).value=num1;
		  document.getElementById(nameid).value=name1;
		  //关闭窗口
		  window.close();
	  }
	  </script>
   </body>
</html>

11.在末尾添加节点案例：

             第一步：获取ul标签

             第二步：创建li标签

                               document.createElement("标签名称")方法

             第三步：创建文本

                               document.createTextNode("文本内容")方法

            第四步：把文本内容添加到li标签下面

                              使用：appendChild方法

                              li1.appendChild(tex1);

            第五步：把li添加到ul下面

                                使用：appendChild方法

<html>
 <head>

  <title>Document</title>
 </head>
 <body>
     <ul id="ulid">
	    <li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	 </ul>
	 <br/>
	 <input type="button" value="add" onclick="add1();"/>
	 <script type="text/javascript">
	 //在末尾添加节点
	 function add1(){
		 //获取到ul标签
	    var ul1=document.getElementById("ulid");
		//创建标签
		var li1=document.createElement("li");
		//创建文本
		var tex1=document.createTextNode("5555555");
		//把文本加入到li中
		li1.appendChild(tex1);
		//把li加到ul下面
		ul1.appendChild(li1);
	 }
	 </script>
 </body>
</html>