从今天起学习javascript（一）

先废话一下，我学习javascript的最终目的是要建立一个属于自己的win_sidebar，下面还会发当前进度的winsidebar的学习笔记，有志于此的同学我们就一起加油吧！！！！有什么错误或者差错的地方欢迎指正啊！！！

想成为自己梦想里的人，从什么时候开始都不晚。

今天就开始浪子回头吧！

JavaScript 第一部分变量、函数、语句、运算符、事件

零、注释以及简介

（语句以分号结尾）

一、变量

1、变量声明（无需指定类型）

Var XXX；

2、变量赋值

赋值符"="

3、变量命名规则

大小写敏感，变量名必须以英文字母或下划线开头，不能与关键字或者保留字冲突

附1：Javascript关键字及保留字

4、变量类型

声明变量时无需指定类型，直接赋值成指定类型

布尔型：true false

空值型：null

数值型：

没有整形或者浮点型之分，“一个数值型变量一旦被定义并被赋值为某一类型的数值，在程序中它将保持相同类型的数值，除非通过某运算使它改变类型。”

字符串型：

--1、引号的匹配：给字符串型变量赋值时可使用双引号或单引号，但是必须一致。

--2、特殊字符与转义字符：附2：Javascript转义字符（\'，\"等作为字符串的一部分）和特殊字符

--3、HTML源代码可作为字符串的一部分**：

例如，

1：document.write("<B>This is MY Love </B><BR/>I am Fool");这个语句显示粗体和换行。

2：document.write("<B>This is MY Love </B>\nI am Fool");若这样，则只显示在同一行中。只显示This is MY Love I am Fool，\n不显示。

关于write这个方法：作用是将字符串参数写入本网页中。因此字符串中的HTML源代码会按相关语法处理。如果标签中含有属性说明，则需要用到引号..这里又涉及到引号的匹配,有两个方法：1、在双引号中使用单引号 2、使用转义字符 \"

--4、字符串的相加：即字符串拼接

5、变量使用

变量有作用域

(与C基本相同)

1、全局变量--声明在所有函数以外

2、局部变量--若局部变量与全局的变量名相同，则在本函数内，局部变量屏蔽全局（在前加var)。

变量在内存中的存储

二、函数

1、用途：同C

2、函数的声明和定义：

function functionname(parameters list){

//Code here

}

函数的命名：大小写敏感，变量名必须以英文字母或下划线开头，不能与关键字或者保留字冲突

3、函数参数：

直接在声明时的参数表列中写上变量名。（不写var）

4、函数返回值：语句return variablename;

5、函数的定义必须在被调用之前，可以在HTML的HEAD中定义函数，在BODY中调用。

6、在函数中调用函数：也必须在被调用之前定义。递归调用？？试一下，可以。

三、JAVASCRIPT运算符

算术、赋值、比较、逻辑、位运算

1.算术运算符:

+, -, *, /, %, ++, --，-取相反数

+ 数相加或者字符串连接，+ 中的类型转换：整型<浮点<字符串型

-减法，两数相减

/：不能出现除数为零，否则结果为Infinity；类型转换，3/4=0.75会出现小数。

%，++，--跟C一样

2.赋值运算符:

=, +=, -= ,*= , /=, %=

3.比较运算符:

= =, !=, <, > , <= ,>=

==和!=可以用于字符串的比较

"My sock"=="my sock"结果为假（有字符串的比较，字符串完全相同为真）

大于和小于等：数字小于字母，大写字母小于小写字母，（可能是将字符的ASCⅡ码比较）

4.逻辑运算符:

逻辑与&& 逻辑或|| 逻辑非!

5.位运算符:

6.优先级：

圆括号

一元运算符

乘除取模

加减

移位运算

关系比较

相等比较

按位与

按位异或

按位或

逻辑与

逻辑或

赋值运算符

四、条件语句与循环

1、if/else语句

if(.....)

{

Code here

}

else

{

Code here

}

2、switch语句 (旧版浏览器可能不支持)

switch(variablename)

{

case value1:

....;

break;

case value2:

....;

break;

case value3:

....;

break;

default:

....;

break;

}

3、循环语句

for(variablename = initialvalue; condition; code){

code

}

while(condition)

{

code here

}

{

code here

}while(condition)

五、事件句柄：OK

1.概念：

事件句柄是javascript中的预定义关键字，用来处理网页上某些事件的激发，具体的，事件就是网页对浏览者的某个动作的响应。可以增加交互性。

2.事件句柄的位置及使用：

多数情况下，事件句柄用于form元素、链接标记、和脚本头段标记之中，若是较新的浏览器，事件句柄也可以在其他位置发挥作用。

要使用事件句柄，必须了解事件句柄的关键字和应该在HTML源代码的哪个位置加入事件句柄。

实例：事件句柄onClick 用在用户点击网页某个区域时激发某些操作,点击的有效区域之一是窗口响应按钮（form button）

<FORM>form开始标记使其后面的按钮的input标记有效

</FORM>form结束标记表示完成了操作

为了使用事件句柄，这段代码作为HTML标记的一个附加属性，事件句柄属性与HTML标记属性的唯一不同就是可以在一个事件句柄属性中加入其它的JS代码，而不仅仅是是一个属性值。

注意：

1、引号原则，句柄属性的使用同HTML的属性，需要在js代码两边加双引号，中间代码有引号的须改为单引号。

2、在句柄后的双引号中可加入多句js代码，每个语句用引号隔开，但注意中间不能有换行，若有的话，会导致出现错误。

3、若语句太多，导致代码复杂难懂，可用调用函数的方法来避免这个问题。提高了易读性和可重用性。

例：

<HTML>

<HEAD>

<!--

function Hit_And_Run(){

window.alert("you Hit");

window.alert("and you Run before hit again");

window.alert("that is what hit and run");

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<INPUT type = "button" value = "how to hit and run"onClick = "Hit_And_Run();">放入一个按钮按钮上显示的是value属性的值

</FORM>

</BODY>

</HTML>

4、js事件有很多，但好像没有对用户上下翻转页面的响应。

3.具体的各个事件句柄：

事件	事件句柄	激发事件的动作
Click	onClick	用户点击某一区域（如按钮或表单输入域）
Mouseover	onMouseOver	用户将光标移至链接上
Mouseout	onMouseOut	用户将光标从连接上移开
Load	onLoad	网页加载完毕
Unload	onUnload	用户离开当前页面
Focus	onFocus	用户激活某对象
Blur	onBlur	用户取消激活某个对象
Change	onChange	用户改变表单元素的内容
Submit	onSubmit	用户提交表单
Absort	onAbsort	用户停止图像的加载（添加在图像标记之间）
Dragdrop	onDragDrop 实例 <BODY onDragDrop = "window.alert('what are you doing!');return false;"> ..................... </BODY>	用户使用操作系统的拖放功能，并将某对象拖至窗口中（放在起始<BODY>标记中）
Error	onError	在网页或图像的加在过程中发生错误 (图像标记或者<BODY>起始标记中)
Keydown	onKeyDown	用户按下键盘某键（文本域标记或是BODY起始标记）
Keypress	onKeyPress	用户按住某键，然后松开或是仍然保持按住的状态（同上）
Keyup	onKeyUp	用户松开键盘某键 (同上)
Mousedown	onMouseDown	用户按下鼠标键（链接（锚）标记或其他区域）
Mouseup	onMouseUp	用户松开鼠标键（同上）
Mousemove	onMouseMove	用户移动鼠标 (一般用在<BODY>起始标记或其他位置)
Reset	onReset	用户重置网页的表单（用于<FORM>标记之间）
Resize	onResize	用户改变窗口大小（BODY起始标记）
Select	onSelect	用户在表单域中进行选择（文本输入标记或文本域标记之间）
move	onMove	用户移动浏览器窗口的位置或者通过javascript命令移动窗口位置时发生。（一般被放在网页BODY起始标记中）

1/onClick 点击网页某些区域时发生区域：表单元素和链接

表单元素如按钮，见上面的例子。

链接：

<A href = "WWW.BAIDU.COM" onClick = "window.alert('you are so sick!');return false;">find what</A>语句return false;可以防止浏览器转到所在链接没有这句的话，在弹出窗口之后，浏览器会继续加载所在链接

2/onMouseOver 有多种特效_用户将光标移至一个文本链接、图像链接或是图像映射的某块区域之上

<A href="WWW.baidu.com" onMouseOver = "window.alert('NOT TO CLICK HERE！');">find what</A>用户将光标移至连接上立即弹出警告窗口

3/onMouseOut 用户将光标从一个文本链接、图像链接或是图像映射的某块区域中移开时发生。

<A href = "WWW.BAIDU.com" onMouseOut = "window.alert('What,YOU didn\'t like me?');">find what</A>用户将光标从连接上移开立即弹出警告窗口

4/onLoad 、 onUnload 分别是网页加载完成后发生的事件和用户试图离开当前页面(用户可以通过点击某个链接、在地址栏输入另一个地址或者关闭当前页面来离开当前页)发生的事件；两事件句柄都在<BODY>的开始标记中使用；

<BODY onLoad = "window.alert('I\'m Done!')" onUnload = "window.alert

('Would you leave me?');">

<B>Sample Page</B>

</BODY>

5/ onFocus 、 onBlur 分别是用户激活网页的一个窗口或是一个form元素发生的事件（用户的激活操作是通过点击对象的某个区域实现的）和用户取消一个窗口的或是一个form元素的激活状态时发生的事件两事件可以在<BODY>的开始标记（窗口被激活或是失去焦点）内或者form元素区域内使用。

<form>

ENTER your name：

<form>

6/onChange 用户把form元素中的内容改变（改变文本框的文字、选择框内选定某对象）时产生的事件

onSubmit用户提交网页上的表单时发生的事件用在form开始标记中。

<HTML>

<BODY>

<H2>Will you Find yourself?</H2>

You good today?

</SELECT>

<BR/>

</FORM>

</BODY>

</HTML>

7/其他事件：较少用到，应在具体需要时再去研究。

4、两个新的属性：（之前学的：弹出警示窗口、网页上显示文字）

1/改变状态栏

状态栏位于浏览器的底部，一般我们所看到的是“正在打开网页”、“完成”、“链接的URL地址”，下面的属性可以对状态栏中的文字进行修改,在状态栏中加入一段字符串；注：这段代码使得默认文字被改变之后，即使鼠标移开，状态栏的文字也暂时不会改变，如果要在鼠标移开后清除内容，则需增加onMouseOut事件，将状态栏重置为空白。

window.status = "Your text here";

<A href = "www.baidu.com" onMouseOver = "window.status = '百度';return true;" onMouseOut = "window.status = '';return true;">baidu</A>window.status后的return ture语句保证了默认文字被改为新的属性值，否则将无法正常显示字符串

2/按钮链接( 跟onClick事件一起使用 )带有链接的按钮，也可用函数来完成此功能。

window.location = "http://your link";

<FORM>

</FORM>

附1：

Javascript转义字符和特殊字符

代码	输出
\'	单引号
\"	双引号
\&	和号
\\	反斜杠\
\n	换行符
\r	回车符
\t	制表符
\b	退格符
\f	换页符

posted @ 2012-08-23 22:33 mcmggradty 阅读(695) 评论(0) 收藏举报

刷新页面返回顶部

mcmggradty

从今天起学习javascript（一）

公告