javascrpt随笔
function member(name, gender) { this.name = name; this.gender = gender; this.display = display; //指定member对象的display方法 } function display() { var str = this.name + " : " + this.gender; document.writeln(str + "<br>"); } var m1 = new member("zhangsan", "f"); var m2 = new member("lisi", "f"); var m3 = new member("wangwu", "m"); m1.display(); m2.display(); m3.display();
windows.location.href=乌拉河
function count()
{
setTimeout("alert('执行成功');", 7000);
}
• setInterval()：
• 格式：
[定时器对象名=] setInterval(“<表达式>”，毫
秒)
功能：重复执行<表达式>，直至窗口、框架被关
闭或执行clearInterval。
• clearInterval()：终止定时器
• 格式：
clearInterval(定时器对象名)
• 定时器：
• 用以指定在一段特定的时间后执行某段程序。
• setTimeout()：
• 格式：
[定时器对象名=] setTimeout(“<表达式>”，
毫秒)
功能：执行<表达式>一次。
function checkPassword(object) { if(object.value.length <= 4) { alert("密码长度过短"); object.focus(); object.select(); } }
with(document) { write("屏幕设定值<br>"); write("实际高度：" ,screen.availHeight, "<br>"); write("实际宽度：" ,screen.availWidth, "<br>"); write("屏幕区域高度： " , screen.height, "<br>"); write("屏幕区域宽度:", screen.width, "<br>"); }
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
screen是window的对象
function getEvent(event) { alert("事件类型： " + event.type); } document.write("单击..."); document.onmousedown = getEvent;//写法二
<a href="#" onclick="window.history.back(-1);return false;">返回</a>
history.go(-1)在firefox中使用 history.go(n)和history.back()在ie下均可正常使用，用于页面之间的跳转，在firefox下，做成按钮是可以使用的，链接的用法可以这样写就ok啦： <a href="#" onClick="history.back();return false;" >返回<a>FF在后面版本中,此bug已经修复,但是Chrome仍存在此Bug.
<a href="#" onclick="window.history.back();">返回</a>
window属性:screen,location,history,document是window的一个对象属性。
请参考:http://www.w3school.com.cn/htmldom/dom_obj_window.asp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>js24.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> function moveNext(object, index) { if(object.value.length == 4) { document.forms[0].elements[index + 1].focus(); } } function showResult() { var f = document.forms[0]; var result = ""; for(var i = 0; i < 4; i++) { result += f.elements[i].value; } alert(result); } </script> </head> <body onload="document.forms[0].elements[0].focus();"> <form> <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 0);">- <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 1);">- <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 2);">- <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 3);"> <input type="button" value="显示" onclick="showResult();" > </form> </body> </html>
1. 在js 中为某个对象（控件）绑定事件通常可以采取两种手段： 1）<input type=”button” onclick=”clickHandler();”> 2）<input type=”button” id=”button1”> <script type=”text/javascript”> var v = document.getElementById(“button1”); v.onclick = clickHandler; </script> 2. 有两种类型的cookie 1） 持久性cookie，会被存储到客户端的硬盘上。 2） 会话Cookie：不会存储到客户端的硬盘上，而是放在浏览器进 程所处的内存当中，当浏览器关闭则该会话cookie就销毁了。 3. 在JavaScript中，函数（function）就是对象。 4. 在JavaScript中，没有方法（函数）重载的概念。 5. 在JavaScript 中有一个Function 对象，所有自定义的函数都是 Function对象类型的。Function对象接收的所有参数都是字符串类 型的，其中最后一个参数就是要执行的函数体，而前面的参数则 是函数真正需要接收的参数。 6. 在JavaScript 中，每个函数都有一个隐含的对象arguments，表示 给函数实际传递的参数。
1. 每一个函数对象都有一个length 属性，表示该函数期望接收的参 数格式。它与函数的arguments不同，arguments.length表示函数 实际接收的参数格式。 2. JavaScript 中有五种原始数据类型：Undefined、Null、Boolean、 Number以及String。 3. Undefined数据类型的值只有一个：undefined。 4. Null数据类型的值只有一个：null。 5. Boolean数据类型的值有两个：true和false。 6. JavaScript中没有char数据类型。 7. typeof 是一元运算符，后跟变量的名称，用于获取变量的数据类 型，其返回值有5个：undefined、boolean、number、string以及 object。 8. 在JavaScript中，如果函数没有声明返回值，那么会返回undefined。 9. null与undefined的关系：undefined 实际上是从null派生出来的。 10. 强制类型转换：在JavaScript中有3种强制类型转换：Boolean(value)， Number(value)，String(value)。 11. 在JavaScript中，对于函数中定义的变量来说，加var表示局部变 量，不加var表示全局变量。 12. 在JavaScript，所有对象都是从Object对象继承过来的。Object中 的属性是不可枚举的(propertyIsEnumerable返回false)，因此无法通过for…in 语句得到其中的属性。 13. 在JavaScript中，可以动态添加对象的属性，也可以动态删除对象的属性。 var object = new Object(); //alert(object.username); object["username"] = "shengsiyuan"; alert(object.username); delete object.username; // username属性已经从object对象中删除 alert(object.username); 14. 在JavaScript中定义对象的第二种方式： // 在JavaScript中定义对象的最常见的方式 var object = {username: "zhangsan", password: 123}; 15. 对于JavaScript数组的sort方法来说，它会先将待排序的内容转换 为字符串（调用toString()方法），按照字符串的先后顺序进行排序。 var array = [1, 3, 25]; array.sort(); alert(array); //1,25,3 function compare(num1, num2) { var temp1 = parseInt(num1); var temp2 = parseInt(num2); if(temp1 < temp2) { return -1; } else if(temp1 == temp2) { return 0; } else { return 1; } } //var array = [1, 3, 25]; //array.sort(compare); //函数名是对象引用 //alert(array); var array = [1, 3, 25]; // 匿名函数 array.sort(function(num1, num2) { var temp1 = parseInt(num1); var temp2 = parseInt(num2); if(temp1 < temp2) { return -1; } else if(temp1 == temp2) { return 0; } else { return 1; } } ); alert(array);
★★★★★ 16. JavaScript中定义对象的几种方式（JavaScript中没有类的概念，只 有对象）： 1） 基于已有对象扩充其属性和方法： var object = new Object(); object.name = "zhangsan"; object.sayName = function(name) { this.name = name; alert(this.name); } object.sayName("lisi"); 2）工厂方式 function createObject() { var object = new Object(); object.username = "zhangsan"; object.password = "123"; object.get = function() { alert(this.username + ", " + this.password); } return object; } var object1 = createObject(); var object2 = createObject(); object1.get(); 带参数的构造方法： function createObject(username, password) { var object = new Object(); object.username = username; object.password = password; object.get = function() { alert(this.username + ", " + this.password); } return object; } var object1 = createObject("zhangsan", "123"); object1.get(); 让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数 对象。 function get() { alert(this.username + ", " + this.password); } function createObject(username, password) { var object = new Object(); object.username = username; object.password = password; object.get = get; return object; } var object = createObject("zhangsan", "123"); var object2 = createObject("lisi", "456"); object.get(); object2.get(); 3） 构造函数方式 function Person() { //在执行第一行代码前，js引擎会为我们生成一个对象 this.username = "zhangsan"; this.password = "123"; this.getInfo = function() { alert(this.username + ", " + this.password); } //此处有一个隐藏的return语句，用于将之前生成的对象返回 } var person = new Person(); person.getInfo(); 可以在构造对象时传递参数 function Person(username, password) { this.username = username; this.password = password; this.getInfo = function() { alert(this.username + ", " + this.password); } } var person = new Person("zhangsan", "123"); person.getInfo(); 4）原型（“prototype”）方式 function Person() { } Person.prototype.username = "zhangsan"; Person.prototype.password = "123"; Person.prototype.getInfo = function() { alert(this.username + ", " + this.password); } var person = new Person(); var person2 = new Person(); person.username = "lisi"; person.getInfo(); person2.getInfo(); //------------------------- function Person() { } Person.prototype.username = new Array(); Person.prototype.password = "123"; Person.prototype.getInfo = function() { alert(this.username + ", " + this.password); } var person = new Person(); var person2 = new Person(); person.username.push("zhangsan"); person.username.push("lisi"); person.password = "456"; person.getInfo(); person2.getInfo(); 如果使用原型方式对象，那么生成的所有对象会共享原型中的属性， 这样一个对象改变了该属性也会反应到其他对象当中。 单纯使用原型方式定义对象无法在构造函数中为属性赋初值，只能在 对象生成后再去改变属性值。 使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各 个对象间共享同一个方法 //使用原型+构造函数方式来定义对象 function Person() { this.username = new Array(); this.password = "123"; } Person.prototype.getInfo = function() { alert(this.username + ", " + this.password); } var p = new Person(); var p2 = new Person(); p.username.push("zhangsan"); p2.username.push("lisi"); p.getInfo(); p2.getInfo(); 5） 动态原型方式：在构造函数中通过标志量让所有对象共享一个 方法，而每个对象拥有自己的属性。 function Person() { this.username = "zhangsan"; this.password = "123"; if(typeof Person.flag == "undefined") { alert("invoked"); Person.prototype.getInfo = function() { alert(this.username + ", " + this.password); } Person.flag = true; } } var p = new Person(); var p2 = new Person(); p.getInfo(); p2.getInfo();
★★★★★
17. JavaScript中的继承。 1） 对象冒充 //继承第一种方式：对象冒充 function Parent(username) { this.username = username; this.sayHello = function() { alert(this.username); } } function Child(username, password) { //下面三行代码是最关键的代码 this.method = Parent; this.method(username); delete this.method; this.password = password; this.sayWorld = function() { alert(this.password); } } var parent = new Parent("zhangsan"); var child = new Child("lisi", "1234"); parent.sayHello(); child.sayHello(); child.sayWorld(); 2） call方法方式。 call方法是Function对象中的方法，因此我们定义的每个函数都拥有 该方法。可以通过函数名来调用call方法，call方法的第一个参数会 被传递给函数中的this，从第2个参数开始，逐一赋值给函数中的参 数。 //继承的第二种实现方式，call方法方式,Function对象中的方法 function test(str, str2) { alert(this.name + ", " + str + ", " + str2); } var object = new Object(); object.name = "zhangsan"; //test.call相当于调用了test函数 test.call(object, "shengsiyuan", "hello"); //将object赋给了this //------------------------------------------------------------- //使用call方式实现对象的继承 function Parent(username) { this.username = username; this.sayHello = function() { alert(this.username); } } function Child(username, password) { Parent.call(this, username); this.password = password; this.sayWorld = function() { alert(this.password); } } var parent = new Parent("zhangsan"); var child = new Child("lisi", "123"); parent.sayHello(); child.sayHello(); child.sayWorld(); 3） apply方法方式 //使用apply方法实现对象继承 function Parent(username) { this.username = username; this.sayHello = function() { alert(this.username); } } function Child(username, password) { Parent.apply(this, new Array(username)); this.password = password; this.sayWorld = function() { alert(this.password); } } var parent = new Parent("zhangsan"); var child = new Child("lisi", "123"); parent.sayHello(); child.sayHello(); child.sayWorld(); 4）原型链方式（无法给构造函数传参数） //使用原型链（prototype chain）方式实现对象继承 function Parent() { } Parent.prototype.hello = "hello"; Parent.prototype.sayHello = function() { alert(this.hello); } function Child() { } Child.prototype = new Parent(); Child.prototype.world = "world"; Child.prototype.sayWorld = function() { alert(this.world); } var child = new Child(); child.sayHello(); child.sayWorld(); 5）混合方式（推荐） //使用混合方式实现对象继承(推荐) function Parent(hello) { this.hello = hello; } Parent.prototype.sayHello = function() { alert(this.hello); } function Child(hello, world) { Parent.call(this, hello); this.world = world; } Child.prototype = new Parent(); Child.prototype.sayWorld = function() { alert(this.world); } var child = new Child("hello", "world"); child.sayHello(); child.sayWorld();
function Shape(edge) { this.edge = edge; } Shape.prototype.getArea = function() { return -1; } Shape.prototype.getEdge = function() { return this.edge; } function Triangle(bottom, height) { Shape.call(this, 3); this.bottom = bottom; this.height = height; } Triangle.prototype = new Shape(); Triangle.prototype.getArea = function() { return 0.5 * this.bottom * this.height; } //Triangle.prototype.getEdge = function() //{ // return this.edge; //} var triangle = new Triangle(10, 4); //alert(triangle.getEdge()); //alert(triangle.getArea()); function Rectangle(bottom, height) { Shape.call(this, 4); this.bottom = bottom; this.height = height; } Rectangle.prototype = new Shape(); Rectangle.prototype.getArea = function() { return this.bottom * this.height; } //Rectangle.prototype.getEdge = function() //{ // return this.edge; //} var rectangle = new Rectangle(20, 40); alert(rectangle.getEdge()); alert(rectangle.getArea());
