黑马程序员——JavaScript总结

------Java培训、Android培训、iOS培训、.Net培训、期待与您交流！ -------

如何让网页的脚本能够运行起来?

方法一:

<span style="font-family:SimSun;font-size:14px;"><script type="text/javascript"></span>

方法二：

<span style="font-family:SimSun;font-size:14px;"><script type="text/javacript" src="封装好的.js后缀文件的路径"></script></span>

变量：在javascript中没有具体(String,boolean,int....等)变量的关键字,只有var,变量的类型由赋值来决定。

<span style="font-family:SimSun;font-size:14px;">var N = "Hello Word";</span>

这时候N的变量类型就是字符串。想得知该变量是什么类型，可以用typeof(变量名)。

变量有基本变量，特殊变量，复杂变量。基本变量:number,string,boolean特殊变量:undefied,null. (注:undefied出现的情况是在变量定义没有赋值的情况下),在这里的==号为全等号,===为非全等。==号判断时，会对变量进行隐式转换，===号则忽略这一步。

如：

<span style="font-family:SimSun;font-size:14px;">a：undefied==null(true) b：undefied===null(false)</span>

a中则进行隐式转换。undefied意思为未定义(没有赋值的情况下),null则为空。所以全等。b中则忽略了隐式转换这一步。

函数定义关键字--function基本语法:

//定义的oop可以做为函数,也可以作为对象，详细说明请看如下：

<span style="font-family:SimSun;font-size:14px;">a:var t = new oop();
  t();
  这里的oop函数作为了一个对象赋值给t，这时候t调用时可用t();
  //匿名内部函数。
  b:var t=function(){
alert("Hello Word");
  }
  t();
</script></span>

方法函数：

isNaN():是否非数值--返回false true。同理：NaN为非数值。

什么情况会出现NaN？

当你把一个非数字的字符串通过parseInt来转换时，这时候就会出现NaN。parseInt();把字符串转换为number类型。

parseFloat();把字符串转换为number类型。

Number();把字符串转换为number类型。"001"=1 ,null=0toString();数值转换成字符串。

Math.random();产生从[0-1)之间的随即数，如0.1125635412。

Math.floor(数值);不管里面的数值是5还是5.1，5.89，5.66，结果都是5。

Math.ceil(数值):当里面的数值是5，才返回5，如果是5.01,5.001,5.4,结果都是6。

toFixed(要保留X位小数):数值转换成字符串保留X位小数点。

字符串对象：

<span style="font-family:SimSun;font-size:14px;">var  DOC = "length";</span>

1、长度属性：DOC.length。

2、方法

a：DOC.split(",")。字符串分割函数，返回数组形式。

b：大小写转换函数: DOC.toUpperCase()/Doc.toLowerCase();

c：字符串定位函数。DOC.indexOf("g");从当前的字符串中查找第一次出现g的索引位置.DOC.lastIndexOf("g");从当前的字符串中查找最后一次出现g的索引位置.

d:字符串截取函数DOC.substring(start,end):从start开始一直截取到end-1。DOC.charAt(索引)：根据字符串索引获取指定的字母。

javacript正则表达式应用格式: /表达式/标识符 例：/[0-9]/gi (g为标识符，i忽略大小写)。注：标识符一定要写在表达式后面。

a:字符串对象与正则表达式

<span style="font-family:SimSun;font-size:14px;">DOC = "length2233length3434";
var reg = /[0-9]/gi;
DOC.replace(reg,"*");
DOC.match(reg);返回匹配字符串的数组。//2,2,3,3,3,4,3,4
DOC.search(reg);返回匹配字符串中的首字符位置索引。//6</span>

b.RegExp对象。定义方式：

<span style="font-family:SimSun;font-size:14px;">var reg = /^[0-9]$/;</span>

注：^(从哪里开始)，$(到哪里结束)var value ="length2233length3434";

<span style="font-family:SimSun;font-size:14px;"><pre name="code" class="java"></span>

var matchs = new RegExp(reg);

//RegExp对象的.test方法则是判断该字符串是否满足匹配，返回true/fasle。var matchs = new RegExp(" /^[0-9]$/");

日期对象。创建：

<span style="font-family:SimSun;font-size:14px;">var date =new Date("2013-09-10");</span>

--当前的日期 

<span style="font-family:SimSun;font-size:14px;"><span style="color: rgb(52, 52, 52); font-size: 16px; line-height: 29.7000007629395px; white-space: pre-wrap;"><span style="font-family:SimHei;">var date = new Date();</span></span></span>

--当前的日期和时间获取/设置方法：setXXX();

设置时间

<span style="font-family:SimSun;font-size:14px;">setMonth(); setDate();getXXX();</span>

获取时间

<span style="font-family:SimSun;font-size:14px;">setMonth(); setDate();getXXX();</span>

转换方法

<span style="font-family:SimSun;font-size:14px;">toLocaleTimeString();</span>

本地时间。--15:30:56toLocaleDateString();

本地日期。--2013-05-25arguments对象在函数代码中表示函数的参数数组，在函数代码中，可以使用arguments访问所有的参数。arguments.length:函数的参数个数。arguments[i]:第i个参数。

<span style="font-family:SimSun;font-size:14px;">function oop(name,url){
var count = arguments.length;
alert(count);//2
}
oop("kk","kk");</span>

encodeURI(把字符串作为url进行编码)与decodeURI(把字符串作为url进行解码)编码主要原因是：a：安全性。b：防止中文汉字出现乱码。eval()函数用于计算某个字符串，参数一定要合法。否则抛出异常。eval("2+3");//5

Window对象。

window.alert();弹出提示框window.confirm();弹出警告框。返回boolean。window.open(url,name);uri为要打开的新页面，name为标识符(多次open出来的页面只会在第一次open出来的新窗口中)。

window.alert();弹出提示框

window.confirm();弹出警告框。返回boolean。

window.open(url,name);uri为要打开的新页面，

name为标识符(多次open出来的页面只会在第一次open出来的新窗口中)。

Array 对象

a、创建和初始化

<span style="font-family:SimSun;font-size:14px;"><span style="font-family:SimHei;">var a = new Array();
a[0] = "mary";
a[1] = 100;
a[2] = true;
var a = new Array("mary",100,true);
var a = ["mary",100,false];</span></span>

二维数组：

var a = new Array();a[0] = ["1","2"];

b、属性

a.length

c、方法

a.toString()

a.join("|")

<span style="font-family:SimSun;font-size:14px;"></pre><pre name="code" class="java"></span>

a.sort()---默认的比较规则：按照字符串比。如果按照数字的大小比较。需传一个方法作为参数传入sort(Func)中。function Func(a,b){ return a - b;}

a.reverse();`倒序。

a.concat();连接数组。

a = ["1","2"];

a.concat(new Array(4,5,6,7));

alert(a);//1,2

问：为什么返回1,2。因为concat连接数组是返回拼接后的新数组。所以要拿变量接收传回来的新数组a =a.concat(new Array(4,5,6,7))

a.slice(start,end);获取数组的子数组。[start,end)

方法重载

(1)

<span style="font-family:SimSun;font-size:14px;"><span style="font-family:SimHei;">function oop(){
   alert("Hello Word!");
}
oop();
function oop(){
 alert("Say Hello!");
}
oop();</span></span>

(2)

<span style="font-family:SimSun;font-size:14px;">var oop = function{
   alert("Hello Word!");
}
oop();
oop = function{
 alert("Say Hello!");
}
oop();</span>

(1)js中没有传统的重载，方法名称相同，后定义方法将覆盖先定义的方法，为什么会被覆盖？因为定义函数语句会被提取出来优先执行。执行完后，才会按顺序执行其它语句代码。这时，第一个函数已经被第2个函数所覆盖。

(2)调用函数之后，函数变量又被赋予新的函数代码体，使得第二次调用该函数时出现不同结果。

定时器

周期性：

<span style="font-family:SimSun;font-size:14px;"><span style="white-space:pre">	</span>var t = window.setInteval(function,时间毫秒);window.clearInteval(t);</span>

一次性：

<span style="font-family:SimSun;font-size:14px;"><span style="font-family:SimHei;"><span style="white-space:pre">	</span>var t = window.setTimeout(function,时间毫秒);window.clearTimeout(t);function oop(){   alert("Hello word!");}setTimeout(oop,2000);   </span></span>

document对象：DOM文档。

查询节点：

1、document.getElementById("对象的ID"):--返回单个对象值

2、document.getElementsByTagName("元素名称")--返回数组。适用于查询某种元素。

节点的层次关系。obj.parentNode/childNodes/firstChild/lastChild

obj为对象.获取对象的父节点（单值）/子节点（数组形式）/第一个节点/最后一个节点

3.obj.nodeName--返回节点的名称，全大写形式。

obj.type--返回节点的类型。

4.obj.className ="样式表中定义的名称";动态添加样式。

obj.style.display="none";把obj对象的可见区域隐藏。

obj.style.display="block";把obj对象的可见区域显示。

增加新节点创建:

document.createElement("a");

设置属性：obj.href="";

obj.innerHTML ="";

obj.title="";

加入节点:

XXXX.appendChild(obj);---把obj节点内容追加到XXXX父节点最后面

XXXX.insertBefore(obj,oldChild);---把obj节点内容追加到XXXX父节点的oldChild节点之前。

删除节点:

xxx.removeChild(obj);--obj必须是xxx的子节点obj.parentNode.removeChild(obj);--删除obj节点

select对象：

obj.add(new Option("java",1))：添加一个Option选择项到obj(select对象)中。

selectedIndex：选择Option时的索引。

new Option("","")：返回一个Option对象。

options[0]：obj(select对象)中的下拉项集合。

//下面的代码则是综合以上方法、对象来举例子。

<script type="text/javascript">function oop(){  
var f = document.getElementById("form1");  
var selectObject = document.createElement("select");  
//动态创建option  
var optionObject = new Option("java","1");  
selectObject.add(optionObject);
//动态创建option  
var optionObjects = new Option("c#","2");  
selectObject.add(optionObjects);
selectObject.onchange =function(){
//输出用户当前选择的下拉框的value值
//options[0]：obj(select对象)中的下拉项集合。
//selectedIndex：选择Option时的索引。
//selectObject.options[selectObject.selectedIndex]：获取到当前
//用户选择的下拉框对象，value为下拉框对象的值。  
alert(selectObject.options[selectObject.selectedIndex].value);}  
f.appendChild(selectObject);}</script>