JavaScript 基础

1.变量

       var

        字符串 string

        数字 number

        布尔 boolean

        数组 Array

        对象

        Null

        Undefined

 

 

2.数组:

var arr=[1,2,3];定义时赋值

 var arr[];//空数组

var arr=new Array();//定义一个空数组 可以通过索引访问赋值

 

数组长度可变，总长度等于最大索引值+1

同意数组中的元素类型可以互不相同

当访问为赋值的数组元素时，返回undefined,不会数组越界

        var arr=[1,2,3,"asd",true];
        var arr2=new Array();
        arr2[0]=1;
        arr2[3]=2;
        for(i=0;i<arr.length;i++)
        {
            document.write(arr[i]+"<br/>");
        }

 

 

3.运算符

===全等于  "10"==10  true   "10"===10  false

=== 表示恒等，首先比较两边的变量数据类型是否相等，其次比较两边的变量的数值是否相等；== 表示相等即仅仅比较两边变量的数值是否相等。

 

, 逗号运算符  只会返回最右边的表达式的值  a=(b=5,c=2,d=3);//3

 

void    a=void(b=5,c=2,d=3);//undefined

通常被写在'行内js'中，eg：<a href='javascript:void(0)'>有void链接</a>。当然也写在独立的js代码块中。

void该运算符指定要计算一个表达式但是不论该表达式原来是否有自己的返回值，其返回值都为undefined。void运算符的操作数可以是任意类型。

即作用一：返回undefined,(对于为什么不直接使用undefined，是因为undefined不是关键字，意味着它随时可能被篡改成其他值。。。)。

作用二:防止不必要的行为。在页面中有个a标签，但是该a标签又不是为了指向跳转页面的话，这个时候void运算符就派上大大的用场了。

利用它填充<a>的href确保点击时不会产生页面跳转;此外，填充<image>的src，确保不会向服务器发出垃圾请求。类似src='javascript:void(0)'。

 

typeof  判断是什么数据类型  操作符返回一个字符串，表示未经计算的操作数的类型。

           判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。

           alert(typeof "123");//string

           function person(){}

           var obj=new person();

           alert(typeof obj);//object

 

 

instanceof  判断是什么类型的  运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。       

function person(){} 
var obj=new person(); 
alert(obj instanceof person);//true
alert(obj instanceof Object);//true

 

 

4.流程控制语句

 

 

 5.循环控制语句

while     do..while       for       for in

 

for in :遍历对象（数组的所有元素  对象的所有属性）  

遍历数组时，只查找数组中定义的元素。

取对象的属性时，如果直接获取变量名，获得的是属性名，person[变量名]获得的是对象属性的内容

 

 function employee(name,job,born)
       {
           this.name=name;
           this.job=job;
           this.born=born;
       }

       var tt="";
       var bill=new employee("Bill Gates","Engineer",1985);
        for(ss in bill)
        {
           tt+=ss;
        }
        alert(tt);//name job born

       var qq="";
       for(sss in bill)
       {
           qq+=bill[sss];
       }
       alert(qq);// Bill Gates  Engineer 1985

 

控制循环控制流

break continue

 

 

6.常用特殊语句

js中只有函数中的变量才是局部变量

语句块  {   ... }  语句块中的变量也是全局变量

空语句     ；  用于没有循环体的循环  （对数组做初始化等等）

异常抛出语句    throw new Error("报错了");

异常捕捉语句    try{...}  catch(e){   e.message    直接输出 是异常的一个属性}  finally{...}   js只能有一重catch

with语句  主要用于重复语句，避免要重复写对象 简化代码书写

 

 

 

7.函数

js代码复用单位是函数，函数可以包含一段可执行的代码，也可以接收调用者传入的参数。

函数没有声明返回类型，当函数想返回时，直接加上return “值”

函数就是function的一个对象  默认是window的一个属性  可以 window.f();调用        形参不能加var     

命名函数  function name(参数列表){...}   调用：name(形参);

                使用命名函数时，js在代码执行前都会加载到作用域中，所以调用和声明可以没有先后顺序。

匿名函数 var f=function(参数列表){...}    调用：f(形参);

使用funciton类构造匿名函数 var f=  new Function('参数列表'，"函数执行体；")    调用：f(形参);

        var f=new Function('name','age','document.write(name+age);');
        f("zhangsan",90);
        alert(typeof  f);//function

局部变量  在函数中定义的变量被称为局部变量

局部函数 是在函数中定义的函数，在外层函数外调用局部函数是不可以的，类似局部变量的作用域，只有当外部函数被调用时，   内部函数才会被执行

       function test()
        {
            return function(){
                alert("HHS");
            }
        }

        var f=test();
        f();

       function f1()
        {
            var name="HHS";
            function f2()
            {
                var age=30;
                alert(name);
            }
            f2();
        }
        f1();

  js闭包  有权访问另一个函数作用域中的变量的函数

 

函数调用方式   

1,当声明的一个函数没有指明分配给哪个对象使用的时候，默认分配的是window   eg:window.show('zhangsan',30)

2,函数引用.call(调用者，参数1，参数2....)     eg:  show.call(window,'zhangsan',30);

3,函数引用.apply(调用者，arguments)    arguments相当于是数组，用来存放多个参数  eg:show.apply(window,['zhangsan',30])

   function show(arr,func){
            func.call(window,arr);
        }

        show([1,2,3,4],function(arr){
            for(i in arr)
            {
                document.write(arr[i]+"<br/>");
            }
        });

 

 

8.对象

js也是一种基于对象的语言

常用对象  Date Math

 

 

创建对象   3种

        使用new关键字调用构造器创建对象

      function person(name,age)
        {
            this.name=name;
            this.age=age;
            this.info=function(){
                document.write(this.name+this.age);
            }
        }
        var hhs=new person("hhs",21);
        hhs.info();

        使用Object直接创建对象     

        var hhs=new Object();
        hhs.name="HHS";
        hhs.age=18;
        hhs.info=function()
        {
            document.write(this.name+this.age);
        }
        hhs.info();

        使用JSON语法创建对象    var p={name:"HHS" , age:18};

  var person={
            "name":"hhs",
            "age":21,
            "son":[//son属性为一个JSON数组，其中存储两个JSON对象
                {
                    "name":"qq",
                    "age":"2"
                },
                {
                    "name":"ww",
                    "age":"6"
                }

            ],
            "info":function(){
                document.write(this.name+this.age);
                for(var child in this.son)
                {
                    document.write(this.son[child].name+this.son[child].age);//获取儿子的信息
                }
            }
        }

        person.info()

JSON(javascript Object Notation)是一种轻量级的数据交换格式

 

 

 

9.BOM

浏览器对象模型

 

弹出新窗口URL

function myOpen()
        {
            //URL   重复标记  打开的窗口属性
            window.open("http://www.baidu.com","baidu","left=20,top=50,location=no,toolbar=no");
        }

对话框

        function myConfirm()
        {
            var an=window.confirm("是否退出？");
            if(an)
            {
                alert("bye");
            }
            else
            {
                alert(":-)");
            }
        }

        function myPrompt()
        {
            var an=window.prompt("请输入密码：","默认值");//确定返回文本框的值，取消返回null
        }

定时器打印时间

function time()
        {
            var d=new Date();
            var year= d.getFullYear();
            var month= d.getMonth()+1;
            var day= d.getDate();

            var week= d.getDay();
            var hours= d.getHours();
            var min= d.getMinutes();
            var sec= d.getSeconds();

            switch (week)
            {
                case 0:
                    week="星期日"
                    break;
                case 1:
                    week="星期一"
                    break;
                case 2:
                    week="星期二"
                    break;
                case 3:
                    week="星期三"
                    break;
                case 4:
                    week="星期四"
                    break;
                case 5:
                    week="星期五"
                    break;
                case 6:
                    week="星期六"
                    break;
                default :
                    week="无效"
                    break;
            }
            /*
            当条件判断成功时，将定时器关闭
            if()
            {
                window.clearInterval(t);
            }*/
            document.getElementById("time").innerHTML=year+"-"+month+"-"+day+"-"+"  "+hours+":"+min+":"+sec;
        }

       var t= window.setInterval("time()",1000);

 

history对象

 

 <a href="Test0719.html">下一页</a>

 <a href="javascript:history.back()">后退</a>
 <a href="javascript:history.forward()">前进</a>

 

location对象

screen对象

 

navigator对象

 

 

 

10.DOM

 

为了动态的修改HTML元素，须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素。

根据ID：getElementById()  查找具有唯一ID值的元素

利用节点关系取时：注意换行也是一个节点

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">


    <title></title>
</head>
<body>
    <ul id="names">
        <li id="n1">zhangsan</li>
        <li id="n2">lisi</li>
        <li id="n3">wangwu</li>
        <li id="n4">zhaoliu</li>
    </ul>

    <input type="button" value="父节点" onclick="show(curr.parentNode)"/>
    <input type="button" value="第一个子节点"  onclick="show(curr.parentNode.firstChild.nextSibling)"/>
    <input type="button" value="上一个节点" onclick="show(curr.previousSibling.previousSibling)"/>
    <input type="button" value="下一个节点" onclick="show(curr.nextSibling.nextSibling)"/>
    <input type="button" value="最后一个子节点" onclick="show(curr.parentNode.lastChild.previousSibling)"/>
    <input type="button" value="得到所有li元素的个数" onclick="showCount()"/>


    <script type="text/javascript">


        var curr=document.getElementById("n3");

       function show(target)
        {
            alert(target.innerHTML);
        }
        function showCount()
        {
            alert(document.getElementsByTagName("li").length);
        }

    </script>

</body>
</html>

 

表单操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <script type="text/javascript">
        function operatorForm()
        {
            var myform=document.forms[0];
            alert(myform.action+"\n"+myform.method+"\n"+myform.target);
            //表单提交
            myform.submit();
            //表单重置
            myform.reset();

        }
    </script>
    <title></title>
</head>
<body>
    <form id="myform" action="www.baidu.com" method="get" target="_blank">
        <input name="username" type="text" value="hhs"/><br/>
        <input name="password" type="text" value="123456"/><br/>
        <select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
        </select><br/>
        <input type="button" value="获取第一个控件" onclick="alert(document.getElementById('myform').elements[0].value)"  />
        <input type="button" value="获取第二个控件"  onclick="alert(document.getElementById('myform').elements.password.value)" />
        <input type="button" value="获取第三个控件"  onclick="alert(document.getElementById('myform').city.value);" />
        <input type="button" value="操作表单"   onclick="operatorForm()"/>
    </form>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <title></title>
</head>
<body>
    <select name="city" id="city" size="5">
        <option value="beijing" >北京</option>
        <option value="shanghai" selected="selected">上海</option>
        <option value="nanjing">南京</option>
        <option value="guangzhou">广州</option>
        <option value="wuhan">武汉</option>
        <option value="shenzhen">深圳</option>
    </select><br/>

    <input type="button" value="第一个城市" onclick="change(city.options[0])"/>
    <input type="button" value="上一个城市" onclick="change(city.options[city.selectedIndex-1])"/>
    <input type="button" value="下一个城市" onclick="change(city.options[city.selectedIndex+1])"/>
    <input type="button" value="最后一个城市" onclick="change(city.options[city.length-1])"/>

    <script type="text/javascript">
        var city=document.getElementById('city');
        var change= function (scity) {
            alert(scity.text);
        }
    </script>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript">

        function update()
        {
            var row=document.getElementById("row").value;
            var cell=document.getElementById("cell").value;

            var mytable=document.getElementById('mytable');

            mytable.rows[row-1].cells[cell-1].innerHTML=document.getElementById("course").value;
        }
    </script>
    <title></title>
</head>
<body>
    <table id="mytable" border="1">
        <caption>HHS</caption>
        <tr>
            <td>C</td>
            <td>C++</td>
        </tr>
        <tr>
            <td>LSD</td>
            <td>ARM</td>
        </tr>
        <tr>
            <td>JAVAEE</td>
            <td>Android</td>
        </tr>
    </table>

    <input type="button" value="表格标题" onclick="alert(document.getElementById('mytable').caption.innerHTML)"/>
    <input type="button" value="第一行 第一格" onclick="alert(document.getElementById('mytable').rows[0].cells[0].innerHTML)"/>
    <input type="button" value="第二行 第二格" onclick="alert(document.getElementById('mytable').rows[1].cells[1].innerHTML)"/>
    <input type="button" value="第三行 第二格" onclick="alert(document.getElementById('mytable').rows[2].cells[1].innerHTML)"/>
    设置指定单元格的值：第<input type="text" id="row" size="2"/>行，
    第<input type="text" id="cell" size="2"/>列的值为
    <input type="text" id="course" size="10"/>
    <input type="button" id="btn_set" value="修改"  onclick="update()"/>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script  type="text/javascript">
        function create()
        {
            var city=document.getElementById("city");
            var ele=document.createElement("li");
            ele.innerHTML="南京";
           // city.appendChild(ele);
            //city.insertBefore(ele,city.firstChild.nextSibling);
            city.replaceChild(ele,city.firstChild.nextSibling);
        }
        function copy()
        {
            var city=document.getElementById("city");
            var ele=city.firstChild.nextSibling.cloneNode(true);
            city.appendChild(ele);
        }
        function mydelete()
        {
            var city=document.getElementById("city");
            var ele=city.firstChild.nextSibling;
            city.removeChild(ele);
        }

    </script>
</head>
<body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
    </ul>
    <input type="button" value="创建复制替换节点" onclick="create()"/>
    <input type="button" value="复制节点" onclick="copy()"/>
    <input type="button" value="删除节点" onclick="mydelete()"/>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        function createSelete()
        {
            var mybody=document.getElementById('mybody');
            var select=document.createElement("select");
            for(var i=0;i<10;i++)
            {
                var op=new Option("新增的选项"+i,i);
                select.options[i]=op;
            }
            select.id="myselect";
            mybody.appendChild(select);
        }

        function deleteOne()
        {
            var select=document.getElementById("myselect");
            if(select.options.length>0)
            {
                //第一种
                // select.remove(select.options.length-1);
                //第二种
                select.options[select.options.length-1]=null;
            }

        }

        function clearAll()
        {
            var select=document.getElementById("myselect");
            if(select.options.length>0)
            {
                select.options.length=0;
            }
        }
        
    </script>
</head>
<body id="mybody">
    <input type="button" value="创建一个城市列表框" onclick="createSelete()"/>
    <input type="button" value="一条条删除列表框的内容" onclick="deleteOne()"/>
    <input type="button" value="一次性清空列表框内容" onclick="clearAll()"/>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript">
            function createTable()
            {
                var mybody=document.getElementById("mybody");
                var mytable=document.createElement("table");
                mytable.border=1;
                mytable.id="mytable";

                var caption=mytable.createCaption();
                caption.innerHTML="hhs table";

               for(var i=0;i<5;i++)
               {
                   var tr=mytable.insertRow(i);
                   for(var j=0;j<4;j++)
                   {
                       var td=tr.insertCell(j);
                       td.innerHTML="("+i+","+j+")";
                   }
               }
                mybody.appendChild(mytable);
            }

            function deleteLastRow()
            {

                var mytable=document.getElementById("mytable");
                if(mytable.rows.length>0) {
                    mytable.deleteRow(mytable.rows.length - 1);
                }
            }
            function deleteLastCell()
            {

                var mytable=document.getElementById("mytable");
                var lastRow=mytable.rows[mytable.rows.length-1];
                if(lastRow.cells.length>0)
                {
                    lastRow.deleteCell(lastRow.cells.length-1);
                }

            }
    </script>
</head>
<body id="mybody">
    <input type="button" value="创建一个五行四列的表格" onclick="createTable()"/>
    <input type="button" value="删除最后一行" onclick="deleteLastRow()"/>
    <input type="button" value="删除最后一个单元格" onclick="deleteLastCell()"/>
</body>
</html>

 

 

 

11.事件

<a href="www.baidu.com" onclick="return false">这是一个超链接</a>

true 为捕获型事件  false为冒泡型事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        //IE浏览器
        /*function show()
        {
            alert("hello");
        }

        window.onload= function () {

            document.getElementById("test1").attachEvent("onclick",show);
            document.getElementById("test2").onclick= function () {
                document.getElementById("test1").detachEvent("onclick",show);
            };
        }*/


        //标准DOM  谷歌 火狐浏览器

        function show()
        {
            alert("hello");
        }
        window.onload= function () {

            document.getElementById("test1").addEventListener("click", show, false);
           /* document.getElementById("test2").onclick = function () {
                document.getElementById("test1").removeEventListener("click", show, false);
            };*/
            document.getElementById("test2").addEventListener("click", function () {
                document.getElementById("test1").removeEventListener("click", show, false);
            }, false);
        }

    </script>
</head>
<body>
    <input type="button" value="测试一" id="test1">
    <button type="button" id="test2"><b>测试二</b></button>



</body>
</html>

 

冒泡型事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function show(text)
        {
           var display= document.getElementById("display");
            display.innerHTML+=text;
        }

    </script>
</head>
<body onclick="show('body<br/>');">
    <div onclick="show('div<br/>');">
        <p onclick="show('p<br/>');">click me</p>
    </div>

    <div id="display"></div>
</body>
</html>

 

冒泡型事件结果

 

捕获型事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function show(text)
        {
           var display= document.getElementById("display");
            display.innerHTML+=text;
        }

        window.onload= function () {
            var mybody=document.getElementById("mybody");
            var mydiv=document.getElementById("mydiv");
            var myp=document.getElementById("myp");

            mybody.addEventListener("click", function () {show('body<br/>')},true);
            mydiv.addEventListener("click",function () {show('div<br/>')},true);
            myp.addEventListener("click",function () {show('p<br/>')},true);
        }
    </script>
</head>
<body id="mybody">
    <div id="mydiv">
        <p id="myp">click me</p>
    </div>

    <div id="display"></div>
</body>
</html>

 

捕获型事件结果      

 

访问事件对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        //获取事件的目标元素
        function handle(oEvent)
        {
            //兼容IE
            if(window.event){
                oEvent=window.event;
            }

            //兼容IE
            var oTarget;
            if(oEvent.srcElement){
                oTarget=oEvent.srcElement;
            }
            else{
                oTarget=oEvent.target;
            }

            alert(oTarget.tagName);


        }
        window.onload=function()
        {
            document.getElementById("myimg").onclick=handle;
        }
    </script>
</head>
<body>
    <img id="myimg" src="" alt="假装是一张图片"/>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        //获取事件的目标元素
        function handle(oEvent)
        {
            //兼容IE
            if(window.event){
                oEvent=window.event;
            }
            var mydiv=document.getElementById("display");
            mydiv.innerHTML+=oEvent.type+"<br/>";



        }
        window.onload=function()
        {
           var myimg= document.getElementById("myimg");
            myimg.onmousedown=handle;
            myimg.onmouseup=handle;
            myimg.onmouseover=handle;
            myimg.onmouseout=handle;
            myimg.onclick=handle;
            myimg.ondblclick=handle;

        }
    </script>
</head>
<body>
    <img id="myimg" src="" alt="假装是一张图片"/>
    <div id="display"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        //获取事件的目标元素
        function handle(oEvent)
        {
            //兼容IE
            if(window.event){
                oEvent=window.event;
            }
            var mydiv=document.getElementById("display");
            mydiv.innerHTML+=oEvent.type+"<br/>";



        }
        window.onload=function()
        {
            var myta= document.getElementsByTagName("textarea")[0];
            myta.onkeydown=handle;
            myta.onkeyup=handle;
            myta.onkeypress=handle;

        }
    </script>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<div id="display"></div>
</body>
</html>

 

 

HTML事件

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body onload="alert('hello')" onunload="alert('00')">
<!--
    onsubmit 可设置属性为return  false  阻止表单提交
-->
<form action="www.baidu.com" onsubmit="alert('表单提交了')">
<input type="text"  value="a" onfocus="alert('获取焦点')" onblur="alert('失去焦点')"/>
<input type="text" value="b" onchange="alert('内容改变了')"  onselect="alert('内容选中了')"/>
<select name="" id=""  onchange="alert('选项改变了')">
    <option value="">上海</option>
    <option value="">北京</option>
</select>

    <input type="submit" value="提交"/>

</form>
</body>
</html>