一、javascricpt实现
ECMAScript:由ECMA-262定义,提供核心语言功能;
文档对象模型(DOM):提供访问和操作网页内容的方法和接口;
浏览器对象模型(BOM):提供与浏览器交互的方法和接口。
二、在HTML中使用javascript
向HTML页面中插入JavaScript的主要方法,就是使用
< script>元素有以下6个属性:
async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少有人用。
defer:可选。属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
language:已废弃。
src:可选。表示包含要执行代码的外部文件路径。
type:可选。可以看成是language的替代属性;表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。属性默认就是text/javascript。
直接在页面中嵌入代码
<script type="text/javascript">
function sayScript(){
alert("<\/script>");
}
</script>
引入外部javascript文件(推荐使用这种)
<script type="text/javascript" src="example.js"></script>
可维护性:遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件夹中,维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标记的情况下,集中精力编辑JavaScript代码。
可缓存:浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说,如果有两个页面都使用同一个文件,那么这个文件只需下载一次。因此,最终结果就是能够加快页面加载的速度。
适应未来:通过外部文件来包含JavaScript无须使用前面提到XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。
元素
在浏览器不支持javascript或被禁用的时候显示内容,示例:
<body> <noscript> <p>本页面需要浏览器支持(启用)JavaScript。 </noscript> </body>
三、基本概念
3.1 语法
- 区分大小写
- 标识符不能使用保留字/关键字
- 注释
//单行注释
/*
*多行注释
*/
4.严格模式"use strict";
用于告诉支持的javascript引擎切换到严格模式,可以在顶部添加这行代码,也可以在函数内部添加。
3.2 保留字和关键字
不能被用作标识符。
3.3 变量
ECMAscript的变量是松散型的,可以用来保存任何类型的数据。
定义变量
//定义变量
var test = "hello";
//重新赋值
test = 1;
上面例子中test先保存的是一个字符串,后面又把它重新指向数字1,这样是可行的但是不推荐这样做。
3.4 数据类型
ECMAscript有5种基础类型:
Undefined、Null、Boolean、Number、String
一种复杂数据类型:Object
typeof:用来检测变量的数据类型
var message = "some string";
alert(typeof message); // "string"
alert(typeof(message)); // "string"
alert(typeof 95); // "number"
3.5 操作符
1.一元操作符
var age = 0
++age // 1 递增
--age // -1 递减
// 前置递增/递减
var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2; // 等于21var num4 = num1 + num2; // 等于21
// 后置递增/递减
var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2; // 等于22var num4 = num1 + num2; // 等于21
逻辑非(!)
由一个!表示,会将操作数先转换为布尔值再取反,示例:
alert(!false); // true
alert(!"blue"); // false
alert(!0); // true
alert(!NaN); // true
逻辑与(&&)
两个操作数都为布尔值的情况,双方都为true,才会返回true,否则返回false。
在有一个操作数不是布尔值的情况下,逻辑与操作就不一定返回布尔值;此时,它遵循下列规则:
如果第一个操作数是对象,则返回第二个操作数;
如果第二个操作数是对象,则只有在第一个操作数的求值结果为true的情况下才会返回该对象;
如果两个操作数都是对象,则返回第二个操作数;
如果有一个操作数是null,则返回null;
如果有一个操作数是NaN,则返回NaN;
如果有一个操作数是undefined,则返回undefined。
逻辑或 (||)
两个操作数都为布尔值的情况,只要有一方为true则返回true,否则返回false。
如果第一个操作数是对象,则返回第一个操作数;
如果第一个操作数的求值结果为false,则返回第二个操作数;
如果两个操作数都是对象,则返回第一个操作数;
如果两个操作数都是null,则返回null;
如果两个操作数都是NaN,则返回NaN;
如果两个操作数都是undefined,则返回undefined。
3.6、语句
if语句
流程控制语句,示例:
if (i > 25) { alert("Greater than 25.");
} else if (i < 0) { alert("Less than 0.");
} else { alert("Between 0 and 25, inclusive.");
}
循环语句
前置循环语句
在循环体内的代码被执行之前,就会对出口条件求值。因引,循环体内的代码有可能永远不会被执行。
// while 语句
var i = 0;
while (i < 10) {
i += 2;
}
// for 语句
var count = 10;
var i;
for (i = 0; i < count; i++){
alert(i);
}
// for in 语句
for (var propName in window) {
document.write(propName);
}
后置循环语句
在对条件表达式求值之前,循环体内的代码至少会被执行一次。以下是do-while语句的语法:
var i = 0;do { i += 2;} while (i < 10);
break和continue语句
break:用于跳出循环。
continue: 用于立即终止本轮循环,开始下一轮循环。
3.7 函数
函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方、任何时候调用执行。ECMAScript中的函数使用function关键字来声明,后跟一组参数以及函数体。函数的基本语法如下所示:
function sayHi(name, message) {
alert("Hello " + name + "," + message);
}
return:用于结束函数执行,可以返回值。函数体内return后面的语句都不会执行。
arguments:函数内部的参数对象,可以利用这个对象来实现类似java等后端语言函数重载的功能。
总结
本篇文章是个人在看完javascript高级程序设计这本书的前三章后,做的一些笔记!