码迷,mamicode.com
首页 > 编程语言 > 详细

javascript基础系列总结

时间:2015-03-28 18:41:54      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:

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

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

js开始

技术分享
 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

变量流程控制 遍历循环 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>
追加方法,实现模块化 ,类似 方法+=方法

 

 

 

匿名方法

类似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

 

javascript基础系列总结

标签:

原文地址:http://www.cnblogs.com/leee/p/4279393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!