Skip to content

Javascript基本语法

为什么要学JavaScript

什么是JavaScript

js_gramma_helloWorld.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>脚本的基本结构</TITLE>
  <SCRIPT language="javascript">
    var count = 0;
    document.write("淘宝网欢迎您！");
    for (i = 0; i < 5; i++)
      document.write("<H4>淘宝网欢迎您！</H4>");
  </SCRIPT>
</HEAD>

<BODY>
  <H1> BODY部分的内容</H1>
</BODY>

</HTML>

脚本的执行原理

脚本的执行原理

JavaScript的基本语法

基本语法

JavaScript与Java在语法上有些相似，但也不尽相同。下面将结合Java语言对编写JavaScript代码时需要注意的事项进行详细介绍。

  • JavaScript区分大小写

  • 每行结尾的分号可有可无

  • 变量是弱类型的

  • 使用大括号标记代码块

  • 注释

JavaScript中的关键字

JavaScript中的关键字是指在JavaScript中具有特定含义的、可以成为JavaScript语法中一部分的字符。与其他编程语言一样，JavaScript中也有许多关键字，JavaScript中的关键字如下表所示。

           
abstract continue finally instanceof private this
boolean default float int public throw
break do for interface return typeof
byte double function long short true
case else goto native static var
catch extends implements new super void
char false import null switch while
class final in package synchronized with

变量的声明和赋值

JavaScript的数据类型比较简单，主要有数值型、字符型、布尔型、转义字符、空值（null）和未定义值6种。

变量是指程序中一个已经命名的存储单元，其主要作用就是为数据操作提供存放信息的容器。在使用变量前，必须明确变量的命名规则、变量的声明方法以及变量的作用域。

1
2
3
4
var count;  //定义变量
count = 5;  //赋值
var count = 10; //同时声明和赋值变量
var x, y, z = 10; //声明多个变量

运算符号

运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值

根据所执行的运算，运算符可分为以下类别：

  • 算术运算符

    +、-、 * 、 / 、%、++、--、-(求反)

  • 比较运算符

    ==、!=、>、>=、<、<=

  • 逻辑运算符

    &&、||、！

逻辑控制语句

1
2
3
4
5
if(条件){
  //JavaScript代码;
}else{
  //JavaScript代码;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
switch (表达式){         
  case 常量1 : 
    JavaScript语句1;
    break;
  case 常量2 : 
    JavaScript语句2;
    break;
    ...
  default : 
    JavaScript语句3;    
}

1
2
3
4
5
6
7
for(初始化;  条件;  增量){
  语句集;
}

while(条件){
  语句集;
}

注释

单行注释以 // 开始，以行末结束

例如：

1
<SCRIPT language=“javascript”>  //表示JavaScript代码的开始

多行注释以 / 开始，以 / 结束，符号 /…… / 指示中间的语句是该程序中的注释。

例如：

1
2
3
4
5
/*
  helloWorld.html
  2007-9-29
  第一个JavaScript程序
 */

类型转换

  • parseInt (String)

    将字符串转换为整型数字

    如: parseInt (“86”)将字符串“86”转换为整型值86

  • parseFloat(String)

    将字符串转换为浮点型数字

    如: parseInt (“34.45”)将字符串“34.45”转换为浮点值34.45

函数

创建函数

1
2
3
function 函数名( 参数1,参数2，… ){ 
  语句; 
}

1
2
3
4
5
function showHello( ){
  var count=document.myForm.txtCount.value ;
    for(i=0; i<count; i++)
      document.write("<H2>HelloWorld</H2>");
}

调用函数

函数调用一般和表单元素的事件一起使用，调用格式为：

事件名＝"函数名";

1
<INPUT type="submit" name="Submit" value="显示HelloWorld" onClick="showHello(  )">

事件

JavaScript与Web页面之间的交互是通过用户操作浏览器页面时触发相关事件来实现的。例如，在页面载入完毕时将触发onload（载入）事件、当用户单击按钮时将触发按钮的onclick事件等。事件处理程序则是用于响应某个事件而执行的处理程序。事件处理程序可以是任意JavaScript语句，但通常使用特定的自定义函数（Function）来对事件进行处理。

事 件 何 时 触 发
onabort 对象载入被中断时触发
onblur 元素或窗口本身失去焦点时触发
onchange 改变<select>元素中的选项或其他表单元素失去焦点，并且在其获取焦点后内容发生过改变时触发
onclick 单击鼠标左键时触发。当光标的焦点在按钮上，并按下回车键时，也会触发该事件
ondblclick 双击鼠标左键时触发
onerror 出现错误时触发
onfocus 任何元素或窗口本身获得焦点时触发
onkeydown 键盘上的按键（包括Shift或Alt等键）被按下时触发，如果一直按着某键，则会不断触发。当返回false时，取消默认动作
onkeypress 键盘上的按键被按下，并产生一个字符时发生。也就是说，当按下Shift或Alt等键时不触发。如果一直按下某键时，会不断触发。当返回false时，取消默认动作
onkeyup 释放键盘上的按键时触发
onload 页面完全载入后，在Window对象上触发；所有框架都载入后，在框架集上触发；<img>标记指定的图像完全载入后，在其上触发；或<object>标记指定的对象完全载入后，在其上触发
onmousedown 单击任何一个鼠标按键时触发
onmousemove 鼠标在某个元素上移动时持续触发
onmouseout 将鼠标从指定的元素上移开时触发
onmouseover 鼠标移到某个元素上时触发
onmouseup 释放任意一个鼠标按键时触发
onreset 单击重置按钮时，在<form>上触发
onresize 窗口或框架的大小发生改变时触发
onscroll 在任何带滚动条的元素或窗口上滚动时触发
onselect 选中文本时触发
onsubmit 单击提交按钮时，在<form>上触发
onunload 页面完全卸载后，在Window对象上触发；或者所有框架都卸载后，在框架集上触发

案例

计算器

计算器/xiaojie1_pre.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<FORM action="" method="post" name="myform" id="myform">
  <TABLE border="0" bgcolor="#C9E495" align="center">
    <TR>
      <TD colspan="4">
        <H3><IMG src="images/shop.gif" width="54" height="54"> 购物简易计算器</H3>
      </TD>
    </TR>
    <TR>
      <TD>第一个数</TD>
      <TD colspan="3"><INPUT name="txtNum1" type="text" class="textBaroder" id="txtNum1" size="25"></TD>
    </TR>
    <TR>
      <TD>第二个数</TD>
      <TD colspan="3"><INPUT name="txtNum2" type="text" class="textBaroder" id="txtNum2" size="25"></TD>
    </TR>
    <TR>
      <TD><INPUT name="addButton2" type="button" id="addButton2" value="  ＋  "></TD>
      <TD><INPUT name="subButton2" type="button" id="subButton2" value="  －  "></TD>
      <TD><INPUT name="mulButton2" type="button" id="mulButton2" value="  ×  "></TD>
      <TD><INPUT name="divButton2" type="button" id="divButton2" value="  ÷  "></TD>
    </TR>
    <TR>
      <TD>计算结果</TD>
      <TD colspan="3"><INPUT name="txtResult" type="text" class="textBaroder" id="txtResult" size="25"></TD>
    </TR>
  </TABLE>
</FORM>

源代码
计算器/xiaojie1_pre.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>计算器</TITLE>
  <STYLE type="text/css">
    /*细边框的文本输入框*/
    .textBaroder {
      border-width: 1px;
      border-style: solid
    }
  </STYLE>

</HEAD>

<BODY>
  <IMG src="images/logo.gif" width="240" height="31">欢迎您来淘宝！
  <FORM action="" method="post" name="myform" id="myform">
    <TABLE border="0" bgcolor="#C9E495" align="center">
      <TR>
        <TD colspan="4">
          <H3><IMG src="images/shop.gif" width="54" height="54"> 购物简易计算器</H3>
        </TD>
      </TR>
      <TR>
        <TD>第一个数</TD>
        <TD colspan="3"><INPUT name="txtNum1" type="text" class="textBaroder" id="txtNum1" size="25"></TD>
      </TR>
      <TR>
        <TD>第二个数</TD>
        <TD colspan="3"><INPUT name="txtNum2" type="text" class="textBaroder" id="txtNum2" size="25"></TD>
      </TR>
      <TR>
        <TD><INPUT name="addButton2" type="button" id="addButton2" value="  ＋  "></TD>
        <TD><INPUT name="subButton2" type="button" id="subButton2" value="  －  "></TD>
        <TD><INPUT name="mulButton2" type="button" id="mulButton2" value="  ×  "></TD>
        <TD><INPUT name="divButton2" type="button" id="divButton2" value="  ÷  "></TD>
      </TR>
      <TR>
        <TD>计算结果</TD>
        <TD colspan="3"><INPUT name="txtResult" type="text" class="textBaroder" id="txtResult" size="25"></TD>
      </TR>
    </TABLE>
  </FORM>
</BODY>

</HTML>

计算器/xiaojie1.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<SCRIPT language="javascript">
  function add() {
    var num1, num2;
    num1 = parseFloat(document.myform.txtNum1.value);
    num2 = parseFloat(document.myform.txtNum2.value);
    document.myform.txtResult.value = num1 + num2;
  }
  function subtration() {
    var num1, num2;
    num1 = parseFloat(document.myform.txtNum1.value);
    num2 = parseFloat(document.myform.txtNum2.value);
    document.myform.txtResult.value = num1 - num2;
  }
  function multiplication() {
    var num1, num2;
    num1 = parseFloat(document.myform.txtNum1.value);
    num2 = parseFloat(document.myform.txtNum2.value);
    document.myform.txtResult.value = num1 * num2;
  }
  function division() {
    var num1, num2;
    num1 = parseFloat(document.myform.txtNum1.value);
    num2 = parseFloat(document.myform.txtNum2.value);
    document.myform.txtResult.value = num1 / num2;
  }
</SCRIPT>

源代码
计算器/xiaojie1.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>计算器</TITLE>
  <STYLE type="text/css">
    /*细边框的文本输入框*/
    .textBaroder {
      border-width: 1px;
      border-style: solid
    }
  </STYLE>

  <SCRIPT language="javascript">
    function add() {
      var num1, num2;
      num1 = parseFloat(document.myform.txtNum1.value);
      num2 = parseFloat(document.myform.txtNum2.value);
      document.myform.txtResult.value = num1 + num2;
    }
    function subtration() {
      var num1, num2;
      num1 = parseFloat(document.myform.txtNum1.value);
      num2 = parseFloat(document.myform.txtNum2.value);
      document.myform.txtResult.value = num1 - num2;
    }
    function multiplication() {
      var num1, num2;
      num1 = parseFloat(document.myform.txtNum1.value);
      num2 = parseFloat(document.myform.txtNum2.value);
      document.myform.txtResult.value = num1 * num2;
    }
    function division() {
      var num1, num2;
      num1 = parseFloat(document.myform.txtNum1.value);
      num2 = parseFloat(document.myform.txtNum2.value);
      document.myform.txtResult.value = num1 / num2;
    }
  </SCRIPT>
</HEAD>

<BODY>
  <IMG src="images/logo.gif" width="240" height="31">欢迎您来淘宝！
  <FORM action="" method="post" name="myform" id="myform">
    <TABLE border="0" bgcolor="#C9E495" align="center">
      <TR>
        <TD colspan="4">
          <H3><IMG src="images/shop.gif" width="54" height="54"> 购物简易计算器</H3>
        </TD>
      </TR>
      <TR>
        <TD>第一个数</TD>
        <TD colspan="3"><INPUT name="txtNum1" type="text" class="textBaroder" id="txtNum1" size="25"></TD>
      </TR>
      <TR>
        <TD>第二个数</TD>
        <TD colspan="3"><INPUT name="txtNum2" type="text" class="textBaroder" id="txtNum2" size="25"></TD>
      </TR>
      <TR>
        <TD><INPUT name="addButton2" type="button" id="addButton2" value="  ＋  " onClick=" add()"></TD>
        <TD><INPUT name="subButton2" type="button" id="subButton2" value="  －  " onClick="subtration()"></TD>
        <TD><INPUT name="mulButton2" type="button" id="mulButton2" value="  ×  " onClick="multiplication()"></TD>
        <TD><INPUT name="divButton2" type="button" id="divButton2" value="  ÷  " onClick="division()"></TD>
      </TR>
      <TR>
        <TD>计算结果</TD>
        <TD colspan="3"><INPUT name="txtResult" type="text" class="textBaroder" id="txtResult" size="25"></TD>
      </TR>
    </TABLE>
  </FORM>
</BODY>

</HTML>