Full Stack Open學習筆記

February 7, 2024

赫爾辛基大學的Full-stack Web Development網課，分為6個部分，完成多個exercise後可以獲得證書。 #CSS #JavaScript #React

Part 0

這部分是介紹這門課的運作和計分模式。使用Github登入自帶的submission system並提交作樂。

如果想要獲得證書，需要完成exercie達到一定數量。如果想要獲得學分（ECTs），則需要註冊成為赫爾辛基大學的學生。完成課程後不管多久，想要學分都可以再申請。

Fundamentals of web apps

在開發web app時，要時刻記得打開瀏覽器的dev tool。

HTTP Get

![[Screenshot 2024-02-07 at 8.33.37 PM.png]] Explain the network Headers 'General' shows the browser requested the address [] using the Get method, and that the request was successful, as the response had the code 304, meaning the cached version of the resource can be shown to users without a need to transfer it again.

Sequence diagram ![[Pasted image 20240207204407.png]] 這張順序表顯示了browser and server 是怎樣交流的。時間順序從上到下，所以先處理第一個request，再是第二個。

Traditional web application

傳統的web app是怎麼運作的呢？browser 只從server fetch數據，所有的app logic都在server中。A server can be created using Java Spring , Python Flask or Ruby on Rails to name just a few examples.

Event Handles and Callback functions

Structure of the code:

var xhttp = new XMLHttpRequest()

xhttp.onreadystatechange = function() {
  // code that takes care of the server response
}

xhttp.open('GET', '/data.json', true)
xhttp.send()

On this line, an event handler for the event onreadystatechange is defined for the xhttp object doing the request. When the state of the object changes, the browser calls the event handler function. `xhttp.onreadystatechange = function () {

Document Object Model or DOM

Document Object Model, or DOM, is an Application Programming Interface (API) that enables programmatic modification of the element trees corresponding to web pages.

The JavaScript code introduced in the previous chapter used the DOM-API to add a list of notes to the page.

The following code creates a new node to the variable ul, and adds some child nodes to it:

var ul = document.createElement('ul')

data.forEach(function(note) {
  var li = document.createElement('li')

  ul.appendChild(li)
  li.appendChild(document.createTextNode(note.content))
})

Loading a page containing JS

![[Pasted image 20240207213542.png]]

AJAX

AJAX (Asynchronous JavaScript and XML) is a term introduced in February 2005 on the back of advancements in browser technology to describe a new revolutionary approach that enabled the fetching of content to web pages using JavaScript included within the HTML, without the need to rerender the page.

Nowadays URLs like these would not be considered acceptable, as they don't follow the generally acknowledged conventions of RESTful APIs, which we'll look into more in part 3.

Single-paged application(SPA)

SPA程式不會分別fetch所有的頁面，而是包含一個fetched HTML page. 用同樣的架構重寫這個頁面，有一些區別：

提交新note時，打開dev tool的network可以看到, 瀏覽器只會向服務器發送一個請求。在JS code中使用e.preventDefault()method防止默認的form submit handling. 這樣就不用重新渲染整個頁面。

==所以SPA和傳統web app的區別是什麼？== 大概是當event triggered, client side只更新部分UI, 提高網頁速度，從而提升用戶體驗。

SPA在client side使用從服務器fetch的JS code. – JS code的例子：

var form = document.getElementById('notes_form')
form.onsubmit = function(e) {
  e.preventDefault()
// To prevent the default handling of forms submit.
  var note = {
    content: e.target.elements[0].value,
    date: new Date(),
  }

  notes.push(note)
  e.target.elements[0].value = ''
  redrawNotes()
  sendToServer(note)
}

_e.preventDefault()_ method is used to prevent the default handling of forms submit.

The code for sending the note to the server is as follows:

var sendToServer = function(note) {
  var xhttpForPost = new XMLHttpRequest()
  // ...

  xhttpForPost.open('POST', '/new_note_spa', true)
  xhttpForPost.setRequestHeader('Content-type', 'application/json')
  xhttpForPost.send(JSON.stringify(note))
}

上面的代碼決定數據be sent with an HTTP POST request and the data type is to be JSON。The data type is determined with a Content-type header. Then the data is sent as JSON string.

「Paper.wf」没有内置评论系统，如果想要评论我的博客，或是与我互动，请不要大意地在Mastodon私戳@[email protected]。