JavaScript高级程序设计学习笔记
1.对JavaScript实现各个组成部分的详尽解读
2.对JavaScript面向对象编程的全方位阐述
3.DOM,BOM及浏览器事件模型的透彻剖析
4.Web应用基本数据格式JSON,XML及存取
5.Ajax,Comet服务器端通信和基于File API的拖放式文件上传
6.ECMAScript 5定义的最核心语言特性
7.HTML 5涵盖的表单,媒体,Canvas(包括WebGL)
8.Selectors、Web Workers、地理定位及跨文档传递消息等最新API
9.离线应用及客户端存储(包括IndexedDB)
10.维护、性能、部署相关的最佳开发实践
11.新兴API及ECMAScript Harmony展望
对JavaScript实现各个组成部分的详尽解读
1.JavaScript简介
- 核心(ECMAScript) [由ECMA-262定义,提供核心语言功能]
- 文档对象模型(DOM) [提供访问和操作网页内容的方法和接口]
- 浏览器对象模型(BOM)[提供与浏览器交互的方法和接口]
2.在HTML里面使用JavaScript
<script>标签
简单属性介绍(常用):
(1)charset:指定代码字符集,一般为:utf-8
(2)src:执行代码的外部文件
(3)type:脚本语言的内容类型,一般为:text/javascript
(4)defer:延迟脚本(脚本会延迟到整个页面解析完毕后在运行)——[立即下载,延迟执行]只适用于外部脚本文件,仅部分浏览器支持
(5)async:立即下载脚本,但不妨碍页面其他操作(脚本不保证按照指定的先后顺序执行)——**[立即下载,异步执行]**只适用于外部脚本文件,仅部分浏览器支持
learning tips:
1)此处注意在嵌入JavaScript代码时,不要在代码的任何地方出现“</script>”字符串,否则浏览器会认为这是结束标签,但是利用“</script>”可解决
2)在解析外部JavaScript文件时,可省略</script>格式为:
<script type="text/javascript" src="example.js">
3)带有src属性的<script>元素不应该在其<script>和</script>标签中包含额外JavaScript代码。包含嵌入代码,只会下载并执行外部脚本文件,嵌入代码会被忽略。
<script>的位置
位置 | 特点 |
页面的<head>元素中 | 页面呈现会形成延迟 |
页面的<body>元素中 | 页面呈现不会形成延迟 |
小结
利用<script>将JavaScript代码插入到HTML页面中,可以是标记和脚本混合在一起,也可以包含外部JavaScript文件。此处需要注意的地方有:
1)若<script>元素中不包含异步和延迟属性,则代码会按照先后顺序进行解析。所以一般的会把<script>元素放在最后面,</body>标签前面。
2)使用defer属性可以让脚本在文档呈现后在执行。按照指定顺序执行。
3)使用async属性不能保证脚本执行的顺序。
3.基本概念
语法(i`m important)
**变量命名规则**
1)变量名首字母必须为字母(a-z A-Z),下划线(_),或者美元符号($)开始,php编程中所有变量必须以$开始。(有些编译器已经支持中文变量名了)2)变量名只能是字母(a-z A-Z),数字(0-9),下划线(_)的组合,并且之间不能包含空格,数字不能放在变量名首位。
3)变量名不能使用编程语言的保留字。比如在javascript中不能使用true,false,while,case,break保留字等等。
**注释**
使用C风格注释,包括单行注释和块级注释。// 单行注释 【两个斜杠开头】
/*
* 这是多行的块级注释【以斜杠加星号开头,以星号加斜杠结尾】
*/
**语句**
1)语句结尾加逗号
2)代码块利用花括号括起来
❤注意编程习惯
关键字和保留字
变量
ECMAScript的变量为松散型,即可以用来保存任何数据类型的数据。换句话说,每个变量仅仅是一个用于保存值的占位符。定义变量时利用var操作符,后面跟变量名(即标识符),如下:
var message="hello world!";
var为局部变量,也就是说如果在函数中使用变量,在退出函数时,变量失效。
function test(){
var message = "hello world"; //局部变量
}
test();
document.write(message); //无效结果
但是如果对于上例中,省略var操作符,则message就变成了全局变量。这样上例中结果不会无效。但是对于全局变量,省略var操作符,是不推荐做法。这样在严格模式下会抛出ReferenceError错误。
可以使用一条语句定义多个变量,如下:
var messagr = "hello world";
found=false;
age=34;
数据类型(i`m important)
ECMAScript中有5中简单的数据类型(也被称为基本数据型):Undefined、Null、Boolean、Number和String。还有一种复杂的数据类型——Object(本质是由一组无序名值对组成)。
typeof操作符
由于ECMAScript是松散类型的,因此需要一种手段来测试变量的数据类型——typeof操作符。对于某个值使用typeof操作符的返回值:
- “undefined”——如果该值未定义;
- “boolean”——如果该值是布尔值;
- “string”——如果该值是字符串;
- “number”——如果该值是字符串;
- “object”——如果该值是对象或者字符串;
- “function”——如果该值是函数;
var message="hello world!";
document.write(typeof message); //返回"string"
document.write(typeof 95); //返回"number"
document.write(typeof null); //返回"object"
返回值类型 | 返回值 | 特点 | 代码 | 注意 |
Undefined | 返回"undefined" | 在使用var声明变量但未初始化时,变量返回该结果 | var message; alert(message==undefined);//true alert(typeof message);//undefined | 未初始化变量会自动被赋予undefined值,可以用来检测变量是否被赋值 |
null | 返回"null" | 1)对变量赋值null时会返回"object"(由于null表示一个空对象指针) 2)变量初始化为null,检查null值判断是否已保存对象的引用 3)null和undefined的关系 | 1)var message=null;alert(typeof message);//返回"object" 2)if(message!=null){ }//对message对象执行某些操作 3)alert(null == undefined);//返回true | null表示一个空对象指针; null和undefined用途完全不同 |
Boolean | 返回"true"or"false"与数字值不同 | 1)Boolean类型的字面值true和false区分大小写。 2)利用转型函数Boolean()把其他类型转换为Boolean等价的值 | 1)var found=true; var lost=false; 2)var message="hello world!"; var messageAsBoolean=Boolean(message); 2)var message="hello world!"; if(message){ alert("value is true");} | 1)即True和False(以及其它混合大小写形式)不是Boolean值,只是标识符 2)空字符串(String)→false 0和NaN(Number)→false null(Object)→false undefined(Undefined)→false 存在自动执行Boolean转换 |
Number | 1)整数【十进制/八进制(070)/十六进制(0xA)】 2)浮点数【小数/科学计数法(3.1e3)】 3)NaN(非数值) | 1)八进制(0+0~7), 十六进制(0x+0~9&A~F) 2)科学计数法(3.1×10³) 3)数值范围 4)isNaN()函数判断是否不为数值 5)6)7)数值转换【Number()/parseInt()/parseFloat()】parseInt()有第二参数制定基数即进制 | 1)var octalNum1=070;//八进制56 var octlNum2=079;//无效—解析为79 var hexNum1=0xA;//十六进制10 2)var floatNum1=10.0//整数—解析为10 var floatNum=3.1e3//等于3100 3) var result=Number.MAX_VALUE +Number.MAX_VALUE; alert(isFinite(result)); 4)alert(isNaN(NaN));//true alert(isNaN(10))//false(10是数值) alert(isNaN("10"))//false(可以转化为数值10) alert(isNaN("blue"))//true alert(isNaN(true))//false(可以转化为数值1) 5)var num1=Number("000001");//1 6)var num1=parseInt("1234blue")//1234 var num1=parseInt("AF",16);//175 7)var num1=parseFloat("0xA");//0 | 1)如果字面值中的数值超出范围,则前导零将会忽略;八进制字面量在严格模式下无效 2)保存浮点数的内存空间为整数的两倍,所以对于表示为整数的浮点数,该值会转化为整数 3)超出数值范围会转化为Infinity(正无穷)或者-infinity(负无穷) 5)Number()函数可以转换任何数据类型;parseInt()和parseFloat()专门把字符串转化为数值 true/false(Boolean)→1/0 数字值(Number)→本身 null(Object)→0 undefined(Undefined)→NaN 字符串(String)→去除前导,转为十进制 6)转化为整数,直到转化到数字字符,否则输出NaN 7)parseFloat()没有第二参数指定基数用法 |
String | ECMAscript单双引号都可以,但是对于PHP会影响字符串的解释,但是引号要匹配 | 1)字符串可加特点 2)toString()转化为字符串 | 1)var a ="hello"; a=a+"world";//"hello world" 2)var found=true; var foundAsSrting=found.toString();//"true" 3)var 1+"";//"1" | 2)数值、布尔值、对象和字符串值有toString()方法,但是null和undefined没有这个方法 3)某个值+""也可以转化为字符串 |
Object | 创建Object实例 | var o = new Object(); | Object实例所具有的属性: 1)Constructor:保存创建当前对象的函数 2)hasOwnProperty(propertyName):用于检查给定属性在当前对象实例中是否存在 3)isPrototypeOf(object):用于检查传入对象是否是另一个对象的原型 4)propertyIsEnumerable(propertyName):用于检查是否会出现for-in语句来进行枚举 5)toLocaleString():返回对象的字符串表示,字符串与执行环境的地区对应 6)toString():返回对象的字符串表示 7)valueOf():返回对象的字符串、数值或布尔值表示(通常与toString()方法的返回值相同) |
1)转义序列