ECMAScript学习笔记(一)

栏目: JavaScript · 发布时间: 6年前

内容简介:JavaScript由ECMAScript(核心)、DOM(文档对象模型)、BOM(浏览器对象模型)三个部分组成。ECMAScript和Web浏览器没什么太大的关系,ECMA包含了:语法、类型、语句、关键字、保留字、操作符、对象。类比于Java的话,就是Java的基础语法,即:java se部分,不包含j2ee,java me的部分。

ECMAScript

JavaScript由ECMAScript(核心)、DOM(文档对象模型)、BOM(浏览器对象模型)三个部分组成。

ECMAScript和Web浏览器没什么太大的关系,ECMA包含了:语法、类型、语句、关键字、保留字、操作符、对象。

类比于 Java 的话,就是Java的基础语法,即:java se部分,不包含j2ee,java me的部分。

在HTML中使用javascript

script 元素

该标签在HTML 4.01中,定义了6个属性:

async 可选,用于告诉浏览器,立即下载文件

charset 可选,表示通过src属性指定的代码的字符集

defer 可选,表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有用。

language 已废弃,表示使用的脚本语言

src 可选,表示包含执行代码的外部文件

type 可选:text/javascript等

使用 script 的方法

1.在页面中嵌入JavaScript代码

<script type="text/javascript">
function sayHi() {
  alert("Hi!");
}
</script>

包含在 script 标签中的代码,将会被从上到下依次解释。

当解释器对 script 标签元素内部的所有代码求值完毕之前,页面中的其余内容就不会被浏览器加载,嗯。

2.包含外部JavaScript文件

<script type="text/javascript" src="example.js">
</script>

标签的位置

一般所有 script 标签都应该被放在页面的 head 里。这样会使得页面在JavaScript代码加载完成后才会执行。这样,就会非常卡啊嗯。

为了避免这个问题,现在一般将JavaScript的引用放在 body 标签中的页面内容的最后面。

嵌入代码VS外部文件

使用外部文件有:可维护性、可缓存、适应未来等优点。嗯。

语法

变量

ECMAScript的变量是松散类型的,即:可以用来保存任何类型的数据。变量只是一个占位符嗯。

**1.声明变量:**使用var操作符声明变量。

var message;

以上声明的 message 变量可以用来保存任何值。以上代码中, message 没有初始化,故保存了一个特殊值:undefined

**2.赋值:**由于变量知识一个占位符。故,可以赋予任何值,嗯。

var message = "hi";
message = 100;

3.使用var定义的变量会使该变量成为定义该变量的作用域中的局部变量。

4.而不使用var,直接定义的变量,将会成为全局变量:

function test() {
  message = "hi"
}
test()
alert(message)

5.可以使用一条语句定义多个变量。

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

数据类型

ECMAScript中有五种简单数据类型: UndefinedNullBooleanNumberString ,以及复杂数据类型: Object

Obejct的本质是一组无序的key-value组成的。

typeof操作符

typeof用于检测给定变量的数据类型。

“undefined” 这个值未定义

"boolean" 这个值是布尔值

"string" 这个值是字符串

"number" 这个值是数值

"object" 这个值是对象或null

"function" 这个值是函数

eg:

var message = "some string"
alert(typeof message) // "string"
alert(typeof(message))// "string"
alert(typeof 95) // "number"

Undefined类型

Undefined类型,只有undefined这个值,在使用var声明变量,但未初始化的时候,这个变量的值就是undefined的。

另外,还可以给变量赋值为undefined。但是,直接调用为赋值的变量会报错,而调用赋值为undefined的变量是不会报错的。

Null类型

Null类型,只有null这个值。null值表示一个空对象指针,故,使用typeof检测null值会返回"object"。

如果定义的变量要用来存储对象,则最好将其初始化为null。

然后,undefined是派生自null值的。

Boolean类型

Boolean只有两个值:true和false。

ECMAScript中的所有类型,都与这两个值有等价对应的值。要将一个值转换成对应的Boolean值,需要调用转型函数Boolean()

var message = "djkafj"
var messageAsBoolean = Boolean(message)

Boolean true false

String 任何非空字符串 “”(空字符串)

Number 任何非零数值 0和NaN

Object 任何对象 null

Undefined n/a undefined

Number类型

Number类型使用IEEE754格式来表示整型和浮点数值。

基本的数值字面量格式是十进制。而整数还可以通过八进制、十六进制来表示。

var num1 = 070;
var num2 = 0xA;

1.浮点数:包含小数点的数值,且小数点至少有一位数字。

var num1 = 1.1;
var num2 = 0.1;
var num3 = .1;

由于浮点数需要的内存空间较大,故ECMAScript会尽量将浮点数转换成整数。

而对于极大或极小的数值,可以用科学计数法。

**2.数值范围:**Number.MIN_VALUE=5e-324,Number.MAX_VALUE=1.797693134862357e+308.

若某次计算得到的结果超出数值范围,则将被表示为Infinity值。

**3.NaN:**非数值。表示一个本来要返回数值的操作数未返回数值的情况。

ECMAScript定义了isNaN()函数,用于判断一个数值是否为NaN。

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

**4.数值转换:**Number(),parseInt(),parseFloat()可以将非数值转换为数值。

Number()可以用于任何数据类型。而parseInt(),parseFloat()用于将string转换成数值。

(1)Number():

若为Boolean值,则转换为1,0

若为数字值,则原路返回

若为null,则返回0

若是undefined,返回NaN

若是字符串:1.只包含数字,则返回十进制数值。2.若包含有效的浮点数格式,则返回对应的浮点数。3.若包含有效的相同大小的十进制数。4.若为空字符串则返回0。5.若是上述格式之外的字符串,则返回NaN。

若为对象,则调用对象的valueOf()方法,然后依照前面的规则转换返回的值。

(2)parseInt():

只看是否符合数值模式。会忽略字符前面的空格。然后,若一个字符串是以数字开头非数字结尾的,则只解析前面的数值部分。

另,可以传入第二个参数,表示进制。

var num1 = parseInt("AF", 16);

(3)parseFloat():

和parseInt()类似。从第一个字符开始解析每个吸附。且,一直解析到字符串结尾或者第一个无效的浮点数字字符位置。

String类型

String类型用于表示由零或多格16位Unicode字符组成的字符序列。可以由单引号或者双引号包住。

**1.字符字面量:**String类型包含一些特殊的字符字面量,也叫转移序列,用于表示非打印字符。就是常规的换行符等,

2.ECMAScript中的字符串是不可变的。字符串一旦创建,他们的值就不能改变。只能改变变量所保存的字符串。(这点和Java类似)

**3.转换为字符串:**其他类型转换为String类型可以用其他类型自带的toString()方法。

在调用number类型的toString()方法时,可以传入进制作为参数。

除了toString()外,还可以使用String()函数,这个函数能够将任何类型的值转换为String。

Obejct类型

ECMAScript的Object就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。创建Obejct类型的实例后,可以为其添加属性或者方法。

var o = new Object();

Obejct类型是所有实例的基础。所有的实例都拥有Object的属性和方法。

Object的每个实例都有以下的属性和方法:

Constructor: 保存用于创建当前对象的函数。也就是构造函数

hasOwnProperty(propertyName): 用于检查给定的熟悉是否存在于当前对象实例中。

isPrototypeOf(object):用于检查传入的对象是否是另一个对象的原型。

propertyIsEnumberable(propertyName):检查给定的属性是否能使用for-in语句进行美剧。

toLocaleString(): 返回对象的字符串表示,字符串与执行环境的地区相关。

toString()

valueOf()

操作符

操作符重点记一下相等操作符。

相等操作符

1.相等和不相等: ==!=

若两个操作数相等则返回true。

相等和不相等操作符遵循以下规则:

1.若一个操作数是布尔值,则在比较相等性之前,先将其转换成数值0/1

2.若一个操作数是字符串,另一个操作数是数值,在比较前,现将字符串转换成数值。

3.若一个操作数是对象,另一个不是,则调用对象的valueOf()方法,用得到的基本类型按照前面的规则进行比较。

4.null和undefined是相等的。

5.在比较相等性之前,不能将null和undefined转换成其他任何值。

6.若一个操作数是NaN,则不与任何数相等

7.若两个操作数都是对象,若指向同一个对象,则相等;否则不相等。

2.全等和不全等: ===!==
除了在比较之前,不转换操作数之外,全等不全等和相等不相等操作符并没有区别。

语句

语句里面,比较特别的是一个with语句

with

with语句的作用是将代码的作用域设置到一个特定的对象中:

with(expression) statement;

var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;

// 以上的代码可以写作:

with(location){
  var qs = search.substring(1);
  var hostname = hostname;
  var url = href;
}

函数

ECMAScript中的函数,我觉得是一个非常神奇的东西。

使用function来声明,后面跟一组参数以及函数体。

function functionName(arg0, arg1) {
  statements;
}

function sayHi(name, message) {
  alert("Hello " + name + "," + message);
}

sayHi("Micheal", "F**k you!")

而,函数可以通过return语句来返回值。

function sum(num1, num2) {
  return num1 + num2;
}

函数的参数

ECMAScript的函数是不介意传入多少个参数的。

ECMAScript的函数,有一个arguments对象,能够通过arguments[0], arguments[1], arguments[2]的形式访问参数。

所以,我觉得函数声明时写的参数,就是给arguments[0], arguments[1]这些参数命名,嗯。

没有重载

ECMAScript的函数,不能实现重载。如果定义了两个名字相同的函数,这个名字只会属于后面定义的函数。


以上所述就是小编给大家介绍的《ECMAScript学习笔记(一)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web前端开发最佳实践

Web前端开发最佳实践

党建 / 机械工业出版社 / 2015-1 / 59.00元

本书贴近Web前端标准来介绍前端开发相关最佳实践,目的在于让前端开发工程师提高编写代码的质量,重视代码的可维护性和执行性能,让初级工程师从入门开始就养成一个良好的编码习惯。本书总共分五个部分13章,第一部分包括第1章和第2章,介绍前端开发的基本范畴和现状,并综合介绍前端开发的一些最佳实践;第二部分为第3-5章,讲解HTML相关的最佳实践,并简单介绍HTML5中新标签的使用;第三部分为第6-8章,介......一起来看看 《Web前端开发最佳实践》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

html转js在线工具
html转js在线工具

html转js在线工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具