【无标题】

变量, 数据类型, 运算符,各种语句,方法,面向对象

变量

• JS语言属于弱类型语言

• Java强类型: int x=10; String s = "abc"; x="xxx";报错

• JS弱类型: let x=10; let s = "abc"; x="xxx";正常 不报错

• let和var声明变量的区别

• let声明变量的作用域和Java语言类似

• var声明变量的作用域是全局的

• java:

for(int i=0;i<10;i++){

int j = i+1;

}

int x = j+i; //报错 j和i超出作用域

• JS:let

for(let i=0;i<10;i++){

let j = i+1;

}

let x = j+i; //不报错但是访问不到j和i(超出了作用域)

• JS:var

for(var i=0;i<10;i++){

var j = i+1;

}

var x = j+i; //不报错而且可以访问到j和i的值

数据类型

• JS语言中只有对象类型

• 常见的对象类型包括:

• string字符串: 可以通过单引号或双引号修饰

• number数值: 相当于Java中所有数值类型的总和

• boolean布尔值: true/false

• undefined未定义, 当变量只声明不赋值时,变量的类型为未定义

• typeof 变量; 获取变量的类型

运算符

• 算术运算符: + - * / %

• 除法会自动根据结果转换成整数或小数

java: int x=5; int y=2; x/y=2

JS: let x=5; let y=2; x/y=2.5 x=6 x/y=3

• 关系运算符: > < >= <= != ==和===

• ==: 先统一两个变量的类型再比较值

• ===:先比较类型, 类型相同之后再比较值

"666"==666 true "666"===666 false

• 逻辑运算符: && , || , !

• 赋值运算符: = += -= *= /= %=

• 三目运算符: 条件?值1:值2

各种语句

• if else

• while / do while

• for

• switch case

方法

• Java: public 返回值类型 方法名(参数列表){方法体}

• JS: function 方法名(参数列表){方法体}

• 声明方法的方式:

• function 方法名(参数列表){方法体}

• let 方法名 = function(参数列表){方法体}

• let 方法名 = new Function("参数1","参数2","方法体");

和页面相关的方法

1. 通过选择器找到页面中的元素对象

let 元素对象 = document.querySelector("选择器");

1. 获取或修改元素的文本内容

元素对象.innerText 获取

元素对象.innerText = "xxx"; 修改

1. 获取或修改控件的值

控件对象.value 获取

控件对象.value="xxx"; 修改

NaN

• Not a Number 不是一个数

• isNaN(变量) 判断变量是否是NaN, true代表是NaN,false代表不是NaN

• NaN和任何数值进行任何运算结果都是NaN

JavaScript代码出错排错步骤:

• 通过浏览器F12 调出控制台, 看控制台中的错误提示, 然后点击超链接找到对应的代码

JavaScript对象分类

• 内置对象, 包括: string,boolean,number...

• DOM,Document Object Model文档对象模型, 包含和页面相关的内容

• BOM,Browser Object Model 浏览器对象模型, 包含和浏览器相关的内容

BOM浏览器对象模型

• window: 此对象中的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.

• window中的常见方法:

• alert("xxx") 弹出提示框

• confirm("xxx")弹出确认框

• prompt("xxx") 弹出文本框

• isNaN(变量) 判断变量是否是NaN

• parseInt() 将字符串或小数转成整数

• parseFloat() 将字符串转成整数或小数

• let timer = setInterval(方法,时间间隔) 开启定时器

• clearInterval(timer) 停止定时器

• setTimeout(方法,时间间隔) 开启只执行一次的定时器

day05

window对象中的常见属性

• location 位置

• location.href = "http://www.baidu.com"; 控制浏览器的请求地址

• location.reload(); 刷新页面

• history 历史

• history.length 历史页面数量

• history.back() 返回上一页面

• history.forward() 前往下一页面

DOM文档对象模型

• 包含和页面相关的内容

1. 通过选择器找到页面中的元素对象

let 元素对象 = document.querySelector("选择器");

1. 获取或修改元素的文本内容

元素对象.innerText 获取

元素对象.innerText = "xxx"; 修改

1. 获取或修改控件的值

控件对象.value 获取

控件对象.value="xxx"; 修改

1. 创建元素对象

let 元素对象 = document.createElement("标签名");

1. 添加元素到某个元素里面

父元素对象.append(新元素对象);

前端MVC设计模式

• MVC设计模式是将实现一个业务的所有代码划分为三部分

• M: Model 模式,指数据模型, 前端数据一般都来自于服务器

• V: View 视图, 指页面相关代码

• C: Controller 控制器, 指将数据展示到页面中的过程代码

• MVC设计模式中的C控制器部分将数据展示到页面中的过程中需要频繁进行DOM相关操作(遍历查找元素),频繁进行DOM操作浪费资源, MVVM设计模式就是为了解决此问题而诞生的

前端MVVM设计模式

• M: Model 模式,指数据模型, 前端数据一般都来自于服务器

• V: View 视图, 指页面相关代码

• VM: ViewModel 视图模型, 视图模型将页面中可能发生改变的元素和某个变量在内存中进行绑定,当需要改变页面中的元素的之后只需要从内存中找到对应的元素即可, 不需要频繁的遍历查找,从而提高了执行效率

VUE框架

• VUE框架是目前最流行的前端框架之一, 是基于MVVM设计模式的框架

• 此框架在第三阶段中接触到的是一个js文件, 使用此框架时只需要将此文件引入到自己的页面中即可, 第四个阶段会接触脚手架方式使用VUE

• 引入VUE框架的地址:

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.6.14/vue.min.js

• unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

• 如何加载CDN服务器上面的js文件

• 把CDN服务器上的js文件下载到本地是如何加载

 

 

• VUE框架的运行原理:

Vue对象相当于是MVVM设计模式的VM(视图模型),负责将页面中可能发生改变的元素和某个变量进行绑定, 同时会不断的监听变量值的改变,当变量的值发生改变时Vue对象会从绑定关系中找到变量所对应的页面元素并将元素内容进行改动

VUE相关指令

• {{变量}}: 插值, 让此处的文本内容和变量进行绑定

• v-text="变量": 让元素的文本内容和变量进行绑定

• v-html="变量": 让元素的标签内容和变量进行绑定

• v-bind:属性名="变量" 让元素的某个属性的值和变量进行绑定, 简写是去掉v-bind直接写:属性名

• v-model="变量",双向绑定,主要用在各种控件中, 变量的值会影响控制的值, 控件的值也会影响变量的值

• v-on:事件名="方法"; 事件绑定, @事件名="方法"; 简写

{{变量}} *********

<h1 v-text="变量"></h1> ****

v-html="变量" *

:属性名="变量" v-bind:属性名="变量" *****

v-model="变量" ******

v-on:事件名="方法" @事件名="方法" *********