JS流程控制 函数与BOM与DOM操作
概要
-
运算符
-
流程控制
-
函数
-
内置对象
-
BOM与DOM操作(重要)
内容
1、运算符
# 1.算术运算符
+ - * / % ++ --
var x = 10;
var res1=x++; 表示:'先赋值给res1后再自增+1'
var res2=++x; 表示:'先自增+1后再赋值给res2'
res1;
10
res2;
12
这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！
# 2.比较运算符 > >= < <= != == === !==
在python中我们都知道字符串的5与数值5肯定是不相等的 即'5' ！= 5
但是在js中 两者是相等的 这就引出了js中的双等号'=='与三等号'==='两者的区别了
弱等于: == 自动转换类型
'5' == 5 '结果是true js会先自动转换成相同数据类型 再比较值是否一样'
强等于: === 不转换类型
'5' === 5 '结果是false'
/上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的5转换成字符串类型的5再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
# 3.逻辑运算符
在python中使用的是 and or not
js中使用的是 && || ！
# 4.赋值运算符
= += -= *= /=
2、流程控制
if 判断
1.单if分支
if(条件){条件成立执行的分支代码块}
2.if......else分支
if(条件){条件成立执行的分支代码块}
else{条件不成立执行的分支代码块}
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
3.if.......else if.......else分支
if(条件1){条件1成立执行的分支代码块}
else if(条件2){条件1不成立条件2成立执行的分支代码块}
else(其他){条件1和条件2都不成立执行的分支代码块}
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
4.switch语法
var n1 = 1;
switch (n1) {
case 0:
console.log("干饭");
break; # 如果不加break会基于当前位置一直往下运行
case 1:
console.log("睡觉");
break;
case 2:
console.log("玩耍")
default: # 没有对应条件统一执行default子代码
console.log("无所事事!!!")
}
while 循环
while(循环条件){循环体代码}
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
for循环
for(初始值;循环条件;每次循环之后的操作){循环体代码} 使用场景：一般循环取数条件要加三个参数 如果是自定义取值，条件也是一个参数
循环打印0到9的数字
for(var i=0;i<10;i++){
sonsole.log(i)
}
使用for循环打印出数组内所有的元素
var l1 = [11,22,33,44,55]
for(var i=0;i<l1.length;i++){
console.log(l1[i])
}
3、三元运算符
在python中的三元表达式
res = 11 if 1 > 2 else 22
"""if后面的条件成立则使用if前面的值 不成立则使用else后面的值"""
js中的三元运算
res = 1 > 2 ? 11 : 22
"""问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值"""
# 不嵌套的情况下
var a = 1;
var b = 2;
var c = a > b ? a : b
# 嵌套的情况下
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
10
4、函数
函数定义:
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1.function 定义函数的关键字 相当于python中的def
2.函数名的命名参考变量名 并且js推荐使用驼峰体
(Myfunc/MyFunc)
3.参数可写可不写
4.return返回值 只能返回一个（或者一个整体），不能逗号隔开 返回多个
函数调用:
函数名加括号 有参则传参即可
# 1.无参函数
定义:function f1(){console.log(111)}
调用:f1()
# 2.有参函数
定义:function f2(a,b){console.log(a,b)}
1.调用:f2()
# 可以调用 函数需要传两个形参时 实参没有参数时 会自动传了两个undefined
2.调用:f2(1)
# 也是可以调用 函数需要传两个形参时 但实参却只有一个参数时 另外一个参数自动传undefined
3.调用:f2(1,2)
# 可以调用 正好满足函数的参数
4.调用:f2(1,2,3,4,5)
# 可以调用 js中的函数会提供有个内置关键字arguements:接收所有的参数(内置的arguments对象)
function f2(){
console.log(arguments)
if (arguments.length === 0){
console.log('什么参数都没传')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}
# 3.返回值参数
return不支持逗号隔开，返回多个数据
# 4.匿名函数
var ff = function(){
console.log(123)
}
# 5.箭头函数(drf中vue框架会再次接触)
var f = v => v;
// 等同于(箭头左边是形参右边是返回值 第一个V是形参 第二个V是返回值)
var f = function(v){
return v;
}
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组（Array）或自定义对象
}
"""针对js的函数学习到这里就足够了"""
了解:作用域(与python一致)
5、自定义对象
avaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。
我们在学习基本数据类型的时候已经带大家了解了，JavaScript中的Number对象、String对象、Array对象等
# 1.自定义对象(相当于python里面的字典)
var d1 = {'name':'jason','age':18} 创建一个自定义对象方式1：直接编写自定义一个自定义对象
python字典取值操作js中的自定义对象都有 并且自定义对象还可以直接通过句点符取值 更像一个对象
取值操作
d1.name # jason
循环取值
for(var i in d1){
console.log(d1[i])
}
定义自定义对象还有一种标准格式(自定义对象 内置对象第三方对象) 创建一个自定义对象方式2：可以new关键字生生成一个自定义对象
var d2 = new Object() # 相当于生成了空字典
6、内置对象
# 内置对象可以看成是python中的内置方法 内置模块等提前写好直接调用
# 1.Date对象
var d1 = new Date()
d1.toLocaleString() '2022/4/28 16:47:05'
d1.toLocalDateString() '2022/4/28'
d1.toLocaleTimeString() '16:47:54'
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
# 小练习:2017-12-27 11:11 星期三
const WEEKMAP = {
0:"星期天",
1:"星期一",
2:"星期二",
3:"星期三",
4:"星期四",
5:"星期五",
6:"星期六"
}; //定义一个数字与星期的对应关系对象
function showTime() {
var d1 = new Date();
var year = d1.getFullYear();
var month = d1.getMonth() + 1; //注意月份是从0~11
var day = d1.getDate();
var hour = d1.getHours();
var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes(); //三元运算
var week = WEEKMAP[d1.getDay()]; //星期是从0~6
var strTime = `
${year}-${month}-${day} ${hour}:${minute} ${week}
`;
console.log(strTime)
};
showTime();
7、JSON对象
# python中如何序列化反序列
import json
json.dumps()
json.loads()
# js中如何序列化反序列化
JSON.stringify()
JSON.parse()
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
8、正则对象
# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; # 推荐使用(简化)
# 使用正则
reg2.test('jason123') true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test() true
"""
验证
var reg3 = /undefined/
reg3.test('jason666') false
reg3.test('undefined') true
reg3.test() true
"""
# 全局匹配
在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex
0
reg3.test('jason666')
true
reg3.lastIndex
8
reg3.test('jason666')
false
9、BOM操作(了解)
BOM:Brower Object Model是指浏览器对象模型 它使JavaScript 有能力与浏览器进行连接
1.Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。
window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
*如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
*没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
一些常用的Window方法：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.open('https://www.baidu.com','','width=400,height=400')
window.open('https://www.baidu.com','','width=400,height=400')
# 打开子页面 window.open()
子页面的操作其实可以通过一些手段传递给父页面(父子联动)
# 关闭页面 window.close()
2.下面接下来讲的是一些window的子对象
1.navigator对象 浏览器对象 通过这个对象可以判定用户所使用的浏览器 包含了浏览器相关信息
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
2.screen对象（了解即可）
屏幕对象，不常用。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
3.history对象
window.history 对象包含浏览器的历史记录
浏览历史对象,包含了用户对当前页面的浏览历史 但我们无法查看具体的地址 可以简单的用来前进或后退一个页面
window.history.forward() // 前进一页
window.history.back() // 后退一页
4.location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
window.location.href 获取URL 获取当前页面的网址
window.location.href="https://www.sogo.com" 跳转到指定页面
window.location.reload() 重新加载页面(刷新页面)
5.弹出框
可以在js中创建三种消息框:警告框、确认框、提示框
警告框:警告框经常用于确保用户可以得到某些信息
当警告框出现后,用户需要点击确定按钮才 能继续进行操作
语法:
alert(123)
alert('你看到我了吗?')
6.确认框（了解即可）
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：
confirm("你确定吗？")
7.提示框（了解即可）
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt("请在下方输入","你的答案")
8.计时相关
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout() 单次定时
例子:
function showMsg(){
console.log('一到12点半我们就开席')
}
setTimeout(showMsg,3000)
1
VM2553:2 一到12点半我们就开席
clearTimeout(t) # 取消定时器
"""循环定时"""
var s = setInterval(showMsg,3000) # 每隔3秒执行一次
clearInterval(s) # 取消定时器
语法：
var t=setTimeout("JS语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
clearTimeout()
语法：
clearTimeout(setTimeout_variable)
举个例子：
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
setInterval()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：
setInterval("JS语句",时间间隔)
返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法：
clearInterval(setinterval返回的ID值)
举个例子：
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
补充说明
由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕
解决的措施之一:
将script标签写在body内最下方
10、DOM操作
Document object Model是指文档对象模型 通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签 所有我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)
"""直接查找"""Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签 所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)
'''直接查找'''
# 通过标签名查找标签
document.getElementsByTagName('div') # 数组套标签对象
# 通过class值查找标签
document.getElementsByClassName('c1') # 数组套标签对象
# 通过id值查找标签
document.getElementById('d1') # 标签对象本身
'''间接查找'''
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法
~~
浙公网安备 33010602011771号