您的位置：首页 > Web前端 > JavaScript

JavaScript 基本语法

2015-09-14 16:25 369 查看

第一个 JavaScript 程序

在学习一门新语言的时候，大家都喜欢用“hello world”作为第一个程序，那么现在我们写一个 JavaScript 版本的：

<html>
<head></head>
<body>

<script>
alert("hello world!");
</script>

</body>
</html>

JavaScript 代码放在

<script>……</script>

标签里，这段代码的效果是，弹出一个小框，显示“hello world!”。

JavaScript 放在哪里？

刚才我们编写了第一个 JavaScript 程序，强调过 JavaScript 代码必须放置在

<script>……</script>

标签里。

head 中的 JavaScript

我们除了可以把包含代码的

<script>

标签放在

<body>……</body>

标签里，还可以把它放在

<head>……</head>

标签里，比如这样：

<html>

<head>
<h1> JavaScript in head. </h1>

<script>
alert("hello word!");
</script>

</head>

<body></body>
</html>

这个程序的执行结果和刚才的没什么不同，但其实把 JavaScript 代码放在

<head></head>

和放在

<body></body>

里是有区别的：

简单地说，放在

<head></head>

里的会比放在

<body></body>

先执行。head
标签里的代码会在页面还未开始绘制之前被解析，而在 body 里的代码则会在页面渲染的同时在读取到这段代码的时候才被执行。

外部的 JavaScript

除了直接把 JavaScript 代码写在 HTML 里，我们还可以把 JavaScript 的代码写在一个 js 文件中，在 HTML 里调用这个 js 文件。我们还是以“hello world”举例。

在实验楼环境中，把以下代码保存并命名为“out.js”，放在桌面上：

alert("hello word!");

把以下代码保存并命名为“test2.html”，放在桌面：

<html>
<head>
<h1> my JavaScript code in "out.js" </h1>
</head>

<body>

<script src="out.js"></script>

</body>

</html>

同样，双击桌面上的“test2.html”文件，调用浏览器运行，你会发现运行效果和前两个程序也没什么区别。

其实，前两种方式都是直接把 JavaScript 代码放在 HTML 中，在页面加载的同时，那些 JavaScript 的代码就被解析了。而把 JavaScript 代码放在外部文件中，只有在事件被触发，需要该段 JavaScript 代码时，才调用执行。

这样做有个好处，当页面比较复杂的时候，把大量的 JavaScript 代码放到外部文件，只有在需要的时候才执行，那么会明显地加快页面加载速度。

什么是变量

从字面上看，变量是可变的量；从编程角度讲，变量是用于存储数据的存储器，每个变量都有其独有的名字，每个变量都占有一段内存。

在程序当中，直接使用数据值或直接使用数据值的内存地址都不够方便，所以我们用变量的名字来表示对应的数据。

每个变量都有它的变量名，变量类型，变量的作用域。

JavaScript 中的变量

JavaScript 中的变量规则和其它如 C、Java 等语言类似，建议的变量命名规则：
1.由字母、数字、下划线组成，区分大小写
2.以字母开头
3.变量名不能有空格
4.不能使用 JavaScript 中的关键字做变量名

变量的声明

在 JavaScript 中，变量用 Var 命令做声明：

var test ;    // 声明了一个名为 test 的变量。

var test_2 = "shiyanlou" ;  // 声明一个名为 test_2 的变量，并赋值为“shiyanlou”。

在 JavaScript 中，变量也可以不作声明，而在使用时再根据数据的类型来确其变量的类型，如：

x = 100 ;     // 变量 x 为整数
y = "hello" ; // 变量 y 为字符串
z = True ;    // 变量 z 为布尔型
cars=["Audi","BMW","Volvo"]; // cars 是一个数组

作用域

与其他语言一样，JavaScript 中的变量同样有全局变量和局部变量之分。

全局变量是定义在所有函数之外的，其作用范围是整段 JavaScript 代码；

而局部变量是定义在函数体之内，只对其该函数是可见，而对其它函数则是不可见的。

数据类型

字符串

字符串是存储字符（比如 "shiyanlou"）的变量。

字符串可以是引号中的任意文本，您可以使用单引号或双引号，也可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

var carname="shiyanlou";
var carname='shiyanlou';
var answer="I Love 'shiyanlou'";
var answer='I Love "shiyanlou"';

数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

布尔

布尔只能有两个值：true 或 false：

var x=true
var y=false

数组

创建一个名为 boys 的数组：

var boys=new Array();
boys[0]="Tom";
boys[1]="Jack";
boys[2]="Alex";

也可以这样:

var boys=new Array("Tom","Jack","Alex");

或者这样:

var boys=["Tom","Jack","Alex"];

运算符

大多数编程语言的运算符规则都是相似的，JavaScript 与大多数人熟悉的 C、Java 等都很接近。

1.算数运算符


运算符	描述	示例
+	加	x+y
-	减	x-y
*	乘	x*y
/	除	x/y
++	累加	x++
--	累减	x--
%	取余数	x%y

2.比较运算符

比较运算符的基本操作过程是，首先对它的操作数进行比较，再返回一个 true 或 False 值，有８个比较运算符:

< (小于)、> (大于)、<= (小于等于)、>= (大于等于)、== (等于)、!= (不等于)。

3.逻辑运算符

JavaScript 语句

1. if/else 语句

JavaScript 中的 if/else 判断选择，你会发现，就像 C 语言。语法格式是这样的：

if (条件 1)
{
当条件 1 为 true 时执行的代码;
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码;
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码;
}

2. switch/case 语句

在做大量的选择判断的时候，如果依然使用 if/else 结构，那么代码有可能会变得很凌乱，于是我们采用 switch/case 结构：

switch(k)
{
case k1:
执行代码块 1 ;
break;

case k2:
执行代码块 2 ;
break;

default:
默认执行（k 值没有在 case 中找到匹配时）;
}

3. for 循环

for 循环是程序员进场经常用到的工具，在 JavaScript 中，for 循环的语法也十分类似 C 语言，格式是这样的：

for(变量 = 初始值 ; 循环条件 ; 变量累加方法)
{
循环语句;
}

举例说明更清楚，比如循环打印出 0～7 的数字：

<html>
<head>
</head>

<body>
<script>
for(var i=0;i<8;i++)
{
document.write("number is "+i+"<br>");
}
</script>
</body>

</html>

在浏览器中的效果：

4. while 循环

区别于 for 循环的另一种循环方式：

while (条件)
{
需要执行的代码;
}

此外，while 循环还有一种变体，称作 do/while 循环：

do
{
需要执行的代码;
}
while (条件);

而这两者的区别是，do/while 循环在检测条件之前就会执行，也就是说，即使条件为 false，do/while 也会执行一次循环代码。

5. break 和 continue 语句

有时候在循环体内，需要立即跳出循环或跳过循环体内其余代码而进行下一次循环，这便是 break 和 continue 的作用。

break 本语句放在循环体内，作用是立即跳出循环。

continue 本语句放在循环体内，作用是中止本次循环，并执行下一次循环。如果循环的条件已经不符合，就跳出循环。

比如：

for (i = 1; i < 10; i++)
{
if (i == 5 || i == 6) continue;
if (i == 8) break;
document.write(i);
}

输出为“12347”，便是跳过了 5 和 6，然后在 i==8 的时候跳出了循环。

JavaScript 函数

在进行一个复杂的程序设计时，需要根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个“函数”。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。

JavaScript 的函数可以封装那些在程序中可能要多次用到的模块，并可作为事件驱动的结果而调用的程序，从而实现一个函数把它与事件驱动相关联，这是与其它语言不同的地方。

在 JavaScript 中，函数由关键词 function 定义，函数可以有多个参数。基本格式为：

function 函数名 (参数1，参数2)
{
函数体;

return 返回值;
}

调用（使用）函数时，传入对应的参数，执行函数体中如 if/else，switch/case，for，while 等各种语句，可以实现各种复杂的功能。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航