外观和布局CSS页面行为JavaScript强调三者的分离前后端分离开发模式

响应式设计Bootstrap框架入门

下载和使用基础样式文本样式、图片样式、表格样式图标库字体图标、SVG

栅格布局工具类

尺寸工具类布局工具类display、flexbox、float其他工具类表单组件库

JavaScript基础语法

数值Number、字符串String、布尔Boolean、未定义Undefined、空引用Nullvar、const、let注意区分大小写

3种基本结构和嵌套

头尾增删元素、指定位置增删元素、排序、查找、迭代、截取与连接、与字符串的转换、展开运算符

BOM模型

window对象location对象navigator对象screen对象history对象定时器

DOM模型

访问节点检测节点类型父子兄关系元素的遍历节点属性创建节点操作节点

DOM与CSS事件和事件驱动

子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情比如读取一个大文件或者发出一个网络请求

子线程有一个局限一旦发射了以后就会与主线程失去同步无法确定它的结束比如处理来自服务器的信息我们是无法将它合并到主线程中去的。

AJAX

是与服务器交换数据的技术它在不重载全部页面的情况下实现了对部分网页的更新

XML

注册load事件在异步任务完成后触发document.getElementById(demo).innerHTMLxhr.responseText;

xhr.onerror

//注册error事件请求遇错处理document.getElementById(demo).innerHTML请求出错;

xhr.open(GET,http://127.0.0.1:5500/data/students.json,

true);

等数据格式文件同时能够把这些外部数据直接载入网页的被选元素中。

$().load()$.get()$.post()$.ajax()……

$(selector).load(demo_test.txt,data,callback);

//$().load方法

$.get(demo_test.txt,function(data,status){console.log(数据:

data

$(button).click(function(){$.ajax({url:demo_test.txt,success:function(result){$(#div1).html(result);}});

Promise

中用于处理异步操作的一种方式它提供了更加优雅和可靠的方式来处理异步代码避免了回调地狱callback

Promise

可参看菜鸟教程https://www.runoob.com/w3cnote/javascript-promise-object.html

.***n()

方法用于处理异步操作成功完成后的回调函数。

它接受两个参数第一个参数是成功时的回调函数第二个参数是可选的失败时的回调函数。

.catch()

请求。

它的设计目标是简单、易用、支持并发请求、提供更好的错误处理和取消请求的功能。

axios中文文档https://www.axios-http.cn/docs/intro

axios特点

提供了丰富的功能如拦截器interceptors、取消请求、自动转换

JSON

提供了良好的错误处理机制可以捕获并处理各种类型的请求错误如网络错误、HTTP

支持取消请求Axios

支持取消正在进行的请求可以防止不必要的请求发送或减少对服务器的压力。

社区活跃Axios

运行时环境用于构建高性能、可扩展的网络应用程序。

它使用非阻塞、事件驱动的方式处理

I/O

node官网下载安装包https://nodejs.org/en/download

node.js特点

JavaScript而不仅限于浏览器端。

这使得开发者可以使用同一种语言JavaScript进行前端和后端开发。

非阻塞

采用单线程模型但通过事件循环机制和异步操作实现了高效的并发处理。

它通过利用事件循环在单个线程中处理多个请求避免了传统多线程模型中线程切换的开销。

模块化系统Node.js

规范来组织代码和模块提供了简单而强大的模块化系统。

开发者可以轻松地创建、导入和共享模块使得代码结构更加清晰和可维护。

包管理器

Manager是世界上最大的开源软件注册表和包管理工具之一。

开发者可以使用

npm

等机制支持异步编程使得开发者可以编写高效的非阻塞代码处理大量并发请求和复杂的异步操作。

跨平台Node.js

拥有庞大而活跃的开发者社区提供了丰富的文档、教程、插件和工具为开发者提供了良好的支持和资源。

模块化编程简介

Node.js等环境中组织和管理代码模块。

它定义了一套规则和约定使得开发者可以将代码模块化实现代码复用、依赖管理和模块导入导出等功能。

CommonJS

规范定义了如何创建和定义模块。

每个文件就是一个模块模块内部的变量和函数默认是私有的不会暴露给外部。

CommonJS模块导出

导出模块中的变量、函数或对象使得其他模块可以引用和使用这些导出的内容。

CommonJS模块导入

使用同步的方式加载模块即在导入模块时会立即加载并执行模块代码然后再继续执行后续代码。

在第一次加载模块时会将模块的导出缓存起来后续再次导入同一个模块时会直接使用缓存的导出内容而不会再次执行模块代码。

适用于服务器端CommonJS

使用同步加载模块的方式并且依赖于文件系统等特性因此在浏览器端并不适用浏览器端通常采用

AMD

关键字来定义和导出模块。

每个文件就是一个模块模块内部的变量、函数和类默认是私有的需要通过

export

关键字导入其他模块的内容可以根据模块路径引入指定的模块并赋值给一个变量。

**异步加载**ES

使用异步加载的方式即在导入模块时不会立即执行模块代码而是在需要使用模块内容时才会动态加载和执行模块代码。

**静态分析**ES

具有静态分析的特性使得在编译阶段就可以确定模块的依赖关系和引用关系有利于代码优化和性能提升。

**作用域管理**ES

中的模块具有自己的作用域模块内部的变量、函数和类默认是私有的不会污染全局作用域。

**适用于浏览器和服务器端**ES

构建并提供了一套声明式的、组件化的编程模型帮助你高效地开发用户界面。

Vue

的设计非常注重灵活性和“可以被逐步集成”这个特点它可适用场景如下

HTML在任何页面中作为

(SSG)开发桌面端、移动端、WebGL甚至是命令行终端中的界面

JS练习

document.getElementById(username).value.trim();var

password

document.getElementById(password).value.trim();if

(username

{//alert(用户名和密码不能为空);document.getElementById(username).focus();return

false;}//

如果输入有效这里可以添加进一步的表单提交逻辑//alert(表单输入有效可以提交表单);//

例如document.getElementById(yourFormId).submit();

}function

2、若用户名和密码都不为空判断用户名和密码是否和给定的常量匹配

核心代码

document.getElementById(username).value.trim();var

password

document.getElementById(password).value.trim();if

(username

{//alert(用户名和密码不能为空);document.getElementById(username).focus();return

false;}//

如果输入有效这里可以添加进一步的表单提交逻辑//alert(表单输入有效可以提交表单);//

例如document.getElementById(yourFormId).submit();//

(username

3、若不匹配提示“登录信息有误”并清空用户名和密码输入并将焦点置在用户名框中

核心代码

document.getElementById(username).value.trim();var

password

document.getElementById(password).value.trim();if

(username

{//alert(用户名和密码不能为空);document.getElementById(username).focus();return

false;}//

如果输入有效这里可以添加进一步的表单提交逻辑//alert(表单输入有效可以提交表单);//

例如document.getElementById(yourFormId).submit();//

(username

{alert(登录信息有误);document.getElementById(username).value

清空用户名document.getElementById(password).value

清空密码document.getElementById(username).focus();

将焦点重新设置到用户名输入框}

4、若匹配提示“登录成功”并将用户信息记录到sessionStorage中出现“自动跳转提示若没有自动跳转请单击此处”的提示信息然后隔1秒后自动跳转到对应的页面咖啡屋的首页

核心代码

document.getElementById(username).value.trim();var

password

document.getElementById(password).value.trim();if

(username

{//alert(用户名和密码不能为空);document.getElementById(username).focus();return

false;}//

如果输入有效这里可以添加进一步的表单提交逻辑//alert(表单输入有效可以提交表单);//

例如document.getElementById(yourFormId).submit();//

(username

{alert(登录成功);sessionStorage.setItem(username,

username);

显示跳转信息并准备跳转document.getElementById(redirectMessage).style.display

1000);}

{alert(登录信息有误);document.getElementById(username).value

清空用户名document.getElementById(password).value

清空密码document.getElementById(username).focus();

将焦点重新设置到用户名输入框}

5、跳转到咖啡屋首页后header区的信息修改为“你好xxx(登录名”左边导航栏增加一行“退出登录”的提示

6、点击“退出登录”后可转到登录页并保证咖啡屋首页回复到未登录状态用户登录信息清理完成。

核心代码

sessionStorage.getItem(username);if

(username)

{document.getElementById(userGreeting).textContent

你好${username};}else{document.getElementById(userGreeting).textContent

Jay17\s

清空sessionStoragewindow.location.href

./login.html;

7、学习小结在实验2的小结部分对实验中用到的JavaScript知识进行小结可以用思维导图的形式。

1、完成注册表单的信息获取并显示在表单下方的div#result中

核心代码

document.getElementById(username).value.trim();

var

document.getElementById(password).value.trim();//

(username

document.getElementById(username).focus();

return

例如document.getElementById(yourFormId).submit();//

(username

sessionStorage.setItem(username,

username);

document.getElementById(redirectMessage).style.display

block;

../html/FlexBox_coffeeshop.html;

1000);

document.getElementById(username).value

清空用户名

document.getElementById(password).value

清空密码

document.getElementById(username).focus();

将焦点重新设置到用户名输入框

document.getElementById(username).value;var

password

document.getElementById(password).value;console.log(name);//

resultText

显示信息document.getElementById(result).innerHTML

resultText;}function

init(){//validateForm();submitForm();

}init();实现效果

2、完成登录变体2创建一个Student类并在Student类中创建登录验证方法用户输入的信息和基于该类创建的对象信息做比较通过后进入到首页其他逻辑和前一个登录练习相同

核心代码

password}validateLogin(inputUsername,

inputPassword)

document.getElementById(username).valueconst

password

document.getElementById(password).valueif

(student.validateLogin(username,

password))

{alert(登录成功)sessionStorage.setItem(username,

username)

显示跳转信息并准备跳转document.getElementById(redirectMessage).style.display

../html/FlexBox_coffeeshop.html},

1000)}

{alert(登录信息有误)document.getElementById(username).value

清空用户名document.getElementById(password).value

清空密码document.getElementById(username).focus()

将焦点重新设置到用户名输入框}

document.getElementById(username).valuevar

password

document.getElementById(password).valueconsole.log(name)//

resultText

显示信息document.getElementById(result).innerHTML

resultTextlogin()

}3、完成登录变体3用户输入的信息和json文件中的数据做比较通过后进入到首页其他逻辑和前一个登录练习相同

1、原来的注册表单程序用jQuery来实现注册表单中原来的兴趣和性别呈现未被选中状态。

2、升级要求如下

2在提交按钮和文本区失去焦点时判断个人介绍字数不足20字提示“字数不足”

3在下方的div框中逐行显示获取到的用户输入项内容并新增“重置”按钮单击此按钮后清空该行内容并将注册表单对应的输入选项清空还原到未选中状态

const

document.getElementById(username).value.trim()var

password

document.getElementById(password).value.trim()if

(username

{//alert(用户名和密码不能为空);document.getElementById(username).focus()return

false}//

如果输入有效这里可以添加进一步的表单提交逻辑//alert(表单输入有效可以提交表单);//

例如document.getElementById(yourFormId).submit();//

(username

{alert(登录成功)sessionStorage.setItem(username,

username)

显示跳转信息并准备跳转document.getElementById(redirectMessage).style.display

../html/FlexBox_coffeeshop.html},

1000)}

{alert(登录信息有误)document.getElementById(username).value

清空用户名document.getElementById(password).value

清空密码document.getElementById(username).focus()

将焦点重新设置到用户名输入框}

password}validateLogin(inputUsername,

inputPassword)

document.getElementById(username).valueconst

password

document.getElementById(password).valueconst

introduce

document.getElementById(introduce).valuelet

selectedGenderif

(document.querySelector(input[namegender]:checked))

{selectedGender

document.querySelector(input[namegender]:checked)}const

interests

document.getElementById(interests).value//

个人介绍不能少于20个字符if

(student.validateLogin(username,

password))

{alert(登录成功)sessionStorage.setItem(username,

username)

显示跳转信息并准备跳转document.getElementById(redirectMessage).style.display

../html/FlexBox_coffeeshop.html},

1000)}

{alert(登录信息有误)document.getElementById(username).value

清空用户名document.getElementById(password).value

清空密码document.getElementById(username).focus()

将焦点重新设置到用户名输入框}

document.getElementById(username).valuevar

password

document.getElementById(password).valueconsole.log(name)//

resultText

显示信息document.getElementById(result).innerHTML

resultTextlogin()

{document.getElementById(username).value

document.getElementById(username).focus()

}function

{document.getElementById(password).value

document.getElementById(password).focus()

}function

document.querySelector(input[namegender]:checked)radio.checked

false

{document.getElementById(interests).value

document.getElementById(interests).focus()

}function

{document.getElementById(introduce).value

document.getElementById(introduce).focus()

}//

3、在实验报告的实验小结中以思维导图形式绘制jQuery的知识点

1、登录用户名和密码信息存储在数据文件中用jQuery发出AJAX请求后根据获取的用户信息进行比对其他登录实现逻辑和练习1同。

const

document.getElementById(username).value.trim()var

password

document.getElementById(password).value.trim()if

(username

{//alert(用户名和密码不能为空);document.getElementById(username).focus()return

false}//

如果输入有效这里可以添加进一步的表单提交逻辑//alert(表单输入有效可以提交表单);//

例如document.getElementById(yourFormId).submit();//

(username

{alert(登录成功)sessionStorage.setItem(username,

username)

显示跳转信息并准备跳转document.getElementById(redirectMessage).style.display

../html/FlexBox_coffeeshop.html},

1000)}

{alert(登录信息有误)document.getElementById(username).value

清空用户名document.getElementById(password).value

清空密码document.getElementById(username).focus()

将焦点重新设置到用户名输入框}

password}validateLogin(inputUsername,

inputPassword)

document.getElementById(username).valueconst

password

document.getElementById(password).valueconst

introduce

document.getElementById(introduce).valuelet

selectedGenderif

(document.querySelector(input[namegender]:checked))

{selectedGender

document.querySelector(input[namegender]:checked)}const

interests

document.getElementById(interests).value//

个人介绍不能少于20个字符if

(student.validateLogin(username,

password))

{alert(登录成功)sessionStorage.setItem(username,

username)

显示跳转信息并准备跳转document.getElementById(redirectMessage).style.display

../html/FlexBox_coffeeshop.html},

1000)}

{alert(登录信息有误)document.getElementById(username).value

清空用户名document.getElementById(password).value

清空密码document.getElementById(username).focus()

将焦点重新设置到用户名输入框}

document.getElementById(username).valuevar

password

document.getElementById(password).valueconsole.log(name)//

resultText

显示信息document.getElementById(result).innerHTML

resultTextlogin()

{document.getElementById(username).value

document.getElementById(username).focus()

}function

{document.getElementById(password).value

document.getElementById(password).focus()

}function

document.querySelector(input[namegender]:checked)radio.checked

false

{document.getElementById(interests).value

document.getElementById(interests).focus()

}function

{document.getElementById(introduce).value

document.getElementById(introduce).focus()

}function

{alert(用户名和密码不能为空);$(#username).focus();return

false;}//

使用jQuery发出AJAX请求获取数据文件$.getJSON(../data/users.json,

function(data)

{alert(登录成功);sessionStorage.setItem(username,

username);

显示跳转信息并准备跳转$(#redirectMessage).show().delay(1000).fadeOut(function()

../html/FlexBox_coffeeshop.html;

else

{alert(登录信息有误);$(#username).val();

将焦点重新设置到用户名输入框}}).fail(function()

{alert(无法加载用户数据请检查文件路径是否正确);});

}function