首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

javacript小结

2013-11-09 
javacript总结javacript总结:如何让网页的脚本能够运行起来?方法一:script typetext/javascript定义

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属性。

?

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

热点排行