立即学习:https://edu.csdn.net/course/play/9840/209168?utm_source=blogtoedu
作者的示例代码在如下地址: http://www.mark-to-win.com/Javascript/js1_web.html
本文内容是根据讲师马克的视频笔记，参考作者的代码，由于作者的代码太随性了，且是txt的，看着效果实在难受，遂经将其整理收录至本文。
第一章 JS 基础
第零节 前言
第一节 JS 基础
1.基础知识
1) Helloworld
例 1.1
<html>
<head>
<!-- 如果你用notepad建立一个txt之后你再改为html，一定在保存时，要保存为utf-8或unicode格式，
或者你也可以用myeclipse html designer编辑，这样你看的文本是有颜色的，如果觉得字体小，
可以在myeclipse html designer下面的窗口里右击鼠标，/preferences/general/editor/text editor.
注意在texteditor窗口里面的右边最下面，有一行不起眼你的小字，color and font，你可以设置。-->
</head>
<script type="text/javascript">
var a ;
/*before you set value, a' type can not be defined.*/
document.writeln("Before set value, type of 'a' is " + typeof(a) + ";<br>");
a = true;
document.writeln("After set a boolean type value, tpye of 'a' is " + typeof(a) + ";<br>");
/*下面的console.log只有安装了firebug的firebox不报错*/
console.log("This is the a message when show value of %s ;", a);
document.writeln("After set a boolean type value, value of 'a' is " + a + ";");
</script>
</html>
输出结果：
Before set value, type of 'a' is undefined;
After set a boolean type value, type of 'a' is boolean;
After set a boolean type value, value of 'a' is true; 控制台显示如下
2）火狐的firebug如何单步调试程序
3）html当中如何引用js文件
注：如果需要javascript工程师和html美工各干各的工作，需要分开写文件。
例 1.2
<html>
<head>
<script src="Hello.js"></script>
<title></title>
</head>
<body>
</body>
</html>Hello.js 文件内容如下:（如果你用notepad建立一个txt之后你再改为js，一定在存时，要存成utf-8或unicode格式）:
var a ;
/*before you set value, a' type can not be defined.*/
document.writeln(typeof(a) + "<br>他们");
a = true;
document.writeln(typeof(a) + "<br>");
/*下面的console.log只有安装了firebug的firebox不报错*/
console.log("This is the 1 message 马克-to-win write in %s", a);
document.writeln(a);2.简单语法：
例 2.1
<html>
<head>
</head>
<body>
<script type="text/javascript">
var i = 0;
do
{
i += 1;
window.document.write("i=" + i + "<br>");
}
while (i < 3)
</script>我们
</body>
</html>输出结果：
i=1
i=2
i=3
我们 例 2.2
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
var i = 5;
while (i > 0) {
window.document.write("value of i is : " + i + "<br>");
i--;
}
</script>
</head>
<body>
</body>
</html>输出结果：
value of i is : 5
value of i is : 4
value of i is : 3
value of i is : 2
value of i is : 1例 2.3（自动转化，比如3<"4"）
<html>
<head>
<script type="text/javascript">
result = 0;
function qiuhe()
{
var num = window.document.getelementbyid("num").value;
/*the following typeof(num) is a string. can automatically convert string to number.*/
alert("typeof(num) is "+typeof(num));
for (var i = 1; i <= num; i++)
{
result = result+i;
}
window.document.getelementbyid("result").value = result;
}
</script>
</head>
<body>
从1累加到
<input type="text" id="num" size="5">之和是<br>
<input type="text" id="result">
<input type="submit" onclick="qiuhe();" value="cal">
</body>
</html>输出结果：
当输入50时
例 2.4
注：javascript中，当作为字符串时，单引号和双引号是通用的，都行。
如下面的例子：如二者同时用，才需要配对。比如： <body οnlοad='a("a","b","c")'>
<html>
<head>
<script type="text/javascript">
var sex = 'female';
if (sex == "female")
this.document.writeln("小姐");
else
this.document.writeln('先生');
</script>
</head>
<body>
</body>
</html>输出结果：
小姐例 2.5
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
document.write("hello world <br>");
with (document) {
write("hello world with with1<br>");
write("hello world with with2<br>");
}
</script>
</head>
<body>
</body>
</html>输出结果：
hello world
hello world with with1
hello world with with2例 2.6
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script language="javascript">
var a = 12,b = 34,c = 56;
c = ++a + b;
//a值再加1为13，再加b34，c值为47
document.writeln("c=" + c + "<br>");
document.writeln("b=" + b + "<br>");
document.writeln("a=" + a + "<br>");
</script>
<title></title>
</head>
<body>
</body>
</html>输出结果：
c=47
b=34
a=13例 2.7（Document.write语法）
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
</title>
</head>
<body>
this content is before document.write <br>
<script type="text/javascript">
document.write("<hr size=2 color='orange' width=50% align=left>");
for (var i = 5; i > 0; i--)
{
if (i == 3) continue;
document.write("i=" + i + "<br>");
}
</script>
<br>this content is after document.write <br>
</body>
</html>
输出结果：
例 2.8（prompt）
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script>
/*JavaScript syntax: - myResult = myWindow.prompt(aString, aDefaultValue)
- myResult = prompt(aString, aDefaultValue)
Argument list: aDefaultValue An initial content for the text box
aString Some text to explain what to enter
*/
var yourgender = prompt("你的性別是：\n男生请按11，女生请按22", "22");
switch (yourgender) {
case "11" : document.writeln("你好！"); break;
case "22" : document.writeln("你好！woman"); break;
default : document.writeln("重按！");
}
</script>
</head>
<body>
</body>
</html>输出结果：
默认的输入框是22
若是输入11则
如是输入 其他数字，如123，则
3.其他高级话题：
1）类型转换，typeof的用法
例 3.1.1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<script language="javascript">
<!--
/*
Cast operator (Definition) refer to 过去的网站www.favo.com
A way of converting data types.
Primitive values can be converted from one to another or rendered as objects by using object constructors to convert the values.
Boolean
Number
String
Number() (Function) 马克-to-win: actually Number() is the method of Global object.
A Number type convertor.
Property/method value type: Number primitive
JavaScript syntax: - Number()
- Number(aValue)
Argument list: aValue A value to be converted to a number.
When the Number() constructor is called as a function, it will perform a type conversion.
The following values are yielded as a result of calling Number() as a function:
Value Result
Number No conversion, the input value is returned unchanged.
Non numeric string NaN
window.Number("23");在favo中查不出来， 但Idea中可以打点打出来。
*/
-->
var a = 9;
/*下句话如果放在ie8中执行， 必须打开debug工具*/
console.log(typeof(a));
document.writeln("typeof(a) is : " + typeof(a) + "<br>");
var as = String(a);
//string是global的方法
document.writeln("typeof(as) is : " + typeof(as) + "<br>");
var x = window.Number("23");
document.writeln("typeof(x) is : " + typeof(x) + "<br>");
var age2 = Number("56");
document.writeln("typeof(age2) is : " + typeof(age2) + "<br>");
var age3 = new Number(56);
document.writeln("typeof(age3) is : " + typeof(age3) + "<br>");
var y = Number("23xyz");
document.writeln("x=" + x + ", y=" + y + ", typeof(y) is : " + typeof(y) + "<br>");
</script>
</body>
</html>
输出结果：
例 3.1.2
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
/*javascript support type automatic conversion.the same value is equal */
document.writeln(6 == "6");
document.writeln("<br>");
/*the following requires that value and type should be the same.*/
document.writeln(6 === "6");
document.writeln("<br>");
/*When the Global object is created, it always has at least the following properties:
Object object Function object Array object String object
Boolean object Number object Date object Math object
Value properties
*/
var obj1 = new window.Object();
var obj2 = new Object();
/*Object references must refer to the same object instance.otherwise return false.*/
document.writeln(obj1 == obj2);
document.writeln("<br>");
document.writeln(typeof(obj1) === typeof(obj2));
</script>
<body>
</body>
</html>
输出结果：
true
false
false
true 例 3.1.3（null和undefined的==和===的比较）
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
/* if a value is not set, its typeof is undefined, its value is undefined, if a value= null,
its typeof is object, its value is null,but when you use == to test, they are the same, but when to
use === to test, they are not the same,== means as long as value is the same,
ok, but === means type also must be equal. */
//声明变量x
var x;
var z1 = "d";
var y = null;
//document.writeln("z1 is"+z1);
/*if you cancel commenting out the following statement, it will give the blank page, which means it has error.*/
//document.writeln(zyx);
document.writeln("x is : " + x + " <br>");
document.writeln("typeof(x) is : " + typeof(x) + "<br>");
document.writeln("y is : " + y + "<br>");
document.writeln("typeof(y) is : " + typeof(y) + "<br>");
var z = undefined;
//document.writeln("z is : " + z + "<br>");
document.writeln("typeof(z) is : " + typeof(z) + "<br>");
if (y == undefined)
{
document.writeln('null and undefined is interchangable <br>');
}
if (z1 != null)
{
document.writeln('z1 != null');
document.writeln('<br>');
}
if (y === undefined)
{
document.writeln('null and undefined is exactly the same <br>');
}
if (x == undefined)
{
document.writeln('声明变量后默认值为 undefined <br>');
}
if (x === undefined)
{
document.writeln('声明变量后默认值为 exactly the same as undefined <br>');
}
if (x == null)
{
document.writeln('声明变量后默认值为 null <br>');
}
if (x === null)
{
document.writeln('马克-to-win：声明变量后默认值为 exactly the same as null, note that null\' s typeof is Object. <br>');
}
if (x == y)
{
document.writeln("x等于y <br>");
}
if (x === z)
{
document.writeln("x三等于z <br>");
}
</script>
<body>
</body>
</html>
输出结果：
x is : undefined
typeof(x) is : undefined
y is : null
typeof(y) is : object
typeof(z) is : undefined
null and undefined is interchangable
z1 != null
声明变量后默认值为 undefined
声明变量后默认值为 exactly the same as undefined
声明变量后默认值为 null
x等于y
x三等于z 2）局部变量和全局变量
注：浏览器里面 window 就是 global，通常可以省。nodejs 里没有 window，但是有个叫 global 的。
例 3.2.1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
/* 马克-to-win：有var无var， 在function外是一样的，都是全局的，在function里面时，var是局部的，而无var时是代表全局的*/
var testVar = "全局变量";
document.writeln("window.testVar is " + window.testVar + " | " + testVar + "<br>");
var testqVar = "全局变量q";
/*如不屏蔽下句话，程序直接停在这了，因为出错了，不认识testGlobal，得把下一句和下下句换一下位置，就ok了 */
//document.writeln("testGlobal is" + testGlobal);
testGlobal = "全局变量global";
document.writeln("value of 'abc' is " + abc + "<br>");
var abc;
testGlobalInVar = "全局变量globalInVar";
function testSco()
{
var lll = "qqq";
var testVar = "局部变量"; //此testVar非外面的testVar
testqVar = "全局变量qchange"; //此testqVar就是外面的testqVar
testGlobal = "全局变量globalchange";
var testGlobalInVar = "局部变量global"; //此testGlobalInVar非外面的testGlobalInVar
/*local variable is stronger than global variable.so "testVar" in the following statement means local variable.*/
document.writeln("value of 'testVar' is : " + testVar + "<br>");
document.writeln("value of 'testqVar' is : " + testqVar + "<br>");
document.writeln("value of 'testGlobalInVar' is : " + testGlobalInVar + "<br>");
}
testSco();
document.writeln("value of second 'test' is : " + testVar + "<br>");
document.writeln("value of second 'testqVar' is : " + testqVar + "<br>");
document.writeln("value of 'testGlobal' is : " + testGlobal + "<br>");
document.writeln("value of 'testGlobalInVar' is : " + testGlobalInVar + "<br>");
</script>
<body>
</body>
</html>输出结果：
window.testVar is 全局变量 | 全局变量
value of 'abc' is undefined
value of 'testVar' is : 局部变量
value of 'testqVar' is : 全局变量qchange
value of 'testGlobalInVar' is : 局部变量global
value of second 'test' is : 全局变量
value of second 'testqVar' is : 全局变量qchange
value of 'testGlobal' is : 全局变量globalchange
value of 'testGlobalInVar' is : 全局变量globalInVar 例 3.2.2
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
var abc = "全局变量";
function testscope()
{
/*
refer to 上例 first. 马克-to-win： because already defined local variable, but does not assign value,
so it is undefined. If we totally remove var abc = "局部变量"; alert(abc);
will print out 全局变量, but local "scope" will override the global "scope", it is undefined.
so we can learn a lesson, if we use a local variable, we must first assign value, then we can use it.
*/
document.writeln("函数内部赋值abc之前 : " + abc + "<br>");
var abc = "局部变量";
document.writeln("函数内部赋值abc之后 : " + abc + "<br>");
}
testscope();
document.writeln("函数外部赋值abc之后 : " + abc + "<br>");
</script>
<body>
</body>
</html>输出结果：
函数内部赋值abc之前 : undefined
函数内部赋值abc之后 : 局部变量
函数外部赋值abc之后 : 全局变量例 3.2.2_1:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
var abc = "全局变量";
function testscope()
{
document.writeln("函数内输出 : " + abc + "<br>");
}
testscope();
document.writeln("函数外输出 : " + abc + "<br>");
</script>
<body>
</body>
</html>输出结果：
函数内输出 : 全局变量
函数外输出 : 全局变量例 3.2.3(noblockScope)
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
function test()
{
/* 马克-to-win: there are only global variable (outside of any function) and function variable, no block variable at all.*/
/*note that in javascript, there is no block variable, only function variable, so m and z are function variable.*/
for (var z = 0; z < 2; z++)
{
var m = 1;
//m的作用范围是整个函数内，而不是循环体内
document.writeln("z is : " + z + "<br>");
}
//即使出了循环体，m和z的值依然存在
document.writeln("z is : " +z + ", m is : " + m + "<br>");
}
/*document is a property of global object---window,so can directly use.*/
test();
document.writeln("马克-to-win" + "<br>");
/*the following statement is wrong because no global m is defined first, so nothing can be printed out*/
document.writeln("m is : " + m + "<br>");
document.writeln("马克-to-win" + "<br>");
</script>
<body>
</body>
</html>输出结果：
z is : 0
z is : 1
z is : 2, m is : 1
马克-to-win例 3.2.4（局部变量， 全局变量）
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
function M1(arg1, arg2)
{
/*马克-to-win：note that here if var m1=new M1(8,9); then this.qqq means m1's property, while
if you directly call M1(2,3); then this.qqq means window's property. */
this.qqq = arg1;
/*note that here "bbb" means the windows's property*/
bbb = arg2;
/*the following "q" is a local variable, so inside another function, it can not be called. */
var q = 3;
}
function M2()
{
document.writeln("value of 'bbb' is : " + bbb + "<br>");
document.writeln("value of 'window.bbb' is : " + window.bbb + "<br>");
document.writeln("value of 'this.bbb' is : " + this.bbb + "<br>");
document.writeln("value of 'this.qqq' is : " + this.qqq + "<br>");
//alert("q is"+ q);
}
var m1 = new M1(8, 9);
m1.info = function()
{
document.writeln("value of 'this.qqq' inside of m1.info is : " + this.qqq + "<br>");
};
m1.info();
/*note that the following mk.info(); must be commented out, otherwise, it report error, because mk does not have
info() function, because the fucntion of info only belong to m1. this is also the difference between prototype
and m1.info(); */
// var mk=new M1(8,9);
// mk.info();
M2();
document.writeln("<br>");
document.writeln("attribute 'qqq' of 'this' outside of function is : " + this.qqq + "<br>");
document.writeln("attribute 'bbb' of 'this' outside of function is : " + this.bbb + "<br>");
document.writeln("attribute 'qqq' of 'm1' outside of function is : " + m1.qqq + "<br><br>");
document.writeln("the second step ..." + "<br><br>");
M1(2, 3);
M2();
document.writeln("<br>");
document.writeln("attribute 'qqq' of 'this' outside of function is : " + this.qqq + "<br>");
document.writeln("attribute 'bbb' of 'this' outside of function is : " + this.bbb + "<br>");
</script>
<body>
</body>
</html>输出结果：
value of 'this.qqq' inside of m1.info is : 8
value of 'bbb' is : 9
value of 'window.bbb' is : 9
value of 'this.bbb' is : 9
value of 'this.qqq' is : undefined
attribute 'qqq' of 'this' outside of function is : undefined
attribute 'bbb' of 'this' outside of function is : 9
attribute 'qqq' of 'm1' outside of function is : 8
the second step ...
value of 'bbb' is : 3
value of 'window.bbb' is : 3
value of 'this.bbb' is : 3
value of 'this.qqq' is : 2
attribute 'qqq' of 'this' outside of function is : 2
attribute 'bbb' of 'this' outside of function is : 33）嵌套函数
例 3.3.1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
function outerFun(){
var i = 0;
function innerFun(){
document.write("value of 'i' is : " + i + "<br>");
}
innerFun();
}
outerFun();
/*note : here you can not call innerFun(), because it is inside another function outerFun,
so it will cause error.*/
innerFun();
document.write("马克-to-win");
</script>
<body>
</body>
</html>输出结果：
value of 'i' is : 04）Function用法
例 3.4.1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
/*马克-to-win：When the Global object is created, it always has at least the following properties:
Object object
Function object
Array object
String object
Boolean object
Number object
Date object
Math object
Value properties
*/
/*Function的好处是， 函数体可以是运行时的一个传入的动态字符串，
for the Function class, the last parameter is
function body, while the parameters before the last one are input arguments.,
'x' can be changed to "x" */
var a='return x + y;';
var f = new Function('x', 'y',a ); // 等价于var f = function(x, y){return x + y;}
document.write("value of f(1, 1) is : " + f(1, 1));
</script>
<body>
</body>
</html>输出结果：
value of f(1, 1) is : 2 5）构造函数的用法：
例 3.5.1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
function Student(name, age)
{
/* Note ：later on we can use it in
var doc = new ActiveXObject( "Microsoft.XMLDOM" );
doc.async="false";
doc.load(str);
when a property has a this, means that this property is a member property.
*/
this.name = name;
this.age = age;
this.parti = function()
{
document.writeln("名字是 : " + this.name + "<br>");
document.writeln("年纪是 : " + this.age + "<br>");
};
}
var p = new Student('jeri', 3);
document.writeln("typeof p is : " + typeof(p) + "<br>");
//typeof(p) is object
p.parti();
p.age = 4;
p.parti();
/*the following two methods can also access some properties.*/
document.writeln('value of p["age"] is : ' + p["age"] + "<br>");
document.writeln('value of p["a" + "ge"] is : ' + p["a" + "ge"] + "<br>");
if (p instanceof Student) document.writeln("p是Student的实例<br>");
/* javascript 中的对象全部是Object 的子类
Because this object is the topmost parent object in the prototype inheritance hierarchy, all other object classes inherit its methods and properties. It's a close enough call that JavaScript 2.0 may well move it into the class-based object-oriented category at which time the prototype inheritance would be replaced with super-class/sub-class mechanisms and the arguments become null and void. */
/* When the Global object is created, it always has at least the following properties:
Object object
Function object
Array object
String object
Boolean object
Number object
Date object
Math object
Value properties
*/
if (p instanceof Object) document.writeln("p是Object的实例");
</script>
<body>
</body>
</html>输出结果：
typeof p is : object
名字是 : jeri
年纪是 : 3
名字是 : jeri
年纪是 : 4
value of p["age"] is : 4
value of p["a" + "ge"] is : 4
p是Student的实例
p是Object的实例 例 3.5.2
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
function f2()
{
this.lll = "马克-to-win";
document.writeln("where is in f2 <br>");
/*for new operator, the following statement got no use. */
return 'Hello 马克-to-win';
}
/*so f2 has dual role, one is ordinary function, another is that construactor,
see whether you use new operator or just simply call it.*/
var f5 = f2();
document.writeln("typeof f5 is : " + typeof f5 + "; typeof f2 is : " + typeof f2 + "; value of f5 is : " + f5 + "<br>");
document.writeln("<br>");
document.writeln("f5.lll is : " + f5.lll + "<br>'window.lll' is : " + window.lll + "<br>'lll' is : " + lll + "<br>");
document.writeln("<br>");
var f6 = new f2();
document.writeln("typeof f6 : " + typeof f6 + " ; typeof f2 is : " + typeof f2 + "; value of f6 is : " + f6 + "<br>");
document.writeln("<br>");
document.writeln("f6.lll is : " + f6.lll + "<br>'window.lll' is : " + window.lll + "<br>'lll' is : " + lll + "<br>");
var zhanwei = "zhanwei";
</script>
<body>
</body>
</html>输出结果：
where is in f2
typeof f5 is : string; typeof f2 is : function; value of f5 is : Hello 马克-to-win
f5.lll is : undefined
'window.lll' is : 马克-to-win
'lll' is : 马克-to-win
where is in f2
typeof f6 : object ; typeof f2 is : function; value of f6 is : [object Object]
f6.lll is : 马克-to-win
'window.lll' is : 马克-to-win
'lll' is : 马克-to-win6）静态方法和prototype（难）
例 3.6.1
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
/*note that 马克-to-win： static variable's value has nothing to do with instance's variable's value.instance 名称 can not 直接access static member like in java.
This is different from Java，比如下面例子中，Student.number=2,但是d1.number就为undefined.This is different from Java，但在实例方法中（比如d1.info）可以访问Student.number。这是和java中一样的。或者说function外或任何地方都可以访问Student.number。反过来，d1.age也可以在静态方法中访问，就像在function外一样，任何地方都能访问d1.age。String.prototype.abcd，这是给所有的实例加属性而不是静态属性。*/
function Student(number, agev)
{
this.age = agev;
/*static variable's value can not be accessed by instance */
Student.number = number;
/*lb is local variable, but not a member variable because it is not modified by this. from outside it can not be accessed. refer to noblockScope.html */
var lb = 0;
}
var d1 = new Student(1, 3);
document.writeln("this的age属性为means window.age" + this.age + "<br>");
document.writeln("d1的age属性为" + d1.age + "<br>");
document.writeln("d1的number属性为" + d1.number + "<br>");
document.writeln("通过Student访问静态number属性为" + Student.number + "<br>");
document.writeln("d1的lb属性为" + d1.lb + "<br><hr>");
d1.qixy = "abc";/*以随意为实例加属性或方法*/
document.writeln("可以随意为实例加属性或方法see following，d1的qixy属性为" + d1.qixy + "<br><hr>");
document.writeln("是否有静态变量qixy" + Student.qixy + "<br><hr>");
d1.info = function()/*此方法仅为d1对象所用*/
{
document.writeln("对象的qixy属性:" + this.qixy);
document.writeln("对象的age属性:" + this.age);
/*下列话是合法的， 因为不是this.number， 而是Student.number*/
document.writeln("static method is " + Student.number);
};
Student.prototype.infop = function()/*此方法可以为所有Student对象所用*/
{
document.writeln("对象的qixy属性p:" + this.qixy);
document.writeln("对象的age属性p:" + this.age);
/*下列话是合法的， 因为不是this.number， 而是Student.number*/
document.writeln("static method is " + Student.number);
};
Student.staticMethod = function()
{
/*下列话是合法的， 因为是d1.age，就像在function外一样，任何地方都能访问d1.age*/
document.writeln("d1的age属性为" + d1.age + "<br>");
document.writeln("static method is " + Student.number);
};
d1.info();
Student.staticMethod();
var d2 = new Student(2, 4);
/*the following statement can not be added, otherwise, it report error. because info is d1's method.
this is the beneit of prototype.prototype 能给类添加instance方法*/
// d2.info();
d2.infop();
d1.infop();
document.writeln("d1的age属性为" + d1.age + "<br>");
document.writeln("d1的number属性为" + d1.number + "<br>");
document.writeln("d2的age属性为" + d2.age + "<br>");
document.writeln("d2的number属性为" + d2.number + "<br>");
document.writeln("通过Student访问静态number属性为" + Student.number + "<br>");
Student.number = 3;
document.writeln("通过Student访问静态number属性为" + Student.number + "<br>");
Student.number1 = 31;
document.writeln("通过Student访问静态number1属性为" + Student.number1 + "<br>");
/*马克-to-win： abc是静态属性。 只能通过String.abc这样静态的属性来访问。通过以下的as.abc这样的
实例属性是访问不着的。用以下的String.prototype.abcd，这是给所有的实例加属性而不是静态属性，用as.abcd这样的实例属性就能访问着了*/
/*When the Global object is created, it always has at least the following properties:
Object object Function object Array object String object
Boolean object Number object Date object Math object
Value properties
*/
String.abc = "qixy";
document.writeln("通过String访问静态abc属性为" + String.abc + "<br>");
var as="aString"
document.writeln("as.abc is " +as.abc + "<br>");
String.prototype.abcd="qixyqixy";
document.writeln("as.abcd is " +as.abcd + "<br>");
/*a property can be nonexist, it is still can be printed out.*/
document.writeln("d1的noexist属性为" + d1.noexist + "<br><hr>");
/* p3 does not exists, error is generated.so program will stop here. */
document.writeln("p3的lb属性为" + p3.lb + "<br><hr>");
document.writeln("d1的noexist属性为" + d1.noexist + "<br><hr>");
</script>
here is body which is after the tag of script输出结果：
this的age属性为means window.ageundefined
d1的age属性为3
d1的number属性为undefined
通过Student访问静态number属性为1
d1的lb属性为undefined
可以随意为实例加属性或方法see following，d1的qixy属性为abc
是否有静态变量qixyundefined
对象的qixy属性:abc 对象的age属性:3 static method is 1 d1的age属性为3
static method is 1 对象的qixy属性p:undefined 对象的age属性p:4 static method is 2 对象的qixy属性p:abc 对象的age属性p:3 static method is 2 d1的age属性为3
d1的number属性为undefined
d2的age属性为4
d2的number属性为undefined
通过Student访问静态number属性为2
通过Student访问静态number属性为3
通过Student访问静态number1属性为31
通过String访问静态abc属性为qixy
as.abc is undefined
as.abcd is qixyqixy
d1的noexist属性为undefined
here is body which is after the tag of script
prototype
注：prototype作用就是给某个类增加一个实例方法。
例 3.6.2
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
/*When the Global object is created, it always has at least the following properties:
Object object Function object Array object String object
Boolean object Number object Date object Math object
Value properties
*/
Array.prototype.mymethod = function(number)
{
var result = -1;
/*注意mymethod功能是找出某数在数组中出现的位置。作为Array的一个function，可以访问Array的属性this.length， 参见上一个prototype的例子，
Student.prototype.infop = function()/*此方法可以为所有Student对象所用*/
{
document.writeln("对象的qixy属性p:" + this.qixy);
document.writeln("对象的age属性p:" + this.age);
/*下列话是合法的， 因为不是this.number， 而是Student.number*/
document.writeln("static method is " + Student.number);
};
*/
for (var i = 0; i < this.length; i ++)
{
if (this[i] == number)
{
result = i;
break;
}
}
return result;
}
var a = [3,5,23,4,67];
document.writeln(a.mymethod(4));
var zhanwei = "zhanwei";
</script>
输出结果：
37）onload
注：onload就是等页面加载完后才执行。
例 3.7.1
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<SCRIPT LANGUAGE="JavaScript">
<!--
function a(b)
{
document.write("part 1");
}
//-->
</SCRIPT>
</head>
<body onload='a("a","b","c")'>
part2,onload 会在ｐａｒｔ１和ｐａｒｔ２打印之后再执行。
</body>输出结果：
part 1例 3.7.2
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script LANGUAGE="JavaScript">
<!--
function a(b)
{
document.write("part 11");
}
document.write("part 5");
//-->
</script>
</head>
<body onload='a("a","b","c")'>
part2,onload 会在part 11和part2打印之后再执行。
</body>输出结果：
part 11例 3.7.3
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script language="JavaScript">
<!--
function a(b)
{
document.write(document.body.innerHTML + "part 11");
}
document.write("part 5");
//-->
</script>
</head>
<body onload='a("a","b","c")'>
part2,onload 会在part 11和part2打印之后再执行。
</body>输出结果：
8）arguments
例 3.8.1
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
/* 马克-to-win：when there are n functions with the same function name, only the last one is used. */
function test()
{
document.writeln("no argument constructor.");
}
function test(person)
{
document.writeln("马克-to-win2");
/*Function.arguments[] (Collection) The values passed to the function when it is called.
马克-to-win: inside function,we can directly use arguments.
*/
var n = arguments.length;
document.writeln("n is " + n);
for (var i = 0; i < n; i++)
{
document.writeln("马克-to-win3");
document.writeln(arguments[i])
}
document.writeln(person);
document.writeln(typeof(person) + "is typeof");
}
/*when no param, undefined is passed in. no overloaded function concept.*/
test();
/*when there is no this function, program stops here.*/
change();
document.writeln("finally");
</script>
输出结果：
马克-to-win2 n is 0 undefined undefinedis typeof 例 3.8.2
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script language="javascript">
<!--
function a(b)
{
document.write(document.body.innerhtml + "b is " + b);
/*function.arguments[] (collection)
the values passed to the function when it is called.with firebug, we can directly see arguments*/
var n = arguments.length;
document.write(n);
for (var i = 0; i < n; i++)
{
document.write(arguments[i]);
document.write("ok");
}
}
document.write("part 1");
//-->
</script>
</head>
<body onload='a("a","b","c")'>
part2,onload 会在ｐａｒｔ１和ｐａｒｔ２打印之后再执行。
</body>
输出结果：
part 1 part2,onload 会在ｐａｒｔ１和ｐａｒｔ２打印之后再执行。 b is a3aokbokcok9）Object
例 3.9.1
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
/*马克-to-win：When the Global object is created, it always has at least the following properties:
Object object Function object Array object String object
Boolean object Number object Date object Math object
Value properties
*/
var oi = new Object();
oi.name = 'mark';
oi.height = 4;
function xxx()
{
document.writeln("对象的name属性:" + this.name);
document.writeln("<br>");
document.writeln("对象的height属性:" + this.height);
}
oi.list = xxx;
oi.list();
document.writeln(oi["name"] + oi["height"]);
</script>输出结果：
对象的name属性:mark
对象的height属性:4 mark4 10）json
例 3.10.1
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
var student =
{ name : 'mark',
age : 3 ,
classes : ['小' , '中' , "大"],
/* 马克-to-win：class is an array of string, also parents is also an array of json object. */
parents :[
{
name : 'father',
age : 42,
salary : 'low'
}
,
{
name : 'mother',
age : 37,
salary : 'high'
}
]
};
document.writeln(student.name);
document.writeln("<hr>");
document.writeln(student.age);
document.writeln("<hr>");
document.writeln(student.classes[1]);
document.writeln("<hr>");
document.writeln(student.parents[1].name);
</script>输出结果：
mark
3
中
mother
11）for in Array
例 3.11.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var a=['hello','teacher','马克-to-win'];
for(var iii in a){
this.document.write('inidex'+iii+'的值是'+a[iii]+"<br>");
}
</script>
</head>
<body>
</body>
</html>
输出结果：
inidex0的值是hello
inidex1的值是teacher
inidex2的值是马克-to-win12）函数指针
例 3.12.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function sortnumber(a, b)
{
document.writeln(a + b);
}
function sortq(sortnumberqqq)
{
document.writeln("马克-to-win");
sortnumberqqq(1, 2);
return 6;
}
/* note that it will report error if we write the following statement as document.write("test "+sortq(sortnumberqixy));
note that here sortnumber is a function pointer.
下面这句话是先执行sortq(sortnumber)，等返回值以后，再执行document.write("test "*/
document.write("test " + sortq(sortnumber));
</script>
</head>
<body>
</body>
</html>输出结果：
马克-to-win 3 test 6
13）call()和apply()
注：call是在特定的作用域中调用函数。
例 3.13.1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
</title>
<script type="text/javascript">
function A(name) {
this.name = name;
}
A.prototype.info = function()
{
/*如果下局解开屏蔽，最后结果则打印出就为A，结论就是在call时，先在A里找this.name，如果找不着，则用b环境里找，现在A的构造函数从来没有执行过，所以最后用的是B环境的name，见下一个例子*/
//this.name="A";
return "A的名字是 "+this.name;
}
function B(agev) {
this.age=agev;
this.name="I am B"
}
var b = new B(2);
var tmp =A.prototype.info;
document.writeln(tmp.call(b));
var zhanwei="zhanwei";
</script>
</head>
<body>
输出结果：
A的名字是 I am B
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
</title>
<script type="text/javascript">
function A(name,col) {
/*实参一个，但形参2个，所以最后一个参数color为undefined，id和name都有，所以是把B给冲了的，但age是用了B的*/
this.color=col;
this.id="a";
this.name = name;
return "A(name) 名字是 "+this.id+this.name+this.age+this.color;
}
A.prototype.info = function()
{
return "名字是 "+this.name;
}
A.prototype.country = "China";
function B(agev) {
this.id="b";
this.age=agev;
this.name="this is B"
}
var b = new B(2);
document.writeln(A.call(b, "马克-to-win"));
var zhanwei="zhanwei";
</script>
</head>
<body>
输出结果：
A(name) 名字是 a马克-to-win2undefined 例 3.13.2
<script>
/*
他们的用途相同，都是在特定的作用域中调用函数。screenX是window的一个field。
3、接收参数方面不同，apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。
call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来。 */
function sum(num1, num2) {
return screenX+num1 + num2;
}
document.writeln(screenX+" is screenX");
document.writeln(sum.call(window, 10, 10)); //20+screenX
document.writeln(sum.apply(window,[10,20])); //30+screenX
</script>
输出结果：
-4 is screenX 16 26 
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
