JavaScript 基本语法

第一个 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.逻辑运算符

biaoge



JavaScript 语句

1. if/else 语句

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

if (条件 1)
  {
  当条件 1true 时执行的代码;
  }
else if (条件 2)
  {
  当条件 2true 时执行的代码;
  }
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>

在浏览器中的效果:

0301

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 等各种语句,可以实现各种复杂的功能。



























  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值