首页 > 搜索 > js入门教程

js入门教程,js入门

互联网 2020-10-21 04:37:30

将JavaScript插入网页的方法

使用标签在网页中插入Javascript代码。

插入JavaScript

与在网页中插入CSS的方式相似。使用下面的代码可以在网页中插入JavaScript:

    ...

其中的...就是代码的内容。JavaScript的插入位置不同,效果也会有所不同,还可以像CSS一样,将JavaScript保存成一个外部文件,这些内容会在下一节讨论。

用JavaScript在网页中输出内容

JavaScript使用document.write来输出内容。例如

  document.write("我是菜鸟我怕谁!");

将会输出在网页上输出:

我是菜鸟我怕谁!

学过编程的人应该知道,“我是菜鸟我怕谁!”两侧双引号代表字符串的意思。不过不理解这个概念也无所谓,学到后面就知道什么时候应该加双引号,什么时候不需要加了。

对不支持JavaScript的浏览器隐藏代码

有些浏览器可能不支持JavaScript,我们可以使用如下的方法对它们隐藏JavaScript代码。

 

 

 

 

 

里的内容对于不支持JavaScript的浏览器来说就等同于一段注释,而对于支持JavaScript的浏览器,这段代码仍然会执行。至于“//”符号则是JavaScript里的注释符号,在这里添加它是为了防止JavaScript试图执行-->。不过通常情况下,现在的浏览器几乎都支持JavaScript,即使是不支持的,也会了解如何合理地处理含有JavaScript的网页。

 

 

插入JavaScript的位置

JavaScript脚本可以放在网页的head里或者body部分,而且效果也不相同。

Body里的JavaScript

放在body部分的JavaScript脚本在网页读取到该语句的时候就会执行,例如:

Head里的JavaScript

在head部分的脚本在被调用的时候才会执行,例如:

....

添加外部JavaScript脚本

也可以像添加外部CSS一样添加外部JavaScript脚本文件,其后缀通常为.js。例如:

如果很多网页都需要包含一段相同的代码,那么将这些代码写入一个外部JavaScript文件是最好的方法。此后,任何一个需要该功能的网页,只需要引入这个js文件就可以了。

注意:脚本文件里头不能再含有标签。

注:放在body里的函数是一个例外,它并不会被执行,而是等被调用时才会执行。关于函数与调用的概念将在后面讲到。

 

JavaScript语句

本节介绍Javasctipt中的语句,语句是编程的一个基本概念

JavaScript语句

来看看我们之前例子。

例子中的 document.write("我是菜鸟我怕谁!");

就是一个JavaScript语句,它可以告诉浏览器做出一个特定任务。特别的,这个语句是叫浏览器书写出一段内容。我们已经知道,document.write的功能是输出文本,所以上面那个语句就是让浏览器输出“我是菜鸟我怕谁!”。

在JavaScript中,一行的结束就被认定为语句的结束。但是最好还是要在结尾加上一个分号“;”来表示语句的结束。这是一个编程的好习惯,事实上在很多语言中句末的分号都是必须的。

JavaScript代码块(Blocks)

看看下面这个代码块

{

document.write("Thisis a header");

document.write("

Thisis a paragraph

");

document.write("

Thisis another paragraph

");

}

不就是几个两需的语句放在一起吗?好像没什么特别啊?

没错,其实所谓的代码块,就是用大括号括起来的几个语句。现在看来好像还没什么用……不过学到后面就有用啦。

 

 

 

JavaScript注释

HTML、CSS里都有注释,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是你学习的第一门编程语言,一定要注意区分“等于”和“赋值”这两个不同的概念。

声明变量

var a ; //声明一个变量a

a = 5 ; //给变量赋值

其实在第一个例子中我们已经看到了,JavaScript中可以不声明变量直接赋值。不过先声明变量是一个良好的编程习惯。

变量的数据类型

a = 5, b = 6, c = a +_b,天啊!我可不是来学数学的。别着急,往下看。

其实,在JavaScript中,变量是无所不能的容器,你可以吧任何东西存储在变量里,例如:

var quanNeng1 = 123;//数字

 

var quanNeng2 = "一二三"//字符串

其中,quanNeng2这个变量存储了一个字符串,字符串需要用一对引号括起来。变量还可以存储更多的东西,例如数组,对象,布尔值等等,我们会在后面介绍这些内容。

 

 

JavaScript操作符(一)——运算操作符

操作符是用于在JavaScript中指定一定动作的符号,其中算术操作符主要用来完成类似加减乘除的工作。

操作符举例

看下面这段JavaScript代码。

c = a + b;

其中的"="和"+"都是操作符。

JavaScript中还有很多这样的操作符,例如,加减乘除是JavaScript中比较基本的几个操作符,它们的意义与在数学中没有什么差别。

JavaScript中最常见的操作符是赋值操作符“=”,上一节我们已经强调过,它不是等于。

操作符的优先级

我们都知道,在数学中,“a + b * c”这个式子中,惩罚将先于加法运算。同样,在JavaScript中,这个式子会按相同的顺序执行。我们称之为“优先级”,即“*”的优先级高于“+”。

与数学中一样,改变运算顺序的方法是添加括号,JavaScript中改变优先级的方法也是添加括号。例如:

(a +b) * c

字符串的连接

在JavaScript中,“+”不知代表加法,同样也可以使用它来连接两个字符串,例如:

example = "乌" +"龟";

在上面的例子中,example将包含“乌龟”这个字符串。这是由于“+”完成了“乌”和“龟”的连接,当然了,你也可以把这种行为理解成字符串的加法。

自加一,自减一操作符

这里我们来看两个非常常用的运算符,自加一“++”;自减一“--”。首先来看一个例子:

a = 5;a++;//a的值变为6a--//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操作符(二)——比较操作符和逻辑操作符

操作符是用于在JavaScript中指定一定动作的符号,其中逻辑操作符

比较操作符

上一节的if语句中,我们用到了“==”符号。它就是一个比较操作符,它表示的意思就是“相等吗?”。

例如:a==b表示:“a与b的值相等吗?”

在JavaScript中,这样的比较操作符有很多,下面就列出这些操作符以及它们的含义。

·        “>” —— a大于b吗?

·        “=” —— a大于等于b吗?

·        “b”在JavaScript中还表示为a>b;数学中的“b大于a,b小于c”是“a 100){

 degree = '耍我?100分满!';

 }

 else{

 switch (parseInt(score / 10)) {

 case 0:

 case 1:

 case 2:

 case 3:

 case 4:

 case 5:

 degree = "恭喜你,又挂了!";

 break;

 case 6:

 degree = "勉强及格";

 case 7:

 degree = "凑合,凑合"

 break;

 case 8:

 degree = "8错,8错";

 break;

 case 9:

 case 10:

 degree = "高手高手,佩服佩服";

 }//end of switch

 }//end of else

 alert(degree);

 }

 

HTML代码

    

 成绩

 

 

 

 点击提交

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

JavaScript弹出框

JavaScript中有三种弹出框:警告(alert)、确认(confirm)以及提问(prompt)。

警告(alert)

在访问网站的时候,你遇到过这样的情况吗?“咚”的一声,一个小窗口出现在你面前,上面写着一段警示性的文字,或是其它的提示信息。如果你不点击确定,你就不能对网页做任何的操作。没错,这个“咚”的小窗口就是alert干的。

下面的代码是一段使用alert的实例。

    alert("我是菜鸟我怕谁");

我的个人观点是尽量少使用alert,它很不友好。甚至可能让一些方可认为你的网站很危险。

看一个使用alert的实例

确认(confirm)

确认框用于让用户选择某一个问题是否符合实际情况。

“说!是还是不是?快回答!”

如果你想表达这样的意思,那么confirm再合适不过了。来看下面的代码:我们用confirm("你是菜鸟吗?")向访客提问,变量r则保存了访客的回应,它只可能有两种取值:true或false。没错,它是一个布尔值。confirm后面的语句则是我们对访客回答做出的不同回应。

    var r=confirm("你是菜鸟吗");

    if (r==true)

    {

    document.write("彼此彼此");

    }

    else

    {

    document.write("佩服佩服");

    }

 

看一个使用confirm的实例

提问(prompt)

prompt和confirm类似,不过它允许访客随意输入回答。我们来修改一下之前switch的例子,我们根据分数来做出不同的评价,不过那段程序并不完整,它根本就没问我们分数,而是假设我得了65分。这太不公平了。现在我么就可以用prompt来向访客提问,用score存储用户输入的回答,其余的事情就都由后面的switch来完成了。

 function judge() {

 var score;//分数

 var degree;//分数等级

 score = prompt("你的分数是多少?")

 if(score > 100){

 degree = '耍我?100分满!';

 }

 else{

 switch (parseInt(score / 10)) {

 case 0:

 case 1:

 case 2:

 case 3:

 case 4:

 case 5:

 degree = "恭喜你,又挂了!";

 break;

 case 6:

 degree = "勉强及格";

 break;

 case 7:

 degree = "凑合,凑合"

 break;

 case 8:

 degree = "8错,8错";

 break;

 case 9:

 case 10:

 degree = "高手高手,佩服佩服";

 }//end of switch

 }//end of else

 alert(degree);

 }

 

看一个使用prompt的实例

 

 

 

JavaScript弹出框 alert例子

alert用于在网页中弹出警告。通常情况下尽量不要使用。

窗体顶端

调用alert

 

窗体底端

JavaScript代码

 

 function message(){

 alert("我是菜鸟我怕谁!!!");

 }

 

HTML代码

 

 

 调用alert

 

 

 

 

 

 

JavaScript弹出框confirm例子

确认框用于让用户选择某一个问题是否符合实际情况。

窗体顶端

调用confirm

 

窗体底端

JavaScript代码

 function isCainiao() {

 var r=confirm("你是菜鸟吗");

 if(r==true)

 {

 alert("彼此彼此");

 }

 else

 {

 alert("佩服佩服");

 }

 }

 

HTML代码

 

 

 调用confirm

 

 

 

 

 

 

 

JavaScript弹出框prompt例子

prompt用来让用户输入一个答案。

窗体顶端

点击弹出prompt

窗体底端

JavaScript代码

 function judge() {

 var score;//分数

 var degree;//分数等级

 score = prompt("你的分数是多少?")

 if(score > 100){

 degree = '耍我?100分满!';

 }

 else{

 switch (parseInt(score / 10)) {

 case 0:

 case 1:

 case 2:

 case 3:

 case 4:

 case 5:

 degree = "恭喜你,又挂了!";

 break;

 case 6:

 degree = "勉强及格";

 break;

 case 7:

 degree = "凑合,凑合"

 break;

 case 8:

 degree = "8错,8错";

 break;

 case 9:

 case 10:

 degree = "高手高手,佩服佩服";

 }//end of switch

 }//end of else

 alert(degree);

 }

 

HTML代码

 

 点击提交

 

  

 

  

 

 

JavaScript函数

通常情况下,函数是完成特定功能的一段代码。把一段完成特定功能的代码块放到一个函数里,以后就可以调用这个函数啦,这样就省去了重复输入大量代码的麻烦。

还记得我们上一节所使用的alert吗?其实它就是一个函数,我们就以它为例来看看函数的作用吧。如果没有alert这个函数,制作一个警告框可能需要如下工作:

1        在屏幕上显示一个小窗口

2        发出“咚”的提示音

3        ……

4        将警告文字显示在窗口中

5        给出一个确定按钮

6        ……

然后有了alert这个函数之后,你只需要写下面一行代码:

alert("警告文字");

正如上面所说的,一个函数的作用就是完成一项特定的任务。如果没有函数时,完成一项任务可能需要五行、十行、甚至更多的代码。每次需要完成这个任务的时候都重写一遍代码显然不是一个好主意。这是我们就可以编写一个函数来完成这个任务,以后只要调用这个函数就可以了。

简单的函数定义

定义一个函数

说了这么多,那么究竟如何定义一个函数呢?看看下面的格式:

function函数名(){

函数代码;

 

}

把“函数名”替换为你想要的名字,把“代码”替换为完成特定功能的代码,函数就定义好了。了解了如何定义函数,我们就来自己编写一个实现两数相加的简单函数吧。

首先给函数起一个有意义的名字:“addTwoNum”?,好像太长了,还是叫add2吧。它的代码如下:

function add2(){

 sum = 1 + 1;

 alert(sum);

 

}

函数的调用

函数定义好了,如何调用呢?

其实可以通过很多种方法调用上面的函数,我们这里使用最简单的函数调用方式——按钮的点击事件,JavaScript事件会在后面介绍。试着点击下面的按钮调用定义好的函数:

窗体顶端

点击提交

 

窗体底端

“等等,你这是骗人啊,根本不是两书相加的函数啊,这个函数只能做1+1啊!”

带参数的函数

好吧,我承认我撒谎了,那个函数不能实现两数相加。其实,函数的定义应该是下面的格式:

function(参数1,参数2,参数3){

部分函数代码……

……

}

按照这个格式,我们的函数应该写成:

function add2(x,y){

 sum = x + y;

 alert(sum);

}

x和y则是我们函数的两个参数,调用函数的时候,我们就可以通过这两个参数把两个加数传递给函数了。例如,add2(3,4)会求3+4的和,add2(56,65)则会求出56和65的和。

“再等等!这函数没有用啊,你吧结果alert出来,我想对结果做些处理怎么办啊?”

带返回值的函数

好吧,我们把alert(sum)一行改成下面的代码:

return sum;

return后面的值叫做返回值。使用下面的语句调用函数就可以将这个返回值存储在变量中了。

result = add2(3,4);

该语句执行后,result变量中的值为7(3+4)。值得说明的是,我们的函数中,参数和返回值都是数字,其实它们也可以是字符串等其它类型。

 

 

 

 

JavaScript For循环

所谓循环,就是重复执行一段代码。

前面我们已经看到了,if else和switch是JavaScript具有了判断的能力,但是老实说,电脑的判断能力和人比起来差远了。电脑更擅长一件事情——不停地重复。我们在JavaScript中把这叫做循环(loop)。

for循环的简单例子——菜鸟报数

在了解for循环的语法之前,还是让我们来看一个简单的例子吧:有十个菜鸟报数,“菜鸟1号、菜鸟2号”。有了for循环,很少的代码就可以实现十个菜鸟的报数。

var i=1;

for (i=1;ionclick调用函数

实际效果如下,由于设置了οnclick="displaymessage()",因此点击按钮则会调用函数。

窗体顶端

onclick调用函数

 

窗体底端

下面再来看看鼠标移出和经过的事件。

                              

鼠标经过、移出事件

鼠标经过事件,试着把鼠标移动到这个div里面,将会调用函数。

窗体顶端

鼠标滑过调用函数

 

窗体底端

使用鼠标经过事件调用函数的代码如下:

鼠标滑过调用函数

鼠标移出事件,试着把鼠标移动到这个div里面,再移动出去,将会调用函数。

窗体顶端

鼠标移出调用函数

 

窗体底端

使用鼠标移出事件调用函数的代码如下:

 鼠标移出调用函数

更多事件

JavaScript中还有很多事件,完整的列表可以看看本节笔记的参考。

 

 

 

 

JavaScript调试

try、catch

try、catch用来调试一段可能出错的代码:

try {

   //要调试的代码

}

catch(e){

   //如果出现错误将会执行这个代码块

}

finally{

   //无论是否出错都会执行的代码

}

 

 

 

 

JavaScript特殊字符

JavaScript中有一些特殊的字符,如果想要在字符串中使用,需要加上一个反斜线。

遇到问题的字符串

我们在之前已经看过好多应用字符串的例子,例如

 document.write("我是菜鸟我怕谁!");

输出将是:我是菜鸟我怕谁!

现在如果我们想要输出:小明说:"我是菜鸟我怕谁?"。

该怎么办呢?双引号被当作javascript标记字符串开始和结束的符号,我们怎么能在字符串里引入双引号呢?看看下面这个例子。

 document.write("小明说:\"我是菜鸟我怕谁?\"。");

我们在双引号前面加上一个反斜线就可以了。在JavaScript中有很多这样具有功能的特殊字符,如果需要把它们插入字符串都需要在前面加上一个反斜线"\"。

特殊字符列表

JavaScript特殊字符代码代码

输出

\'

单引号

\"

双引号

\&

与符号

\\

反斜线

\n

换行

\r

回车

\t

制表符

\b

后退

\f

form  feed(小菜鸟:没弄明白)

 

 

 

 

 

JavaScript指导准则

在书写JavaScript的过程中,应该记住它是区分大小写的,可以有多余空白的,使用"\"表示本行未完。

JavaScript区分大小写(大小写敏感)

变量名和函数名都区分大小写。

空格

多余的空格是被忽略的。例如下面两个语句

a=b+c;

a = b + c ;

他们是等价的。

表示本行未完”\”

前面已经说过,浏览器读到一行末尾会自动判定本行已经结束,不过我们可以通过在行末添加一个“\”来告诉浏览器本行没有结束。

document.write("Hello \  World!")

document.write("我是菜鸟我怕谁!")

是完全一样的。

免责声明:非本网注明原创的信息,皆为程序自动获取互联网,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给站长发送邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),站长将在收到邮件12小时内删除。

一周热门

查看更多