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