近期在学习IBM全栈应用开发微学士课程，故此记录学习笔记。

1. 云编程入门

SASS：语法强大的样式表（Syntactically Awesome Style Sheets）。

CSS的扩展
可以使用变量、嵌套规则、内联导入等方法来保持条理清晰
更快、更轻松地创建样式表

LESS：动态样式语言（Leaner Style Sheets）。

增强CSS
向后兼容CSS
Less.js是一种JavaScript工具，可将LESS样式转换为CSS样式

1.1. JavaScript框架

1.1.1. Angular

开源
由Google维护
让网站快速高效地呈现HTML页面
内置路由器、表单验证工具

1.1.2. React

由Facebook开发和维护
用于构建和渲染网页组件的JavaScript库

1.1.3. Vue

由社区维护，其主要重要是视图层，包括用户界面、按钮和可视化组件
灵活、可扩展，能与其他框架很好地集成
适应性强

1.2. 代码库

jQuery：简化DOM操作的JavaScript库
Email-validator：验证电子邮件地址的构造是否正确有效
Apache Commons Proper：可重复使用的Java组件

1.3. CI/CD

CI指的是“持续集成”，CD指的是“持续交付”或“持续部署”。

CI/CD是开发团队的最佳实践，可帮助团队更快地交付高质量的软件。

通过构建自动化服务器实施，CI确保所有代码组件顺利协同工作，而CD则确保代码在构建后自动部署到生产环境。

1.4. 构建工具

构建工具是一种将源代码转换为二进制文件以便安装或部署的工具。

它在有许多相互连接的项目的环境中非常有用，因为它可以自动化构建过程，从而减少了手动操作的数量。

构建自动化实用程序：通过编译和链接源代码来生成可执行文件
构建自动化服务器：按计划或触发式执行构建自动化实用程序

Webpack：模块打包器，将应用程序的所有模块打包到一起

Babel：JavaScript编译器，将ES6+代码转换为向后兼容的JavaScript代码

Web Assembly：一种可移植、体积小、加载快的二进制格式，可在Web上运行

1.4.1. 云应用程序软件包管理器

npm：Node.js的包管理器
Maven：Java的包管理器
Gradle：Java的构建自动化工具
RubyGems：Ruby的包管理器
Pip：Python的包管理器
Conda：Python的包管理器

1.5. API、路由和端点

API（应用程序编程接口）是一组定义了应用程序如何与其他软件组件进行交互的规则。它处理数据的请求和响应。

路由是一种将URL映射到应用程序中的特定端点的方法。它是通往网站的路径。

端点可以是API也可以是路由。它是应用程序中的特定位置，用于处理特定的请求。

1.6. ORM

ORM（对象关系映射）是一种将对象模型映射到关系模型的技术。它可用于连接数据库和检索正确的数据，并可隐藏查询数据库的部分复杂性。

2. HTML概述

2.1. HTML5规范

定义了HTML5，可以用HTML或者XML编写
定义了一种可与早期HTML实现互操作的模式

2.2. HTML5的新特性

改进了语义元素
包括了API，如网络存储、地理定位、拖放和多媒体
对网页进行了分类
开发了跨浏览器和跨平台的应用程序
创造了引人入胜的用户体验

关键主题：

语法与HTML4和XHTML1文档兼容
将用户代理和作者的一致性要求分开
- 用户代理：支持早期用户代理规范的元素和属性
- 作者：删除了一些元素和属性以简化语言

2.3. 元素

元素是HTML文档的构建块，由开始标记、结束标记和内容组成。

HTML5新增了许多元素，如：

<section>：定义文档中的节
<article>：定义独立的内容
<aside>：定义页面内容之外的内容
等等等等

2.4. DOM

DOM（文档对象模型）是一种将HTML文档表示为树结构的方法。它定义了访问和操作HTML文档的标准。

属性	描述
`head`	返回文档的`<head>`元素
`title`	设置或返回文档的`<title>`元素
`images`	返回文档中的所有`<img>`元素
`lastModified`	返回文档最后修改的日期和时间
`scripts`	返回文档中的所有`<script>`元素
`getElementById()`	返回第一个具有指定ID的元素
`getElementByTagName()`	返回具有指定标签名称的所有元素的集合
`open()`	打开一个流，以收集来自任何`write()`或`writeln()`方法的输出
`write()`	向文档写入HTML表达式或JavaScript代码
`close()`	关闭由`open()`方法打开的输出流

例子：

<script type="text/javascript">
    function textChecker() {
        const textField1 = document.getElementById('textField1');
        if (textField1.value === '') {
            alert('Please type in the field');
        } else {
            alert('You entered: ' + textField1.value);
        }
    }
</script>
<body>
<input type='text' id='textField1'>
<input type='button' onClick='textChecker()' value='Submit'>
</body>

2.4.1. DOM树访问器

每个HTML和XML文档都由一个文档对象来表示，DOM树访问器可用于访问和操作该文档对象。

2.5. XML

XML（可扩展标记语言）是一种用于定义其他标记语言的元语言。它是一种可扩展的标记语言，可用于定义其他标记语言。

例子：

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />  
        <title>Example document</title>
    </head>
    <body>
        <p>
            Example paragraph.
        </p>
    </body>
</html>

内容类型必须指定为XML媒体类型。

那HTML和XHTML哪个更好呢？

XHTML中标签必须小写、代码必须格式正确；HTML中标签可以大写，代码格式不重要、允许使用不匹配的引号、非结束元素和非包含元素。

2.6. 脚本

脚本是一种用于控制应用程序行为的编程语言。它可以嵌入到HTML中，也可以作为外部文件引用。

脚本提供了交互式用户体验，用于各种用途，如表单验证、动画、游戏、动态更新等。

开发者可以使用<script>元素将脚本嵌入到HTML中。

2.7. iframe

iframe是一种HTML元素，用于在网页中嵌入另一个网页。它是一种内联框架，可用于在网页中显示其他网页。

iframe可以用于显示广告、嵌入视频、显示其他网站的内容等。

例子：

1	<iframe src=""></iframe>

为了防止授予隐式权限，iframe可以使用sandbox属性。

1	<iframe src="" sandbox></iframe>

2.8. 浏览器

并非所有浏览器都完全支持HTML5和CSS3。比方说<input type="date">，在不同浏览器中的显示效果是不一样的。

可以使用JavaScript来检测浏览器是否支持某些功能。

例子：

<body>
    <form id='thisform'></form>
    <script>
        const datepicker = document.createElement('input');
        const formelement = document.getElementById('thisform');
        datepicker.setAttribute('type', 'date');
        formelement.appendChild(datepicker);
        if (datepicker.type === 'text') {
            alert('Date input not supported');
        }
    </script>
</body>

3. CSS概述&HTML5元素

3.1. HTML5结构元素

<article>：代表独立的内容，如博客文章、报纸文章、杂志文章或论坛帖子；和<time pubdate ...>属性一起使用可以表示发布日期
<section>：代表文档中的节或主题，如章节、页眉、页脚或文档中的其他部分；它可以包含标题
<header>：代表文档或节的标题；它可以包含标题
<footer>：代表文档或节的页脚；它可以包含页脚

3.1.1. 内容分组

<div>：提供了灵活的控制，可将样式应用于文档的各个部分；除了对内容进行分组之外，它没有任何特定的含义
<aside>：代表页面内容之外的内容，如侧栏、广告、导航链接、引用或其他类似的内容
<nav>：代表导航链接的部分，如菜单、目录或索引
<figure>：代表独立的内容，如图表、图像、照片、代码清单、音频或视频
<figcaption>：代表<figure>元素的标题

3.2. CSS

CSS设计了HTML文档的外观和样式。

在CSS中，子元素通常继承了父元素的样式。

CSS可以作为HTML标签、文档标题、文档头部、文档内部或外部的样式表来实现。

数据与设计分离，这意味着可以在不更改HTML的情况下更改样式。
使用HTML向浏览器发送数据，并使用CSS对数据进行设计，这允许在不进行设计的情况下根据特殊的无障碍需求呈现网页。

将CSS应用于HTML文档有三个方法，它们的顺序决定了优先级：

内联样式：将样式应用于单个元素
内部样式表：将样式应用于整个文档
外部样式表：将样式应用于多个文档

3.2.1. 布局

流式布局（Fluid Layout）：使用百分比来定义宽度，使网页能够适应不同的屏幕尺寸
- 元素的尺寸根据浏览器窗口的大小而变化
- 优点：适应性强
- 缺点：设计困难
固定布局（Fixed Layout）：使用像素来定义宽度，使网页在不同的屏幕尺寸下保持固定的宽度
- 元素的尺寸不会随着浏览器窗口的大小而变化
- 优点：设计简单
- 缺点：不适应不同的屏幕尺寸

3.2.2. CSS框架

CSS框架是一种用于设计网页的CSS库。它们提供了一组可重复使用的CSS类，可用于设计网页。

不使用任何框架的情况下，开发者需要编写大量的CSS代码来设计网页。优点是可以完全控制网页的设计，缺点是需要花费大量的时间和精力

例如：
1
2
3
4
5
6
7
a {
color: red;
text-decoration: underline;
}
a:hover {
color: rgb(185, 28, 28);
}
实用优先的框架：Tailwind CSS，它提供了可以使用的CSS属性。优点是给予了开发者更多的控制权

例如：
1
<a href="..." class="underline text-red-500 hover:text-red-700">Dangerous Link</a>
组件框架：Bootstrap，它提供了一系列可重复使用的预定义组件。优点是可以快速设计网页，缺点是开发者无法完全控制网页的设计

例如：
1
<a href="..." class="link-danger">Dangerous Link</a>

4. 网络应用程序的 JavaScript 编程

4.1. JavaScript的性质

JavaScript是一种脚本语言，用于控制应用程序的行为。它是一种解释性语言，不需要编译。

源自ECMAScript标准
最初设计用于在NetScape Navigator中使用
与Java无关！
JavaScript解释器嵌入在浏览器中，为静态网页内容添加动态功能
核心功能为异步JavaScript和XML（AJAX）

4.2. 变量作用域

变量作用域是指变量在程序中可见的区域。在JavaScript中，变量可以是全局的或局部的。

全局变量：在函数外部声明的变量
局部变量：在函数内部声明的变量

不使用var关键字声明的变量是全局变量，即使它们在函数内部声明。其值为undefined。

4.3. 函数

例子：

function add(n, m) {
    return n + m;
}
var x = add(1,2); // returns 3
x = add(1.23, 3.45); // returns 4.68
x = add("hello", "world"); // returns "helloworld"

function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.getName = function () {
        return this.make + ' ' + this.model + ' ' + this.year;
    }
}
var c = new Car ("Meridian", "Saber GT", 2012);
alert(c.getName()); // displays "Meridian Saber GT 2012"

4.4. API

常用的API：

文档	元素	Window
`document.getElementById()`	`element.innerHTML`	`window.open`
`document.getElementByTagName()`	`element.style`	`window.onload`
`document.createElement()`	`element.setAttribute`	`window.scrollTo`
`parentNode.appendChild()`	`element.getAttribute`

例子：

// how to retrieve all the image elements from a web page
var imgSet = document.getElementsByTagName("img");
var output = "";
for (var i = 0; i < imgSet.length; i++) {
    output += "<p>Source for image ";
    output += i;
    output += ": ";
    output += imgSet[i].src;
    output += "<\/p>";
}
document.write(output);

<!-- How to add a node to a document -->
<head>
    <script>
        function addPara() {
            const newPara = document.createElement("p");
            const newText = document.createTextNode("Hello World!");
            newPara.appendChild(newText);
            document.body.appendChild(newPara);
        }
    </script>
</head>
<body onload="addPara()">
</body>


<script>
    onload = (function () {
        addPara();
    })();

    function addPara() {
        const newPara = document.createElement("p");
        newPara.innerHTML = "Hello world!";
        document.body.appendChild(newPara);
    }
</script>

4.5. HTML中的脚本

脚本为作者提供了一种以高度交互方式扩展HTML文档的方法，例如：

在加载HTML文档后运行
验证表单并处理输入的内容
由影响文档的事件触发
在HTML页面中动态创建内容

4.5.1. 脚本不可用时

如果浏览器不支持脚本或者脚本被禁用，可以使用<noscript>元素来提供替代内容。

1
2
3

<noscript>
    <p>JavaScript is not enabled!</p>
</noscript>

4.6. DOM

万维网联盟（W3C）定义了DOM（文档对象模型）标准，用于访问和操作HTML文档。DOM规范有四级：

DOM Level 0：最初的DOM规范，定义了HTML和JavaScript之间的接口
DOM Level 1：定义了HTML和XML文档的核心接口
DOM Level 2：包括了样式表模型和用于操作附加到文档中的样式信息的接口
DOM Level 3：指定了内容模型和文件验证
DOM Level 4：添加了突变观察器，以替代突变事件

4.6.1. 浏览器的基本DOM模型

window对象：代表浏览器窗口
- 位于对象层级的顶端
- 浏览器加载页面时自动创建
- 可通过JavaScript代码访问属性和函数
- 在客户端JavaScript中，window对象是全局对象
history对象：允许模拟点击浏览器的前进和后退按钮
location对象：代表当前加载的文档的URL
navigator对象：代表浏览器的信息
screen对象：代表用户的屏幕信息
document对象：代表当前加载的文档

4.6.2. DOM第二级

DOM第二级添加了回车、制表符和空格。

节点类型	整数值	节点名称	节点值	描述
元素	1	`Tag name`	`null`	任意HTML标签
属性	2	`Attribute name`	`Attribute value`	键值对
文本	3	`#text`	`Text content`	元素包含的文本
注释	8	`#comment`	`Text comment`	HTML注释
文档	9	`#document`	`null`	文档对象
文档类型	10	`DOCTYPE`	`null`	DTD规范
Fragment	11	`#document fragment`	`null`	文档外的节点

DOM二级节点对象属性和相应的数据类型：

对象属性	数据类型	描述
`nodeName`	字符串	参考上表
`nodeValue`	字符串	参考上表
`nodeType`	整数	整数常数；参考上表
`parentNode`	对象	最近的包含对象
`childNodes`	数组	所有的子节点
`firstChild`	对象	第一个子节点
`lastChild`	对象	最后一个子节点
`Attributes`	NodeMap	属性的数组

IBM全栈开发【2】：网页三剑客