js入门.docx
- 文档编号:9475150
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:35
- 大小:30.27KB
js入门.docx
《js入门.docx》由会员分享,可在线阅读,更多相关《js入门.docx(35页珍藏版)》请在冰豆网上搜索。
js入门
菜鸟的Javascript笔记
变量常量基本运算表达式流程控制语句
Javascript是网络上应用最广泛的脚本语言,而且是AJAX等技术的绝对基础。
什么是Javascript?
入门javascript有什么用处?
简单的说。
首先,入门级别的Javascript可以让你的网页动起来,可以做网页特效。
其二,Javascript可以辅助后台做一些信息的检验。
比如信箱格式是否合法等等。
值得一提的是javascript还是AJAX的关键部分。
如果心急的话,可以马上看看JavaScript可以干什么。
复杂点说:
Javascript是由Netscape公司创造的一种脚本语言。
它曾经几次改名,最终才定为javascript。
作为一门独立的编程语言,javascript自然可以做很多的事情,不过它最主流的应用还是在Web上——创建动态网页(许多人喜欢叫网页特效)。
Javascript目前在网络上应用十分广泛,几乎所有的动态网页里都能找到它的身影。
目前流行的AJAX从很大程度上也是依赖于Javascript而存在的。
学习javascript的基础
在学习javascript之前您应该已经掌握了HTML/XHTML,最好也掌握了CSS。
只要稍稍懂一点就好。
JavaScript笔记第0节
学习JavaScript?
我们先来看看JavaScript都可以做什么吧。
JavaScript可以完成许多工作,例如表单验证、增加网站的交互功能,提高用户体验等等。
不过这些文字介绍都不够直观,我们来看两个例子吧。
切换CSS(样式表)
(本功能已经删除)注意本页的左下角。
通过点击“站点风格”标题下面的链接,就可以切换网站的样式。
这就是用JavaScript完成的(配合了HTMLDOM)。
改变本页文字大小。
注意到本页上面的那几个按钮了吗?
点击它们就可以改变这个内容区域的字体大小哦。
这个小功能也是用JavaScript完成的哦。
当然了,JavaScript还可以做好多好多的事情,上面只是两个比较简单的例子。
还等什么?
现在就开始学习JavaScript吧。
将JavaScript插入网页的方法
插入JavaScript
与在网页中插入CSS的方式相似。
使用下面的代码可以在网页中插入JavaScript:
...
其中的...就是代码的内容。
JavaScript的插入位置不同,效果也会有所不同,还可以像CSS一样,将JavaScript保存成一个外部文件,这些内容会在下一节讨论。
用JavaScript在网页中输出内容
JavaScript使用document.write来输出内容。
例如
document.write("我是菜鸟我怕谁!
");
将会输出在网页上输出:
我是菜鸟我怕谁!
学过编程的人应该知道,“我是菜鸟我怕谁!
”两侧双引号代表字符串的意思。
不过不理解这个概念也无所谓,学到后面就知道什么时候应该加双引号,什么时候不需要加了。
对不支持JavaScript的浏览器隐藏代码
有些浏览器可能不支持JavaScript,我们可以使用如下的方法对它们隐藏JavaScript代码。
--
document.write("我是菜鸟我怕谁!
");
//-->
---->里的内容对于不支持JavaScript的浏览器来说就等同于一段注释,而对于支持JavaScript的浏览器,这段代码仍然会执行。
至于“//”符号则是JavaScript里的注释符号,在这里添加它是为了防止JavaScript试图执行-->。
不过通常情况下,现在的浏览器几乎都支持JavaScript,即使是不支持的,也会了解如何合理地处理含有JavaScript的网页。
插入JavaScript的位置
Body里的JavaScript
放在body部分的JavaScript脚本在网页读取到该语句的时候就会执行,例如:
--
document.write("我是菜鸟我怕谁!
");
//-->
Head里的JavaScript
在head部分的脚本在被调用的时候才会执行,例如:
....
添加外部JavaScript脚本
也可以像添加外部CSS一样添加外部JavaScript脚本文件,其后缀通常为.js。
例如:
如果很多网页都需要包含一段相同的代码,那么将这些代码写入一个外部JavaScript文件是最好的方法。
此后,任何一个需要该功能的网页,只需要引入这个js文件就可以了。
注意:
脚本文件里头不能再含有
例子中的document.write("我是菜鸟我怕谁!
");
就是一个JavaScript语句,它可以告诉浏览器做出一个特定任务。
特别的,这个语句是叫浏览器书写出一段内容。
我们已经知道,document.write的功能是输出文本,所以上面那个语句就是让浏览器输出“我是菜鸟我怕谁!
”。
在JavaScript中,一行的结束就被认定为语句的结束。
但是最好还是要在结尾加上一个分号“;”来表示语句的结束。
这是一个编程的好习惯,事实上在很多语言中句末的分号都是必须的。
JavaScript代码块(Blocks)
看看下面这个代码块
{
document.write("
Thisisaheader
");document.write("
Thisisaparagraph
");document.write("
Thisisanotherparagraph
");}
不就是几个两需的语句放在一起吗?
好像没什么特别啊?
没错,其实所谓的代码块,就是用大括号括起来的几个语句。
现在看来好像还没什么用……不过学到后面就有用啦。
JavaScript注释
单行注释
插入单行注释的符号是“//”
//我是注释,我是注释
document.write("我是菜鸟我怕谁?
");
多行注释
多行注释以"/*"开始,以"*/"结束。
/*
谁说菜鸟不会编程?
菜鸟不但会编程
还有书写注释的良好习惯
*/
document.write("我是菜鸟我怕谁?
");
相信你已经了解注释的作用了。
HTML的注释不会被浏览器作为HTML解释,CSS注释也不会被浏览器解释。
同理,JavaScript的注释也不会被执行。
注释的作用就是记录自己在编程时候的思路,以便以后自己阅读代码时可以马上找到思路。
同样,注释也有助于别人阅读自己书写的JavaScript代码。
总之书写注释是一个良好的编程习惯。
JavaScript变量
代数
在代数中,我们会遇到下面的基础问题,如果a的值为5,b的值为6,那么a与b的和是多少?
在这个问题中,我们就可以吧a和b看做变量,再设置一个变量c来保存a与b的和。
那么,上面的这个问题就可以用如下的JavaScript代码表示:
//计算a+b的和
a=5;//给变量a赋值
b=5;//给变量b赋值
c=a+b;//c为a+b的和
document.write(c);//输出c的值
执行结果:
10
术语:
变量名
在上面的例子中,我们用到了三个变量:
a,b,c。
这些都是变量的名字,在JavaScript中,我们需要用变量名来访问这个变量。
在JavaScript中,变量名有如下规定:
∙变量名区分大小写,A与a是两个不同变量。
∙变量名必须以字母或者下划线开头。
术语:
赋值
来看一个上面出现过的语句:
a=5;
这个语句怎么读出来呢?
“a等于5”?
对不起,不对。
应该是“让a等于5”,说得专业一点,这叫“给a赋值”。
我们之前已经提到过,a是变量,是可以变的,所以从某种角度来说,它不等于任何值,只是暂时的等于某个值。
来看下面这个例子,进一步熟悉一下赋值与等于的关系:
a=5;//让a等于5,a的值暂时等于5
a=6;//让a等于6,a的值暂时等于6
再次强调,如果JavaScript是你学习的第一门编程语言,一定要注意区分“等于”和“赋值”这两个不同的概念。
声明变量
vara;//声明一个变量a
a=5;//给变量赋值
其实在第一个例子中我们已经看到了,JavaScript中可以不声明变量直接赋值。
不过先声明变量是一个良好的编程习惯。
变量的数据类型
a=5,b=6,c=a+_b,天啊!
我可不是来学数学的。
别着急,往下看。
其实,在JavaScript中,变量是无所不能的容器,你可以吧任何东西存储在变量里,例如:
varquanNeng1=123;//数字
varquanNeng2="一二三"//字符串
其中,quanNeng2这个变量存储了一个字符串,字符串需要用一对引号括起来。
变量还可以存储更多的东西,例如数组,对象,布尔值等等,我们会在后面介绍这些内容。
JavaScript操作符
(一)——运算操作符
操作符举例
看下面这段JavaScript代码。
c=a+b;
其中的"="和"+"都是操作符。
JavaScript中还有很多这样的操作符,例如,加减乘除是JavaScript中比较基本的几个操作符,它们的意义与在数学中没有什么差别。
JavaScript中最常见的操作符是赋值操作符“=”,上一节我们已经强调过,它不是等于。
操作符的优先级
我们都知道,在数学中,“a+b*c”这个式子中,惩罚将先于加法运算。
同样,在JavaScript中,这个式子会按相同的顺序执行。
我们称之为“优先级”,即“*”的优先级高于“+”。
与数学中一样,改变运算顺序的方法是添加括号,JavaScript中改变优先级的方法也是添加括号。
例如:
(a+b)*c
字符串的连接
在JavaScript中,“+”不知代表加法,同样也可以使用它来谅解两个字符串,例如:
example="乌"+ "龟";
在上面的例子中,example将包含“乌龟”这个字符串。
这是由于“+”完成了“乌”和“龟”的连接,当然了,你也可以把这种行为理解成字符串的加法。
自加一,自减一操作符
这里我们来看两个非常常用的运算符,自加一“++”;自减一“--”。
首先来看一个例子:
a=5;
a++;//a的值变为6
a--//a的值有变回5
上面的例子中,a++使得a的值在原来的基础上增加1,a--则让a在现在的基础上在减去1。
所以,其实“a++”也可以写成
“a=a+1”;//等同于a++
复合操作符
延续上面的例子,其实“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
JavaScript操作符
(二)——比较操作符和逻辑操作符
比较操作符
上一节的if语句中,我们用到了“==”符号。
它就是一个比较操作符,它表示的意思就是“相等吗?
”。
例如:
a==b表示:
“a与b的值相等吗?
”
在JavaScript中,这样的比较操作符有很多,下面就列出这些操作符以及它们的含义。
∙“>”——a大于b吗?
∙“<”——a小于b吗?
∙“>=”——a大于等于b吗?
∙“<=”——a小于等于b吗?
∙“==”——a等于b吗?
∙“!
=”——a不等于b吗?
逻辑操作符
数学里面的“a>b”在JavaScript中还表示为a>b;数学中的“b大于a,b小于c”是“a
对不起,JavaScript没有那么聪明,你需要这么写:
b>a&&a<b
你可能已经猜到了,“&&”是而且的意思。
if(条件1&&条件2)
{//代码}
只有条件1、2同时满足,代码才会得到执行。
类似的操作符还有“或者(||)”和“非(!
)”
if(条件1||条件2)
{//代码}
“||”表示或者的意思,只要条件1或2中有一个满足,代码就会得到执行。
if(!
条件)
{//代码}
“!
”表示非,也就是不是的意思,只有条件不满足的时候,代码才会得到执行。
JavaScriptifelse语句(如果,否则)
在介绍if之前,让我们先来了解一下布尔值这个概念。
布尔(Bool)值
在变量一节中,我们曾经说过,变量可以用来存储布尔值。
哪么布尔值的作用究竟是什么呢?
简单的说,布尔值的作用就是用来表示“真的假的”。
所以布尔值其实只有两种取值:
真(true)和假(false)。
一个简单的if实例
其实“ifelse”的意思和字面意思是一样的,就是“如果”、“否则”。
还是让我们来看一个使用if的例子吧。
假设你在为一个机器人编写程序,这个机器人的功能是对使用者的爱好做出评价。
机器人:
“你的爱好是什么?
”
如果是JavaScript
机器人:
“哇,有发展。
”
那么对应的JavaScript就应该是
if(hobby==“JavaScript”)
{
document.write("有发展");
}
我们来解释一下这段代码。
首先是一个“if”,它后面紧跟着一个括号,括号里则是一个条件,确切地说是一个布尔值。
当条件成立的时候,这个值是true,“{}”里的语句将会得到执行;否则这个值是flase,“{}”里的语句将被忽略。
具体到我们的例子,如果hobby变量的值是“JavaScript”,则回答“有发展”,够则保持沉默。
注意“==”这个符号,这个符号用来判断左右两边是否相等。
下一节会详细地介绍。
如果你的爱好不是JavaScript,那么机器人什么也不会做。
如果你希望它能对这种情况做出反应,我们可以请else来帮忙,看下面的代码:
varhobby="JavaScript"
if(hobby=="JavaScript")
{
document.write("有发展");
}
else//如果爱好不是JavaScript
{
document.write("没有评价……");
}
上面的代码用到了“else”,它会给if添加一种“否则”的状态。
当hobby不是“JavaScript”的时候,它会表明“没有评价”。
if(你向让机器人更聪明一点)
{用if的嵌套吧,看下面的代码;}
varhobby="JavaScript"
if(hobby=="JavaScript")
{
document.write("有发展");
}
elseif(hobby=="football")//如果爱好是足球。
//注意:
这个if是嵌套在上一个ifelse中的else中的
{
document.write("我X");
}
else//既不是JavaScript又不是足球
{
document.write("没有评价……");
}
第二个if只有在第一个if的条件不成立的时候才有机会执行。
最后再来看一个使用了if的实例吧。
JavaScriptSwitch语句
上一节我们已经看到,利用ifelse可以让程序具有基本的判断能力,而使用嵌套的ifelse则可以让程序对多种情况进行判断。
但是当情况的种类比较多的时候,使用switch语句将更加合适。
一个使用switch的实例
结舌我们需要实现如下的程序:
输入一个学生的考试成绩,我们按照每十分一个登记将成绩分等,程序将根据成绩的等级做出不同的评价。
很明显,用ifelse可以实现这样的程序,但是代码会很复杂。
而如果使用wwitch语句,代码则会简单一些,首先来看一下思路,再把它翻译成JavaScript。
思路:
1.将分数转化为特定等级以便于switch处理
2.判断分数属于哪种等级
3.根据分数等级做出评价:
例如低于60给出挂科评价。
翻译成JavaScript就是如下代码(注意注释):
//首先,我们用score变量来存储分数,假设为65
varscore=65;
//用分数除以10,parseInt的作用是把它转换为整数,
//暂时不用深究,()内最后的结果为6
switch(parseInt(score/10)){
//switch开始实现判断过程,case6得到满足
case0:
case1:
case2:
case3:
case4:
case5:
//根据不同的等级做出不同的行为。
//冒号后面的语句就是行为
//case0到5的行为都是下面这个语句
degree="恭喜你,又挂了!
";
break;
case6:
degree="勉强及格";
break;
case7:
degree="凑合,凑合"
break;
case8:
degree="8错,8错";
break;
case9:
case10:
degree="高手高手,佩服佩服";
}//endofswitch
记得在每个case所执行的语句里添加上一个break语句。
为了理解break的作用,我们来看看如果没有break会怎么样:
switch(parseInt(score/10)){
case0:
case1:
case2:
case3:
case4:
case5:
degree="恭喜你,又挂了!
";
case6:
degree="勉强及格";
case7:
degree="凑合,凑合"
case8:
degree="8错,8错";
case9:
case10:
degree="高手高手,佩服佩服";
}//endofswitch
在上面的代码中,如果成绩是50分,那么score/10就是5,则case5后面的语句将会得到执行,同样,case6、7等等后面的语句都会得到执行。
也就是说,我们会得到:
”恭喜你,又挂了!
勉强及格凑合,凑合8错,8错高手高手,佩服佩服“这样没有意义的评价。
这就是swtitch语句的执行逻辑,当发现某个case满足后,该switch中在该case后的所有语句都会得到执行。
第一个例子中的break就是为了让switch”停下来“。
看一个使用switch的实例
JavaScript弹出框
JavaScript中有三种弹出框:
警告(alert)、确认(confirm)以及提问(prompt)。
警告(alert)
在访问网站的时候,你遇到过这样的情况吗?
“咚”的一声,一个小窗口出现在你面前,上面写着一段警示性的文字,或是其它的提示信息。
如果你不点击确定,你就不能对网页做任何的操作。
没错,这个“咚”的小窗口就是alert干的。
下面的代码是一段使用alert的实例。
alert("我是菜鸟我怕谁");
我的个人观点是尽量少使用alert,它很不友好。
甚至可能让一些方可认为你的网站很危险。
看一个使用alert的实例
确认(confirm)
确认框用于让用户选择某一个问题是否符合实际情况。
“说!
是还是不是?
快回答!
”
如果你想表达这样的意思,那么confirm再合适不过了。
来看下面的代码:
我们用confirm("你是菜鸟吗?
")向访客提问,变量r则保存了访客的回应,它只可能有两种取值:
true或false。
没错,它是一个布尔值。
confirm后面的语句则是我们对访客回答做出的不同回应。
varr=confirm("你是菜鸟吗");
if(r==true)
{
document.write("彼此彼此");
}
else
{
document.write("佩服佩服");
}
看一个使用confirm的实例
提问(prompt)
prompt和confirm类似,不过它允许访客随意输入回答。
我们来修改一下之前switch的例子,我们根据分数来做出不同的评价,不过那段程序并不完整,它根本就没问我们分数,而是假设我得了65分。
这太不公平了。
现在我么就可以用prompt来向访客提问,用score存储用户输入的回答,其余的事情就都由后面的switch来完成了。
functionjudge(){
varscore;//分数
vardegree;//分数等级
score=prompt("你的分数是多少?
")
if(score>100
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- js 入门