☕ JS 入门笔记
[toc]
JavaScript简介
JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态效果与交互功能,在 Web 开发领域有着举足轻重的地位。
JS、HTML和CSS的关系:
- HTML 用来定义网页的内容,例如标题、正文、图像等;
- CSS 用来控制网页的外观,例如颜色、字体、背景等;
- JavaScript 用来实时更新网页中的内容,例如从服务器获取数据并更新到网页中
JS是由以下三个部分组成:
- 核心(ECMAScript):提供语言的语法和基本对象;
- 文档对象模型(DOM):提供处理网页内容的方法和接口;
- 浏览器对象模型(BOM):提供与浏览器进行交互的方法和接口。
常见的 JavaScript 引擎有:
- V8:Chrome 和 Opera 中的 JavaScript 引擎;
- SpiderMonkey:Firefox 中的 JavaScript 引擎;
- Chakra:IE 中的 JavaScript 引擎;
- ChakraCore:Microsoft Edge 中的 JavaScript 引擎;
- SquirrelFish:Safari 中的 JavaScript 引擎。
JavaScript 具有以下特点:
1) 解释型脚本语言
JavaScript 是一种解释型脚本语言,代码不需要编译,可以直接运行。
2) 面向对象
JavaScript 是一种面向对象语言,使用 JavaScript 不仅可以创建对象,也能操作使用已有的对象。
3) 弱类型
JavaScript 是一种弱类型的编程语言,对使用的数据类型没有严格的要求,可以将一个变量初始化为任意类型,也可以随时改变这个变量的类型。
4) 动态性
JavaScript 是一种采用事件驱动的脚本语言,它不需要借助 Web 服务器就可以对用户的输入做出响应,例如我们在访问一个网页时,通过鼠标在网页中进行点击或滚动窗口时,通过 JavaScript 可以直接对这些事件做出响应。
5) 跨平台
JavaScript 不依赖操作系统,在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行,只需要系统上的浏览器支持 JavaScript 即可。
Node.js 是一个 JavaScript 运行时,它让 JavaScript 脱离了浏览器环境,可以直接在计算机上运行,极大地拓展了 JavaScript 用途。
JavaScript 基础
变量
定义变量
var str; //用来存储字符串 var age; //用来存储年龄 var prePage; //用来存储上一页 var a, b, c; // 同时声明多个变量
变量赋值
var num; // 定义一个变量 num num = 1; var num = 1; // 定义一个变量 num 并将其赋值为 1 var a = 2, b = 3, c = 4; // 同时定义 a、b、c 三个变量并分别赋值为 2、3、4 // 为了让代码看起来更工整,上一行代码也可以写成这样 var a = 2, b = 3, c = 4;
变量提升:JS在预编译期会先预处理声明的变量,但是变量的赋值操作发生在执行期,而不是预编译期
document.write(str); //显示undefined str = http://c.biancheng.net/js/; document.write(str); //显示 http://c.biancheng.net/js/ var str;
JS引擎的解析方式是:先解析代码,获取所有被声明的变量,然后再一行一行地运行。 这样,所有声明的变量都会被提升到代码的头部,这就叫作变量提升(Hoisting).
let 和 const 关键字
let 关键字声明的变量只在其所在的代码块中有效(类似于局部变量),并且在这个代码块中,同名的变量不能重复声明;
const 关键字的功能和 let 相同,但使用 const 关键字定义的为常量;
let name = "小明"; // 声明一个变量 name 并赋值为“小明” let age = 11; // 声明一个变量 age let age = 13; // 报错:变量 age 不能重复定义 const PI = 3.1415 // 声明一个常量 PI,并赋值为 3.1415 console.log(PI) // 在控制台打印 PI
数据类型
JS 中的数据类型可以分为两种类型:
基本数据类型(值类型):字符串(
String
)、数字(Number
)、布尔(Boolean
)、空(Null
)、未定义(Undefined
)、Symbol
;引用数据类型:对象(
Object
)、数组(Array
)、函数(Function
)。typeof
操作符:获取变量的数据类型var x = 1; typeof x; // 获取变量 x 的数据类型 typeof(x); // 获取变量 x 的数据类型
- Symbol 是 ECMAScript6 中引入的一种新的数据类型,表示独一无二的值。
基本数据类型
String
Number
JS中不区分整数和小数(浮点数),统一使用 Number 类型表示。- 特殊的值: Infinity:用来表示正无穷大的数值,一般指大于 1.7976931348623157e+308 的数;
- -Infinity:用来表示负无穷大的数值,一般指小于 5e-324 的数;
- NaN:即非数值(Not a Number 的缩写),用来表示无效或未定义的数学运算结构,例如 0 除以 0
Boolean
Null
-
Null 其实使用属于 Object(对象)的一个特殊值
Undefined
Undefined 也是一个只有一个值的特殊数据类型,表示未定义。
var num; console.log(num); // undefined
Symbol
var str = "123"; var sym1 = Symbol(str); var sym2 = Symbol(str); console.log(sym1 == sym2); // false
引用数据类型
Object
JS 的对象(Object)类型是一组由键、值组成的无序集合:
格式:
{k1:v1, k2:v2,..., kn:vn}
var person = { name: 'Bob', age: 20, tags: ['js', 'web', 'mobile'], city: 'Beijing', hasCar: true, zipcode: null }; console.log(person.name); // 输出 Bob console.log(person.age); // 输出 20
Array
var arr = [1, 2, 3, 'hello', true, null]; var arr2 = new Array(1,2,3,4);
Function
函数(Function)是一段具有特定功能的代码块,通过函数名调用运行。
function sayHello(name){ return "Hello, " + name; } var res = sayHello("Peter"); console.log(res); // 输出 Hello, Peter
运算符
比较运算符
=== 全等 x === y 表示如果 x 等于 y,并且 x 和 y 的类型也相同,则为真 !== 不全等 x !== y 表示如果 x 不等于 y,或者 x 和 y 的类型不同,则为真 var a = 1; var b = '1'; a==b; // true a===b; // false 类型不同
输出
- 使用 alert() 函数来弹出提示框;
- 使用 confirm() 函数来弹出一个对话框;
- 使用 document.write() 方法将内容写入到 HTML 文档中;
- 使用 innerHTML 将内容写入到 HTML 标签中;
- 使用 console.log() 在浏览器的控制台输出内容。
函数
以下两个函数等价:
// 函数声明 function getSum(num1, num2) { var total = num1 + num2; return total; } // 函数表达式 var getSum = function(num1, num2) { var total = num1 + num2; return total; };
事件
JS 事件(event)是当用户与网页进行交互时发生的事情。
事件绑定
事件只有与 HTML 元素绑定之后才能被触发。
通过【HTML 事件属性】来直接绑定事件处理程序
<html> ... <button type="button" onclick="myBtn">Button</button> <script> function myBtn() { alert("hello"); } </script> ... </html>
通过JS内置函数来为指定元素绑定事件处理程序
<html> ... <button type="button" id="myBtn">Button</button> <script> function sayHello() { alert("hello"); } document.getElementById("myBtn").onclick=sayHello; </script> ... </html>
事件示例
一般情况下,事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件,另外还有一些其它事件。
1) onmouseover 事件
onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件。
<button type="button" onmouseover="alert('您的鼠标已经移动到了该按钮上');">请将鼠标移动至此处</button><br> <a href="#" onmouseover="myEvent()">请将鼠标移动至此处</a> <script> function myEvent() { alert('您的鼠标已经移动到了该链接上'); } </script>
2) onmouseout 事件
onmouseout 事件会在鼠标从元素上离开时触发.
<div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div> <script> function myEvent() { alert('您的鼠标已经离开指定元素'); } document.getElementById("myBox").onmouseout = myEvent; </script>
3) onkeydown 事件
onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件。
<input type="text" onkeydown="myEvent()"> <script> function myEvent() { alert("您按下了键盘上的某个按钮"); } </script>
JS对象
Number对象
var myNum = new Number(value); // 创建新对象 var myNum = Number(value); // 转换
Array 对象中的属性
属性 | 描述 |
---|---|
constructor | 返回创建数组对象的原型函数 |
length | 设置或返回数组中元素的个数 |
prototype | 通过该属性您可以向对象中添加属性和方法 |
var cars = new Array("saab", "volvo", "bmw"); Array.prototype.name = null; cars.name = "JS";
JS DOM
文档对象模型(Document Object Model,简称 DOM),是一种与平台和语言无关的模型,用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构,以及程序访问和操作文档的方式。
当网页加载时,浏览器就会自动创建当前页面的文档对象模型(DOM)。在 DOM 中,文档的所有部分(例如元素、属性、文本等)都会被组织成一个逻辑树结构(类似于族谱),树中每一个分支的终点称为一个节点,每个节点都是一个对象,如下图所示:
Document 对象
当浏览器加载一个 HTML 文档时,会创建一个 Document 对象,Document 对象是 DOM 树中所有节点的根节点。通过 Document 对象我们可以访问 HTML 文档中的所有元素。
提示:Document 对象是 Window 对象的一部分,所以可以通过 window.document 来访问 Document 对象。
Element对象
逻辑树的每一个分支的终点称为一个节点,每个节点都包含一个对象,这个对象就是 Element 对象
使用 Document 对象中提供的方法(例如
getElementsByTagName()、
getElementById()、
getElementsByClassName()等)可以得到 Element 对象。
JS attributes对象
元素属性是指在 HTML 元素的开始标签中用来控制标签行为或提供标签信息的特殊词语。
属性 / 方法 | 描述 |
---|---|
attributes.isId | 如果属性是 ID 类型,则返回 true,否则返回 false |
attributes.name | 返回属性名称 |
attributes.value | 设置或者返回属性的值 |
attributes.specified | 如果定义了指定属性,则返回 true,否则返回 false |
nodemap.getNamedItem() | 从节点列表中返回的指定属性节点 |
nodemap.item() | 返回节点列表中处于指定索引号的节点 |
nodemap.length | 返回节点列表的节点数目 |
nodemap.removeNamedItem() | 删除指定属性节点 |
nodemap.setNamedItem() | 设置指定属性节点(通过名称) |
JS BOM
浏览器对象模型(Browser Object Model,简称 BOM)是 JavaScript 的组成部分之一,BOM 赋予了 JavaScript 程序与浏览器交互的能力。
window 对象是 BOM 的核心,用来表示当前浏览器窗口,其中提供了一系列用来操作或访问浏览器的方法和属性。另外,JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象,甚至我们前面介绍的 document 对象也属于 window 对象。
注意:如果 HTML 文档中包含框架( 或 标签),浏览器会为 HTML 文档创建一个 window 对象的同时,为每个框架创建一个额外的 window 对象。
navigator 对象
navigator 对象中存储了与浏览器相关的信息(名称、版本等),、通过 window 对象的 navigator 属性(即 window.navigator)来引用 navigator 对象,并通过它来获取浏览器的基本信息。
location对象
location 对象中包含了有关当前页面链接(URL)的信息(当前页面的完整 URL、端口号)。
history对象
history 对象中包含了用户在浏览器中访问过的历史记录,其中包括通过浏览器浏览过的页面,以及当前页面中通过
<iframe>加载的页面。
JS 定时器
利用定时器来延迟执行某些代码,或者以固定的时间间隔重复执行某些代码。
方法 | 说明 |
---|---|
setTimeout() | 在指定的时间后(单位为毫秒),执行某些代码,代码只会执行一次 |
setInterval() | 按照指定的周期(单位为毫秒)来重复执行某些代码,定时器不会自动停止,除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口 |
setTimeout()用法
<script type="text/javascript"> var myFun = function (str = 'JavaScript'){ document.write(str + "<br>"); }; setTimeout(myFun, 500, 'Hello'); setTimeout(myFun, 1000); // 常用匿名函数方式 setTimeout(function(){ document.write("定时器<br>"); }, 1500); // 出于安全考虑不建议使用 setTimeout("document.write(\"setTimeout()\")", 2000); </script>
setInterval() 函数的语法
<body> <p id="one"></p> <p id="two"></p> <script type="text/javascript"> var num = 1; var myFun = function (){ document.getElementById('one').innerHTML += num + " "; num ++; }; setInterval(myFun, 500); setInterval(function(){ var d = new Date(); document.getElementById('two').innerHTML = d.toLocaleTimeString(); }, 1000); </script> </body>
1 2 3 4 5 6 7 8 19:38:23
JS 取消定时器
使用 setTimeout() 或 setInterval()都会产生一个定时器的唯一 ID(正整数值),通过 ID 可以清除所对应的定时器。
var timeoutID; timeoutID = setTimeout(showAlert, 2000); clearTimeout(timeoutID);
JS 表单验证
使用 JavaScript 来验证提交数据(客户端验证)比将数据提交到服务器再进行验证(服务器端验证)用户体验要更好,因为客户端验证发生在用户浏览器中,无需向服务器发送请求,所以速度更快,而服务器端验证,需要先将数据提交到服务器,然后服务器再将结果返回给浏览器,用户需要等待服务器响应结果才能知道哪里出了问题。
在开发过程中,无论是否进行客户端验证,都需要在服务器端对于用户提交的数据进行验证,因为用户可以在浏览器中禁用 JavaScript。
表单验证通常由两个部分组成:
- 必填字段验证:确保必填的字段都被填写;
- 数据格式验证:确保所填内容的类型和格式是正确的、有效的。
必填字段验证
只需要通过程序来检查必填表单元素的值是否为空即可。
<form onsubmit="return validateForm()" action="" method="post"> <fieldset> <legend>注册:</legend> <div class="row"> <label>用户名:</label> <input type="text" name="name"> <span class="error" id="nameErr"></span> </div> <div class="row"> <label>密码:</label> <input type="password" name="pwd"> <span class="error" id="pwdErr"></span> </div> <div class="row"> <label>验证码:</label> <input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span> <span class="error" id="captchaErr"></span> </div> <div class="row"> <input type="submit" value="注册"> </div> </fieldset> </form> <script> var captcha = getCaptcha(); // 生成验证码 // 清空 input 标签后的提示信息 var tags = document.getElementsByTagName('input'); for (var i = 0; i < tags.length; i++) { tags[i].onchange = function(){ var idname = this.name + "Err"; document.getElementById(idname).innerHTML = ''; } } // 显示错误消息 function printError(elemId, hintMsg) { document.getElementById(elemId).innerHTML = hintMsg; } // 验证表单数据 function validateForm() { // 获取表单元素的值 var name = document.querySelector("input[name='name']").value; var pwd = document.querySelector("input[name='pwd']").value; var captcha = document.querySelector("input[name='captcha']").value; if(name == "" || name == null){ printError("nameErr", "用户名不能为空"); return false; } if(pwd == "" || pwd == null){ printError("pwdErr", "密码不能为空"); return false; } if(captcha == "" || captcha == null){ printError("captchaErr", "验证码不能为空"); return false; } } // 获取验证码 function getCaptcha(){ var cap = Math.floor(Math.random()*10000).toString(); if(cap.length != 4) cap += "0"; captcha = cap; document.getElementById("captcha").innerHTML = cap; } </script>
数据格式验证
数据格式验证就是通过正则表达式来验证用户所填的数据。
以邮箱地址为例,正确的邮箱地址中要包含一个
@和一个
.,而且
.要出现在
@之后
if(email == "" || email == null){ printError("emailErr", "邮箱不能为空"); return false; } else { var regex = /^\S+@\S+\.\S+$/; if(regex.test(email) === false) { printError("emailErr", "请输入正确的邮箱地址"); return false; } }
JS 动画
JavaScript 动画主要是通过修改元素样式来实现的,能够实现许多 CSS 动画所不能实现的效果,例如暂停、回放等。
与 CSS 动画相比,JavaScript 动画具有以下特点:
- JavaScript 动画控制能力更强,可以在动画播放过程中对动画进行控制,例如开始、暂停、回放、终止、取消等;
- JavaScript 动画的效果比 CSS 动画更丰富,比如曲线运动,冲击闪烁,视差滚动等效果,只有 JavaScript 动画才能完成;
- CSS 动画有兼容性问题,而 JavaScript 大多时候没有兼容性问题。
JavaScript 主要通过代码修改 DOM 元素来实现动画的,并且可以配合定时器来实现循环播放,示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> <style> *{ margin: 0; padding: 0; } #box { width: 200px; height: 200px; margin-top: 10px; background: rgb(43, 221, 255); position: relative; left: -200px; top: 0; } #box span { width: 20px; background: rgb(255, 119, 157); position: absolute; left: 200px; top: 75px; color: #fff; text-align: center; cursor: pointer; padding: 5px 1px 5px 0; border-radius: 0 5px 5px 0; } #box span:hover { background: rgb(255, 84, 137); } </style> </head> <body> <div id="box"> <span id="share">分享</span> </div> <script> window.onload = function () { //动画 var div = document.getElementById("box"); var timer = null; div.onmouseover = function () { startMove(0); }; div.onmouseout = function () { startMove(-200); }; function startMove(targetPosition) { clearInterval(timer); var speed = 0; if (targetPosition < 0) { speed = -10; } else { speed = 10; } timer = setInterval(function () { if (div.offsetLeft == targetPosition) { clearInterval(timer); } else { div.style.left = div.offsetLeft + speed + 'px'; } }, 17); } }; </script> </body> </html>
JS 闭包
所谓闭包,指的就是一个函数。当两个函数彼此嵌套时,内部的函数就是闭包。
闭包的形成条件是内部函数需要通过外部函数 return 给返回出来:
function funOne() { var num = 0; function funTwo() { num++; return num; } return funTwo; } var fun = funOne();
JS 解析JSON
JSON 全称为“JavaScript Object Notation”,是当前最流行的一种轻量级的数据交换格式,用来存储和传输数据,通常服务器端与客户端在进行交互时就是使用 JSON 格式的数据。
解析Json数据
var json = '{"course": {"name": "JavaScript","author": "http://c.biancheng.net/","year": 2021,"genre": "Getting Started tutorial","bestseller": true},"fruits": ["Apple","Banana","Strawberry","Mango"]}'; var obj = JSON.parse(json); console.log(obj.fruits); // ['Apple', 'Banana', 'Strawberry', 'Mango']
将数据转换为Json
var obj = { "name": "JavaScript", "author": "http://c.biancheng.net/", "year": 2021, "genre": "Getting Started tutorial", "bestseller": true }; var json = JSON.stringify(obj); document.write(json);
JS Cookie
在编程领域,Cookie 代表一种小型的文本文件,可以让开发人员在用户计算机上存储少量的数据(大约 4kb),来记录用户的某些信息(用户身份、喜好等),当用户下次访问网站时,网站可以通过检索这些信息来为用户展示个性化页面。
Cookie 就是为了让服务器能够记住浏览器而发明的。
JS 设置/获取Cookie
设置和获取cookie都是通过
document.cookie,设置要求
nanme=value形式:
document.cookie = "url:http://xxxx.xx/";
- 小白入门笔记——JS总结
- Node.js入门笔记(3):全局对象(2)
- JS入门学习笔记
- Vue.js笔记,从入门到精通
- Node.js 入门笔记(6) - mysql
- js入门学习笔记
- 【MDNjs笔记】——入门——第三章——json
- JS笔记 入门第二
- Node.js 入门 笔记
- node.js 入门笔记
- 1. cocos2d-js chipmunk物理引擎入门笔记
- js入门笔记
- JavaScript学习笔记之JS基础入门
- Node.js入门笔记(4):文件系统(fs)
- Vue.js学习笔记-入门
- js学习入门教程笔记:css+html+js用户注册代码实现
- Backbone.js入门教程第二版笔记(1)
- Backbone.js入门教程第二版笔记(3)
- Node.js入门学习笔记(1)
- Node.js 入门笔记(2) - swig模板