JavaScript笔记

1.如果要想编写js，只需要将其定义在<script></script>元素之中即可，如下代码：

<script type="text/javascript">
 
    //此处可以编写 JavaScript程序代码,如果有需要也可以定义多个
    alert("Hello Everyone);
</script>

2.也可以自己新建一个js文件，在需要的时候引入即可，例如文件名为hello.js，只需要在引入此js文件的地方写上<script type="text/javascript" src="hello.js"></script>即可

3.在js中用var定义变量，根据用户赋的值自动设置数据类型，var也可以省略。需要注意的是js中变量类型是可以变更的，如下代码：

<script type="text/javascript">
    msg=10;∥定义了一个mum的变量
    msg="www.mldn.cn";∥修改了变量内容
    console. log("msg="+msg);∥页面输出内容
</script>
 
在控制台输出结果为：www.mldn.cn

4.js中的"+"既可以实现加法运算，也可以进行字符串的连接，如下代码

<script type="text/javascript">
    numA=10
    numB= 20
    console. log(numA+ numB)
    numA="Hello"
    numB="小李老师"
    console. log(numA+ numB);
 </script><br>控制台输出结果为 30<br>　　　　　　　　 Hello小李老师　　

5.js中函数的定义格式：

function  函数名称(参数,参数,...){
    //函数代码体
    //[return[返回值]]
}

例如以下代码：

<script type="text/javascript">
    function printMessage(msg){//只接收参数不返回数据
        console. log(msg);
    }
    printMessage("www.mldn.cn");//直接进行函数的调用
</script><br>控制台输出结果：www.mldn.cn<br>注意：在js中调用函数时也可以不按照指定的参数个数赋值，如果在这里直接使用printMessage()调用，输出结果是undefined，undefined就相当于java中的null

6.js中if判断语句结合"函数名称.arguements.length"的使用（说明：函数名称.arguements.length是用来获得该函数实际接收的参数的个数的）。

<script type="text/javascript">
    function printMessage(msg){//只接收参数不返回数据
        if (printMessage arguments length==1){
            console. log(msg)
        }else{
            console. log("对不起,现在没有任何的数据!");
        }
    printMessage("www.mldn.cn","www.jixianit.com");∥直接进行函数的调用
</script>
控制台输出结果:对不起,现在没有任何的数据!

7.如下编写一个有返回值的函数：

<script type="text/javascript">
            function add(x, y){
                if(add.arguments.length==2){
                    return x+y;
                }else{
                    return undefined;
                }
            }
            console.log("【addO函数调用】"+add(10));
            console.log("【addO函数调用】"+add(10,undefined));//数字与"undefined"相加,结果为NaN<br>　　　　　　　　　　　　　　 console.log("【add函数调用】"+add(10,20)); 
            console.log("【adO函数调用】"+add("Helo"," Everyone"));
    </script>
 
 
控制台执行结果： 【ado函数调用】 undefined<br>　　　　　　　　 【addO函数调用】NaN
              【add函数调用】30
              【ado函数调用】 Helo Everyone            

8.javascript里面也有顺序结构，分支结构（if/else语句），循环结构（for循环，while循环）和传统编程几乎相同

需要注意的是js中，如果要进行字符串相等的判断,那么直接使用“==”即可,这里面不包含相应的方法的判断操作。

9.字符串里面一般都会提供有大量的控制函数,这些函数名称在各个语言里面几乎都是类似的。

str=www.mldn.cn
console. log("【字符串转大写】"+ str.toUpperCase());
console. log("【字符串长度】"+ str.length);//注意这个length没有括号
console.log("【字符串替换】"+"'Hello World'.replace(" World," Everyone"));

10.js中字符串既可以使用单引号定义，也可以使用双引号定义　

11.数组：在js中也支持有数组的访问操作，但是在进行数组创建的时候需要利用Array这个类来完成。

注意：js中的数组长度是可以改变的，

<script type="text/javascript">
    function printArray(array){    
       if(array != undefined){
            for(x=0; x< array.length; x++){
           console.log(array[x]);
        }
        }
    }
    data= new Array(5);//开辟5个长度的数组
    for (x=0; x< data length; x ++){
          data(x]=x;//为数组元素赋值
    }　　data[10]=100;//当前的索引超过了原始数组的长度，数组的最大长度就是当前索引的数值，执行之后数组长度就发生改变了，那些没有赋值的索引就为undefined，赋值的就为值
   printArray(data);
</script>   上面是动态为数组赋值，也可以采用静态为数组赋值，将上面红色字体的代码换成以下代码：data= new Array(10,20,30,40,50);

12.关于 JavaScript之中基于对象的理解

　　虽然 JavaScript现在提供了面向对象的支持,但是其对于传统的基于对象的编程并没有发生改变,在任何一个html页面里面实际上都会提供有许多的HTML元素,例如:<body>,<button>,<img>,<a>,这些元素在 JavaScript里面都是通过对象的形式来进行操作的,利用这些元素对象可以直接进行内部的属性操作。如果要想获得这些对象,就需要为组件设置“id”属性,利用id属性再结合 document.getElementByld("ID名称")的形式来获取指定的元素对象,如果获取了一个指定元素对象之后可以利用“ addEventListener(事件类型,处理函数,处理形式)”函数来动态的进行事件的绑定处理。

13.js事件处理

强调：加载事件不需要绑定元素，单击事件和鼠标事件需要绑定元素，一般单机事件和鼠标事件写在加载事件内。

　　● 加载事件（onload）：所有的页面如果要在浏览器上执行,那么一定会牵扯到程序代码的加载问题,那么现在假设需要在页面加载完成之后进行某些的处理操作,就可以利用 onload事件来进行处理。

<script type="text/javascript">
    window.onload= function(){∥与在body中编写的 onload相同
        welcome();
        msg();
    }
    function welcome(){∥定义加载事件的处理函数
        console.log("大爷,欢迎来玩,各种好玩的都有,最好玩的就是辛博娃娃,该娃娃每到周五就自己休息不接客!")
    }   
    function msg(){
        console.log("Good Luck Everyone" )
    }
</script>
 
程序执行结果：大爷,欢迎来玩,各种好玩的都有,最好玩的就是辛博娃娃,该娃娃每到周五就自己休息不接客!
            Good Luck Everyone    除了上面这种写法，还有一种直接在jsp页面body标签里面写也可以：<body onload="welcome();msg()"></body>  注意：调用多个函数中间要用分号隔开  开发的时候还是使用最上面那种方式写

　　● 单击事件（onclick）：

　　　　●写法1：直接在body标签中引用

<head>
　　<script type="text/javascript>
    function msg(){∥这是一个函数
            window.alert("www.jixianit.com);
　　</script>
/head>
< button type="button" onclick="msg()">按我,显示内容</ button
</body>

　　　　●写法2（开发的时候用）：

<html>
<head>
<script type="text/javascript>
    window.onload= function(){　　//页面加载完成后调用
        buttonObject=document.getElementByld("pushButton");
        buttonObject.addEventListener("click", msg, false);
        document.getElementByld("cleanButton").addEventListener("click",function(){//可以直接使用匿名处理函数
            textObject.value ="";
        }, false);
    }
    function msg(){
        textObject= document.getElementByld("showText");//根据id获取对象
        textObject.value ="Hello EveryOne";
    }
</script>
</head>
<body>
    <input type=text" id="showText"><br>
    <button type="button"id="pushButton">按我,显示内容< /button>
    <button type="button"id="cleanButton">清空显示内容< /button>
</body>
</html>

　　● 鼠标事件：鼠标事件主要是描述所有与鼠标有关事件处理形式,在 JavaScript里面支持的鼠标事件有如下几种:

　　　　● onmousedown：鼠标按下触发;

　　　　● onmouseup：鼠标抬起时触发

　　　　● onmouseout：鼠标离开时触发

　　　　● onmouseover：鼠标经过时触发

　　　　● onmousemove：鼠标移动时触发

14.js中常用的弹框：

　　● window.confirm(),确定,取消

　　● window.alert(),确定；也可以写成alert()

15.document.write("<h1>11</h1>");//在页面输出内容“11”

16.显示图层和隐藏图层：

window. onload= function(){//所有的处理事件都通过加载操作完成
    document.getElementByld("showBut").addEventListener("click", function(){
        imgDivObject= document.getElementByld("imgDiv");//获取指定的组件
        imgDivObject.style.display ="block";//显示图层
    }, false);
    document.getElementByld("hideBut").addEventListener("click", function(){
        imgDivObject= document.getElementByld("imgDiv");//获取指定的组件
        imgDivObject.style.display ="none";//隐藏图层
    }, false);
}

17.定时调用：setTimeout( showAllImage,1000);//每秒调用showAllImage函数一次

18.单选钮事件处理：单选钮使用radio，单选钮的name和id必须相同，因为单选钮的name相同，所以选定元素的时候要使用document.all("id名称")函数来完成。例如以下js代码：获取选中的性别内容

window.onload= function{//所有的处理事件都通过加载操作完成
document.getElementByld( "showBut" ).addEventListener("click", function(){
    sexObject= document.all("sex");//选择所有id为“sex”的元素
    info="";
    for(x=0; x<sexObject.length; x++){
        if(sexObject[x].checked){
            info= sexObject[x].value;//获取选中的内容
        }
        document.getElementByld("msgSpan").innerHTML="用户的性别:"+info;//innerHTML是提示信息
    }, false);    
}

19.在js中如果有id重复，这时采用document.getElementById("id名称")接收就只能接收此名称的第一个对象，因为这堆相同名称的id变成了一个数组，接收数组就要使用document.all("id名称")接收了，常用在多选框中；
20.在多选框中，一定要把name属性定义成相同。
21.click是一个单击事件，比较常用。
22.blur（失去焦点）也是一个事件。常用在输入框或文本域中。举个例子：当你输入用户名的时候，当你输完用户名立马调用js代码，就会提示你用户名合不合法，不会调用数据库。
23.如果想进行表单拦截，就需要绑定submit事件处理。具体代码如下：
document.addEventListener("submit",function(event){//event表示当前的事件对象，系统内定，不用改变，直接写event
if(判断条件){
event.preventDefault();//阻止表单提交
}
},false);
24.元素对象.className="text-success";元素对象.className="text-error"表示成功的样式(框为绿色，对应的innerHTML字体也为绿色)
或失败的样式(框为红色，对应的innerHTML字体也为红色)。