Javaweb学习笔记 JavaScript篇

javascript入门
1.javascript介绍
javascript语言诞生主要是完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码，
js是netacape网景公司的产品，初命名为livescript，为了吸引更多的java开发者，更名为JavaScript
Js是弱类型，java是强类型
弱类型就是类型可变。
强类型就是定义变量的时候，类型已经确定，而且不可变。

int a = 12;

var a 
a = 10; 数字型
a = "aaaa"; 字符串型

特点：
1.交互性（他可以做的就是信息的动态交互）
2.安全性（不允许直接访问本地硬盘）
3.跨平台性（只要是可以解释js的浏览器都可以运行，和平台无关）

2.JavaScrip和html代码的结合方式
2.1第一种方式
只需要在head或者body标签中，使用script标签来书写javascript代码

2.2第二种方式
单独建立一个js文件


但是 两个功能二选一使用 不能同时使用–>

<script type="text/javascript" src="1.js"></script>

4.变量
什么是变量？变量是可以存放某些值的内容的命名
javascript的变量类型：
数值类型；number
字符串类型； string
对象类型； object
布尔类型； boolean
函数类型； function

javascript中特殊的值
undefined 未定义 所有js变量未赋予初始值的时候，默认值都是undefined
null 空值
NAN 全称是Not a Number.非数字非数值

js中的定义变量的格式

var 变量名
var 变量名 = 值；

<script type="text/javascript">
    var a;
    alert(a); //undefined
    a = 12;
    //typeof（）是javascript提供的一个函数 它可以是取变量的数据类型返回
    alert(typeof(a));//number
    a = "abc";
    alert(typeof (a));//string

    var b = 11;
    var c = "abc";
    alert(b * c); //NaN是非数字 非数值

</script>

5.3 关系（比较）运算
等于：== 等于是简单的数字面值的比较
全等于： === 除了比较两个数值的面值以外，还会比较两个数值的数据类型

<script type="text/javascript">
var a ="12";
var b = 12;
    alert(a == b);// true
    alert(a === b);//false
</script>

7.4逻辑运算
且运算：&&
或运算：||
取反运算：！
在JavaScript语言中，都可以为一个boolean类型的变量去使用
0 null undefined ”“（空串）都认为是false

var a = 0;
if (a){
    alert("零为真");
}else{
  alert("零为假");
}
var a = null;
if(a){
    alert("null为真");
}
else{
    alert("null为假");
}
var a = undefined;
if(a){
    alert("undefined为真");
}
else{
    alert("undefined为假");
}
var a = "";
if(a){
    alert("空串为真");
}
else{
    alert("空串为假");
}

&&且运算：
有两种情况：
第一种：当表达式全为真时，返回最后一个表达式的值，
第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值。

||或运算：
第一种：当表达式全为假时，返回最后一个表达式的值，
第二种：当表达式中，有一个为真的时候，返回第一个为真的表达式的值。

并且||与&&有短路；
短路就是说，当这个&&或||运算有结果以后，后边的表达式将不再执行

 var a = "abc";
var b = true;
var c = null;
var d = false;

alert(a && b); //true
alert(b && a); //abc
alert(a && d);//false
alert(c && d);//null
alert(a && d && c)//false

alert(d||c);//null
alert(c||d);//false
alert(a||c);//abc
alert(c||a);//true

7.数组
7.1数组定义方式
js中的数组定义：

var 数组名=[] //空数组
var 数组名=[1,'abc',true] //定义数组同时赋值元素
var arr = []; //定义一个空数组
arr[0] = "b";
alert(arr.length);//1
arr[2] = "abc";
alert(arr[1]);//undefined
alert(arr.length);//20
// javascript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作
//数组的遍历
for (var i = 0; i < arr.length; i++) {
 alert(arr[i]);
}

8.函数
8.1函数定义的两种方式
第一种 可以使用function关键字来定义函数
使用的格式如下：

function 函数名（形参列表）{
函数体
}

   <script type="text/javascript">
   function fun(){
        alert("无参函数fun()被调用了");
   }
   //函数的调用---才会执行
   fun();

   function f(a,b){
   alert("无参函数f()被调用了 a="+ a +" b="+ b);
   }
   f(22,33);

   //在JavaScript中如何定义带返回值的函数？
   //只要在函数体内直接使用返回值return就行了

   //定义一个带有返回值的函数
   function fuct(a,b){
       return a+b;
   }
   alert(fuct(22,33));
    </script>
	

函数的第二种使用方法
格式如下：

var 函数名 = function（形参列表）{
函数体
}

var fun = function (){
    alert("这是个无参函数！");
}
fun();
var func1 = function (a,b){
    alert("这是个有参函数" +a +"和"+ b);
}
func1(2,3);
var func2 = function (a,b){
    return a+b;
}
alert("返回值是"+func2(2,3));

注：java中的函数允许重载，但是在js中的函数的重载会直接覆盖掉上一层的含义

var func2 = function (a,b){
    alert("这是个有参函数" +a +"和"+ b);
}
var func2 = function (a,b){
    return a+b;
}
alert("返回值是"+func2(2,3));

8.2 函数的arguments隐形参数（只在function函数内）
就是在函数中不需要定义，但却可以直接用来获取所有参数的变量，我们把它叫做隐形参数
隐形函数特别像java基础的可变长函数一样

public void func(object ... args)

可变长参数其实是一个数组
那么js中的隐形参数也和java基础中可变长参数一样，操作类似数组

<script type="text/javascript">
    function fun(a,b){
        alert(arguments.length);//参看参数个数
        for (var i = 0; i < arguments.length ;i++) {
            alert(arguments[i]);
        }
        alert("这是个有参函数");
    }
    fun(1,'ab',true);
    //需求：编写一个函数，要求计算所有参数的和
    function func(){
        var sum = 0;
        for (var i = 0; i < arguments.length; i++) {
            if(typeof(arguments[i])== "number" ){
                sum += arguments[i];
            }
        }
        return sum;
    }

    alert("和是"+func(2,3,4,"abc","bcs",true,5));
</script>

9.js中自定义对象
object形式的自定义对象

var 变量名 = new object(); //对象实例（空对象）
变量名.属性名 = 值  //定义一个属性
变量名.函数名 = fuction(形参){}//定义一个函数

对象的访问：

变量名.属性名/函数名(); 

<script type="text/javascript">
    var obj = new Object();
    obj.name = "zhaochen";
    obj.age = 18;
    obj.fun = function (){
        alert("name: "+this.name+" age: "+this.age);
    }
   alert(obj.name);
    alert(obj.age);
    obj.fun();
</script>

{}花括号形式的自定义对象
格式：

var 变量名 //定义一个空对象
 = {属性名：值, //定义一个属性值
    属性名：值,
	函数名:fuction(){}}//定义一个函数

属性的使用：

变量名.属性名,
变量名.函数名();
    var obj = {
        name : "zhao",
        age : 18,
        fun : function (a,b){return a+b}
    }
    alert(obj.age+","+obj.name+","+obj.fun(1,2));

10.js中的事件：
什么是事件？ 事件是电脑的输入设备与页面进行交互的相应，我们称之为事件。
常用的事件：
onload 加载完成事件 ： 页面加载完成之后，常用于做界面js代码初始化操作
onclick 点击事件： 常用于按钮的点击相应操作
onblur 失去焦点事件： 常用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件： 常用于下拉列表与输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法

事件的注册又分为静态注册与动态注册两种方式
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后，要执行哪些操作代码，叫做事件注册或者事件绑定
静态注册事件：
通过html标签的事件属性直接赋于事件响应后的代码。这种方式我们叫做静态注册
动态注册事件：
是指先通过js代码得到标签的dom对象，再通过dom对象.事件名 = function（）{} 这种形式赋予事件响应后的代码，叫做动态注册
动态注册基本步骤：
1.获取标签对象
2.标签对象.事件名 = function（）{}

onload事件 加载完成事件：

 //onload事件的方法
      function onloadFun()  {
          alert('静态注册onload事件，所有的代码')
 }
 //unload事件动态注册，是固定写法
 window.onload = function (){
          alert("动态注册onload事件");
 }
  </script>
</head>

<!--静态注册onload事件
onload事件是浏览器解析完页面之后就会自动触发的事件
<body onload="onloadFun()">-->

   <script>
   

onclick事件 点击事件：

  //静态注册onclick事件
    function onclickfun(){
      alert("这是静态注册onclick");
    }
	
	
//动态注册onclick事件 
   window.onload = function (){
      //1.获取标签对象
      /*
      *document是JavaScript的语言提供的一个对象（文档）
      * get 获取
      * element 元素（就是标签）
      * by 通过。。由。。递。。
      * id id属性
      * getElementById 通过id属性获取标签对象
      * */
     var btnobj = document.getElementById("btn01");
   //  alert(btnobj);
     //2.通过标签对象，事件名 = function(){}
   btnobj.onclick = function (){
     alert("这是onclick动态注册标签");
   }
    }

  </script>
</head>
<body>

<button onclick="onclickfun()">按钮1</button>
<button id = "btn01">按钮2</button>

onblur 失去焦点的事件：

 <script type="text/javascript">
    //静态注册失去焦点事件
      function fun(){
          //console是控制台对象，是由JavaScript语言提供的，专门由于像浏览器的控制台打印输出，用于测试使用
          //log（）是打印的方法
      console.log("静态注册失去焦点的事件")

    }

    //动态注册失去焦点事件
    window.onload = function (){
          //1.获取标签对象
          var passwordobj = document.getElementById("password");
        //2.通过标签对象 事件名 = function（）{}
        passwordobj.onblur = function () {
            console.log("动态注册失去焦点的事件");
        }
      }
  </script>
</head>
<body>
onchange 已经改变事件：
用户名：<input type="text" onblur="fun()"><br/>
密码：<input type="text" id = "password"><br/>
确认密码：<input type="text"><br/>

function onchangefun(){
  alert("静态已经改变事件注册");
}
window.onload = function (){
    var onchangeobj = document.getElementById("sel01");
    onchangeobj.onchange = function (){
        alert("动态已经改变事件注册");
    }
}
  </script>
</head>
<body>
<select onchange="onchangefun()">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

<select id = "sel01">
    <option>e</option>
    <option>f</option>
    <option>g</option>
    <option>h</option>
</select>

onsubmit 表单提交事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit</title>
    <script>
        function onsubmitfun(){
//要验证所有表单项是否合法 如果有一个不合法 则不允许提交表单
            alert("静态提交表单事件注册");
            return false;
        }

        window.onload = function (){
            var onsubmitobj = document.getElementById("sub01");
            onsubmitobj.onsubmit = function (){
                alert("动态提交表单事件注册");
                return false;
            }
        }
    </script>
</head>
<body>
<!--return false 可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun()">
  <input type="submit" value="静态提交">
</form>
<form action="http://localhost:8080" method ="get" id="sub01">
    <input type="submit" value="动态提交">
</form>
</body>
</html>

10.DOM模型
DOM的全称是DOCUMENT OBJECT MODEL 文档对象模型

大白话，就是把文档中的标签，属性，文本，转换为对象进行管理
那么 他们是如何实现把标签，属性，文本转换为对象来管理的呢？ 这就是我们马上要学习的要点

document对象的理解：
第一点：document它管理了所有的html文档内容
第二点：document它是一种树结构的文档，有层级关系
第三点：它让我们把所有的标签都对象化
第四点：我们可以通过document访问所有的标签对象

10.4document对象中的方法介绍
document.getElementById(elementId)
通过标签的id属性找标签dom对象 elementId是标签的id属性值
document.getElementByName(elementName)
通过标签的Name属性找标签dom对象 elementName是标签的Name属性值
document.getElementByTagName(tagname)
通过标签名查找标签dom对象，tagname是标签名
document.createElement(tagName)
方法：通过指定的标签名，创建一个标签对象，tagname是要创建的标签名

注：document对象的三个查询方法，如果有id属性，优先使用getElementById的方法进行查询 如果没有id属性 则优先使用getElementsByName 来查询 如果id属性和name属性都没有 最后按标签名查getElementsByTagName 以上三种查询方法只有在页面加载完成以后，才能查询到标签对象

getElementById 查询document对象的方法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>Titletitle>
<script>
  /*
  * 需求：用户点击了校验按钮，要获取输入框体中的内容，然后验证其是否其合法，
  * 验证的规则是：必须由字母，数字，下划线组曾，并且长度必须为5到12个字
  * */
  //1.当我们要操作一个标签的时候，一定要先获取这个标签对象
 function clickevent(){
   var usernameObj = document.getElementById("username");
 //[object HTMLInputElement] 它就是dom对象
     //获取文本框里的值
//如何验证字符串 符合某个规则 需要使用正则表达式技术
     var patt = /^\w(5,12)$/;
     /*
     * test()方法用于某个字符串 判断是否匹配我指定的规则
     匹配则返回true 不匹配 则返回false
      */

if(patt.test(usernameObj.value)){
alert("用户名合法");
}else{
    alert("用户名不合法");
}
 }

script>
head>
<body>
用户名：<input type="text" id="username"><br/>
<button onclick="clickevent()">校验button>
body>
html>

正则表示法：

    <script>
        //表示要求字符串中，是否包含字母e
        var patt = new RegExp("e");
        // var patt = /e/ //也是正则表达式对象
        alert(patt);/* /e/ */

        //表示要求字符串中，是否包含字母a或b或c任意一个字符
        var pattt = /[abc]/;

        var b = /[a·z]/ //表示要求字符串是否包含小写字母
        var c = /[A·Z]/ //表示要求字符串是否包含任意大写字母
        var c = /[0·9]/ //表示要求字符串是否包含任意数字
        var d = /\w/ //表示要求字符串是否包含字母，数字，下划线
        var e = /a+/ //表示要求字符串至少含有一个a
        var f = /a*/ //表示要求字符串是否包含零个或多个a
        var g = /a?/ //表示要求字符串是否包含零个或1个a
        var h = /a{3}/ //表示要求字符串包含3个或多个连续的a
        var k = /a{3,5}/ //表示要求字符串包含至少3个最多5个连续的a
        var l = /a{3,}/ //表示要求字符串包含至少3个连续的a
        var m = /a$/ //表示要求字符串以a结尾
        var n= /^a/ //表示要求字符串以a开头

        var a = "cba";
        alert(m.test(a));
//问题：/a{3,5}/最多什么时候有用？
        var k = /a{3,5}/ //表示要求字符串包含至少3个最多5个连续的a
        var o = /^a{3,5}$/ //要求字符串从头到尾必须完全匹配至少3个至多5个连续的a
        var p = /^\w{3,5}$/ //要求字符串从头到尾必须完全匹配至少3个至多5个连续的字母数字下划线
    </script>
	

getElementsByName 查询document对象方法

  <script>
    //全选
    function clickall(){
      //document.getElementsByName（）是根据指定的name属性返回查询多个标签对象即可
      // 这个对象的操作和数组一样
      //集合中每个元素都是dom对象
      //这个集合中的元素顺寻就是它们在html中从上到下的顺序
      var spanobj = document.getElementById("span");
     var hobbies = document.getElementsByName("hobby");
     //checked表示复选框的选择状态，如果选中则是true，不选中则是false
      //checked这个属性为可写
      for (var i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = true;
      }
    }
    //全不选
    function clickno(){
    var hobbies = document.getElementsByName("hobby");
      for (var i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = false;
      }
    }
    //反选
    function clickreverse(){
      var hobbies = document.getElementsByName("hobby");
      for (var i = 0; i < hobbies.length; i++) {
        if(hobbies[i].checked == true){
          hobbies[i].checked = false;
        }else{
          hobbies[i].checked = true;
        }
      }
    }
  script>
head>
<body>
兴趣爱好：<br/>
<input type = "checkbox" name="hobby" value="cpp" >c++
<input type = "checkbox" name="hobby" value="java">java
<input type = "checkbox" name="hobby" value="javascript">javascript
<br/>
<button onclick = "clickall()">全选button>
<button onclick = "clickno()">全不选button>
<button onclick = "clickreverse()">反选button>
<br/>
<span id = "span" style="color:red;">span>

getElementsByTagName 查询document对象方法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagNametitle>
    <script type="text/javascript">
        //document.getElementsByTagName("input") 是按照指定标签名进行查询并返回集合
        //这个集合的操作跟数组一样
        //集合中都是dom对象
        //并且元素中的顺序与它们在html页面中的顺序相同
//全选
function clickall(){
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].checked = true;
    }
}
//全不选
function clickno(){
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].checked = false;
    }
}
//反选
function clickreverse(){
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if(inputs[i].checked == true){
            inputs[i].checked = false;
        }
    else{
        inputs[i].checked = true;
        }}
}
    script>
head>
<body>
兴趣爱好：<br/>
<input type = "checkbox"   value="cpp" >c++
<input type = "checkbox"   value="java">java
<input type = "checkbox"   value="javascript">javascript
<br/>
<button onclick = "clickall()">全选button>
<button onclick = "clickno()">全不选button>
<button onclick = "clickreverse()">反选button>
<br/>
<span id = "span" style="color:red;">span>
body>
html>

10.5 节点的常用属性和方法
节点就是标签对象

方法：
通过具体的元素节点调用
getElementByTagName()
方法，获取当前的指定标签名的孩子节点

appendChild (oChildNode)
方法，可以添加一个子节点，ochildNode是要添加的孩子节点

属性：
childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的class属性值
innerHTML
属性,表示获取/设置起始标签和结束标签中的内容
innerText
属性,表示获取/设置起始标签和结束标签中的文本

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询title>
<link rel="stylesheet" type="text/css" href="../../../../Desktop/恋恋有词2018/资料/02-javascript/代码/JavaWeb/02_JavaScript/05.DOM查询练习/style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj节点
		document.getElementById("btn01").onclick = function () {
			var bjObj = document.getElementById("bj");
			alert(bjObj.innerHTML);
		}
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			var lis = document.getElementsByTagName("li");
			alert(lis.length)
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			var genders = document.getElementsByName("gender");
			alert(genders.length)
		};
		//4.查找#city下所有li节点
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1 获取id为city的节点
			//2 通过city节点.getElementsByTagName按标签名查子节点
			var lis = document.getElementById("city").getElementsByTagName("li");
			alert(lis.length)
		};
		//5.返回#city的所有子节点
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1 获取id为city的节点
			//2 通过city获取所有子节点
			alert(document.getElementById("city").childNodes.length);
		};
		//6.返回#phone的第一个子节点
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			// 查询id为phone的节点
			alert( document.getElementById("phone").firstChild.innerHTML );
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			//1 查询id为bj的节点
			var bjObj = document.getElementById("bj");
			//2 bj节点获取父节点
			alert( bjObj.parentNode.innerHTML );
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			// 获取id为android的节点
			// 通过android节点获取前面兄弟节点
			alert( document.getElementById("android").previousSibling.innerHTML );
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value);
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value = "国哥你真牛逼";
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert(document.getElementById("city").innerHTML);
			// alert(document.getElementById("city").innerText);
		};
	};
script>
head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜欢哪个城市?
		p>

		<ul id="city">
			<li id="bj">北京li>
			<li>上海li>
			<li>东京li>
			<li>首尔li>
		ul>

		<br>
		<br>

		<p>
			你喜欢哪款单机游戏?
		p>

		<ul id="game">
			<li id="rl">红警li>
			<li>实况li>
			<li>极品飞车li>
			<li>魔兽li>
		ul>

		<br />
		<br />

		<p>
			你手机的操作系统是?
		p>

		<ul id="phone"><li>IOSli><li id="android">Androidli><li>Windows Phoneli>ul>
	div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	div>
div>
<div id="btnList">
	<div><button id="btn01">查找#bj节点button>div>
	<div><button id="btn02">查找所有li节点button>div>
	<div><button id="btn03">查找name=gender的所有节点button>div>
	<div><button id="btn04">查找#city下所有li节点button>div>
	<div><button id="btn05">返回#city的所有子节点button>div>
	<div><button id="btn06">返回#phone的第一个子节点button>div>
	<div><button id="btn07">返回#bj的父节点button>div>
	<div><button id="btn08">返回#android的前一个兄弟节点button>div>
	<div><button id="btn09">返回#username的value属性值button>div>
	<div><button id="btn10">设置#username的value属性值button>div>
	<div><button id="btn11">返回#bj的文本值button>div>
div>
body>
html>

document.createElement()方法

  <script type="text/javascript">
      //添加子元素
      window.onload = function (){
//现在需要我们使用html代码创建html标签，并显示在界面上
//标签的内容是 
aaaa
var divobj = document.createElement("div"); //在内存中

alert(divobj); // [object HTMLDivElement
divobj.innerHTML = "aaaa"; // 但还是只是在内存中
document.body.appendChild(divobj);
var textNode = document.createTextNode("aaaaaa");
      divobj.appendChild(textNode);}
  </script>