- 作用: 负责给页面添加动态效果
- 语言特点:
- 属于脚本语言(不需要编译直接由浏览器解析执行)
- 基于面向对象
- 属于弱类型语言
java: String name="tom"; int age = 18; int x; x="abc";//报错
JS: let name="tom"; let age = 18; let x; x="abc"; age="xyz"
- 安全性强: JS语言只能访问浏览器内部的数据,浏览器以外电脑上的数据禁止访问.
- 交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端的语言 可以和用户直接进行交互, 而像Java语言是运行在服务器的语言和用户交互需要借助于网络,所有交互性JS语言会更强一些
变量
- 三种引入方式:
- 内联: 在标签的事件属性中添加js代码,当事件触发时执行.
- 事件: 是系统提供的一系列时间点.
- 点击事件: 当点击元素时触发的时间点
- 内部: 在html页面中的任意位置(推荐写在/body上面)添加script标签,标签体内写js代码
- 外部: 在单独的js文件中写js代码, 然后在html页面中通过script标签的src属性引入到html页面
- JS属于弱类型语言
java: String name="tom"; int age = 18; int x; x="abc";//报错
JS: let name="tom"; let age = 18; let x; x="abc"; age="xyz"
- let和var关键字的区别, 作用域有区别
- 使用let声明的变量,作用域和Java语言的作用域类似
- 使用var声明的变量,不管在什么位置声明 都相当于是一个全局变量
java:
for(int i=0;i<10;i++){
int y = i+1;
}
int z = i+y;//报错 i和y超出了自身的作用域
JS:
for(let i=0;i<10;i++){//使用let变量
let y = i+1;
}
let z = i+y;//不报错,但是访问不到i和y 因为超出了作用域
for(var i=0;i<10;i++){//使用var变量
var y = i+1;
}
var z = i+y;//不仅不报错还能够访问到i和y的值
数据类型
运算符JavaScript中只有对象类型
- 常见的对象类型包括:
- 字符串: string 可以用单引号或双引号修饰
- 数值: number 相当于Java中所有数值类型的综合
- 布尔值: 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; x=6 x/y=3;
- 关系运算符: > < >= <= != ==和===
- ==: 先统一两个变量的类型 再比较值
"666"==666 true
- ===:先比较类型,类型相同后再比较值
"666"===666 false
- 逻辑运算符: && || !
- 赋值运算符: = += -= *= /= %= ++ --
- 三目运算符: 条件?值1:值2
方法
- if else
- for
- while
- do while
- switch case
和页面相关的方法
- java: public 返回值类型 方法名(参数列表){方法体}
- JS: function 方法名(参数列表){方法体}
- 常见的四种方法:
- 无参无返回值
- 有参无返回值
- 无参有返回值
- 有参有返回值
- 三种声明方法的格式:
- function 方法名(参数列表){方法体}
- let 方法名 = function (参数列表){方法体}
- let 方法名 = new Function("参数1","参数2","方法体");
NaN1、通过选择器获取页面中的元素对象
let 元素对象 = document.querySelector("选择器")
2、获取和修改元素的文本内容
元素对象.innerText = "xxx"; 修改文本内容
元素对象.innerText 获取文本内容
3、获取和修改input控件的值
控件对象.value="xxx"; 修改
控件对象.value 获取
JavaScript对象分类
- Not a Number: 不是一个数
- isNaN(x) 判断变量是否是NaN
BOM浏览器对象模型
- 内置对象:包括string,number,boolean等
- BOM: Browser Object Model, 浏览器对象模型, 包括和浏览器相关的内容
- DOM: Document Object Model, 文档对象模型,包括和页面标签相关的内容
window: 此对象里面的属性和方法称为全局的属性和方法,访问时可以省略掉window.
- window中常见的方法:
- alert("xxx")d出提示框
- confirm("xxx") d出确认框
- prompt("xxx") d出文本框
- isNaN(x) 判断变量是否是NaN
- parseInt()和parseFloat() 把字符串转成整数或小数
- console.log() 控制台输出
- let timer = setInterval(方法,时间间隔) 开启定时器
- clearInterval(timer) 停止定时器
- setTimeout(方法,时间间隔) 开启只执行一次的定时器
DOM文档对象模型
- window对象中常见的属性
- location位置
- location.href 获取和修改浏览器的请求地址
- location.reload() 刷新页面
- history历史
- history.length 获取历史页面数量
- history.back() 返回上一页面
- history.forward() 前往下一页面
- history.go(n) n=1是前往下1页面 n=-1 返回上一页面 n=2 前往下2个页面 n=0代表刷新
包含和页面元素相关的内容
JavaScript入门笔记详解:1、通过选择器获取页面中的元素对象
- let 元素对象 = document.querySelector("选择器")
2、获取和修改元素的文本内容
- 元素对象.innerText = "xxx"; 修改文本内容
- 元素对象.innerText 获取文本内容
3、获取和修改input控件的值
- 控件对象.value="xxx"; 修改
- 控件对象.value 获取
4、创建元素对象
- let 元素对象 = document.createElement("标签名");
5、添加元素对象到某个元素里面
- document.body.appendChild(元素对象);
sky_castle/前端知识 - Gitee.com
设计模式(框架) 前端MVC设计模式M,V,VM设计模式
- MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分
- Model: 模型, 指数据模型,这个数据一般来自于服务器
- View: 视图, 指页面标签内容
- Controller:控制器, 指将数据展示到视图中的过程代码
- 前端MVC设计模式弊端: 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码) *** 作, 会影响执行效率.
Vue
- Model: 模型, 指数据模型,这个数据一般来自于服务器
- View: 视图, 指页面标签内容
- ViewModel:视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,当变量的值发生改变时会从内存中直接找到对应的元素让其改变.
Vue框架是目前最流行的前端框架
Vue对象相当于MVVM设计模式中的VM, 负责将页面中可能发生改变的元素和变量进行绑定, 绑定完之后会不断监听变量的改变, 当变量的值发生改变时会自动找到对应的元素并改变其显示内容.
- 相关指令:
- {{变量}}:插值, 让此处的文本内容和变量进行绑定
- v-text="变量", 让元素的文本内容和变量进行绑定
- v-html="变量", 让元素的html内容和变量进行绑定
- v-bind:属性名="变量", 让元素的xxx属性和变量进行绑定 可以省略掉v-bind
- v-model="变量", 双向绑定, 当变量的值发生改变页面会跟着改变, 页面的内容改变时变量也会跟着改变
Idea中安装Vue插件
File->Settings->Plugins 搜索Vue
设计模式及框架笔记详解:sky_castle/前端知识 - Gitee.com
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)