JavaScript语言基础知识

文章目录

• 前言
• 一、JavaScript语言是什么？
• 二、基础知识
  • 1.语法
  • 2.关键字
  • 3.数据类型
  • 4.变量定义及其使用
  • 5.运算符的使用
• 总结

---

前言

JavaScript是Web页面中一种比较流行的脚本语言，它通过客户端浏览器解释执行，可以应用在JSP、PHP、ASP等网站中。随着Ajax进入Web开发的主流市场，熟练掌握并应用JavaScript对网站开发人员来说非常重要。该文介绍一下JavaScript的基础知识，便于回顾。

---

一、JavaScript语言是什么？

JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本语言，在Web应用中得到了广泛应用。该语言不需要编译，直接嵌入在HTTP页面中，将静态页面转变成支持用户交互并响应应用实践的动态页面。

在JavaWeb程序中，经常应用JavaScript进行数据验证、控制浏览器以及生成时钟、日历和时间戳文档等。

JavaScript语言有以下几种特点：

第一，解释性：作为脚本语言，通过嵌入程序段的方法实现编程，对于程序进行解释性编程。

第二，基于对象：该语言可以使用自己创建的对象，许多功能来自于脚本环境中对象的方法与脚本的相互作用。

第三，事件驱动：该语言可以以事件驱动的方式直接对客户端的输入做出响应，无需经过服务器端程序。

第四，安全性：该语言具有安全性，不允许访问本地硬盘，不能将数据写入服务器，并且不允许对网络文档进行修改和删除。

第五，跨平台性：该语言依赖于浏览器本身，和操作系统无关，只要浏览器支持JavaScript，那它的代码就能正常运行。

二、基础知识

1.语法

（1）JavaScript语言区分大小写

JavaScript区分大小写，这点和java是一致的。

<script>
    var username;
    var userName;
</script>

usename 和 useName 这两个是不同的变量。

（2）每行结尾的分号可有可无

虽然是可以不写分号的，但最好养成写分号结尾的习惯。

（3）变量是弱类型的

JavaScript的变量是弱类型的。意思是，在定义变量时，只使用 var 运算符，就可以将变量初始化为任意类型的值。

<script>
    var username = 1024;
    username = "字符串";
</script>

和java不同，使用 var 关键字定义的变量，数据类型根据赋值的数据来决定，可以是数字，然后重新赋值成字符串也许。

（4）使用大括号标记代码块

JavaScript使用一对大括号来标记代码块，被封装在大括号内的语句将按照逐行往下的顺序执行代码。

<script>
    function greet() {
        alert("Hello, World!");
    }
</script>

如上，我们写的函数，代码都在大括号中，和java一样。

（5）注释

JavaScript提供了两种注释，即单行注释和多行注释。

<script>
    //这是一条单行注释

    /* 你
       看
       我
       像不像
       多行注释啊
    */
</script>

单行注释使用双斜线"//"开头；多行注释使用" /* "开头，" */ "结尾，中间的内容为注释。

2.关键字

和Java语言一样，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 中的关键字]

同理，JavaScript的关键字不能用作变量名、函数名以及循环标签。

3.数据类型

1.数值型

（1）整型

JavaScript 的整型数据可以为正整数、负整数和0，并且可以通过十进制、八进制或十六进制来表示。

<script>
    var value1 = 1024;
    var value2 = -0404;
    var value3 = 0x999B;
</script>

以 0 开头的数是八进制数，以 0x 开头的数为十六进制数。

（2） 浮点型

浮点数有小数部分，只能通过十进制，科学记数法、或标准方法来表示。

<script>
    var value1 = 3.1415926;
    var value2 = 3.14*Math.pow(10, -3);
    var value3 = Math.PI;
</script>

2.字符型

字符型数据是使用单引号或双引号括起来的一个或多个字符。该语言中，单引号字符和双引号字符本质上没有任何区别。

（1）单引号

<script>
    var value1 = 'a';
    var value2 = 'abcdefg';
</script>

JavaScript 没有 char 数据类型，要表示单个字符，必须使用长度为 1 的字符串。

（2）双引号

<script>
    var value1 = "a";
    var value2 = "abcdefg";
</script>

3.布尔型

布尔型数据也只有两个值，即 true 或 false ，主要来描述一种状态。在JavaScript中，可以使用整数 0 表示 false，使用非 0 的整数表示 true 。

<script>
    var value1 = true;
    var value2 = false;
</script>

4.转义字符

以反斜杠开头的不可显示的特殊字符通常称为转义字符。通过转义字符可以在字符串中添加不可显示的特殊字符，或者防止引号匹配混乱的问题。

|---------|----------------------------|
| 转义字符 | 描述 |
| \b | 退格 |
| \f | 换页 |
| \r | 回车键 |
| \" | 双引号 |
| \xnn | 十六进制代码 nn 表示的字符 |
| \0nnn | 八进制代码 nnn 表示的字符 |
| \n | 换行 |
| \t | Tab符 |
| \' | 单引号 |
| \\ | 反斜杠 |
| \unnnn | 十六进制代码 nnnn 表示的 Unicode 字符 |
[JavaScript常用的转义字符]

**实操：**使用转义字符 \r 来做个网页欢迎提醒。

<script>
    alert("欢迎点开该网址！\r 您是我们今日访问的第 888 位用户！");
</script>

运行结果：

在"docunmet.writeln();"语句中使用转义字符时，只有将其放在格式化文本块中才会起到作用，所有输出的带转义字符的内容必须在<pre>和</pre>标记内。

5.空值

JavaScript 中有一个空值（ null ），用于定义空的或不存在的引用。当调用一个没有定义数值的变量，则会返回一个 null 值。

<script>
    var value;
    var value2 = null;
</script>

空值不等于空的字符串（ " " ）或 0。

6.未定义值

当使用了一个并未声明变量，或者使用了一个已经声明但没有赋值的变量时，将返回未定义值（ undefined ）。

（1）声明变量未赋值

<script>
    let age; // 声明了一个变量 age
    console.log(age); // 输出: undefined
</script>

（2） 使用了一个没有声明过的变量

<script>
    console.log(name); 
    // 抛出 ReferenceError: name is not defined
</script>

JavaScript中还有一种特殊类型的数字常量 NaN，即 "非数字"。当程序中由于BUG发生计算错误，产生了一个没有意义的数字，此时JavaScript返回的数字值就是 NaN。

4.变量定义及其使用

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

1.变量的命名规则

（1）变量名可以由字母、数字或下划线组成，但必须是字母或下划线开头。

（2）变量名中不能由空格、加号、减号、或逗号等乱七八糟的符号。

（3）不能使用 JavaScript 中的关键字

（4）JavaScript 的变量名是严格区分大小写的。

2.变量的声明

在 JavaScript 中，可以使用关键字 var 声明变量，语法格式如下：

var value;

在声明变量时需要遵守以下规则：

（1）可以使用一个 var 关键字来同时声明多个变量。

var id,name,age,gender;

（2）可以在声明变量的同时对其赋值。

var id = 101, name = "小王", age = 24, gender = '男';

（3）声明了变量，未赋值，默认值为 undefined。

var value; //value值为undefined

（5）函数内部创建的变量是局部的。

（6）声明变量时，变量的类型会根据变量的值来决定。

3.变量的作用域

变量的作用域是指变量在程序中的有效范围。根据变量的作用域可以将变量分为全局变量和局部变量两种。全局变量定义在所有函数之外，作用于整个脚本代码的变量；局部变量是定义在函数体内，只作用于函数体内的变量。

**实操：**点开网站时，显示登录的用户名，以及登录时间。

<script>
    var username = "MOSS";
    function  log(){
        var date = new Date;
        alert("登录用户名："+username+"\r 登录时间："+date);
    }
    new log();
</script>

这串代码中 username 是全局变量；date 是局部变量。

运行结果：

5.运算符的使用

运算符是用于完成计算或者比较数据等一系列操作的符号。常用的 JavaScript 运算符按照类型分有 6 种。

（1）赋值运算符

JavaScript 中的赋值运算符可分为简单运算符和复合运算符。简单运算符是将赋值运算符（ = ）右边表达式的值保存到左边的变量中；而复合运算符混合了其他加减乘除之类的操作再赋值给左侧变量。

|-----|------------------------------|----------------------|
| 运算符 | 功能描述 | 示例 |
| = | 将右边表达式的值赋给左边的变量 | username = "MOSS" |
| += | 左边变量的值 + 右边变量的值的结果赋值给左边变量对象 | a+=b //相当于 a = a+b |
| -= | 左边变量的值 - 右边变量的值的结果赋值给左边变量对象 | a-=b //相当于 a = a-b |
| *= | 左边变量的值 * 右边变量的值的结果赋值给左边变量对象 | a*=b //相当于 a = a*b |
| /= | 左边变量的值 / 右边变量的值的结果赋值给左边变量对象 | a/=b //相当于 a = a/b |
| %= | 左边变量的值 % 右边变量的值的结果赋值给左边变量对象 | a%=b //相当于 a = a%b |
| &= | 左边变量的值 & 右边变量的值的结果赋值给左边变量对象 | a&=b //相当于 a = a&b |
| |= | 左边变量的值 | 右边变量的值的结果赋值给左边变量对象 | a|=b //相当于 a = a|b |
| ^= | 左边变量的值 ^ 右边变量的值的结果赋值给左边变量对象 | a^=b //相当于 a = a^b |
[JavaScript 中的赋值运算符]

（2）算术运算符

算术运算符用于在程序中进行加减乘除等运算。

|-----|-------|
| 运算符 | 功能描述 |
| + | 加运算符 |
| - | 减运算符 |
| * | 乘运算符 |
| / | 除运算符 |
| % | 取余运算符 |
| ++ | 自增运算符 |
| -- | 自减运算符 |
[JavaScript 中的算术运算符]

i = 1; j = i++; // j=1，i = 2

i = 1; j = ++i; // j=2，i = 2 自减同理

执行除法运算时，若 0 为除数，返回结果为 Infinity。

**实操：**使用算术运算符，在页面中汇总网站目前的浏览量。

<script>
    var Monday_log = 4123;
    var Tuesday_log = 3123;
    var Wednesday_log = 1233;
    var PV = Monday_log+Tuesday_log+Wednesday_log;
    alert("本周网站目前浏览量为："+PV);
</script>

运行结果：

（3）比较运算符

比较运算符的基本操作：先对操作数进行比较，这个操作数可以是数字也可以是字符串，饭后返回一个布尔值 true 或 false。

|-----|------------------------|-----------------------|
| 运算符 | 功能描述 | 示例 |
| < | 小于 | 520 < 1314 返回 true |
| > | 大于 | 250 > 521 返回 false |
| <= | 小于等于 | |
| >= | 大于等于 | |
| == | 等于，只根据表面值进行判断，不涉及数据类型 | "123" == 123 返回true |
| === | 绝对等于。根据表面值和数据类型同时进行判断 | "123" === 123 返回false |
| != | 不等于。只根据表面值进行判断，不涉及数据类型 | "123" != 123 返回false |
| !== | 绝对不等于。根据表面值和数据类型同时进行判断 | "123" !== 123 返回true |
[JavaScript 中的比较运算符]

（4）逻辑运算符

逻辑运算符通常于比较运算符一起使用，用于表达复杂的比较运算，常用于 if、while 和 for 语句中，其返回值为一个布尔值。

|------|-----------------------------------|------------------------|
| 运算符 | 功能描述 | 示例 |
| ! | 逻辑非。否定条件，即 !假=真 | !true //值为false |
| && | 逻辑与。只有当两个操作数的值都为 true 时，值才为 true。 | true&&true //值为true |
| || | 逻辑或。只要两个操作数中之一为 true，值才为 true | true||false //值为true |
[JavaScript 中的逻辑运算符]

（5）条件运算符

条件运算符是 JavaScript 支持的一种特殊的三目运算符，语法格式如下：

操作数?结果1:结果2

如果操作数的值为true，则整个表达式的结果返回"结果1"，是false，则返回"结果2"。

**实操：**利用该条件表达式，让任意对比的两个数，返回值都是最小的。

 <script>
    var a = 20;
    var b = 27;
    var result = a<b?a:b;
    alert("显示反馈结果"+result);
</script>

运行结果：

（6）字符串运算符

字符串运算符是用于两个字符型数据之间的运算符。

+运算符用于连接两个字符串。+=运算符则是连接两个字符串，并将结果赋值给第一个字符串

实操：

<script>
    var a = "Hellow"+" world!";
    var value = "\r你好，世界！";
    a+=value;
    alert(a);
</script>

运行结果：

---

总结

以上就是JavaScript的基础内容了。本文简单罗列了JavaScript的基础要点，供回顾时使用，有补充或者指正的地方，欢迎在评论区中留言。