标签分类
当前位置:首页 > 程序设计电子书 > JavaScript电子书网盘下载
精通JavaScript 精通JavaScript
qq_38220

qq_38220 提供上传

资源
21
粉丝
33
喜欢
158
评论
15

    精通JavaScript PDF 高清第2版

    JavaScript电子书
    • 发布时间:

    给大家带来的一篇关于JavaScript相关的电子书资源,介绍了关于精通、JavaScript、JS方面的内容,本书是由人民邮电出版社出版,格式为PDF,资源大小33.5 MB,陈贤安编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:8.7,更多相关的学习资源可以参阅 程序设计电子书、等栏目。

  • 精通JavaScript PDF 下载
  • 下载地址:https://pan.baidu.com/s/1zRl3i_To65UUJ_VZajgj_g
  • 分享码:qwh1
  • 精通JavaScript PDF

    精通JavaScript(第2版)是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技巧以及未来趋势,辅以诸多代码示例,条理清楚、分析到位。本书展示了更新颖、更巧妙、更有深度的JavaScript技术,同时理清了JavaScript的发展脉络,既能磨炼技能,又可开拓视野。

    目录

    • 第1章 专业JavaScript技术  1
    • 第2章 特性、函数和对象  8
    • 第3章 创建可重用代码  23
    • 第4章 JavaScript代码调试  39
    • 第5章 文档对象模型  48
    • 第6章 事件  71
    • 第7章 JavaScript与表单验证  92
    • 第8章 Ajax入门  103
    • 第9章 Web生产工具  112
    • 第10章 AngularJS与测试  120
    • 第11章 JavaScript的未来  135

    读书笔记

    JavaScript的面向对象编程基础

    重新认识面向对象
    为了说明 JavaScript 是一门彻底的面向对象的语言,首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念:

    1. 一切事物皆对象
    2. 对象具有封装和继承特性
    3. 对象与对象之间使用消息通信,各自存在信息隐藏

    以这三点做为依据,C++ 是半面向对象半面向过程语言,因为,虽然他实现了类的封装、继承和多态,但存在非对象性质的全局函数和变量。Java、C# 是完全的面向对象语言,它们通过类的形式组织函数和变量,使之不能脱离对象存在。但这里函数本身是一个过程,只是依附在某个类上。

    然而,面向对象仅仅是一个概念或者编程思想而已,它不应该依赖于某个语言存在。比如 Java 采用面向对象思想构造其语言,它实现了类、继承、派生、多态、接口等机制。但是这些机制,只是实现面向对象编程的一种手段,而非必须。换言之,一门语言可以根据其自身特性选择合适的方式来实现面向对象。所以,由于大多数程序员首先学习或者使用的是类似 Java、C++ 等高级编译型语言(Java 虽然是半编译半解释,但一般做为编译型来讲解),因而先入为主地接受了“类”这个面向对象实现方式,从而在学习脚本语言的时候,习惯性地用类式面向对象语言中的概念来判断该语言是否是面向对象语言,或者是否具备面向对象特性。这也是阻碍程序员深入学习并掌握 JavaScript 的重要原因之一。
    实际上,JavaScript 语言是通过一种叫做 原型(prototype)的方式来实现面向对象编程的。下面就来讨论 基于类的(class-based)面向对象和 基于原型的 (prototype-based) 面向对象这两种方式在构造客观世界的方式上的差别。
    基于类的面向对象和基于原型的面向对象方式比较
    在基于类的面向对象方式中,对象(object)依靠 类(class)来产生。而在基于原型的面向对象方式中,对象(object)则是依靠 构造器(constructor)利用 原型(prototype)构造出来的。举个客观世界的例子来说明二种方式认知的差异。例如工厂造一辆车,一方面,工人必须参照一张工程图纸,设计规定这辆车应该如何制造。这里的工程图纸就好比是语言中的 类 (class),而车就是按照这个 类(class)制造出来的;另一方面,工人和机器 ( 相当于 constructor) 利用各种零部件如发动机,轮胎,方向盘 ( 相当于 prototype 的各个属性 ) 将汽车构造出来。
    事实上关于这两种方式谁更为彻底地表达了面向对象的思想,目前尚有争论。但笔者认为原型式面向对象是一种更为彻底的面向对象方式,理由如下:
    首先,客观世界中的对象的产生都是其它实物对象构造的结果,而抽象的“图纸”是不能产生“汽车”的,也就是说,类是一个抽象概念而并非实体,而对象的产生是一个实体的产生;
    其次,按照一切事物皆对象这个最基本的面向对象的法则来看,类 (class) 本身并不是一个对象,然而原型方式中的构造器 (constructor) 和原型 (prototype) 本身也是其他对象通过原型方式构造出来的对象。
    再次,在类式面向对象语言中,对象的状态 (state) 由对象实例 (instance) 所持有,对象的行为方法 (method) 则由声明该对象的类所持有,并且只有对象的结构和方法能够被继承;而在原型式面向对象语言中,对象的行为、状态都属于对象本身,并且能够一起被继承(参考资源),这也更贴近客观实际。
    最后,类式面向对象语言比如 Java,为了弥补无法使用面向过程语言中全局函数和变量的不便,允许在类中声明静态 (static) 属性和静态方法。而实际上,客观世界不存在所谓静态概念,因为一切事物皆对象!而在原型式面向对象语言中,除内建对象 (build-in object) 外,不允许全局对象、方法或者属性的存在,也没有静态概念。所有语言元素 (primitive) 必须依赖对象存在。但由于函数式语言的特点,语言元素所依赖的对象是随着运行时 (runtime) 上下文 (context) 变化而变化的,具体体现在 this 指针的变化。正是这种特点更贴近 “万物皆有所属,宇宙乃万物生存之根本”的自然观点。


    JavaScript 面向对象基础知识

    虽然 JavaScript 本身是没有类的概念,但它仍然有面向对象的特性,虽然和一般常见的面向对象语言有所差异。

    简单的创建一个对象的方法如下:

    function myObject() {
    
    };
    
    JavaScript 中创建对象的方法一般来说有两种:函数构造法和字面量法,上面这种属函数构造法。下面是一个字面量法的例子:
    
    var myObject = {
    
    };
    
    

    如果仅仅需要一个对象,而不需要对象的其它实例的情况下,推荐用字面量法。如果需要对象的多个实例,则推荐函数构造法。
    定义属性和方法

    函数构造法:

    function myObject() {
     this.iAm = 'an object';
    
     this.whatAmI = function() {
     console.log('I am ' + this.iAm);
     };
    };
    
    

    字面量法:

    var myObject = {
     iAm : 'an object',
    
     whatAmI : function() {
     console.log('I am ' + this.iAm);
     }
    };
    
    

    以上两种方法创建的对象中,都有一个名为 “iAm” 的属性,还有一个名为 “whatAmI” 的方法。属性是对象中的变量,方法则是对象中的函数。

    如何获取属性及调用方法:

    var w = myObject.iAm;
    
    myObject.whatAmI();
    
    

    调用方法的时候后面一定要加上括号,如果不加括号,那么它只是返回方法的引用而已。
    两种创建对象方法的区别

    •     函数构造法里面定义属性和方法的时候,都要用前缀 this,字面量法不需要。
    •     函数构造法给属性和方法赋值的时候用的是 =,字面量法用的是 : 。
    •     如果有多个属性或方法,函数构造法里面用 ; 隔开,字面量法用 , 隔开。

    对于字面量法创建的对象,可以直接用对象的引用调用其属性或方法:

    myObject.whatAmI();
    
    

    而对于函数构造法而言,需要创建对象的实例,才能调用其属性或方法:

    var myNewObject = new myObject();
    myNewObject.whatAmI();
    
    

    使用构造函数

    现在再来回归一下之前的函数构造法:

    function myObject() {
     this.iAm = 'an object';
     this.whatAmI = function() {
     console.log('I am ' + this.iAm);
     };
    };
    
    

    其实它看起来就是个函数,既然是函数,能不能给它传参数呢?将代码再稍作修改:

    function myObject(what) {
     this.iAm = what;
     this.whatAmI = function(language) {
     console.log('I am ' + this.iAm + ' of the ' + language + ' language');
     };
    };
    
    

    再将对象实例化,并传入参数:

    var myNewObject = new myObject('an object');
    myNewObject.whatAmI('JavaScript');
    
    

    程序最终输出 I am an object of the JavaScript language。
    两种创建对象的方法,我该用哪种?

    对于字面量方法而言,因为它不需要实例化,所以如果修改了某对象的值,那么这个对象的值就永久地被修改了,其它任何地方再访问,都是修改后的值。而对于函数构造法而言,修改值的时候是修改其实例的值,它可以实例化 N 个对象出来,每个对象都可以拥有自己不同的值,而且互不干扰。比较以下几段代码。

    先看字面量法:

    var myObjectLiteral = {
     myProperty : 'this is a property'
    };
    
    console.log(myObjectLiteral.myProperty); // log 'this is a property'
    
    myObjectLiteral.myProperty = 'this is a new property';
    
    console.log(myObjectLiteral.myProperty); // log 'this is a new property'
    
    

    即便创建了一个新的变量指向这个对象,结果还是一样的:

    var myObjectLiteral = {
     myProperty : 'this is a property'
    };
    
    console.log(myObjectLiteral.myProperty); // log 'this is a property'
    
    var sameObject = myObjectLiteral;
    
    myObjectLiteral.myProperty = 'this is a new property';
    
    console.log(sameObject.myProperty); // log 'this is a new property'
    
    

    再看函数构造法:

    // 用函数构造法
    var myObjectConstructor = function() {
       this.myProperty = 'this is a property'
    };
    
    // 实例化一个对象
    var constructorOne = new myObjectConstructor();
    
    // 实例化第二个对象
    var constructorTwo = new myObjectConstructor();
    
    // 输出
    console.log(constructorOne.myProperty); // log 'this is a property'
    
    // 输出
    console.log(constructorTwo.myProperty); // log 'this is a property'
    
    和预期一样,两个对象的属性值是一样的。如果修个其中一个对象的值呢?
    
    // 用函数构造法
    var myObjectConstructor = function() {
     this.myProperty = 'this is a property';
    };
    
    // 实例化一个对象
    var constructorOne = new myObjectConstructor();
    
    // 修改对象的属性
    constructorOne.myProperty = 'this is a new property';
    
    // 实例化第二个对象
    var constructorTwo = new myObjectConstructor();
    
    // 输出
    alert(constructorOne.myProperty); // log 'this is a new property'
    
    // 输出
    alert(constructorTwo.myProperty); // log 'this is a property'
    
    

    可以看到,用函数构造法实例化出来的不同对象,相互是独立的,可以各自拥有不同的值。所以说,到底用哪种方法来创建对象,需取决于各自实际情况。

    上一篇:数据整理实践指南  下一篇:分布式对象存储

    展开 +

    收起 -

    码小辫二维码
     ←点击下载即可登录

    JavaScript相关电子书
    学习笔记
    网友NO.609875

    JavaScript中var关键字的使用详解

    作用 声明作用;如声明个变量。 语法 var c = 1; 省略var 在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的。 script type="text/javascript" function Define() { a = 2; } function Hello() { alert(a); } /script 如代码所示,运行函数Define()后,变量a声明为全局变量。在Hello()函数中可以引用变量a。 更具体的示例 我们都知道 JavaScript 中的var关键字是用来申明变量的,但是如果不用这个关键字而直接写出变量名,然后赋值给它,JavaScript 也并不会报错,它会自动申明这个变量。难道说 JavaScript 中的var是个多余的东西吗?显然不是! 请看下面这段代码: str1 = 'Hello JavaScript!';function fun1() { str1 = 'Hello Java!';}fun1();alert(str1);// 弹出 Hello Java! 可以看到,在函数 fun1 被调用后,str1 的值在函数内被改变了。 再将上面的代码稍作修改: str1 = 'Hello JavaScript!';function fun1() { var str1 = 'Hello Java!';}fun1();alert(str1);// 弹出 Hello JavaScript! 看到没有,str1 的值并没有被函数 fun1 改变。 显然,var关键字影响了变量的作用域。 函数外部:变量不管是否用了var申明,都是全局变量。 函数内部:变量如果没有使用var关键字申明,那它就是全局变量,只有用var关键字申明了,才是局部变量。 结论 为了避免潜在的风险,务必使用var关键字来申明变……

    网友NO.107937

    JavaScript设计模式之职责链模式应用示例

    本文实例讲述了JavaScript设计模式之职责链模式。分享给大家供大家参考,具体如下: 一、职责链的定义: 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。 二、实例场景说明: 某公司对公司产品-手机进行促销活动,有以下政策:在正式购买时,已经支付过500元定金的用户会收到100元的商城优惠卷,交200元定金的用户可以收到50元的优惠卷,而之前没有支付定金的用户只能进入普通购买模式,也就是没有优惠卷,主要危险为在库存有限的情况下不一定能买到手机。 三、实例代码如下: 1、创建3中购买模式的函数对象,如下: /*** @param: orderType 表示订单类型* @param: pay 表示用户是否已经支付定金* @param: stock 表示当前用户普通购买的手机库存数量,交过定金的用户不受此限制**/var order500 = function( orderType, pay, stock ){ if( orderType === 1 pay === true) console.log('500元定金预购,得到100优惠卷'); else return 'nextSuccessor'; //不知道下一个节点是谁,反正把请求往后面传递};var order200 = function( orderType, pay, stock){ if( orderType === 2 pay === true) console.log( '200元定金预购,得到50元优惠卷' ); else return 'nextSuccessor';};var orderNormal = function(orderType, ……

    网友NO.513442

    javascript数组定义的几种方法

    1、什么是数组 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 2、关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可以无需指定数组长度 数组可以存储任何数据类型的数据(比如说一个元素保存整型,一个元素保存字符串型,这个在JS中是可以的) 创建数组的语法: var arr=[值1,值2,值3]; //隐式创建 var arr=new Array(值1,值2,值3); //直接实例化 var array=new Array(size); //创建数组并指定长度 //方法一var arr1 = [1,3,5,7,9];document.write(arr1[2] + 'br'); //方法二var arr2 = new Array(2,4,6,8,10);document.write(arr2[3] + 'br'); //方法三var arr3 = new Array(3);//固定数组长度为3arr3[0] = 1;arr3[1] = 2;arr3[2] = 3;document.write(arr3[2] + 'br'); JS中符号含义: ()表示函数执行 []表示语法模拟,表示模拟Array类的实例(=new Array()) {}表示语法模拟,表示模拟Object类的实例(=new Object()) //表示语法模拟(正则对象),表示模拟RegExp类的实例(=new RegExp()) 3、关于数组长度 数组对象.length 在js中,每一个数组对象都可以调用length属性,它表示数组对象下共有几个数组元素 示例: var row = ['zhangsan','lisi','wangwu'];doucument.write('共有'+row.length+'个人br');var length = row.length;//对数组进行遍历for (var i=0;ilength;i++){doucument.write(row[……

    网友NO.108212

    javaScript 连接打印机,打印小票的实例

    如下所示: %@ page contentType="text/html;charset=UTF-8"%%@ include file="/webpage/include/taglib.jsp"%!-- !DOCTYPE html --htmlheadmeta name="decorator" content="default" /script type="text/javascript" src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery-1.4.4.min.js"/scriptscript type="text/javascript" src="${ctxStatic}/newStyle/jsPdf.debug.js"/scriptscript type="text/javascript" src="${ctxStatic}/newStyle/html2canvas.js"/scriptscript type="text/javascript"function doPrint(){ bdhtml=window.document.body.innerHTML; sprnstr="!--startprint--"; eprnstr="!--b--"; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); window.document.body.innerHTML=prnhtml; window.print(); top.layer.closeAll(); }function closes (){ top.layer.closeAll();}function downPdf(){ document.getElementById("dayin").style.display = "none"; document.getElementById("baocun").style.display = "none"; html2canvas(document.body, { onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //pdf页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a……

    Copyright 2018-2019 xz577.com 码农之家

    版权责任说明