现代Web编程-基础

教程链接：全栈公开课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

# 现代Web编程