页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

比较运算符主要对两个值进行比较如大于、等于、小于等,比较的代码可以被称为表达式,如1>2,最总表达式会输出一个布尔值 true false

x=5,下面的表格解释了比较运算符:

运算符描述比较返回值
==等于x==8false
===绝对等于(值和类型均相等)x==="5" / x===5true/ false
!=不等于x!=8true
!==不绝对等于(值和类型有一个不相等,或两个都不相等)x !== "5"true
>大于x>8false
<小于x<8true
>=大于或等于x>=8false
<=小于或等于x<=8true


3、逻辑运算符

逻辑运算符主要用来判断连接两个表达式之间逻辑关系,即与、或、非

运算符描述详解示例
&&and两个全为true才为true(9 < 10 && 5 > 1) 为 true
||or两个全为false的时候才为false(6==5 || 8==5) 为 false
!not对得到的结果取反!(2==3) 为 true


4、条件运算符(三元运算符)

用于特定条件下返回某些特殊值,可以理解为一个简单的条件控制语句。

代码块
languagejs
// 判断是否成年

...


age>18 ? "成年":"未成年";

四、流程控制结构

1、条件结构

条件结构由if...else...来组成:

代码块
languagejs
if(条件表达式) {

...


  .....

...


} else if(条件表达式) {

...


  ....

...


} else {

...


  ....

...


}

...


示例:

...



if(age <18) {

...


    console.log("未成年人")

...


} else if(age<=45) {

...


    console.log("成年人")

...


} else if(age<=65) {

...


    console.log("中年人")

...


} else {

...


	console.log("老年人")

...


}

2、循环结构

在需要循环处理相同的代码逻辑时可以使用循环结构

代码块
languagejs
for (语句 1; 语句 2; 语句 3) {

...


    被执行的代码块

...


}

...


// 增强for循环

...


for (变量 in 数值或对象) {

...


    ...

...


}

...


示例:

...



//循环结构

...


let arr = ['james','mike', 'andy'];

...


for(let i=0; i<arr.length; i++) {

...


  console.log(arr[i]);

...


}

...


// for-each结构

...


for(index in arr) {

...


    console.log(arr[index]);

...


}

五、函数

1、函数声明

函数常用于将复用性较高的逻辑或复杂的代码处理块进行封装,能让主体代码逻辑更清晰代码更美观,同时解决代码复用的问题。

代码块
languagejs
function 函数名(参数) {

...


  函数体

...


  return 返回体;

...


}

...



// 声明一个函数

...


function addOne(x) {

...


    return x+1;

...


}

...



// 调用

...


let a = 1;

...


addOne(1)

...


addOne(a)

2、箭头函数

除去funcation关键字声明的函数,js的还支持更为简洁的函数命名方式,即箭头函数

代码块
languagejs
// 声明方式

...


(参数1,参数2) => {

...


    函数体

...


    return 返回体;

...


}

...



(参数1, 参数2, …, 参数N) => 表达式(单一)

...


// 相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }

...



单一参数 => 返回体

...


// s => ++s;

箭头函数常用于某些需要传入函数的参数为一个函数的时候

代码块
languagejs
setTimeout(() => {

...


    console.log(123);

...


},2000)

...


// setTimeout(延时调用的函数,延时时间)

六、浏览器对象模型(BOM)

BOM: 浏览器对象模型,其中包含浏览器中的一系列对象,如: window, location, screen, status, menu等对象。

代码块
languagejs
# 弹出框

...


alert()            显示带有一段消息和一个确认按钮的警告框。

...

confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。

...

prompt()           显示可提示用户输入的对话框。

...


...


# window对象

...


window.innerHeight      浏览器高度

...

window.innerWidth       浏览器宽度

...


window.open()           打开新窗口

...


window.open(url,'//打开位置','height,width,top,boottom')

...


window.close()          关闭当前窗口

...

scrollTo()         把内容滚动到指定的坐标。

...


...


# history对象

...


window.history.forward()   

...

 下一步
window.history.back()       上一步

...


...


# location对象

...


window.location.href           

...

 # 获得当前页面的url

...


window.location.href = url     

...

 # 跳转到指定的url

...


window.location.reload()       

...

 # 刷新页面

...


...


# 计时器相关

...


setInterval()     

...

 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval()   

...

 取消由 setInterval() 设置的 timeout。

...


setTimeout()       在指定的毫秒数后调用函数或计算表达式。

...


clearTimeout()     取消由 setTimeout() 方法设置的 timeout。


七、视频教学

JavaScript入门:https://my.smartbi.com.cn/edu/course-122