文档库 最新最全的文档下载
当前位置:文档库 › JAVASCRIPT对象基础讲解

JAVASCRIPT对象基础讲解

JAVASCRIPT对象基础讲解
JAVASCRIPT对象基础讲解

1.Object对象详解

javascript里最基本的数据类型是对象。javaScript里的对象其实是一个无序的属性集合,属性又是一个个的名-值对。

除了字符串,数字,true,false,null或者undefined以外,其他所有的值在JavaScript里头都是对象。

对象是引用类型,如果变量x表示一个对象,当执行var y=x;语句后,实际上y和x指向的是同一个对象。所以,当你通过y改变对象的值,这种变化也会反映到x上。

Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的。

1.1创建对象:

首先我们都知道,对象就是一组相似数据和功能的集合,我们就是用它来模拟我们现实世界中的对象的。那在Javascript中,创建对象的方式通常有两种方式:构造函数(new关键字)和对象字面量。

1.字面量表示法:

对象字面量很好理解,使用key/value的形式直接创建对象,简洁方便。

var book={};//创建一个没有属性的对象

var book={

name:"The Definitive Guide",

"main title":"JavaScript",//当属性名中间有空格,或者"-"时,要用引号把属性名括起来

author:{//对象的属性也可以是对象

firstname:"Rex",

lastname:"Mai

}

};

这种方式直接通过花括号将对象的属性包起来,使用key/value的方式创建对象属性,每个属性之间用逗号隔开。

注意:如果是最后一个属性,后面就不要加逗号,因为在一些旧的浏览器下会报错。

2.使用new关键字:

var o=new Object();//创建一个空对象,效果等同{}.

var d=new Date();//创建一个表示当前时间的对象

var r=new RegExp("js");//创建一个正则表达式对象

var person=new Object();

https://www.wendangku.net/doc/d017038638.html,="狼狼的蓝胖子";

person.age=25;

或者

function Person(name,age){

https://www.wendangku.net/doc/d017038638.html,=name;

this.age=age;

this.show=function(){}

}

var person=new Person("Jack",15);

Person.show()

这种方式使用new关键字,接着跟上Object构造函数,再来给对象实例动态添加上不同的属性。原型对象概念

无论什么时候,只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype 属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor (构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针。而通过这个构造函数,可以继续为原型对象添加其他属性和方法。创建了自定义的构造函数后,其原型对象默认只会取得constructor属性;至于其他方法,则都从Object继承而来。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262第5版管这个指针叫[[Prototype]]。脚本中没有标准的方式访问[[Prototype]],但Firefox、Safari和Chrome在每个对象上都支持一个属性__proto__;而在其他实现中,这个属性对脚本是完全不可见的。不过,要明确的真正重要的一点就是,这个连接存在于示例和构造函数的原型对象之间,而不是存在于实例和构造函数之间。

这段话基本概述了构造函数、原型、示例之间的关系,下图表示更清晰

其实javascript的new关键字只不过做了五件事情。

1.创建Object

2.查找class的prototype上的所有方法、属性,复制一份给创建的Object(注意,如果prototype 上有属性是function或者数组或者Object,那么只复制指针)

3.将构造函数classA内部的this指向创建的Object

4.创建的Object的__proto__指向class的prototype

5.执行构造函数class

//定义类类名字是classA

function classA(){

this.b=1;//在里面是this

this.query=function(){…}

}

classA.prototype.b=44;//在外边是classA.prototype

classA.prototype.show=function(){

alert(this.b);

};

//用new实例化

var b=new classA();

b.show();

1.2获取对象的值:

通过.或者[]操作符。

book.title;

book["title"];

var propertyName="title";

book[propertyName];

如果对象的属性是固定的,那么这两个方法的作用差别不大。但由于javascript是一种松散类型的语言,所以,你可以在程序运行期间为对象添加任意数量的属性。当你使用.操作符访问对象属性时,.后面的名字其实只是一个标识符,所以你必须完整的输入这个标识符,才能够访问到。

1.3Object对象属性及方法(了解)

constructor属性

constructor属性是保存当前对象的构造函数,前面的例子中,constructor保存的就是Object方法。

var obj1=new Object();

obj1.id="obj1";

var obj2={

"id":"obj2"

};

console.log(obj1.constructor);//function Object(){}

console.log(obj2.constructor);//function Object(){}

hasOwnProperty(propertyName)hasOwnProperty方法接收一个字符串参数,该参数表示属性名称,用来判断该属性是否在当前对象实例中,而不是在对象的原型链中。我们来看看下面这个例子:

isPrototypeOf(Object)方法isPrototype方法接收一个对象,用来判断当前对象是否在传入的参数对象的原型链上

propertyIsEnumerable(prototypeName)prototypeIsEnumerable用来判断给定的属性是否可以被for..in语句给枚举出来。

toLocaleString()toLocalString方法返回对象的字符串表示,和代码的执行环境有关。toString()方法toString用来返回对象的字符串表示。

valueOf()方法valueOf方法返回对象的原始值,可能是字符串、数值或bool值等,看具体的对象。

2.JS对象

2.1String对象

属性:

constructor所建立对象的函数参考

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

length返回字符串的字符长度

方法:

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

startIndex必需。要抽取的子串的起始下标,必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1指字符串中最后一个字符,-2指倒数第二个字符,以此类推。

length可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从stringObject的开始位置到结尾的字串。

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

startIndex必需。一个非负的整数,规定要提取的子串的第一个字符在stringObject中的位置。

stopIndex可选。一个非负的整数,比要提取的子串的最后一个字符在stringObject中的位置多1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

toSource()显示对象的源代码

valueOf()返回字符串对象的当前被赋予的值

string.toLowerCase()返回小写的新字符串.

string.toUpperCase()返回大写的新字符串.

string.concat(string…)将字符串连接在一起并返回.

string.charAt(pos)返回pos位置上的字符串(js没有char类型).若pos<0或>=string.length,则返回空字符串.

str1.localeCompare(str2)比较两个字符串,若str1

string.slice(start,end)复制string的内容,范围[start,end),不包含end位置的内容.这个函数的参数取值情况和array.slice()参数取值情况差不多.

string.split(separator,limit)将string根据separator的要求分隔内容,返回形成的数组.limit参数是可选的,表示分隔的最大个数.separator是一个字符串或者正则表达式.这个方法忽略'g'.

string.charCodeAt(pos)

与charAt()的区别在于返回位置上字符串对应的字符编码值(unicode),若pos不在合法范围内,就返回NaN.示例,英文逗号",".charCodeAt(0)==44

var s='戴忠';

var i;

for(i=0;i

console.log(i+''+s.charAt(i)+''+s.charCodeAt(i));//0戴251401忠24544 }

https://www.wendangku.net/doc/d017038638.html,stIndexOf(searchString,pos)它与indexOf(searchString,pos)的区别在于查找方向相反,从pos位置开始向前查找.

string.indexOf(searchString,pos)

从string的pos开始向后查找searchString,若找到则返回searchString出现的初始位置,否则返回-1.

一般用来判断是否含有某个字符,比如是否含有%号percent.indexOf("%")>0代表字符串percent中含有%

以上代码的输出:

-1

6

string.match(regexp)若regexp带'g',则返回包含匹配内容的数组(不包含分组).没有'g'时,则和regexp.exec(string)返回相同的结果.例如, var s1='1a2b';

var reg1=/\d+/;

var reg2=/[^\d]+/g;

var reg3=/(\d)+/;

console.log(reg1.exec(s1));//['1',index:0,input:'1a2b']

console.log(s1.match(reg1));//['1',index:0,input:'1a2b']

console.log(s1.match(reg3));//['1','1',index:0,input:'1a2b']

console.log(s1.match(reg2));//['a','b']

String.fromCharCode(code…)

参数是一些数值,把这些数值作为字符的编码值对待,返回一个字符串.这个方法和charCodeAt()相反.

var str=String.fromCharCode(25140,24544);

console.log(str);//'戴忠'

anchor("name")用来把字符串转换为HTML锚点标记内()

big()把字符串中的文本变成大字体()

blink()把字符串中的文本变成闪烁字体()

bold()把字符串中的文本变成黑字体()

fixed()把字符串中的文本变成固定间距字体,即电报形式()

fontcolor(color)设置字符串中文本的颜色()

Fontsize(size)把字符串中的文本变成指定大小()

italics()把字符串中的文本变成斜字体()

Link(url)用来把字符串转换-HTML链接标记中()

small()把字符串中的文本变成小字体()

strike()把字符串中的文本变成划掉字体()

sub()把字符串中的文本变成下标(subscript)字体((SUB>)

sup()把字符串中的文本变成上标(superscript)字体()

string.search(regexp)用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。与indexOf()功能类似,返回值情况相同.这个方法忽略'g'.

regexp可以是需要在stringObject中检索的子串,也可以是需要检索的RegExp对象。

注释:要执行忽略大小写的检索,请追加标志i。

返回string中第一个与regexp相匹配的子串的起始位置。如果没有找到任何匹配的子串,则返回-1。

string.replace(regexp/substr,replacement)

replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的方法字符串

stringObject的replace()方法执行的是查找并替换的操作。它将在string中查找与regexp 相匹配的子字符串,然后用replacement来替换这些子串。如果regexp具有全局标志g,那么replace()方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为RegExp对象。如str.replace("%","");把str百分号替换为空如果把%替换成$则需要使用”$$”$字符更多特定的含义参考相关资料

replacement可以是字符串,也可以是函数。如果它是字符串,那么每个匹配都将由字符串替换。

注:

replaceValue为函数的时候

把字符串中所有单词的首字母都转换为大写:

name='aaa bbb ccc';

uw=name.replace(/\b\w+\b/g,function(word){

return word.substring(0,1).toUpperCase()+word.substring(1);}

);

2.2Number对象

valueOf()

返回数学对象的原始值

number.toExponential(fractionDigits)

将数字转换为指数表示形式字符串,fractionDigits指定指数的小数位的位数,取值区间[0,20].

number.toFixed(fractionDigits)

将数字表示成10进制字符串,fractionDigits同上.

number.toPrecision(precision)

与toFixed()类同,只是precision指定的是数字的有效位数,取值范围[0,21]. number.toString(radix)

将number转换为需要的进制字符串形式,radix默认是10.

2.3Date对象

var date=new Date();

属性:

constructor所建立对象的函数参考

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

方法:

getDay()返回一周中的第几天(0-6)

getYear()返回年份.2000年以前为2位,2000(包含)以后为4位

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

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

getDate()返回日(1-31)

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

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

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

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

getUTCDay()依据国际时间来得到现在是星期几(0-6)

getUTCFullYear()依据国际时间来得到完整的年份

getUTCMonth()依据国际时间来得到月份(0-11)

getUTCDate()依据国际时间来得到日(1-31)

getUTCHours()依据国际时间来得到小时(0-23)

getUTCMinutes()依据国际时间来返回分钟(0-59)

getUTCSeconds()依据国际时间来返回秒(0-59)

getUTCMilliseconds()依据国际时间来返回毫秒(0-999)

getTime()返回从1970年1月1号0:0:0到现在一共花去的毫秒数

getTimezoneoffset()返回时区偏差值,即格林威治平均时间(GMT)与运行脚本的计算机所处时区设置之间相差的分钟数)

parse(dateString)返回在Date字符串中自从1970年1月1日00:00:00以来的毫秒数setYear(yearInt)设置年份.2位数或4位数

setFullYear(yearInt)设置年份.4位数

setMonth(monthInt)设置月份(0-11)

setDate(dateInt)设置日(1-31)

setHours(hourInt)设置小时数(0-23)

setMinutes(minInt)设置分钟数(0-59)

setSeconds(secInt)设置秒数(0-59)

setMilliseconds(milliInt)设置毫秒(0-999)

setUTCFullYear(yearInt)依据国际时间来设置年份

setUTCMonth(monthInt)依据国际时间来设置月(0-11)

setUTCDate(dateInt)依据国际时间来设置日(1-31)

setUTCHours(hourInt)依据国际时间来设置小时

setUTCMinutes(minInt)依据国际时间来设置分钟

setUTCSeconds(secInt)依据国际时间来设置秒

setUTCMilliseconds(milliInt)依据国际时间来设置毫秒

setTime(timeInt)设置从1970年1月1日开始的时间.毫秒数

toGMTString()根据格林威治时间将Date对象的日期(一个数值)转变成一个GMT时间字符串,如:Weds,15June l99714:02:02GMT

toUTCString()根据通用时间将一个Date对象的日期转换为一个字符串

toLocaleString()把Date对象的日期(一个数值)转变成一个字符串,使用所在计算机上配置使用的特定日期格式

toSource()显示对象的源代码

toString()将日期对象转换为字符串

UTC(yyyy,mm,dd,hh,mm,ss,msec)返回从格林威治标准时间到指定时间的差距,单位为毫秒valueOf()返回日期对象的原始值

2.4RegExp对象

创建方式

两种RegExp对象创建方式:

方式一,new RegExp(pattern,attributes);

参数pattern是一个字符串,指定了正则表达式的模式或其他正则表达式。

参数attributes是一个可选的字符串,包含属性"g"、"i"和"m",g,全局匹配,i 不区分大小写,m执行多行匹配,用最多的为g和i,如果pattern是正则表达式,而不是字符串,则必须省略该参数。

方式二,通过直接量赋值:/pattern/attributes

如:var regExp=/^[a-zA-Z0-9]{3,8}$/g;

区别:

var rExp1=new RegExp("\\d+");

var rExp2=/\d+/;首尾斜杠是直接量的语法,表示两个斜杠之间就是正则内容

//以上是等价的。

常用方法:

test(string),检索字符串中指定的值。返回true或false。

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

1.regexp.test(String)

regexp配置string,则返回true,否则返回false.

test()时,不应使用g,性能优于exec().

2.regexp.exec(String)

exec()方法用于检索字符串中的正则表达式的匹配。String必需。要检索的字符串。

exec()方法的功能非常强大,它是一个通用的方法,而且使用起来也比test()方法以及支持正则表达式的String对象的方法如[match(),search(),replace()]更为复杂。

exec和match区别

match方法属于String正则表达方法.match的用法主要区分就是,正则表达式是否有全局标示g. exec属于正则表达式对象的方法.

exec和match返回的都是数组

如果执行exec方法的正则表达式没有分组(子表达式)(小括号内的内容,如/abc(\s*)/中的(\s*)),那么如果有匹配,他将返回一个只有一个元素的数组,这个数组唯一的元素就是该正则表达式匹配的第一个串;如果没有匹配则返回null。

下面两个alert函数弹出的信息是一样的:

1.无分组(圆括号),无g(全局匹配)

var str="cat,hat";

var p=/at/;//没有g属性

alert(p.exec(str))//at

alert(str.match(p))//at

都是"at"。在这种场合下exec等价于match。

但是如果正则表达式是全局匹配(g属性)的,那么以上代码结果不一样了:

2.无分组,有g

var str="cat,hat";

var p=/at/g;//注意g属性

alert(p.exec(str))//at

alert(str.match(p))//at,at

分别是

"at"

"at,at"。

因为exec永远只返回第一个匹配,而match在正则指定了g属性的时候,会返回所有匹配。

3.有分组,无g

3.exec如果找到了匹配,而且包含分组的话,返回的数组将包含多个元素,第一个元素是找到的匹配,之后的元素依次为该匹配中的第一、第二...个分组(反向引用)

var str="cat2,hat8";

var p=/c(at)\d/;

alert(p.exec(str))//cat2,at

alert(str.match(p))//cat2,at

两个都返回”cat2,at”其中第一个元素是匹配的字符串"cat2",之后的元素是括号中匹配的"at"。

4.有分组,有g

var str="cat2,hat8";

var p=/c(at)\d/g;

alert(p.exec(str))//返回cat2,at

alert(str.match(p))//返回cat2

总结为:

(1)当无g时,match的返回结果和exec是相同的,有无分组不受影响,当有g时,其将返回包含所有匹配项的数组(其中不包含子匹配,如例4)。

(2)当有分组时,exec返回数组的第一个元素为匹配的完整串.后续元素为括号里捕获的字符串,当无分组时,只返回第一个匹配,g有没有都无影响

(3)\d:用于匹配从0到9的数字;

正则表达式基本语法

'^'和'$'

两个特殊的符号'^'和'$'。他们的作用是分别指出一个字符串的开始和结束。例子如下:

"^The":表示所有以"The"开始的字符串("There","The cat"等);

"of despair$":表示所以以"of despair"结尾的字符串;

"^abc$":表示开始和结尾都是"abc"的字符串——呵呵,只有"abc"自己了;

"notice":表示任何包含"notice"的字符串。

像最后那个例子,如果你不使用两个特殊字符,你就在表示要查找的串在被查找串的任意部分——你并不把它定位在某一个顶端。

'*','+'和'?'

其它还有'*','+'和'?'这三个符号,表示一个或一序列字符重复出现的次数。它们分别表示“0或

更多”,“1或更多”还有“0或1”。下面是几个例子:

"ab*":表示一个字符串有一个a后面跟着零个或若干个b。("a","ab","abbb",……);

"ab+":表示一个字符串有一个a后面跟着至少一个b或者更多;

"ab?":表示一个字符串有一个a后面跟着零个或者一个b;

"a?b+$":表示在字符串的末尾有零个或一个a跟着一个或几个b。

{}表示范围

你也可以使用范围,用大括号括起,用以表示重复次数的范围。

"ab{2}":表示一个字符串有一个a跟着2个b("abb");

"ab{2,}":表示一个字符串有一个a跟着至少2个b;

"ab{3,5}":表示一个字符串有一个a跟着3到5个b。

{1,20}表示数字字符串长度合法为1到20,

请注意,你必须指定范围的下限(如:"{0,2}"而不是"{,2}")。还有,你可能注意到了,'*','+'和'?'等同于"{0,}","{1,}"和"{0,1}"。

'|',表示“或”操作:

"hi|hello":表示一个字符串里有"hi"或者"hello";

"(b|cd)ef":表示"bef"或"cdef";

"(a|b)*c":表示一串"a""b"混合的字符串后面跟一个"c";

“.”可以替代任何字符:

"a.[0-9]":表示一个字符串有一个"a"后面跟着一个任意字符和一个数字;

"^.{3}$":表示有任意三个字符的字符串(长度为3个字符);

[]中的内容是可选字符集

方括号表示某些字符允许在一个字符串中的某一特定位置出现:

"[ab]":表示一个字符串有一个"a"或"b"(相当于"a|b");

"[a-d]":表示一个字符串包含小写的'a'到'd'中的一个(相当于"a|b|c|d"或者"[abcd]");

"^[a-zA-Z]":表示一个以字母开头的字符串;

"[0-9]%":表示一个百分号前有一位的数字;

",[a-zA-Z0-9]$":表示一个字符串以一个逗号后面跟着一个字母或数字结束。

小括号就是括号内看成一个整体,中括号就是匹配括号内的其中一个,大括号就是匹配几次

你也可以在方括号里用'^'表示不希望出现的字符,'^'应在方括号里的第一位。(如:"%[^a-zA-Z]%"表

示两个百分号中不应该出现字母)。

为了逐字表达,你必须在"^.$()|*+?{\"这些字符前加上转移字符'\'。

请注意在方括号中,不需要转义字符。

\w:用于匹配字母,数字或下划线字符

\d:用于匹配从0到9的数字;

\/:表示字符“/”。

项目实战

js使用正则表达式

var invoiceValue=document.getElementById("invoiceValue").value;

var invoiceMoney=document.getElementById("invoiceMoney").value;

if(isNaN(invoiceMoney)){

alert("发票面额只能输入数字");

return false;

}

if(invoiceMoney.length>9){

alert("发票面额输入长度不能超过9位数");

return false;

}

var re=/^[0-9]*[1-9][0-9]*$/;

var flag=re.test(invoiceValue);

if(flag==false){

alert("张数只能输入正整数");

return false;

}

2.5Math对象

属性:

constructor所建立对象的函数参考

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

E欧拉常量,自然对数的底(约等于2.718)

LN22的自然对数(约等于0.693)

LN1010的自然对数(约等于2.302)

LOG2E以2为底的e的对数.(约等于1.442)

LOG10E以10为底的e的对数(约等于0.434)

PI∏的值(约等于3.14159)

SQRT1_21/2(0.5)的平方根(即l除以2的平方根,约等于o.707)

SQRT22的平方根(约等于1.414)

方法:

abs(x)返回数字的绝对值

acos(x)返回数字的反余弦值

asin(x)返回数字的反正弦值

atan(x)返回位于-PI/2和PI/2的反正切值

atan2(y,x)返回(x,y)位于-PI到PI之间的角度

ceil(x)ceil()方法执行的是向上取整计算,它返回的是大于或等于x,并且与之最接近的整数。与floor是一对相反的函数

cos(x)返回一个数字的余弦值

exp(x)返回E^x值

floor(x)floor()方法执行的是向下取整计算,它返回的是小于或等于x,并且与之最接近的整数。

log(x)返回底数为E的自然对数

max(x,y)返回x和y之间较大的数

min(x,y)返回x和y之间较小的数

pow(x,y)y^x,返回x的y次幂的值

random()返回位于0到1之间的随机函数

round(x)四舍五入后取整

sin(x)返回数字的正弦值

sqrt(x)返回数字的平方根

tan(x)返回一个角度的正切值

toSource()显示对象的源代码

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

扩展:

1.绝对值是指一个数在数轴上所对应点到原点的距离叫做这个数的绝对值,是两个点的距离,,绝对值用“||”来表示。|b-a|或|a-b|表示数轴上表示a的点和表示b的点的距离,(零绝对值0).

2.四舍五入都是对小数而言的.

3.x=y%2表示,x=y/2的余数

2.6Array对象数组

章节4详细介绍数组

属性:

constructor所建立对象的函数参考

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

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

方法:

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

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

隔返回array的字符串表示

pop()移除数组中的最后一个元素并返回该元素,并将这个元素作为返回值。array为空时,返回undefined。

array.push(item…)

将item添加到array的尾部,返回array的新长度值。

注意,若item是数组,则把它作为array的一项直接加入,这和concat的处理方式不同.与concat的区别:1.push()修改array,而concat()生成新数组;2.对于item是数组的情况,处理方式不同。

reverse()倒置array的内容,并返回array。

shift()移除数组中的第一个元素并返回该元素,array为空时,返回undefined。

sort(compare Function)在未指定排序号的情况下,按照元素的字母顺序排列,如果不是字符串类型则转换成字符串再排序,返回排序后的数组,将数组根据比较函数定义的规则重新排序后,返回array.默认是将array的内容按照字符串的形式比较,所以通常需要自定义比较函数;比较函数的一般形式是function(a,b){…},若a<=b时则a在b之前,a>b时则a在b之后.

toSource()显示对象的源代码

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

unshift(value)为数组的开始部分加上一个或多个元素,并且返回该数组的新长度,与push()类似,将item们插入array头部,返回array的新长度.

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

从数组结尾处规定位置。

howmany必需。要删除的项目数量。如果设置为0,则不会删除

项目。

item1,...,itemX可选。向数组添加的新项目。

说明

splice()方法可删除从index处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从arrayObject中删除了元素,则返回的是含有被删除的元素的数组。Boolean对象与Function略

3.JS函数

特点:关键字function;无需指定返回值类型;参数列表声明不需var关键字;无函数重载;函数内部可以直接调用arguments数组(隐式定义),该数组存储了实参列表;函数名代表一种引用类型,可用(函数名instanceof Function)测试;打印函数引用会输出整个函数定义。

3.1动态函数和匿名函数

1)动态函数:动态函数是通过js的内置对象Function定义。形式为:new Function(arg1,arg2),由于arg1和arg2为变量,所以可以动态指定。如:

var run=new Function(“x,y”,”return x+y;”);

2)匿名函数:没有函数名,形如:var run=function(x,y){return x+y;};

注:打印动态函数的引用可以发现动态函数也是匿名函数。

3.2全局函数

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

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

Eg:sum+=Number(cell.innerText);

eval(str)接收一个字符串形式的表达式,并试图求出表达式的值。作为参数的表达式可以采用任何合法的操作符和常数。如果参数中包含JS命令,这些命令也可以被执行,就像这些命令是JS程序的一部分一样。

函数可计算某个字符串,并执行其中的的JavaScript代码。eval("2+3")//返回5 decodeURI(URIstring)为加密的URI进行解码

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

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

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

parseInt(str)将一个字符串解析为一个整数,不是四舍五入操作,而是切尾试图从一个字符串中提取一个整数。可附加一个n整数实现返回n进制整数。如果在字符串中存在除了数字、符号、小数点和指数符号以外的字符,就停止转换,返回已有的结果。如果第一个字符就不能转换,函数就返回NaN值。

parseFloat(str)试图从一个字符串中提取一个浮点值。如果在字符串中存在除了数字、符号、小数点和指数符号以外的字符,就停止转换并返回已有的结果。如果第一个字符就不能转换,函数就返回NaN值。

isNaN()用于判断是否为NaN值类型,如果是函数返回true。

isFinite(number)可以判断参数number是否是一个无穷。如果是则函数返回false,否则返回true。

escape(string)对一个字符串进行解码

接受一个字符串,这个字符串中可能含有空格、分号等字符。函数把字符串转换成Cookie的内部表示方式。函数返回值就是这种内部的表达方式。

函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串

unescape(string)接受一个Cookie,把其内部表达方式转化成普通的字符串形式。JS函数一共可分为常规函数、数组函数、日期函数、数学函数、字符串函数等五类。

4.JS中数组的操作

4.1数组的创建(两种创建方式)

1)var arr=[123,”abc”,true,null]

2)

var arrayObj=new Array();//创建一个数组

var arr=new Array(4);//创建数组长度为4的数组

var arr=new Array(123,”abc”,true,null);//等同于1)

要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变

注意:

①js中,数组元素类型可以不一致。

②js中,数组长度可以动态改变。

③接着上述代码,typeof arr和arr instanceof Array分别输出object和true。

4.2数组的元素的访问

var testGetArrValue=arrayObj[1];//获取数组的元素值

arrayObj[1]="这是新值";//给数组元素赋予新的值

4.3数组元素的添加

arrayObj.push([item1[item2[...[itemN]]]]);//将一个或多个新元素添加到数组结尾,并返回数组新长度

arrayObj.unshift([item1[item2[...[itemN]]]]);//将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度

arrayObj.splice(insertPos,0,[item1[,item2[,...[,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。

4.4数组元素的删除

arrayObj.pop();//移除最后一个元素并返回该元素值

arrayObj.shift();//移除最前一个元素并返回该元素值,数组中元素自动前移

arrayObj.splice(deletePos,deleteCount);//删除从指定位置deletePos开始的指定数量deleteCount 的元素,数组形式返回所移除的元素

4.5数组的截取和合并

arrayObj.slice(start,[end]);//以数组的形式返回数组的一部分,注意不包括end对应的元素,如果省略end将复制start之后的所有元素

arrayObj.concat([item1[,item2[,...[,itemN]]]]);//将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

4.6数组的拷贝

arrayObj.slice(0);//返回数组的拷贝数组,注意是一个新的数组,不是指向

arrayObj.concat();//返回数组的拷贝数组,注意是一个新的数组,不是指向

4.7数组元素的排序

arrayObj.reverse();//反转元素(最前的排到最后、最后的排到最前),返回数组地址arrayObj.sort();//对数组元素排序,返回数组地址

4.8数组元素的字符串化

arrayObj.join(separator);//返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用separator隔开。

toLocaleString、toString、valueOf:可以看作是join的特殊用法,不常用

4.9数组对象的3个属性

1、length属性

Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子:

var arr=[12,23,5,3,25,98,76,54,56,76];

//定义了一个包含10个数字的数组

alert(arr.length);//显示数组的长度10

arr.length=12;//增大数组的长度

alert(arr.length);//显示数组的长度已经变为12

alert(arr[8]);//显示第9个元素的值,为56

arr.length=5;//将数组的长度减少到5,索引等于或超过5的元素被丢弃

alert(arr[8]);//显示第9个元素已经变为"undefined"

arr.length=10;//将数组长度恢复为10

alert(arr[8]);//虽然长度被恢复为10,但第9个元素却无法收回,显示"undefined"

由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置,它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量,同样,也可以使用一个未定义的数组元素(指索引超过或等于length的元素),这时,length属性的值将被设置为所使用元素索引的值加1。例如下面的代码:

var arr=[12,23,5,3,25,98,76,54,56,76];

alert(arr.length);

arr[15]=34;

alert(arr.length);

JavaScript入门教程(初学者不可多得的优秀入门教材,通俗易懂,专业术语通俗化)

第 1 章 JavaScript 语言入门 1 为什么学习 JavaScript
提要:Javascript 是学习脚本语言的首选。她兼容性好,绝大多数浏览器均支持 Javascript,而且她功能强大,实现简单方便,入门简单,即使是程序设计新手也可以非常 快速容易地使用 JavaScript 进行简单的编程。
Javascript 是由 Netscape 公司创造的一种脚本语言。为便于推广,被定为 javascript,但 是 javascript 与 java 是两门不相干的语言, 作用也不一样。 作为一门独立的编程语言, javascript 可以做很多的事情,但它最主流的应用还是在 Web 上——创建动态网页(即网页特效)。 Javascript 在网络上应用广泛, 几乎所有的动态网页里都能找到它的身影。 目前流行的 AJAX 也是依赖于 Javascript 而存在的。 Javascript 与 Jscript 也不是一门相同的语言, Jscript 和 vbscript 是微软开发的两种脚本语 言,微软,Netscape 公司以及其他语言开发商为减少 web 开发者的兼容麻烦,所以成立 ECMA , 该组 织 专 门制定 脚 本 语 言的 标 准 和规范 。 ECMA 制 定 的标 准脚 本 语 言 叫做 ECMAScript,Javascript 符合 ECMA 的标准,其实 Javascript 也可以叫做 ECMAScript. Jscript 也 ECMA 的标准, 但用户较少。vbscript 仅局限在微软的用户, Netscape 不支持。 概括地说,JavaScript 就是一种基于对象和事件驱动,并具有安全性能的脚本语言,脚 本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言, 而不需要服务器的 处理和响应,当然 JavaScript 也可以做到与服务器的交互响应,而且功能也很强大。而相对 的服务器语言像 asp https://www.wendangku.net/doc/d017038638.html, php jsp 等需要将命令上传服务器,由服务器处理后回传处理结 果。对象和事件是 JavaScript 的两个核心。 JavaScript 可以被嵌入到 HTML 文件中,不需要经过 Web 服务器就可以对用户操作作 出响应,使网页更好地与用户交互;在利用客户端个人电脑性能资源的同时,适当减小服务 器端的压力,并减少用户等待时间。
2 将 JavaScript 插入网页的方法
与在网页中插入 CSS 的方式相似,使用
language="javascript"表示使用 JavaScript 脚本语言,脚本语言还有 vbscript、 jsscript 等,如果没有 language 属性,表示默认使用 JavaScript 脚本。其中的...就是代 码的内容。例如:

js基础知识

Js1k:用1k的代码做出炫目的效果。代码扩写 犀牛书 微信公众号:前端大全 1. ***变量 2. ***数据类型 一.***变量:内存中存储*一个*数据的存储空间,再起一个名字 何时使用:程序中反复使用的数据,都要先保存在变量中,再参与运算 如何使用:声明赋值取值 1. 声明:在内存中创建一个新变量 如何声明:var 变量名; 仅声明,但暂未赋值,默认值为undefined 变量命名:1. 不能以数字开头,仅能包含字母,数字和下划线 2. 不能用保留字:js中已经预先使用的关键字 比如:name X 3. 见名知意 4. 驼峰命名:第一个单词首字母小写, 之后每个单词首字母大写: 比如:backgroundColor,listStyleType 2. 赋值:将等号*右边*的数据,保存到等号*左边*的变量中 如何赋值:变量名=值;il *对已经包含值的变量赋新值,新值会替换旧值* 建议:1. 在声明同时,初始化变量的值 如何在声明同时初始化:var 变量名=值; 3. 取值:只要使用变量名,在运行时,会被自动替换为变量中的值 特殊情况:3种: 1. 只声明,但未赋值的变量,可任意使用 比如:var hb; console.log(hb); //undefined 2. 从未声明的变量,不能使用(取值)! 报错:ReferenceError: XXX is not defined 3. 未声明的变量,却可赋值!——其实和var不一样 强烈建议:必须用var声明变量 ***声明提前:在程序正式*执行前*,都会将var声明的变量提前到*当前脚本块*的顶部集中声明。再开始执行程序。***赋值留在原地*** 常量:一旦初始化,值不能改变的量 何时使用:程序中,一旦定义不可擅自改变的值,都要用常量保存 如何创建:const 常量名=值; 用作常量的名称,都要大写字母 强行修改常量的值,不会报错,但也无法修改成功!

Javascript基础教程

Javascript简介 (2) Javascript简介 (2) 简单的Javascript入门示例 (4) 编写Javascript 代码 (5) 语句(Statements) (5) 语句块(Blocks) (6) 注释(Comments) (7) 表达式(Expressions) (8) 赋值和等于(Assignments and Equality) (9) Javascript常用运算符(Operators) (10) 算术运算符 (10) 逻辑运算符 (11) 赋值运算符 (12) Javascript 循环语句(Javascript Loop Statements) (12) 使用for 循环语句 (13) 使用for...in 循环语句 . (15) 使用while 和do...while 循环语句 (17) 使用break 和continue 语句 (20) Javascript写在哪里 (23) Javascript在之间 (23)

Javascript在之间 (24) Javascript放在外部文件里 (25) Javascript变量(Javascript Variables) (26) 什么是变量? (26) 变量的声明(Declaring Variables) (26) 变量的命名规则 (27) Javascript条件语句(Javascript Conditional Statements) (27) 单项条件结构(if条件语句) (28) 双向条件结构(if...else条件语句) (29) 多项条件结构(switch条件语句) (31) Javascript保留字(Javascript Reserved Words) (32) Javascript未来保留字(Javascript Future Reserved Words) (33) Javascript简介 Javascript简介

JavaScript常用知识点

1、GET和POST的区别,何时使用POST? GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符 POST:一般用于修改服务器上的资源,对所发送的信息没有限制。 GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值, 也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。 然而,在以下情况中,请使用POST 请求: 无法使用缓存文件(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 没有数据量限制) 发送包含未知字符的用户输入时,POST 比GET 更稳定也更可靠JavaScript是客户端和服务器端脚本语言,可以插入到HTML页面中,并且是目前较热门的Web开发语言。同时,JavaScript也是面向对象编程语言。 类似的基本题目还包括:JavaScript都有哪些类型?JavaScript是谁发明的?……2、列举Java和JavaScript之间的区别? Java是一门十分完整、成熟的编程语言。相比之下,JavaScript是一个可以被引入HTML页面的编程语言。这两种语言并不完全相互依赖,而是针对不同的意图而设计的。Java是一种面向对象编程(OOPS)或结构化编程语言,类似的如C ++或C,而JavaScript是客户端脚本语言,它被称为非结构化编程。

3. JavaScript和ASP脚本相比,哪个更快? JavaScript更快。JavaScript是一种客户端语言,因此它不需要Web服务器的协助来执行。另一方面,ASP是服务器端语言,因此总是比JavaScript慢。值得注意的是,Javascript现在也可用于服务器端语言(nodejs)。 4、什么是负无穷大? 负无穷大是JavaScript中的一个数字,可以通过将负数除以零来得到。 5、如何将JavaScript代码分解成几行吗? 在字符串语句中可以通过在第一行末尾使用反斜杠“\”来完成 例:document.write(“This is \a program”); 如果不是在字符串语句中更改为新行,那么javaScript会忽略行中的断点。

JavaScript面向对象简介

JavaScript面向对象简介 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的OOP 语言能力。本文从对面向对象编程的介绍开始,带您探索JavaScript 的对象模型,最后描述 JavaScript 当中面向对象编程的一些概念。 复习JavaScript 如果您对JavaScript 的概念(如变量、类型、方法和作用域等)缺乏自信,您可以在重新介绍JavaScript这篇文章里学习这些概念。您也可以查阅这篇JavaScript 1.5 核心指南。 面向对象编程 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例,包括模块化,多态和封装几种技术。今天,许多流行的编程语言(如Java,JavaScript,C#,C+ +,Python,PHP,Ruby 和Objective-C)都支持面向对象编程(OOP)。 面向对象编程可以看作是使用一系列对象相互协作的软件设计,相对于传统观念,一个程序只是一些函数的集合,或简单的计算机指令列表。在OOP中,每个对象能够接收邮件,处理数据和发送消息给其他对象。每个对象都可以被看作是一个独立的小机器有不同的作用和责任。 面向对象程序设计的目的是促进更好的编程灵活性和可维护性,并在大型软件工程中广为流行。凭借其十分注重的模块化,面向对象的代码开发更简单,往后维护更容易理解,使其自身能更直接的分析,编码,理解复杂的情况和过程,比非模块化编程方法省事。1

术语 Namespace 命名空间 允许开发人员在一个专用的名称下捆绑所有功能代码的容器。 Class 类 定义对象的特征。 Object 对象 类的一个实例。 Property 属性 对象的特征,比如颜色。 Method 方法 对象的能力,比如行走。 Constructor 构造函数 实例化时调用的函数。 Inheritance 继承 一个类可以继承另一个类的特征。 Encapsulation 封装 类定义了对象的特征,方法只定义了方法如何执行。 Abstraction 抽象 结合复杂的继承,方法,属性,一个对象能够模拟现实的模型。 Polymorphism 多态 多意为‘许多’,态意为‘形态’。不同类可以定义相同的方法或属性。更多关于面向对象编程的描述,请参照维基百科的面向对象编程。 原型编程

JavaScript复习题

复习题1 一、选择题 1、写“Hello World”的正确javascript语法是 A. ("Hello World") B. "Hello World" C. ("Hello World") D. ("Hello World") 2、JS特性不包括( ) A.解释性 B.用于客户端 C.基于对象 D.面向对象 3、下列JS的判断语句中( )是正确的 (i==0)(i=0) i==0 then i=0 then 4、下列JavaScript的循环语句中( )是正确的 (i<10;i++) (i=0;i<10) i=1 to 10 (i=0;i<=10;i++) 5、下列的哪一个表达式将返回假 A.!(3<=1) B.(4>=4)&&(5<=2) C.(“a”==”a”)&&(“c”!=”d”) D.(2<3)||(3<2) 6、下列选项中,( )不是网页中的事件 7、有语句“var x=0;while(____) x+=2;”,要使while循环体执行10次,空白处的循环判定式应写为: A.x<10 B. x<=10 <20 <=20 8、JS语句 var a1=10; var a2=20; alert(“a1+a2=”+a1+a2) 将显示( )结果 +a2=30 +a2=1020+a2=a1+a2 9、将字串s中的所有字母变为小写字母的方法是( ) 、以下( )表达式产生一个0~7之间(含0,7)的随机整数. . floor()*8) 11、产生当前日期的方法是( ) (); () Date() Now() 12、如果想在网页显示后,动态地改变网页的标题( ) A.是不可能的 B.通过(“新的标题内容”) C. 通过=(“新的标题内容”) D. 通过(“新的标题内容”) 13、某网页中有一个窗体对象,其名称是mainForm,该窗体对象的第一个元素是按钮,其名称是myButton,表述该按钮对象的方法是()

基于对象的JavaScript语言

基于对象的JavaScript语言 一、对象的基本结构 JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。属性是对象在实施其所需要行为的过程中,实现信息的装载单位,从而与变量相关联;方法是指对象能够按照设计者的意图而被执行,从而与特定的函数相联。 二、引用对象的途径 一个对象要真正地被使用,可采用以下几种方式获得: 1、引用JavaScript内部对象;this window 2、由浏览器环境中提供;https://www.wendangku.net/doc/d017038638.html, 3、创建新对象。new 这就是说一个对象在被引用之前,这个对象必须存在,否则引用将毫无意义,而出现错误信息。 三、有关对象操作语句 1、For...in语句 格式如下:For(对象属性名in 已知对象名) 说明:该功能是用于对已知对象的所有属性进行操作的循环控制。它是将一个已知对象的所有属性反复置给一个变量;而不是使用计数器来实现的。它的优点是无需知道对象中属性的个数即可进行操作。 2、with语句 使用该语句的意思是:在该语句体内,任何对变量的引用被认为是这个对象的属性,以节省一些代码。with object{ ...} 所有在with语句后的花括号中的语句,都是在后面object对象的作用域的。 3、this关键字 this是对当前的引用,在JavaScript由于对象的引用是多层次,多方位的,往往一个对象的引用又需要对另一个对象的引用,而另一个对象有可能又要引用另一个对象,这样有可能造成混乱,最后自己已不知道现在引用的那一个对象,为此JavaScript提供了一个用于将对象指定当前对象的语句this。 4、New运算符可以创建一个新的对象 格式:

Javascript基础

表JS基本类型有什么?引用类型有什么? 基本类型:number,string,boolean,undefined,null 引用类型:基本类型以外的都是引用类型,如object/array/function/date等等 关于基本类型与引用类型的区别可以详细看看@Naraku_的这篇文章: [ JS 进阶] 基本类型引用类型简单赋值对象引用 概况起来有这么几个要点: 1.我们无法给基本类型的对象添加属性和方法; var m1 = 123; https://www.wendangku.net/doc/d017038638.html, = 'abc'; console.log(https://www.wendangku.net/doc/d017038638.html,); //输出:undefined 2.基本类型对象的比较是值比较,而引用类型对象的比较是引用比较; var m1 = 123, m2 = 123; console.log(m1 === m2); //输出:true var o1 = {}, o2 = {}; console.log(o1 === o2); //输出:false 3.基本类型对象是存储在栈内存中的,而引用类型对象其实是一个存储在栈内存中的一个堆内存地址。 4.基本类型对象赋值时(执行=号操作),是在栈内存中创建一个新的空间,然后将值复制一份到新的空间里。 5.引用类型对象赋值时(执行=号操作),也是在栈内存中复制一份一样的值,但这个值是一个堆内存地址,所以被赋值的那个对象跟前者其实是一个对象。 var o1 = {}; var o2 = o1; https://www.wendangku.net/doc/d017038638.html, = 'abc';console.log(https://www.wendangku.net/doc/d017038638.html,); // --> abc console.log(https://www.wendangku.net/doc/d017038638.html,); // --> abc o2.age = '123';console.log(o1.age); // --> 123console.log(o2.age); // --> 123 JS中的常见对置对象类

Javascript鼠标触发事件大全

Javascript鼠标事件大全 一般事件 事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件浏览器支持描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发

Vue.js基础知识汇总

Vue.js 专注于MVVM 模型的ViewModel 层。它通过双向数据绑定把View 层和Model 层连接了起来。Vue.js和其他库相比是一个小而美的库,作者的主要目的是通过一个尽量简单的API 产生可反映的数据绑定和可组合的视图组件,感觉作者的思路非常清晰。 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式。实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters) 在哲学领域内,尽量让MVVM数据绑定API尽可能简单。模块化和可组合性也是重要的设计考虑。vue不是一个全面的框架,它被设计成简单的和灵活的。你可以用它快速原型,或混合和匹配与其他库定义前端堆栈。 Vue。js的API是参考了AngularJS、KnockoutJS Ractive.js Rivets.js。尽管有相似之处,我相信Vue.js提供一个有价值能够让你在现在的一些现有框架中舍取其价值即使你已经熟悉其中的一些术语,建议您通过以下概念的概述,因为你的这些术语的概念可能在Vue.js的下文中有所不同 概念概述 ViewModel 一个对象,同步模型和视图. 在Vue.js中,ViewModels是实例化的Vue的构造器或者是它的子类 var vm = new Vue({ /* options */ }) 这是主要的对象,你会与作为开发人员在使用Vue.js交互。更多细节请参阅Class: Vue. View 用户看到的实际HTML / DOM vm.$el // The View 当使用Vue.js时候,除了自己自定义的指令你几乎不会触碰到DOM的操作,当数据更新后视图的更新将会自动的触发,视图的更新可以很精确的到每一个testNode节点,他们也批处理和异步执行从而提供更好的性能。 Model 这是一个略微修改的Javascript对象 vm.$data // The Model 在Vue.js中,模型只是简单的Javascript对象,数据对象,你能够操控他们的属性和视图模型,观察他们的从而能获取通知后更改。Vue.js在data对象胡总用ES5的getter/setter 把属性转化了,它允许直接操作而不需要脏检查。 data对象在适当的时候会产生突变,所以修改它与通过引用修改vm.$data是一样的效果。这也方便了多个ViewModel实例观察同一块数据。 技术细节请看Instantiation Options: data. Directives 私有的HTML属性是告诉Vue.js做一些关于DOM的处理 <div v-text="message"></div> 这里的div元素有一个v-text的指令,值是message.意思是告诉Vue.js 保持这个div节点的内容与viewMode中的message属性同步 指令可以封装任意DOM操作。例如v-attr 操作一个属性元素,v-repeat克隆基于数组的

JavaScript面向对象编程(最终版)

JavaScript面向对象编程 1、引言 JavaScript是一种解释性的,基于对象的脚本语言(an interpreted, object-based scripting language)。JavaScript 基于客户端运行,目前基本上所有的浏览器都支持JavaScript。1995年首次出现时,JavaScript的主要目的还只是处理一些输入的有效性验证,随着互联网的蓬勃发展,JavaScript的应用越来越广泛,特别是近几年AJAX技术(Asynchronous JavaScript and XML)的发展,更使JavaScript的应用达到了一个新的高度。在AJAX技术中,JavaScript是一项关键技术,请求的发送、接收、接收数据后的界面处理都需要使用JavaScript技术,这对JavaScript语言提出了新的需求,本文从JavaScript的基本特点出发,模拟出了面向对象编程的大部分特点,使JavaScript摆脱了以往脚本语言杂乱无章、难以阅读、难以维护的形象,而具有了面向对象特性,极大的方便了JavaScript的开发、维护,提高了软件开发效率。 2、JavaScript的基本特点 JavaScript是解释性的,基于对象的脚本语言。它有下面几个显著特点,这几个特点在后面的面向对象特性模拟中会反复用到,因此这里先详细说明这几个特点。 解释型语言:JavaScript是一种解释性语言,解释性语言相对于编译型语言,编译型语言必须先通过编译才能执行,而解释性语言不需要编 译,直接从上到下解释执行,一边解释一边执行,这就决定了解释性语 言的代码是有先后顺序的,需要执行的代码必须已经解释过。因此, JavaScript需要注意代码的先后顺序。

javascript键盘事件

主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup。 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级。这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后返回一个可打印的“!”字符,而keydown和keyup只是记录了shift + 1这个事件。[1] 但是keypress只能针对一些可以打印出来的字符有效,而对于功能按键,如F1-F12、Backspace、Enter、Escape、PageUP、PageDown和箭头方向等,就不会产生keypress事件,但是可以产生keydown和keyup事件。然而在FireFox中,功能按键是可以产生keypress 事件的。 传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl 或Shift和一个按键一起按下,这通过事件的altKey、ctrlKey和shiftKey属性表示,这些属性在FireFox和IE中是通用的。 第二部分:兼容浏览器 凡是涉及浏览器的js,就都要考虑浏览器兼容的问题。 目前常用的浏览器主要有基于IE和基于Mozilla两大类。Maxthon是基于IE内核的,而FireFox和Opera是基于Mozilla内核的。 2.1 事件的初始化 首先需要了解的是如何初始化该事件,基本语句如下: function keyDown(){} document.onkeydown = keyDown; 当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫KeyDown()函数。 2.2 FireFox和Opera的实现方法 FireFox和Opera等程序实现要比IE麻烦,所以这里先描述一下。 keyDown()函数有一个隐藏的变量--一般的,我们使用字母“e”来表示这个变量。 function keyDown(e) 变量e表示发生击键事件,寻找是哪个键被按下,要使用which这个属性: e.which

javaScript重点知识总结

1、JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用window.alert()弹出警告框。 使用document.write()方法将内容写到HTML 文档中。 使用innerHTML写入到HTML 元素。 使用console.log()写入到浏览器的控制台。 实例: document.getElementById("demo").innerHTML = "段落已修改。"; document.write("

这是一个标题

");//write可以直接写入格式! 2、JavaScript 数据类型 var length = 16; // Number 通过数字字面量赋值var points = x * 10; // Number 通过表达式字面量赋值var lastName = "Johnson"; // String 通过字符串字面量赋值var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; 3、JavaScript事件

HTML 事件可以是浏览器行为,也可以是用户行为。 以下是HTML 事件的实例: HTML 页面完成加载。 HTML input 字段改变时。 HTML 按钮被点击。 右图是常见的事件(前面都有on) 事件有三种写法,举onclick为例: //后面再写函数实现方式。 4、JavaScript 字符串 var carname = "Volvo XC60"; var character = carname[7]; //字符串的索引从0 开始 JavaScript本身对单引号还是双引号没有区别。一般都用双引号,两个都存在时,再考虑。

如何判断Javascript对象是否为空

如何判断Javascript对象是否存在 Javascript语言的设计不够严谨,很多地方一不小心就会出错。 举例来说,请考虑以下情况。 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明。用自然语言描述的算法如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易。但是实际上,它涉及的语法问题,远比我们想象的复杂。Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法。只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别。 第一种写法 根据直觉,你可能觉得可以这样写: if (!myObj) {

myObj = { }; } 但是,运行这段代码,浏览器会直接抛出ReferenceError错误,导致运行中断。请问错在哪里? 对了,if语句判断myObj是否为空时,这个变量还不存在,所以才会报错。改成下面这样,就能正确运行了。 if (!myObj) { var myObj = { }; } 为什么加了一个var以后,就不报错了?难道这种情况下,if语句做判断时,myObj 就已经存在了吗? 要回答这个问题,就必须知道Javascript解释器的工作方式。Javascript语言是"先解析,后运行",解析时就已经完成了变量声明,所以上面的代码实际等同于:var myObj; if (!myObj) { var myObj = { };

因此,if语句做判断时,myObj确实已经存在了,所以就不报错了。这就是var 命令的"代码提升"(hoisting)作用。Javascript解释器,只"提升"var命令定义的变量,对不使用var命令、直接赋值的变量不起作用,这就是为什么不加var会报错的原因。 第二种写法 除了var命令,还可以有另一种改写,也能得到正确的结果: if (!window.myObj) { myObj = { }; } window是javascript的顶层对象,所有的全局变量都是它的属性。所以,判断myobj是否为空,等同于判断window对象是否有myobj属性,这样就可以避免因为myObj没有定义而出现ReferenceError错误。不过,从代码的规范性考虑,最好还是对第二行加上var: if (!window.myObj) { var myObj = { };

JavaScript基础

Javascript基础 1.功能 在客户端IE 执行 用来与用户交互 数据检查、控制 控制Browser 的页面方式 2.基本命令 var 定义变量 alert 生成一个独立的小窗口,称作对话框,并用它来显示一条信息和一个“确定”按钮!当显示这个对话框时,暂停程序的 执行。 confirm 确认选择对话框用于确定用户某个Y es/No风格问题的回答。这种风格的对话框中显示一个问号和两个按钮:“确定” 和“取消”。当用户单击了“确定”按钮Confirm()方法返回 true;否则返回false。 If , else For Less than (<) Greater than (>) Not (!) Not equal (!=) Equals (==)

Logical AND (&&) Logical OR (||) Is NOT a Number (isNaN ) Split 将string对象字符以某个符号分开隔开 3.属性 document properties 文档对象,描述当前窗口或指定窗口对象的文档。它包含了文档从到的内容。 document.getElementById document.getElementById("id1").value //获取或设置id1的值 getElementsByTagName getElementsByName("test") 是把name属性为test的所有元素取出来放在一个集合里返回 getElementsByTagName ('INPUT') 是把所有的文本框、单选、复选、按钮等取出来放在一个集合里返回 Object properties Obj.tagName Obj.className Obj.type Obj. checked Obj. value

JavaScript试题集

.单选题 1. 我们可以在下列哪个HTML元素中放置javascript代码? A.< script > B.< javascript > C.< js > D.< scripting > ★标准答案:A 2. 预测以下代码片段的输出结果: var str ; alert(typeof str); A.. string ; B.. undefined; C.. object ; D.. String; ★标准答案:B 3. 下列哪个不是Javascript中注释的正确写法:() A.< !-- …… -- > B. *……*/ D. /* …… */ ★标准答案:A 4. 以下哪项不属于Javascript的特征? 是一种脚本语言 是事件驱动的 代码需要编译以后才能执行

是独立于平台的 ★标准答案:C 5. 关于以下两个陈述的描述中,正确的是:() 陈述1:Javascript是弱类型语言 陈述2:Javascript的常用类型包括:int、string、boolean A.陈述1正确,陈述2错误 B.陈述1错误,陈述2正确 C.两个陈述都正确 D.两个陈述都错误 ★标准答案:A 6. 阅读下面的JavaScript代码: < HTML > < BODY > < SCRIPT LANGUAGE="JavaScript" > function f(y) { var x=y*y; return x; } for(x=0;x< 5;x++) { y=f(x); (y); } < /SCRIPT > < /BODY > < /HTML > 输出结果是()。 1 2 3 4 1 4 9 16 1 4 9 16 25 D.以上答案都不对 ★标准答案:B 7. 在Javascript中,需要声明一个整数类型的变量num,以下哪个语句能实现上述要求? num;

javascript基础练习题

基础练习题 一、简单Java程序调试 1)以下哪个是Java应用程序main方法的有效定义? A. public static void main(); B. public static void main( String args ); C. public static void main( String args[] ); D. public static void main( Graphics g ); E. public static boolean main( String a[] ); 2) 编译和运行以下代码的结果为: public class MyMain{ public static void main(String argv){ System.out.println("Hello cruel world"); } } A.编译错误; B.运行输出"Hello cruel world"; C.编译无错,但运行时指示没有定义构造方法。 D.编译无错,但运行时指示没有正确定义main方法。 3)下列选项中不属于Java虚拟机的执行特点的一项是: A.异常处理B.多线程C.动态链接D.简单易学 4)不属于Java语言特点的一项是: A.分布式 B. 安全性 C. 编译执行 D.面向对象 5)以下程序的运行结果为: public class Test{ public static void main(String argv[ ]){ System.out.println("x="+5); } } A. 5 B. x=5 C. "x="+5 D. "x="5 6) 以下程序的运行结果为: public class Test{ public static void main(String argv[ ]){ System.out.println("good"+"morning"); } } A. goodmorning B. "good"+"morning" C. good morning D. good+morning 二、Java符号与表达式 1) 现有一个int类型的整数和一个double类型的数进行加法运算,则得到的结果类型为: A.int类型 B. double类型 C. float类型 D. long类型 2)下面程序段的输出结果是:

JavaScript事件

我的记录(JavaScript事件)JavaScript 事件冒泡简介及应用实例 一、什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。 二、事件冒泡有什么作用 (1)事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。 【集中处理例子】

eval( )内置函数的用法:计算字符串表达式的值。