时间戳

首页 > 技术文章 > JavaScript基础篇和高级篇

JavaScript基础篇和高级篇

ErrStr 2016-08-13 23:52 原文

基础篇

一、组成部分：

  • ECMAScript，描述了该语javascript组成言的语法和基本对象；
  • 文档对象模型（DOM），描述处理网页内容的方法和接口；
  • 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
<script type="text/javascript">
    alert("Hello World!");
    document.write("Hello World!");
</script>

二、基本语法：

1、JavaScript引入方式：

①内部：<script type="text/javascript">...</script>写在<head></head>或者<body></body>里面；

②外部：新建js文件：myJs.js，在html文件中，<script type="text/javascript" src="myJs.js">...</script>

注：乱码问题：js文件编码设置为utf-8 或 <script type="text/javascript" src="myJs.js" charshet="utf-8">...</script>

2、JavaScript注释：

①单行：//

②多行：/* */

3、JavaScript变量：

①弱类型，统一使用var定义变量

e.g. 

var a; // 定义变量a
a = 1; // 变量a赋值
a = "a"; // 变量a赋值（随时转换变量类型）
var b = "b"; //直接定义并初始化

4、JavaScript基本数据类型

①数值，②字符串，③布尔，④Undefined，⑤Null。

5、运算符：

①== 值相等即可，②=== 值、类型都相等即可。类似：!==

③>、<等使用转移字符

6、选择与循环语句：

7、函数：function

// 声明方法f()
function f1() {
 alert("方法");
}
function f2(a,b,c) {
 alert(a+b+c);
}
function f3() {
 return 3;
}
f1() //直接调用即可
var result = f3();
alert(result);

8、break vs continue

三、操作DOM节点

1、处理DOM事件：

①<input type="button" value="确定" onclick="f()"/>

②<script>function f() {...}</script>

2、操作DOM节点：修改、增加、删除

①

<div id="parent">
    <div id="son1">
        <font id="txt">:</font>  // 容器  
        <input type="text" id="userName" value="userName"/> // 非容器
    </div>
</div>
<input type="button" value="修改" onclick="modify()"/>
<input type="button" value="增加" onclick="add()"/>
<input type="button" value="删除" onclick="remove()"/>

②

<script type="java/javascript>
    function modify() {
        document.getElementById("txt").innerHTML="用户名：";
        document.getElementById("userName").value="Jack";
}
　　function add() {
　　　　var p = document.createElement("p"); //p段落标签
　　　　var p2 = document.createElement("p2"); //p段落标签
　　　　var node = document.createTextNode("节点"); //文本节点
　　　　p.appendChild(node);
　　　　var parent = document.getElementById("parent");
　　　　var son1 = document.getElemnetById("son1");
　　　　parent.insertBefore(p, son1);
　　　　parent.appendChild(p2);
}
　　function remove() {
　　　　var parent = document.getElementById("parent");
　　　　var son1 = document.getElementById("son1");
　　　　parent.removeChild(son1);
}

</script>

 

3、修改DOM节点CSS样式：

① <p id="p1">p1</p>

②<input type="button" value="修改节点样式" onclick="modifyCSS()"/>

③<script type="text/javascript> function modifyCSS() {

　　document.getElementById("p1").style.color="red";

}</script>

四、对象

1、

①对象定义
②动态地添加属性和方法
③动态地删除属性和方法
④对象构造方法

<script type="text/javascript">
    function speak(something) {
　　　　alert(something);
}
    var p = new Object(); //基于原型定义对象
    alert(p);
    p.name = "动态添加属性";
    alert(p.name);
    p.f = speak; 
    p.f("动态添加方法");

    delete p.name; //删除属性①
    delete p.f; //删除方法①
    
    p.name = undefined; //删除属性②
    p.f = undefined; //删除方法②

    // 构造函数
    function person(name, age) {
       function speak(something) {
　　　　　　alert(something);
}
　　　　this.name = name;
       this.age = age;
       this.f = speak;
}
    var p = new person("Jack", 12);// 基于原型
    alert(p.age);
    p.f("构造函数直接定义方法");
</script>

 2、字符串对象

①字符串对象实例化方法；

     var s1 = "方法一”;

     var s2 = new String("方法二");
②字符串length属性；

     s1.length
③字符串indexOf()方法，定位字符串中指定字符首次出现的位置；

     s1.indexOf("方", 0);
④字符串replace()方法，替换字符

     s1.replace("一”,"①");

3、日期对象

①日期对象实例化                                                          var date = new Date();
②getTime()方法，返回1970 年1 月1 日至今的毫秒数。             date.getTime();
③getFullYear() 从Date 对象以四位数字返回年份。                    date.getFullYear();
④getMonth() 从Date 对象返回月份(0 ~ 11)。                        date.getMonth() + 1;
⑤getDate() 从Date 对象返回一个月中的某一天(1 ~ 31)。         date.getDate();
⑥getHours() 返回Date 对象的小时(0 ~ 23)。                        date.getHours();
⑦getMinutes() 返回Date 对象的分钟(0 ~ 59)。                     date.getMinutes();
⑧getSeconds() 返回Date 对象的秒数(0 ~ 59)。                    date.getSeconds();
⑨getDay() 从Date 对象返回一周中的某一天(0 ~ 6)。星期天=0  date.getDay();

4、数组对象

①数组的声明；

var arr1 = new Array();
var arr2 = new Array(3);
arr1[0] = "1";
arr1[1] = "2";
arr1[2] = "3";
arr1[3] = "4";
arr1[4] = "5";

arr2[0] = "1";
arr2[1] = "2"; //下标可以是字符 arr2["b"]="2";
arr2[2] = "3";

②数组的遍历；

i、for(var i=0;i<arr1.length;i++) {...}

ii、var o;

ii、for(o in arr1){}

③数组元素排序sort()方法；

    arr1.sort();
④数组元素组合成字符串join()方法；

    arr2.join("."); // 1.2.3
⑤合并数组元素concat()方法；

    arr1.concat(arr2);
⑥颠倒数组元素reverse()方法；

    arr1.reverse();

五、常用函数

1、全局函数
①全局函数不属于任何一个内置对象。
②JS 包含以下7 个全局函数，用于一些常用的功能：escape(),eval(),isNan(),isFinite(),parseFloat(),parseInt(),unescape();
③eval()方法：执行代码；

　　var str = "1+2+3+4”;

　　alert(eval(str));

2、window对象常用方法及事件

①window.alert();弹出消息框
②confirm()
③prompt()
④window.setTimeout("f()", 5000);执行一次 
⑤window.setinterval("f()", 1000);执行多次
⑥window.open();打开窗口
⑦window.onload();发生在文档全部下载完毕的时候。
    i、window.onload = function() {}
    ii、<body onload = "init()">
    ii、function init() {}
⑧window.onresize();发生在窗口大小发生变化的时候。
    i、window.onresize = function {}

3、http://www.w3school.com.cn/js/js_intro.asp

 

高级篇

一、Function对象

①Function 对象引入
　　Function 是js 的方法对象，可以用Function 实例化出任何js 方法对象；

<script type="text/javascript">
    function say(name,age) {
        alert(...);
}//方法①

    var sayFunc = new Function("name","age","alert(...)");//方法②
</script>

②用Function 创建方法对象

<script type="text/javascript">
    var sayFunc = new Function("name","age","alert(...)");
    alert(sayFunc.length); //方法属性
</script>

③Function 对象属性

④Function 对象方法

<script type="text/javascript">
    var sayFunc = new Function("name","age","alert(...)");
    alert(sayFunc.toString());
    alert(sayFunc.valueOf());
</script>

 

二、闭包

①Js 变量的作用域

<script type="text/javascript">
    var a = 22;
    function func() {
        var b = 22;//局部变量
        c = 22;//全局变量
        alert(...);
}

   func();
</script>

②从外部读取方法内部的局部变量

<script type="text/javascript">

    function func() {
        var b = 22;//私有局部变量
        function func2() { //对外公开接口
            alert(++b);
       }
       return func2;
   }

   var result = func();
   result();
</script>

 

③闭包的概念

  • 各种专业文献上的“闭包”（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
  • 由于在Javascript 语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
  • 所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
<script type="text/javascript">

    var name1 = "The Window";
    var object = {
         name3:"My object",
         getNameFunc:function() {
              var name2 = "object func";
              return function() {
                    ①return this.name1;  //this为window对象
                    ②return name2;
              };
         }
    };
    alert(object.name3);
    alert(object.getNameFunc()());
</script>

 

④闭包的用途

  • 一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

⑤闭包的使用注意点

  • 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE 中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
  • 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

三、面向对象实现

①面向对象三大特征
②JavaScript 自定义对象

<script type="text/javascript">
    // ①对象初始化器
    var marry={
        name:"marry",
        age:2,
        shout:function(){
            alert("我是："+this.name+",今年："+this.age);
        },
        action:function(){
            alert("会吃");
        }
    };
    
    alert(marry.name);
    alert(marry.age);
    marry.shout();
    marry.action();

    // ②构造函数方法
    function Dog(name,age){
        this.name=name;
        this.age=age;
        this.shout=function(){
            alert("我是："+this.name+",今年："+this.age);
        };
        this.action=function(){
            alert("会吃");
        };
    }
    
    var jack=new Dog("jack",1);
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>

 

创建对象方式：方式一，对象初始化器方式；方式二，构造函数方式；
对象属性定义：私有属性；对象属性；类属性；
对象方法定义：私有方法；对象方法；类方法；

 

<script type="text/javascript">
    function C(){ //对象方法
        this.objPro="对象属性";
        C.prototype.objPro2="对象属性2";
        var privatePro="私有属性"; //使用闭包取出
    }
    C.classPro="类属性";
    
    alert(C.classPro);
    var c=new C();
    alert(c.objPro);
    alert(c.objPro2);
</script>
<script type="text/javascript">
    function C(){
        var privateFunc=function(){
            alert("私有方法");
        }; //内部调用
        privateFunc();
        this.objFunc=function(){
            alert("对象方法");
        };
        C.prototype.objFunc2=function(){
            alert("对象方法2");
        };
    }
    C.classFunc=function(){
        alert("类方法");
    };
    
    C.classFunc();
    var c=new C();
    c.objFunc();
    c.objFunc2();
</script>

 

③JavaScript 实现封装特性
④JavaScript 实现继承特性

Apply() 实现属性和方法的继承；
Prototype 实现原型的继承；

<script type="text/javascript">
    function Animal(name,age){
        this.name=name;
        this.age=age;
        this.shout=function(){
            alert("我是："+this.name+",今年："+this.age);
        };
        this.action=function(){
            alert("会吃");
        };
    }
    
    function Dog(name,age){//属性方法
        Animal.apply(this, [name,age]);
    }
    
    var jack=new Dog("jack",1);//类型是Dog
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>
<script type="text/javascript">
    function Animal(name,age){
        this.name=name;
        this.age=age;
        this.shout=function(){
            alert("我是："+this.name+",今年："+this.age);
        };
        this.action=function(){
            alert("会吃");
        };
    }
    
    function Dog(name,age){//属性方法
        Animal.apply(this, [name,age]);
    }
        Dog.prototype = new Animal();
    
    var jack=new Dog("jack",1);//类型从Dog变成Animal
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>
<script type="text/javascript">
        // 多态模拟
    function Animal(){
        this.say=function(){
            alert("我是动物");
        };
    }
    
    function Dog(){
        this.say=function(){
            alert("我是狗");
        };
    }
    Dog.prototype=new Animal();
    
    function Cat(){
        this.say=function(){
            alert("我是猫");
        };
    }
    Cat.prototype=new Animal();
    
    function say(animal){
        if(animal instanceof Animal){//判断Animal实例
            animal.say();
        }
    }
    
    var dog=new Dog();
    var cat=new Cat();
    say(dog);
    say(cat);
</script>

 

⑤JavaScript 实现多态特性

推荐阅读