张孝详javascript讲座笔记
张孝详javascript讲座笔记一 收藏
一，脚本程序与javascript
嵌套在HTML中的语言称为脚本语言，浏览器必须具有脚本引擎对嵌入HTML中的脚本程序进行解释。
eg:
- < HTML >
- < script language = "JavaScript" >
- //VBScript,Jscript,ECMAScript
- <!--
- alert(new Date());//alert 方法只有直到用户单击弹出窗口的“确定”才返回
- // -->
- </ script >
- </ HTML >
<HTML> <script language="JavaScript"> //VBScript,Jscript,ECMAScript <!-- alert(new Date());//alert方法只有直到用户单击弹出窗口的“确定”才返回 // --> </script> </HTML>
可以通过script标签的language属性指定所用的脚本语言，VBScript是微软的脚本语言，也是ASP的服务器端的脚本语言。
- <script language= "VBScript" >
- <!--
- //VBScript的语句不用；分割，且NetScapt等浏览器不支持VBScript脚本
- alert(Date())
- //-->
- </script>
<script language="VBScript"> <!-- //VBScript的语句不用；分割，且NetScapt等浏览器不支持VBScript脚本 alert(Date()) //--> </script>
二，JavaScript的简介
前身叫做LiveScript,是一种基于对象(object-based)和事件驱动(Event Driven)并具有安全性能的脚本语言，是NetScapte公司的产品。
1，javaScript与Java
是两个公司开发的两个不同的产品，作用与用途不一样，JavaScript并不是Java的子集，JavaScript是基于对象的，而 不是面向对象的脚本语言。
2，JavaScript,JScript,ECMAScript
由于得不到netScapter公司技术的许可，微软开发出JScript，ECMA联合netScapt与Microsoft将脚本语言进行标准化，称 为ECMAScript。
浏览器必须具有相应的脚本语言的脚本引擎.
三，脚本代码的摆放位置
1，放置在<script></script>标签对之间，如
- <script type= "text/javascript" >
- <!--
- var x=3;
- // -->
- </script>
- <p> 这是一个HTML段落</p>
- <script type="text/javascript" >
- <!--
- alert(x);
- // -->
- </script>
<script type="text/javascript"> <!-- var x=3; // --> </script> <p>这是一个HTML段落</p> <script type="text/javascript"> <!-- alert(x); // --> </script> =>
- <p>这是一个HTML段 落</p>
- <script type="text/javascript" >
- <!--
- var x=3;
- alert(x);
- // -->
- </script>
<p>这是一个HTML段落</p> <script type="text/javascript"> <!-- var x=3; alert(x); // --> </script>
由于旧版本的浏览器不支持javascript,防止把javascript代码跟HTMLdiamond显示在屏幕上，可以采用HTML注释：
- < HTML >
- < script language = "JavaScript" >
- <!--
- alert(new Date());
- // -->
- </ script >
- </ HTML >
<HTML> <script language="JavaScript"> <!-- alert(new Date()); // --> </script> </HTML>
2，放置到一个单独的文件中(xx.js)
- <html>
- <script src="script.js" src= "script.js" language= "JavaScript" ></script>
- </html>
<html> <script src="script.js" src="script.js" language="JavaScript"></script> </html>
3，将脚本程序代码作为HTML的属性值
如：<a href="javascript:alert(new Date());">javascript</a>
注：href必须是以javascript：打头，作为协议(http，mailto，javascript，ftp等协议)
<input type="button" value="Test" onclick="alert(new Date());">
此时onclick的javascript代码不必以javascript：作为协议开头，这些javascript语句最后一句可以不用";"结束。
即作为事件属性 javascript不必以javascript:开头。
=====================
张孝详javascript讲座笔记二 收藏
一，JavaScript中的保留关键字
abstract extends instanceof static undefined
boolean false int super with
break final interface switch
byte finally long synchronized
case float native this
catch for new throw
char function null throws
class goto package transient
const if private true
continue imlements protected try
default import public var
do in return void
double else short while
二，JavaScript的标识符
可以由任意顺序的大小字母，数字，下滑线和美元符号$组成，且不能以数字开头，不能是JavaScript中的保留关键字。
JavaScript是严格区分大小写的，且每条功能执行语句必须以;（分号）结束，（不一定需要手动输入，JavaScript可能自动加入），若
作为HTML属性的JavaScript语句最后一句可以省略分号。
三，JavaScript的注释
//单行注释
/*.....*/ 不能嵌套使用
而HTML的注释是<!--xxxxx-->
四，基本数据与常量
1，字符串常量
javascript没有单独的字符串常量，以单引号或者双引号括起来，如
"a book of javascript", 'abc', "a"，""
2，布尔值：true，false
3，null常量：表示变量已经有值且值为空
4，undefined常量：表示变量未赋值，如var a; //此时a为undefined
5，javascipt中的变量
var (javascript变量是弱类型的，定义时无限指定类型，赋值时由JavaScript引擎确定类型)
定义一个变量，系统为之分配一块内存。
声明变量用var:
eg：var name; //此时变量赋值为undefined
对已赋值的变量赋于一个其他类型的数据：
eg: name = 123; //此时name为int型
不事先声明变量而直接使用：
eg：x=123;
注意：
name = 333;
name = name + 1; //此时name的值是3331，而非334
若：
var name = 333;
name = name + 1; //此时name的值是334
==============================
张孝详javascript讲座笔记三 收藏
一，javascript的流程控制语句
if(x==null) 或 if(typeof(x) =='undefined')可以简单写if(!x)
注意：在javascript中，false,null,undefined,0,""均是false
即 var x;
此时 if(x==null)
if(typeof(x)=='undefined')均为真
二，switch语句
switch(表达式) //javascript中，表达式的值可以是javascript支持的任何数据类型
{
case 取值1：
语句块1；
break;
...
case 取值n:
语句块n;
break;
default:
语句块n+1;
break;
}
三，while语句
while(条件表达语句)
{
执行语句块
}
eg:
var x = 1;
while(x<3)
{
alert('x='+x);
x++;
}
var x；//注意此时x的值是null，类型是'undefined'，即x==null，typeof(x)=='undefined'
break与continue语句；
st:
while(true)
{
while(true)
{
break st；
}
}
var output='';
for(var x=1;x<10;x++)
{
if(x%2==0)
{
continue;
}
output = output + 'x='+x;
}
alert(output);
四，函数
function 函数名(参数列表)
{
程序代码；
return 表达式;
}
对函数调用的几种方式：
1，函数名(传递给函数的参数1，传递给函数的参数2, ,,,);
2, 变量名=函数名(传递给函数的参数1，传递给函数的参数2, ,,,);
3, 对于有返回值的函数调用，也可以在程序中直接使用返回的结果，eg:
alert('sum='+squre(2,3));
又eg:
- <script language= "javascript" >
- <!--
- var msg = '全局变量 ' ;
- //写在function中的代码不会被浏览器执行，只有在程序中 调用了这些函数才会执行这个函数
- function square(x,y)
- {
- var sum;
- sum = x*x + y*y;
- return sum;
- }
- var sum;
- alert('sum=' +sum); //此时sum的值是undefined
- sum = square(2,3);
- alert('sum=' +sum);
- // -->
- </script>
<script language="javascript"> <!-- var msg = '全局变量'; //写在function中的代码不会被浏览器执行，只有在程序中调用了这些函数才会执行这个函数 function square(x,y) { var sum; sum = x*x + y*y; return sum; } var sum; alert('sum='+sum); //此时sum的值是undefined sum = square(2,3); alert('sum='+sum); // --> </script>
===============================
张孝详javascript讲座笔记四 收藏
一，全局变量和局部变量的比较
- <script type= "text/javascript" >
- <!--
- var msg = '全局变量 ' ;
- function show()
- {
- msg = '局部变量' ; //修改全局变 量的值
- }
- show();
- alert(msg); //此时的值为‘局部变量’
- //-->
- </script>
<script type="text/javascript"> <!-- var msg = '全局变量'; function show() { msg = '局部变量'; //修改全局变量的值 } show(); alert(msg); //此时的值为‘局部变量’ //--> </script>
- <script type= "text/javascript" >
- <!--
- var msg = '全局变量 ' ;
- function show()
- {
- var msg;
- msg = '局部变量' ; //只修改局部变量的值
- }
- show();
- alert(msg); //此时的值为‘局部变量’
- //-->
- </script>
<script type="text/javascript"> <!-- var msg = '全局变量'; function show() { var msg; msg = '局部变量'; //只修改局部变量的值 } show(); alert(msg); //此时的值为‘局部变量’ //--> </script>
二，javascript中参数个数可变的函数
在函数内部使用arguments对象来访问调用程序传递的所有参数，而在函数的声明中函数参数列表为空即可
eg:
- <script type= "text/javascript" >
- <!--
- function textparams()
- {
- var params = '' ;
- //在函数内部使用arguments对象来访问调用程序传递的所有参数
- for ( var i=0;i<arguments.length;i++)
- {
- params = params + '' + arguments[i];
- }
- textparams('abc' ,123);
- textparams(123,456,'abc' );
- }
- // -->
- </script>
<script type="text/javascript"> <!-- function textparams() { var params = ''; //在函数内部使用arguments对象来访问调用程序传递的所有参数 for(var i=0;i<arguments.length;i++) { params = params + '' + arguments[i]; } textparams('abc',123); textparams(123,456,'abc'); } // --> </script>
三，创建动态函数（在c/c++中利用函数指针来实现）
var varName = new Function(argument1,...,lastargument);
说明：
所有的参数都必须是字符串类型的，最后的一个参数必须是这个动态函数的功能程序代码。
eg:
- <script type= "text/javascript" >
- <!--
- var square = new Function( 'x' , 'y' , 'var sum,sum=x*x+y*y;return sum;' );
- alert(square(2,3));
- // -->
- </script>
<script type="text/javascript"> <!-- var square = new Function('x','y','var sum,sum=x*x+y*y;return sum;'); alert(square(2,3)); // --> </script>
动态函数有什么用？
可以在程序执行过程中，动态变换函数的函数代码；
四，javascript的系统函数(可以直接调用)
1，encodeURI方法
返回对一个URI字符串编码中的结果，本质是UTF-8编码
eg:
var urlStr = encodeURI('http://fanli.qq.com/index.html?a=ddd&msg=中国');
alert(urlStr);
2, decodeURI方法
对URI编码进行解码陈最初始的字符串并返回
3，parseInt方法
将一个字符串按指定的进制转换成一个整数
parseInt(numString, [radix])。如果没有指定第二个参数，则前缀为'0x'的字符串被视为十六进制，前缀为'0'的字符串被视为八进制
（这点要十分注意，tenfy在这里栽过跟头 ）， 所有其他的字符串都被视为十进制。热含有非数字的字符串，则只取前面数字部分进制进行转换。
eg:
parseInt('123abc',10); //结果为123
4，parseFloat方法：若转换失败，则返回NaN
5，isNaN方法 ---拥有检测parseInt和parseFloat方法的返回值是否是NaN (Not a Number)
注意：判断一个数是否是NaN不能这样，if(xx == NaN)，只能用该方法进行判断，如：
alert(NaN == NaN); //非常奇怪，这里的结果是false
alert(isNaN(NaN)); //true
6，escape方法
返回对一个字符串进行编码后的结果字符串。所有的空格，标点，重音符号以及任何其他人ASCII字符都用%xx编码替换。其中xx等于表示该字符的 Unicode字符集的编码的十六进制，字符值大约255的字符均用%uxxxx格式进行表示。
7，unescape方法
将一个escape方法编码的结果字符串解码陈原始字符串并返回。
8，eval方法
将其中的参数字符串作为一个javascript表示式进行执行并返回结果。
=============================
张孝详javascript讲座笔记五 收藏
一，javascript中的对象
。对象和对象实例
1，对象是对某一类事物的描述，是抽象上的概念，而对象实例是一类事物中的具体个例。（这里对象相当于java，c++中的类的概念）
2，能够被用来创建对象实例的函数就叫做对象的构造函数，只要定义了一个对象的构造函数就等于定义了一个对象，使用new关键字和对象的构造函数就 可以创建对象的实例。
var objInstance = new ObjName(传递给该对象的实际参数列表);
eg:
- <script type= "text/javascript" >
- <!--
- //构造函数，定义了一个构造函数即定义了一个对象
- function Person()
- {
- }
- // 创建一个对象实例
- var person1 = new Person();
- //为对象实例增加新的成员并赋值，以后就可以用这些成员
- //用对象实例名.成员名，也可以对象实例['成员变量名']
- person1.age = 18;
- person1.name = 'zxx' ;
- alert(person1.name = ';' + person1.age);
- function sayFunc()
- {
- alert(peson1.name + ':' + person1.age);
- }
- // 为对象实例增加新的方法
- person1.say = sayFunc;
- person1.say();
- // -->
- </script>
<script type="text/javascript"> <!-- //构造函数，定义了一个构造函数即定义了一个对象 function Person() { } //创建一个对象实例 var person1 = new Person(); //为对象实例增加新的成员并赋值，以后就可以用这些成员 //用对象实例名.成员名，也可以对象实例['成员变量名'] person1.age = 18; person1.name = 'zxx'; alert(person1.name = ';' + person1.age); function sayFunc() { alert(peson1.name + ':' + person1.age); } //为对象实例增加新的方法 person1.say = sayFunc; person1.say(); // --> </script>
二，构造方法与this关键字
1，为一个对象实例增加的属性和方法，不会增加到同一个对象所产生的其他对象实例。（即对象实例之间是独立的，互不影响的）
2，所有的实例对象在创建后都会自动调用构造函数，在构造函数中增加的属性和方法会被增加到每个对象实例上。
3，对象实例是用new关键字创建的，在构造函数中不要有返回结果的return语句。
4，调用对象的成员方法时，需要使用“对象实例.成员方法”的形式，很显然，用作成员方法的函数被调用的时候，一定伴随有某个对象实例。this关 键字代表某个成员方法执行时，引用该方法的当前对象实例，所以，this关键字只在用作对象成员方法的函数中出现。
eg:
- <script type= "text/javascript" >
- <!--
- function Person(name, age)
- {
- this .age = age;
- this .name = name;
- this .say = sayFunc();
- }
- function sayFunc()
- {
- alert(this .name + ',' + this .age);
- }
- var person1 = new Person( '张三 ' ，18);
- person1.say();
- var person2 = new Person( '李四' ，20);
- person2.say();
- // -->
- </script>
<script type="text/javascript"> <!-- function Person(name, age) { this.age = age; this.name = name; this.say = sayFunc(); } function sayFunc() { alert(this.name + ',' + this.age); } var person1 = new Person('张三'，18); person1.say(); var person2 = new Person('李四'，20); person2.say(); // --> </script>
三，在函数中修改参数值的问题（也就是输出参数的情况）
1，将基本数据类型的变量作为函数参数传递的情况
- <script type= "text/javascript" >
- <!--
- function changeValue(x)
- {
- x = 5;
- }
- var x = 3;
- changeValue(x);
- alert(x); //x=3
- // -->
- </script>
<script type="text/javascript"> <!-- function changeValue(x) { x = 5; } var x = 3; changeValue(x); alert(x); //x=3 // --> </script>
2，若将对象类型的变量作为函数参数传递的情况。
- <script type= "text/javascript" >
- <!--
- function Person(name,age)
- {
- this .age = age;
- this .name = name;
- this .say = sayFunc;
- }
- function sayFunc()
- {
- alert(this .name + ':' + this .age);
- }
- function change(p1)
- {
- p1.name = '李四' ;
- }
- var person1 = new Person( '张三' ，18);
- change(person1);
- person1.say(); //此时name为'李四'
- // -->
- </script>
<script type="text/javascript"> <!-- function Person(name,age) { this.age = age; this.name = name; this.say = sayFunc; } function sayFunc() { alert(this.name + ':' + this.age); } function change(p1) { p1.name = '李四'; } var person1 = new Person('张三'，18); change(person1); person1.say(); //此时name为'李四' // --> </script>