第一个 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 值,有8个比较运算符:
< (小于)、> (大于)、<= (小于等于)、>= (大于等于)、== (等于)、!= (不等于)。
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 等各种语句,可以实现各种复杂的功能。