# JavaScript
- 作用: 负责给页面添加动态效果.
- 语言特点:
- 属于弱类型语言:
- java: String name = "tom"; int age=18; name=30; 报错
- javascript: let name="tom"; let age=18; name=30; 不会报错
- 属于脚本语言,不需要编译直接解析执行.
- 基于面向对象
- 安全性强: JS语言只能访问浏览器内部的数据,浏览器以外的程序或磁盘中的数据禁止访问.
- 交互性强: 因为JS语言是嵌入在html页面中的语言, 随着页面一起传递到客户端,运行在客户端的语言,离用户更近一些,java语言是运行在服务器的语言, 所以JS语言交互性更强
### 如何在html页面中添加JS语言
- 内联: 在标签的事件属性中添加js代码, 当事件触发时执行 .
- 事件: 系统给提供的特定时间点.
- 点击事件: 在用户点击元素时触发的时间点
- 内部:在html页面中任意位置添加script标签,在标签体内写JS代码
- 外部:在单独的js文件中写js代码, 在html 页面中通过script标签的src属性引入
变量,数据类型, 运算符,各种语句,方法, 面向对象
### 变量
- JavaScript属于弱类型语言
- java: String name = "tom"; int age=18; name=30; 报错
- javascript: let name="tom"; let age=18; name=30; 不会报错
- let和var关键字的区别
- 使用let声明的变量, 作用域和Java语言一样
- 使用var声明的变量, 相当于声明的是一个全局变量
- 举例:
java:
for(int i=0;i<10;i++){
int y=i+1;
}
int z = y-i; 报错: i超出了作用域
JavaScript:
for(let i=0;i<10;i++){
let y=i+1;
}
let z = y-i; 不会报错,但是y和i 是访问不到的
for(var i=0;i<10;i++){
var y=i+1;
}
var z = y-i; y和i是可以访问的
### 数据类型
- JavaScript中只有引用类型(对象类型)
- 常见的对象类型:
- number: 数值类型, 相当于java中所有数值类型的总和
- string: 字符串 , 可以用单引号或双引号修饰 'tom' "tom"
- boolean: 布尔值 , true/false
- undefined: 未定义 ,当变量只声明不赋值时,变量的类型为未定义
- 获取变量类型的方式: typeof 变量
### 运算符
- 算术运算符: +-*/%, JS除法会自动根据结果转换整数还是小数
- java: int x=5; int y = 2; x/y = 2;
- js: let x = 5; let y = 2; x/y = 2.5;
- 关系运算符: > < >= <= != = = 和===
- ==: 先统一等号两边的类型,再比较值 "666"==666 true
- ===: 先比较类型,类型相同之后再比较值 "666"==666 false
- 逻辑运算符: && ,|| , !
- 三目运算符: 条件?值1:值2
### 各种语句
- if else
- while
- do while
- for
- switch case
### 方法
- Java: public 返回值类型 方法名(参数列表){方法体}
- JS: function 方法名(参数列表){方法体}
- 常见的四种方法:
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
- 声明方法的三种方式:
1. function 方法名(参数列表){方法体}
2. let 方法名 = function(参数列表){方法体}
3. let 方法名 = new Function("参数1","参数2","方法体");
### NaN
- Not a Number: 不是数
- isNaN(变量) 判断变量是否是NaN , true代表是NaN false代表不是NaN
### JavaScript中的对象分类
- 内置对象: number, string, boolean等
- BOM: Browser Object Model 浏览器对象模型, 包含和浏览器相关的内容
- DOM: Document Object Model 文档对象模型, 文档指html标签, 包含和页面相关内容
### BOM浏览器对象模型
- 包含和浏览器相关内容
- window对象: 该对象的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.
### window对象中常见的方法
- alert("xxx") 弹出提示框
- confirm("xxxx") 弹出确认框
- prompt("xxx") 弹出文本框
- parseInt() 将字符串或小数转成整数
- parseFloat() 将字符串转成整数或小数
- isNaN() 判断变量是否是NaN
- console.log() 浏览器控制台输出
- let timer = setInterval(方法,时间间隔) 定时器
- clearInterval(timer) 停止定时器
- setTimeout(方法,时间间隔) 只执行一次的定时器
### Window对象中常见的属性
- location 位置
1. location.href 获取或修改浏览器的请求地址
2. location.reload() 刷新页面
3. location.search 获取浏览器地址栏中的参数
- history 历史(指当前浏览器页卡的历史, 关闭后则清除)
1. history.length 历史页面数量
2. history.back() 返回上一页面
3. history.forward() 前往下一页面
4. history.go(n) n是正值前进 负值后退 0代表刷新
### DOM 文档对象模型
- 和页面相关内容
- 通过元素的id获取元素对象
let 元素对象 = document.getElementById("元素id");
- 通过CSS中接触到的选择器获取元素对象
let 元素对象 = document.querySelector("选择器");
- 获取和修改元素的文本内容
元素对象.innerText; //获取
元素对象.innerText="xxx"; //修改
- 获取和修改表单中的控件的值
控件.value //获取
控件.value="xxx" //修改
- 创建元素对象
let 元素对象 = document.createElement("标签名");
- 添加元素对象
document.body.appendChild(元素对象);
- 给元素的属性赋值
元素对象.src = "../b.jpg";
元素对象.属性="值";
### JavaScript中自定义对象
```
//定义一个空的Person对象
function Person() {}
//实例化一个Person对象
let p1 = new Person();
//动态添加属性
p1.name = "张三";
p1.age = 18;
//动态添加方法
p1.run = function () {
console.log("我叫"+this.name+"今年"+this.age);
}
//调用方法
p1.run();
//不需要定义,直接实例化对象
let p2 = {};
p2.name = "李白";
p2.age = 20;
p2.run = function () {
console.log("李白的方法执行了!");
}
p2.run();
//实例化自带属性和方法的对象
let p3 = {
name:"刘备",
age:30,
run:function () {
alert(this.name+":"+this.age);
}
}
p3.run();
// 通过自定义对象封装数据
let arr = [{name:"小米手机",price:"3000",count:500},
{name:"小米电视",price:"3000",count:500},
{name:"华为手机",price:"3000",count:500},
{name:"华为电视",price:"3000",count:500}]
```
### 前端MVC设计模式
- MVC设计模式:实际上就是把前端实现一个业务功能的代码划分为3部分
- Model : 模型 , 指数据模型 对应的是从服务器获取到数据的部分代码.
- View: 视图 , 指页面部分代码
- Controller: 控制器, 把数据模型的内容 展示到页面中的过程称为控制器部分
- 前端MVC设计模式的弊端: 需要在Controller部分 频繁进行DOM操作(遍历查找元素过程)会影响效率, 从而影响用户的体验度
### M,V,VM设计模式
- Model : 模型 , 指数据模型 对应的是获取到数据的部分代码.
- View: 视图 , 指页面部分代码
- VM: 视图模型, 将页面中可能发生改变的元素在内存中和某一个变量进行绑定, 当变量的值发生改变时,会自动从内存中找到和变量对应的元素并进行修改, 不需要像MVC设计模式中每次进行遍历查找, 从而提高了效率,提高了用户体验度.
### VUE框架
- VUE框架是基于MVVM设计模式的前端框架.
- 工作原理: Vue框架中的Vue对象是MVVM设计模式中的VM视图模型, 此对象负责将页面中改变的元素和data里面的变量进行绑定, 初始化时,变量的值是什么页面就显示成什么, 并且Vue对象会一直监听着data里面变量值得改变, 当值发生改变时,会自动找到与其绑定的元素并且让元素跟着发生改变,改变元素的过程是不需要程序员参与的, 从而提高了开发效率, 由于这个过程不需要频繁的进行DOM操作(遍历查找元素) 从而提高了执行效率.
### 引入前端 三方框架的两种方式:
1. 把框架文件下载到本地,复制到自己的工程中进行引入
2. 从CDN服务器直接引入到自己工程.
### Vue常用指令
1. {{变量}} : 插值, 让此处的文本内容和变量进行绑定 ,不需要依赖某个标签存在
2. v-text="变量": 让元素的文本内容和变量进行绑定, 需要依赖标签
3. v-html="变量": 让元素的标签内容和变量进行绑定
4. v-bind:属性名="变量" , 让元素的某个属性的值和变量进行绑定 , 简写可以把v-bind去掉
5. v-model="变量": 让控件的value属性和某个变量进行双向绑定, 双向绑定: 变量会影响页面显示的内容,页面元素的内容改变也会影响变量, 当需要从代码中获取控件的值时使用双向绑定
6. v-on:事件名="方法", 绑定元素的事件, 方法需要声明在Vue对象里面的methods属性里面, 简写是@事件名="方法"
- @click 点击事件
- @change 值改变事件
- @blur 失去焦点事件
### idea中安装Vue插件
1. File->Settings->Plugins 搜索Vue 如图所示 , 安装完之后重启idea
### idea中添加自定义模板代码
- File->Editor->Live Templates
### Vue指令(续)
1. v-for="(变量,i) in 数组变量"; 让元素的显示数量和数组进行绑定, 同时遍历数组中的每一个对象,变量代表的是数组中的 每一个对象, i代表的是当前遍历的下标
2. v-if="变量", 元素的显示状态和变量进行绑定, true显示,false不显示(删除元素)
3. v-else和v-if指令结合使用, 显示状态和v-if的元素取反
4. v-show="变量",元素的显示状态和变量进行绑定, true显示,false不显示(通过样式隐藏了元素), 需要元素需要频繁切换显示状态使用v-show的执行效率会高于v-if
本文详细介绍了JavaScript的主要特点，包括其弱类型特性，脚本语言性质，以及在HTML中的添加方式，如内联、内部和外部脚本。讨论了变量、数据类型、运算符和语句，强调了其在DOM和BOM中的应用，如window对象的方法和属性。此外，还涉及到了Vue框架的工作原理和MVVM设计模式，以及Vue的常用指令。最后提到了IDEA中Vue插件的安装和自定义模板代码设置。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
