【Web前端学习笔记】第三章 JavaScript常见使用方法
文章目录
前言
本文记录了JavaScript的一些常见使用方法，以及一些前端常用框架。
一、JavaScript是什么？
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
二、JavaScript特点
1.作用：负责给页面添加动态效果
2.语言特点 :
-
属于脚本语言(不需要编译直接由浏览器解析执行)
-
基于面向对象
-
属于弱类型语言
3.三种引入方式 :
-
内联: 在标签的事件属性中添加js代码 , 当事件触发时执行
-
事件 : 就是浏览器窗口中发生的一些特定的交互瞬间
-
点击事件 : 在用户点击元素时触发浏览器窗口中发生的一些特定的交互瞬间
-
-
内部 : 在html页面中的任意位置添加script标签 , 标签体内写js代码
-
外部 : 在单独的js文件中写js代码 , 然后在html页面中通过script标签的src属性引入到html页面
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--内联:onclick点击事件 alert()弹出提示框-->
<input type="button" value="按钮" onclick="alert('按钮点击了!')">
<!--在内部引入JS-->
<script>
/*在浏览器的控制台中输出*/
console.log("内部引入成功!");
</script>
<!--引入外部JS文件,如果script标签引入了外部JS文件,则不能在标签体内写JS代码-->
<script src="my.js"></script>
</body>
</html>
三、 JavaScript常见使用方法
变量
- JS属于弱类型语言
Java: String name="tom"; int age = 18; age="abc"; //报错
JS: let name="tom"; let age = 18; age="xyz"; //不报错
-
let和var关键字的区别 , 作用域不同
-
使用let声明的变量 , 为一个局部变量
-
使用var声明的变量 , 不管在什么位置声明 , 都相当于是一个全局变量
-
数据类型
- 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 方法名(参数列表) { 方法体 }
-
常见的四种方法:
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
-
声明方法的三种方式 :
- function 方法名(参数列表) { 方法体 }
- let 方法名 = function(参数列表) { 方法体 }
- let 方法名 = new Function(“参数1”,“参数2”,“方法体”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1.无参无返回
function f1() {
console.log("f1");
}
//调用
f1();
//2.有参无返回值
function f2(name,age) {
console.log(name+":"+age);
}
f2("孙尚香",50);
//3.无参有返回值
function f3() {
return "我是返回值!";
}
//接收返回值
let info = f3();
console.log(info);
//4.有参有返回值
function f4(x,y) {
return x*y;
}
let result = f4(8,9);
console.log(result);
//第二种声明方法的方式
let f5 = function (name,age) {
console.log(name+":"+age);
}
f5("刘备",70);
//第三种声明方法的方式
let f6 = new Function("name","age","console.log(name+':'+age)");
f6("吕布",40);
</script>
</body>
</html>
DOM 文档对象模型
和页面相关内容
- 通过元素的id获取元素对象
- let 元素对象 = document.getElementById(“元素id”);
- 通过CSS中接触到的选择器获取元素对象
- let 元素对象 = document.querySelector(“选择器”);
- 获取和修改元素的文本内容
- 元素对象.innerText; //获取
- 元素对象.innerText=“xxx”; //修改
- 获取和修改表单中的控件的值
- 控件.value; //获取
- 控件.value=“xxx”; //修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>这是div</div>
<input type="text" id="i1">
<input type="button" value="点一下" onclick="f()">
<script>
function f() {
//得到文本框和div
let d = document.querySelector("div");
let i = document.querySelector("#i1");
//取出文本框的值并赋值给div
d.innerText = i.value;
}
</script>
</body>
</html>
NaN
- Not a Number: 不是一个数
- isNaN(x) 判断变量是否是NaN
JavaScript对象分类
-
内置对象 : 包括String , number , boolean等
-
BOM : Browser Object Model , 浏览器对象模型 , 包括和浏览器相关的内容
-
DOM : Document Object Model , 文档对象模型 , 包括和页面标签相关的内容
BOM浏览器对象模型
-
window: 此对象里面的属性和方法称为全局的属性和方法,访问时可以省略掉window.
-
window中常见的方法:
-
alert(“xxx”)弹出提示框
-
confirm(“xxx”) 弹出确认框
-
prompt(“xxx”) 弹出文本框
-
isNaN(x) 判断变量是否是NaN
-
parseInt()和parseFloat() 把字符串转成整数或小数
-
console.log() 控制台输出
-
let timer = setInterval(方法,时间间隔) 开启定时器
-
clearInterval(timer) 停止定时器
-
setTimeout(方法,时间间隔) 开启只执行一次的定时器
-
-
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代表刷新
-
-
DOM文档对象模型
包含和页面元素相关的内容
-
通过选择器获取页面中的元素对象
let 元素对象 = document.querySelector(“选择器”)
-
获取和修改元素的文本内容
元素对象.innerText = “xxx”; 修改文本内容
元素对象.innerText 获取文本内容
-
获取和修改input控件的值
控件对象.value=“xxx”; 修改
控件对象.value 获取
-
创建元素对象
let 元素对象 = document.createElement(“标签名”);
-
添加元素对象到某个元素里面
document.body.appendChild(元素对象);
父元素.appendChild(元素对象);
父元素.append(元素对象,元素对象,元素对象);
三、前端MVC设计模式
- MVC设计模式 , 其实就是将前端实现某个业务的所有代码划分为三部分
- Model : 模型 , 指数据模型 , 这个数据一般来自于服务器
- View : 视图 , 指页面标签内容
- Controller : 控制器 , 指将数据展示到视图中的过程代码
- 前端MVC设计模式弊端 : 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码)操作 , 会影响执行效率
- M,V,VM设计模式
- Model : 模型, 指数据模型 , 这个数据一般来自于服务器
- View : 视图 , 指页面标签内容
- ViewModel : 视图模型 , 将页面中可能发生改变的元素和某个变量在内存中进行绑定 , 当变量的值发生改变时会从内存中直接找到对应的元素让其改变
四、Vue
-
Vue框架是目前最流行的前端框架
- 执行原理
Vue对象相当于MVVM设计模式中的VM,负责将页面中可能发生变化的元素和变量进行绑定，绑定完之后会不断监听变量的改变，当变量值发生改变的时候会自动找到对应元素并修改其显示内容。
- 执行原理
-
使用方式：必须引用vue.js文件
- 直接引用CDN服务器的vue框架
- Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/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
- Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- 将vue框架下载到本地导入项目中使用
- 直接引用CDN服务器的vue框架
在web中创建js目录,放入vue.js文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{info}}</h1>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<!-- 引入本地的vue.js文件 -->
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"#app", /* 告诉vue对象管理的区域 */
data:{
info:"Hello Vue!"
}
})
setTimeout(function () {
v.info = "值改变了!";
},3000);
</script>
</body>
</html>
-
相关指令
-
{{变量}} : 插值 , 让此处的文本内容和变量进行绑定
-
v-text=“变量”, 让元素的文本内容和变量进行绑定
-
v-html=“变量”, 让元素的html内容和变量进行绑定
-
v-bind : 属性名 = “变量”, 让元素的xxx属性和变量进行绑定 , 可以省略掉v-bind
-
v-model = “变量”, 双向绑定, 当变量的值发生改变页面会跟着改变 , 页面的内容改变时变量也会跟着改变 , 只有使用form表单中的控件时才会涉及到双向绑定.
-
v-on : 事件名=“方法”, 事件绑定 , 简写@事件名=“方法” , 调用的方法必须声明在Vue里面的methods里面
-
总结
本文介绍了JavaScript的特点，常见使用方法，以及前端的设计模型和常用框架。
扫一扫
2415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
