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 <= )
{
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());
javascrpt随笔的更多相关文章
- AI人工智能系列随笔
初探 AI人工智能系列随笔:syntaxnet 初探(1)
- 【置顶】CoreCLR系列随笔
CoreCLR配置系列 在Windows上编译和调试CoreCLR GC探索系列 C++随笔:.NET CoreCLR之GC探索(1) C++随笔:.NET CoreCLR之GC探索(2) C++随笔 ...
- C++随笔：.NET CoreCLR之GC探索（4）
今天继续来 带大家讲解CoreCLR之GC,首先我们继续看这个GCSample,这篇文章是上一篇文章的继续,如果有不清楚的,还请翻到我写的上一篇随笔.下面我们继续: // Initialize fre ...
- C++随笔：从Hello World 探秘CoreCLR的内部(1)
紧接着上次的问题,上次的问题其实很简单,就是HelloWorld.exe运行失败,而本文的目的,就是成功调试HelloWorld这个控制台应用程序. 通过我的寻找,其实是一个名为TryRun的文件出了 ...
- ASP.NET MVC 系列随笔汇总[未完待续……]
ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...
- 使用Beautiful Soup编写一个爬虫 系列随笔汇总
这几篇博文只是为了记录学习Beautiful Soup的过程,不仅方便自己以后查看,也许能帮到同样在学习这个技术的朋友.通过学习Beautiful Soup基础知识 完成了一个简单的爬虫服务:从all ...
- 利用Python进行数据分析 基础系列随笔汇总
一共 15 篇随笔,主要是为了记录数据分析过程中的一些小 demo,分享给其他需要的网友,更为了方便以后自己查看,15 篇随笔,每篇内容基本都是以一句说明加一段代码的方式, 保持简单小巧,看起来也清晰 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
随机推荐
- Java 循环语句之多重循环
循环体中包含循环语句的结构称为多重循环.三种循环语句可以自身嵌套,也可以相互嵌套,最常见的就是二重循环.在二重循环中,外层循环每执行一次,内层循环要执行一圈. 如下所示: 例如:使用 * 打印长方形: ...
- unity, audio falloff
要达到声音随距离衰减的效果,需要使用3D音效,即把Spatial Blend设为1,然后再调节Min Distance和Max Distance(蓝色线框球体),并选择合适的Volume Rollof ...
- datawindow.net数据窗口卡片设置滚动条位置
int pos = Convert.ToInt32(dw1.Describe(colname + ".y")); pos = pos - 40; dw1.Modify(" ...
- Linux makefile教程之使用变量五[转]
使用变量 ———— 在 Makefile中的定义的变量,就像是C/C++语言中的宏一样,他代表了一个文本字串,在Makefile中执行的时候其会自动原模原样地展开在所使 用的地方.其与C/C++所不同 ...
- [转] 从 dll 程序集中动态加载窗体
无涯 原文 从 dll 程序集中动态加载窗体 [原创] 昨天晚上花了一晚上时间写了一个从程序集中动态加载窗体的程序．将任何包含窗体的代码编译成 dll 文件,再把 dll 文件拷贝到本程序的目录下,本 ...
- spring mvc 异常统一处理方式
springMVC提供的异常处理主要有两种方式: 一种是直接实现自己的HandlerExceptionResolver: 另一种是使用注解的方式实现一个专门用于处理异常的Controller——Exc ...
- Android实现button一边圆角一边直角
http://www.it165.net/pro/html/201503/36211.html
- MAC OSX 驱动操作
mac ox系统的驱动安装常规操作:下载到 *.kext 的驱动以后,都可以直接把它拖到 /System/Library/Extensions/ 下替换掉原来的文件.替换了以后,还需要修复权限才能够正 ...
- selenium python （六）定位一组对象
checkbox源码: <html><head><meta http-equiv="content-type" content="text/ ...
- Linux 下部署单机 hadoop 测试
最终运行结果展示: 格式化namenode. 开始测试 显示测试进程 浏览器查看效果展示:(虽然还不清楚是什么意思,但是能看到这个效果已经很开心了) 话不多说,进入主题: 1. 安装 VMwareSt ...