JavaScript开发整理

javascript 与java 一点关系都没有啊

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

js是弱数据类型语言
在定义变量的时候，统一使用var表示，甚至可以去掉var这个关键字

区分大小写
num和NUM是两个变量
每条语句结束后加一个分号

查看变量v的数据类型 typeof v
例：window.alert(“v的数据类型是”+typeof v);

prompt() 用于接受用户输入的数值
document.writeln()打印出用户输出的值

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

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

在需要的文件中引入JS

<script language="javascript" src="js的路径"></script>

eval() 函数
把字符串当做脚本来执行
例如： var str=”window.alert(‘ok’)”;
eval(str);
如果直接执STR则会输出字符串window….

escape()编码函数
unescape()解码函数

通过指向函数的变量去调用函数
例如： var myvar=函数名
myvar(实际参数)
如果函数没有返回值，但是接收了，则返回的就是undefined

var abc=89;
function test(){
    abc=900;
}
test();
window.alert(abc) //abc=900

 abc=89;
function test(){
  abc=900
}
test();
window.alert(abc) //abc=900;

var abc=89;
function test(){
var abc=900;
}
test(); 
window.alert(abc);//abc=89;

this
例题：

function Person(){
this.name="abc";
this.age="90";
}
var p1=new Person();
var p2=new Person();
window.alert(p1.name+" "p2.name);
//都是输出abc

this.属性名 公开属性 可以通过对象名.属性名来直接访问
var 属性名 私有属性，只能通过对象的内部函数来访问

function Person(){
var name="abc";//表示这个属性是私有的
var age=900;//同上
this.name2="abc2";//表示是公开的
this.show=function(){   //公开的方法
    window.alert(name+" "+age);//可以访问到私有属性
}
function show2(){
    window.alert(name+" "+age);
}//私有方法，只能在Person类中使用
}
p1.show2();//这里会报错；

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

function test1(){
    alert(this.v);
}
var v=90;
window.test1();//输出90；

this不能在类定义的外部使用，只能在类定义的方法中使用。
例：
function Person(){
this.abc=function(){ window.alert("hello");}
}
window.alert(this.v);//在这里报错

为对象添加指定函数
function Person(){
    this.name="abc";
    this.age=90;
}
function.show(){
    window.alert("hello"+this.name);
}
var p1=new Person();
p1.abc=show;
p1.abc();

提供原型方法，多个对象可以共享一个代码
但是这种方式不能直接访问类的私有属性和方法；

function Dog(){
}
Var dog1=new Dog();
Dog.prototype.shout=function(){
Window.alert(“小狗”);
}
Dog1.shout();
Var dog2=new Dog();
Dog2.shout();

= =的作用
当= =的两边都是字符串的时候，则比较内容是否相等；
如= =是数字，则比较数字大小是否相等；
如果= =是对象或者是对象函数，则比较他们的地址是否相等；

Object 类
Object 类是所有javascript类的基类，提供了一种创建自定义对象的简单方式，不需要程序员在定义构造函数
主要属性：
Constructor –对象的构造函数；
Prototype-获得类的prototype对象，static性质
主要方法：
hasOwnProperty(property)-是否属于本类定义的属性
isPrototypeOf(object)-是否是指定类的prototype
propertylsEnumerable(property)-是否可列举的属性
toString()-返回对象对应的字符串
valueOf()-返回对象对应的原始类型值

原始方法创建对象：

Function Person(){}  
Var p1=new Person();
P1.name=”sp”;

Object 方法
Var p1=new Object();
P1.name=”sp”;

成员函数:
1. 函数的参数列表可以是多个
2. 函数可以没有返回值，但是最多有只能有一个。

Js没有重载的概念

Function test(a){
    Window.alert(a);
}
Function test(a,b){
    Window.alert(a+” ”+b);
}
Test(23);

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

构造函数
① 构造函数（方法）是一种特殊的方法，它的主要作用是完成对对象实例的初始化。
② 构造函数名和类名相同
③ 在创建一个对象实例时，系统会自动调用该类的构造方法完成新对象的初始化。

<script language="javascript">
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    var p1=new Person("abc",80);
    window.alert(p1.name);
    var p2=new Person("hello",50)
    window.alert(p2.name);
</script>

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

<script language="javascript">
function jisuan(num1,num2,oper){
    if(oper=="+" ) { return num1+num2;}
    esle if(oper=="-") { return num1-num2;}
    else if(oper=="*") { return num1*num2;}
    else {return num1/num2;}
}
function Person(name,age,fun){
    this.name=name;
    this.age=age;
    this.myfun=fun;
}
var p1=new Person("ag",90,jisuan);
window.alert(p1.name);
window.alert(p1.myfun(90,80,"+"));

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

Var dog={ name: “小明” ,age:8，fun1:function(){window.alert(“hello,world”)}}；
Window.alert(dog.name);
Window.alert(dog.constructor);//打印构造函数
Function test(){
    Window.alert(this.name);    
}
Test.call(dog);//等价于 dog.test();

For …in
例：

Var dog={ name: “小明” ,age:8，fun1:function(){window.alert(“hello,world”)}}；
///循环列出DOG对象的所有属性和方法 对象名[‘ ‘];
For(var key in dog)        {  window.alert(dog[key])   };


//打印window对象的所有属性和方法
For(var key in window)  {  document.writeln(key+”:”+window[key]+”<br/>”); }

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

Function Person(name,agei,sal){
    This.name=name; //公开属性
    Var age=agei;       //私有属性
    Var salary=sal;     //私有属性
    //定义一个公开方法
    This.show=function (){ window.alert(age+” “+salary) ;}
    //定义一个私有方法
    Function show2(){ window.alert(age+” ”+salary); }
}
Var p1=new Person(“sp”,20,50000);
Window.alert(p1.name);
P1.show();
P1.show2();

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

Function stu(name,age){
    This.name=name;
    This.age=age;
    This.show=function(){
Window.alert(this.name+” ”+this.age);
}
}
Function MidStu(name,age){
    This.stu=Stu;
    This.stu(name,age); //这句话不能少，因为js是动态语言，如果不执行，则不能实现继承效果。
}

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

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

function A(){
    this.i=0;
    function b(){ window.alert(i++);}
    return b;
}
A（）；//这样的用法 此时i的内存空间被回收
Var c=A(); //这样用法i 的空间还在。
C(); //输出0
C();//输出1；

Js的内部类
Javascript 中本身有提供一些可以直接使用的类这些类就是内部类
主要有：
Object
Array
Math
Boolean
String
Aegexp（正则表达式）
Number
Date
Js内部类 分为静态类和动态类
动态类：
在引用起属性和方法的时候
var对象实例名=new（）类（）；
对象实例名.方法（或属性）
var nowdate=new Date();
window.alert(nowdate);
静态类：
在引用起属性和方法的时候
静态类.方法（或属性） //典型 math 类
Window.alert(math.abc(-1)); 返回绝对值；

Array
数组的大小是动态的

Var myarr=new Array();
Myarr[0]=90;
Myarr[1]=80;
Window.alert(myarr.length);

获取css中的style格式并修改

//第一条规则
.ss{
background-color:red;
width:100px;
}
//第二条规则
.btn2{
Background-color:red;
}
访问第一个CSS
Var occRules.document.styleSheets[0].cssRules || document.styleSheets[0].rules;
（注意：Mozilla和Safasi中是cssRules，而IE中是rules）
//访问第二个CSS
Var occRules.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”;

判断当前浏览器的种类

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

<input type=”button” value=”black” onclick=”test1(this),test2(this)”>

①．防止用户通过点击鼠标右键菜单拷贝网页内容
当用户试图选中网页文字拷贝时，给出提示版权所有，盗版必究

function test(){
    window.alert("错误的操作");
    return false;
}
</script>
</head>
<body oncontextmenu="return test()">//禁止点击鼠标右键
sdfasfsadfas
</body>

②不允许用户选中文字

<body onselectstart=”return false”>

if(window.event)
{key=obj.keyCode; //获得用户按下键的CODE号}
Window.event可以判断用户是通过点击按钮，还是键盘

Dom编程是ajax的重要基础

Dom 编程
Dom=Document Object Model(文档对象模型) ，根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API）,DOM将整个页面映射为一个由层次节点组成的文件。
Js把浏览器，网页文档和网页文档中的html元素都用相应的内置对象来表示，这些对象与对象间的层次关系成为DOM，这些内置对象就是DOM对象，编程人员通过访问DOM对象，就可以实现对浏览器本身，网页文档，网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。
针对网页（html,jsp,php,aspx.net）的dom就是html dom .我们这讲的就是html dom.

Bom（the browser object model） 浏览器对象模型

Confirm()

setInterval():根据指定的时间循环的执行某个函数或者某个表达式
每隔一秒弹出一个ALERT

Function sayHello(){
    Window.alert(“hello”);
}
setInterval(“sayHello()”,1000);

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

Document.getElementById(“mytime”).innerText=new Date();
<span id=”mytime”></span>

clearInterval();
取消由 setInterval() 设置的 timeout

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

父窗口和子窗口的通讯
Open()函数 执行后会返回一个句柄
Var newWindow=window.open(“新窗口名”，“_blank”);
Navigator对象：
包含当前浏览器的各类信息
Screen
包含当前屏幕的信息
Event对象
代表事件的状态 比如：onclick();

绑定事件监听方法
① 直接在某个HTML控件上指定
例如<input type=”button” id=”but1”onclick=”test()”>
② getElementById()获取控件后，在绑定
document.getElementById(“but1”).οnclick=test;
③ W3C DOM标准
绑定
(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

如何判断复选框被选中

<head>
<script language="javascript">
function test(){
    var hobbies=document.getElementsByName("hobby");
    for(var i=0;i<hobbies.length;i++){
        if(hobbies[i].checked){
            var text=hobbies[i].value;
            window.alert("您选中了"+text);
        }   
    }
}
</script>
</head>
<body>
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="旅游">旅游
<input type="checkbox" name="hobby" value="音乐">音乐
<input type="button" value="test" onclick="test()">

</body>

Document.getElementsByName()；Document.getElementsByTagName();
都是集合对象，都有长度，也就是有.length属性

动态的创建元素，添加元素，删除元素
Var myElement=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 对象代表文档的主体（html body）
Body对象时document对象的一个成员属性，通过document.body来访问
使用body对象，要求文档的主体创建后才能使用，也就是说不能在文档的body体还没有创建就去访问body。

Body对象的innerText，innerHTML说明：

document.getElementById("span1").innerText="<a href='#'>连接到搜狐</a>"//会作为文档添加
document.getElementById("span1").innerHTML="<a href='#'>连接到搜狐</a>"//会作为HTML元素添加

body是属于document的对象成员；

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

<span id="myspan"></span>

myspan.innerText=”hello”;
向span中写入值

<a href=”#”onclick=”selectCheck(this)”>全选</a>

Function selectCheck(obj){
Window.alert(obj.innerText);
}
取出超链接里面的值并弹出

Var allforms=document.forms
可以知道网页中有多少个表单
当访问某个表单的某个元素的时候可以
（1） document.forms[第几个表单].元素的名字
（2） document.forms.item(第几个表单).元素的名字
Allforms[1].hobby2.value等价于allforms.item(1).hobby2.value

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

<form action=”” onsubmit=”函数”/>

也可以

<input type=”submit” onclick=”函数”/>

<img onerror=”test1()”onload=”test2()”>

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

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

删除表格中的一行
deleteRow();
向表格中插入一行
InsertRow();
在指定的一行添加列
insertCell();

正则表达式：
所谓正则表达式就是用某种模式去匹配一类字符串的一个公式，反应到我们JS中就是一个RegExp对象。
RegExp对象 regular expression
正则表达式是很多语言都支持的 。

一个正则表达式对象的创建：
Var regExp=/正则表达式/gim //隐式创建
G代表全局，针对整个串进行检索 I代表忽略大小写 M考虑换行
Var regExp=new RegExp(“正则表达式”，”gi”);//显示创建
例如要查找韩顺平
Var resExp=/韩顺平/gi;

RegExp对象方法
Exec 检索字符串中指定的值。返回找到的值，并确定其位置。
Test 检索字符串中指定的值，返回true或false.

支持RegExp的String方法
Search(),查找字符串中的指定字符，返回他在串中的位置
// str.search(regexp),子串写在前面，正则表达式写在里面
Var str=”visit w3school” window.alert(str.search(/w3school/));
match(),语法格式：search(regexp).与regexp对象的exec方法类似，它使用正则表达式模式对字符串执行搜索，并返回一个包含搜索结果的数组。
replace(),语法格式：replace(regexp,replaceText)使用正则表达式模式对字符串执行搜索，并对搜索到的内容指定的字符替换，返回值为包含替换后的字符串。
split(); 把字符串分割为字符串数组，用法 split(“按什么字符分割”),也可以用split(regexp);

RegExp对象的属性
静态属性：可以通过RegExp就可以访问
实例属性：通过RegExp对象实例才能访问
静态属性：

实例属性：
G
I
M
Source 返回创建RegExp对象实例时指定的表达式文本字符串
反向引用：

{n} 用于指定其前面的字符和组合项连续出现多少次
{n,m} 表示至少出现n次，最多出现m次 先查找m次个在查找n个
/a+/
+ 表示出现一次到任意多次 贪婪匹配 
* 表示出现0次到任意多次
？/a1?/ ?是针对1的不是a  表示出现0次到1次 
[a-z] 表示可以匹配a-z中任意一个字符
/[a-z]/{2} 查找两个连续任意的字母  
[^a-z] 表示可以匹配不是a-z中的任意一个字符
[abcd] 表示可以匹配abcd中的任意一个字符
[^abcd] 表示可以匹配不是abcd中的任意一个字符

字符匹配符

需要加转义字符/的字符有：
. * + ( ) $ / \ ? [ ] ^ { }

定位符：
定位符用于规定要匹配的字符串出现的位置，比如在字符串的开始还是结束的位置。
^ 符号说明：匹配目标字符串的开始位置
/^han/
$ 符号说明：匹配目标字符串的结束位置

/han$/

有的时候我们在匹配某个字符串的时候是选择性的，即：既可以匹配这个又可以匹配那个，这时候就需要用选择匹配符号 |
/（han|韩）/