# 1、if语句
if语句就是条件判断语句,在学习之前,我们先回顾一下,我们之前学习,提到if语句的地方: Boolean()函数隐式转换
三元条件运算符有了以上的基础了解,我们来看一下if语句,它有三种格式:
# ① if (条件表达式) 语句;
# 一行的 if 语句,判断后执行一条语句
如果怎么样?
let text = 59; if(text < 60) alert('不及格'); //再次说明,if括号里面的(text < 60)返回的结果,转成布尔值 //布尔值是true的时候,才会执行后面的一条语句,否则就不执行 let text = 60; if(text < 60) alert('不及格'); //没有弹窗,没有执行 //扩展 let text = 59; if(text >= 60) alert('我及格了');alert('我很优秀'); alert('我是靓仔'); //发现执行了后面两条,这是不对的 //换个写法 let text = 59; if(text >= 60) alert('我及格了'); alert('我很优秀'); alert('我是靓仔'); //依旧执行后面两句,而后面两句不应该出现 //此时应该用复合语句{},判断后执行一条复合语句 let text = 59; if(text >= 60){ alert('我及格了'); alert('我很优秀'); alert('我是靓仔'); } // 注意,大括号{}里面的多行代码,不管你多少行,都是一条复合语句总结:
1、if括号的判断只能判断执行后面的一条语句,如果有多条语句,那么就必须使用复合语句{}把多条语句包含在内
2、一行的语句推荐单行写法(上面第一种),多行语句使用复合语句写法(用大括号包起来),复合语句我们一般喜欢称作为:代码块。
# ② if (条件表达式) {语句;} else {语句;}
如果怎么怎么样,否则怎么怎么样?
let text = 60; if(text >= 60){ alert('我及格了'); alert('我很优秀'); alert('我是靓仔'); }else{ alert('我不及格'); } //复习一下三元运算符 text >= 60 ? alert('我及格了') : alert('我不及格'); //多个语句我们后面讲完函数在讲怎么写
# ③ if (条件表达式) {语句;} else if (条件表达式) {语句;} ... else {语句;}
如果怎么怎么样,或者如果怎么样,或者如果怎么样,等等,上面都不满足,否则就怎么样
let text = 100; if (text >= 100) { //如果满足条件,不会执行下面任何分支 alert('甲'); } else if (text >= 90) { alert('乙'); } else if (text >= 80) { alert('丙'); } else if (text >= 70) { alert('丁'); } else if (text >= 60) { alert('及格'); } else { //如果以上都不满足,则输出不及格 alert('不及格'); } //复习一下三元运算符 let text = 89; text >= 100 ? alert('甲') : text >= 90 ? alert('乙') : text >= 80 ? alert('丙') : text >= 70 ? alert('丁') : text >= 60 ? alert('及格') : alert('不及格');
# 2、switch 语句
switch 语句是多重条件判断,用于多个值相等的比较。
let text = '星期一'; switch (text) { //switch (text) text就是要比较的变量 // case '星期一' : 相当于 if(text == '星期一'),如果 text == '星期一'就怎么样 case '星期一': alert('热巴陪我'); break; //break;中途退出,用于防止语句的穿透 case '星期二': alert('娜扎陪我'); break; case '星期三': alert('空姐陪我'); break; case '星期四': alert('热巴给我做饭'); break; case '星期五': alert('娜扎给我做饭'); break; default: //相当于 if 语句里的 else,否则的意思 alert('放假休息'); }总结:switch 语句中break很重要,执行完语句后记得退出!
# 3、循环语句
# ① do...while 循环语句
# do...while 语句是一种先运行,后判断的循环语句。也就是说,不管条件是否满足,至少先运行一次循环体。
let text = 2; do{ //先运行,再判断的循环体 alert(text); //打印 2 text++; // text++ 就是自身加1, text = text+1,就是3 }while(text <= 6); // 再判断 3<=6吗?true, 真,在进行一次循环 // 直到 text=7的时候,由于 7<=6是false,就退出循环了[注意:例子中 text++;用到了 一元运算符:递增(++)_后置递增 ,不熟悉的同学回头看一下我们之前学习的知识]
总结:当while的判断为false,假的时候,退出循环,当while的判断为true,真的时候,执行循环。
如果条件一开始就是不满足,至少会执行一次.let text = 7; do{ //先运行,再判断的循环体 alert(text); //打印 7 text++; // text++ 就是自身加1, text = text+1,就是8 }while(text <= 6); // 再判断 8<=6吗?false, 假,退出循环注意:切记,循环体的判断要想好,不然可能会出现死循环
let text = 7; do{ //先运行,再判断的循环体 alert(text); //打印 7 text++; // text++ 就是自身加1, text = text+1,就是8 }while(text >= 6); // 再判断 8>=6吗?true, 真,继续循环执行 // 很明显,进入死循环,没有意义了
# ② while 循环语句
# while 语句是一种先判断,后运行的循环语句。也就是说,必须满足条件了之后,方可运行循环体。
let text = 7; while(text <= 6){ //先判断 7<=6吗?假,false, 不执行打印 alert(text); //没有反应 text++; } let text = 1; while(text <= 6){ //先判断 1<=6吗?真,true, 执行打印 alert(text); //打印1 text++; //text自身加1,相当于 text = text+1,就是2 }以上两个循环语句,都有其特殊的用途,后面我们开发的时候,会用到!
# ③ for 循环语句
for 语句也是一种先判断,后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。 也是我们开发中用得最多的循环语句。
for(let text=1;text<=5;text++){ alert(text); } //第一步:声明变量 text=1 //第二步:判断变量text<=5,如果是true,真,则执行第三步,否则就退出循环 //第三步: alert(text); 打印输出这个变量 //第四步:text++; 变量text自身加1,相当于 text = text + 1;就是 2 //第五步:去执行第二步,判断 2<=5, 如果是true,真,则执行第三步,否则就退出循环
# 4、for...in 语句 枚举对象的属性
for...in 语句是一种精准的迭代语句,可以用来枚举对象的属性。
学习之前,我们回顾一下之前学习的,提到对象的地方:
1.Object数据类型
2.其它类型在一元运算符的规则_5.对象---提到对象的toString()和valueOf()
3.逗号运算符___4.对象的字面量声明let text = { name:'迪丽热巴', //键值对,左边是属性名,右边是值 age:31, weight:'52kg', bar:'85cm', height:'170cm' }; alert(text);// 返回 [object Object] //列举出对象的所有属性 for (let every in text) { alert(every); // 依次返回每个属性名:name age weight bar height } //拓展了解,返回每个属性值(后面讲对象会具体讲解) for (let every in text) { alert(text[every]); }
# 5、break 和 continue 语句 退出循环语句
break 和 continue 语句用于在循环中精确地控制代码的执行。其中,break 语句会立即退出循环,强制继续执行循环体后面的语句。而 continue 语句退出当前循环,继续后面的循环。 在学习之前,我们在学习一个输出内容的方法,之前我们用alert()是在页面上弹窗,我们用document.write()可以在页面上显示我们打印的内容,如: document.write('迪丽热巴');
for (let text = 1; text <= 5; text++) { if (text == 4) break; //如果 text 是 4,就退出循环 document.write(text); // 输出 1 2 3 document.write('<br/>'); } for (let text = 1; text <= 5; text++) { if (text == 4) continue; //如果 text 是 4,就退出当前循环,执行后面的循环 document.write(text + '<br/>'); // 输出 1 2 3 5 }
# 6、with语句
with 语句的作用是将代码的作用域设置到一个特定的对象中。
let text = { name:'迪丽热巴', //键值对,左边是属性名,右边是值 age:31, weight:'52kg', bar:'85cm', height:'170cm' }; //不在循环体打印属性值 text.name alert(text.name); //此时,我将某些值赋值给新的变量 let a = text.name; let b = text.bar; let c = text.height; alert(a + ',胸围:'+b+',身高:'+c); //with语句 with(text){ //with(text)可以将text.省略掉 let a = name; //这里的name相当于 text.name let b = bar; let c = height; alert(a + ',胸围:'+b+',身高:'+c); //作用域问题,可以打印 } alert(a + ',胸围:'+b+',身高:'+c); //作用域问题,无法打印
# 课程其它章节
# 章节1.课程介绍
# 章节2.javascript基础
# 1、变量
# 2、关键保留字
# 3、语法构成
# 4、数据类型
# 章节3.javascript运算符
# 1、一元运算符
# 2、算术运算符
# 3、赋值运算符
# 4、关系运算符
# 5、逻辑运算符
# 6、字符串、逗号、三元条件运算符
# 7、运算符优先级
# 章节4.流程控制语句
# 1、if语句
# 2、switch 语句
# 3、循环语句
# 4、for...in 语句 枚举对象的属性
# 5、break 和 continue 语句 退出循环语句
# 6、with语句
# 章节5.javascript函数
# 1、函数声明
# 2、函数 return 返回值
# 3、函数的arguments 对象
# 章节6.javascript对象
# 1、创建对象
# 2、对象属性输出、方法(函数)调用
# 3、对象中的方法及应用
# 章节7.javascript数组
# 1、创建及读取数组
# 2、数组中的属性和内置方法:toLocaleString()、valueOf()和 toString()
# 3、数组中的方法:join()、push()、pop()、shift()、unshift()、reverse()、sort()、concat()、slice()、splice()方法
# 4、数组更多操作方法
# 章节8.Date类型:时间和日期
# 1、Date 类型
# 2、格式化日期和时间
# 章节9.Function类型:函数进阶
# 1、函数的声明
# 2、作为值的函数
# 3、函数内部属性
# 4、函数的属性和方法
# 章节10.内置对象:Global、Math对象,变量、作用域和内存问题
# 1、内置对象: Global对象
# 2、内置对象: Math 对象
# 3、变量
# 4、作用域(执行环境)
# 5、 内存问题
# 章节11.匿名函数和闭包
# 1、匿名函数如何自动执行-()()方式
# 2、通过闭包实现局部变量的累加
# 3、循环里的匿名函数取值问题:任何变量都是最后一个值
# 4、闭包中的this对象问题
# 5、 匿名函数私有化:匿名函数自我执行模仿块级作用域,将变量私有化保护数据
# 章节12.javascript基本包装类型
# 1、Number 类型
# ① Number类型静态属性:MAX_VALUE、MIN_VALUE、NaN、NEGATIVE_INFINITY、POSITIVE_INFINITY、prototype
# ② Number类型方法:toString()、toLocaleString()、toFixed()、toExponential()、toPrecision()
# 2、String类型
# ① String类型属性:length、constructor、prototype
# ② String类型通用方法:valueOf()、toLocaleString()和 toString()方法
# ③ String类型方法:charAt(n)、charCodeAt(n)、数组方式截取字符串、concat(str1...str2)、slice(n,m)、substring、substr、indexOf、lastIndexOf、toLowerCase、toUpperCase、toLocaleLowerCase、toLocaleUpperCase、match、search、replace、replaceAll、split、fromCharCode、localeCompare、startsWith、endsWith、includes、trimStart、trimEnd、trim、repeat、魔法字符串
# 3、Array数组的常用方法
# ① 数组中的属性length,数组内置方法toLocaleString()、valueOf()和 toString()
# ② join、push、pop、shift、unshift、reverse、sort、concat、slice、splice
# ③ includes、reduce、find、findIndex、filter、map、forEach
# ④ indexOf、lastIndexOf、at、fill、copyWithin、isArray、es6的扩展运算符、every、some、for...of遍历、keys()、values()、entries()、reduceRight、flat、flatMap、from、of
# ⑤ 集合类型Set()属性方法:size属性、add、has、delete、clear方法,迭代遍历数据:keys()、values()、entries()、for...of遍历,forEach遍历
# ⑥ 小结拓展:获取两个数组交集、并集、差集,获取数组随机元素(验证码)
# 章节13.函数对象数组小结
# ① 对象的方法:for...in(遍历对象)、Object.assign()、Object.create()、Object.freeze()、Object.keys()、Object.values()、Object.entries()
# ② 数组解构:基础用法、省略元素、设置数组元素默认值、嵌套数组(多维数组)的结构赋值、不定元素的解构赋值
# ③ 对象解构:基础用法、重命名解构变量、对象解构时的默认值
# ④ var和let、const的区别
# ⑤ 函数参数默认值:对arguments的影响、对函数length的影响、函数默认表达式、参数默认值的暂时性死区
# ⑥ 函数剩余参数:剩余参数只能出现一个、剩余参数只能放在最后
# ⑦ 展开运算符:针对可迭代对象展开、字面量形式的对象做对象克隆和对象合并
# 章节14.浏览器对象模型BOM及浏览器检测
# ① window 对象:属性和方法、系统对话框、调出打印机print()、网页新建窗口open()、窗口页面的位置:screenX(screenLeft)和 screenY(screenTop)、窗口页面的大小:innerWidth和 innerHeight,outerWidth 和 outerHeight,document.documentElement.clientWidth和document.documentElement.clientHeight
# ② window对象:超时调用:setTimeout()方法、取消超时调用:clearTimeout()方法、间歇调用:setInterval()方法、取消间歇调用:clearInterval()方法、模拟定时器功能,超时调用模拟间歇
# ③ location 对象:获取网址相关信息、assign()方法跳转到指定页面、reload()方法、repalce()方法、获取网址url参数中的键值对、history 对象 : 属性:length,方法:back()、forward()、go(num)
# ④ 获取浏览器相关信息、浏览器插件检测、MIME 类型检测、判断设备是安卓、苹果、是否在微信上面浏览网页、用户查看网页的设备是电脑设备,还是手机设备
# 章节15.网页文档对象模型DOM
# 1、理解DOM
# ① DOM节点树,节点种类:元素节点、文本节点、属性节点
# 2、查找节点信息方法
# ① getElement系列: getElementById()方法,getElementById()方法获取的元素节点属性:tagName、innerHTML等, 获取及设置元素html属性:id,title,style,className等,getElementsByTagName()方法,getElementsByName()方法,getElementsByClassName()方法
# ② querySelector系列: querySelector()方法,querySelectorAll()方法
# ③ 属性操作系列: getAttribute()方法,setAttribute()方法,removeAttribute()方法
# ④ node节点属性: nodeName、nodeType、nodeValue
# ⑤ 层次节点属性: childNodes属性,firstChild 和 lastChild 属性,ownerDocument 属性,parentNode 属性,previousSibling 属性,nextSibling 属性,忽略空白文本节点,attributes 属性
# 3、操作节点
# ① document.write()方法,createElement()方法,appendChild()方法,createTextNode()方法, insertBefore()方法,模拟在指定节点的后面添加一个节点,repalceChild()方法,cloneNode()方法,removeChild()方法
# 4、DOM 类型、扩展、操作内容
# ① DOM 类型: Document类型补充(获取html节点对象,获取body节点对象,获取文档声明:DOCTYPE对象,document.title,document.images,document.links等),Text类型补充(normalize()方法,splitText(num)方法,deleteData删除字符,insertData插入字符,replaceData替换字符,substringData获取字符)
# ② DOM 扩展: scrollIntoView(), children 属性,contains()方法
# ③ DOM操作网页内容:innerText、innerHTML、outerText、outerHTML
# 5、DOM实战:操作表格
# ① DOM创建表格
# ② HTML DOM 来操作表格: 获取表格元素对象, 获取表格的标题对象<caption>,获取表头表尾<thead>、<tfoot>、<tbody>,获取表格的行数,获取表格主体里的行数,获取表格主体内第一行的单元格数量(tr),获取表格主体内第一行第一个单元格的内容(td),删除标题、表头、表尾、行、单元格,HTML DOM 创建一个表格
# 6、操作CSS样式
# ① 行内样式style的获取、赋值、移除属性removeProperty,计算后的样式获取(行内、内联、外联样式):window 对象下getComputedStyle()方法
# 7、操作页面样式
# ① className关键字设置样式,创建函数:hasClass() 判断是否存在某个类名,addClass() 如果不存在的这个类名,添加这个类名,removeClass() 如果存在的这个类名,删除这个类名
# 8、操作CSS外联样式表.css文件
# ① 获取CSSStyleSheet,外联的css样式表对象
# 9、DOM元素尺寸(元素大小)和位置(元素位置)
# ① 获取元素 CSS 大小回顾:通过 style 内联获取元素大小,通过计算getComputedStyle()方法获取元素大小,通过 CSSStyleSheet 对象中的 cssRules属性获取元素大小(需将网页放到服务器上查看)
# ② 获取元素实际大小:clientWidth 和 clientHeight:获取可视区的元素大小,可以得到元素内容及内边距所占据的空间大小,scrollWidth 和 scrollHeight:获取滚动内容的元素大小,offsetWidth 和 offsetHeight:获取元素大小,包含边框、内边距和滚动条
# ③ 获取元素周边大小位置:clientLeft 和 clientTop:获取元素设置了左边框和上边框的大小;offsetLeft 和 offsetTop:获取当前元素相对于父元素的位置;scrollTop 和 scrollLeft:这组属性可以获取滚动条被隐藏的区域大小(滚动条滚动高度宽度),也可设置定位到该区域(定位滚动条); getBoundingClientRect()方法:返回一个矩形对象,包含四个属性:left、top、right和 bottom,分别表示元素各边与页面上边和左边的距离
# 10、动态加载脚本
# ① 动态加载js文件,动态加载样式表
# 章节16.事件
# 1、事件基础知识
# ① 事件处理函数列表
# ② 内联模型
# ③ 脚本模型
# 2、事件处理函数分类
# ① 鼠标事件:click,dblclick,mousedown,mouseup,mouseover,mouseout,mousemove
# ② 键盘事件:keydown,keypress,keyup
# ③ HTML事件(包括表单事件):load,unload,resize,scroll,select,change,input,submit,reset,focus,blur
# 3、事件对象
# ① this 关键字和上下文
# ② 获取事件对象
# ③ 获取鼠标按钮(左键、右键、中间滚轮)
# ④ 可视区及屏幕坐标:clientX,clientY,screenX,screenY,鼠标点击位置距离页面顶部距离(带滚动条)
# ⑤ 修改键:shiftKey对应Shfit 键,ctrlKey对应 Ctrl 键,altKey 对应 Alt 键,metaKey 对应 windows 键,判断是否按下了它们
# ⑥ 键盘事件:键码(键盘上的任意键)keyCode,字符编码(键盘上可以输出字符的键)charCode
# ⑦ 事件对象的常用属性和方法:target,事件冒泡,取消:e.stopPropagation()
# ⑧ 事件对象其他属性方法:relatedTarget(在 mouseover 和 mouseout 事件中获取),e.preventDefault(),contextmenu取消鼠标右击弹出的菜单,鼠标滚轮:mousewheel
# 4、事件绑定
# ① 剖析传统事件绑定问题:同名事件后者覆盖前者,this 传递问题
# ② 现代事件绑定处理函数:添加事件addEventListener(),删除事件removeEventListener(),设置冒泡和捕获
# 章节17.表单处理及错误处理与调试
# 1、表单基础知识
# ① 获取form对象的方法
# ② 提交表单:默认提交form表单按钮type="submit",js中表单提交及阻止提交,让没有提交功能的按钮(其它元素)完成表单提交使用的是form.submit()方法,实现使用键盘 CTRL + enter(回车键)提交数据
# ③ 预防表单数据重复提交,表单重置:按钮重置type="reset",js重置 form.reset()方法
# 2、使用HTML DOM获取表单控件元素
# ① elements属性获取表单控件元素集合
# ② 多个表单字段都使用同一个 name,如单选框多选框,常用属性
# ③ 表单共有字段方法:foucs(),blur(),表单共有的字段事件:blur,change,input,focus
# 3、表单中的文本框
# ① input.value 和 textarea.value 获取输入的内容,defaultValue获取默认设置的value值
# ② 选择文本:使用 select()方法,可以将文本框里的文本选中,并且将焦点设置到文本框中
# ③ 选择部分文本:setSelectionRange()方法,这个方法接受两个参数:索引和长度
# ④ select 事件,选中文本框文本后触发
# ⑤ 获取选择的文本,两个属性:selectionStart 和 selectionEnd
# ⑥ 文本过滤输入(表单验证,文本验证,输入框验证)
# ⑦ 剪切事件:cut,复制事件:copy,粘贴事件:paste,禁用输入法
# ⑧ 利用正则表达式将用户输入的非数字字符替换成空,只留下数字
# ⑨ 输入框自动切换焦点到下一个输入框(类似Tab键),maxlength属性可输入的最大字符长度
# 4、表单中的下拉列表(选择框)
# ① 获取下拉列表对象
# ② 下拉列表多选属性 multiple="multiple"(按住键盘CTRL键进行多选),size显示的行数
# ③ 属性 options(下拉选项的集合)
# ④ 选择选项:选择一项的使用selectedIndex属性,监听的是下拉列表的change事件
# ⑤ 下拉列表动态添加选择项: 使用Option 构造函数,add方法添加选项
# ⑥ 下拉列表动态移除选择项:三种方式(removeChild移除、remove()方法移除和 null 移除)
# ⑦ 下拉列表动态移动选择项(两个下拉列表选项移动)
# ⑧ 下拉列表动态排序选择项(选项排序):属性index
# ⑨ 获取单选框或者多选框选择的值: 判断checked属性是否为真判断选中的项,defaultChecked判断项目原本设置的默认值
# 5、错误与调试
# ① 浏览器错误报告,错误处理:try-catch 语句,finally 子句,错误类型
# ② try-catch使用场景,抛出错误,错误事件error:处理DOM对象产生错误时候使用,比如加载图片失败,错误处理策略,调试技术和调试工具
# 章节18.数据Cookie、XML、JSON
# 1、Cookie、sessionStorage、localStorage
# ① cookie 的组成,编码和解码,失效时间,手动清理cookie,cookie路径访问,cookie限制域名访问,指定访问协议 http https
# ② 封装cookie(创建,获取,删除)
# ③ sessionStorage、localStorage
# ④ cookie 和 localStorage的对比
# 2、XML
# ① 创建 XMLDOM 对象(document.implementaion,DOMParser类型创建XMLSerializer类型进行序列化成字符串),解析错误
# ② 加载读取外部xml文件
# ③ XPath操作XML
# ④ 封装XPath操作xml文件
# 3、JSON
# ①JSON 语法,可以表示三种类型的值
# ② 获取外部json文件
# ③ 解析json字符串(将json字符串转成数组对象——json结构数据):JSON.parse()方法
# ④ js原生值数组、对象转成json字符串--JSON.stringify()
# ⑤ toJSON
# 其它学期课程
# 第一学期(学习顺序:01)
第一学期课程专为零基础的学员定制录制的,纯html+css做企业网站的网页,主讲html和css的相关基础知识,flex布局相关知识,封装css基础样式库,引入字体图标及网页开发基础布局思维,完成企业网站网页的开发过程。
[第一学期学习视频]
# 第二学期【第1季】(学习顺序:02)
# 第二学期【第2季】(学习顺序:03)
JavaScript中的面向对象,类,ajax,封装js库过渡到jQuery, vue.js基础配置网站页面,建议所有学员观看。
[第2季学习文档] [第2季学习视频]
# 第二学期【第3季】(学习顺序:04)
egg.js基础,响应式网页布局,Bootstrap框架,响应式后台系统管理,完整企业网站前后台开发,建议所有学员观看。
[第3季学习文档] [第3季学习视频]
# 第二学期【第4季】(学习顺序:05)
主要对第三季,同学们开发的企业网站,进行一个完整的上线运维流程的一个讲解,同学们将网站开发完成之后,如何进行上线运维,将项目交付给客户。
[第4季学习文档] [第4季学习视频]