计算机专业实用技能导引 (7).pdf
Web 开发基础 HTML/CSS/JS/网络相关知识课程目标 HTML熟悉典型的 HTML 标签与属性，能够阅读简单的 HTML 文本了解五彩缤纷的网页是如何呈现在用户眼前的CSS熟悉 CSS 基本语法，掌握简单的 CSS 选择器的书写理解 CSS 盒模型，掌握常用的网页布局技术JS熟悉 JavaScript 的基本语法，理解 JavaScript 的静态弱类型特性了解 npm，熟练掌握第三方库的安装与使用掌握 JavaScript 中变量的作用域，掌握 this 的指代了解 JavaScript 的单线程特性，掌握 JavaScript 异步网络相关知识了解基本的浏览器安全性防范措施HTML 初识 HTML HTML 的全称为 HyperText Markup Language（超文本标记语言），是一种用于描述网页的标记语言。HTML 并不需要刻意学习。观察示例，理解 HTML 的结构，具备基本的阅读能力，能够动手魔改、仿写简单的页面即可。这是最简单的 HTML 文本：你可以打开demo/html/0.html查看完整示例。我们可以发现，HTML 文本由层级结构组成，每一级内容被一对 HTML 标签包围，标签之间可以嵌套。例：这是标题 这是段落。和我一起读：你好世界内容名称含义属性段落一级标题二级标题分组链接href=链接目标图片src=图片地址alt=占位文本粗体斜体段落内换行例：例：典型的 HTML 标签与属性 HTML 文本具有丰富的格式，如加粗、斜体、删除。标签之间可以嵌套，以表达更为多样的格式。这是 HTML 无序列表：第一项 第二项 第三项 这是 HTML 有序列表：第一项 第二项 第三项 你可以在 HTML 文本中插入链接。你也可以添加图片。用户浏览器百度服务器输入 请让我访问你的主页（此处省略一系列网络原理过程）这是我主页的 HTML 文本，给你我帮你渲染好了百度发来的 HTML 文本这就是百度的主页啦用户浏览器百度服务器五彩缤纷的网页是如何呈现在用户眼前的 服务器并不一定（也没有义务）返回 HTML 文本一句 Hello,world!、一段 JSON 字符串、一张图片、一段音频，甚至什么都不返回，都是可以的。在浏览器中，同学们可以使用开发者工具观察网页的 HTML 文本。在暑培后续的前后端开发课程中，同学们要实现的就是“服务器”的部分。CSS 样式与样式表 CSS 的全称为 Cascading Style Sheets（层叠样式表），可以系统地描述网页内容的布局与面貌。样式表的意义可以通过demo/css/0.html得到展示。该示例借用了 w3school 的示例。常见的样式有：颜色、字体、边距、对齐、背景、边框等。例：淡蓝色背景，白色居中标题，正文字号 20px，链接使用红色字类 我们可以自定义 CSS 类样式。可以引入标签以更好地分块。例：设置红、绿、蓝三种主题样式。选择器与组合选择器 例：只希望theme类下的链接变为红色，其余位置的链接使用默认样式在 CSS3 中包含了四种组合方式：后代选择器(以空格 分隔)子元素选择器(以大于号 分隔）相邻兄弟选择器（以加号+分隔）普通兄弟选择器（以波浪号 分隔）CSS 选择器语法还支持针对元素的属性、元素的序号等进行选择。限于时间关系，在这里不一一展开。盒模型 页面布局 示例：demo/css/4.htmlfloat CSS 的float属性用于元素的浮动。元素只能水平方向浮动。一个浮动元素会尽量向左（left）或向右（right）移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。position CSS 的position属性用于定位，取值有static（默认，不用写）、relative、fixed、absolute（用得最多）和sticky五种。media 用于实现响应式布局。例如当屏幕宽度小于 600px 时，写作JS media screen and(max-width:600px)/TODO基本语法 推荐教程：重新介绍 JavaScript忠告：养成句末加分号的好习惯；不要滥用 JavaScript 的弱类型特性；谨慎使用 JavaScript 面向对象；网页中请使用严格模式。NPM NPM 的全称为 Node Package Manager（Node.js 的包管理器），用于管理在 Node.js 中进行 JavaScript 开发时所需用到的第三方库。每个 Node.js 项目一般都会拥有一个package.json文件，其中的dependencies字段用于描述该项目所依赖的第三方库。package-lock.json是 npm 自动生成的描述项目依赖的文件，一般建议在版本控制系统中保留。node_modules/目录下就是第三方库的源码了，千万不要把它保留在版本控制系统中，也千万不要把它混在你的项目文件中打包发给别人！（因为它实在是太大了，包含的文件太多了。）NPM 的官网地址平常安装第三方库，一般采用命令如果频繁遭遇网络问题，可以考虑使用以下命令更换源：变量作用域与this JavaScript 中的变量作用域分为全局作用域和函数作用域。随着let和const关键字的引入，JavaScript 中的代码块也拥有了作用域。this是 JavaScript 中一个特殊的变量，辨别this的指代是 JavaScript 学习者的必备技能。当this不在任何function函数体内时，this指向的是全局对象。当this在function函数体内时，this在包含它的最内层function函数被调用时确定，指向该函数被绑定的对象：凭空调用的函数，在严格模式下，不绑定到任何对象，此时this为undefined；某个对象的成员函数被该对象调用时，绑定到该对象上；function函数也可以通过call显式绑定到其他对象上。凭空调用的函数在非严格模式下默认绑定到全局对象上，但如今不提倡这种写法。例：npm install npm config set registry http:/registry.npm.taobao.org/拓展：箭头函数不会绑定自己的this。运行时确定this的指代时，会无视箭头函数的作用域，只找寻包含this的最内层的function函数。当你需要跨函数体指代对象时，可以试试箭头函数。异步 JavaScript 被设计为一门单线程的语言，任何 JavaScript 语句都必须在主线程上执行。然而网络请求是一类巨大耗时的服务。假如将网络请求放在主线程上同步执行，势必会阻塞主线程。异步的需求天然产生了。use strict;function f()console.log(this);f();/凭空调用的函数，在严格模式下，this 为 undefinedconst a=233;f.call(a);/通过 call 显示绑定到 rr 上，this 为 a，不过这种用法比较奇怪const jd=firstName:John,lastName:Doe,printFullName:function()console.log(this.firstName+this.lastName);,;const rr=firstName:Richard,lastName:Roe,;jd.printFullName();/调用 jd 的成员函数，this 为 jdjd.printFullName.call(rr);/通过 call 显示绑定到 rr 上，this 为 rr /不过这种用法同样比较奇怪JavaScript 通过事件循环机制确保异步的代码均能被执行到，下面的问题是，异步的代码怎么写呢？下面以fetch为例，逐步深入介绍 JavaScript 异步。在 Node.js 中使用fetch，需要先安装node-fetch。例：例：use strict;const fetch=require(node-fetch);const main=()=let length=0;fetch(https:/ strict;const fetch=require(node-fetch);const main=async()=let length=0;并不是所有网络请求库都采用 Promise/then 这套语义，这意味着对于一些网络请求库，它们无法使用 async/await 的语法进行调用。不过，最关键的还是认识到异步现象的存在，并且明白可以采用回调函数的思想，实现异步代码的书写。浏览器中的 JavaScript JavaScript 代码最主要的运行环境是 Node.js 和各大浏览器，不同环境下的 JavaScript 代码能够调用的接口也各有差异。例如 Node.js 下的 JavaScript 代码可以读写本机文件，而浏览器中的 JavaScript 代码可以操作网页。浏览器中的 JavaScript 使用标签嵌入 HTML 页面。当浏览器收到 HTML 页面时，它会先将所有标签中的代码拼接起来，并立刻执行。这里提两点浏览器中的 JavaScript 特有的地方。一是浏览器中有window、document等对象，其中window指全局对象，而document指当前的网页文档。二是document具备一系列可以操作网页的成员函数，例如getElementById、getElementByClassName等。网络相关知识 HTTP 与 HTTPS 两者都是超文本在互联网上的传输协议，区别在于 HTTPS 采用一些加密手段，保证数据不被窃听和篡改。浏览器会禁止 HTTPS 页面内加载 HTTP 资源，因为这打破了 HTTPS 的安全性。跨域资源共享 跨域的请求一般是危险的，比如你应该不会希望某个不知名小网站访问你的并替你把课程退光了。幸运的是，浏览器对跨域请求采取了默认禁止的态度。当然，服务器有权决定自己所信任的域名。假如信任这个不知名小网站，并告诉了用户的浏览器，那么当这个不知名小网站试图访问时，浏览器也就无权阻拦了。const response=await fetch(https:/ content=await response.text();console.log(content);length=content.length;console.log(length);main();
