JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
- CRUD节点
<!DOCTYPE html>
|
JS中的对象,以及赋值操作
<script type="text/javascript"> function speak(something){ //定义方法 alert(something); } var p = new Object(); //定义一个对象 p.name = "张三"; //给对象的name属性赋值 p.func = speak; //将定义的方法赋值给func alert("姓名:"+p.name); p.func(p.name); //调用func并赋值 delete p.name; alert("delete之后:"+p.name); delete p.func; p.func("delete之后:"+p.name); </script> |
构造方法
<script type="text/javascript"> //构造方法 function person(name,age){ this.name=name; this.age=age; //构造方法中可以定义方法 function speak(something){ alert(something); } this.func = speak; } var p1 = new person("jack",34); alert(p1.name+" "+p1.age); p1.func("hello world"); </script> |
String的操作
<script type="text/javascript"> var s1= "赋值实例化1"; var s2=new String("new String()实例化2"); document.write(s1+"<br>"); document.write(s2+"<br>"); document.write(s2+"的长度:"+s2.length+"<br>"); document.write(s2.indexOf("实",0)+"<br>"); //首次出现的位置 document.write(s2.replace("实","fuck")+"<br>"); //替换 </script> |
日期操作
<script type="text/javascript"> //判断星期 function whatWeek(date){ var day = date.getDay(); //周 0:周日-6:周六 var week; switch(day){ case 0: week = "星期日"; break; case 1: week = "星期一"; break; case 2: week = "星期二"; break; case 3: week = "星期三"; break; case 4: week = "星期四"; break; case 5: week = "星期五"; break; case 6: week = "星期六"; break; } return week; } var date = new Date(); var year = date.getFullYear(); //完整年 var month = date.getMonth()+1; //月份从0-11 var day = date.getDate(); //当前日期 var hour = date.getHours(); //小时 var minute = date.getMinutes(); //分钟 var second = date.getSeconds(); //秒 document.write("当前时间:"+year+"年"+month+"月"+day+"日"+hour+"时"+minute+"分"+second+"秒"); document.write(whatWeek(date)); </script> |
数组基本操作
<script type="text/javascript"> //数组定义第一种方式 var array1 = ["a","c","b","e","d"]; document.write("第一种定义数组:"); for(i=0;i<array1.length;i++){ document.write(array1[i]+" "); } document.write("<hr color='red' width=400px align='left'>"); //数组定义第二种方式 var array2 = new Array("a","c","b","e","d"); document.write("第二种定义数组:"); for(i=0;i<array2.length;i++){ document.write(array2[i]+" "); } document.write("<hr color='red' width=400px align='left'>"); document.write("in遍历数组:"); for(i in array1){ document.write(array1[i]+" "); } document.write("<hr color='red' width=400px align='left'>"); //排序(字母,数字) var array3 = array1.sort(); //将定义好的array1排序,并赋值给array2 for(i in array3){ document.write(array3[i]+" "); } document.write("<hr color='red' width=400px align='left'>"); var array4 = array1.join(); //默认用逗号隔开 document.write("join默认测试:"+array4); document.write("<hr color='red' width=400px align='left'>"); var array5 = array1.join("."); //指定符号隔开 document.write("join指定符号测试:"+array5); document.write("<hr color='red' width=400px align='left'>"); var nums = Array(1,2,3,4,5); var array6 = nums.sort().concat(array2); document.write("数组合并:"+array6); document.write("<hr color='red' width=400px align='left'>"); document.write("颠倒数组:"); document.write(nums.reverse()); </script> |
window内置函数
<script type="text/javascript"> confirm("注意提示"); //消息提示框 prompt("提示信息"); //有返回值的消息提示框 function message(){ alert("请及时付费"); } setTimeout("message()",3000); //3秒后执行方法 </script> |
定时重复执行
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //判断星期 function whatWeek(date){ var day = date.getDay(); //周 0:周日-6:周六 var week; switch(day){ case 0: week = "星期日"; break; case 1: week = "星期一"; break; case 2: week = "星期二"; break; case 3: week = "星期三"; break; case 4: week = "星期四"; break; case 5: week = "星期五"; break; case 6: week = "星期六"; break; } return week; } //查看当前时间 function seeToday(){ var date = new Date(); var year = date.getFullYear(); //完整年 var month = date.getMonth()+1; //月份从0-11 var day = date.getDate(); //当前日期 var hour = date.getHours(); //小时 var minute = date.getMinutes(); //分钟 var second = date.getSeconds(); //秒 var today = "当前时间:"+year+"年"+month+"月"+day+"日"+" "+whatWeek(date)+hour+"时"+minute+"分"+second+"秒" document.getElementById("today").innerHTML=today; } //使用window内置函数每1秒执行一次方法 window.setInterval("seeToday()",1000); </script> </head> <body> <div id="today"></div> </body> </html> |
window.open()
function openURL(){ window.open("http://www.126.com","_blank"); } _blank:另开窗口 _top:使用原有窗口 _self: 使用原有窗口
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function openURL(){ window.open("http://www.126.com" ,"_blank" ,"top=100,left=100,width=200,height=200 ,menubar=yes,scrollbars=no,toolbar=yes,status=yes"); } </script> </head> <body> <input type="button" value="126.com" οnclick="openURL()"> </body> |
width:窗口的宽度;
height:窗口的高度;
top:窗口距离顶部的高度。
left:窗口距离左边的宽度。
menubar:窗口是否有菜单栏。
toolbar:窗口是否有工具栏。
scrollbars:窗口是否有滚动条。
status:窗口是否有状态栏。
window.onload
<script type="text/javascript"> function openURL(){ window.open("http://www.126.com" ,"_blank" ,"top=100,left=100,width=200,height=200,menubar=yes,scrollbars=no,toolbar=yes,status=yes"); } openURL(); window.onload = function(){ alert("文档加载完毕"); } </script>
这种方式html也支持 <script type="text/javascript"> function openURL(){ window.open("http://www.126.com" ,"_blank" ,"top=100,left=100,width=200,height=200,menubar=yes,scrollbars=no,toolbar=yes,status=yes"); } openURL(); function init(){ alert("页面文档加载完毕"); } </script> </head> <body οnlοad="init()"> |
window.onresize
window.onresize = function(){ alert("窗体大小发生变化"); }
|
Javascript高级篇
- function可以定义函数和类
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //传统方式定义方法 function say(name,age){ alert(name+"今年"+age+"岁了"); } //另一种定义方法 var sayFunc = new Function("name","age","alert(name+'今年'+age+'岁了')"); sayFunc("李四",5); alert("sayFunc方法对象的参数个数:"+sayFunc.length); alert("显示方法的源码:"+sayFunc.toString()); alert("显示方法的源码:"+sayFunc.valueOf()); </script> </head> <body> <input type="button" value="show" οnclick="say('张三',23)"> </body> |
- 成员变量和全局变量的访问
<script type="text/javascript"> var a = 22; //在外部定义的全局变量 function func(){ var b = 33; c = 44; //方法中局部变量没有var就是全局变量 alert("方法内部调用全局变量a:"+a); alert("方法内部调用局部变量b:"+b); } func(); alert("方法外部调用全局变量a:"+a); alert("方法尾部调用局部变量c:"+c); //没有var就是全局变量可以访问 alert("方法尾部调用局部变量b:"+b); //外部无法调用内部变量 </script> |
如何才能在外部访问成员变量呢?可以参看下面的方式
- 闭包(本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁)
<script type="text/javascript"> function outter(){ var aa = 22; //局部变量 function inner(){ //内部方法 alert(++aa); } return inner; //返回内部方法的调用 } var result = outter(); result(); </script> 可以将闭包理解为定义的实体类,有很多的private 变量,然后定义getter 和setter方法对外公开 或者有返回值的操作 <script type="text/javascript"> function outter(){ var aa = 22; //局部变量 function inner(){ //内部方法 return aa; } return inner; //返回内部方法的调用 } var result = outter(); alert(result()); </script> |
注意:由于闭包会使得函数中的变量都被保存在内存中,所以内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄漏,解决方法时,在退出函数前将不使用的局部变量全部删除。
创建对象的方式有两种。
方式一:对象初始化器方式
<script type="text/javascript"> var marry = { name : "marry", age : 2, shout : function(){ alert("我是:"+this.name+",今年:"+this.age); }, action : function(){ alert("会吃"); } }; alert(marry.name); alert(marry.age); marry.shout(); marry.action(); </script> |
方式二:构造函数方式
<script type="text/javascript"> function Dog(name,age){ this.name=name; this.age=age; this.shout=function(){ alert("我是:"+this.name+",今年:"+this.age); }; this.action=function(){ alert("会吃"); }; } var dog = new Dog("小白",1); alert(dog.name); alert(dog.age); dog.shout(); dog.action(); </script> |
对象属性定义:私有属性,对象属性,类属性的用法
<script type="text/javascript"> function C(){ this.obj1 = "对象属性1"; C.prototype.obj2 = "对象属性2"; var privateObj = "私有属性"; function displayName(){ alert(privateObj); } displayName(); } C.classPro = "类属性"; //属于C类的属性 alert(C.classPro); var c = new C(); alert(c.obj1); alert(c.obj2); c.displayName; </script> |
对象方法定义:私有方法,对象方法,类方法
<script type="text/javascript"> function C(){ var privateFunc = function(){ alert("私有方法"); }; privateFunc(); this.objFunc1 = function(){ alert("对象方法1"); }; C.prototype.objFunc2 = function(){ alert("对象方法2"); }; } C.classFunc = function(){ alert("类方法"); }; C.classFunc(); var c = new C(); c.objFunc1(); c.objFunc2(); </script> |
继承
<script type="text/javascript"> function Animal(name,age){ this.name=name; this.age=age; this.shout=function(){ alert("我是:"+this.name+",今年:"+this.age); }; this.action=function(){ alert("会吃"); }; } function Dog(name,age){ //this指当前Dog类,相当于克隆Animal Animal.apply(this,[name,age]); } //但是dog的原型还是Dog类,这时需要转换原型 Dog.prototype=new Animal(); var jack = new Dog("jack",2); alert(jack.name); alert(jack.age); jack.shout(); jack.action(); </script>
注意:
|
多态性
<script type="text/javascript"> function Animal(){ //定义动物类 this.say = function(){ alert("我是动物"); }; } function Dog(){ //定义狗类 this.say = function(){ alert("我是狗狗"); } } Dog.prototype = new Animal(); //狗类继承动物类 function Cat(){ //定义猫类 this.say = function(){ alert("我是猫猫"); } } Cat.prototype = new Animal(); //猫类继承动物类 function say(animal){ if(animal instanceof Animal){ animal.say(); } } var dog = new Dog(); var cat = new Cat(); say(dog); say(cat); </script>
|