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则承载着整 ...
随机推荐
- jQuery 实现Bootstrap Chart 图表
很多时候我们制作报表的时候需要图表,如果你使用bootstrap开发你的网站,如果你需要使用图表,那么最简单的方法就是就是使用bootstrap 的chart.js来实现图表,下面介绍方法 1.引入c ...
- bootstrap-datetimepicker时间控件
欢迎各种吐槽. 本人小前端,学习过程中,某日遇到做时间控件的需求,于是无休止的召唤了度娘,发现看不太懂.算是为自己做个笔记,也便于菜鸟级别的看的懂. 首先,我们看看点击选择时间的时候的展示页面吧 年 ...
- MSSQL常用操作及方法总结
1.在安装Sql或sp补丁的时候系统提示之前有挂起的安装操作,要求重启的解决办法: 到注册表中找到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control ...
- 百度地图API开发指南
简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...
- linux_2015_0827_linux中一些常用词的发音and…
linux相关 Unix: [ ju:niks ] 发音 (yew-nicks) 尤里克斯 GNU [ gəˈnju: ] 发音 (guh-noo) 葛扭 Linux: [ 'li:nэks ] 里那 ...
- 排列组合+组合数取模 HDU 5894
// 排列组合+组合数取模 HDU 5894 // 题意:n个座位不同,m个人去坐(人是一样的),每个人之间至少相隔k个座位问方案数 // 思路: // 定好m个人 相邻人之间k个座位 剩下就剩n-( ...
- LeetCode(8) － String to Integer (atoi)
虽然是easy,却是比较繁琐的一道题,需要考虑各种边界条件.在WA了好几遍之后,才把各种边界条件给补全.需要考虑到的因素如下: 输入不合法字符,非"0-9",对于首位,合法字符还包 ...
- 使用Eclipse的几个必须掌握的快捷方式(能力工场小马哥收集)
“工若善其事,必先利其器”,感谢Eclipse,她 使我们阅读一个大工程的代码更加容易,在阅读的过程中,我发现掌握几个Eclipse的快捷键会使阅读体验更加流畅,写出来与诸君分享,欢迎补充. 1. C ...
- html5 拖放到购物车
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 第一百九十五天 how can I 坚持
晚上回来又肚子疼,拉肚子,咋搞的呢. 小米.华为.感觉虽然现在华为有些许优势,哎,还是不说了,感觉小米手机信号好像有问题. 中午吃的刀削面好像不熟,其实,怎么说呢,像开面馆,做的面顾客都吃不完,很明显 ...