JS入门基本教程（适合没编程基础新手）

将JavaScript 插入网页的方法

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

插入JavaScript

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

<scripttype="text/JavaScript">

...

</script>

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

用JavaScript在网页中输出内容

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

<scripttype="text/JavaScript">

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

</script>

将会输出在网页上输出：

我是菜鸟我怕谁!

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

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

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

<html>

<body>

<!--

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

//-->

</script>

</body>

</html>

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

插入JavaScript的位置

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

Body里的JavaScript

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

<html>

<body>

<!--

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

//-->

</script>

</body>

Head里的JavaScript

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

<html>

<head>

<scripttype="text/JavaScript">

....

</script>

</head>

添加外部JavaScript脚本

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

<html>

<head>

<scriptsrc="scripts.js"></script>

</head>

<body>

</body>

</html>

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

注意：脚本文件里头不能再含有<script>标签。

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

JavaScript 语句

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

JavaScript语句

来看看我们之前例子。

<scripttype="text/JavaScript">

<!--

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

//-->

</script>

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

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

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

JavaScript 代码块(Blocks)

看看下面这个代码块

<scripttype="text/javascript">

{

document.write("<h1>Thisis a header</h1>");

document.write("<p>Thisis a paragraph</p>");

document.write("<p>Thisis another paragraph</p>");

}

</script>

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

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

JavaScript 注释

HTML、CSS里都有注释，JavaScript里自然也有注释，而且分为单行注释与普通注释两种。

单行注释

插入单行注释的符号是“//”

// 我是注释，我是注释

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

</script>

多行注释

多行注释以"/*"开始，以"*/"结束。

<scripttype="text/javascript">

谁说菜鸟不会编程？

菜鸟不但会编程

还有书写注释的良好习惯

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

</script>

相信你已经了解注释的作用了。HTML的注释不会被浏览器作为HTML解释，CSS注释也不会被浏览器解释。同理，JavaScript的注释也不会被执行。

注释的作用就是记录自己在编程时候的思路，以便以后自己阅读代码时可以马上找到思路。同样，注释也有助于别人阅读自己书写的JavaScript代码。总之书写注释是一个良好的编程习惯。

JavaScript 变量

变量？变量就是可以变的量呗

代数

在代数中，我们会遇到下面的基础问题，如果a的值为5，b的值为6，那么a与b的和是多少？在这个问题中，我们就可以吧a和b看做变量，再设置一个变量c来保存a与b的和。

那么，上面的这个问题就可以用如下的JavaScript代码表示：

<scripttype="text/javascript">

// 计算a + b的和

a = 5;//给变量a赋值

b = 5;//给变量b赋值

c = a + b;//c 为 a + b 的和

document.write(c);//输出c的值

</script>

执行结果：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是你学习的第一门编程语言，一定要注意区分“等于”和“赋值”这两个不同的概念。

声明变量

<scripttype="text/javascript">

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

a = 5 ; //给变量赋值

</script>

其实在第一个例子中我们已经看到了，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 +ｂ) * 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操作符(二)——比较操作符和逻辑操作符

操作符是用于在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<b<c”，那么在JavaScript中是不是也一样呢？对不起，JavaScript没有那么聪明，你需要这么写：

b>a && ａ<ｂ

你可能已经猜到了，“&&”是而且的意思。

if(条件1&& 条件2)
{//代码}

只有条件1、2同时满足，代码才会得到执行。

类似的操作符还有“或者(||)”和“非(!)”

if(条件1 || 条件2)

{//代码}

“||”表示或者的意思，只要条件1或2中有一个满足，代码就会得到执行。

if(!条件)

{//代码}

“！”表示非，也就是不是的意思，只有条件不满足的时候，代码才会得到执行。

JavaScript if else语句（如果，否则）

ifelse是所有编程语言里都有的功能，它使得程序具有简单的判断能力。

在介绍if之前，让我们先来了解一下布尔值这个概念。

布尔(Bool)值

在变量一节中，我们曾经说过，变量可以用来存储布尔值。哪么布尔值的作用究竟是什么呢？简单的说，布尔值的作用就是用来表示“真的假的”。所以布尔值其实只有两种取值：真(true)和假(false)。

一个简单的if实例

其实“if else”的意思和字面意思是一样的，就是“如果”、“否则”。还是让我们来看一个使用if的例子吧。

假设你在为一个机器人编写程序，这个机器人的功能是对使用者的爱好做出评价。

机器人：“你的爱好是什么？”

如果是JavaScript

机器人：“哇，有发展。”

那么对应的JavaScript就应该是

if (hobby == “JavaScript”)

{

document.write("有发展");

}

</script>

我们来解释一下这段代码。首先是一个“if”，它后面紧跟着一个括号，括号里则是一个条件，确切地说是一个布尔值。当条件成立的时候，这个值是true，“{}”里的语句将会得到执行；否则这个值是flase，“{}”里的语句将被忽略。

具体到我们的例子，如果hobby变量的值是“JavaScript”，则回答“有发展”，够则保持沉默。注意“==”这个符号，这个符号用来判断左右两边是否相等。下一节会详细地介绍。

如果你的爱好不是JavaScript，那么机器人什么也不会做。如果你希望它能对这种情况做出反应，我们可以请else来帮忙，看下面的代码：

<scripttype="text/JavaScript">

var hobby = "JavaScript"
if (hobby == "JavaScript")
{
document.write("有发展");
}
else//如果爱好不是JavaScript
{
document.write("没有评价……");
}

</script>

上面的代码用到了“else”，它会给if添加一种“否则”的状态。当hobby不是“JavaScript”的时候，它会表明“没有评价”。

if(你向让机器人更聪明一点)

{ 用if的嵌套吧,看下面的代码;}

<scripttype="text/JavaScript">
var hobby = "JavaScript"
if ( hobby == "JavaScript")
{
document.write("有发展");
}
else if ( hobby == "football")//如果爱好是足球。
//注意：这个if是嵌套在上一个ifelse中的else中的
{
document.write("我X");
}
else//既不是JavaScript又不是足球
{
document.write("没有评价……");
}
</script>

第二个if只有在第一个if的条件不成立的时候才有机会执行。最后再来看一个使用了if的实例吧。

JavaScript if else语句例子

ifelse是所有编程语言里都有的功能，它使得程序具有简单的判断能力。这个例子使用JavaScript的if else语句实现简单的判断。

请选择你的业余爱好

窗体顶端

JavaScript

足球

篮球

其它

窗体底端

JavaScript代码

<scripttype="text/JavaScript">

function hobby(hob){

if( hob == "js")

{

alert("有发展");

}

else if ( hob == "football")//如果爱好是足球

{

alert("我X");

}

else if ( hob == "basketball")

{

alert("我也爱看！")

}

else//既不是JavaScript又不是足球

{

alert("没有评价……");

}

</script>

HTML代码

<form>
<p><input type="radio" name="browser"οnclick="hobby(this.value)" value="js" id="js">
<label for="js">JavaScript</label></p>
<p><input type="radio" name="browser"οnclick="hobby(this.value)" value="football"id="football">
<label for="football">足球</label></p>
<p><input type="radio" name="browser"οnclick="hobby(this.value)" value="basketball"id="basketball">
<label for="basketball">篮球</label></p>
<p><input type="radio" name="browser"οnclick="hobby(this.value)" value="other"id="other">
<label for="other">其它</label></p>
</form>

JavaScript Switch语句

当有很多种选项的时候，switch比if else更好的选择。

上一节我们已经看到，利用if else可以让程序具有基本的判断能力，而使用嵌套的if else则可以让程序对多种情况进行判断。但是当情况的种类比较多的时候，使用switch语句将更加合适。

一个使用switch的实例

结舌我们需要实现如下的程序：输入一个学生的考试成绩，我们按照每十分一个登记将成绩分等，程序将根据成绩的等级做出不同的评价。

很明显，用if else可以实现这样的程序，但是代码会很复杂。而如果使用wwitch语句，代码则会简单一些，首先来看一下思路，再把它翻译成JavaScript。

思路：

1 将分数转化为特定等级以便于switch处理

2 判断分数属于哪种等级

3 根据分数等级做出评价：例如低于60给出挂科评价。

翻译成JavaScript就是如下代码(注意注释)：

<scripttype="text/JavaScript">

//首先，我们用score变量来存储分数，假设为65
var score = 65;

//用分数除以10，parseInt的作用是把它转换为整数，

//暂时不用深究，()内最后的结果为6
switch (parseInt(score / 10)) {

//switch开始实现判断过程，case6得到满足

case 0:

case 1:

case 2:

case 3:

case 4:

case 5:

//根据不同的等级做出不同的行为。

//冒号后面的语句就是行为

//case0到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

</script>

记得在每个case所执行的语句里添加上一个break语句。为了理解break的作用，我们来看看如果没有break会怎么样：

<scripttype="text/JavaScript">

switch (parseInt(score / 10)) {

case 0:

case 1:

case 2:

case 3:

case 4:

case 5:

degree = "恭喜你，又挂了！";

case 6:

degree = "勉强及格";
case 7:

degree = "凑合，凑合"

case 8:

degree = "8错，8错";

case 9:

case 10:

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

}//end of switch

</script>

在上面的代码中，如果成绩是50分，那么score/10就是5，则case5后面的语句将会得到执行，同样，case6、7等等后面的语句都会得到执行。也就是说，我们会得到：”恭喜你，又挂了！勉强及格凑合，凑合8错，8错高手高手，佩服佩服“这样没有意义的评价。

这就是swtitch语句的执行逻辑，当发现某个case满足后，该switch中在该case后的所有语句都会得到执行。第一个例子中的break就是为了让switch”停下来“。

看一个使用switch的实例

JavaScript Switch语句例子

使用JavaScript的Switch语句判断成绩的等级。

使用switch的示例

窗体顶端

成绩

点击提交

窗体底端

JavaScript代码

<scripttype="text/JavaScript">

function judge() {

var score;//分数

var degree;//分数等级

score = document.getElementById("score").value;

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 = "勉强及格";

case 7:

degree = "凑合，凑合"

break;

case 8:

degree = "8错，8错";

break;

case 9:

case 10:

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

}//end of switch

}//end of else

alert(degree);

}

</script>

HTML代码

<p>

</p>

<p>

</p>

</form>

JavaScript 弹出框

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

警告(alert)

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

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

<scripttype="text/JavaScript">

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

</script>

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

看一个使用alert的实例

确认(confirm)

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

“说！是还是不是？快回答！”

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

<scripttype="text/JavaScript">

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

if (r==true)

{

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

}

else

{

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

}
</script>

看一个使用confirm的实例

提问(prompt)

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

<scripttype="text/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);

}

</script>

看一个使用prompt的实例

JavaScript 弹出框 alert例子

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

窗体顶端

调用alert

窗体底端

JavaScript代码

<scripttype="text/JavaScript">

function message(){

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

}

</script>

HTML代码

<p>

<button value="alert"οnclick="message()">调用alert</button>

</p>

</form>

JavaScript 弹出框confirm例子

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

窗体顶端

调用confirm

窗体底端

JavaScript代码

<scripttype="text/JavaScript">

function isCainiao() {

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

if(r==true)

{

alert("彼此彼此");

}

else

{

alert("佩服佩服");

}

</script>

HTML代码

<p>

<button value="confirm"οnclick="isCainiao()">调用confirm</button>

</p>

</form>

JavaScript 弹出框prompt例子

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

窗体顶端

点击弹出prompt

窗体底端

JavaScript代码

<scripttype="text/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);

}

</script>

HTML代码

<p>

</p>

</form>

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循环，很少的代码就可以实现十个菜鸟的报数。

<scripttype="text/JavaScript">

var i=1;

for (i=1;i<=10;i++)

{

document.write("菜鸟"+i+"号<br/>");

}

</script>

结果如下：

菜鸟1号

菜鸟2号

菜鸟3号

菜鸟4号

菜鸟5号

菜鸟6号

菜鸟7号

菜鸟8号

菜鸟9号

菜鸟10号

for循环的工作方式

在上面那个例子中，循环恰好执行了10次，那么和“for (i=1;i<=10;i++)”一句中的10是不是10次的意思呢？下面我们就来看看for循环的工作机制。

首先"i=1"叫做初始条件，也就是说从哪里开始，特别的，我们的例子从i=1开始。

出现在第一个分号后面的"i<=10"表示判断条件，每次循环都会先判断这个条件是否满足，如果满足则继续循环，否则停止循环，继续执行for循环后面的代码。你可能想问了，我们设定了i=0，岂不是永远都小于等于10吗？来看第三个部分。

最后的"i++"表示让i在自身的基础上加1，这时每次循环后的动作.也就是说，每次循环结束，i都会比原来大1，执行若干次循环之后，i<=10的条件就不满足了，这时循环结束。for循环后面的代码将得到执行。

for循环总结

至此，我们可以吧for循环总结如下：

for(初始条件;判断条件;循环后动作)

{

循环代码

}

JavaScript While循环

while循环重复执行一段代码，直到某个条件不再满足。

循环的另一种方法

其实while循环和for循环的作用都是重复执行代码，例如下面这段代码，和上一节for循环的输出结果完全没有区别。先来读读例子的代码，下面会解释为什么这个循环会和上一节的for循环等价。

<html>

<body>

<scripttype="text/JavaScript">

var i=0;

while (i<=10)

{

document.write("菜鸟"+i+"号");

document.write("<br />");

i=i+1;

}

</script>

</body>

</html>

while循环的工作机制

让我们来看看while循环的执行过程：

while(判断条件)

{

循环代码

}

看起来好像比for循环少了点东西啊，只有一个判断条件啊。其实这个循环也是有初始条件的，只不过在之前就已经定义好了，例如上面例子中的"var i=0;"，至于变量i的增大，则是放到了循环体里面，其实这个过程和for没有什么区别，也是变量i不断变大，直到判断条件不满足，则循环结束。

do while结构

do wile结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件。例子如下：

<scripttype="text/JavaScript">

i = 0;

{

document.write("The number is " + i);

document.write("<br />");

i++;

}

while (i <= 5)

</script>

JavaScript Break 与 Continue

Break可以跳出循环，Continue跳过本次循环。

break

break语句可以让循环中途停止，直接执行后面的代码。格式如下：

while (i<10)

{

if(特殊情况)

break;

循环代码

}

那么，当特殊情况发生的时候，循环就会立即结束。看看下面的例子，我们的菜鸟7号到10号在寝室打麻将……

<html>

<body>

<scripttype="text/JavaScript">

var i=0;

for (i=0;i<=10;i++)

{

if (i==6)

{

break;//如果i是6的话就退出循环。

}

document.write("菜鸟"+i+"号<br/>");

}

</script>

</body>

</html>

当i=7的时候循环就会结束。

continue

continue的作用是仅仅跳过本次循环，而整个循环体继续执行。它的格式如下：

while (判断条件)

{

if(特殊情况)

continue;

循环代码

}

上面的循环中，当特殊情况发生的时候，本次循环将被跳过，而后续的循环则不会受到影响，来看看下面的例子：菜鸟6号外出学习JavaScript去了。

<html>

<body>

<scripttype="text/JavaScript">

var i=0

for (i=0;i<=10;i++)

{

if (i==3)

{

continue;

}

document.write("The number is "+ i);

document.write("<br />");

}

</script>

</body>

</html>

上面的代码中，i=6的那次循环将被跳过.

JavaScript For...In循环

Javascript中的for in循环通常用来遍历数组

for in遍历数组

首先要了解什么是数组，所谓数组，其实就是一个保存了一组类似变量的一个集合。我们来看一个保存了爱好的数组实例：

<html>

<body>

</html>

输出结果如下：

JavaScript
CSS
篮球

我们来分析一下上面的例子：

var hobbies = new Array();一句创建了一个新的数组。

hobbies[0] ="JavaScript";以及之后的两句则是给hobbies数组赋值。这与我们之前见过的变量赋值不太一样，hobbies后面多出一个"[0]"，这个是变量的索引。我们之前已经说了，数组是变量的集合，因此我们在赋值之前需要指明给数组中的哪一个变量赋值。在这里，"[0]"表示的是hobbies数组所包含的第一个变量，没错，数组的索引是从0开始的，开始可能有点别扭，慢慢就习惯了。

最后的for in循环就很好理解了，

for (x in hobbies)//数组中的每一个变量

{

document.write(hobbies[x] + "<br />");

}

表示遍历hobbies数则的所有变量，并且将他们逐一输出。

JavaScript事件

我们之前提到过函数的调用。函数定义之后，默认是不会执行的，这时候就需要一些事件来触发这个函数的执行。

事件简介

JavaScript很多有很多事件，例如鼠标的点击、移动，网页的载入和关闭。我们先来定义一个函数，再看几个事件的实例。

统一的示例函数：

<scripttype="text/JavaScript">
function displaymessage()
{
alert("我是菜鸟我怕谁!");
}
</script>

函数的事件很简单，只是显示一条消息。

点击事件

使用点击事件调用，需要给元素设置onclick属性。示例代码如下：

<button value="点击提交" οnclick="displaymessage()">onclick调用函数</button>

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

窗体顶端

onclick调用函数

窗体底端

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

鼠标经过、移出事件

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

窗体顶端

鼠标滑过调用函数

窗体底端

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

<button value="点击提交" οnmοuseοver="displaymessage()">鼠标滑过调用函数</button>

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

窗体顶端

鼠标移出调用函数

窗体底端

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

<button value="点击提交" οnmοuseοut="displaymessage()">鼠标移出调用函数</button>

更多事件

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("我是菜鸟我怕谁!")

是完全一样的。

JS入门基本教程（适合没编程基础新手）相关推荐

没编程基础学习JS的入门教程
JavaScript教程网为没有编程基础的人员写一个适合他们的教程,JS入门基本教程(适合没编程基础新手). 将JavaScript 插入网页的方法使用 <script>标签在网页 ...
python适合自学编程吗-没编程基础可以学python吗
Python是一门高级编程语言,而且Python语言适合零基础人员学习,也是初学者的首选. 如何学习好Python: 1. 要有决心做任何事情,首先要有足够的决心和坚持,才能做好事情.学好Pytho ...
python编程基础与应用-有哪些适合零编程基础的人学习Python的书?
筛选了2年内优秀的python书籍,个别经典的书籍扩展到5年内. python现在的主流版本是3.7(有明显性能提升,强烈推荐) 3.6, 不基于这两个或者更新版本的书,慎重选择.很多库已经不提供py ...
有编程基础的人学python_有哪些适合零编程基础的人学习Python的书?
从豆瓣上爬了评分最高的20本Python书(评分人数>50),基本涵盖了从入门到进阶.基本语法.算法.数据分析.web开发.机器学习的各个类目的书.很多很值得一看. No.1 Fluent Py ...
python没基础可以学吗-没编程基础可以学python吗
Python是一门高级编程语言,而且Python语言适合零基础人员学习,也是初学者的首选. 如何学习好Python: 1. 要有决心做任何事情,首先要有足够的决心和坚持,才能做好事情.学好Pytho ...
零基础可以学python吗-没编程基础可以学python吗
Python是一门高级编程语言,而且Python语言适合零基础人员学习,也是初学者的首选. 如何学习好Python: 1. 要有决心做任何事情,首先要有足够的决心和坚持,才能做好事情.学好Pytho ...
没学过编程可以学python吗_没编程基础可以学python吗
Python是一门高级编程语言,而且Python语言适合零基础人员学习,也是初学者的首选. 如何学习好Python: 1. 要有决心做任何事情,首先要有足够的决心和坚持,才能做好事情.学好Pytho ...
适合自学python的图书-有哪些适合零编程基础的人学习Python的书?
很多人在问,学习Python读什么书,这其实是一个非常通用的问题,学习分为三种方式:看书.上课.培训,而读书学习是最实惠也是最高效的一种,下面我们推荐6本高分书籍给大家,希望大家学习愉快: 1.Pyt ...
【Python学习教程】Python编程基础
文章目录编程语言是什么编译型语言和解释型语言的区别编译型语言 1) 可执行程序不能跨平台 2) 源代码不能跨平台解释型语言关于 Python 总结 Python是什么,Python简介 Py ...

JS入门基本教程（适合没编程基础新手）

JS入门基本教程（适合没编程基础新手）相关推荐

最新文章

热门文章