JavaScript基础总结
什么是JavaScript？
JavaScript是一种脚本语言，语法和Java类似，一般用来编写客户端的脚本。
它是一个轻量级，但功能强大的编程语言。
JavaScript是一种边执行边解释的语言。
JavaScript的组成
一个完整的JavaScript是由ECMAScript，BOM，DOM组成。
- ECMAScript是一种开放的，被国际接受的，标准的脚本语言规范。
- 浏览器对象模型（Browser Object Model,BOM）浏览器对象模型可以实现与HTML的交互。
- 文档对象模型（Document Object Model,DOM），用来访问和操纵HTML文档。
JavaScript的执行原理
- 浏览器客户端向服务器端发送请求。
- 数据处理，将包含javaScript的页面进行处理。
- 把处理好的结果返回响应给客户端。
使用客户端脚本的好处有：
下载一次，减少不必要的网络通讯。
减轻服务器端压力。
JavaScript 可以做什么?
用于处理表单验证，用户输入，用户行为及浏览器动作:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
JavaScript用法：
HTML中的脚本必须位于<script>与</script>标签之间。
脚本可被放置在HTML页面的<head >和< body >部分中，推荐放到body里最后。
JavaScript输出：
console.log(); 写入到浏览器的控制台，给技术人员看。
window.alert();弹出警告框，也可用于断点测试代码。
window.prompt();弹出提示对话框，等待用户输入一行数据。返回text文本。
window.confirm();弹出提示框，有确定和取消按钮，返回true或false
document.write();将内容写到HTML文档中。
innerHTML“”; 写入到HTML元素,更改或替换。
Chrome开发人员工具，调试
Elements：用于查看和编辑当前页面中的HTML和CSS元素。
Console：用于显示脚本中所输出的调试信息，或运行测试脚本等。
Sources：用于查看和调试当前页面所加载的脚本的源文件。
Network：用于查看HTTP请求的详细信息。
TimeLine：用于查看脚本执行时间，页面元素渲染时间等信息。
Profiles：用于查看CPU执行时间与内存占用等信息。
Resource：用于查看当前页面所请求的资源文件。
Audits：用于优化前端页面，加速网页加载速度等。
JavaScript常用系统函数
parseInt() //解析一个字符串，0位开始遇非数字停止，返回一个整数
parseFloat() //解析一个字符串，0位开始遇非数字停止，返回一个浮点数
isNaN() //检查参数是否是非数字
window对象的常用属性
history //有关客户访问过的URL的信息
location //有关当前URL的信息
screen //只读属性，包含有关客户端显示屏幕的信息。
window常用方法
语法：window.方法名()；
prompt() //显示可提示用户输入的对话框
alert() //显示提示信息确定按钮对话框
confirm() //显示提示确定和取消按钮对话框
close() //关闭浏览器窗口
open() //打开一个新的浏览器窗口
setTimeout() //在指定的毫秒数后调用函数或计算表达式
setInterval() //按照指定的周期来调用函数或表达式
history对象的方法
back() //加载history对象列表中的前一个URL
forward() //加载history对象列表中的后一个URL
go() //加载history对象列表中的具体URL
location对象的属性
host //设置或返回主机名和当前URL的端口号
hostname //设置或返回当前URL的主机名
href //设置或返回完整的URL
location对象的方法
reload() //重新加载当前文档
replace() //用新的文档替换当前文档
document对象
常用属性：
referrer //返回载入当前文档的URL
URL //返回当前文档的URL
常用方法：
getElementById() //返回指定id的对象引用
getElementsByName()//返回带有指定名称的对象的集合
getElementsByTagName //返回带有指定标签名的对象的集合
write() //向文档写内容
操作HTML元素
document.getElementById("demo"); 使用 id 属性来查找 HTML 元素。
JavaScript内置对象
Date //用于操作日期和时间。
Array //用于在单独的变量名中存储一系列的值。
String //用于支持对字符串的处理。
Math //包含了若干个数字常量和函数。
Date对象的常用方法
语法：var 日期实例 = new Date(参数);
getDate()//返回Date对象的一个月中的每一天，其值为1~31
getDay()//返回Date对象的星期中的每一天，其值为0~6
getHours()//返回Date对象的小时数，其值为0~23
getMinutes()//返回Date对象的分钟数，其值为0~59
getSeconds()//返回Date对象的秒数，其值为0~59
getMonth()//返回Date对象的月份，其值为0~11
getFullYear()//返回Date对象的年份，其值为四位数
getTime()//返回自某一时刻以来的毫秒数
Math对象
ceil() //对数进行上舍入 Math.ceil(25.5);返回26 上+的
floor() //对数进行下舍入 Math.floor(25.5);返回25 下-的
round() //把数四舍五入 Math.round(25.5);返回26 4|5界限
random()//返回0~1中的随机数 Math.random()；0.123412
常用的定时函数
JavaScript中提供了两个定时函数setTimeout()和setInterval()。
语法：setTimeout(“调用的函数名称”，等待的毫秒数)
语法：setInterval(“调用的函数名称”,周期性调用函数之间间隔的毫秒数)
还提供了用于清楚定时器的两个函数clearTimeout()和clearInterval()。
语法：clearTimeout(setTimeout()返回的ID值)
window.clearTimeout(t1); //去掉定时器的方法
语法：clearInterval(setInterval()返回的ID值)
window.clearInterval(t1); //去掉定时器的方法
JavaScript 字面量
在编程语言中，一般固定值称为字面量，如 3.14。
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
<script>
document.getElementById("demo").innerHTML = 123e5;
</script>
字符串（String）字面量 可以使用单引号或双引号:
" John Doe "
' John Doe '
表达式字面量 用于计算：
+-*/%
数组（Array）字面量 定义一个数组：
[40, 100, 1, 5, 25, 10]
对象（Object）字面量 定义一个对象：
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数（Function）字面量 定义一个函数：
function myFunction(a, b) { return a * b;}
JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值；
一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
var zhi;
zhi=6;
.innerHTML = length;
变量是一个名称。字面量是一个值。
一条语句，声明多个变量
可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可。
var lastname="Doe", age=30, job="carpenter";
声明也可横跨多行：
var lastname="Doe",
age=30,
job="carpenter";
一条语句中声明的多个不可以赋同一个值:
var x,y,z=1;
x,y 为 undefined， z 为 1。
JavaScript 数据类型：
在 JavaScript 中不同的数据类型：
string
number
boolean
object
function
Symbol
3 种对象类型：
Object
Date
Array
2 个不包含任何值的数据类型：
null
undefined
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
ECMAScript提供了typeof运算符来判断一个值或变量的类型。
语法：typeof(变量或值);
String对象常用方法
indexOf(str,index) 查找指定字符串在字符串中首次出现的位置。
charAt(index)返回指定位置的字符。
toLowerCase() 把字符串转化为小写。
toUpperCase() 把字符串转化为大写。
substring(index1,index2) 返回指定索引index1和index2之间的字符串，并且包含index1对应的字符，不包含index2。
split(str) 将字符串分割为字符串数组
数组
语法：var 数组名称 = new Array（size）;
数组常用的属性和方法
属性：length 设置或返回数组中元素的数目。
方法：join()把数组的所有元素放入一个字符串，通过一个分隔符进行分割。
sort()对数组排序
push() 向数组末尾添加一个或多个元素，并返回新的长度。
运算符
类别运算符
算术运算符+ - * / % ++ --
比较运算符> < >= <= == != === !==
逻辑运算符&& || ！
赋值运算符= += -=
JavaScript关键字
break case catch continue default
delete do else finally for
function if in instanceof new
return switch this throw try
typeof var void while with
JavaScript 保留字
abstract super boolean enum int
export interface synchronized byte extends
let false long final native throws
char transient class float null
true const package private debugger
goto protected public implements volatile
import short double static
JavaScript 函数
JavaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}
JavaScript 语句的作用
JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
JavaScript 代码执行顺序
JavaScript 代码是 JavaScript 语句的序列。
浏览器按照编写顺序依次执行每条语句。
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。
document.write("你好 \
世界!");
JavaScript注释
//单行注释
/* */多行注释
注释用于阻止代码块的执行（可用于调试）
JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function。
function functionname()
{
执行代码
}
当调用该函数时，会执行函数内的代码。
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
常见的HTML事件
|
事件 |
描述 |
|
onchange |
HTML 元素改变 |
|
onclick |
用户点击 HTML 元素 |
|
onmouseover |
用户在一个HTML元素上移动鼠标 |
|
onmouseout |
用户从一个HTML元素上移开鼠标 |
|
onkeydown |
用户按下键盘按键 |
|
onload |
浏览器已完成页面的加载 |
特殊字符
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：
代码 输出
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符
字符串属性
属性描述
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() 返回某个字符串对象的原始值
条件运算符
实例
如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。
voteable=(age<18)?"年龄太小":"年龄已达到";
不同类型的循环
JavaScript 支持不同类型的循环：
for 循环代码块一定的次数
for/in 循环遍历对象的属性
while 当指定的条件为 true 时循环指定的代码块
do/while 同样当指定的条件为 true 时循环指定的代码块
typeof 操作符
使用 typeof 操作符来检测变量的数据类型。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
undefined 和 null 的区别
null 和 undefined 的值相等，但类型不等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
严格模式声明
严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。
添加use strict后 未定义的变量不让使用 会报错。
为什么用use strict
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
Validity 属性
rangeOverflow
设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow
设置为 true, 如果元素的值小于它的最小值。
重新定义变量
let同名变量只有在声明的地方赋值使用，块级作用域。
let不可以先使用后声明。
var同名变量只要最后的赋值结果，任何地方可以使用。
var可以先使用后声明。
const 关键字
const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改。使用 const 定义的对象或者数组，是可变的。
// 创建常量对象 const car = {type:"Fiat", model:"500", color:"white"}; // 修改属性: car.color = "red";
// 添加属性 car.owner = "Johnson";
// 创建常量数组 const cars = ["Saab", "Volvo", "BMW"];
// 修改元素 cars[0] = "Toyota";
// 添加元素 cars.push("Audi");
JavaScript JSON
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言
JavaScript HTML DOM EventListener
addEventListener() 方法
在用户点击按钮时触发监听事件：
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
