没编程基础学习JS的入门教程

JavaScript教程网为没有编程基础的人员写一个适合他们的教程，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("我是菜鸟我怕谁!")

是完全一样的。

来源： JavaScript教程网

没编程基础学习JS的入门教程相关推荐

java swt 菜鸟教程_编程基础学习JS的入门教程
将JavaScript 插入网页的方法使用插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的...就是代码的内容.Jav ...
小白零基础学习Java开发入门教程奉上，希望对你有所帮助！
"持久和新"是编程语言方面对Java的适当评估. 想要进入互联网行业,想转向编程,Java无疑是一个非常普遍的选择. 但是,Java毕竟是一种编程语言,并且仍然存在一些技术障碍.如 ...
python实现登录支付宝收能量_适合零基础人群学习的Python入门教程
适合零基础人群学习的Python入门教程学什么?小编为大家准备的Python学习教程,课程主要讲解:Python核心编程.Linux基础.前端开发.Web开发.爬虫开发.人工智能等内容. 对于初学者想 ...
适合零基础人群学习的Python入门教程
适合零基础人群学习的Python入门教程学什么?小编为大家准备的Python学习教程,课程主要讲解:Python核心编程.Linux基础.前端开发.Web开发.爬虫开发.大数据.人工智能等内容. Py ...
java编程基础学习需要多久的时间
Java是当前世界颇为流行的编程语言之一,很多想学习java的人都会听过一句话,先学好java基础,在考虑是自学还是培训学习,同时新的问题出现了,java基础包括什么,需要学习多久呢,对于小白来说,想 ...
第三章 Python Kivy 学习 -- Kivy官方入门教程Pong Game
系列文章目录第一章 Python Kivy 学习 – Kivy介绍及环境安装第二章 Python Kivy 学习 – Kivy项目开发原理(待编辑) 第三章 Python Kivy 学习 – Ki ...
python没基础可以学吗-没编程基础可以学python吗
Python是一门高级编程语言,而且Python语言适合零基础人员学习,也是初学者的首选. 如何学习好Python: 1. 要有决心做任何事情,首先要有足够的决心和坚持,才能做好事情.学好Pytho ...
零基础可以学python吗-没编程基础可以学python吗
Python是一门高级编程语言,而且Python语言适合零基础人员学习,也是初学者的首选. 如何学习好Python: 1. 要有决心做任何事情,首先要有足够的决心和坚持,才能做好事情.学好Pytho ...
没学过编程可以学python吗_没编程基础可以学python吗
Python是一门高级编程语言,而且Python语言适合零基础人员学习,也是初学者的首选. 如何学习好Python: 1. 要有决心做任何事情,首先要有足够的决心和坚持,才能做好事情.学好Pytho ...

没编程基础学习JS的入门教程

没编程基础学习JS的入门教程相关推荐

最新文章

热门文章