当前位置: 代码迷 >> JavaScript >> javascript-小结
  详细解决方案

javascript-小结

热度:426   发布时间:2012-11-26 11:48:50.0
javascript-总结

?

JavaScript

? ? ? ? 是一种脚本语言(脚本语言是一种轻量级的编程语言,是一条条的纯文本命令,用记事本可以看到的)。?

? ? ? ? 是一种解释性语言(就是说,代码执行不进行预编译)。?

? ? ? ? 不需要显式的去调用,有由数行可执行计算机代码组成。如:

? ? ? ? ? ? ? ? <script type="text/javascript">

? ? ? ? ? ? ? ? ? ? ? ? document.write("<h1>This is a header</h1>");//代码

? ? ? ? ? ? ? ? ? ? ? ? {//代码块

? ? ? ? ? ? ? ? ? ? ? ? document.write("<p>This is a paragraph</p>");

? ? ? ? ? ? ? ? ? ? ? ? document.write("<p>This is another paragraph</p>");

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? </script>

?

脚本

  1. [script] 表演戏剧、拍摄电影等所依据的底本电影脚本

  2. [manuscript]∶书稿的底本(蓝本、话本) ? ? ? ? ? ? ? ?

?

概念

? ? ? ? 变量、表达式、运算符、语句、函数 ? ? ?

?

变量

? ? ? ? 本地变量:函数内声明的变量。当退出该函数后,这个变量会被撤销。这种变量称为。

? ? ? ? 全局变量:函数之外声明的变量,则页面上的所有函数都可以访问该变量。在页面关闭时变量会被撤销。

? ? ? ? 以下值,在判断条件时均视为false

? ? ? ? var a1; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//等效于var a4 = undefined;,al的值也是undefined

? ? ? ?var a2 = null;

? ? ? ?var a3 = false;

? ? ? ?var a4 = undefined;

? ? ? ?var a5 = NaN;

? ? ? ? if(!a1){alert("a1 ");}

? ? ? ? if(!a2){alert("a2 null");}

? ? ? ? if(!a3){alert("a3 false");}

? ? ? ? if(!a4){alert("a4 undefined");}

? ? ? ? if(!a5){alert("a5 NaN");}

运算符

? ? ? ? 算术运算符

? ? ? ? 赋值运算符

? ? ? ? 字符串的 + 运算符

? ? ? ? 比较运算符if(age>18)中的age>18

? ? ? ? 逻辑运算符 &&, ? ? ? ?||, ? ? ? ?!

? ? ? ? 条件运算符variablename=(condition)?value1:value2 //三目运算符

?

方法自定义的3种方式

? ? ? ? 直接声明:

? ? ? ? ? ? ? ? function a(){...}

? ? ? ? 匿名赋值:把方法的引用,赋值给符号引用

? ? ? ? ? ? ? ? var ?f = function (x) {reurn x * x} ; ?

? ? ? ? ? ? ? ? ? ? ? ? //扩展1,起别名

? ? ? ? ? ? ? ? ? ? ? ? var prd = {};

? ? ? ? ? ? ? ? ? ? ? ? prd.f = f;

? ? ? ? ? ? ? ? ? ? ? ? //扩展2,每一个对象都有个prototype类型,给对象动态添加方法

? ? ? ? ? ? ? ? ? ? ? ? String.prototype.toNum = function(){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var reg= new RegExp(",","g");

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return this.replace(reg,"");

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? //扩展3,在对象内部定义

? ? ? ? ? ? ? ? ? ? ? ? ?join : function(callback) {... },

? ? ? ? 嵌套在on*事件中的js

? ? ? ? ? ? ? ? onkeyup= "value=value.replace(/[\uFF00-\uFFFF]/g, ' ')

? ? ? ? ? ? ? ? onsubmit="return false;"即取消提交############

? ? ? ? ? ? ? ? <form onsubmit="submitTest();">等效于Form.prototype.onsubmit= function(){submitTest();};

? ? ? ? ? ? ? ? <form onsubmit="return submitTest();">等效于Form.prototype.onsubmit= function(){return submitTest();};

? ? ? ? ? ? ? ? //还可以写2个以上的语句

? ? ? ? ? ? ? ? onmouseover="alert('An onMouseOver event');return false" ? ??

? ? ? ? ? ? ? ? <a href="javascript:setMenuCookie('msg');">

执行顺序

? ? ? ? JS 在函数执行前将整个函数的变量进行声明,无论这个变量的声明语句有没有机会执行

? ? ? ? function () { ?

? ? ? ? ? ? ? ? alert(om); // 显示 undefined ?//但是不报 JS 错误

? ? ? ? ? ? ? ? if ( false ) { var om = 'abc' ;} // 此处声明没有机会执行 ?

? ? ? ? } ??

?

? ? ? ? JS 解析器在执行语句前会将函数声明和变量定义进行"预编译"(按<script>块、段来预编译的)

? ? ? ? ? ? ? ? function addB() {...}是声明,会预编译

? ? ? ? ? ? ? ? var addB = function addB() {...}是声明,会预编译

? ? ? ? ? ? ? ? var addB = function{...}是预声明,只有执行到此代码时才会编译,不会预编译。不能在它之前使用addB方法

?

? ? ? ? js代码只要写在<script>块里面就行,不一定非要是function结构,可以直接写语句。

?

? ? ? ? head中的js--->页面中的js(body标签内或body标签外都一样)-->body标签onload(加载完后的)事件中的js.

?

?

JavaScript 实现是由以下 3 个不同部分组成的:

? ? ? ? 核心(ECMAScript) js语法及js内置对象

? ? ? ? 文档对象模型(DOM)?

? ? ? ? 浏览器对象模型(BOM)?

?

js可以自由使用这3类对象

? ? ? ? 宿主对象:寄宿浏览器提供的对象:DOM,BOM

? ? ? ? 本地对象:17个,其中Math为静态类的,Global的方法和属性直接用,不需要"对象."或"Global."

?

本地对象(大部分)都有的2个属性

? ? ? ? constructor ? ? ?所建立对象的函数参考

? ? ? ? prototype ? ? ? 能够为对象加入的属性和方法

? ? ? ? function comet1(str){ ? ? ? ? ? ? ? ?//自定义的类(构造函数comet1)

? ? ? ? ? ? ? ? this.aaa = str

? ? ? ? }

? ? ? ? comet1.prototype.aaa = 55; ? ? ? ? ? ? ? ?//只有通过构造函数才能用prototype,动态添加属性或方法

? ? ? ? var comet = {};comet.aaa=55; ? ? ? ? ? ? ? ?//对象的话不需要prototype,直接动态添加

?

1.Date

? ? ? ? 方法(43):

? ? ? ? ? ? ? ? getFullYear() ? ? 返回完整的4位年份数

? ? ? ? ? ? ? ? getMonth() ? ? ?返回月份数(0-11)

? ? ? ? ? ? ? ? getDate() ? ? ? 返回日(1-31)

? ? ? ? ? ? ? ? getHours() ? ? ? 返回小时数(0-23)

? ? ? ? ? ? ? ? getMinutes() ? ? ?返回分钟(0-59)

? ? ? ? ? ? ? ? getSeconds() ? ? ?返回秒数(0-59)

? ? ? ? ? ? ? ? getMilliseconds() 返回毫秒(0-999)

?

2.Math ? ? ? ?//静态类

3.Number

4.Boolean

5.String

? ? ? ? 属性-额外:

? ? ? ? ? ? ? ? length ? ? ?返回字符串的字符长度

?

? ? ? ? 方法(20):

? ? ? ? ? ? ? ? charAt(index) 返回指定索引处的字符

? ? ? ? ? ? ? ? indexOf(searchString, startIndex) 返回字符串中第一个出现指定字符串的位置

? ? ? ? ? ? ? ? lastlndexOf(searchString, startIndex) 返回字符串中最后一个出现指定字符串的位置

? ? ? ? ? ? ? ? match(string)或match(regex) 在字符串中查找指定值,

? ? ? ? ? ? ? ? ? ? ? ? 类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

? ? ? ? ? ? ? ? ? ? ? ? var str="Hello 12 world! 34 Hello 56 ok 12"

? ? ? ? ? ? ? ? ? ? ? ? alert(str.match("Hello")); ? ? ? ?//Hello

? ? ? ? ? ? ? ? ? ? ? ? alert(str.match(/\d+/)); ? ? ? ?//12

? ? ? ? ? ? ? ? ? ? ? ? alert(str.match(/\d+/g)); ? ? ? ?//12,34,56,12

? ? ? ? ? ? ? ? replace(string, newString)或replace(regex, newString)将字符串中的某些字符替换成其它字符

? ? ? ? ? ? ? ? ? ? ? ? var reg= new RegExp(",","g");

? ? ? ? ? ? ? ? ? ? ? ? var custFloor=regFloor.replace(reg,"");

? ? ? ? ? ? ? ? ? ? ? ? var str="2010-10-19-16";

? ? ? ? ? ? ? ? ? ? ? ? alert(str.replace(/-/g, "\/"));"2010/10/19/16"

? ? ? ? ? ? ? ? ? ? ? ? alert(str.replace(/-/, "\/"));"2010/10-19-16"

? ? ? ? ? ? ? ? ? ? ? ? alert(str.replace("-", "\/"));"2010/10-19-16" ? ? ? ?//这个的参数是字符串,不是regex

? ? ? ? ? ? ? ? search(regex) 针对某执行值对字符串进行查找

? ? ? ? ? ? ? ? slice(startIndex, endIndex)将部分字符抽出并在新的字符串中返回剩余部分

? ? ? ? ? ? ? ? split(delimiter)将字符串分配为数组

? ? ? ? ? ? ? ? substr(startIndex, length) 从startIndex取,取length个字符

? ? ? ? ? ? ? ? substring(startIndex, endIndex) 从startIndex和endIndex之间的字符,不包括endIndex

? ? ? ? ? ? ? ? ? ? ? ? js的substring和java的完全一致。

? ? ? ? ? ? ? ? toLowerCase() 把字符串中的文本变成小写

? ? ? ? ? ? ? ? toUpperCase() 把字符串中的文本变成大写

?

6.Array

? ? ? ? 属性-额外的:

? ? ? ? ? ? ? ? index ? ? ?For an array created by a regular expression match, the zero-based index of the match in the string.

? ? ? ? ? ? ? ? input ? ? ?For an array created by a regular expression match, reflects the original string against which the regular expression was matched.

? ? ? ? ? ? ? ? length ? ? ?获取数组元素的个数,即最大下标加1

?

? ? ? ? 方法(13):

? ? ? ? ? ? ? ? concat(array1,arrayn)将两个或两个以上的数组值连接起来,合并后返回结果

? ? ? ? ? ? ? ? join(string) 将数组中元素合并为字符串,string为分隔符.如省略参数则直接合并,不再分隔

? ? ? ? ? ? ? ? pop() ? ? ?移除数组中的最后一个元素并返回该元素

? ? ? ? ? ? ? ? push(value) 在数组的末尾加上一个或多个元素,并且返回新的数组长度值

? ? ? ? ? ? ? ? reverse() ? ?颠倒数组中元素的顺序,反向排列

? ? ? ? ? ? ? ? shift() ? ? 移除数组中的第一个元素并返回该元素

? ? ? ? ? ? ? ? slice(start, deleteCount, [item1[, item2[,...[,itemN]]]]) 返从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素

? ? ? ? ? ? ? ? sort(compare Function) 在未指定排序号的情况下,按照元素的字母顺序排列,如果不是字符串类型则转换成字符串再排序,返回排序后的数组

? ? ? ? ? ? ? ? splice() ? ? 为数组删除并添加新的元素

? ? ? ? ? ? ? ? toSource() ? ?显示对象的源代码

? ? ? ? ? ? ? ? toString() ? ?将数组所有元素返回一个字符串,其间用逗号分隔

? ? ? ? ? ? ? ? unshift(value)为数组的开始部分加上一个或多个元素,并且返回该数组的新长度

? ? ? ? ? ? ? ? valueOf() ? ?返回数组对象的原始值

?

7.RegExp

? ? ? ? 创建RegExp对象的两种定义方式:

? ? ? ? ? ? ? ? 1、var patt1=new RegExp("e","g");//new RegExp(pattern, attributes);attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m"

? ? ? ? ? ? ? ? ? ? ? ? i 执行对大小写不敏感的匹配。?

? ? ? ? ? ? ? ? ? ? ? ? g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。?

? ? ? ? ? ? ? ? ? ? ? ? m 执行多行匹配。?

? ? ? ? ? ? ? ? 2、var patt = /^\w+$/ ? ? ? ? ? ? ? ?//直接量语法

?

? ? ? ? RegExp对象的方法 ? ? ? ?

? ? ? ? ? ? ? ? compile 编译正则表达式。用于改变 RegExp。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var patt1=new RegExp("e");

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? patt1.compile("d");

? ? ? ? ? ? ? ? exec 检索字符串中指定的值。返回找到的值,并确定其位置。?

? ? ? ? ? ? ? ? ? ? ? ? var patt1=new RegExp("e","g");

? ? ? ? ? ? ? ? ? ? ? ? do{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? result=patt1.exec("The best things in life are free");

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? document.write(result);

? ? ? ? ? ? ? ? ? ? ? ? }while (result!=null)?

? ? ? ? ? ? ? ? ? ? ? ? 由于这个字符串中 6 个 "e" 字母,代码的输出将是:eeeeeenull

? ? ? ? ? ? ? ? test 检索字符串中指定的值。返回 true 或 false。?

? ? ? ? ? ? ? ? ? ? ? ? /\s+\w+\s+/.test(" ?llyu ");对

? ? ? ? ? ? ? ? ? ? ? ? "/\s+\w+\s+/".test(" ?llyu ")错

?

8.Function

9.Object

10.Global 全局-顶层

? ? ? ? 属性:

? ? ? ? ? ? ? ? Infinity ? ? 指定一个正负无穷大的数值

? ? ? ? ? ? ? ? NaN ? ? ? 指定一个 “非数字” 值

? ? ? ? ? ? ? ? undefined ? ?指定一个未被赋值的变量

?

? ? ? ? 方法:

? ? ? ? ? ? ? ? decodeURI() ? ? ? 为加密的URI进行解码

? ? ? ? ? ? ? ? decodeURIComponent() 为加密的URI组件解码

? ? ? ? ? ? ? ? encodeURI() ? ? ? 将字符串加密为URI

? ? ? ? ? ? ? ? encodeURIComponent() 将字符串加密为URI组件

? ? ? ? ? ? ? ? escape(string) ? ? ?加密一个字符串

? ? ? ? ? ? ? ? unescape() ? ? ? ?使用escape()对一个字符串进行解码

? ? ? ? ? ? ? ? eval(string) ? ? ? 判断一个字符串并将其以脚本代码的形式执行

? ? ? ? ? ? ? ? isFinite(number) ? ? 检测一个值是否为一个有限数字,返回True或False

? ? ? ? ? ? ? ? isNaN(string) ? ? ?检测一个值是否不是一个有限数字

? ? ? ? ? ? ? ? Number() ? ? ? ? 将一个对象的值转换为一个数字

? ? ? ? ? ? ? ? parseFloat(string) ? ?将一个字符串解析为一个浮点数字

? ? ? ? ? ? ? ? parseInt(string) ? ? 将一个字符串解析为一个整数,不是四舍五入操作,而是切尾

? ? ? ? ? ? ? ? String(object) ? ? ?将一个对象值转换为一个字符串

? ? ? ? ? ? ? ? number(object)

?

11-17:Error ,EvalError ,RangeError ,ReferenceError ,SyntaxError ,TypeError ,URIError?

?

18.自定义对象:属性和方法都可以访问,没有private属性这一说。

? ? ? ? 有初始化对象和定义构造函数的对象两种方法

? ? ? ? a:初始化对象,例如:

? ? ? ? ? ? ? ? var person = {

? ? ? ? ? ? ? ? ? ? ? ? name:"tom",age:25,

? ? ? ? ? ? ? ? ? ? ? ? test:function(str){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert(str);

? ? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? ? ? score:{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? chinese:87,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? english:91

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

?

? ? ? ? b: 自定义类,例如:

? ? ? ? ? ? ? ? function tearcher(firstname,age){

? ? ? ? ? ? ? ? ? ? ? ? this.firstname=firstname;

? ? ? ? ? ? ? ? ? ? ? ? this.age=age;

? ? ? ? ? ? ? ? ? ? ? ? this.test=function(str){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert(str);

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? var person = new tearcher("kebi",33);

? ? ? ? ? ? ? ? alert(person.age);

? ? ? ? ? ? ? ? person.test("hello");

? ? ? ? ? ? ? ? var person = new tearcher("kebi",33);

? ? ? ? ? ? ? ? person[0]= "test"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//只将数组元素添加到一个对象中并不会使它成为数组。

?

? ? ? ? c:使用Object类

? ? ? ? ? ? ? ? personObj=new Object()

? ? ? ? ? ? ? ? personObj.firstname="John"

? ? ? ? ? ? ? ? personObj.test=function(str){

? ? ? ? ? ? ? ? ? ? ? ? alert(str);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? alert(personObj.firstname);

? ? ? ? ? ? ? ? personObj.test("hello");

?

?

1、数组直接量:

? ? ? ? var es = [ ] ;

? ? ? ? var es = [ [ 1, {x:1 , y : 2}] , [ 2, {x:3 , y : 4}] ];//二维数组,数组项中包含对象

? ? ? ? alert(es) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//1,[object Object],2,[object Object]不输出Object ,是因为数组是一个具有额外功能层的对象.

2、数组构造

? ? ? ? var cars=new Array(2); ? ? ? ? ? ? ? ?//参数,为初始化时的数组大小,数组大小可以动态自动变化

? ? ? ? cars[0]="BMW"; ? ? ? ? ? ? ? ? ? ? ? ?//

? ? ? ? cars[1]=99; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//类型可以不一致

? ? ? ? cars["a"]="aaaaaa"; ? ? ? ? ? ? ? ? ? ? ? ?//数组length不变,cars["a"]或cars.a作为对象的属性存在

? ? ? ? cars.b="bbbbbb"; ? ? ? ? ? ? ? ? ? ? ? ?//数组length不变,cars.b或cars["b"]作为对象的属性存在

?

3、数组构造直接值

? ? ? ? var cars=new Array(99,"Volvo","BMW"); ? ? ? ?

?

1、对象

? ? ? ? var cars = {bm:"宝马",bc:"奔驰"} ? ? ? ? ? ? ? ?//cars.bm或cars["bm"]

? ? ? ? var cars = {"bm":"宝马","bc":"奔驰"} ? ? ? ? ? ? ? ?//cars.bm或cars["bm"]

? ? ? ? cars["a"]="aaaaaa"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//动态添加对象属性,cars["a"]或cars.a作为对象的属性存在

? ? ? ? cars.b="bbbbbb"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//动态添加对象属性,cars.b或cars["b"]作为对象的属性存在

?

? ? ? ? var mycars ={}

? ? ? ? mycars["a"]="aaaaaa"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//动态添加对象属性,cars["a"]或cars.a作为对象的属性存在

? ? ? ? mycars.b="bbbbbb"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//动态添加对象属性,cars.b或cars["b"]作为对象的属性存在

?

8, 删除数组元素和对象属性:

? ? ? ? 数组元素

? ? ? ? ? ? ? ? delete a[0]; ? ? ? ?//把元素设置为undefined;数组长度不变。真正删除调用Array的方法

? ? ? ? 对象属性

? ? ? ? ? ? ? ? var obj = {a:'a', b:'b'};

? ? ? ? ? ? ? ? var objItem = obj.a;

? ? ? ? ? ? ? ? delete obj.a;

? ? ? ? ? ? ? ? alert(objItem);//这里输出a

?

?

  相关解决方案