什么是JavaScript*：
1.JavaScript（简称：js）是一门跨平台，面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互。
2.JavaScript和Java是两种完全不同的语言，不论是概念还是设计，但是基本语法类似。
3.JavaScript在1995年由Brendan发明，并于1997年成为ECMA标准。
4.ECMAScript 6 是最新的JavaScript版本。
JS的引入方式**：
-
内部脚本：将JS代码定义在HTML页面中。
1JavaScript代码必须位于<script></script>标签中。 2.在HTML文档中，可以在任何位置，放置任意数量的<script>标签。 3.一般会把脚本置于<body>元素的底部，可以改善显示速度。 <head> <script> alert("检测到页面跳转，已自动拒绝！"); </script> --> </head> 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中。 1.外部JS文件中，只包含js代码，不包含<script>标签。 2.<script>标签不能自闭合。 alert("检测到页面跳转，已自动拒绝！"); <body> <script src="JS/demo.js"></script> </body>
js的基础语法**：
-
1.区分大小写。
-
2.结尾的;可以写可以不写。
-
3.注释：
-
单行注释：//注释内容
-
多行注释：/注释内容/
-
-
4.大括号表示代码块。
输出语句：
-
1.使用window.alert()写入警告框.
-
2.使用document.write()写入HTML输出。
-
3.使用console.iog()写入浏览器控制台。
js变量：
-
1.JavaScript中使用var来声名变量。
-
2.JavaScript是一门弱类型语言，变量可以存放不同类型的值。
-
变量名需要遵循如下规则：
-
组成字符可以是任何字母，数字，下划线，或美元符。
-
*数字不能开头
-
建议使用驼峰命名
特点：
1作用域较大，为全局变量。
{ var a = 1; } alert(a);2.可以重复定义。{ var s = 1 ; var s = 2; //最终结果为2。后面定义的会将前面的覆盖。 }
-
注意事项：
-
1.ECMAScript 6 新增了 let 关键字来定义变量，他的用法类似与var，但是所声名的变量，只在 let 关键字所在的代码块中有效，且不能重复定义。
-
2.ECMAScript 6 新增了 const 关键字（常量），用来声明一个只读的常量。一旦声名，常量的值就不能改变。
数据类型，运算符，流程控制语句
数据类型：JavaScript分为原始类型 和 引用类型。
原始类型：
-
number：数字（整数，小数，NaN(Not a Number)）
-
string：字符串，单双引皆可
-
boolean：布尔，true，false
-
null：对象为空
-
undefined：当声名的变量为初始化时，该变量的默认值是 undefined
使用typeof运算符可以获取数据类型：
var a =12; alert(typeof a); alert(typeof null);//object
运算符：
-
1.算术运算符：+ - * / % ++ –
-
2.赋值运算符：=，+=，-=，*=，/=，%=
-
比较运算符：> , < , >= , <= , != , == , ===
注意：==会进行类型转换，===不会进行类型转换` var a = 10; alert(a == "10");//true alert(a === "10");//false alert(a === 10);//true` -
4.逻辑运算符：&&，||，！
-
5.三元运算符：条件表达式？true-(下划线)value:false-（下划线）value
类型转换**：
将字符串类型转换成数字：
*将字符串字面值转换为数字。如果字面值不是数字，则转换为null。
例：
alert(parseInt("12"));//12 alert(parseInt("123A34"))//123 alert(parseInt("A12"))//NaN代表不是一个数字
其他类型转换为boolean：
-
*Number: 0 和 NaN为false，其他均转换为true
-
*String：空字符串为false，其他均转为true
-
*Null 和 undefined：均转换为false
流程控制语句与Java类型类似（不在显示）
js函数：
函数（方法）是被设计为执行特定任务的代码块。
定义：
JavaScript中函数使用function关键字进行定义，
语法：
方式1： function functionName(参数1，参数2){ //需要执行的代码 } 方式2： var functionName = function(参数1，参数2) { //需要执行的代码 }
注意：
-
*形式参数不需要类型，因为JavaScript是弱类型语言
-
*返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用：函数名称（实际参数列表）
js对象：
-
Arrary（数组）
-
String（字符串）
-
JSON
-
BOM（浏览器）
-
DOM（文档）
数据显示在浏览器的控制台上。
Array:
JavaScript中Array对象用于定义数组
定义：
` var 变量名 = new Array(元素列表) var arr = new Array(1,2,3,4);var 变量名 = [元素列表]； var arr = [1,2,3,4];访问：
arr[索引] = 值； arr[10] = “hello”；`注意：
js中的数组类似与Java集合，长度可变，类型可变。
Array对象
常用属性：
length:数组长度 arr.length
常用方法：
-
fareach：遍历数组中的每个有值元素，并且调用一次传入的函数
-
push()：将新元素添加到数组的末尾，并返回新的长度
-
splice()：从数组中删除元素
`例：
var arr = [1,2,3,4];
arr.forEach(function (e){ //e代表每次遍历的有值元素console.log(e); })`
esc6： 箭头函数：（...参数）=> (...) //简化函数的定义 arr.forEach((e) => { console.log(e); })
//添加元素 arr.push(12,41,45);
//删除元素splice(开始索引，删除元素个数) arr.splice(2,2)；
String对象
String字符串对象创建方式有两种：
var 变量名 = new String("...");//方式1 var str = new String("Hello String"); var 变量名 = "...";//方式2 var str = "Hello String"; var str = 'Hello String';
属性：
length：字符串长度
方法：
-
chatAt()：返回在指定位置的字符
-
indexOf：检查字符串
-
trim()：去掉字符串两边的空格
-
substring()：提取字符串中两个指定索引号之间的字符。字符串的截取 substring()
JavaScript自定义对象
var 对象名 = {
属性名1：属性值1，
属性名2：属性值2，
属性名3：属性值3，
函数名称:function(形参列表){}
}；
例： var user = { name:"Tom", age:20, gender:"male", eat: function(){ alert("用膳~"); } }；
注意：eat:faction(){alert(“吃饭！”);}可以换为： eat(){alert(“吃饭！”)}
调用格式：
-
对象名.属性；
console.log(user.name); -
对象名.函数名();
user.eat();
JSON
json:
概念：
JavaScript对象标记法。
JSON是通过JavaScript对象标记法书写的文本。
由于其语法简单，层次结构鲜明，现在多用于作为数据的载体，在网络中进行数据传输。
//普通的对象 { name:"Tom",**** age:20, gender:"male" }；
//JSON对象 { "name" : "Tom", "age":20, "gender":"male" }
JSON基本语法
定义：
var 变量名 = '{"key1":value1,"key2":value2}';
实例：
var userStr ='{"name":"Jerry","age":18,“addr":[“北京”,“上海”,"西安"]}';
JSON字符串转换为JS对象 :
var jsobject = JSON.parse(userstr);
JS对象转为JSON字符串 :
var jsonstr =JSON.stringify(jsobject);
BOM
概念:
Browser 0bjectModel 浏览器对象模型，允许javaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。
组成：
-
window：浏览器窗口对象
-
Navigator：浏览器对象
-
Screen：屏幕对象
-
History：历史记录对象
-
Location：地址栏对象
Window
介绍：
浏览器窗口对象。
获取：
直接使用window，其中 window.可以省略
。window.alert("Hello window"); alert("Hello Window");
属性：
-
history：对 History 对象的只读引用。请参阅 History 对象。
-
location：用于窗口或框架的 Location 对象。请参阅 Location 对象。
-
navigator：对 Navigator 对象的只读引用。请参阅 Navigator 对象。
方法： -
alert()：显示带有一段消息和一个确认按钮的警告框。
-
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
-
setlnterval()：按照指定的周期(以毫秒计)来调用函数或计算表达式。（多次执行）
-
setTimeout()：在指定的毫秒数后调用函数或计算表达式。（只执行一次）
Loation
介绍：
地址栏对象。
获取：
使用 window.location 获取，其中 window.可以省略。
window.location.属性； location.属性；
属性：
href：设置或返回完整的URL。 location.href="https://www.itcast.cn";
DOM
概念：
文档对象模型。
将标记语言的各个组成部分封装为对应的对象：
-
Document：整个文档对象
-
Element：元素对象
-
Attribute：属性对象
-
Text：文本对象
-
Comment：注释对象
JavaScript通过DOM，就能够对HTML进行操作：
-
1.改变HTML元素的内容
-
2.改变HTML元素的样式
-
3.对HTML DOM事件做出反应
-
4.添加和删除HTML元素
DOM时w3c的标准，定义了访问HTML和xml文档的标准，分为3个不同的部分：
-
1.Core DOM - 所有文档类型的标准模型
-
Document：整个文档对象
-
Element：元素对象
-
Attribute：属性对象
-
Text：文本对象
-
Comment：注释对象
-
-
2.XML DOM-XML 文档的标准模型（core子集）
-
3.HTML DOM - HTML文档的标准模型(core的扩充)
image： Button：<input type="button">
DOM
-
HTML中Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
-
Document对象中通过了获取Element元素对象的函数：
-
1根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1'); -
2根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div'); -
3根据name属性获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby'); -
4根据class属性获取，返回Element对象数组
var class = document.getElementByClassName('cls');
-
例：
Dom练习：
JS事件监听：
事件：
HTML事件是发生在html元素上的“事情”。比如：
-
按钮被点击
-
鼠标移动到元素上
-
按下键盘按键
事件监听：
JavaScript可以在事件被监测到时***执行代码***。
事件绑定：
方式一：通过HTML标签中的事件属性进行绑定。
方式二：通过DOM元素属性绑定。
常见事件：
常见事件的使用：
DOM事件绑定案例：
前端框架： Vue
定义：
-
vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
-
基于MVVM思想，实现数据的双向绑定，将程序的关注点放在数据上。
-
可以免除原生的js的dom操作，从而简化开发，提高开发效率。
-
官网：https://v2.cn.vuejs.org/
框架：
是一个半成品软件，是一套可以重用的，通用的、软件基础代码模型，基于框架进行开发，更加快捷，更加高效。
Vue快速入门
- 在js代码区域，创建VUE核心，定义数据模型。
el：
vue需要控制的区域。“#app”相当于css的选择器。
data：
** 定义的数据模型。key:message**
- 编写视图。
v-model：绑定数据模型message，message中的数据模型会在输入框中展示出来，因为v-model的双向绑定特性。
例：
插值表达式：
Vue的常用指令
指令：
-
HTML标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如： v-lf 、 v-for
-
常用指令
v-bind：
v-model：
注意：
- 通过v-bind 或者 v-model 绑定的变量，必须在数据模型中声名。
v-on:
条件渲染指令：
- v-if
- v-show
v-for
addr in addrs add:遍历出来的元素名(随意起名) addrs：遍历的数组
如果需要遍历的索引：
addr：遍历的数组 index：索引(从0开始)
vue遍历数组案例:
结果展示：
vue生命周期
-
生命周期：值一个对象从创建到销毁的过程。
-
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。
关键作用：
一旦触发生mounted命周期事件，会自动执行一个生命周期方法（钩子方法），一般在mounted方法中发送请求到服务端，来获取服务端的数据。
mounted：
挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）
Ajax介绍
Ajax
-
概念：
Asynchronous Javascript And XML，异步的JavaScript和XML。 -
作用：
数据交互：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。 异步交互：可以在不重新加载整个页面的情况下，与服务器交互数据并更新部分网页，如：搜索联想、用户名是否可以校验等等。
同步和异步
原生Ajax
-
准备数据地址： http://yapi.smart-xwork.cn/mock/169327/emp/list
-
创建XMLHttpRequest对象： 用于和服务器交换数据。
-
向服务器发送请求
-
获取服务器响应数据
Axios
介绍：
Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网：
https://www.axios-http.cn/
1.引入Axios的js文件
2.使用Axios发送请求，并获取响应结果
Axios
发送GET请求
发送POST请求
基于vue和axios的案例
前后端分离开发
当前最主流的开发模式：
前后端分离开发
YAPI
介绍：
YAPI：Yapi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
地址：
http://yapi.smart-xwork.cn/
-
添加项目
-
添加分类
-
添加接口
前端工程化
模块化(js,css)、组件化(UI结构)、规范化（目录结构，编码，接口）、自动化（构建，部署，测试）
环境准备
介绍：
Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue项目。vite
Vue-cli提供以下功能：
-
统一的目录结构
-
本地测试
-
热部署
-
单元测试
-
集成打包上线
依赖环境：
Nodejs
- 安装Nodejs
注意：
E:\develop\Nodejs是nodejs的安装路径，按自己安装的路径来。
检查配置:
vue-cli的安装
切换npm的淘宝镜像：
vue项目的创建
- 命令行：
- 图形化界面：
vue项目-目录结构
- 基于vue脚手架创建出来的工程，有标准的目录结构，如下：
node_modules：整个项目的依赖包
public：存放项目的静态文件
src：存放项目的源代码
{}package.json：模块基本信息，项目开发所需模块，版本信息
vue.config.js：保存vue配置的文件，如 “代理，端口的配置等”
assets：静态资源
components：可重用的组件
route：路由配置
views：视图组件（页面）
App.vue：入口页面（根组件）
main.js：入口js文件
vue项目-启动
- vscode启动
- 命令行窗口启动
在项目文件地址输入cmd
输入 npm run serve
vue提供热部署功能：页面会自动刷新
vue项目-配置端口
ctrl c + y :停止项目
端口被改为7000
Element
-
element是饿了么团队研发的，一套为开发者设计师和产品经理准备的基于Vue2.0的桌面端组件库。
-
组件：组成网页的部件，例如：超链接，按钮，图片，表格，表单，分页条等。
-
官网：https://element.eleme.cn/#/zh-CNLister
快读入门
- 安装ElementUI组件库(在当前工程目录下)，在命令行执行指令。
在node_model包中有element-ui就代表已经安装成功。
- 引入Element UI组件库。
- 更改根组件App.vue，将ElementVue.vue导入根组件中
展示效果：
- 访问官网，复制组件代码，调整。
Element常见组件
常见组件-table
组件都要放于中
- 表格：用于展示多条结构类似的数据，可对数据进行排序，筛选，对比或其他自定义操作。
上面已经完成了将ElementVue.vue的引入，便可以开始编写vue样式。
所有的element样式都可以在官网查找。
展示效果：
常见组件-分页
-
pagination分页：
当数据量过多时，使用分页分解数据。
展示效果：
较为重要的两个属性：handleSizeChange，handleCurrentChange的使用。
可以使用这两个属性将页码变化信息通过弹窗的形式展示。
常见组件-对话框
- Dialog对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。
展示效果：
常见组件-表单
- from表单：由输入框、选择器、单选框、多选框等控件组成，用来收集、检验、提交数据。
将表单展示在Dialog中：
怎么采集form表单中每一个表单项的内容：
通过v-model来进行数据绑定，将各个表单中的数据绑定到一个对象中。
完整的Vue样例
根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载。
-
创建页面，完成整体布局。
-
列表数据的异步加载，并渲染展示。
- 布局中各个组件的实现。
- 列表数据的异步加载，并渲染展示
vue项目中使用Axios:
-
在项目目录下安装axios：npm install axios;
-
需要使用axios时：导入axios：import axios from ‘axios’;
异步发送请求：
Vue路由
前端路由：
url中的hash(#号)与组件之间的对应关系。
Vue Rooter
-
简介：Vue的官方路由。
-
组成：
-
VueRooter:路由器类，根基路由请求在路由视图中动态渲染选择的组件。
-
:请求连接组件，浏览器会解析为
-
:动态视图组件，用来渲染展示路由路径对应的组件。
-
通过link和view来绑定浏览器展示的动态视图。例：点击不同的按键，可以在同页面一侧展示不同按键对应的视图。
在index.js中添加路由
打包部署
前端vue的最后一步：打包部署。
dist就是打包好的项目文件。
部署
Nginx
-
介绍：Nginx时是一款轻量级的web服务器/反向代理服务器及电子邮件（IMAP/POP）代理服务器。其特点是占用内存少，并发能力强。
-
官网：http://nginx.org/
-
部署：
将打包好的dist目录下的文件，复制到nginx安装目录的html目录下。
启动Nginx:
注意：Nginx默认占用80端口号。如果80号端口被占用，可以在nginx.conf中修改端口号。（netstat -ano|findStr 80）
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
