首页 > 编程语言 > 详细

JavaScript 基础系统学习章节总结

时间:2020-12-19 12:15:16      阅读:23      评论:0      收藏:0      [点我收藏+]

第1章.JavaScript 简介(略)

第2章.在HTML中使用JavaScript

2.1 <script> 元素
?HTML 4.01为 <script> 定义了下列6个属性

async :可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源祸等待加载其他脚本。只对外部脚本文件有效
charset :可选。表示通过src属性指定的代码的字符集。由于大部分人呢浏览器会忽略它的值,因此这个属性很少有人用。
defer :可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效
language :已废弃。略。
src :可选。表示包含要执行代码的外部文件。
type :可选。一般使用为text/javascript。

提示 :按照传统的做法所有 <script> 都应该放在页面的 <head> 元素中。但这种做法的目的就是把所有外部文件(包括CSS文件和JavaScript文件)的引用都放在相同的地方。可是,在文档的 <head> 元素中包含所有JavaScript文件,意味着必须等到全部JAvaScript代码都被下载,解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到 <body> 标签时才开始呈现内容)。对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现代Web应用程序一半都把全部JavaScript引用放在 <body> 元素中页面内容的后面。

2.2章节小结

??把JavaScript插入到HTML页面中要使用 <script> 元素。使用这个元素可以把JavaScript 嵌入到HTML页面中,让脚本与标记混合在一起;也可以包含外部的JavaScript 文件。而我们需要注意的地方有:
??(1)在包含外部JavaScript文件时,必须将src属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一一个服务器上的文件,也可以是其他任何域中的文件。
??(2)所有 <script> 元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用 deferasync 属性的情况下,只有在解析完前面 <script> 元素中的代码之后,才会开始解析后面 <script> 元素中的代码。
??(3)由于浏览器会先解析完不使用 defer 属性的 <script> 元素中的代码,然后再解析后面的内容,所以一般应该把 <script> 元素放在页面最后,即主要内容后面,</body> 标签前面。
??(4)使用defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
??(5)使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
??另外,使用 <noscript> 元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示 <noscript> 元素中的任何内容。

第3章.基本概念

3.1 严格模式

??严格模式是为JavaScript定义了一种不同的解析与执行模型。要在整个脚本中启用严格模式,可以在顶部添加如下代码:

?"use strict";

??这行代码看起来像是字符串,而且也没有赋值给任何变量,但其实它是一个编译指示(proagma),用于告诉支持的JavaScript引擎切换到严格模式。
??在函数内部的上方包含这条这条编译指示,也可以指定函数在严格模式下执行:

function doSomething(){
    "use strict";
    //函数体
}

严格模式下,JavaScript的执行结果会有很大不同,支持严格模式的浏览器包括 IE10+Firefox 4+Safari 5.1+Opera 12+Chrome

3.2 语句
??虽然语句结尾的分号不是必需的,但我们建议任何时候都不要省略它。因为加上这个分号可以避免很多错误(例如不完整的输入),开发人员也可以放心地通过删除多余的空格来压缩ECMAScript代码(代码行结尾处灭有分号会导致压缩错误)。另外,加上分号也会在某些情况下 增进代码的性能,因为这样解析器就不必再花时间推测应该在哪里插入分号了。
??虽然条件控制语句(如if语句)只在执行多条语句的情况下才要求使用代码块,但最佳时间是始终在控制语句中使用代码块————即使代码块中只有一条语句。例如:

if (test)
  alert(test);    //有效但容易出错,不要使用

if (test){
    alert(test);   //推荐使用
}

??在控制语句中使用 代码块 可以让编码意图更加清晰,而且也能降低修改代码时出错的几率。

3.3 变量

??用var操作符定义的变量将成为定义该变量的作用域中的 局部变量 。也就是说如果在函数中使用var定义一个变量,那么这个变量在函数退出后就会被销毁。例如:

function test(){
    var message = "hi"; //局部变量
}
test();
alert(message); //错误!

??这里,变量messgae是在函数中使用var定义的。当函数被调用时,就会创建该变量并为其赋值。而在此之后,这个变量又会被立即销毁从而出现错误。但可以省略var操作符从而创建一个 全局变量:

function test(){
    message = "hi";   //全局变量
}
test();
alert(message);   //"hi"

??这个例子省略了var操作符,因而message就成了 全局变量 。这样,只要调用过一次test()函数,这个变量就有了定义,就可以在函数外部的任何地方被访问到。

注意:不推荐省略var操作符定义全局变量,因为在局部作用域中定义的全局变量很难维护,如果忽略var操作符也会由于相应变量不会马上就有定义而导致不必要的混乱,给未经声明的变量赋值在严格模式下会导致抛出ReferenceError错误

??可以使用一条语句定义多个变量:

var message = "hi",
    found = false,
    age = 29;

??在严格模式下,不能定义为 evalarguments 的变量,否则会导致语法错误。

3.4 数据类型
3.4.1 typeof 操作符
??返回给定变量的数据类型。

注意:从技术角度讲,函数在ECMAScript中是对象,不是一种数据类型,然而函数也有一些特殊的属性,因此可通过typeof操作符区别函数和其他对象,函数的数据类型为function,对象的数据类型为object。

3.4.2 undefined类型 (略)

3.4.3 Null类型

??如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为 null 而不是其他值。这样一来,只要直接检查 null 值就可以知道相应的变量是否已经保存了一个对象的引用,同时便于区分 nullundefined

3.4.4 Boolean类型
true不一定等于1,而false而不一定等于0.
Boolean()函数可以将所有类型转化为其对应的Boolean值

数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空字符串 ""(空字符串)
Number 任何非零数字值(包括无穷大) 0和NaN
undefined 不适用 undefined

??这些转换规则对理解流控制语句(入if语句)自动执行相应的Boolean转换非常重要,如:

var message = "Hello world!";
if (message){
    alert("Value is true");
}

??运行这个示例,就会出现警告框,因为字符串message被自动转换成了对应的Boolean值(true),从而运行成功。

3.4.5 Number 类型

??由于保存浮点数值需要的内存空间时保存整数值的两倍,因此ECMAScript会不失时机地将浮点数值转换为整数值。如果小数点后面没有跟任何数字或者浮点数本身表示的就是一个整数(如1.0),那么该值就会被转换为整数保存。
??浮点数值计算会出现舍入误差的问题,这是使用基于IEEE754数值的浮点计算的通病,其他使用相同数值格式的语言也存在这个问题。例如0.1+0.2在此种计算下结果为0.30000000000000004,这个小小的舍入误差会导致无法测试特定的浮点数值。

??由于内存限制,ECMAScript在大多数浏览器中能够表示的最小数值为5e-324,最大值为1.7976931348623157e+308,如果计算值超过了这个范围就会被自动转换成特殊的Infinity值。且无法参与下一次计算。因为Infinity值无法参与计算。判断一个数值是否是在浏览器可计算范围之间可以使用 isFinite() 函数,如果在可计算范围之间会返回true。

??NaN,即非数值(Not a Number)是一个特殊的数值,这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。例如在其他编程语言中,任何数值除以非数值都会导致错误从而停止代码执行。但在ECMAScript中,任何数值除以非数值会返回NaN,因此不会影响其他代码的执行。
??NaN本身有两个非同寻常的特点。首先,任何设计NaN的操作(例如NaN/10)都会返回NaN,这个特点在多步计算中有可能导致问题。其次,NaN与任何值都不想等,包括NaN本身。
??isNaN() 函数可判断这个数值参数是否"不是数值"。在接收到一个参数后,会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值,例如字符串"10"或Boolean值。任何不能被转换为数值的值都会导致这个函数返回true,反之返回false。

alert(isNaN(NaN));     //true
alert(isNaN(10));      //false(10是一个数值)
alert(isNaN("10"));    //false(可以被转换为数值10)
alert(isNaN("blue"));  //true(不能转换为数值)
alert(isNaN(true));    //false(可以被转换为数值1)

??isNaN() 函数可适用于对象,会首先调用对象的valueOf()方法,然后确定该方法返回的值是否可以转换为数值,如果不能则基于这个返回值再调用toString()方法再测试返回值。

??有3个函数可以把非数值转换为数值:Number(),parseInt()和parseFloat().Number()可以用于任何数据类型,另外两个函数则用于把字符串转换为数值。
??Number()函数的转换规则(略)
??parseInt()函数的转换规则(略)
??parseFloat()函数的转换规则(略)

3.4.6 String 类型

??字符串字面量:

字面量 含义
\n 换行
\t 制表
\b 退格
\r 回车
\f 进纸
\\ 斜杠
\‘ 单引号(‘),例如: ‘He said, \‘hey.\‘ ‘
\" 双引号(")
\xnn 以十六进制代码nn表示的一个字符(其中n为0~F)。例如,\x41表示"A"
\unnnn 以十六进制代码nnnn表示的一个Unicode字符(其中n为0~F)。例如,、u03a3表示希腊字符Σ

??数值、布尔值、对象和字符串值都有toString()方法。但null和undefined值没有这个方法。
??在不知道要转换的值是不是null和undefined的情况下,还可以使用转型函数String(),这个函数能够将任何类型的值转换为字符串。
??String()函数转换规则(略)

3.4.7 Object 类型

??Object的每个实例都具有下列属性和方法:

constructor: 保存这用于创建当前对象的函数。
hasOwnProPerty(propertyName): 用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。
isPrototypeOf(object): 用于检查传入的对象是否是当前对象的原型。
propertyIsEnumerable(propertyName): 用于检查给定的属性是否能够使用for-in语句来枚举。
toLocaleString(): 返回对象的字符串表示,该字符串与执行环境的地区对应。
toString(): 返回对象的字符串表示。
valueOf(): 返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。

3.5 操作符
3.5.1 一元操作符
3.5.2 位操作符

??ECMAScript中的所有数值都是以IEEE-754 64位格式存储,但位操作符并不直接操作64位的值。而是先将64位的值转换为32位的整数然后执行操作最后再将结果转换位64位。
??由于对数值应用位操作符时,后台会先将64位的数值转换为32位数值然后执行位操作最后转换回64位数值,如果对非数值应用位操作符,会先使用Number()函数将该值转换为一个数值(自动完成),然后再应用位操作。得到的结果将是一个数值。(即在对特殊的NaN和Infinity值应用位操作时,这两个值都会被当成0来处理。)

??1.按位非(NOT): 操作符为 ~ 表示,返回数值的反码。

var num1 = 25;     //二进制00000000000000000000000000011001
var num2 = ~num1;  //二进制11111111111111111111111111100110
alert(num2);       //-26

??-26的原因是负数是二进制码存储,但格式是二进制补码,先求出25绝对值的二进制码的反码,反码加一(二进制补码)后则为-25的二进制码,求反码则减一结果也就是-26。

??2.按位与(AND)

??(未完待续)

JavaScript 基础系统学习章节总结

原文:https://www.cnblogs.com/GoodMemoryBlog/p/14158414.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!