js概览

标签：js概述   js笔记   js课件   

JavaScript语言由三部分组成：

---核心(ECMAScript)

---文档对象模型(DOM,Document Object Model)

----浏览器对象模型（BOM,Bdrowser Object Model)

JavaScript的用途

浏览器内核主要由两部分组成：

1 内容排版引擎----解析HTML/CSS

2 脚本解释引擎----解析JavaScript  

怎么搭建JavaScript运行环境

方式一： 安装独立的JavaScript解释器

例如：node.exe

(1) 可以一行一行的输入要执行的脚本并执行

(2) 也可以把多行要执行的脚本写在文本文件中，批量执行

方式二： 使用浏览器内核中嵌入的JavaScript解释器

(1)直接在Console中输入脚本并执行

(2) 将JS脚本嵌入在HTML页面中执行

解释型语言，若某行代码错误，则解释器终止此次执行；但是不会影响后续块的执行，以及后续HTML元素的解析。

浏览器调试功能

IE

Firefox

Chrome

编写JavaScript代码

语句----会被JavaScript引擎解释执行的代码

-----由表达式，关键字，运算符组成；

-----大小写敏感

-----使用分号或者换行结束；

大小写敏感例如：

注释

----单行注释

-----多行注释

换行与空格

变量的声明

可以在一条语句中声明多个变量，变量名使用”,”分隔

Var name1,name2,name3;

Var age1,age2=30;

注意不允许使用关键字和保留字作变量名

命名规范

---标识符命名规范

-------可以包含字母，数字，下划线_, 美元符号$

--------不能以数字开头

---------常用于表示函数，变量等的名称

注意：未经初始化的变量

变量定义之后，在使用之前从未赋值过，值为undefined

Var userName;

Console.log(userName);

变量未被定义过，而被直接使用，属于语法错误

Console.log(userAge);

变量的操作必须与类型匹配！【理解】

JavaScript数据类型

----原始类型 number 数字；  string 字符串； boolean  布尔；

----特殊类型  null  空；  undefined 未定义

-----应用类型 Object  对象

Function 函数

Number 数字

String  字符串

Boolean  布尔

Data  日期

Error  错误

string类型

   ---收尾由一对单引号或双引号括起

   ---特殊字符需要转译

number 类型

----既可以表示32位的整数，也可以表示64位的浮点数

boolean 类型

--- 仅有两个值 true  和 false

隐式转换

数字+字符串  ： 数字转换为字符串

数字+布尔值  ： true转换为1，false转换为0

字符串+布尔值 ： 布尔值转换为字符串true或false

布尔值+布尔值 ： 布尔值转换为数值1 或0

数据类型转换函数

toString()

----所有数据类型均可转换为string类型

parseInt()

----如果没有可以转换的部分，则返回NaN

parseFloat()

-----解析出一个string的浮点数部分

-----如果没有可以转换的部分，则返回NaN

Number()

------把一个string解析为number

-----如果包含非法字符，则返回NaN

isNaN函数

-----把NaN与任何值包括自身，相比得到的结果均是false.

----所以不能使用 ==  ==== 来判读某个值是否是NaN

null

undefined

------语义 ：不存在该数据

-------声明了变量但从未赋值或者对象属性不存在

例如：

Var msg;

Console.log(msg);

Var emp = new Object();

Console.log(emp.isOnSale);

运算符

算术运算 + - *  /  %  ++ --

关系运算 > <>=  <=  == ===  !=  !===

逻辑运算符 && || ！

赋值运算符 = +=  

字符连接运算符  +

条目（三目）运算符 ?:

特殊运算符 typeof instanceof void  delete

赋值运算符

在绝大数编程语言中，a+=3 由于运行时可以进行优化，执行效率都要优于a=a+3

条件（三目）运算符的嵌套

方法（函数，过程）

-----方法，实际上是功能完整的对象。

-------定义：function

作用域

------局部变量

------全局变量

与函数类似，函数也有全局函数和局部函数。

ECMAScript 中预定义了一组全局函数，可供用户直接使用

  decodeURI()

decoudeURIComponent()

encodeURI()

encodeURIComponent()

eval()

isFinite()

isNaN()

parseFloat()

parseInt()

语句：

switch-case语句

Try/catch

   Try{

//此处是主业务功能代码

//主业务功能代码中可能产生并抛出错误

}catch(){

//此处是负责错误处理的代码

}finally{

//此处是出口语句

}

数组：

   数组定义：

Var arr1 = [];

Var arr2 = [97,85,79];

Var arr3 = new Array();

Var arr4 = new Array(“Tom”,”Mary”);

For.....in 遍历数组元素

 Var numbers = [10,30,50,40];

For(var i in numbers){

Console.log(i + “-” +numbers[i]);

}

获取数组字符串

----valueOf()

----toString()

----toLocaleString

----join()

连接数组

-----concat() 拼接两个或更多的数组，并返回结果

    例如： arrObject.concat(arr1,arr2,arr3,...arn)

Slice()  获取现有数组的一个子数组

Splice()  从数组中删除一部分元素，并添加另一部分元素

Reverse() 颠倒数组中的元素的顺序。

Sort()  

Push()  入栈

Pop()  出栈

二维数组

转义字符

字符串

大小写转换方法

---toLowerCase()

----toUpperCase()

获取指定位置的字符

charAt(index) 方法用于获取指定下标处的字符

charCodeAt(index)

检索字符串

indexOf(value)

lastIndexOf(value)

截取字符串

slice(start,[end])

substring(start)

分隔字符串

split

链接字符串

concat

使用+

替换子字符串

---replace(substr/regexp,replacement)

Match(value/regexp)

查找

search(regexp)

正则表达式

----定义

------直接量字符

/pattern/attributes

  Replace(substring/regexp,replacement)

例如：

Var  regexp = /(red|blue|green)/ig;

Var data = ‘Flowers are red,blue,yellow,or green’;

Var result = data.replace(regexp,’<span style=”color:$1”>$1</span>’

Document.write(result);

match

search

split

创建正则表达式对象有两种方法

直接量语法：

Var patt1 = /pattern/attributes;

 调用RegExp构造方法：

Var patt2 = new RegExp(pattern,attributes);

RegExp对象具有如下方法

Compile()

Exec()

Test()

Math

----成员属性

Math对象具有如下方法

Abs

Ceil

Exp

Log

Floor

Max

Min

Pow

Round

Sqrt

三角函数

Acos

Asin

Atan

Atan2

Cos

Sin

Tan

Random()

Date

获取时间

getDate()

getDay()

getFullYear()

getHours()

getMilliseconds()

getMinutes()

getMonth()

getSeconds()

getTime()

getTimezoneOffset()

修改时间

setDate()

setFullYear()

setHours()

setMilliseconds()

setMinutes()

setMonth()

setSeconds()

setTime()

时间格式化

创建Number对象

Number对象具有如下静态常量属性

MAX_VALUE

MIN_VALUE

NaN

NEGATIVE_INFINITY

POSITIVE_INFINITY

方法：

toExponential()

toFixed()

toPrecision()

toString()

Boolean对象

错误处理

   ECMAScript定义了六中类型的错误，除此之外，可以使用Error构造方法创建自定义的

Error对象。

EvalError, RangeError, ReferenceError, SyntaxError, TypeError,URIError

Error 对象

成员属性

Message

Name

Stack

Error对象成员方法

toString()

一个面向对象的语言需要向开发者提供四种基本能力

1， 封装

2， 聚集

    把一个对象存储在另一个对象内的能力

3， 继承

    从其他对象为当前对象获得属性和方法的能力

4， 多态

    能以多种不同的形式运行函数或方法的能力

ECMAScript支持这些要求，因此可被看做面向对象的。

创建自定义对象方法总结：

（1）使用直接量语法

（2）使用new Object()

（3）使用 function 对象模板

（4）使用Object.create(proto)

定义属性

--直接量方式声明对象属性

--使用new创建的对象声明属性

访问属性

     使用 .  或者 []  运算符访问对象的属性

属性访问错误

检测属性：

     四种方法检测对象中是否存在指定属性

1. 使用 in关键字

Console.log(‘ename’ in emp1);

2. 使用对象的hasOwnProperty()方法

Console.log(emp1.hasOwnProperty(‘ename’));

3.  使用undefined判读

Console.log(emp1.name === undefined);

4.  使用条件语句直接判断

If(emp1.ename){

Console.log(‘ename属性存在’)

}

类数组的对象

  --有length 属性

  ---可以使用[]  访问成员

  ----除了使用下标，还可以是id, name

  ----可以使用for

  注意：不能使用slice(), push(),  pop() 等。

常见的类数组对象有：

Arguments, NodeList, styleSheetList,  HTMLCollection,

HTMLFormControlsCollection,  HTMLOptionsCollection,

HTMLAllCollection, DOMTokenList

JSON 格式：

使用eval()函数把一段JSON文本字符串解析为一个JavaScript对象

方法二：

使用JSON.parse(string)方法来解析JSON字符

JSON.stringify(jsonObj)方法把JavaScript对象格式化为JSON字符串：

主要：IE7--JS解释器不支持这个两个方法！！可以下载json2.js解决（github上）

Function

他的属性 arguments ,类数组对象。

Arguments对象具有如下属性：

  ---length

  ---callee: 返回当前函数的引用（匿名函数可以使用该属性实现递归调用）

创建函数的两种方式

 1， 直接使用function关键字声明新的函数

 2， 使用Function对象构造方法创建新的函数

效率远不如直接使用function

匿名函数

为HTML元素的相关事件绑定一个处理函数有二种

1 直接在HTML代码中绑定

Button onclick=”submit()”>确定</button>

2  使用JavaScript执行时间绑定

<script>

Bt.onclick = function(){}

</script>

绑定多个处理函数

---非IE

Var bt = document.getElementById(“btSubmit”);

bt.addEventListener(“click”,f1);

bt.addEventListener(“click”,function(){});

IE

Var bt = document.getElementById(“btSubmit”);

bt.attachEvent(“onclick”,f1);

bt.attachEvent(“onclick”,function(){});

常用的HTML时间

Onabort

Onblur

Onchange

Onclick

Ondbclick

Onerror

Onfocus

Onkeydown

Onkeypress

Onkeyup

Onload

Onmousedown

Onmousemove

Onmouseout

Onmouseover

Onmouseup

Onreset

Onresize

Onslect

Onsubmit

Onunload

利用模板定义对象

Prototype基本理解

利用Object.create()创建对象

   -----ECMAScript5 提出的

例如：

  Var emp = {ename:’Tom’,salary:3500};

  Var coder = Object.create(emp);

  Console.log(Object.getPrototypeOf(coder));  //emp

coder.skilledTool = ‘JavaScript’;

Console.log(coder.skilledTool); //JavaScript

Console.log(coder.ename); //Tom

Console.log(coder.salary); //3500

isPrototypeOf()

---用于判定一个prototype对象是否存在于另一个对象的原型链中。是 返回true，否则false

自有属性与原型属性

Var emp = {dept:”研发部“}；

Var coder = Object.create(emp);

Var accounting = Object.create(emp);

coder.skilledTool = ‘JavaScript’;  //设置自有属性

Accounting.level = ‘会计三级’; //设置自有属性

//设置原型属性

Object.getPrototypeOf(coder).dept = ‘开发部’;

Object.getPrototypeOf(coder).comm = 5000;

Console.log(coder.dept);

Console.log(accounting.dept);

Console.log(coder.comm);

Console.log(accounting.comm);

删除自有属性

     Delete coder.skilledTool;

     可以删除原型属性？

为对象扩展方法

使用getter setter函数定义属性

ECMASCript5中对象的属性分为两种

1， 数据属性 data property

2， 访问器属性 accessor property

例如：

Var circle = {

r: 10,

get size(){

Return Math.PI*this.r* this.r;

},

set size(){

Return Math.sqrt(value/Math.PI);

}

}

Console.log(circle.size);

Circle.size = 31400;

Console.log(circle.r);

ECMAScript5中对

数据属性的四个特性：

---value, writable, enumerable , configurable

访问器属性的四个特性：

----get ,set , enumerable, configurable

怎么定义呢？

   使用Object.defineProperty(obj,property,attr)方法为对象添加具备详细特征的属性

例如：

Var e1= {};

Object.defineProperty(e1,”ename”,{

Value:’Tom’,

Writable:true,

Enumerable:true,

Configurable:true

});

内置对象（native object) 是指JavaScript语言本身预定义的对象，在ECMAScript标准定义，由所有的浏览器厂家来提供具体实现

---  String  Boolean  Number

     Object  Function

Array  Date  RegExp  Math

Error   EvalError  RangeError  ReferenceError

SyntaxError  TypeError  URIError

Global

宿主对象：指JavaScript运行环境（即浏览器提供的对象，有浏览器厂家自定义提供实现。

具体分为如下两类：

1 BOM对象

Window Navigator Screen History  Location

2, DOM对象

Document Anchor  Area Base  Body  Button Canvas Event Frame Frameset IFrame Image Link Meta Style Form ............

js概览

标签：js概述   js笔记   js课件   

原文地址：http://liangge.blog.51cto.com/7154562/1896049