JavaScript DOM 编程艺术（第二版）学习之1-2章

最新推荐文章于 2023-11-20 00:10:19 发布

如意娘

最新推荐文章于 2023-11-20 00:10:19 发布

阅读量306

点赞数

分类专栏：前端学习文章标签：前端学习笔记 JS

本文链接：https://blog.csdn.net/qq_40243430/article/details/100552317

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

写在前面

作为JS的入门书籍，这本书对我来说比较通俗易懂。写博客主要是想记录一下书中的主要知识点，留待以后翻阅。力求言简意赅，如有不当，欢迎指出！奋斗吧，少年！

第一章 Java Script 简史

1.1 JavaScript起源

JavaScript由Netscape公司与Sun公司合作开发。
JavaScript的第一个版本，即JavaScript1.0版本,出现在1995年推出的Netscape Navigator2浏览器中。
微软在推出IE3时发布了VBScript语言，同时以JScript为名发布了JavaScript的第一个版本。
Netscape公司与Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript语言进行了标准化，出现ECMAScript语言。现在所说的JavaScript实际上就是ECMAScript.
到了1996年，JavaScript，ECMAScript，JScript已经站稳脚跟。

注意：JavaScript语言与Java语言没有任何关系，这样命名，大概是让它听出来有系出名门的感觉。事实上，Java理论上可部署在任何环境，但JavaScript却倾向于只应用在Web浏览器。

1.2 DOM

DOM是一套对文档的内容进行抽象和概念化的方法。
JavaScript的早期版本向程序员提供了查询和操控Web文档某些实际内容（主要是图像和表单）的手段。
JavaScript预先定义了“images”和“forms”等术语，可在JavaScript脚本中引用“文档中的第三个图像”和“文档中名为‘details’的表单’’：
document.images[2]
document.forms[‘details’]
这种实验性质的初级DOM称为“第0级DOM”(DOM level 0),在未形成统一标准的初期阶段，“第0级DOM”的常见用途是翻转图片和验证表单数据。

1.3 浏览器战争

1.3.1 DHTML

DHTML是"Dynamic HTML”（动态HTML）的简称。DHTML并不是一项新技术，而是描述HTML、CSS、JavaCript技术组合的术语。
DHTML背后的含义是：
利用HTML把网页标记为各种元素
利用 CSS设置元素样式和它们的显示位置
利用JavaScript实时地操控页面和改变样式

1.3.2 浏览器之间的冲突

Netscape公司的DOM使用了专有的层(layer)元素:document.layers[‘myelement’]
微软公司的DOM中必须这样引用：document.all[‘myelement’]

结果： 程序员在编写DOM脚本时必须知道脚本的运行环境，许多脚本不得不编写两次，一次IE,一次Netscape Navigator。还必须编写一些代码去探查客户端运行的浏览器。最终，DHTML变成“宣传嘘头”和“难以实现”。

1.4 制定标准

Netscape、微软和其他浏览器制造商们与W3C携手制定新的标准，并于1998年10月完成了“第一级DOM”(DOM level 1).
W3C推出的标准化DOM可以让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控。
DOM是一种API(应用编程接口)。W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态的访问和修改文档的内容、结构和样式。”
Web标准计划（简称WaSP）的小组，鼓励浏览器制造商们采用W3C制定和推荐的各项标准。
苹果公司的Safari浏览器（基于WebKit）,从一开始就坚定不移地遵循DOM标准。今天，包括Firefijx、Chrome, Opera和IE,以及一些基于WebKit的其他浏览器都对DOM有着良好的支持。

注意: WebKit是Saferi和Chrome采用的一个开源Web浏览器引擎。以WebKit和 Gecko (Firefbx 的核心)为代表的开源引擎，在促进微软的Trident (IE的核心)等专有浏览器引擎逐步向Web标准靠拢方面起到特别积极的作用。

1.5 小结

DOM把HTML/XHTML、CSS和JavaScript凝聚在一起。“DOM脚本程序设计”表示使用W3C DOM 来处理文档和样式表。DHTML只适用于Web文档，“DOM脚本程序设计”则涵盖了使用任何一种支持DOM API的程序设计语言去处理任何一种标记文档的情况。

第二章 Java Script语法

2.1 准备工作

用JavaScript编写的代码必须通过HTML/XHTML文档才能执行。
第一种方式是将JavaScript代码放到文档<head>标签的<script>标签之间

<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Example</title>
    <script>
        JavaScript goes here.
    </script>
</head>
<body>
    Mark-up goes here…
</body>
</html>

一种更好的方式是把JavaScript代码存为一个扩展名为.js的独立文件。典型的作法是在文档的<head>部分放一个<script>标签，并把它的src属性指向该文件：

<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Example</title>
    <script src="file.js"></script>
</head>
<body>
    Mark-up goes here…
</body>
</html>

但最好的做法是把<script>标签放到HTML文档的最后，</body>标签之前：

<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Example</title>
</head>
<body>
    Mark-up goes here…
    <script src="file.js"></script>
</body>
</html>

这样能使浏览器更快地加载页面（第5章将详细讨论这个问题）.

注意:前面例子中的<script>标签没有包舍传统的type="text/java script"属性。因为脚本默认的是Java Script,所以没必要指定这个属性。

程序设计语言分为解释型和编译型两大类。
Java或C++等语言需要一个编译器(compiler).编译器是一种程序，能够把用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的文件。
解释型程序设计语言不需要编译器——它们仅需要解释器。对于JavaScript语言，在互联网环境下，Web浏览器负责完成有关的解释和执行工作。浏览器中的JavaScript解释器将直接读入源代码并执行。浏览器中如果没有解释器，JavaScript代码就无法执行。
用编译型语言编写的代码有错误时，在代码编译阶段就能发现。而解释型语言代码中的错误只能等到解释器执行到有关代码时才能被发现。
编译型语言往往速度更快，可移植性更好，但它们的学习曲线也往往相当陡峭。

2.2 语法

2.2.1 语句（statement）

格式：
first statement;
second statement;

2.2.2 注释（comment）

单行注释： //自我提醒是好事
多行注释：/*自我提醒是好事*/
HTML风格的注释：<!-- 这是JavaScript中的注释（不推荐使用）
如果在HTML文档中，还需要以“–>”来结束注释。如：<!-- 这是JavaScript中的注释–>
但JavaScript不要求这样做，它会把“–>”视为注释内容的一部分。
注意：HTML允许上面这样的注释跨越多个行，但JavaScript要求这种注释的每行都必须
头加上“<!–”来作为标志。

2.2.3 变量（variable）

JavaScript允许程序员直接对变量赋值而无需事先声明。但提前声明是一种良好的编程习惯。
对变量mood和变量age做出声明：
      var mood；
      var age；
一次声明多个变量：
      var mood,age;
一次完成声明和赋值：
      var mood = “happy”；
      var age = 33；
或者：
      var mood = “happy”,age = 33;

JavaScript 中 var 和 let 和 const 关键字的区别：
https://baijiahao.baidu.com/s?id=1621787284851612777&wfr=spider&for=pc

注意：

在JavaScript语言里，变量和其他语法元素的名字都是区分字母大小写的。名字是mood的变量与名字是Mood、MOOD或mOOd的变量没有任何关系，它们不是同一个变量。
JavaScript语法不允许变量名中包含空格或标点符号（美元符号“$”例外）。错误示例：
var my mood = "happy”； .
JavaScript变量名允许包含字母、数字、美元符号和下划线（但第一个字符不允许是数字）。
为了让比较长的变量名更容易阅读，可以在变量名中的适当位置插入下划线，就像下面这样：
var my_mood = "happy”；
另一种方式是使用驼峰格式（camel case）,删除中间的空白（下划线），后面的每个新单词改
用大写字母开头：
var myMood = “happy”;
通常驼峰格式是函数名、方法名和对象属性名命名的首选格式。

2.2.4 数据类型

强类型语言（strongly typed）：必须明确类型声明的语言
弱类型语言（weakly typed）：不需要进行类型声明的语言，如JavaScript.可在任何阶段改变变量的数据类型。

字符串
字符串由零个或多个字符构成。字符包括（但不限于）字母、数字、标点符号和空格。字符
串必须包在引号里，单引号或双引号都可以。下面这两条语句含义完全相同：
      var mood = ‘happy’;
      var mood = “happy”;
如果字符串包含双引号，就把整个字符串放在单引号里；
如果字符串包含单引号，就把整个字符串放在双引号里：
      var mood = “don’t ask”;
同种符号相互包含,需要进行转义（escaping）：
      var mood = ‘don’t ask’;
      var height = “about 5’10” tall";
数值
支持整数，浮点数，负数。
布尔值
只有两个可选值true或者是false

2.2.5 数组

字符串、数值和布尔值都是标量（scalar）。如果某个变量是标量，它在任意时刻就只能有一个值。如果想用一个变量来存储一组值，就需要使用数组（array）。
       var names = new Array();
       var names =new Array(4);
       var names = new Array(“A”,“B”,“C”,“D”);
       var names = [“A”,“B”,“C”,“D”];
       var names = [1,2,3,4];
       var names = [“A”,1,“C”,true];
数组元素可以是变量：
       var man = “John”;
       names[0] = man;
数组元素可以是另一个数组的元素：
       var ages = [18,19,20,21];
       names[0] = ages[1];
数组元素可以是另一个数组：
       var zs = [“张”,19,“未婚”];
       var group = [];
       group[0] = zs;

关联数组(不推荐使用）：
在填充数组时为每个新元素明确地给出下标，不必局限于使用数字，可以使用字符串。
       var person = Array();
       person[“name”] = “张三”;
       person[“age”] = 19;
       person[“married”] = false;
在创建关联数组时，创建的是Array对象的属性。在JavaScript中，所有变量实际上都是某种类型的对象。理想情况下，不应该修改Array对象的属性，而应该使用通用对象（Object）。

2.2.6 对象

与数组类似，对象也是使用一个名字表示一组值。对象的每个值都是对象的一个属性。例如,前一节的person数组也可以创建成下面这个对象：
       var person = Array();
       person.name = “张三”;
       person.age = 19;
       person.married = false;
       var person = {name:“张三”，age:19, married:false};
对象的属性可以是其他对象。

2.3 操作

算数操作符：+ - * / ++ – +=
+号用于字符串，对字符串进行拼接。这种拼接也可以通过变量来完成。
当把字符串和数值拼接在一起的时候，数值被自动转换为字符串。

2.4 条件语句

if(条件){
条件为真时的操作
}else{
条件为假时的操作
}

2.4.1 比较操作符

比较操作符：> >= < <= == ！= === ！==
注意：赋值运算并非总是返回真值。

if(a = false){
        alert("本姑娘天生丽质!")
}else{
        alert("本姑娘闭月羞花!")  //弹出此语句
}

“== ”操作符认为空字符串与false的含义相同，“===”操作符会进行严格比较，不仅会比较值，而且会比较变量的类型，“！==”同理。

2.4.2 逻辑操作符

逻辑操作符： && || ！

2.5 循环语句

1.while循环
  while（condition）{
      statements；
  }
while循环内部必须发生一些会影响循环控制条件的事情。

2.do … while循环
do{
      statements；
  }  while（condition）
包含在花括号里的语句至少要执行一次。

3. for循环
for循环是while循环的一种变体,它的循环控制结构更加清晰。
initialize;
while(condition){
      statements;
      increment;
}

for(initial condition; test condition; alter condition){
      statements；
  }

2.6 函数

语法
function name(arguments){
statements;
}
命名变量：用下划线分隔单词
命名函数：把从第二个单词开始的首字母大写（驼峰命名法）

变量的作用域
全局变量：可在脚本中的任何位置被引用
局部变量：只存在于声明它的那个函数的内部
在函数中使用关键字var，将变量改为局部变量。

2.7 对象

对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问–属性和方法。

属性是隶属于某个特定对象的变量。
方法是只有某个特定对象才能调用的函数。
创建对象实例：var jeremy = new Person;

内建对象
Array对象、Math对象、Date对象
Math.round(x)：舍入为一个与之最接近的整数。
Date对象的getDay()方法：返回一周中的某一天（0-6），0代表星期日，1代表星期一。

宿主对象（host object）
宿主对象是由浏览器提供的预定义对象,包括Form,Image和Element。
另一种宿主对象也能用来获得网页上的任何一个元素的信息，它就是document。

如意娘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM 编程艺术（第二版）学习之1-2章

JavaScript DOM 编程艺术（第二版）学习之1-3章写在前面第一章 Java Script 简史第二章 Java Script语法第三章 DOM合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特...
复制链接

扫一扫