JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)

第2章 你要懂的规则(JS基础语法)

2-1什么是变量

什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果...等。

 

 

2-2 给变量取个名字(变量命名)

我们为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。

 

我们赶快给变量取个好名字吧!变量名字可以任意取，只不过取名字要遵循一些规则:

1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:

正确:           
    mysum            
    _mychar         
    $numa1          
错误:
  6num  //开头不能用数字
  %sum //开头不能用除(_ $)外特殊符号,如(%  + /等)
  sum+num //开头中间不能使用除(_ $)外特殊符号，如(%  + /等)

2.变量名区分大小写，如:A与a是两个不同变量。

3.不允许使用JavaScript关键字和保留字做变量名。

 

 

任务

在右边编辑器的第7行补充代码,在var 后，填写变量名，如"myname"。

 

?不会了怎么办

在半角及英文状态下输入变量名

变量名以字母、下划线和$美元符号开头

代码：

变量命名

2-3 确定你的存在(变量声明)

我们要使用盒子装东西,是不是先要找到盒子,那在编程中，这个过程叫声明变量,找盒子的动作，如何表示：

声明变量语法: var 变量名;   

var就相当于找盒子的动作，在JavaScript中是关键字（即保留字），这个关键字的作用是声明变量，并为"变量"准备位置(即内存）。

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

当然，我们可以一次找一个盒子，也可以一次找多个盒子，所以Var还可以一次声明多个变量，变量之前用","逗号隔开。

var num1,mun2 ; //声明一个变量num1

注意:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。

 

任务

在右边编辑器的第7行声明了一个变量mya，代码程序有问题，我们来修改下:

1使用正确声明语法，将vra修改为var

2.将变量名3mya修改为mya

?不会了怎么办

变量声明使用var

变量名以字母或者下划线或$开头

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>声明变量</title>
10 
11 <script type="text/javascript">
12 
13   var mya;
14 
15   mya=5;
16 
17   alert("mya的值是:"+mya);
18 
19 </script>
20 
21 </head>
22 
23 <body>
24 
25 </body>
26 
27 </html>
声明变量

2-4 多样化的我(变量赋值）

我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢?

我们使用"="号给变量存储内容,看下面的语句:

var mynum = 5 ; //声明变量mynum并赋值。

这个语句怎么读呢？ 给变量mynum赋值，值为5。我们也可以这样写:

var mynum; //声明变量mynum
mynum = 5 ; //给变量mynum赋值

注:这里 "="号的作用是给变量赋值，不是等于号。

盒子可以装衣服、玩具、水果...等。其实，变量是无所不能的容器，你可以把任何东西存储在变量里，如数值、字符串、布尔值等，例如：

var num1 = 123;       // 123是数值
var num2 = "一二三";    //"一二三"是字符串
var num3=true;    //布尔值true（真），false(假)

其中，num1变量存储的内容是数值；num2变量存储的内容是字符串，字符串需要用一对引号""括起来，num3变量存储的内容是布尔值(true、false)。

任务

定义两个变量，并赋值，同时在网页中显示出变量的值。

1.在右边编辑器中第7行，定义num1变量，并赋值数值10。

2.在右边编辑器中第8行，定义num2变量，并赋值内容为字符串"JS"。

?不会了怎么办

定义变量var

变量赋值使用=号

赋值内容为字符串，一定要记住字符串需要用一对引号""括起来

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>变量赋值</title>
10 
11 <script language="javascript">
12 
13 var num1=10;
14 
15 var num2="JS";
16 
17   document.write("num1的值是:"+num1+"<br>");
18 
19  document.write("num2的值是:"+num2);
20 
21 </script>
22 
23 </head>
24 
25 <body>
26 
27 </html>
变量赋值

 

2-5 表达出你的想法(表达式)

表达式与数学中的定义相似，表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。

我们先看看下面的JavaScript语句：

 

生活中“再见”表达方法很多，如:英语(goodbye）、网络语（88）、肢体语（挥挥手）等。在JavaScript表达式无处不在，所以一定要知道可以表达哪些内容，看看下面几种情况:

注意:串表达式中mychar是变量

  

注意:数值表达式中num是变量

  

注意:布尔表达式中num是变量

任务

小明有10元钱，买了一个本，花了5元，小红说:"你剩下的钱加上我的6元钱，就可以买个铅笔盒了。

1.在右边编辑器的第7行,定义变量num1,并计算小明剩下多少钱。

2.在右边编辑器的第8行，定义变量num2,并计算小红花多少钱买铅笔盒。

?不会了怎么办

表达式中可以是变量、字符、数值等。

小明剩多少钱：var num1=10-5;

小红花多少钱：var num2=num1+6;

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>表达式</title>
10 
11 <script type="text/javascript">
12 
13   var num1=10-5;
14 
15   var num2=num1+6;
16 
17   document.write("小明还剩:"+num1+"元"+"<br>");
18 
19   document.write("小红花:"+num2+"元买个铅笔盒");
20 
21 </script>
22 
23 </head>
24 
25 <body>
26 
27 </body>
28 
29 </html>
表达式

2-6 我还有其它用途( +号操作符）

操作符是用于在JavaScript中指定一定动作的符号。

（1）操作符

看下面这段JavaScript代码。

sum = numa + numb;

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

JavaScript中还有很多这样的操作符，例如，算术操作符(+、-、*、/等)，比较操作符(<、>、>=、<=等)，逻辑操作符(&&、||、！)。

注意: “=” 操作符是赋值，不是等于。

(2) "+"操作符

算术运算符主要用来完成类似加减乘除的工作，在JavaScript中，“+”不只代表加法，还可以连接两个字符串，例如：

mystring = "Java" + "Script"; // mystring的值“JavaScript”这个字符串

 

任务

使用"+"号连连看，看在网页中能输出什么内容吧!

1. 第7行输入1+5;

2. 第8行输入"中"+"国";

?不会了怎么办

+号两边是数值，功能为计算，值为数值。

+号两边一侧为字符串，功能为连接作用，值为字符串。

代码：

 1 <!DOCTYPE HTML>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>+操作符</title>
10 
11 <script language="javascript">
12 
13   var mynum=1+5;
14 
15   var mychar="中"+"国";
16 
17   document.write("mynum的值:"+mynum+"<br>");
18 
19   document.write("mychar的值:"+mychar);
20 
21 </script>
22 
23 </head>
24 
25 <body>
26 
27 </body>
28 
29 </html>
+操作符

2-7 自加一，自减一 ( ++和- -)

算术操作符除了(+、-、*、/)外，还有两个非常常用的操作符，自加一“++”；自减一“--”。首先来看一个例子：

mynum = 10;
mynum++; //mynum的值变为11
mynum--; //mynum的值又变回10

上面的例子中，mynum++使mynum值在原基础上增加1，mynum--使mynum在原基础上减去1,其实也可以写成:

mynum = mynum + 1; //等同于mynum++
mynum = mynum - 1; //等同于mynum--

 

任务

试一试，让变量numa自加一，让变量numb自减一

1. 在右边编辑器中第9行输入numa++;

2. 在右边编辑器中第10行输入numb--;

?不会了怎么办

numa++ : 变量numa值加1后，再赋值给numa

numb-- : 变量numb值减1后，再赋值给numb

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>++/--</title>
10 
11 <script language="javascript">
12 
13 var numa=1;
14 
15 var numb=7;
16 
17 numa++;
18 
19 numb--;
20 
21 document.write("numa的值:"+numa+"<br>");
22 
23 document.write("numb的值:"+numb);
24 
25 </script>
26 
27 </head>
28 
29 <body>
30 
31 </body>
32 
33 </html>
++/--

2-8 较量较量(比较操作符)

我们先来做道数学题，数学考试成绩中，小明考了90分，小红考了95分，问谁考的分数高?
答: 因为“95 > 90”，所以小红考试成绩高。

其中大于号">" 就是比较操作符，小红考试成绩和小明考试成绩就是操作数，并且是两个操作数。

也就是说两个操作数通过比较操作符进行比较，得到值为真（true）和假(false)。

在JavaScript中，这样的比较操作符有很多，这些操作符的含义如下: 


看看下面例子:

var a = 5;//定义a变量，赋值为5
var b = 9; //定义b变量，赋值为9
document.write (a<b); //a小于b的值吗? 结果是真(true)
document.write (a>=b); //a大于或等于b的值吗? 结果是假(false)
document.write (a!=b); //a不等于b的值吗? 结果是真(true)
document.write (a==b); //a等于b的值吗? 结果是假(false)

任务

实验考试成绩中，numa考了1分，numb考了7分，我们来比较下它们的分数。

1. 在右边编辑器中第10行输入numa>numb

2. 在右边编辑器中第11行输入numa!=numb

?不会了怎么办

在半角及英文状态下输入>、!=等比较操作符

numa、numb要小写，因为JS中区分大小写

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>比较操作符</title>
10 
11 <script language="javascript">
12 
13 var numa,numb,jq1,jq2;
14 
15 numa=1;
16 
17 numb=7;
18 
19 jq1=numa>numb;
20 
21 jq2=numa!=numb;
22 
23 document.write("numa大于numb的分数吗？"+jq1+"<br>")
24 
25 document.write("numa不等于numb的分数吗？"+ jq2);
26 
27 </script>
28 
29 </head>
30 
31 <body>
32 
33 </body>
34 
35 </html>
比较操作符

2-9 我与你同在(逻辑与操作符）

数学里面的“a>b”，在JavaScript中还表示为a>b；数学中的“b大于a，b小于c”是“a<b<c”，那么在JavaScript中可以用&&表示，如下：

b>a && b<c    //“&&”是并且的意思, 读法"b大于a"并且" b小于c "

好比我们参加高考时,在进入考场前,必须出示准考证和身份证,两者缺一不可，否则不能参加考试，表示如下:

if(有准考证 &&有身份证) 
{
   进行考场考试
}

 “&&”是逻辑与操作符，只有“&&”两边值同时满足(同时为真)，整个表达式值才为真。

逻辑与操作符值表:

 

任务

JavaScript考试成绩中，numa（表示笔试）考了60分，numb（表示实践）考了70分，只有两项成绩都大于或等于60分，该课程考核就通过。

1. 在右边编辑器中第10行,if语句的括号内输入numa>=60 && numb>=60

?不会了怎么办

使用&&完成与操作

numa、numb都是小写的，因为JS中区分大小写

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>逻辑与</title>
10 
11 <script type="text/javascript">
12 
13   var numa,numb;
14 
15   numa=60;
16 
17   numb=70;
18 
19   if(numa>=60&&numb>=60)
20 
21    {
22 
23      document.write("JavaScript考核通过！"+"<br>");
24 
25    }
26 
27 </script>
28 
29 </head>
30 
31 <body>
32 
33 </body>
34 
35 </html>
逻辑与

2-10 我或你都可以 (逻辑或操作符）

"||"逻辑或操作符，相当于生活中的“或者”，当两个条件中有任一个条件满足，“逻辑或”的运算结果就为“真”。

例如：本周我们计划出游,可是周一至周五工作,所以周六或者周日哪天去都可以。即两天中只要有一天有空，就可以出游了。

var a=3;
var b=5;
var c;
c=b>a ||a>b;  //b>a是true，a>b是false，c是true

逻辑或操作符值表:

 

任务

在右边编辑器中第10行补充代码，在“jq1=”后输入numa>numb || numa==numb，看看结果是什么。

?不会了怎么办

numa、numb都是小写的，因为JS中区分大小写

使用||完成或操作

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>逻辑或</title>
10 
11 <script type="text/javascript">
12 
13 var numa,numb,jq1;
14 
15 numa=50;
16 
17 numb=55;
18 
19 jq1=  numa>numb||numa==numb  ;
20 
21 document.write("jq1的值是:"+jq1+"<br>")
22 
23 </script>
24 
25 </head>
26 
27 <body>
28 
29 </body>
30 
31 </html>
逻辑或

2-11 是非颠倒(逻辑非操作符）

"!"是逻辑非操作符，也就是"不是"的意思,非真即假，非假即真。好比小华今天买了一个杯子，小明说:"杯子是白色的"，小亮说:“杯子是红色的”，小华说："小明说的不是真话，小亮说的不是假话"。猜猜小华买的什么颜色的杯子，答案：红色杯子。

逻辑非操作符值表:

 

看看下面代码，变量c的值是什么:

var a=3;
var b=5;
var c;
c=!(b>a);  // b>a值是true,! (b>a）值是false
c=!(b<a);  // b<a值是false, ! (b<a）值是true

任务

在右边编辑器中第10行补充代码，在“jq1= ”后输入!(numa<numb),看看结果是什么。

?不会了怎么办

numa、numb都是小写的，因为JS中区分大小写

使用!完成非操作

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>逻辑非</title>
10 
11 <script language="javascript">
12 
13 var numa,numb,jq1;
14 
15 numa=60;
16 
17 numb=70;
18 
19 jq1= !(numa<numb) ;
20 
21 document.write("jq1的值是:"+jq1+"<br>")
22 
23 </script>
24 
25 </head>
26 
27 <body>
28 
29 </body>
30 
31 </html>
逻辑非

2-12 保持先后顺序(操作符优先级）

我们都知道，除法、乘法等操作符的优先级比加法和减法高，例如：

var numa=3;
var numb=6
jq= numa + 30 / 2 - numb * 3;  // 结果为0

如果我们要改变运算顺序，需添加括号的方法来改变优先级:

var numa=3;
var numb=6
jq= ((numa + 30) / (2 - numb)) * 3; //结果是-24.75

操作符之间的优先级（高到低）:

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

如果同级的运算是按从左到右次序进行,多层括号由里向外。

var numa=3;
var numb=6;
jq= numa + 30 >10 && numb * 3<2;  //结果为false

任务

?不会了怎么办

操作符之间的优先级为:

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>操作符优先级</title>
10 
11 <script language="javascript">
12 
13 var numa,numb,jq1;
14 
15 numa=5;
16 
17 numb=2;
18 
19 jq1=numa + 30 >10 && numb * 3<20;
20 
21 jq2=((numa + 30) / (7-numb)) * 3
22 
23 document.write("jq1的值是:"+jq1+"<br>");
24 
25 document.write("jq2的值是:"+jq2);
26 
27 </script>
28 
29 </head>
30 
31 <body>
32 
33 </body>
34 
35 </html>
操作符优先级

2-13编程练习

计算以下计算公式的结果。然后在浏览器中运行一下，看看结果是否跟你的结果一致。

任务

第一步： 在  ？ 处填写你的答案。

第二步： 填写完成后，运行一下，看看是不是跟你填写的结果一致。

第三步： 如果你有不一致的地方，思考一下为什么跟你的不一致呢。

?不会了怎么办

代码：

 1 <!DOCTYPE HTML>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>JS基础</title>
10 
11 <script type="text/javascript">
12 
13   var a,b,sum;
14 
15   var  a  = 5;
16 
17   var  b  = 100%7; 
18 
19   sum = a > b && a*b > 0 ;
20 
21   document.write( "我认为 a 的值是:" + 5  + " b的值是:" + 2 + "sum 的值是:" +true+"<br/>");
22 
23   document.write( "答案是,第一轮计算后，a 为："+ a +";b为："+b +";第一次计算sum为："+ sum +"<br/>");
24 
25  
26 
27   sum = ( (++a) + 3 ) / (2 - (--b) ) * 3; 
28 
29   document.write( "再一次计算后，我认为 a 的值是:" +  6  + " b的值是:" +  1+ "sum 的值是:" +  27 +"<br/>");
30 
31   document.write( "答案是，第二轮计算后，a 为：" + a + ";b为：" + b +";第一次计算sum为："+ sum +",sum的类型也发生变化了。");
32 
33  
34 
35 </script>
36 
37 </head>
38 
39 <body>
40 
41 </body>
42 
43 </html>
JS基础

 

posted @ 2015-05-20 11:06  竹立荷塘  阅读(754)  评论(0)  编辑  收藏  举报