Skip to content

Javascript基本语法

为什么要学JavaScript

JavaScript是实现网页交互与动态效果的核心语言。HTML定义页面结构，CSS负责样式美化，而JavaScript则赋予页面“生命力”——从简单的表单验证、按钮点击响应，到复杂的动画效果、数据可视化，都依赖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

变量的声明和赋值

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

变量的声明方式有var、let和const三种，语法如下：

1
2
3
var 变量名 = 值;
let 变量名 = 值;
const 变量名 = 值;

其中，var是传统的变量声明方式，let和const是ES6新增的变量声明方式。三者之间的区别如下：

var - 函数作用域或全局作用域 let - 块级作用域 const - 块级作用域

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// var - 函数作用域或全局作用域
function varExample() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1 - var 在函数内是全局可见的
}

// let - 块级作用域
function letExample() {
  if (true) {
    let y = 2;
  }
  // console.log(y); // ReferenceError: y is not defined
}

// const - 块级作用域
function constExample() {
  if (true) {
    const z = 3;
  }
  // console.log(z); // ReferenceError: z is not defined
}

var - 变量可以提升(在变量声明前使用变量，变量的值为undefined。) let - 变量不能提升(在变量声明前使用变量，会报错。) const - 块级作用域提升(在变量声明前使用变量，会报错。)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// var - 变量可以提升
function varExample() {
  console.log(v); // undefined - var 变量可以提升
  var v = 5;
}

// let - 变量不能提升
function letExample() {
  // console.log(l); // ReferenceError: l is not defined
  let l = 10;
}

// const - 块级作用域提升
function constExample() {
  // console.log(z); // ReferenceError: z is not defined
  const z = 3;
}

var - 变量可以重新声明 let - 变量不能重新声明 const - 变量不能重新声明

示例： 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// var - 允许在同一作用域内重复声明
var name = "Alice";
var name = "Bob"; // 不会报错
console.log(name); // "Bob"

// let - 不允许在同一作用域内重复声明
let age = 25;
// let age = 30; // SyntaxError: Identifier 'age' has already been declared

// const - 不允许在同一作用域内重复声明
const city = "Beijing";
// const city = "Shanghai"; // SyntaxError: Identifier 'city' has already been declared

var - 变量可以重新赋值 let - 变量不能重新赋值 const - 变量不能重新赋值

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// var - 可以重新赋值
var score = 80;
score = 90; // 可以重新赋值
console.log(score); // 90

// let - 可以重新赋值
let count = 1;
count = 2; // 可以重新赋值
console.log(count); // 2

// const - 不能重新赋值基本类型
const PI = 3.14159;
// PI = 3.14; // TypeError: Assignment to constant variable

// 但可以修改对象或数组的内容
const person = { name: "Charlie", age: 30 };
person.name = "David"; // 这是可以的
person.job = "Developer"; // 这也是可以的
console.log(person); // { name: "David", age: 30, job: "Developer" }

var v = 5; let l = 10;

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

数据类型

JavaScript数据类型包含:数据类型、对象类型和空类型。其中:

  • 值类型:包括数值(Number)、字符串(String)、布尔型(Boolean)、对象(Object)、函数(Function)和符号(Symbo)6种。

  • 引用类型:包括、数组型(Array)、等。值类型在内存中直接存储值，引用类型在内存中存储的是指向值的指针。

  • 空类型:包括null和undefined。

变量类型

Javascript变量的类型在赋值时确定并且可以动态改变,例如： 

1
2
let a = 10; // a 是数值型
a = "hello"; // a 是字符串型

可以使用typeof运算符来检查变量的类型,例如： 

1
2
3
4
5
6
7
8
console.log(typeof 3.14); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof null); // "object"
console.log(typeof [1,2,3]); // "object"
console.log(typeof {name:"张三",age:25}); // "object"
console.log(typeof undefined); // "undefined"
console.log(typeof Symbol("sym1")); // "symbol"

运算符号

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

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

  • 算术运算符

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

  • 比较运算符

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

  • 逻辑运算符

    &&、||、！

逻辑控制语句

条件语句用于根据条件的真假来执行不同的代码块.

语法 

1
2
3
4
5
if(条件){
  //条件为true时执行的代码块;
}else{
  //条件为false时执行的代码块;
}

示例: 

1
2
3
4
5
6
7
let age = 25;
if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}
//输出: You are an adult

多分支语句用于根据表达式的值来执行不同的代码块.

语法 

 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
 8
 9
10
11
12
13
14
15
let day = "monday";
switch (day) {
  case "monday":
    console.log("It's Monday!");
    break;
  case "tuesday":
    console.log("It's Tuesday!");
    break;
  case "wednesday":
    console.log("It's Wednesday!");
    break;
  default:
    console.log("It's a weekday!");
}
//输出: It's Monday!

循环语句用于重复执行代码块，直到满足某个条件为止.

语法 

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

while(条件){
  语句集;
}

示例: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// for循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}
//输出: 0 1 2 3 4

// while循环
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}
//输出: 0 1 2 3 4

注释

注释用于解释代码，提高代码的可读性,但注释本身不是JavaScript代码,不会被浏览器执行。JavaScript支持两种注释：单行注释和多行注释。

单行注释

以 // 开始，以行末结束

示例： 

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

多行注释

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

示例： 

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

类型转换

JavaScript变量可以通过以下方式转换类型：

  • 显式类型转换:使用parseInt、parseFloat、Number等函数将字符串转换为数值型、浮点型或数值型等。

示例: 

1
2
3
4
5
let a = "10";
console.log(Number(a)); // 10
console.log(parseInt(a)); // 10
console.log(parseFloat(a)); // 10.0
console.log(String(parseFloat(a))); // "10.0"

  • 隐式类型转换:JavaScript会自动将不同类型的值进行比较或计算时，会将它们转换为数值型。

    示例: 

    1
2
3
    let a = "10";
let b = 20;
console.log(a + b); // 1020

函数

函数是JavaScript中的一段可重用代码块，用于执行特定任务。函数接受输入（参数），执行操作，并可能返回结果。

创建函数

函数声明是一种命名函数，它有一个正式的名称。

语法 

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

示例 

1
2
3
4
5
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World')); // 输出: Hello, World!

函数表达式是一种匿名函数，它没有正式的名称。

语法 

1
2
3
const 函数名 = function(参数1,参数2，… ){ 
  函数体; 
}

示例 

1
2
3
4
5
6
// 将函数赋值给变量
const add = function(a, b) {
  return a + b;
};

console.log(add(2, 3)); // 输出: 5

箭头函数是一种简洁的函数定义方式，它没有自己的this，而是继承了父作用域的this。

语法 

1
2
3
const 函数名 = (参数1,参数2，… ) => {
  函数体;
}

示例 

1
2
3
4
// 将函数赋值给变量
const add = (a, b) => a + b;

console.log(add(2, 3)); // 输出: 5

函数参数

函数参数是函数定义时使用的变量，用于接收调用函数时传递的值。

普通参数是函数定义时使用的变量，用于接收调用函数时传递的值。

语法 

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

示例 

1
2
3
4
5
function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 输出: 5

默认参数是函数定义时使用的变量，用于接收调用函数时传递的值，如果没有传递值，则使用默认值。。

语法 

1
2
3
function 函数名(参数1=默认值1, 参数2=默认值2, …){ 
  函数体; 
}

示例 

1
2
3
4
5
6
7
function add(a, b = 0) {
  return a + b;
}

console.log(add(2)); // 输出: 2
console.log(add(2, 3)); // 输出: 5
console.log(add(2, undefined)); // 输出: 2

剩余参数是函数定义时使用的变量，用于接收调用函数时传递的值，将所有传递的参数打包成一个数组。

语法 

1
2
3
function 函数名(参数1, 参数2, ...数组名){ 
  函数体; 
}

示例 

1
2
3
4
5
function add(a, b, ...args) {
  return a + b + args.reduce((sum, cur) => sum + cur, 0);
}

console.log(add(2, 3, 4, 5)); // 输出

返回值

函数可以返回一个值，用于调用函数时接收结果。

语法 

1
2
3
4
function 函数名(参数1,参数2，… ){ 
  函数体; 
  return 返回值;
}

示例 

1
2
3
4
5
function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 输出: 5

函数的作用域

函数的作用域是指在函数体中可以访问的变量。包含全局作用域和函数作用域。其中：

  • 全局作用域：在函数外部定义的变量，可以在任何函数中访问。
  • 函数作用域：在函数内部定义的变量，只能在函数内部访问。

语法 

1
2
3
4
5
const 全局变量 = '全局变量';
function 函数名(参数1,参数2，… ){ 
  const 局部变量 = '局部变量';
  ...; 
}

示例 

1
2
3
4
5
6
7
8
const globalVar = '全局变量';

function showHello() {
  const localVar = '局部变量';
  console.log(globalVar); //可访问全局变量
}

console.log(localVar); // 报错，局部变量只能在函数内部访问

this关键字

this关键字是指向调用函数的对象。不同的调用方式会导致this指向不同的对象。

示例 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
console.log(this); // 输出: Window {...}
const Person = function(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function() {
    console.log(this.name); //输出：name
  }
}

const p1 = new Person('张三', 25);
p1.sayName(); // 输出: 张三

调用函数

函数调用是指在程序中调用函数，执行函数体中的代码。

**语法**
```javascript linenums="1"
函数名(参数1,参数2，… );
```

事件

事件是指在程序中特定的时间点，用于触发特定的事件处理程序。

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

事件与处理程序绑定语法： 

1
事件名＝"函数名";

示例 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script type language="javascript">
  function greeting() {
    console.log('Hello, World!');
  }
  // 绑定事件
  document.getElementById('greetingButton1').onclick = greeting;
</script>
...
<button id="greetingButton1"">  Greeting1!  </button>
<button id="greetingButton2" onclick="greeting()">  Greeting2!  </button>

事件 触发时机
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>