Javascript系列：总体理解

js是一个脚本客户端（浏览器）语言。和sql html类似。多练习。

没有排错的经验，弱类型语言，浏览器解释执行，出错也不会报错

预备

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="JScript.js" type="text/javascript"></script>
 7     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
 8 </head>
 9     <body>
10          <script type="text/javascript">
11              alert(new Date().toLocaleDateString());
12     </script>
13     </body>
14 </html>

添加一个js和css文件，各自的标签script和link有着同样属性type=“text/js” “text/css”

<script>   
        </script>
        <a href="javascript:alert('a标签的js事件')">事件</a>
        <input type="button"value="事件" onclick="alert('标签属性名（事件名）')"/>

事件超链接 javascript类似http：ftp：thunder：ed2k协议的超链接 html标签属性事件名。在前面的html总结中有mailto：

 1 变量 给变量赋值 循环 打印
 2 
 3 监听动作
 4 
 5 在head中，也可以在body中。都需要<script>标签内
 6 
 7 alert("");
 8 
 9 html从上到下依次执行，如果js放中间，会先中间执行。
10 
11 比如：给一个控件注册事件，无法执行，可能就应为body还没执行完
12 
13  
14 
15 大小写敏感，弱类型。 var  可能是数组 对象 没有var 的变量是全局变量，任何地方都能用。
16 
17 注释：// /**/和c#一样  <!-- -->没用和html，习惯用这个标明 这是一些js代码
18 
19 多个script标签，就像是一个script标签。在一个script标签定义的变量，在另个script标签页能用。 
20 
21 字符串使用单引号 双引号都一样    
22 
23 嵌入到html的js字符串用单引号，为了防止和属性冲突。
24 
25 单独的字符串都可以
26 
27 new Date().toLocaleDateString()

基础理论

msdn查看js用法百度msdn library

类型字符串String、数字Number、布尔Boolen、数组Array、对象、Null、Undefined

用户输入确认警告窗口

<script type="text/javascript">
        var msg = prompt('你爱我不？', '爱or不爱？');//问，答  返回答
        if (confirm('你确定' + msg + "？")) {
            alert("我也" + msg + "你");
        } else {
            alert("不理你！");
        }
    </script>

用户输入 确认 警告窗口

用户输入弹窗确认框警告

刷新确定重新加载？，×号确定离开本页面？

 <script type="text/javascript">
        //                window.onunload = function () { alert("卸了"); };
        window.onbeforeunload = function () {
            var msg = "确认离开当前页面吗？离开将会丢失";
            return msg;
        };
        //        if (confirm('ok????')) {
        //            alert(123);
        //        }
    </script>

刷新×号统一代码

变量流程控制遍历循环 typeof()方法

1   <script type="text/javascript">
2              //var num = 1 + 2 + "3";  33
3              //var num = 1 + 2 + '3';  33
4              var num =' 1' + 2 + '3';123
5              alert(num);
6     </script>

js从左到右执行变量类型，单双引号使用一样

   <script type="text/javascript">
        function fun(argu) {
               return (argu * 2);
        }
        alert(fun('a'));
    </script>//NaN是Number类型的“值”！！！

NaN：非数字的意思。比如一个数除以0

<script type="text/javascript">
             var num = 65;
             if (num%2==0) {
                 alert('num是偶数');
             } else {
                 alert('num是奇数');
             }
             switch (num/10) {
             case 10:
                 alert('优秀');
                 break;
             case 9:
                 alert('良好'); 
                 break;
             case 8:
                  alert('一般');
                  break;
             default:
                  alert('差');
                  break;
             }
    </script>

if else switch.. case..：..；break流程控制

         <script type="text/javascript">
//             var sum = 0;
//             var index = 0;//0 1无所谓
//             while (index<=100) {
//                 sum += index;
//                 index++;
//             }
//             alert(sum);
             var sum = 0;
             for (var i = 0; i < 101; i++) {   //101非100
                 sum += i;
             }
             alert(sum);
    </script>

循环 while for 增量总和

 1 <script type="text/javascript">
 2         function fun(argu) {
 3         //此处typeof返回的类型的“值”,此处的Numeber类型的值为number注意。
 4             if (typeof (argu)=='number') {
 5                 alert(argu * 2);
 6             } else {
 7                 alert('非数字');
 8             }
 9         }
10         fun(2);
11     </script>>

typeof()返回变量类型的值。此处的Numeber类型的值为number注意。要加引号！String类型的值为‘string’

  <script>
        //js中的Array想当于动态数组，和哈希表和栈的综合。动态扩展，键值对，有pop.push方法
 var arr_3 = new Array();
        arr_3['李可'] = 20;
        arr_3['小红'] = 18;
        arr_3['小王'] = 21;
        for (var VAR in arr_3) {//for循环对应的是c#中的foreach，对应key不是数字的数组的遍历
        }
            alert(VAR);
           alert(arr_3[VAR]);
        }
    </script>

for的第二种使用相当与c#foreach。对不是以数字为key的数组的遍历

<script type="text/javascript">
         //typeof(变量或者表达式或者对象)方法返回的值都是字符串（都需要加引号），有6中值"string"" number""boolen""function""object""undifined"
         var ob = function() {//function
             this.name = "like";
         }
         alert(typeof (ob));

         var arr = [1.2, 6];//"object"
         alert(typeof (arr));

         var i;//"undifined"
         alert(typeof (i));

         alert(typeof (m)); //"undifined"  之前不能有个空m放前面，会报错。

         var a = 1;//"number"
         alert(typeof (a));

         alert(typeof (1>2) ); //boolen

     </script>

typeof()完全详解

调试多alert一下；打开调试工具---开启调试--设断点-- 刷新网页--添加监视。

方法

定义方法命名小写字母开头，不和系统方法名重复。方法参数没有类型，return也没有返回值。方法的就进原则。

  <script type="text/javascript">
        function fun() {
            alert('无参数');
        }
        function fun(num) {
            alert(num);
        }
        fun();//会执行第二个fun，就近原则
    </script>

方法就进原则

1   <script type="text/javascript">
2         function fun() {
3           for (var i = 0; i < arguments.length; i++) {
4               alert(arguments[i]);//arguments是一个参数数组，在考虑“重载”用arguments。lenth小写.属性方法都小写
5           }
6         }
7         fun('a',1,0,new Date().toLocaleString());
8     </script>

arguments参数对象。js属性方法小写。闭包(类)大写

class Program
    {
        public static void fun(params object[] arObjects)
        {
            for (int i = 0; i < arObjects.Length; i++)
            {
                Console.WriteLine(arObjects[i]);
            }
            
        }
        static void Main(string[] args)
        {
            fun("a",1,2,3);
            Console.ReadKey();
        }
    }

相当c#的params object[]数组

   <script>
    // 动态的去创建一个方法，类似委托，有类似创建对象。
    //   大写的Function内参数为字符串！！前面的参数为最后“函数体的”参数。！！
            var fangfa = new Function("i1","i2", "return i1+i2;");
            alert(fangfa(1, 2));
        </script>

动态创建方法，和创建类似，和委托形式类似，Function（”“”“”“）

<head>
    <title></title>
    <script type="text/javascript">
        //window.onload=function(){}把方法写到里面，要先加载好html后执行。否则，html节点都没加载好，也不会找到geElement等。//也可以不写进。写一个方法，在html节点写事件=“方法（）；”
        //getElementById()里面引号，得到的var变量表示这个节点。以后操作这个变量，而不是（）里的id  。var p = document.getElementById("p1");  var p = document.getElementById("p1").value;
        //方法名（）是调用。只有方法名，没有（）是判断这个方法存在与否，常常if（方法名），判断方法是否存在，预留后路。注意木有（）哦。
        window.onload = function () {
            //            var p = document.getElementById("p1");
            //            p.appendChild(document.createTextNode("dddddd")); //一段字，也是一个特殊节点。创建方法和创建其他节点不同document.createTextNode("文本")//document.createElement("p");
            //            alert(p.getAttribute("id"));
            //            p.setAttribute("id", "44");
            //            alert(p.getAttribute("id"));
            //            var i2 = document.getElementById("wen").value;
            //            alert(i2);


            //            var b = document.getElementsById("aa"); // body节点对象不支持“getElementsById”属性或方法


//            var pa = document.getElementById("p1");
//            var pa1 = document.createElement("input")
//            pa.parentNode.insertBefore(pa1, pa);//里面逗号写中文的了，出异常了
        }
    </script>
</head>
<body id="aa">
    <p id="p1">222</p>
    <input type="text" name="name" value="111" id="wen" />
    <input type="button" name="name" value="点击添加 "  /><!--onclick="zhuijia();"-->
</body>
</html>

onload doc.get().value/createEle/createTextNode get/set/Attri 父节点变量.insertBefore(new,old) 节点变量.parNode

var b = document.getElementsByTagName("body")[0]

追加方法，实现模块化

<script type="text/javascript">
        window.onload = function () {
        }
        //给一个方法追加另一个方法  要求：模块化，方法不嵌套。
        //例子：给onload方法写一个加方法的追加方法。
        function addonload(fun) {//将一个方法字段名传进去。
            var oldonload = window.onload;//将onload字段赋值给新的一个字段，让这个新字段指向方法体。当运行新字段();就可以运行老方法。
            if (typeof (oldonload) != 'function') {//没有给onload注册方法,直接给onload运行fun
                window.onload = fun;
            }
            else {//里面有方法，执行，并追加一个新方法；
                oldonload();
                fun();
            }
        }
        function fangfa() { }
        addonload(fangfa);//以后就不用onload 只用addonload就可以了，达到了模块化的目的
    </script>

追加方法，实现模块化，类似方法+=方法

计时器

    <script type="text/javascript">
        function getvalue() {//
            var txt = document.getElementById("t").value; //取文本框值
            txt = parseInt(txt) + 1; //转化一下 parseInt
            document.getElementById("t").value = txt; //给文本框赋值
        }
        onload = function () {
            var id = window.setInterval(getvalue, 1000); //计时器动作返回一个计时器的引用id，关掉 clearInterval（id）
            //动态给btn添加点击暂停继续事件
            document.getElementById("zan").onclick = function () { window.clearInterval(id); };
            document.getElementById("jixu").onclick = function () { window.setInterval(getvalue, 1000); };
        }
    </script>
</head>
<body>
    <input type="text" name="txt" value="1" id="t" />
    <input type="button" name="btn" value="计时暂停" id="zan" />
    <input type="button" name="btn1" value="计时继续" id="jixu" />
</body>

var i=window.set(fun,time)/clearInterval(id)

匿名方法

类似c#委托变量指向一个匿名函数，这个委托变量就可以当成一个函数来用。在jquery中应用极为广泛。区别，一个function关键字，一个delegate关键字。

 <script>
            var i = function(num1,num2){return num1+num2};//犯的错，函数加双引号了当成属性了
            alert(i(1, 2));//此处用“委托变量”+参数
        </script>

变量赋参数调用没名的函数，匿名函数

  public delegate void delfun();
    class Program
    {
        static void Main(string[] args)
        {
            delfun delbianliang = delegate() { Console.WriteLine("委托变量调用此delegate开头的匿名函数"); };
            delbianliang();
        }
    }

c#中匿名函数。委托变量调用此delegate开头的匿名函数

Lambda表达式

c#就是一个省去关键字delegate和返回这的匿名函数。

  public delegate void delfun();
    class Program
    {
        static void Main(string[] args)
        {
            delfun delbianliang = delegate() { Console.WriteLine("委托变量调用此delegate开头的匿名函数"); };
            delbianliang();
            delfun debianliang2 = () => { Console.WriteLine("Lambda表达式（省去delegate return字的匿名函数的调用）"); };//没参数就写一个()==>省去关键字的麻烦
            debianliang2();
            Console.ReadKey();
        }
    }

Lambda：省去delegate关键字的匿名函数。就是更简练匿名函数

js扩展方法

    <script>
        String.prototype.addkuozhanming= function() {//this表示这个对象。对象.prototype.扩展方法名=匿名函数
            return  this+".str" ;
        }
        var name = 'llike';
      alert(name.addkuozhanming());
    </script>

对象.prototype.扩展方法名=匿名函数

undifined null

    <script type="text/javascript">
//        null为object类型的值       undifined为Undifined类型的值      null undifined 0 false 均为false，数值 字符串均为true
        if ("asdasd") {//
            alert('true');
        } else {
            alert('false');
        }


//        undifined的几种情况     "undifined"为String类型的值。String类型的值还有"number" 等6中”“类型   不要和Number类型弄混淆.
//        在上面typeof()方法中已经详解String的6个返回”“类型。
        var num;//1，声明但没有初始化
        alert(num);//输出undefined
        alert(typeof (sth));//2,对没声明的变量 typeof时候。输出undefined
        function add(i1,i2) {//3,方法没有返回值会返回undifined
            i1 + i2;
        }
        alert(add(1, 2));//输出undefined


//        null没有值，可以赋值给变量，表示不存在的对象, 是一个值相当与 1  2 3 
        var a = null;
        alert(typeof (a));//为”object“


        
        //下面可以判断其类型（对应String的”undefined“）或者直接看值是否和undefined相等。这两种做法一样
          var m;
        if (typeof(m)=="undefined") {
            alert(2);
        }
        var n;
        if (n==undefined) {
            alert(3);
        }

        //  但在if()条件中，和null判断相等也能执行。这点只是因为一些兼容的问题导致的。
        var m;
        if (m == null) {
            alert(1);//输出1
        } else {
            alert(2);
        }

        var m;//此种方法整名，为赋值的变量不等null而等undefined
        if (typeof (m)=="null") {
            alert(1);
        } else {
            alert(2);//输出2
        }

//因为兼容性，有木有区分到底的方法呢？答案是有的。就是===绝对相等
        var m;
        if (m===null) {
            alert(1);
        } else {
            alert(2);//输出2
        }

        var m;
        if (m===undefined) {
            alert(1);//输出1
        } else {
            alert(2);
        }
    </script>

详解undefined null两值的区分。和typeof()返回String类型对应的“undefined” “object”区别 ===

对象

如何使用js实现一个对象

 <script>
        //第一种方法定义个一“类”闭包，有点像构造函数。
            function person(name, age, sex) {
                this.Name = name;
                this.Age = age;
                this.Sex = sex;
                this.act = function() { alert("动作") };//任意增加一个属性或者动作，指向一个匿名函数。
            }

            var li=new person('李可',18,'男');
            alert(li.Age + li.Sex + li.Name);
            li.act();

            li.height = 180;//new出这样一个对象后，也可以动态扩展增加其对象的属性。类似动态函数
            alert(li.Age + li.Sex + li.Name + li.height);




          //第二种方法，先定义这样的一个空类， 在后面动态添加就ok
            function animal() {

            }
            var dog = new animal();
            dog.Name = "旺旺";
            dog.Age = 3;
            dog.act = function () { alert('汪汪') };

            alert(dog.Age + dog.Name);
            dog.act();
            alert(dog['Age'] + dog['Name']);//用【】来访问，和.的意义一样的，此种和字典数组很类似，就是对象和数组，键值对的统一。
           
        </script>

对象定义两种方法，访问.[]两种方法，和数组等键值对的统一

数组

<script>
        //js中的Array想当于动态数组，和哈希表和栈的综合。动态扩展，键值对，有pop.push方法

        var arr_0 = [5, 10, 5156, 5165, 9999, 161];
        var arr=['li','wang','zhang'];
        //定义“动态数组”的简单形式。相当与c#中的ArrayList
        var arr_1 = { "李可": 20, "小红": 18, "小王": 21 }; //定义“键值对”的简单形式相当于c# 哈希和字典
              
        var arr_02 = new Array();//也可以固定长度new Array(n);
        arr_02[0] = 1;
        arr_02[1] = '小可';
        arr_02[2] = "男";
        alert(arr_02.join('|'));//jion方法比徐处理的字符串数组，里面包含数字都不能处理 下面有实例
        for (var i = 0; i < arr_02.length; i++) {//for 对应的key为数字的数组的遍历
        alert(i); //对应的“动态数组”alert的是索引，可以arr_02[i]输出值。后面的“键值对”的“哈希字典”alert的是key还是value注意一下。

        var arr_3 = new Array();
        arr_3['李可'] = 20;
        arr_3['小红'] = 18;
        arr_3['小王'] = 21;
        alert(arr_3.join("|")); //此时不能jion方法,显示不出来
        for (var VAR in arr_3) {//for循环对应的是c#中的foreach，对应key不是数字的数组的遍历
        }
            alert(VAR);
           alert(arr_3[VAR]);
        }
    </script>

数组.键值简单定义机分别for for in遍历。js的数组动态，键值及栈pop push