Javascript系列：总体理解

时间：2024-01-07 10:10:02

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

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

预备

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

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

     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

 </head>

     <body>

          <script type="text/javascript">

              alert(new Date().toLocaleDateString());

     </script>

     </body>

 </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：

 变量 给变量赋值 循环 打印

 监听动作

 在head中，也可以在body中。都需要<script>标签内

 alert("");

 html从上到下依次执行，如果js放中间，会先中间执行。

 比如：给一个控件注册事件，无法执行，可能就应为body还没执行完

 大小写敏感，弱类型。 var  可能是数组 对象 没有var 的变量是全局变量，任何地方都能用。

 注释：// /**/和c#一样  <!-- -->没用和html，习惯用这个标明 这是一些js代码

 多个script标签，就像是一个script标签。在一个script标签定义的变量，在另个script标签页能用。 

 字符串使用单引号 双引号都一样    

 嵌入到html的js字符串用单引号，为了防止和属性冲突。

 单独的字符串都可以

 new Date().toLocaleDateString()

基础理论

msdn查看js用法百度msdn library

Javascript系列：总体理解

类型 字符串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()方法

   <script type="text/javascript">

              //var num = 1 + 2 + "3";  33

              //var num = 1 + 2 + '3';  33

              var num =' 1' + 2 + '3';123

              alert(num);

     </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 增量 总和

 <script type="text/javascript">

         function fun(argu) {

         //此处typeof返回的类型的“值”,此处的Numeber类型的值为number注意。

             if (typeof (argu)=='number') {

                 alert(argu * 2);

             } else {

                 alert('非数字');

             }

         }

         fun(2);

     </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>

方法就进原则

   <script type="text/javascript">

         function fun() {

           for (var i = 0; i < arguments.length; i++) {

               alert(arguments[i]);//arguments是一个参数数组，在考虑“重载”用arguments。lenth小写.属性方法都小写

           }

         }

         fun('a',1,0,new Date().toLocaleString());

     </script>

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

class Program

    {

        public static void fun(params object[] arObjects)

        {

            for (int i = ; i < arObjects.Length; i++)

            {

                Console.WriteLine(arObjects[i]);

            }

        }

        static void Main(string[] args)

        {

            fun("a",,,);

            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

相关文章