现代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

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×