教程链接：全栈公开课2020
Web 开发第一规则: 始终在浏览器上打开你的开发者控制台。 例如Chrome，在 macOS 上，按 F12或者 option-cmd-i打开控制台。 在 Windows 上，按 F12或 ctrl-shift-i打开控制台。
传统的网络应用
在传统的 web 应用中，浏览器是个“憨憨”。 它只会从服务器获取 HTML 数据，所有应用的逻辑都在服务器上处理。 服务器中的程序可以是，赫尔辛基大学Web-palvelinohjelmointi课程中的 Java Spring、也可以是 tietokantasovellus课程中的 Python Flask ，又或者是 Ruby on Rails。
本课程都将会使用 Node.js 和 Express 来创建 Web 服务器。
在浏览器上运行应用逻辑
可以使用插件来处理 Json 格式。 例如，将 JSONView 安装到 Chrome，然后重新加载页面。
事件处理和回调函数
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// code that takes care of the server response
}
};
xhttp.open('GET', '/data.json', true);
xhttp.send();
这种调用事件处理程序的机制在 JavaScript 中非常常见。 事件处理函数被称为回调函数（callback functions）。
Document Object Model
文档对象模型(Document Object Model，DOM)是一个应用编程接口(Application Programming Interface，API) ，它支持对 web 页面对应的元素树进行编程修改。
var ul = document.createElement('ul');
ul.setAttribute('class', 'notes');
document.getElementById('notes').appendChild(ul);
Single page app
近年来，创建网络应用的单页应用 Single-page application (SPA) 风格出现了。SPA 类型的网站不会从服务器上单独获取所有页面，而是只从服务器获取一个 HTML 页面，其内容由 JavaScript 在浏览器中执行操作。
Javascript 库
与仅使用 JavaScript 和 DOM-API 不同，通常会使用比直接操作 DOM-API 更容易的工具库来操作页面。
JQuery-->AngularJS-->React-->VueJS
Full stack -web development
我们将使用 JavaScript 编写后端代码，使用 Node.js 运行时环境。 在全栈的多个层次上使用相同的编程语言，给全栈 web 开发提供了一个全新的维度。 然而，对于所有层次的栈，使用相同的编程语言(JavaScript)并不是全栈 web 开发的必要条件。
补充内容
在线通过代码绘制时序图websequencediagrams，如下所示:
browser->server: HTTP GET https://fullstack-exampleapp.herokuapp.com/notes
server-->browser: HTML-code
browser->server: HTTP GET https://fullstack-exampleapp.herokuapp.com/main.css
server-->browser: main.css
browser->server: HTTP GET https://fullstack-exampleapp.herokuapp.com/main.js
server-->browser: main.js
note over browser:
browser starts executing js-code
that requests JSON data from server
end note
browser->server: HTTP GET https://fullstack-exampleapp.herokuapp.com/data.json
server-->browser: [{ content: "HTML is easy", date: "2019-05-23" }, ...]
note over browser:
browser executes the event handler
that renders notes to display
end note
