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>
|
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
