# html + css + javascript开发企业网站

# 1.第二学期第一季课程介绍

适用人群
1、初中以上学历，零基础，喜欢编程的所有从业人员，从零学起（需学完 第一学期的课程）；
2、会做简单的网页，但是不会JavaScript脚本，从零开始学习JS的大学生或者编程爱好者；
3、不清楚学习路线，不知道如何下手学习网页和网站开发的人；
4、手里有客户资源，又不想找别人做，想自己做项目如：网站、系统、APP、小程序等；
5、想学习编程搞副业的人；

课程概述
【课程概述】
本季课程作为第二学期第一季的课程，重点带大家从0开始，学习我们网页开发中，必不可少的知识环节：JavaScript，也就是我们常说的js (脚本)。

我们第1季的课程主讲js的基础知识：javascript基础、javascript运算符、流程控制语句、javascript函数、javascript对象、javascript数组、时间和日期、Function类型、内置对象：Global、Math对象，变量、作用域和内存问题、匿名函数和闭包、javascript基本包装类型、函数对象数组小结、浏览器对象模型BOM及浏览器检测、网页文档对象模型DOM、事件、表单处理及错误处理与调试、数据Cookie、XML、JSON，适合所有同学学习，不管你是有一定js基础，还是完全没有js基础，都建议进行学习，虽然说我们第1季讲的是基础，但是涉及的知识面很广，我们后面的课程包括将来开发项目，很多需要依赖这些基础。

具体课程安排，请看下面的文档目录

# 2.本季课程视频介绍

(opens new window)

# 3.课程免费试看（1-5课）

课程免费试看（1-5课） (opens new window)

# 4.课程视频学习

第二学期第一季【网易云课堂】 (opens new window)
第二学期第一季【B站】 (opens new window)

# 5.查看课程文档目录

# 章节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

# ② 封装cookie(创建，获取，删除)

# ③ sessionStorage、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

← 第一期企业网页开发第二学期第二季（课程学习顺序：03） →