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、笔记本电脑、平板电脑和智能手机等设备。
HTML 中的 Javascript 脚本代码必须位于 标签之间。 会告诉 JavaScript 在何处开始和结束。
之间的代码行包含了 JavaScript:
JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
let 变量名 [= 值];
let 用来声明变量。它的用法类似于 var ,ES6 新增的命令,但是所声明的变量,只在 let 命令所在的代码块内有效。
var 和 let 的区别:
- 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
- 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
- let 不允许在相同作用域内,重复声明同一个变量。
{ let a = 1; var b = 1; } a // Uncaught ReferenceError: a is not defined b // 1
变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。
JavaScript 包括九种数据类型:
其中,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 返回结果;]
}
函数中的代码将在其他代码调用该函数时执行:
匿名函数就是没有名字的函数,有时候也称为《 拉姆达函数》。
function(形式参数列表) {
// 函数体
}
上面函数就是匿名函数,但是这个函数却无法调用,因为没有指向这个函数的指针(名称),但是可以将这个函数作为参数传入另外一个函数,或者从一个函数中返回另一个函数时就可以使用这种形式来定义匿名函数。
function funA(){
let num = function(){
return 1;
}
}
HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
往往我们可以通过“事件”来触发我们书写的函数。
HTML 事件可以是浏览器行为,也可以是用户行为。
以下是 HTML 事件的实例:
通常情况下,当事件发生时,你可以做哪些事情,这些事情基本都是我们书写的函数。
事件中直接书写代码
...
注意:直接书写通常是几行代码。比较常见的是通过函数或 JavaScript 事件方式来调用。
事件中调用函数
...
JavaScript 事件方式
window.事件= funA;
注意:funA 事件也可以书写成匿名事件方式。
下面是一些常见的HTML事件的列表:
事件 | 描述 |
---|---|
onblur | 当元素失去焦点时发生此事件。 |
onfocus | 在元素获得焦点时发生此事件。 |
onchange | HTML 元素改变。 |
onclick | 用户点击 HTML 元素。 |
ondblclick | 当用户双击元素时发生此事件。 |
onmouseover | 鼠标指针移动到指定的元素上时发生。 |
onmouseout | 用户从一个 HTML 元素上移开鼠标时发生。 |
onkeydown | 用户按下键盘按键。 |
onload | 浏览器已完成页面的加载。 |
oninput | 当元素获得用户输入时,发生此事件。 |
onselect | 用户选择文本后(对于和 |
onsubmit | 在提交表单时发生此事件。 |
事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:
可以使用多种方法来执行 JavaScript 事件代码:
JavaScript 的分支和循环同 Java 的比较相似。
条件语句用于基于不同的条件来执行不同的动作。通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中,我们可使用以下条件语句:
如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。
和 Java 一样,在 JavaScript 中也有如下循环语句:
在循环中也可以书写如下两个关键字来结束循环:
JavaScript 字符串用于存储和处理文本。字符串可以存储一系列字符,如 "Guan Wei"。字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号。
let str = "Guan Wei";
字符串的定义有如下三种方式:
let str1 = "Guan Wei";
let str2 = 'Guan Wei';
let str3 = new String('Guan Wei');
注意:一般我们推荐使用第二种方式。
字符串也可以看成是字符数组,你可以使用索引位置来访问字符串中的每个字符。
例如:
let str = 'Guan Wei';
let ch = str[2];
字符串的索引从 0 开始,这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推,我们这里会获取到 a。
由于字符串必须由引号包围,JavaScript 会误解这段字符串:
var y = "中国是瓷器的故乡,因此 china 与"China(中国)"同名。"
该字符串将被切为 "中国是瓷器的故乡,因此 china 与"。
避免此问题的解决方法是,使用 \ 转义字符。反斜杠转义字符把特殊字符转换为字符串字符。
常见的转义字符有:
代码 | 输出 |
---|---|
\' | 单引号 |
\" | 双引号 |
\\ | 反斜杠 |
\n | 换行 |
\r | 回车 |
\t | tab(制表符) |
\b | 退格符 |
\f | 换页符 |
注意:最后五个个转义字符最初设计用于控制打字机、电传打字机和传真机。它们在 HTML 中没有任何意义。
字符串属性
属性 | 描述 |
---|---|
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
字符串常见方法:
方法 | 描述 |
---|---|
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将 Unicode 转换为字符串 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
在 JavaScript 中字符串和数字之间不能通用。
function funA(){
let a = '10';
let b = 1;
// 结果是 101
console.log(a + b);
}
从这里可以看到, `a + b` 是在做拼接,而不是求和。那么这里,我们就会涉及到一个问题,字符串和数字如何类型转换:
字符串转换数字:
let a = '101';
let a1 = parseInt(a,10);
let a2 = parseFloat(a);
数字转换字符串:
let a = 109;
let a1 = a + '';
JavaScript 数组用于在单一变量中存储多个值。
数组是一种特殊的变量,它能够一次存放一个以上的值,并且可以通过引用索引号来访问这些值。
数组的定义主要有两种写法:
let array = [数组元素,数组元素,...,数组元素];
let array = new Array(数组元素,数组元素,...,数组元素);
注意:出于简洁、可读性和执行速度的考虑,请使用第一种方法。
我们通过引用索引号(下标号)来引用某个数组元素。
let array = [21,22,23,24];
array[1] = 29;
let a = array[3];
属性 | 描述 |
---|---|
constructor | 返回创建数组对象的原型函数。 |
length | 设置或返回数组元素的个数。 |
prototype | 允许你向数组对象添加属性或方法。 |
方法 | 描述 |
---|---|
concat() | 连接两个或更多的数组,并返回结果。 |
includes() | 判断一个数组是否包含一个指定的值。 |
indexOf() | 搜索数组中的元素,并返回它所在的位置。 |
isArray() | 判断对象是否为数组。 |
lastIndexOf() | 搜索数组中的元素,并返回它最后出现的位置。 |
pop() | 删除数组的最后一个元素并返回删除的元素。 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度。 |
reverse() | 反转数组的元素顺序。 |
shift() | 删除并返回数组的第一个元素。 |
slice() | 选取数组的一部分,并返回一个新数组。 |
sort() | 对数组的元素进行排序。 |
splice() | 从数组中添加或删除元素。 |
toString() | 把数组转换为字符串,并返回结果。 |
unshift() | 向数组的开头添加一个或更多元素,并返回新的长度。 |
valueOf() | 返回数组对象的原始值。 |
Array.of() | 将一组值转换为数组。 |
let array = ['aa','bb','cc','dd','ee','ff'];
// 数组中添加元素
array[6] = 'gg';
array.push('hh');
array.unshift('ii');
// 删除数组中的元素
array.splice(3,1); // 从第几个开始删除,删除几个
array.pop();
array.shift();
// 数组排序
array.sort();
JavaScript 中遍历数组的方法:
使用 for 循环语句
let array = ['aa','bb','cc','dd','ee','ff'];
for (let i = 0; i < array.length; i++) {
console.log(array [i]);
}
使用 forEach() 方法调用回调函数
使用 map() 方法调用回调函数
使用“for..in”循环语句
for…in 循环可用于循环对象和数组。推荐用于循环对象,也可以用来遍历 json。
使用“for…of”循环语句
可循环数组和对象,推荐用于遍历数组。
sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。
注意: 当数字是按字母顺序排列时"40"将排在"5"前面。因为“40”中的"4"小于“5”。使用数字排序,你必须通过一个函数作为参数来调用。
array.sort((a, b) => {
return a - b;
});
在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:
元素节点是 DOM 对象中最常用的一种节点。下边我们主要通过三种方式获取 DOM 元素节点:
1. 通过 ID 获取元素节点:
let obj = document.getElementById('s1');
2. 通过 class 获取一组元素节点:
let classArray = document.getElementsByClassName('c1');
3. 通过 element 获取一组元素节点:
let spanArray = document.getElementsByTagName('span');
对于元素节点而言,主要有五种常见操作:
1. 元素节点的文本内容操作:
let obj = document.getElementById('s1');
obj.innerHTML = '设置编号为s1的标签元素内容';
let content = obj.innerHTML;
2. 元素节点的子元素操作:
let obj = document.getElementById('s1');
obj.innerText= '设置编号为s1的标签文本内容';
let content = obj.innerText;
3. 元素节点的属性操作:
let obj = document.getElementById('a1');
obj.href = 'https://blog.csdn.net/Dailyblue';
let yourHref = obj.href;
4. 元素节点的样式操作:
/*
element.style.css = '样式内容';
let 样式内容 = element.style.css;
*/
let obj = document.getElementById('b1');
obj.style.color = 'red';
let yourColor = obj.style.color;
5. 元素节点的表单值操作:
let obj = document.getElementById('content');
obj.value = '文本框的值';
let str = obj.value ;
注意:value 其实就是第三种属性的写法,只不过对 value 属性操作比较多,单独拿出来讲解。只有 form 表单相关标签有 value 属性。
关为带你学习JavaScript的DOM操作
111
222
333
444
JavaScript 提供定时执行代码的功能,叫做定时器(timer),主要由 setTimeout() 和 setInterval() 这两个函数来完成。它们向任务队列添加定时任务。
// 创建定时器
let 定时器名 = setTimeout(()=>{
回调函数;
},间隔时间);
// 取消定时器
clearTimeout(定时器名);
// 创建定时器
let 定时器名 = setInterval(()=>{
回调函数;
},间隔时间);
// 取消定时器
clearInterval(定时器名);
浏览器对象模型(Browser Object Model (BOM))允许 JavaScript 与浏览器对话。
主要有如下操作:
所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。
甚至(HTML DOM 的)document 对象的完整写法:
window.document.getElementById("p1");
可以在 JavaScript 中创建三种消息框:警告框、确认框、输入框。
警告框:
警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。
window.alert("消息内容");
确认框:
确认框通常用于验证是否接受用户操作。当确认框弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。
let flag = window.confirm("消息内容");
输入框:
输入框经常用于提示用户在进入页面前输入某个值。当输入框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
let message = window.prompt("标题内容","默认值");
Navigator 对象包含有关浏览器的信息。
Navigator 对象属性:
属性 | 说明 |
---|---|
appCodeName | 返回浏览器的代码名 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
platform | 返回运行浏览器的操作系统平台 |
userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
geolocation | 返回浏览器的地理位置信息 |
language | 返回浏览器使用的语言 |
onLine | 返回浏览器是否在线,在线返回 ture,否则返回 false |
product | 返回浏览器使用的引擎(产品) |
Navigator 对象方法:
方法 | 描述 |
---|---|
javaEnabled() | 指定是否在浏览器中启用Java |
taintEnabled() | 规定浏览器是否启用数据污点(data tainting) |
Screen 对象包含有关客户端显示屏幕的信息。
Screen 对象属性:
属性 | 说明 |
---|---|
availHeight | 返回屏幕的高度(不包括Windows任务栏) |
availWidth | 返回屏幕的宽度(不包括Windows任务栏) |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
height | 返回屏幕的总高度 |
pixelDepth | 返回屏幕的颜色分辨率(每象素的位数) |
width | 返回屏幕的总宽度 |
History 对象包含用户(在浏览器窗口中)访问过的 URL。History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
History 对象属性:
属性 | 说明 |
---|---|
length | 返回历史列表中的网址数 |
History 对象方法:
方法 | 说明 |
---|---|
back() | 加载 history 列表中的前一个 URL |
forward() | 加载 history 列表中的下一个 URL |
go() | 加载 history 列表中的某个具体页面 |
Location 对象包含有关当前 URL 的信息。Location 对象是 window 对象的一部分,可通过 window.location.属性名 格式的相关属性对其进行访问。
Location 对象属性:
属性 | 描述 |
---|---|
hash | 返回一个URL的锚部分 |
host | 返回一个URL的主机名和端口 |
hostname | 返回URL的主机名 |
href | 返回完整的URL |
pathname | 返回的URL路径名。 |
port | 返回一个URL服务器使用的端口号 |
protocol | 返回一个URL协议 |
search | 返回一个URL的查询部分 |
Location 对象方法:
方法 | 说明 |
---|---|
assign() | 载入一个新的文档 |
reload() | 重新载入当前文档 |
replace() | 用新的文档替换当前文档 |
Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
方法 | 描述 |
---|---|
getItem(keyname) | 返回指定键的值 |
setItem(keyname, value) | 添加键和值,如果对应的值存在,则更新该键对应的值。 |
removeItem(keyname) | 移除键 |
clear() | 清除存储对象中所有的键 |
JSON: JavaScript Object Notation(JavaScript 对象标记法)。它 是一种存储和交换数据的语法。是通过 JavaScript 对象标记法书写的文本。
JSON 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
JSON 采用完全独立于语言的文本格式,但是也使用了类似于 C 语言家族的习惯(包括 C, C++, C#, Java, JavaScript, Perl, Python 等)。 这些特性使 JSON 成为理想的数据交换语言。
当数据在浏览器与服务器之间进行交换时,这些数据只能是文本。
JSON 属于文本,并且我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器。
我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。
以这样的方式,我们能够把数据作为 JavaScript 对象来处理,无需复杂的解析和转译。
在标准的 json 格式中,json 对象由在括号括起来,对象中的属性也就是 json 的 key 是一个字符串,所以一定要使用双引号引起来。每组 key 之间使用逗号进行分隔。
语法规则:
// JSON的数组格式
let json1 = ['张三','李四','王五','关为'];
// JSON的对象格式
let json2 = {
'id':'1',
'name':'张三',
'age':'19'
};
// JSON的混合格式
let json3 = [
{
'id':'1',
'name':'张三',
'age':'19'
},
{
'id':'2',
'name':'李四',
'age':'23'
},
{
'id':'3',
'name':'王五',
'age':'20'
}
];
json 字符串对象,顾名思义,就知道它是一个对象。里面的 key 就是对象的属性。我们要访问一个对象的属性,只需要使 用【对象名.属性名】的方式访问即可。
let json2 = {
'id':'1',
'name':'张三',
'age':'19'
};
let id = json2.id;
let name = json2.name;
let age = json2.age;
JSON 对象和字符串对象的互转: