JavaScript 概述

JavaScript(简称“JS”) 是一种具有函数优先的轻量级解释型即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象命令式声明式函数式编程范式。 

JavaScript 在1995年由 Netscape 公司的 Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作,Netscape 管理层希望它外观看起来像 Java,因此取名为 JavaScript。

JavaScript 的标准是 ECMAScript 。截至 2012 年,所有浏览器都完整的支持 ECMAScript 5.1,旧版本的浏览器至少支持 ECMAScript 3 标准。2015年6月17日,ECMA 国际组织发布了 ECMAScript 的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为 ECMAScript 6 或者 ES2015。

JavaScript 目前是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

简介

JavaScript 是什么

  • JavaScript 是脚本语言。
  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入到 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
  • JavaScript 很容易学习,语法简单,弱语法规则语言。
  • JavaScript 区分大小写。

JavaScript 能做什么

  • 能够动态生成 HTML 页面。
  • 能够对事件进行处理。
  • 能够动态改变 HTML 内容。
  • 能够动态改变 HTML 样式。
  • 能够进行数据校验。

JavaScript 的用法

HTML 中的 Javascript 脚本代码必须位于 标签之间。 会告诉 JavaScript 在何处开始和结束。

之间的代码行包含了 JavaScript:

JavaScript 变量

JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

  • 变量必须以字母开头。
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)。
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)。

语法

let 变量名 [= 值];

let 用来声明变量。它的用法类似于 var ,ES6 新增的命令,但是所声明的变量,只在 let 命令所在的代码块内有效。 

var 和 let 的区别:

  1. 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
  2. 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
  3. let 不允许在相同作用域内,重复声明同一个变量。
{
  let a = 1;
  var b = 1;
}
a // Uncaught ReferenceError: a is not defined
b // 1

变量的命名规范

  • 由字母( A - Za - z )、数字(0-9)、下划线(_)、美元符号($)组成,如: usrAge ,num01,_ name。
  • 严格区分大小写。 var app ;和 var App ;是两个变量。
  • 不能以数字开头。18age是错误的。
  • 不能是关键字、保留字。例如: var 、 for 、 while
  • 变量名必须有意义。
  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 

JavaScript 数据类型 

变量是用来存储值的所在处,它们有名字数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。

JavaScript 包括九种数据类型:

  • Undefined;
  • Null;
  • Boolean;
  • Number;
  • String;
  • Symbol类型;
  • Object;
  • Array;
  • Function。

其中,Undefined 类型只有一个值,即特殊值 undefined。在使用 let|var 声明变量,但未对其加以初始化时,这个变量值就是 undefined。

symbol 是一种基本数据类型 (primitive data type)。Symbol() 函数会返回 symbol 类型的值,该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象;它的静态方法会暴露全局的 symbol 注册,且类似于内建对象类,但作为构造函数来说它并不完整,因为它不支持语法:"new Symbol()"。


const symbol1 = Symbol();
const symbol2 = Symbol('foo');

运算符

运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算。例如:2+3,其操作数是2和3,而运算符则是“+”。运算符大致可以分为4种类型:算术运算符、关系运算符、赋值运算符和逻辑运算符。 

赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

运算符 例子 等同于 运算结果
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

算术运算符

算术运算符用于变量之间的数学运算。

运算符 描述 例子 x 运算结果 y 运算结果
+ 加法 x=y+2 7 5
- 减法 x=y-2 3 5
* 乘法 x=y*2 10 5
/ 除法 x=y/2 2.5 5
% 取模(余数) x=y%2 1 5
++ 自增 x=++y 6 6
x=y++ 5 6
-- 自减 x=--y 4 4
x=y-- 5 4

关系运算符

比较运算符在逻辑语句中使用,以测定变量或值是否相等。

运算符 描述 比较 返回值
== 等于 x==8 false
x==5 true
=== 绝对等于(值和类型均相等) x==="5" false
x===5 true
!=  不等于 x!=8 true
!==  不绝对等于(值和类型有一个不相等,或两个都不相等) x!=="5" true
x!==5 false
>  大于 x>8 false
<  小于 x<8 true
>=  大于或等于 x>=8 false
<=  小于或等于 x<=8 true

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

运算符 描述 例子
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数语法

function 函数名(形式参数列表){
    // 执行代码
    [return 返回结果;]
}
  • JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。
  • 函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
  • 圆括号可包括由逗号分隔的参数:(参数 1, 参数 2, ...)。
  • 由函数执行的代码被放置在花括号中:{}。
  • 函数可以有返回结果,如果有返回结果,必须在逻辑体的最后一行。

函数调用

函数中的代码将在其他代码调用该函数时执行:

  • 通过事件调用方式,当某个事件发生时。
  • 其他函数的调用,JavaScript 代码调用方式。
  • 递归调用方式,自身调用。

局部变量和全局变量

  • 局部 JavaScript 变量
    • 在 JavaScript 函数内部声明的变量是局部变量,所以只能在函数内部访问它。该变量的作用域是局部的。
    • 您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
    • 只要函数运行完毕,局部变量就会被删除。
  • 全局 JavaScript 变量
    • 在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
    • 全局变量会在页面关闭后被删除。

匿名函数

匿名函数就是没有名字的函数,有时候也称为《 拉姆达函数》。

function(形式参数列表) {
 
 // 函数体
 
}

上面函数就是匿名函数,但是这个函数却无法调用,因为没有指向这个函数的指针(名称),但是可以将这个函数作为参数传入另外一个函数,或者从一个函数中返回另一个函数时就可以使用这种形式来定义匿名函数。

function funA(){
    let num = function(){
        return 1;
    }
}

事件

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

往往我们可以通过“事件”来触发我们书写的函数。

HTML 事件

HTML 事件可以是浏览器行为,也可以是用户行为。

以下是 HTML 事件的实例:

  • HTML 页面完成加载。
  • HTML input 字段改变时。
  • HTML 按钮被点击。
  • HTML 鼠标移动到某个图片。

通常情况下,当事件发生时,你可以做哪些事情,这些事情基本都是我们书写的函数。

事件的书写

事件中直接书写代码

...

注意:直接书写通常是几行代码。比较常见的是通过函数或 JavaScript 事件方式来调用。 

事件中调用函数

...

JavaScript 事件方式

window.事件= funA;

注意:funA 事件也可以书写成匿名事件方式。 

常见的事件

下面是一些常见的HTML事件的列表:

事件 描述
onblur 当元素失去焦点时发生此事件。
onfocus 在元素获得焦点时发生此事件。
onchange HTML 元素改变。
onclick 用户点击 HTML 元素。
ondblclick 当用户双击元素时发生此事件。
onmouseover 鼠标指针移动到指定的元素上时发生。
onmouseout 用户从一个 HTML 元素上移开鼠标时发生。
onkeydown 用户按下键盘按键。
onload 浏览器已完成页面的加载。
oninput 当元素获得用户输入时,发生此事件。
onselect 用户选择文本后(对于