JavaScript
什么是 JavaScript
- JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
- JavaScript 和 Java 是完全不同的语言，不论是概念还是设计都不一样。但是基础语法类似。
- JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。
- ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)。
ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。
JS引入方式
- 内部脚本：将JS代码定义在HTML页面中。
- JavaScript代码必须位于<script></script>标签之间。
- 在HTML文档中，可以在任意地方，放置任意数量的<script>。
- 一般会把脚本置于<body>元素的底部，可改善显示速度。
<script>
alert("Hello JavaScript")
</script>
- 外部脚本：将 JS代码定义在外部 JS文件中，然后通过src属性引入到 HTML页面中。
- 外部JS文件中，只包含JS代码，不包含<script>标签。
- <script>标签不能自闭合。
<script src="js/demo.js"></script>
alert("Hello JavaScript")
JS基础语法
书写语法
- 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的。
- 每行结尾的分号可有可无，建议写上。
- 注释：
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
- 大括号表示代码块。
- 输出语句：
- 使用 window.alert() 写入警告框，“window.”可以省略。
- 使用 document.write() 写入 HTML 输出。
- 使用 console.log() 写入浏览器控制台。
变量
-
JavaScript 中用 var 关键字（variable 的缩写）来声明变量 ，var定义的变量是全局变量且可以重复声明。
-
JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
-
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）。
- 数字不能开头。
- 建议使用驼峰命名。
-
ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
-
ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。常量也是局部的。
数据类型、运算符、流程控制语句
数据类型
JavaScript中，数据类型分为：原始类型和引用类型。
原始类型
- number：数字（整数、小数、NaN(Not a Number)）。
- string：字符串，单双引号皆可。
- boolean：布尔，true、false。
- null：对象为空。
- undefined：当声明的变量未初始化时，该变量的默认值是 undefined。
使用 typeof 运算符可以获取变量的数据类型。
引用类型
JS中的对象。
运算符
| 运算符类型 | 运算符 |
|---|---|
| 算术运算符 | + , - , * , / , % , ++ , -- |
| 赋值运算符 | = , += , -= , *= , /= , %= |
| 比较运算符 | > , < , >= , <= , != , == , ===（全等运算符） |
| 逻辑运算符 | && , |
| 三元运算符 | 条件表达式 ? true_value: false_value |
- == 会进行类型转换，=== 不会进行类型转换
类型转换
- 字符串类型转为数字：将字符串字面值转为数字。 如果字面值不是数字，则转为NaN。若字符串开头是数字，中间有非数字，那么转换会丢弃掉非数字及之后的部分。
"12345" //转换后为12345
"12A45" //转换后为12
"A2345" //转换后为NaN
- 其他类型转为boolean：
- number：0 和 NaN为false，其他均转为true。
- string：空字符串为false，其他均转为true。
- null 和 undefined ：均转为false。
流程控制语句
- if…else if …else…
- switch
- for
- while
- do … while
与Java中用法一致。
Js函数
函数（方法）是被设计为执行特定任务的代码块。
定义
JavaScript 函数通过 function 关键字进行定义，语法为：
function functionName(参数1,参数2..){
//要执行的代码
}
注意
- 形式参数不需要类型。因为JavaScript是弱类型语言。
- 返回值也不需要定义类型，可以在函数内部直接使用return返回。
- JS中，函数调用可以传递任意个数的参数，但是多余的参数不会被接收。
调用
函数名称(实际参数列表)。
定义方式二
var functionName = function (参数1,参数2..){
//要执行的代码
}
Js对象
Array
JavaScript 中 Array对象用于定义数组。
定义
var 变量名 = new Array(元素列表); //方式一
var 变量名 = [元素列表]; //方式二
访问
arr[索引] = 值;
特点
-
JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的。
-
JavaScript 是弱类型的，所以数组可以存储任意的类型的数据。
属性
| 属性 | 说明 |
|---|---|
| length | 设置或返回数组中元素的数量 |
方法
| 方法 | 说明 |
|---|---|
| forEach() | 遍历数组中的每个有值的元素，并调用一次传入的函数 |
| push() | 将新元素添加到数组的末尾，并返回新的长度，可以一次性添加多个元素 |
| splice() | 从数组中删除元素，参数为要删除元素的起始索引和要删除的元素个数 |
- 箭头函数(ES6)：是用来简化函数定义语法的。具体形式为: (…) =>
- 可以给箭头函数起名字：var xxx = (…) => { … }。
String
创建
String字符串对象的创建方式有两种：
var 变量名 = new String("…") ; //方式一
var 变量名 = "…" ; //方式二
属性
| 属性 | 说明 |
|---|---|
| length | 字符串的长度 |
方法
| 方法 | 说明 |
|---|---|
| charAt() | 返回在指定位置的字符 |
| indexOf() | 检索字符串，传入要检索的字符串，返回该字符串第一次出现的索引 |
| trim() | 去除字符串两边的空格 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
JSON
JavaScript自定义对象
定义格式
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){},
函数名称: function(形参列表){},
...
};
定义函数时可以省略冒号和function，即：函数名称(形参列表){}。
调用格式
对象名.属性名; //调用属性
对象名.函数名(); //调用方法
JSON
概述
- JSON全称JavaScript Object Notation，JavaScript对象标记法。
- JSON 是通过 JavaScript 对象标记法书写的文本。
- 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
JSON-基础语法
定义
var 变量名 = '{"key1": value1, "key2": value2}';
- 整个JSON文本要由单引号包裹起来。
- JSON文本内部由一个个键值对组成，键必须由双引号包裹起来。
- 不同数据类型的值的写法：
| 数据类型 | 写法 |
|---|---|
| 数字 | 直接写数字 |
| 字符串 | 用双引号包裹 |
| 布尔值 | 直接写true或false |
| 数组 | 用中括号包裹 |
| 对象 | 用大括号包裹 |
| null | 直接写null |
JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);
BOM
概述
- BOM，全称Browser Object Model，浏览器对象模型，它允许JavaScript与浏览器对话，获取JavaScript封装好的浏览器的各个组成部分。
- 浏览器的对象组成：
| 对象名 | 说明 |
|---|---|
| Window | 浏览器窗口对象 |
| Navigator | 浏览器对象 |
| Screen | 屏幕对象 |
| History | 历史记录对象 |
| Location | 地址栏对象 |
Window
浏览器窗口对象。
获取
直接使用window，其中 window. 可以省略。
属性
| 属性 | 说明 |
|---|---|
| history | 对 History 对象的只读引用 |
| location | 用于窗口或框架的 Location 对象 |
| navigator | 对 Navigator 对象的只读引用 |
方法
| 方法 | 说明 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框，选择确定时返回true，选择取消时返回false |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式，只会执行一次 |
Location
地址栏对象。
获取
使用 window.location 获取，其中 window. 可以省略。
window.location; //完整写法
location; //省略写法
属性
| 属性 | 说明 |
|---|---|
| href | 设置或返回完整的URL |
DOM
概述
- DOM全称Document Object Model，文档对象模型。
- JavaScript 通过DOM，就能够对HTML进行操作，如：
-
- 改变 HTML 元素的内容。
- 改变 HTML 元素的样式（CSS）。
- 对 HTML DOM 事件作出反应。
- 添加和删除 HTML 元素。
- DOM是 W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
- Core DOM - 所有文档类型的标准模型：
| 对象名 | 说明 |
|---|---|
| Document | 整个文档对象 |
| Element | 元素（标签）对象 |
| Attribute | 属性对象 |
| Text | 文本对象 |
| Comment | 注释对象 |
-
XML DOM - XML 文档的标准模型
-
HTML DOM - HTML 文档的标准模型：
- Image：<img>
- Button ：<input type='button'>
- ...
Element对象的获取
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的方法：
| 方法 | 说明 |
|---|---|
| document.getElementById(id名) | 根据id属性值获取，返回单个Element对象 |
| document.getElementsByTagName(标签名) | 根据标签名称获取，返回Element对象数组 |
| document.getElementsByName(name属性名); | 根据name属性值获取，返回Element对象数组 |
| document.getElementsByClassName(class属性名); | 根据class属性值获取，返回Element对象数组 |
使用
查询参考手册中对应对象的属性和方法，并根据需求进行使用。
JS事件监听
- 事件：HTML事件就是发生在HTML元素上的 “事情”。比如：按钮被点击、鼠标移动到元素上、按下键盘按键……
- 事件监听：JavaScript可以在事件被侦测到时 执行代码。
事件绑定
- 方式一：通过 HTML标签中的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1">
<script>
function on(){
alert('我被点击了!');
}
</script>
- 方式二：通过 DOM 元素属性绑定
<input type="button" id="btn" value="按钮2">
<script>
document.getElementById('btn').onclick=function(){
alert('我被点击了!');
}
</script>
常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或元素被加载完成 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
Vue
概述
框架
框架是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。
Vue
- Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
- 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
- Model是数据模型，内部包含了很多业务数据以及数据的处理方法，原生的JS对象就在这里。
- View是视图层，它只负责数据的展示，也就是DOM元素。
- ViewModel是View和Model通信的桥梁，负责完成View和Model数据的双向绑定：绑定完成后，如果Model中的数据发生变化，ViewModel会自动更新View中的数据展示；如果View中的数据发生变化，ViewModel也会自动更新Model中的数据。
Vue的用法
- 新建HTML页面，引入Vue.js文件：
<script src="js/vue.js"></script>
- 在JS代码区域，创建Vue核心对象，定义数据模型：
<script>
new Vue({
el: "#标签的id", //Vue接管的区域
//定义变量
data: {
变量名: 变量值,
...
},
//定义方法
methods: {
函数名称: function(形参列表){},
...
},
})
</script>
- 编写视图层展示：
<div id="app">
<input type="text" v-model="变量名">
{{变量名}}
</div>
插值表达式
- 形式：
{{表达式}} - 内容可以是：变量、三元运算符、函数调用和算术运算。
Vue的常用指令
- 指令：HTML 标签上带有 v- 前缀 的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
- 常用指令：
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置 href , css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-else-if | |
| v-else | |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
指令用法
- v-bind
<a v-bind:href="url">文本</a> //完整写法
<a :href="url">文本</a> //简化写法
- v-model
<input type="text" v-model="url">
注意：通过v-bind或者v-model绑定的变量，必须在数据模型中声明。
- v-on
<input type="button" value="按钮" v-on:click="handle()"> //完整写法
<input type="button" value="按钮" @click="handle()"> //简化写法
<script>
new Vue({
el: "#app",
data: {
...
},
methods: {
handle:function(){
alert('我被点击了');
}
},
})
</script>
- v-if、v-else-if、v-else
年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
- v-show
年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>
- v-for
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div> //可以拿到索引
data: {
. . .
addrs: ['北京','上海','广州','深圳','成都','杭州']
},
Vue的生命周期
- 生命周期：指一个对象从创建到销毁的整个过程。
- Vue的生命周期共有八个阶段：
| 状态 | 生命周期 |
|---|---|
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 挂载前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
- Vue生命周期的演变：
- Vue对象每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)，可以在声明周期方法中设置具体的操作，如发送请求到服务端或加载数据等，mounted的生命周期方法使用较多。
<script>
new Vue({
el: "#app",
data: {
},
mounted() {
console.log("Vue挂载完毕,发送请求获取数据");
},
methods: {
},
})
</script>
//mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）