javacript总结

javacript总结：
如何让网页的脚本能够运行起来?
方法一:<script type="text/javascript">定义的脚本代码</script>
方法二:<script type="text/javacript" src="封装好的.js后缀文件的路径"></script>


变量：
在javascript中没有具体(String,boolean,int....等)变量的关键字,只有var,变量的类型由赋值来决定。
var N = "Hello Word";  这时候N的变量类型就是字符串。想得知该变量是什么类型，
可以用typeof(变量名)。


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


函数定义关键字--function
基本语法:
<script type="text/javascript">
  function oop(){
    alert("Hello Word");
  }
  //定义的oop可以做为函数,也可以作为对象，详细说明请看如下：
  a:var t = new oop();
  t();
  这里的oop函数作为了一个对象赋值给t，这时候t调用时可用t();
  //匿名内部函数。
  b:var t=function(){
alert("Hello Word");
  }
  t();
</script>


方法函数：
isNaN():是否非数值--返回false true。同理：NaN为非数值。什么情况会出现NaN？
当你把一个非数字的字符串通过parseInt来转换时，这时候就会出现NaN。


parseInt();把字符串转换为number类型。
parseFloat();把字符串转换为number类型。
Number();把字符串转换为number类型。"001"=1 ,null=0
toString();数值转换成字符串。
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位小数点。


字符串对象
var  DOC = "length";
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:字符串对象与正则表达式
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


b.RegExp对象。
定义方式：
(1)var reg = /^[0-9]$/; 注：^(从哪里开始)，$(到哪里结束)
var value ="length2233length3434";
var matchs = new RegExp(reg);
matchs.test(value);//RegExp对象的.test方法则是判断该字符串是否满足匹配，返回true/fasle。


(2)var matchs = new RegExp(" /^[0-9]$/");


日期对象。
创建：
a: var date =new Date("2013-09-10");--当前的日期
b:var date = new Date();--当前的日期和时间


获取/设置方法：
setXXX();设置时间
setMonth(); setDate();
getXXX();获取时间
getMonth(); getDate();


转换方法
toLocaleTimeString();本地时间。--15:30:56
toLocaleDateString();本地日期。--2013-05-25


arguments对象
在函数代码中表示函数的参数数组，在函数代码中，可以使用arguments访问所有的参数。
arguments.length:函数的参数个数。arguments[i]:第i个参数。
function oop(name,url){
var count = arguments.length;
alert(count);//2
}
oop("kk","kk");




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出来的新窗口中)。


Array 对象
a、创建和初始化（***）
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];


二维数组：
var a = new Array();
a[0] = ["1","2"];
b、属性
a.length
c、方法
a.toString()----1,2,3
a.join("|")----1|2|3
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)function oop(){
   alert("Hello Word!");
}
oop();
function oop(){
 alert("Say Hello!");
}
oop();


(2)
var oop = function{
   alert("Hello Word!");
}
oop();
oop = function{
 alert("Say Hello!");
}
oop();


(1)js中没有传统的重载，方法名称相同，后定义方法将覆盖先定义的方法，为什么会被覆盖？
因为定义函数语句会被提取出来优先执行。
执行完后，才会按顺序执行其它语句代码。这时，第一个函数已经被第2个函数所覆盖。
(2)调用函数之后，函数变量又被赋予新的函数代码体，使得第二次调用该函数时出现不同结果。


定时器
周期性：
var t = window.setInteval(function,时间毫秒);
window.clearInteval(t);
一次性：
var t = window.setTimeout(function,时间毫秒);
window.clearTimeout(t);
function oop(){
   alert("Hello word!");
}
setTimeout(oop,2000);




document对象：DOM文档。

查询节点。
1、document.getElementById("对象的ID"):--返回单个对象值
2、document.getElementsByTagName("元素名称")--返回数组。适用于查询某种元素。


节点的层次关系。
obj.parentNode/childNodes/firstChild/lastChild
obj为对象.获取对象的父节点（单值）/子节点（数组形式）/第一个节点/最后一个节点


4.obj.nodeName--返回节点的名称，全大写形式。
obj.type--返回节点的类型。


5.obj.className ="样式表中定义的名称";动态添加样式。
obj.style.display="none";把obj对象的可见区域隐藏。
obj.style.display="block";把obj对象的可见区域显示。


6、增加新节点
创建: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>


HTML DOM 中 table 对象


insertRow(index)方法:用于在表格中的指定位置插入一个新行。返回一个 TableRow，表示新插入的行。
该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。
新行将被插入 index 所在行之前。
若 index 等于表中的行数，则新行将被附加到表的末尾。如果表是空的，
则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。
可以用 TableRow.insertCell() 方法给新创建的行添加内容,如<TD>。
function oop(){
   var row = document.getElementById('myTable').insertRow(0);
   var cell= row.insertCell(0);
   cell.innerHTML ="Hello";
   var cells= row.insertCell(1);
   cells.innerHTML ="Word";
}




6、screen 对象--屏幕的分辨率相关
var r = screen.height;  //ok--read/get
screen.height = 500; //error--不能设置
screen.availHeight(availHeight可设置的高度，availWidth可设置的宽度)


window.width = screen.availWidth/2;

7、history对象---历史访问记录
var n = history.length;--历史记录数
history.back();--后退
history.forward();--前进
history.go(n);


8、location 对象---浏览器的地址栏
var url = location.href;--获取当前页面的url
location.href = "a.html";--修改当前访问的url，保留历史访问记录
location.replace(url);--去往新url，没有历史
-----可以实现页面跳转的方式（客户端）


静态方式：
<a></a>
代码方式：
window.open();---一定是在新窗口中
history.xxx(); ---必须有历史记录
location.href --是否需要保留
location.replace(); 


对象引用属性时有两种方式：
a：对象.属性名
b：对象["属性名"]
例：
location.href 
location["href"]




event
a、事件：响应机制，某种动作实现对代码的调用
b、事件的分类
鼠标事件： onclick(单击)/ondblclick(双击)/onmouseover(鼠标移进)/onmouseout(鼠标移出)
键盘事件： onkeyup(键盘按上)/onkeydown(键盘按下)
状态事件： onblur(失去焦点)/onfocus(获取焦点)/onchange(选择改变时触发)/onload(页面初始化)/onunload(页面关闭时触发)
c、定义事件
<元素 onxxx="" />---html 静态的
obj.onxxx = function ; ---js代码的方式为元素定义事件



五：面向对象基础
//使用 Object 封装数据
function testObject() {
var obj = new Object();
//封装数据
obj.name = "mary";
obj.age = 18;
//封装行为
obj.sing = new Function("alert('Hello');");


//测试
alert(obj.name + ":" + obj.age);
obj.sing();
}


//先定义一个Person类
function Person(n,a)  {
this.name = n;
this.age = a;
this.introduceSelf = function(){
alert("i am " + this.name + "," + this.age);
};
}
//测试自定义对象
function testOwnObj() {
var p1 = new Person("mary",18);
alert(p1.name);
p1.introduceSelf();   //i am mary,18 


var p2 = new Person("john",28);
alert(p2.age);
p2.introduceSelf();
}


//测试：使用 json 封装数据
function testJSon() {
var obj = {
"name":"mary",
"age":18,
"isGra":true
};
//测试
alert(obj.name + ":" + obj.age + ":" + obj.isGra);
}


function myJSon(oops) {
    //this为window的对象
    alert(this.name + ":" + this.age + ":" + this.isGra+ oops);
}


var obj = {"name":"mary","age":18,"isGra":true};
myJSon.call(obj,"1234");
//call(obj,参数1,参数N)：直接将obj作为this，调用myJSon函数。call方法应用于Function对象，调用一个
对象的一个方法，以另一个对象替换当前对象。这里myJSon为Function，调用了call方法，以obj对象替换
当前的对象。
//obj.myJSon = myJSon;
//obj["myJSon"]();




  function oop(oo){
oo.name="Hello Word";
oo.age=12;
  }
  var person = new Object();
  oop(person);
  person.name;//HeeloWord
  person.age;//12

  person.password="1234";//动态添加password属性。

 

注：评分学员请根据实际情况，尊重他人劳动成果。