JavaScript基础篇和高级篇

半腔热情 提交于 2020-02-18 03:10:18

基础篇

一、组成部分:

  • 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 实现多态特性

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!