JavaScript概述和基本语法

145 阅读6分钟

JavaScript概述

  • JavaScript(简称JS)是一种解释性的脚本语言(JS代码不需要编译),是Web前端设计开发的第三大核心技术,用于编写页面脚本,以实现对网页客户端行为的控制,为用户提供更流畅美观的浏览效果。
  • 目前的浏览器几乎都内嵌了JS引擎,用来执行客户端脚本。

1.JavaScript的组成

一个完整的JavaScript实现由以下3个不同部分组成:

  • 核心:ECMAScript(规定了JavaScript的核心语法)
  • 文档对象模型:DOM,Document Object Model(专门操作HTML元素、CSS样式及事件的统一标准)
  • 浏览器对象模型:BOM,Browser Object Model(专门操作浏览器窗口的工具,移动窗口、改变状态栏中的文本以及执行其他页面内容不直接相关的操作没有任何标准)

JavaScript中的常见问题:

  • JavaScript语言与Java语言:JavaScript中部分语言与命名规则借鉴自Java语言,但实际上,JavaScript的设计原则大量参考的是其他脚本语言,之所以命名为JavaScript,是当时网景公司为了营销考虑与SUN公司达成协议的结果。
  • JavaScript语言与JScript语言:在网景公司推出JavaScript语言后,微软公司推出了JScript语言,其功能与语法都与JavaScript语言类似,目前两者都遵循ECMA-262标准。
  • JavaScript语言编写的代码能不能独立运行:JavaScript是脚本语言,运行时需要存在宿主环境,即浏览器,故不能脱离浏览器环境运行。但微软公司推出的VBScript(类似JavaScript)既可在IE浏览器中运行,也可在Windows操作系统中运行,因为Windows操作系统也可作为VBScript的宿主,但其他浏览器并不支持VBScript。

2. JavaScript的特点

  • JavaScript是脚本语言:可以嵌入HTML文档中,解释执行,即浏览器读取一句代码,解释一句,执行一句,如果一条语句解释不了或执行不了,则下面的语句也无法继续执行。
  • JavaScript是轻量级的编程语言:规则比较简单,不是很严格,可以用比较简单语法来表示重量级语言所要表达的内容。
  • JavaScript是基于对象的语言:在 JavaScript 中,不会创建类,也不会通过类来创建对象,JavaScript 基于 prototype(原型),而不是基于类的。
  • JavaScript是一种基于事件驱动的语言:
    事件:指在页面中执行了某种操作所产生的动作。
    当事件发生后,浏览器可以“感知”到事件的发生,从而通过事件处理程序对该事件做出相应的响应。
  • JavaScript是一种安全性语言:不允许访问本地硬盘,更不能将数据直接存入服务器上,也不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而可以有效地防止数据丢失。

3. JavaScript的引用方式

(1)内联引用

方式:通过HTML标签中的事件属性引用
语法:

<标记名称  事件属性=“JavaScript脚本代码”></标记名称>

事件属性:onclick、ondbclick等

<form action="http://www.baidu.com">
	<input type="button" value="确定" onclick="alert('你单击了一个按钮');" />
</form>

(2)内部引用

方式:通过<script>标签及其相关属性可以直接嵌入JavaScript代码,当浏览器执行到<script>标签时,就解释执行其中的脚本。 语法:

<head>
	<script type=“text/javascript>
		脚本代码;
	</script>
</head>
<body>
	<script type=“text/javascript>
		脚本代码;
	</script>
</body>

type属性指定HTML文档引用的脚本语言类型,属性值为text/javascript时,表示<script>标签中包含的是JavaScript脚本。 <head></head> 标签里的是头脚本
<body></body> 标签里的是头脚本

(3)外部引用

方式:将脚本代码存放在一个扩展名为.js的文件中,在HTML中使用<script>标签外部引用该独立的JavaScript文件,将其加载到网页的任何地方,通常将<script>标签放在<head>标签中。
语法:

<head>
	<script type=“text/javascript“ src=“js文件的URL路径”>
	</script>
</head>
  • 所有<sript>标签都会按照它们在HTML中出现的先后顺序依次被解释执行,默认情况下,只有在解释执行完前面<script>标签中的代码之后,才会开始解释执行后面的<script>标签中的代码。
  • 默认情况下,所有的<script>标签都应该放在页面头部<head>标签中,这样就可以把所有外部文件的引用都放在相同的地方。但是,在文档<head>标签中包含所有JavaScript文件,意味着必须等到全部JavaScript代码被下载、解释和执行完以后,才能开始呈现页面的内容。如果页面需要很多的JavaScript代码,无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口将是一片空白。
  • 为了避免延迟问题,现代Web应用程序一般都会把全部JavaScript引用放在<body>标签中页面内容的后面。这样,在解析包含的JavaScript代码之前,页面的内容将完全成现在浏览器中,同时会感到打开页面的速度加快了。

JavaScript的基本语法

1. 基本词法

(1)字符编码

  • JavaScript程序使用Unicode字符集编写,Unicode字符集中每个字符使用两个字节表示,因此用户可以使用中文名命名JavaScript变量,但考虑JavaScript版本兼容性,以及开发习惯,不建议使用汉字命名变量名或函数名。
  • 由于JavaScript脚本一般嵌入在HTML网页中,并最终由浏览器来解释,因此一般建议保持页面字符编码与JavaScript编码一致,以免出现乱码。

(2)标识符

  • 字母、数字、下划线、美元符号组成,在ECMAScript v3中,用户可以使用完整的Unicode字符集来命名标识符,但是不建议使用。
  • 第一个字符不能是数字,可以是字母,也可以是下划线或美元符号$(不推荐)。
  • 标识符不能与JavaScript关键字或保留字同名。
  • JavaScript严格区分大小写

(3)关键字和保留字

关键字:具有特殊用途的标识符,可用于表示控制语句的开始或结束,或者执行特定操作。

1.png
保留字:目前还没有任何特定的用途,但是它们有可能在将来的版本中被用作关键字,如ECMAScript3

2.png

(4)直接量

直接量是在程序中直接显示出来的值

  • 字符串:使用单引号或双引号界定起来的一个或者多个字符
  • 数值:可以是十进制、八进制和十六进制表示的整数,也可以是由整数部分加小数部分表示的浮点型数值
  • 布尔值:使用true表示真值,false表示假值
  • 空值:null
  • 数组初始化值、对象初始化值、正则表达式等 例:
“字符串直接量”
123
23.56
true
null
[1,2]  //数组初始化

(5)注释

单行注释:“//”
多行注释:“/*” “ */”

2. 变量

(1)变量声明

语法:使用var语句

	var 变量名1,变量名2,…,变量名n;

注意
可在声明中为变量赋值,未赋值的变量,初始值为undefined值
例:

var a;
var  b=1;

在JavaScript中,可以重复声明同一个变量,也可以反复初始化变量的值

var a=1;
var a=2;
var a=3;
alert(a);

因为JavaScript解释器能够自动隐式声明变量,因此JavaScript允许用户不声明变量,而直接为变量赋值,此时会将该变量视为全局变量,函数外代码可以访问该变量。
例:

function f(){
	x=2;
	var y=3;
}
f();
alert(x);
alert(y); //提示语法错误,找不到该变量

Var语句不能在while循环、do…while()循环或条件结构的条件表达式中使用,但可以在for循环的条件表达式中使用。

do{
	alert(i);
}while(var i=0);  /*语法错误*/
if(var i=false){  /*语法错误*/
	alert(i);
}
for(var i=0;i<10;i++){
	alert(i);
}

(2)变量的作用域

全局变量:指变量在整个页面脚本中都是可见的,可以自由访问

  • 在所有函数外使用var语句声明的变量
  • 直接使用未经声明的变量,此为隐式的全局变量
  • 直接添加一个属性到全局对象,全局对象是所有全局变量的容器,在Web浏览器中,全局对象名为window。 window.f=‘value’;
  • 局部变量:指变量仅能在声明的函数内部可见,函数外不允许被访问

3. 数据类型

JavaScript是弱类型语言,对于数据类型的规范比较松散,具体表现为:

  • 分类简单,且不明确细分
  • 声明变量时,不用指定数据类型
  • 使用不严格,可根据需要自动转换数据类型
  • 数据类型检查比较简单,也比较混乱
  • 通过typeof运算符typeof()函数均可获得变量的当前数据类型。

JavaScript的基本数据类型:

数据类型说明
number数值(整数、小数)
string字符串(用一对双引号括起来的若干字符)
boolean布尔值(true(真)和false(假))
undefined未定义(未初始化的变量及未声明的变量)
null空值,表示不存在
object对象

例:以字符串形式返回数据的数据类型

<script>
	document.write(typeof 1);     /*number*/
	document.write(typeof 1.5);   /*number*/
	document.write(typeof "1");   /*string*/
	document.write(typeof true);  /*boolean*/
	document.write(typeof {});    /*object*/
	document.write(typeof []);    /*object*/
	document.write(typeof null);  /*object*/
	document.write(typeof undefined);/*undefined*/
</script>

4. 运算符

JavaScript算术运算符

3.png

JavaScript比较运算符

4.png

JavaScript比较运算符

5.png

JavaScript字符串运算符

6.png

JavaScript赋值运算符

7.png

条件运算符:

布尔表达式?表达式1:表达式2。

8.png

运算符优先级

9.png 优先级相同的运算符,除了求反、逻辑非、递增、递减、条件、赋值是按照右结合性进行计算以外,其它的都是按照从左到右的顺序进行计算。当然,最好还是根据需要使用括号来对求值顺序进行改变。

5. 程序流程控制语句

(1)分支语句

条件语句

if(表达式1) 
    {  若干语句}

switch语句

switch(表达式)
{
       case  常量值1:
                    若干个语句
                     break;
       …  …   …
       case  常量值n:
                   若干个语句
                    breakdefault:
                   若干语句
}

(2)循环语句

while循环

      	while(表达式)
   	{ 若干语句;}  

do while循环

	do 	
	{ 若干语句;
	} while(表达式);

for循环

	for (表达式1;表达式2;表达式3)
	{ 若干语句 ;    }

(3)跳转语句

break语句

在switch多分支语句和循环语句中都可以使用break语句,作用是终止某个分支并跳出switch结构,或者结束整个循环过程,跳出循环结构,不再判断循环条件是否成立。

continue语句

continue语句是用来终止当前循环体,执行下一次循环。

6. 异常处理语句

try
{
  语句块;}      /*try子句指明可能产生异常的代码段*/
catch(异常类型1     异常对象1)
{
  异常处理语句块1;}   /*捕获到异常并进行处理的代码*/
catch(异常类型2     异常对象2)
{
  异常处理语句块2;}
...
finally
{
  异常处理结束前的语句块;}  /*最后必须执行的代码,无论是否捕获到异常*/

7. 函数

  • 通常,在JavaScript程序开发中,会根据所要完成的功能,将程序划分为一些相对独立的部分,每一部分编写成一个函数,从而将程序代码模块化,使得各部分相互独立、任务单一、结构清晰、提高程序的可读性,并且便于后期维护。
  • 函数,就是在计算机程序中由一系列语句构成逻辑单元,是为了完成某个可以重复使用的特定功能。在JavaScript中,创建函数的最常用的两个方法是函数声明函数表达式

函数声明

function 函数名(参数列表){
	函数体;
	return 表达式;
}

function:关键字,必须小写
函数名:唯一,区分大小写
参数列表:形参,不指定类型,函数调用时接收实参传递过来的值
函数体:实现特定功能的0条或多条语句构成。
return 表达式:若函数有返回值,必须使用return语句将值返回

函数的调用

函数名(实参列表);

函数名:已定义函数的名称
实参列表:函数调用时,由实参向对应形参传递数据。

函数表达式

如果函数定义作为赋值表达式的一部分,那它就是一个函数表达式

//函数表达式用来求传入参数的平方,并将其赋值给变量sq
var sq=function square(x){
	return x*x;
}

var sq=function(x){
	return x*x;
}

以表达式方式定义的函数,函数名称为可省略,此时为匿名函数,此种定义方式适合只被调用一次的函数,需多次被调用的函数仍需命名。