JavaScript学习笔记系列(一)

时间 2019-12-05

原文原文链接

一：JavaScript组成部分

JavaScript是由三个不一样部分组成的，核心(ECMAScript) 、文档对象模型(DOM)和浏览器对象模型(BOM)。html

1.ECMAScript

ECMAScript与Web浏览器没有依赖关系。只是Web浏览器只是ECMAScript实现可能的宿主环境之一，其余宿主环境包括Node和Adobe Flash。它规定了这门语言的组成部分：
1.语法
2.类型
3.关键字
4.保留字
5.操做符
6.对象编程

2.文档对象模型(DOM)

文档对象模型(Document Object Model)是针对XML但通过扩张用于HTML的应用程序编程接口(API，Application Programming Interface)。DOM把整个页面映射为一个多层次节点结构。以HTML代码为例子数组

<html>
    <head>
     <title>DOM</title>
         <body>
            <h1>DOM</h1>
              <p>Hello world</p>
      </body>
    </head>
</html>

根据 DOM，HTML 文档中的每一个成分都是一个节点。DOM 是这样规定的：整个文档是一个文档节点。每一个 HTML 标签是一个元素节点。包含在 HTML 元素中的文本是文本节点。每个 HTML 属性是一个属性节点。注释属于注释节点
每一个节点彼此都有等级关系，HTML 文档中的全部节点组成了一个文档树（或节点树）。HTML 文档中的每一个元素、属性、文本等都表明着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直处处于这棵树最低级别的全部文本节点为止。除文档节点以外的每一个节点都有父节点。
以上列代码分析，<head> 和 <body> 的父节点是 <html> 节点，文本节点 "Hello world!" 的父节点是 <p> 节点。
大部分元素节点都有子节点。比方说，<head> 节点有一个子节点：<title> 节点。<title> 节点也有一个子节点：文本节点 "DOM"。
当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1> 和 <p>是同辈，由于它们的父节点均是 <body> 节点。
节点也能够拥有后代，后代指某个节点的全部子节点，或者这些子节点的子节点，以此类推。比方说，全部的文本节点都是 <html>节点的后代，而第一个文本节点是 <head> 节点的后代。
节点也能够拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，全部的文本节点均可把 <html> 节点做为先辈节点。浏览器

2.1DOM级别

DOM1级由两个模块组成：DOM核心和DOM HTML。其中，DOM核心规定是如何映射基于基于XML的文档结构，以便简化对文档中任意部分的访问和操做，DOM HTML则在DOM核心的基础上加以扩展，添加了针对HTML文档的对象和方法。
DOM2级在DOM的基础上又扩展了鼠标和用户界面事件、范围、遍历(迭代DOM文档的方法)等细分模块，并且经过对象接口增长对CSS的支持。
DOM3级则进一步扩展了DOM，引入了以统一方式加载和保存文档方法—在DOM加载和保存模块中定义；新增了验证文档的方法—在DOM验证模块定义。cookie

3.浏览器对象模型（BOM）

开发人员能够经过BOM来控制浏览器显示的页面之外的部分。从根本上讲，BOM只处理浏览器窗口和框架；但人们习惯也把全部针对浏览器的JavaScript扩展算做BOM一部分。
1.弹出新浏览器窗口功能；
2.移动、缩放和关闭浏览器窗口的功能；
3.提供浏览器详细信息的navigatior对象；
4.提供浏览器所加载页面的详细信息的location对象；
5.提供用户显示器分辨率详细信息的scree对象
6.对cookies的支持
7.像XMLHttpRequest和IE的ActiveXObject这样的自定义对象。框架

二：在HTML中使用JavaScript

在HTML中插入JavaScript的主要方法，就是使用<script>元素。HTML4.0.1为<script>元素定义下列6个属性。
1.async:可选，表示应该当即下载脚本，但不妨碍页面中的其余操做，好比下载其余资源或等待其余脚本。只对外部脚本有效
2.charset：可选，表示经过src属性指定的代码的字符集。(不多人用)
3.defer：可选，表示脚本能够延迟到文档彻底被解析和显示以后再执行。只对外部脚本有效
4.language:已经废弃。
5.src:可选。表示包含要执行代码的外部文件。
6.type：可选，浏览器已经默认了。
通常把<script>元素放在<body>元素后面，为的是避免浏览器在呈现页面时候出现明显的延迟，也让JavaScript更好操做DOMasync

<script>
    function sayHi(){
        var i = 'wythe';
        alert("</script>");
    }
<script>

按照解析嵌入式代码规则，当浏览器遇到字符串</script>时候，就会认为那是结束的标签。而经过转义字符""解决这个问题，例如：函数

<script>
    function sayHi(){
        var i = 'wythe';
        alert("<\/script>");
    }
<script>

三：JavaScript 基本概念

3.1 区分大小写
JavaScript是区分大小写的，也就是说变量、函数、关键字和全部标识符都是区分大小写的。
所谓的标识符，就是指得是变量、函数、属性的名字，或者函数的参数。标识符能够是按照下列格式规则组合起来的一或多个字符：code

a.第一个字符必须是一个字母、下划线或一个美圆符号($);
b.其余字符能够是字母、下划线、美圆符号或数字。

3.2 注释
JavaScript支持两种注释，包括单行注释和块级注释。
单行注释以//开头，如://单行注释
多行注释则以一个斜杠和一个星号(/)开头以一个星号和一个斜杠( /)结尾。
3.3保留字和关键字
JavaScript把一些标识符拿出来做为本身的关键字。所以，不能再在程序使用这些关键字做为标识符。如break、do、instanceof、typeof、var、case、if、while、function 和for等等...
保留字虽然尚未任何特定的用途，但它们未来可能用做关键字。如：int、short、boolean、goto和byte。
3.3变量
JavaScript的变量是松散类型的，所谓松散类型就是能够用来保存任何类型的数据。换句话说，每一个变量仅仅是一个保存值的占位符而已。定义变量时候要使用var操做符，后跟变量名（标识符）：var message;初始化的过程就是给变量赋一个值,所以，能够在修改变量值同时修改值的类型。htm

var message = "hi";
message = 100 //有效不推荐

有一点必须注意，即用var操做符定义的变量将成为定义该变量的做用域的局部变量。也就是说，在函数中使用var定义一个变量，那么这个变量在函数退出后就会销毁，除非定义一个全局变量。

function test(){
  var a = 'hello,wythe';//局部变量
  b = 'hello world';//全局变量
}
test()
console.log(a)//错误，a没有定义。
console.log(b)//hello,world

3.4数据类型
JavaScript的数据类型分为两类：原始类型和对象类型。原始类型包括数字(numner)、字符串(string)、布尔值(boolean)、undefined和null。对象类型则有object,object是属性的集合，每一个属性都由名/值对(值能够是原始值，好比数字、字符串，也能够是对象)构成。
3.4.1typeof操做符
因为JavaScript是松散类型，所以须要有一种手段来检测给定变量的数据类型——typeof。对一个变量使用typeof操做符可能返回下列字符串：

"undefined"—若是这个值未定义;
"boolean"—若是这个值是布尔值;
"string"—若是这个值是字符串;
"number"—若是这个值是数值;
"object"—若是这个值是对象或null 数组也是对象，数组是一种特殊对象，表示带编号的值的有序集合
"function"—若是这个值是函数。函数是一种特殊对象，函数具备与它相关联的可执行代码的对象。经过调用函数来运行可执行代码，并返回运算结果
对于null，typeof返回的是object,那是由于null被认为是一个空对象的引用。

3.4.1 undefined类型
undefined类型只有一个值，那就是undefined。是变量的一种取值，代表值没有初始化。
3.4.2 null类型
null类型也是只有一个值，那就是null。typeof null 返回的是"object"也就是能够认为是一个特殊的对象值，含义是“非对象”。
undefined跟null都是表示值的空缺。null == undefined 会返回true 判断相等符“==” 认为二者相等。这个操做符出于比较的目的会转换其操做数。
3.4.3 number类型
JavaScript是不区分整数值和浮点数值的。最基本的字面量格式是十进制整数，除了十进制之外，还支持八位制(在严格模式下无效)或十六进制的字面值表示。浮点数值，就是该数值中必须包含一个小数点，而且小数点后面必须至少有一位数字。浮点数值的最高精度是17位小数，但在进行算术计算的时候其精确度远远不如整数。

var a = 0.1,
     b = 0.2;   
 if(a+b == 0.3){
    console.log("bingo");
 }else{
    console.log("error");//显示error
 }

所以尽可能避免这样运算。NaN,即非数值是个特殊的值，这个数值表示一个原本要返回数值的操做数未返回数值的状况。0除以0会返回NaN,正数除以0返回Infinity，负数除以0返回-Infinity。NaN与任何值都不相等，包括自身。所以JavaScript定义isNaN函数，isNaN接受一个参数，该参数能够是任何类型，函数会判断该参数是否“不是数值”。isNaN接收一个以后，会尝试把这个值转为数值。

isNaN(1); //false
    isNaN("10");//会转换为数值10，返回false
    isNaN(true);//转换为数值1，返回false
    isNaN("blue");//不能转换为数值，返回true
    isNaN("true");//不能转为数值，返回true
    isNaN("11blue");//true,不能转为数值

数值转换有3个函数能够把非数值转换为数值：Number()、parseInt()和parseFloat().第一个函数（Number）能够用于任何数据类型，而另两个函数专门把字符串转换为数值。
Number()函数的转换规则以下：

若是是布尔值true和false，则分别转换为1和0
若是是数字值，则返回该数值
若是是null值，则返回0
若是是undefined，则返回NaN
若是是字符串，若是字符串只包含数字的话，则将其转为十进制数值，即“1”转为1，“123”则是123，“011”转为11（忽略前导的0），“11.1”则为11.1,"0xf"则转为相同大小的十进制整数。若是字符串是空，则将转为0；除此之外其余字符串，则转为NaN(“122blue”,“0a”,"a")。
若是是对象，则调用对象的valueOf()方法，而后按照前面规则转换返回的值。若是转换的结果是NaN，则调用对象toString()方法，再次按照前面的规则转换返回的字符串值。
譬如Number({a:2})返回的是NaN,而Number([1])返回的是1

未完待续...