JavaScript进修笔记系列(一)

2024年5月9日 158次阅读 来源: Wythehuang

一：JavaScript组成部份

JavaScript是由三个差别部份组成的，中心(ECMAScript) 、文档对象模子(DOM)和浏览器对象模子(BOM)。

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考证模块定义。

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更好操纵DOM

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

根据剖析嵌入式代码划定规矩，当浏览器碰到字符串</script>时刻，就会以为那是完毕的标签。而经由历程转义字符””处理这个题目，比方：

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

三：JavaScript 基本概念

3.1 辨别大小写
JavaScript是辨别大小写的，也就是说变量、函数、关键字和一切标识符都是辨别大小写的。
所谓的标识符，就是指得是变量、函数、属性的名字，或许函数的参数。标识符能够是根据以下花样划定规矩组合起来的一或多个字符：

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;初始化的历程就是给变量赋一个值,因而，能够在修正变量值同时修正值的范例。

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

未完待续…

    原文作者：Wythehuang
    原文地址: https://segmentfault.com/a/1190000005947495
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞