尚学堂马士兵JavaScript学习笔记.docx

尚学堂马士兵JavaScript学习笔记.docx

《尚学堂马士兵JavaScript学习笔记.docx》由会员分享，可在线阅读，更多相关《尚学堂马士兵JavaScript学习笔记.docx（14页珍藏版）》请在冰豆网上搜索。

尚学堂马士兵JavaScript学习笔记

一、程序开发分为客户端、服务器端

客户端开发的好处

减少客户端到服务器端的往返。

表单验证

服务器端开发的好处

web应用的核心逻辑集中管理

胖客户端、瘦客户端

二、客户端编程的主要技术

javascript（最主要的）

vbscript

jscript

applet

activex组件

plug-in技术（价值在于：

让专家级程序员开发新型语言）

flash技术的最新发展

jsdk包含的plug-in

yahoo的工具条

XX搜索伴侣

CNNIC网络实名等

3721

三、学习资料

msdnàjscript参考

CoreGuideJS15.zip

CoreReferenceJS15.zip

JavaScript手册－中文.chm

JavaScript2005-Wrox-ProfessionalJavascriptForWebDevelopers.pdf

四、JavaScriptandECMAversions

五、JavaScript和Java的区别

基于对象和面向对象

解释和编译

强变量和弱变量

JavaScript中变量声明，采用其弱类型。

即变量在使用前不需作声明，而是解释器在运行时检查其数据类型

x=1234;//数值型变量

y＝“4321”;//字符型变量

代码格式不一样

嵌入方式不一样

六、JavaScript

JavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用于之间的交互性能

由Netscape公司利用Sun的Java开发

它是与Java完全不同的一种语言。

虽然在结构和语法上与Java类似，但是，它只是函数式的语言。

客户端的JavaScript必须要有浏览器的支持

JavaScript（ECMAScript）

基础语法

DOM

DocumentObjectModel

BOM

BrowerObjectModel

JavaScript/jscript/ECMAScript

avaScript是由Netscape公司开发.它的前身是LiveScript

Microsoft发行jscript用于internetexplorer

最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种浏览器编写两种脚本。

于是诞生了ECMAScript,是一种国际标准化的javascript版本。

现在的主流浏览器都支持这种版本。

七、ECMAScript

ECMAScript并不与任何具体浏览器相绑定

一个完整的JavaScript实现是由以下3个不同部分组成的（见图1-1）：

核心（ECMAScript）

文档对象模型（DOM）；

浏览器对象模型（BOM）。

八、在网页中加入JavaScript

通过在网页中加入标记JavaScript的开始和结束，将JavaScript代码放到之间

（1.htm）

也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名

（2.htm）

原则上，放在之间。

但视情况可以放在网页的任何部分

（3.htm）

一个页面可以有几个

num不设定，则按数组默认的最大长度自动设定。

例如：

aa=newArray（）;

aa[20]=444;

document.write（aa.length）;

十四、JavaScript基本语法—运算符

算术运算

+、-、*、/

>、<、=、>=、<=、==

（7.htm）

逻辑运算

与：

&&

或：

||

非：

!

（8.htm）

字符串运算符

连接运算：

+（9.htm）

取子集：

substring（index1,index2）（10.htm）

条件表达式

条件?

A:

B（11.htm）

十五、substring方法

返回位于String对象中指定位置的子字符串。

strVariable.substring（start,end）

"StringLiteral".substring（start,end）

参数

start

指明子字符串的起始位置，该索引从0开始起算。

end

指明子字符串的结束位置，该索引从0开始起算。

说明

substring方法将返回一个包含从start到最后（不包含end）的子字符串的字符串。

substring方法使用start和end两者中的较小值作为子字符串的起始点。

例如，strvar.substring（0,3）和strvar.substring（3,0）将返回相同的子字符串。

如果start或end为NaN或者负数，那么将其替换为0。

子字符串的长度等于start和end之差的绝对值。

例如，在strvar.substring（0,3）和strvar.substring（3,0）返回的子字符串的的长度是3。

十六、JavaScript基本语法—控制语句

if语句

if（条件）elseif（条件1）else…（12.htm）

while语句

while（条件）…

13.htm

switch语句

switch（i）casei1:

…casei2:

…default:

…

（14.htm）

for

15.htm

do…while

16.htm

while

17.htm

十七、JavaScript内置类型

typeof返回值有六种可能：

"number,""string,""boolean,""object,""function,"和"undefined."

typeof操作符

十八、字符串对象

属性：

length

方法：

字体控制：

big（）blink（）bold（）fixed（）fontcolor（color）fontsize（size）Italics（）small（）anchor（）

字符串：

toLowCase（）toUpperCase（）indexOf（char,fromIndex）substring（start,end）

big（）、bold（）、link（）

varstrVariable="Thisisastringobject";

strVariable=strVariable.big（）.big（）.big（）.big（）.big（）.big（）.big（）.big（）.big（）;

strVariable=strVariable.bold（）;

strVariable=strVariable.link（""）;

document.write（strVariable）;

Thisisastringobject

substring、indexOf

substring（start,end）

返回字符串的子字符串

案例：

substring.htm

indexOf[charactor,fromIndex]

字符搜索

案例：

indexOf.htm

十九、Math对象

常用方法：

abs（）绝对值

sin（）,cos（）正弦余弦值

asin（）,acos（）反正弦反余弦

tan（）,atan（）正切反正切

round（）四舍五入

sqrt（）平方根

pow（x,y）x的y次方

二十、Date对象

创建方式：

myDate=newDate（）;

日期起始值:

１9７０年１月１日００:

００:

００

主要方法

getYear（）:

返回年数setYear（）:

设置年数

getMonth（）:

返回月数setMonth（）:

设置月数

getDate（）:

返回日数setDate（）:

设置日数

getDay（）:

返回星期几setDay（）:

设置星期数

getHours（）:

返回小时数setHours（）:

设置小时数

getMinutes（）:

返回分钟数setMintes（）:

设置分钟数

getSeconds（）:

返回秒数setSeconds（）:

设置秒数

getTime（）:

返回毫秒数setTime（）:

设置毫秒数

二十一、JavaScript基本语法—函数

函数的使用

利用function来定义一个函数（18.htm）

传入参数（19.htm）

传出值（20.htm）

函数的参数传递

preloadTreeImages（"1.gif","2.gif","3.gif"）;

functionpreloadTreeImages（）

{

for（vari=0;i

{

varimg=document.createElement（"img"）;

img.src=arguments[i];

div1.appendChild（img）;

}

}

二十二、JavaScript事件处理

onFocus：

在用户为了输入而选择select、text、textarea等时

（onFocus.htm）

onBlur：

在select、text、password、textarea失去焦点时

（onBlur.htm）

onChange：

在select、text、textarea的值被改变且失去焦点时

（onChange.htm/SelectionChange.htm）

onClick：

在一个对象被鼠标点中时（button,checkbox,radio,link,reset,submit,text,textarea等）

（onClick.htm）

onLoad：

出现在一个文档完成对一个窗口的载入时

（onLoad.htm）

onUnload：

当用户退出一个文档时

（onload.htm）

onMouseOver：

鼠标被移动到一个对象上时

（onMouse.htm）

onMouseOut：

鼠标从一个对象上移开时

（onMouse.htm）

onSelect：

当form对象中的内容被选中时

（onSelect.htm）

onSubmit：

出现在用户通过提交按钮提交一个表单时

（onSubmit.htm）

二十三、JavaScript的对话框

警告框（alert）：

出现一个提示信息

21.htm

询问框（prompt）：

返回输入的值

22.htm

确认框（confirm）：

根据不同的选择，返回true/false

23.htm

使用eval

不使用eval

alert（"3"+"2"）;

--〉32

使用eval的上下文环境

alert（eval（"3"）+eval（"2"））;

--〉5

eval（）函数可以把一个字符串当作一个JavaScript表达式一样去执行它

二十四、javascripthijacking

函数劫持

通过替换js函数的实现来达到劫持这个函数调用的目的

this指的是当前的对象

24.htm

函数调用时使用this

object.htm

自定义对象,随时可以增加属性,方法

class.htm

定义类

二十五、对象

for…in

In后跟一个对象，对此对象中的所有元素循环一次

（25.htm25_1.htm）

with

为一段代码建立一个缺省的对象，任何无对象的属性引用，都将使用该缺省的对象

（26.htm）

new

用于生成一个新的对象

（27.htm）

二十六、Try…Catch…

try{

document.writeln（"Beginnngthetryblock"）

document.writeln（"Noexceptionsyet"）

//Createasyntaxerror

eval（"6+*3"）

document.writeln（"Finishedthetryblockwithnoexceptions"）

}

catch（err）{

document.writeln（"Exceptioncaught,"）

document.writeln（"Errorname:

"+err.name）

document.writeln（"Errormessage:

"+err.message）

}

窗口中的对象和元素（BOM）

window

当前窗口（28.htm）

新开窗口（29.htm）

通过本地窗口控制新开窗口（30.htm）

location

获取或设置现有文档的URL（31.htm）

history

先前访问过的URL的历史列表

常用方法：

back（），go（number）

（32.htm/33.htm）

document

当前的文档对象

document.write（）：

向客户端浏览器输出内容

document.formName：

可以用这个方法得到表单名称

document.referrer

window

当前窗口（28.htm）

新开窗口（29.htm）

通过本地窗口控制新开窗口（30.htm）

二十七、location

获取或设置现有文档的URL（31.htm）

history

先前访问过的URL的历史列表

常用方法：

back（），go（number）

（32.htm/33.htm）

document

当前的文档对象

document.write（）：

向客户端浏览器输出内容

document.formName：

可以用这个方法得到表单名称

document.referrer

二十八、BrowserObjectModel

技巧：

setTimeout、setInterval

//vara=window.setInterval（"alert（'Hello,world'）",2000）;

vara=window.setTimeout（"alert（'Hello,world'）",2000）;

趣味JavaScript程序

黑客帝国（ex1/matrix.htm）

鼠标跟随（ex2/mouseTrace.htm）

找相同图片游戏（ex1/game/game.htm）

飘浮的云（ex1/floating.htm）

打字效果（ex1/printer.htm）

TicTacToe游戏（ex1/tictactoe.htm）

星球大战（ex1/starcraft/）

实用JavaScript程序

图片下拉列表（ex2/DropDown/）

相互关联的列表（ex2/relative.htm）

抽屉式菜单（ex2/drawer.htm）

滑入式菜单（ex2/slip.htm）

滚动下拉菜单（ex2/pulldown.htm）

日历（ex2/calendar）

输入判断js函数（ex2/pd.*）

window.open教程（window.open.htm）

确实要删除该条记录吗

functiona_onclick（）{

varcv

cv=window.confirm（'确实要删除该条记录吗?

'）

if（cv==true）{returntrue}

else{returnfalse}

}

程序优化

functiona_onclick_new（）{

event.returnValue=window.confirm（'确实要删除该条记录吗?

'）

}

学习HTML/CSS/JavaScript的方法

google

Alert（）

重点掌握表单输入的判断

prototype.js是由SamStephenson写的一个javascript类库

PrototypeisaJavaScriptFrameworkthataimstoeasedevelopmentofdynamicwebapplications.

《不可多得的Javascript（AJAX）开发工具－Aptana》

掌握基本知识

学会照猫画虎