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中也有许多关键字，列出下表，以供查看。

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的关键字不能用作变量名、函数名以及循环标签。 

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.转义字符

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

JavaScript常用的转义字符

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

        实操：使用转义字符 \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 中的赋值运算符可分为简单运算符和复合运算符。简单运算符是将赋值运算符（ = ）右边表达式的值保存到左边的变量中；而复合运算符混合了其他加减乘除之类的操作再赋值给左侧变量。

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

        （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。

JavaScript 中的比较运算符

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

        （4）逻辑运算符

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

JavaScript 中的逻辑运算符

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

        （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的基础要点，供回顾时使用，有补充或者指正的地方，欢迎在评论区中留言。