JavaScriptJQuery学习Word文档格式.docx
- 文档编号:17376930
- 上传时间:2022-12-01
- 格式:DOCX
- 页数:55
- 大小:53.42KB
JavaScriptJQuery学习Word文档格式.docx
《JavaScriptJQuery学习Word文档格式.docx》由会员分享,可在线阅读,更多相关《JavaScriptJQuery学习Word文档格式.docx(55页珍藏版)》请在冰豆网上搜索。
第1章JavaScript语言入门
1JS背景与基本引用
Javascript是由Netscape公司创造的一种脚本语言。
为便于推广,被定为javascript,但是javascript与java是两门不相干的语言,作用也不一样。
作为一门独立的编程语言,javascript可以做很多的事情,但它最主流的应用还是在Web上——创建动态网页(即网页特效)。
Javascript在网络上应用广泛,几乎所有的动态网页里都能找到它的身影。
目前流行的AJAX也是依赖于Javascript而存在的。
Javascript与Jscript也不是一门相同的语言,Jscript和vbscript是微软开发的两种脚本语言,微软,Netscape公司以及其他语言开发商为减少web开发者的兼容麻烦,所以成立ECMA,该组织专门制定脚本语言的标准和规范。
ECMA制定的标准脚本语言叫做ECMAScript,Javascript符合ECMA的标准,其实Javascript也可以叫做ECMAScript.
Jscript也ECMA的标准,但用户较少。
vbscript仅局限在微软的用户,Netscape不支持。
概括地说,JavaScript就是一种基于对象和事件驱动,并具有安全性能的脚本语言,脚本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言,而不需要服务器的处理和响应,当然JavaScript也可以做到与服务器的交互响应,而且功能也很强大。
而相对的服务器语言像aspphpjsp等需要将命令上传服务器,由服务器处理后回传处理结果。
对象和事件是JavaScript的两个核心。
JavaScript可以被嵌入到HTML文件中,不需要经过Web服务器就可以对用户操作作出响应,使网页更好地与用户交互;
在利用客户端个人电脑性能资源的同时,适当减小服务器端的压力,并减少用户等待时间。
1.1直接将JavaScript插入网页
与在网页中插入CSS的方式相似,使用<
script>
标签在网页中插入Javascript代码。
使用下面的代码可以在网页中插入JavaScript:
<
scripttype="
text/JavaScript"
language="
javascript"
>
document.write("
君子务本,本立而道生!
"
);
/script>
有些浏览器可能不支持JavaScript,我们可以使用如下的方法对它们隐藏JavaScript代码。
html>
<
body>
!
--
我是菜鸟我怕谁!
//-->
/body>
/html>
---->
里的内容对于不支持JavaScript的浏览器来说就等同于一段注释,而对于支持JavaScript的浏览器,这段代码仍然会执行。
至于“//”符号则是JavaScript里的注释符号,在这里添加它是为了防止JavaScript试图执行-->
。
不过通常情况下,现在的浏览器几乎都支持JavaScript,即使是不支持的,也会了解如何合理地处理含有JavaScript的网页。
1.2插入JavaScript的位置
JavaScript脚本可以放在网页的head里或者body部分,而且效果也不相同。
(1)放在body部分的JavaScript脚本在网页读取到该语句的时候就会执行,例如:
document.write("
//-->
(2)在head部分的脚本在被调用的时候才会执行,例如:
head>
....
/head>
通常是在<
...<
定义函数,通过调用函数来执行head里的脚本。
(3)也可以像添加外部CSS一样添加外部JavaScript脚本文件,其后缀通常为.js。
例如:
scriptsrc="
scripts.js"
如果很多网页都需要包含一段相同的代码,那么将这些代码写入一个外部JavaScript文件是最好的方法。
此后,任何一个需要该功能的网页,只需要引入这个js文件就可以了。
注意:
脚本文件里头不能再含有<
标签。
1.3JavaScript指导准则
(1)在书写JavaScript的过程中,应该记住它是区分大小写的,变量名和函数名都区分大小写。
比如:
VarA=1;
Vara=2;
A和a是两个不同的变量。
(2)代码中多余的空格是被忽略的。
例如下面两个语句
a=b+c;
a=b+c;
他们是等价的。
(3)”\”表示本行未完
前面已经说过,浏览器读到一行末尾会自动判定本行已经结束,不过我们可以通过在行末添加一个“\”来告诉浏览器本行没有结束。
Hello\
World!
)
和
是完全一样的。
2JavaScript语句与注释
如下例所示,JavaScript中的句子还是要以分号作为结尾标志。
2.1JavaScript注释
HTML、CSS里都有注释,JavaScript里自然也有注释,而且分为单行注释与普通注释两种。
2.1.1单行注释
插入单行注释的符号是“//”
text/javascript"
//我是注释,我是注释
我是菜鸟我怕谁?
2.1.2多行注释
多行注释以"
/*"
开始,以"
*/"
结束。
/*
谁说菜鸟不会编程?
菜鸟不但会编程
还有书写注释的良好习惯
*/
3数据结构与基本运算
3.1变量基础
(1)在JavaScript中,变量名有如下规定:
∙变量名区分大小写,A与a是两个不同变量。
∙变量名必须以字母或者下划线开头。
(2)声明变量:
我们可以用var声明变量,比如:
vara;
//声明一个变量a
a=5;
//给变量赋值
其实在第一个例子中我们已经看到了,JavaScript中可以不声明变量直接赋值。
不过先声明变量是一个良好的编程习惯。
(3)给变量赋值:
来看一个上面出现过的语句:
a=6;
//让a等于6,a的值暂时等于6
(4)变量的数据类型
其实,在JavaScript中,变量是无所不能的容器,你可以吧任何东西存储在变量里,例如:
varquanNeng1=123;
//数字
varquanNeng2="
一二三"
//字符串
其中,quanNeng2这个变量存储了一个字符串,字符串需要用一对引号括起来。
变量还可以存储更多的东西,例如数组,对象,布尔值等等,我们会在后面介绍这些内容。
3.2JavaScript操作符
操作符是用于在JavaScript中指定一定动作的符号,其中算术操作符主要用来完成类似加减乘除的工作。
(1)操作符举例
看下面这段JavaScript代码。
c=a+b;
其中的"
="
和"
+"
都是操作符。
JavaScript中还有很多这样的操作符,例如,加减乘除是JavaScript中比较基本的几个操作符,它们的意义与在数学中没有什么差别。
JavaScript中最常见的操作符是赋值操作符“=”,上一节我们已经强调过,它不是等于。
(2)操作符的优先级
我们都知道,在数学中,“a+b*c”这个式子中,乘法将先于加法运算。
同样,在JavaScript中,这个式子会按相同的顺序执行。
我们称之为“优先级”,即“*”的优先级高于“+”。
与数学中一样,改变运算顺序的方法是添加括号,JavaScript中改变优先级的方法也是添加括号。
(a+b)*c
(3)字符串的连接
在JavaScript中,“+”不知代表加法,同样也可以使用它来连接两个字符串,例如:
example="
乌"
+"
龟"
;
在上面的例子中,example将包含“乌龟”这个字符串。
这是由于“+”完成了“乌”和“龟”的连接,当然了,你也可以把这种行为理解成字符串的加法。
(4)自加一,自减一操作符
这里我们来看两个非常常用的运算符,自加一“++”;
自减一“--”。
首先来看一个例子:
a=5;
a++;
//a的值变为6
a--//a的值有变回5
上面的例子中,a++使得a的值在原来的基础上增加1,a--则让a在现在的基础上在减去1。
所以,其实“a++”也可以写成
“a=a+1”;
//等同于a++
(5)复合操作符
延续上面的例子,其实“a=a+1”还可以写成:
a+=1;
//将a的值加1之后再赋给a
这样把运算和赋值结合到一起的操作符叫做复合操作符。
上面我们看到的是加法与赋值的结合,JavaScript中还有其它的符合运算符:
a+=b;
//a=a+b
a-=b;
//a=a-b
a*=b;
//a=a*b
a/=b;
//a=a/b
(8)比较操作符
“==”符号,它是一个比较操作符,它表示的意思就是“相等吗?
”。
a==b表示:
“a与b的值相等吗?
”
在JavaScript中,这样的比较操作符有很多,下面就列出这些操作符以及它们的含义。
“>
”——a大于b吗?
“<
”——a小于b吗?
=”——a大于等于b吗?
=”——a小于等于b吗?
“==”——a等于b吗?
“!
=”——a不等于b吗?
(2)逻辑操作符
数学里面的“a>
b”在JavaScript中还表示为a>
b;
数学中的“b大于a,b小于c”是“a<
b<
c”,那么在JavaScript中是不是也一样呢?
对不起,JavaScript没有那么聪明,你需要这么写:
b>
a&
&
a<
b
你可能已经猜到了,“&
”是而且的意思。
if(条件1&
条件2)
{//代码}
只有条件1、2同时满足,代码才会得到执行。
类似的操作符还有“或者(||)”和“非(!
)”
if(条件1||条件2)
“||”表示或者的意思,只要条件1或2中有一个满足,代码就会得到执行。
if(!
条件)
“!
”表示非,也就是不是的意思,只有条件不满足的时候,代码才会得到执行。
3.3特殊字符
特殊字符列表
JavaScript特殊字符代码
代码
输出
\'
单引号
\"
双引号
\&
与符号
\\
反斜线
\n
换行
\r
回车
\t
制表符
\b
后退
\f
走纸换页
3.4变量的作用域
(1)全局作用域与局部作用域
全局(global)变量的作用域是全局的,在Javascript中处处有定义;
而函数内部声明的变量是局部(local)变量,其作用域是局部性的,只在函数体内部有定义。
对于下面的输出读者应不会感到意外。
1/*代码2*/
2varscope="
global"
3functioncheckScope(){
4varscope="
local"
5document.write(scope);
6}
7checkScope();
//输出"
8document.write(scope);
全局变量作用域中使用变量可以不用var语句,但在声明局部变量是一定要使用var语句,否则会视为对全局变量的引用。
看下面代码:
9/*代码3*/
10varscope="
11functioncheckScope(){
12scope="
13document.write(scope);
14}
15checkScope();
16document.write(scope);
(2)Javascript没有块级作用域,函数中声明的变量在整个函数中都是有定义的。
对于下面的代码对于生疏的读者可能颇感意外:
17/*代码4*/
18varscope="
19functioncheckScope(){
20document.write(scope);
//语句4.1
21varscope="
//语句4.2
22document.write(scope);
23}
24checkScope();
undefinedlocal"
由于语句4.1(varscope="
)声明的变量在整个checkScope函数作用域内都有效,因此在语句4.2(document.write(scope);
)执行的时scope引用的是局部变量,而此时局部变量scope尚未定义,所以输出”undefined”。
因此一个好的编程习惯是将所有的变量声明集中起来放在函数的开头。
(3)对象的属性变量
25/*代码5*/
26varscope="
global"
27varobj=newObject();
28obj.scope="
object"
29obj.checkScope=function(){
30varscope="
loacl"
31document.write(scope);
loacl"
32document.write(this.scope);
object"
33document.write(window.scope);
34}
35obj.checkScope();
loaclobjectglobal"
4JavaScript流程控制语句
4.1分支选择
(1)ifelse语句(如果,否则)
ifelse是所有编程语言里都有的功能,它使得程序具有简单的判断能力。
Varhobby=“VbScript”;
if(hobby==“JavaScript”)
{
有发展"
}
(2)ifelse嵌套
如果想做更多的判断,可以用if的嵌套,看下面的代码。
varhobby="
JavaScript"
if(hobby=="
)
elseif(hobby=="
football"
)//如果爱好是足球。
//注意:
这个if是嵌套在上一个ifelse中的else中的
我X"
else//既不是JavaScript又不是足球
没有评价……"
第二个if只有在第一个if的条件不成立的时候才有机会执行。
(3)Switch语句
//首先,我们用score变量来存储分数,假设为65
varscore=65;
//用分数除以10,parseInt的作用是把它转换为整数,
//暂时不用深究,()内最后的结果为6
switch(parseInt(score/10)){
//switch开始实现判断过程,case6得到满足
case0:
case1:
case2:
case3:
case4:
case5:
//根据不同的等级做出不同的行为。
//冒号后面的语句就是行为
//case0到5的行为都是下面这个语句
degree="
恭喜你,又挂了!
break;
case6:
勉强及格"
case7:
凑合,凑合"
case8:
不错,不错"
case9:
case10:
高手高手,佩服佩服"
}//endofswitch
记得在每个case所执行的语句里添加上一个break语句。
为了理解break的作用,我们来看看如果没有break会怎么样:
8错,8错"
4.2循环
所谓循环,就是重复执行一段代码。
前面我们已经看到了,ifelse和switch是JavaScript具有了判断的能力,但是电脑的判断能力和人比起来差远了。
电脑更擅长一件事情——不停地重复。
我们在JavaScript中把这叫做循环。
(1)for语句结构如下:
for(初始条件;
判断条件;
循环后动作)
循环代码
让我们来看一个简单的例子吧:
有十个菜鸟报数,“菜鸟1号、菜鸟2号”。
有了for循环,很少的代码就可以实现十个菜鸟的报数。
vari=1;
for(i=1;
i<
=10;
i++)
菜鸟"
+i+"
号<
br/>
结果如下:
菜鸟1号
菜鸟2号
菜鸟3号
菜鸟4号
菜鸟5号
菜鸟6号
菜鸟7号
菜鸟8号
菜鸟9号
菜鸟10号
在上面那个例子中,循环恰好执行了10次,那么和“for(i=1;
i++)”一句中的10是不是10次的意思呢?
下面我们就来看看for循环的工作机制。
首先"
i=1"
叫做初始条件,也就是说从哪里开始,特别的,我们的例子从i=1开始。
出现在第一个分号后面的"
=10"
表示判断条件,每次循环都会先判断这个条件是否满足,如果满足则继续循环,否则停止循环,继续执行for循环后面的代码。
你可能想问了,我们设定了i=0,岂不是永远都小于等于10吗?
来看第三个部分。
最后的"
i++"
表示让i在自身的基础上加1,这时每次循环后的动作.也就是说,每次循环结束,i都会比原来大1,执行若干次循环之后,i<
=10的条件就不满足了,这时循环结束。
for循环后面的代码将得到执行。
(2)While循环
while循环重复执行一段代码,直到某个条件不再满足。
(a)while循环的结构:
while(判断条件)
}
其实while循环和for循环的作用都是重复执行代码,例如下面这段代码,和上一节for循环的输出结果完全没有区别。
先来读读例子的代码,下面会解释为什么这个循环会和上一节的for循环等价。
vari=0;
while(i<
=10)
号"
i=i+1;
看起来好像比for循环少了点东西啊,只有一个判断条件啊。
其实这个循环也是有初始条件的,只不过在之前就已经定义好了,例如上面例子中的"
,至于变量i的增大,则是放到了循环体里面,其实这个过程和for没有什么区别,也是变量i不
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScriptJQuery 学习