JavaScript入门学习笔记

1.什么是JavaSript
     HTML只是描述页面长相的标记语言,没有计算,判断能力,如果所有计算,判断(比如判断文本框是否为空)都放到服务器执行的话网页的话页面会非常慢,用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算,判断.JavaScript就是一种浏览器执行的语言
     JavaScript和Java没有直接关系,简称JS
     JS是解释型语言,无需编译就可以随时运行,哪怕预压有错误,没有语法错误的部分还是能正确运行
     JavaScript组成：核心语法（ECMAScript）Dom（文档对象模型）Bom（浏览器对象模型）

 2.JS入门
     <script type="text/javascript">
      alert(new Date().toLocaleDateString());
  </script>
  JS代码可以放在,head,body任何位置
  new Date()是创建一个Date类的对象
  <script language="">已经不推荐使用
  除了可以在页面中声明JavaScript,还可以调用外部的js文件,比如外面的js文件为Common.js文件,里面alert(new Date().toLocaleDateString());
   <script src="Common.js" type="text/javascript"></script>

     字符串推荐使用‘’把字符串显示

     严格区分大小写

3.js的变量
     js中即可以使用双引号声明字符串,也可以用单引号(推荐)声明字符串,主要方便html继承,避免转义符的麻烦
     js中有null,undefined两种,null表示变量为空,underfined则表示变量还没有指向任何对象,未初始化.两者的区别参考资料
     js是弱类型,声明变量的时候无法:int i=0; 只能通过var i=0;声明变量,和C#中的var不一样,不是c#中哪样的类型判断
     js也可以不用var声明变量,直接用,这样的变量时"全局变量",因此除非却是想用全局变量,否则使用的时候最好加上var
     在js里面是没有承认的全局变量,不要不加var
     js是动态类型,因此var i=0; i="abc";是合法的

     undefined和整数相加返回NAN

 

4.JavaScript共六种数据类型：

1. Boolean（布尔），取值：只有两种值：true或false
2. Number（数字），取值：所有数字， 包含整数小数等，范围相当于double。
3. String（字符串），取值：所有字符串。
4. Undefined（未定义），取值：只有一个值undefined
5. Null（空对象），取值：只有一个值null
6. Object（对象类型），取值：任何对象、Array、function等等

5.类型中的未知和空，==和===问题
     加断点,在vs环境下调试

               // ==相等 和 ===完全相等
               var n=10;
               var n2='10';
               alert(n == n2); //true 因为没有类型判断
               alert(n === n2);//false

                    

               var nn = 10;
               switch(nn){
                    case '10':
                         alert('字符串10');
                         break;
                    case 10:
                         alert('数字10');//这个就是说明case是===判断
                         break;
               }

                var nnn1;
               var nnn2 = null;
               alert(nnn1 == nnn2); //true 因为没有类型判断
               alert(nnn1 === nnn2);//false 类型不同

     null与undefined表示的意义是完全不同的。

1. undifined表示一个未知的值，比如变量声明了没有赋值，方法没有返回值的时候，或是一个未知变量。
2.  null，表示的是一个已知的值，这个值就是null，null表示不指向任何对象。
        当一个变量为null，这时，这个变量的值不是未知的，为是一个已知的值，就是null，表示不指向任何变量

6.判断变量初始化                                          

     js中判断变量,参数是否非初始化的三种方法
     var x;

    if (x == null ) {

        alert( "null")

    }

    if (typeof (x) == "undefined") {

        alert( "undefined");

    }

    if (!x) { alert('不x' ); } //推荐,简单

 

7.变量所用域

     总结1：直接在页面上声明的变量，在整个页面都能访问

     总结2：在函数内任何地方声明的变量在函数内哪里都能使用

     总结3：第二次重复声明变量会自动忽略var关键字

     总结4：不声明直接赋值,直接作为全局变量

     总结5：当局部变量和全局变量重复声明的时候，在函数内优先用局部变量

               var n=10;//在整个页面内都能使用
               function myFunc(){
                    alert(n);
                    var m =100;
                    if( m>0){//在函数内任何地方声明的变量在函数内哪里都能使用
                         var x =10;
                    }
                    alert(x);
               }
               myFunc();
               alert(m);//这里报错，方法中的变量有局部性

               var n=10;//在整个页面内都能使用
               function myFunc(){
                    var sum = 0;
                    for(var i=1;i<=100;i++){
                         sum += i;
                    }
                    alert(i);
                    //第二次重复声明变量会自动忽略var关键字
                    for(var i=1; i<5; i++){
                    }
                    alert(i);
               }
               myFunc();

                var n=10;//在整个页面内都能使用

               function myFunc(){
                    var sum = 0;
                    n = 100;//不声明直接赋值,直接作为全局变量
                    n++;
               }
               myFunc();
               alert(n);
               alert(sum);//报错,函数

 

8.转义字符的问题

1. JavaScript中字符串同样需要转义符   ’  \  ’，与C#一样。
2. 想在页面输出：c:\windows\microsoft\vs.txt，这句话，需要这样写：alert(‘c:\\windows\\microsoft\\vs.txt’);不能用@，@只在C#中有效。
3. 常见转义符： \t、\n、\’、\”、\\
4. 在用正则表达式的时候也会遇到转义符问题。（*）

9.js数据类型转换

• 一、字符串 转换 数字：
  parseInt(numString[, radix])，字符串转换整数
  parseFloat(numString)，字符串转换小数
• 二、任意类型到指定类型的转换：
  将任意类型转换为数字：
  Number(object);
• 任意类型转换为字符串：
  1.String(object)
  2.对象.toString();
• 任意类型转换为Boolean：
  Boolean(object)
• NaN（Not a Number）：当将某类型转换为数字失败时，返回NaN。表示不是一个数字。NaN不等于任何值，包括它自己，需要使用isNaN(arg)函数。（NaN==NaN返回false）
• 类型转换时从第一个字符依次转换，如果出错则终止转换，比如123r4.44转换int，结果是123；
• //判断一个值是否是NaN用isNan()来判断

10.JavaScript的eval()方法（*）

• eval(codeString)
  将一段字符串的js代码，计算并执行。
  alert(eval(‘2+3’));
  eval(‘alert(100);’);
• 该方法知道即可，一般不建议使用，效率低，且不安全。
• 关于&&与||的补充，js中一种常见的用法：
  var r="a" || ""; // 判断true  || false  == true  结果"a" 
  var r=null || 15; // false || true == true 结果15
  var r="a" && 0; // true && false == true 结果 a
  var r=null && 15; // false && true == true 结果15
  var r=100 && 'hello'; // true && true = true结果'hello'
  var r=100 || 'hello'; // true || true = true结果 100
• 见备注1.
  如果必须使用eval,则用new Function()来代替eval()

10.函数的声明*
     function add(i1, i2){
               return i1+i2;
          }
     int add(int i1,int i2) //C#中的写法
     最好把声明放在前面,效率比较高
     alert(add(1,4));
     在js中不存在函数必须有返回值,如果没有就返回undefined

11.匿名函数
     避免函数名冲突的问题

1. 匿名函数的意思就是指：将函数定义语句当做一个表达式来处理。既然是表达式，则可以直接赋值，出现在小括号中等等。
2. 第一种写法：
   var fn = function (x, y) { return x + y; };（不要忘记分号）
   调用：alert(fn(10,20));  应用之一：设置事件处理程序。
3. 第二种写法：
   var result = (function (x, y) { return x + y; })(10, 20);
   alert(result);
   这种写法表示定义了一个匿名函数，立即调用。
4. 第三种写法（动态函数）：
   var fn = new Function("x", "y", "z", "var sum=x+y+z;alert(sum);");
   或：var fn = new Function("x,y,z", "var sum=x+y+z;alert(sum);");
   调用：fn(10, 20, 30); 

12.js函数不能重载：arguments对象

• JavaScript中没有方法重载的概念。
• 观察备注1中代码，说出执行结果及理由。
• 既然函数没有重载，那么如何实现类似C#中函数重载的功能？
  add(10,20)
  add(10,20,30);
  add(10,20,30,40);
  add(10,20,30,40,......);
• 要想实现以上n种调用方式都可以被正确执行该怎么办？
• 一、通过arguments对象可以判断用户在调用函数时，是否传递了参数，以及传递了几个参数。
• 二、虽然可以通过arguments对象获取参数，但在实际编程当中还是建议编写“命名参数”，增强程序可读性。
• 三、通过arguments对象获取参数的方式类似于C#中的params关键字效果。

13.事件

     在超链接的点击里执行JavaScript: <a href="javascript:alert('hello')">点点</a>  <!--交给javascript引擎处理-->
     当按钮被点击执行javaScript
     <input type="button" onclick="alert('99')" value="久久"/>    
     只有超链接的href中的JavaScript中才需要加"javascript",因为它不是事件,而是把"javascript:"当成"http:","ftp:","thunder:","ed2k:"一样的网络协议,交给js引擎处理

14.函数定义与变量声明的“预解析”功能？？？

     在程序执行之前，会先进行函数的预解析，先将函数定义定下来。

          var x = 1, y = 0, z = 0;

function add(n) { n = n + 1; return n }

y = add(x);// 这里调用的是第二个函数定义，因为预先解析

function add(n) { n = n + 3; return n; }

z = add(x);

alert(y + '......' + z); //执行结果4  ...................  4

15.“函数”也是“对象”

 

16.Array对象*
     js中的Arry对象就是数组,首先是一个动态数组,而且是一个像c#中的数组,arryList,Hashtable等的超强综合体
   var names = new Array();

    names[0] = "tom";

    names[1] = "jerry";

    names[2] = 'lily';

    names[3] = 123;

    names[3] += 1;

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

        alert(names[i]);

    }

  无需预先定制大小,动态,类型也是动态的

     var arr=['2003','China','Lili']; 推荐这么写

14.Js中的Dictionary*

     js中的arry是一个宝贝,不仅是一个数组,还是一个dictionary,还是一个Stack

     var dict = new Array();

        dict[ "人"] = "ren" ;

        dict[ "口"] = "kou" ;

        dict[ "手"] = "shou" ;

        alert(dict[ "口"]);

        alert(dict.口);

     for(var k in dict) { //js中的foreach语法,遍历主键

            alert(k);

        }    

     结果是遍历了,人,口,手

     数组用法只是一个dictionary的用法的一个特例,取出的是主键

     自己:感觉投机取巧一点,可以alert(dic[k]);这样就可以遍历全部了

15.Array和Dictionary的简化声明*

     var arr = [3, 5, 6, 7, 8]; //普通数组初始化

        var arr1 = { "tom" : 30, "lily": 20, 'sayHi' : function(){ alert('Hello')!}}; //dictionary

        alert(arr1[ "lily"]);

     arr1.sayHi();

16.数组,for,以及其他

     //获得对象所有的成员,为什么可以获得呢?对象的成员就是以对象的key的形式出现的

        for (var e in document) {

            alert(e);

        }

 

     var p1 = new Person();

        p1.Age = 10;

        p1.Name = "df";

        p1.SayHello = function(){alert("dgf" );}; //外部动态生成对象

        for (var e in p1) { //遍历所有对象,成功出现Name,Age,Hello,SayHello

        alert(e);

        }

17. String字符串对象

• length属性：获取字符串的字符个数。（无论中文字符还是英文字符都算1个字符。）
  
• charAt(index)方法：获取指定索引位置的字符。（索引从0开始）
  
• indexOf(‘字符串’,startIndex)方法：获取指定字符串第一次出现的位置。startIndex表示从第几个开始搜索。
  
• split(‘分隔符’,limit);//根据分隔符将一个字符串返回为一个数组。limit表示要返回的数组的最大长度（可自定义）。多个分隔符使用正则表达式：var msg = 'a★b★c☆d☆e#f';var vals = msg.split(/☆|★|#/);alert(vals);
  
• substr(startIndex,len)//从startIndex开始，截取len个字符。1970.1.1 
  
• substring(startIndex,stopIndex)//从startIndex开始，截取到stopIndex位置（不包括stopIndex所在的字符）。
  
• toUpperCase()//转换大写、toLowerCase();//转换小写
  
• match()、replace()、search()方法，正则表达式相关（在JS Dom课程里讲）。
  

15.js的面向对象*
     js中没有类的语法,使用函数闭包(closure)模拟出来的,下面讲解的还是用c#中的类,构造函数的概念,js中的String,Date
     <script type="text/javascript">

        function Person(name, age) {//声明一个函数,来模拟类

            this.Name = name; //this什么含义,动态对象,动态增加的属性

            this.Age = age;  

            this.Hello = function () {

                alert( this.Name);

            }

        }

        var p1 = new Person("tom", 30);

        //var p1 = Person('tom',30); //不要丢了new,否则返回undefined

        p1.Gender = "男"; //也可以在外面增加动态属性,甚至可以动态加方法

        p1.Hello();

    </script>

 

             function Person(name, age) {

            this .Name = name;

            var userAge = age;

            this .SayHi = function () {

                alert( "你好，我叫" + this.Name);

            }

            this .getUserAge = function () {

                return userAge;

            }

            this .setUserAge = function (sage) {

                if (sage >= 0 && sage <= 150) {

                    userAge = sage;

                }

            }

        }

        var arr = new Array();

        arr[0] = new Person('张三' , 18);

 

        arr[0].setUserAge(50);

        arr[0].setUserAge(250);

 

        arr[0].SayHi();

 

        alert(arr[0].getUserAge());

    必须声明类名,function

     对象自变量

      //=====================类对象自变量

        var p = {

            'userName': '低调' ,

            userAge: 19,

            sayHi: function () {

                alert( this.userName + '=========' + this.userAge);

            }

        }

 

        p.sayHi();

 

     

16.函数对象中的prototype属性：原型

• “prototype”的中文解释：原型, 雏形, 蓝本。
• 强调：
• 一、prototype是“函数对象”的属性。（回忆“函数对象”其他成员）
• 二、通过该属性可以实现类似C#中的“扩展方法的功能”。
  为Person、String分别添加扩展方法。
  解释为什么可以这样做？（画图）
• 三、定义在prototpye中的成员是所有对象共享的。所以一般将方法定义在prototype中，而属性则定义在“构造函数”中。
• 四、通过该属性可以实现js中的继承。
  提示：不要为“内置对象”随便添加新成员。防止混乱，可以对自定义对象通过该方式来添加新成员。

         function Student(name,age) { //第一步定义“类”

            this.Name = name;

            this.Age = age;

        }

        Student.prototype.sayHi = function () {//第二步定义扩展属性或方法

            alert( this.Name+'===========' +this.Age);

        };

        var s =new Student('张三',18); //第三步调用

        s.sayHi();

 

17.JavaScript中的“继承”

• js中的继承都是通过prototype实现的，所以一般叫做：“原型继承”。
  注意：prototype属性只有函数对象才有（就像call()、apply()函数一样），其他对象只有__proto__属性，没有prototype.
  
• 一、创建“Person”、“Student”实现继承。（注意区别“类”继承，这里可以暂时理解为“对象继承”）
  
• 二、通过画图说明继承原理。
  
• 三、举例：“子对象”继承后重写“父对象”的方法。
  
• 四、通过“对象字面量”的方式创建的对象，该对象的__proto__引用的是Object.prototype。（obj.__proto__===Object.prototype），换句话说通过“对象字面量”的方式创建的对象直接继承自Object对象。
  
• 五、任何类型都直接或简介继承自Object。
  

 

18.正则表达式

• 1.正则表达式
       var regexObj = /\d+/;
  2.提取第一个 exec()方法
       var result = regexObj.exec(msg);
• 全局模式匹配字符串 /\d+/g
  反复调用exec()就能获得了不同
  遍历while(result = regexObj.exec(msg)){}
• bool regexObj.test()相当于isMatch方法     
  当正则表达式中有了小括号,则返回的就是一个数组
• 正则的替换
  msg = '张三13856647815李四13856644565王五11256623835'
  分组msg = msg.replace(regex,'$1****$3')
• match方法
  match直接放回数组var arr = msg.match(/\d+/g);

19.压缩

     使用工具,需要安装java工具

     java -jar compiler.jar --js hello.js --js_output_file helloc.js

20.移动字节

                 function moveSelected(selet, seletD, opts) {

                for (var i = opts.length-1 ; i >=0 ; i--) {
                    if (opts[i].selected) {
                        seletD.appendChild(opts[i]);
                    }
                }
            }

 

21.能力检测-事件对象的使用方式

     //动态

     document.getElementById('dv').onmousemove = function(e){

          var etv = window.event || e;

          document.title = etv.clientX+','+etv.clientY;

     }

     

     //手动

     <div onmouse="MyFunc(event);"></div>     

22.声明全局变量的问题

     声明全局变量的时候,不要直接声明,这样大量的变量注册在window上.

     正确的方式是: 把全局变量放到命名空间下

     var itcast = {};

     itcast.chuan = {};

     itcast.chuan.heima = {};

     itcast.chuan.heima.name = '张三';

23.文档碎片  

     在内存中创建一个文档碎片,当完成所有的动态增加,然后把文档碎片给相对的对象.

     优点:在频繁操作页面的时候,这样可以减少对文档对象的操作.

浏览器测试性能

     使用探查器 profiler

 

 

闭包

事件比较常用，在项目中比较实用

 

 

 

12.Arry练习

     function getMax(arr) {

            var max = arr[0];

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

                if (arr[i] > max) {

                    max = arr[i];

                }

            }

            return max;

        }

        var arr1 = new Array();

        arr1[0] = 20;

        arr1[1] = 10;

        arr1[2] = 30;

        alert(getMax(arr1));

13.练习

     //矩阵翻转

        function TurnArry(a) {

            var temp;

            for (var i = 0; i < a.length / 2; i++) {

                temp = a[i];

                a[i] = a[a.length - i - 1];

                a[a.length - i - 1] = temp;

            }

        }

        var arr = new Array();

        arr[0] = "1";

        arr[1] = '2';

        arr[2] = '3**';

        TurnArry(arr);

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

            alert(arr[i]);

        }

将一个字符串数组输出为' | '分割的形式,比如"梅西|卡卡|李白", arr1.jion('|');将数组分割符连接成一个字符串

     //我的join

        function myjoin(arr) {

            if (arr.length <= 0) {

                return '' ;

            }

            var s = arr[0];

            for (var i = 1; i < arr.length; i++) {

                s += '|' + arr[i];

            }

            return s;

        }

        var arr = new Array();

        arr[0] = "1";

        arr[1] = '2';

        arr[2] = '3**';

        alert(myjoin(arr));