资讯专栏INFORMATION COLUMN

《JavaScript 权威指南》读书笔记 1 - 简介

sydMobile / 1201人阅读

摘要:原文第一章主要介绍的大概情况基本语法。通过和来引用对象属性或数组元素的值就构成一个表达式。

原文:https://keelii.github.io/2016/06/16/javascript-definitive-guide-note-0/

第一章 主要介绍 JavaScript 的大概情况、基本语法。之前没有 JavaScript 基础的看不懂也没关系,后续章节会有进一步的详细说明,我会通读一遍 《JavaScript 权威指南》,然后根据个人的理解整理出来我认为重要的核心概念,同时我也会参考原版英文版 JavaScript The Definitive Guide,取一些关键性、重要的单词做补充

中文排版指南遵守 中文文案排版指北,欢迎批评批正

JavaScript 简介

JavaScript 是面向 web 的编程语言,是一门 高阶的(high-level)、动态的(dynamic)、弱类型的(untyped)解释型(interpreted)编程语言,适合面向对象(oop)和函数式的(functional)编程风格。JavaScript 语法源自 Java 和 C,一等函数(first-class function)来自于 Scheme,它的基于原型继承来自于 Self

JavaScript 的版本

JavaScript 语言规范由 ECMA 国际发布,版本号一般叫做 ECMAScript x,如:ECMAScript 3, ECMAScript 5, ECMAScript 6,简称 ES x

Mozilla 发布的 JavaScript 版本一般叫做 JavaScript x.x,如:JavaScript 1.3, JavaScript 1.5

Micorsoft 发布的 JavaScript 版本一般叫做 JScript

可以这么说 「Mozilla 和 Micorsoft 开发的浏览器中 JavaScript内核一般都实现了某个 ECMAScript 版本的规范」

JavaScript 语言核心有很多 API,比如:针对字符串、数组、正则、日期。但这些通常不包括输入输出 API(类似网络、存储、图形相关的特性),输入输出 API 一般是由 JavaScript 的宿主环境(host environment)提供的,通常是浏览器

JavaScript 语言核心 变量/赋值

快速预览下 JavaScript 变量的用法

// 双斜线之后内容是单行注释
/* 这是多行注释 */

// 变更是表示值的一个符号名字,通过 var 关键字声明
var x;              // 声明一个变量 x

// 值可以通过等号赋值给变量
x = 0               // 现在变量 x 的值为 0
x                   // => 0 通过变量获取其值

// JavaScript 支持多种数据类型
x = 1;              // 数字
x = 0.01;           // 整数和实数都是数字(number)类型
x = "hello world"   // 字符串
x = "JavaScript";   // ...
x = true;           // 布尔值
x = false;          // ...
x = null;           // 是一个特殊的值,意思是「空」
x = undefined;      // 和 null 非常累似
对象/数组

JavaScript 中两个非常重要的数据类型是对象和数组

// 对象是名/值对的集合,或字符串到值映射的集合
var book = {                // 对象由花括号括起来
    topic: "JavaScript",    // book 对象的属性 topic 的值是 "JavaScript"
    fat: true
};

// 通过「.」或「[]」来访问对象属性
book.topic                  // => "JavaScript"
book.["fat"]                // => true
book.author = "Flanagan"    // 通过赋值给 book 对象创建一个新属性 author

// JavaScript 数组
var primes = [2, 3, 5, 7];
primes[0]                   // => 2 通过数组下标访问第一个元素
primes.length               // => 4 数组中元素的个数
primes[4] = 9               // => 9 添加新元素
primes[6] = 11              // => 11 此时数组变成 [2, 3, 5, 7, 9, undefined, 11], 长度也变为 7

// 对象数组
var points = [
    { x: 0, y: 0 },
    { x: 1, y: 1 }
];

// 数组对象
var data = {
    listA: [1, 3, 5],
    listB: [2, 4, 6]
};
表达式/运算符

通过方括号定义数组元素和通过花括号定义对象属性名和值的语法称为 初始化表达式(initializer expression),表达式是 JavaScript 中的一个短语,这个短语可以通过运算得出一个值。通过「.」和「[]」来引用对象属性或数组元素的值就构成一个表达式。上面的代码中注释中箭头(=>)后的值就是表达式的运算结果

JavaScript 中最常见的表达式写法就是像下面代码一样使用运算符(operator),运算符作用于操作数,生成一个新的值

// 最常见的是算术运算符
3 + 2                     // => 5 加法
3 - 2                     // => 1 减法
3 * 2                     // => 6 乘法
3 / 2                     // => 1.5 除法
points[1].x - points[0].x // => 1 复杂的操作数运算
"3" + "2"                 // => "32" 字符串连接

                          // 运算符简写形式
var count = 0;
count++;                  // 自增1
count--;                  // 自减1
count += 2;               // 自加2, 相当于 count = count + 2
count *= 3;               // ...
count                     // => 6 变量名本身也是表达式

var x = 2, y = 3
x == y                    // => false
x != y                    // => true
x < y                     // => true
x <= y                    // => true
x == y                    // => false
"two" == "three"          // => false
"two" > "three"           // => true "tw" 在字母表中的索引大于 "th"
false == (x > y)          // => true

                          // 逻辑运算符
(x == 2) && (y == 3)      // true
(x > 2) && (y < 3)        // false
!(x == y)                 // true

如果 JavaScript 中的「短语」是表达式,那么整个句子就称做 语句(statement),以分号结束的行都是一条语句。语句和表达式有很多共同之处

粗略了讲,表达式仅仅计算出一个值并不进行其它操作,不会改变程序的运行状态,而语句并不包含一个值(或者说它包含的值我们并不关心),但它们改变了程序运行状态

函数

函数是带有名称(named)和参数的 JavaScript 代码片段,可以一次定义多次调用

function plus1(x) {        // 定义了一个名为 plus1 的函数,带有参数 x
    return x + 1;          // 返回一个比传入参数大 1 的数值
}                          // 函数代码块是由花括号包裹起来的部分
plus1(3)                   // => 4 函数调用结果为 3+1

var square = function(x) { // 函数是一种值,可以赋值给变量
    return x * x;
};

square(plus1(3))           // => 16 在一个表达式中调用两个函数

当函数和对象合写在一起时,当函数就变成了「方法」(method):

// 当函数赋值给对象的属性,我们称为「方法」,所有 JavaScript 对象都含有方法
var a = [];             // 创建一个空数组
a.push(1, 2, 3);        // 调用数组的添加元素方法
a.reverse();            // 调用数组的次序反转方法

// 自定义方法
points.dist = function() {
    var p1 = this[0];
    var p2 = this[1];
    var a = p2.x - p1.x;
    var b = p2.y - p1.y;
    return Math.sqrt(a*a + b*b) // 勾股定理,用 Math.sqrt 来计算平方根
}
points.dist();                  // => 求得两个点之间的距离
面向对象

JavaScript 中的面向对象特性和传统语言的很大的区别,下面展示一个类用来表示 2D 平面中的几何点,这个类实例化后的对象有一个名为 r() 的方法,可以计算该点到原点的距离:

function Point(x, y) {
    this.x = x;
    this.y = y;
}

// 通过给构造函数的 prototype 对象赋值,来给 Point 对象定义方法
Point.prototype.r = function() {
    return Math.sqrt(this.x * this.x + this.y * this.y)
};

// 使用 new 关键字和构造函数来创建一个实例 p
var p = new Point(1, 1);

// Point 的实例对象 p(以及所有 Point 的实例对象)继承了方法 r()
p.r()               // => 1.414...
客户端的 JavaScript 嵌入到 HTML 中的 JavaScript

JavaScript 代码可以通过

正常 HTML 段落

使用 JavaScript 操作 DOM

JavaScript 可以通过浏览器提供的 DOM API 来操作 HTML 元素

// 调用 debug 传入字符串,JavaScript 会动态创建一个 HTML 节点并字符串内容显示其中
function debug(msg) {
    var log = document.getElementById("debuglog");

    if (!log) {
        log = document.createElement("div");
        log.id = "debuglog";
        log.innerHTML = "

Debug Log

"; document.body.appendChild(log); } var pre = document.createElement("pre"); var text = document.createTextNode(msg); pre.appendChild(text); log.appendChild(pre); } debug("this is debug message");
使用 JavaScript 操作 CSS 样式

JavaScript 可以通过浏览器提供的 DOM API 来操作 HTML 元素,从而影响 CSS 样式

// 设置元素的 CSS 属性 display/visiblity
function hide(el, reflow) {
    if (reflow) {
        el.style.display = "none";    // 隐藏元素
    } else {
        el.style.visibility = "hide"; // 隐藏元素,但元素仍然占空间
    }
}
// 设置 HTML 元素的 class 属性,class 属性可以是多个(空格分割),如:
function highlight(e) { if (!e.className) { e.className = "hilite"; } else { e.className += " hilite"; } }
使用 JavaScript 处理事件

JavaScript 通过注册事件函数来定义文档/用户的行为,比如:点击,鼠标 hover 等

给 HTML 元素添加事件处理程序的一种方法是直接给 HTML 元素添加行内的 on[event name],比如给按钮绑定点击事件



Hello


World

另外一种方法是调用元素的 添加事件处理函数,通常是 addEventListener 或 attachEvent(IE专用)

// 注册 onload 事件,效果和在 HTML 上写 onload 是一样的
// 不过只有部分 HTML 元素支持,比如: img 标签的 onload
window.onload = function() {
    var images = document.getElementsByTagName("img");

    for (var i = 0, l = images.length; i < l; i++) {
        var image = images[i];
        if ( image.addEventListener )
            image.addEventListener("click", hide, false);
        else
            image.attachEvent("onclick", hide);
    }

    function hide(event) { event.target.style.visibility = "hidden"; }
}
使用 jQuery 库

使用 jQuery 类库会使 DOM 操作、事件绑定等操作非常方便,而且不用担心浏览器兼容问题(JavaScript api 层面的兼容)

function debug(msg) {
    var $log = $("#debuglog");
    if (!$log.length) {
        log = $("

Debug Log

"); log.appendTo(document.body) } log.append($("
").text(msg))
}
引用

ECMAScript https://zh.wikipedia.org/wiki/ECMAScript

JScript https://zh.wikipedia.org/wiki/JScript

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79764.html

相关文章

  • MongoDB权威指南读书笔记(一)

    摘要:如果没有找到找到符合条件的文档,就会以这个条件和更新文档为基础新建一个新的文档。使用它可以快速方便的对文档进行更新。更新多个文档默认情况下,文档的更新只针对第一个匹配到的文档,多个条件符合时,其它文档不会改变。 what is MongoDB ? 面向文档的数据库 不再有行的概念,不再有预定义模式 易于拓展 丰富的功能 索引 聚合 特殊的集合类型 文件存储 高性能 可以一个示...

    Barrior 评论0 收藏0
  • MongoDB权威指南读书笔记(一)

    摘要:如果没有找到找到符合条件的文档,就会以这个条件和更新文档为基础新建一个新的文档。使用它可以快速方便的对文档进行更新。更新多个文档默认情况下,文档的更新只针对第一个匹配到的文档,多个条件符合时,其它文档不会改变。 what is MongoDB ? 面向文档的数据库 不再有行的概念,不再有预定义模式 易于拓展 丰富的功能 索引 聚合 特殊的集合类型 文件存储 高性能 可以一个示...

    sixleaves 评论0 收藏0
  • 读书笔记:编写高质量javascript的68个方法

    摘要:第条尽量少使用全局对象避免声明全局变量尽量声明局部变量避免对全局变量增加属性第条始终声明局部变量第条避免使用语句第条熟练使用闭包的函数值包含了比调用他们时执行所需要的代码还要更多的信息。那些在其所涵盖的作用域内跟踪变量的函数称为闭包。 书还没看完。一遍看,一遍写读书笔记。 这本书的序是JavaScript之父Brendan Eich写的,作者是JavaScript标准化委员会专家。可想...

    Vicky 评论0 收藏0
  • Effective JavaScript读书笔记(一)

    摘要:如果为假值,不传或者传入,函数都会返回但是,传入这个值是完全有可能的,所以这种判断形势是不正确的或者使用来判断也可以原始类型优于封装类型对象拥有六个原始值基本类型布尔值,数字,字符串,,和对象。 作为一个前端新人,多读书读好书,夯实基础是十分重要的,正如盖楼房一样,底层稳固了,才能越垒越高。从开始学习到现在,基础的读了红宝书《JavaScript高级程序设计》,犀牛书《JavaScri...

    zhoutao 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<