javascript基础.docx

javascript基础.docx

《javascript基础.docx》由会员分享，可在线阅读，更多相关《javascript基础.docx（22页珍藏版）》请在冰点文库上搜索。

javascript基础

javascript与java一点关系都没有啊

JS是用浏览器解释执行的，因此不同的类型的浏览器可能对JS的支持不一样

js是弱数据类型语言

在定义变量的时候，统一使用var表示，甚至可以去掉var这个关键字

区分大小写

num和NUM是两个变量

每条语句结束后加一个分号

查看变量v的数据类型typeofv

例：

window.alert（"v的数据类型是"+typeofv）;

prompt（）用于接受用户输入的数值

document.writeln（）打印出用户输出的值

在逻辑运算中0，false，null，undefined，NaN，均表示为false

在||中

将返回第一个不为false的那个值（对象也可），或者是返回最后一个值（如果全部都是false的话）

在需要的文件中引入JS

eval（）函数

把字符串当做脚本来执行

例如：

varstr="window.alert（'ok'）";

eval（str）;

如果直接执STR则会输出字符串window....

escape（）编码函数

unescape（）解码函数

通过指向函数的变量去调用函数

例如：

varmyvar=函数名

myvar（实际参数）

如果函数没有返回值，但是接收了，则返回的就是undefined

varabc=89;

functiontest（）{

abc=900;

}

test（）;

window.alert（abc）//abc=900

abc=89;

functiontest（）{

abc=900

}

test（）;

window.alert（abc）//abc=900;

varabc=89;

functiontest（）{

varabc=900;

}

test（）;

window.alert（abc）;//abc=89;

this

例题：

functionPerson（）{

this.name="abc";

this.age="90";

}

varp1=newPerson（）;

varp2=newPerson（）;

window.alert（p1.name+""p2.name）;

//都是输出abc

this.属性名公开属性可以通过对象名.属性名来直接访问

var属性名私有属性，只能通过对象的内部函数来访问

functionPerson（）{

varname="abc";//表示这个属性是私有的

varage=900;//同上

this.name2="abc2";//表示是公开的

this.show=function（）{//公开的方法

window.alert（name+""+age）;//可以访问到私有属性

}

functionshow2（）{

window.alert（name+""+age）;

}//私有方法，只能在Person类中使用

}

p1.show2（）;//这里会报错；

哪个对象实例调用this所在的函数，那么this就代表哪个对象实例

functiontest1（）{

alert（this.v）;

}

varv=90;

window.test1（）;//输出90；

this不能在类定义的外部使用，只能在类定义的方法中使用。

例：

functionPerson（）{

this.abc=function（）{window.alert（"hello"）;}

}

window.alert（this.v）;//在这里报错

为对象添加指定函数

functionPerson（）{

this.name="abc";

this.age=90;

}

function.show（）{

window.alert（"hello"+this.name）;

}

varp1=newPerson（）;

p1.abc=show;

p1.abc（）;

提供原型方法，多个对象可以共享一个代码

但是这种方式不能直接访问类的私有属性和方法；

functionDog（）{

}

Vardog1=newDog（）;

Dog.prototype.shout=function（）{

Window.alert（“小狗”）;

}

Dog1.shout（）;

Vardog2=newDog（）;

Dog2.shout（）;

==的作用

当==的两边都是字符串的时候，则比较内容是否相等；

如==是数字，则比较数字大小是否相等；

如果==是对象或者是对象函数，则比较他们的地址是否相等；

Object类

Object类是所有javascript类的基类，提供了一种创建自定义对象的简单方式，不需要程序员在定义构造函数

主要属性：

Constructor–对象的构造函数；

Prototype-获得类的prototype对象，static性质

主要方法：

hasOwnProperty（property）-是否属于本类定义的属性

isPrototypeOf（object）-是否是指定类的prototype

propertylsEnumerable（property）-是否可列举的属性

toString（）-返回对象对应的字符串

valueOf（）-返回对象对应的原始类型值

原始方法创建对象：

FunctionPerson（）{}

Varp1=newPerson（）;

P1.name=”sp”;

Object方法

Varp1=newObject（）;

P1.name=”sp”;

成员函数:

1.函数的参数列表可以是多个

2.函数可以没有返回值，但是最多有只能有一个。

Js没有重载的概念

Functiontest（a）{

Window.alert（a）;

}

Functiontest（a,b）{

Window.alert（a+””+b）;

}

Test（23）;

上面的代码会打印出23undefined

因为没有重载的概念所以只会根据函数名找到最后面那个符合的函数，前面不管有多少个函数都不会去查找。

构造函数

1构造函数（方法）是一种特殊的方法，它的主要作用是完成对对象实例的初始化。

2构造函数名和类名相同

3在创建一个对象实例时，系统会自动调用该类的构造方法完成新对象的初始化。

functionPerson（name,age）{

this.name=name;

this.age=age;

}

varp1=newPerson（"abc",80）;

window.alert（p1.name）;

varp2=newPerson（"hello",50）

window.alert（p2.name）;

再给对象初始化属性值的时候，也可以指定函数属性：

functionjisuan（num1,num2,oper）{

if（oper=="+"）{returnnum1+num2;}

esleif（oper=="-"）{returnnum1-num2;}

elseif（oper=="*"）{returnnum1*num2;}

else{returnnum1/num2;}

}

functionPerson（name,age,fun）{

this.name=name;

this.age=age;

this.myfun=fun;

}

varp1=newPerson（"ag",90,jisuan）;

window.alert（p1.name）;

window.alert（p1.myfun（90,80,"+"））;

对于比较简单的对象，我们也可以这样创建

Vardog={name:

“小明”,age:

8，fun1:

function（）{window.alert（“hello,world”）}}；

Window.alert（dog.name）;

Window.alert（dog.constructor）;//打印构造函数

Functiontest（）{

Window.alert（this.name）;

}

Test.call（dog）;//等价于dog.test（）;

For…in

例：

Vardog={name:

“小明”,age:

8，fun1:

function（）{window.alert（“hello,world”）}}；

///循环列出DOG对象的所有属性和方法对象名[‘‘];

For（varkeyindog）{window.alert（dog[key]）};

//打印window对象的所有属性和方法

For（varkeyinwindow）{document.writeln（key+”:

”+window[key]+”
”）;}

Js面向对象三大特征封装，继承，多态

封装：

FunctionPerson（name,agei,sal）{

This.name=name;//公开属性

Varage=agei;//私有属性

Varsalary=sal;//私有属性

//定义一个公开方法

This.show=function（）{window.alert（age+”“+salary）;}

//定义一个私有方法

Functionshow2（）{window.alert（age+””+salary）;}

}

Varp1=newPerson（“sp”,20,50000）;

Window.alert（p1.name）;

P1.show（）;

P1.show2（）;

继承：

Js实际上是通过对象冒充来实现继承的

Functionstu（name,age）{

This.name=name;

This.age=age;

This.show=function（）{

Window.alert（this.name+””+this.age）;

}

}

FunctionMidStu（name,age）{

This.stu=Stu;

This.stu（name,age）;//这句话不能少，因为js是动态语言，如果不执行，则不能实现继承效果。

}

Js可以进行方法覆盖

Js实际上是无态的，是一种动态语言，一个变量的类型是在运行的过程中由js引擎来决定的，所有说js天生支持多态。

闭包：

解释：

闭包和GC（垃圾回收机制）是相关联的，闭包实际上是涉及到一个对象的属性何时被GC处理的问题。

functionA（）{

this.i=0;

functionb（）{window.alert（i++）;}

returnb;

}

A（）；//这样的用法此时i的内存空间被回收

Varc=A（）;//这样用法i的空间还在。

C（）;输出0

C（）；输出1；

Js的内部类

Javascript中本身有提供一些可以直接使用的类这些类就是内部类

主要有：

Object

Array

Math

Boolean

String

Aegexp（正则表达式）

Number

Date

Js内部类分为静态类和动态类

动态类：

在引用起属性和方法的时候

var对象实例名=new（）类（）；

对象实例名.方法（或属性）

varnowdate=newDate（）;

window.alert（nowdate）;

静态类：

在引用起属性和方法的时候

静态类.方法（或属性）//典型math类

Window.alert（math.abc（-1））;返回绝对值；

Array

数组的大小是动态的

Varmyarr=newArray（）;

Myarr[0]=90;

Myarr[1]=80;

Window.alert（myarr.length）;

获取css中的style格式并修改

//第一条规则

.ss{

background-color:

red;

width:

100px;

}

//第二条规则

.btn2{

Background-color:

red;

}

访问第一个CSS

VaroccRules.document.styleSheets[0].cssRules||document.styleSheets[0].rules;

（注意：

Mozilla和Safasi中是cssRules，而IE中是rules）

//访问第二个CSS

VaroccRules.document.styleSheets[1].cssRules||document.styleSheets[1].rules;

//访问第一条规则

Alert（ocssRules[0].style.backgroundColor）;

//设置值第一条规则中的第二个值

ocssRules[1].style.width=”90px”;

//访问第二条规则

Alert（ocssRules[1].style.background）;

//设置值第二条规则中的第一个值

ocssRules[0].style.background=”red”;

判断当前浏览器的种类

一个事件可以被多个函数监听

①．防止用户通过点击鼠标右键菜单拷贝网页内容

当用户试图选中网页文字拷贝时，给出提示版权所有，XX

functiontest（）{

window.alert（"错误的操作"）;

returnfalse;

}

//禁止点击鼠标右键

sdfasfsadfas

②不允许用户选中文字

If（window.event）

{key=obj.keyCode;//获得用户按下键的CODE号}

Window.event可以判断用户是通过点击按钮，还是键盘

Dom编程是ajax的重要基础

Dom编程

Dom=DocumentObjectModel（文档对象模型），根据W3CDOM规范，DOM是HTML与XML的应用编程接口（API）,DOM将整个页面映射为一个由层次节点组成的文件。

Js把浏览器，网页文档和网页文档中的html元素都用相应的内置对象来表示，这些对象与对象间的层次关系成为DOM，这些内置对象就是DOM对象，编程人员通过访问DOM对象，就可以实现对浏览器本身，网页文档，网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。

针对网页（html,jsp,php,）的dom就是htmldom.我们这讲的就是htmldom.

Bom（thebrowserobjectmodel）浏览器对象模型

Confirm（）

setInterval（）:

根据指定的时间循环的执行某个函数或者某个表达式

每隔一秒弹出一个ALERT

FunctionsayHello（）{

Window.alert（“hello”）;

}

setInterval（“sayHello（）”,1000）;

在元素间的普通文本就是通过对象名.innerText来添加的

例如：

Document.getElementById（“mytime”）.innerText=newDate（）;

clearInterval（）;

取消由setInterval（）设置的timeout

setTimeout（）;

在指定毫秒数后调用函数或计算表达式一次

父窗口和子窗口的通讯

Open（）函数执行后会返回一个句柄

VarnewWindow=window.open（“新窗口名”，“_blank”）;

Navigator对象：

包含当前浏览器的各类信息

Screen

包含当前屏幕的信息

Event对象

代表事件的状态比如：

onclick（）;

绑定事件监听方法

1直接在某个HTML控件上指定

例如

2getElementById（）获取控件后，在绑定

document.getElementById（“but1”）.onclick=test;

3W3CDOM标准

绑定

（Object）document.getElementById（“but1”）.addEventListener（“onclick”,fnHandler,bCapture）;

解除绑定

（object）document.getElementById（“but1”）.removeEventListener（“事件名”，fnHandler,bCapture）;

IE中独有的事件监听方法：

绑定：

Object.attachEvent（“事件名”，fnHandler）；

解除绑定：

object.detachEvent（“事件名”，fnHandler）;

fnHandler---函数名没有括号

Document对象

Document代表整个HTML文档，可用来访问页面中的所有元素。

Document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document

如何判断复选框被选中

functiontest（）{

varhobbies=document.getElementsByName（"hobby"）;

for（vari=0;i

if（hobbies[i].checked）{

vartext=hobbies[i].value;

window.alert（"您选中了"+text）;

}

}

}

足球

旅游

音乐

Document.getElementsByName（）；Document.getElementsByTagName（）;

都是集合对象，都有长度，也就是有.length属性

动态的创建元素，添加元素，删除元素

VarmyElement=document.createElement（“HTML的元素名字”）;

例如创建一个超链接：

设置超链接属性：

myElement.href=”a.html”;

myElement.innerText=”连接到a”；

添加到document.body上去

Document.body.appenChild（myElement）;

删除元素

删除元素需要知道上一级的父元素，例如上面的BODY，或者是DIV

Document.getElementById（“要删除的元素ID”）.parentNode.//得到父亲元素的对象

removeChild（Document.getElementById（“要删除的元素ID”））;

NODE节点

在DOM编程中，一个HTML文档会被当做一个DOM树来对待，DOM会把所有的HTML元素映射成NODE节点，于是你就可以使用Node节点（对象）的属性和方法。

NodeType属性规定节点的类型

元素类型节点类型

元素1

属性2

文本3

注释4

文档5

Body对象代表文档的主体（htmlbody）

Body对象时document对象的一个成员属性，通过document.body来访问

使用body对象，要求文档的主体创建后才能使用，也就是说不能在文档的body体还没有创建就去访问body。

Body对象的innerText，innerHTML说明：

document.getElementById（"span1"）.innerText="连接到搜狐"//会作为文档添加

document.getElementById（"span1"）.innerHTML="连接到搜狐"//会作为HTML元素添加

body是属于document的对象成员；

坦克转向：

通过一次加载一个背景图通过显示该背景图不同的部分，实现转向的效果。

myspan.innerText=”hello”;

向span中写入值

全选

FunctionselectCheck（obj）{

Window.alert（obj.innerText）;

}

取出超链接里面的值并弹出

Varallforms=document.forms

可以知道网页中有多少个表单

当访问某个表单的某个元素的时候可以

（1）document.forms[第几个表单].元素的名字

（2）document.forms.item（第几个表单）.元素的名字

Allforms[1].hobby2.value等价于allforms.item

（1）.hobby2.value

在验证表单的时候，可以在

也可以

Onerror为在加载中遇到错误或加载失败触发的函数

Onload为加载成功后触发的函数

All[]提供对文档所有HTML元素的访问

删除表格中的一行

deleteRow（）;

向表格中插入一行

InsertRow（）;

在指定的一行添加列

insertCell（）;

正则表达式：

所谓正则表达式就是用某种模式去匹配一类字符串的一个公式，反应到我们JS中就是一个RegExp对象。

RegExp对象regularexpres