Built at: 2024-10-16T09:55:25.150Z Skip to content
Full stack open

Part0

Javascript: Full stack for front-end and back-end in modern web development.

  • Front-end: React
  • Back-end: Node-js(for RESTful and GraphQL API)

As well as TypeScript, React Native, CI/CD, Container, SQL, etc.

Prerequisites:

  • Programming skills
  • Net / Database knowledge
  • Git
  • Ability of searching and solving problems

Example links:

DevTools panel on Browser(F12/option-cmd-i/ctrl-shift-i)

  • console
  • network
    • Headers
    • Response
  • Elements
    • DOM
    • CSS

Practice on the first example page DevTools console:

list = document.getElementsByTagName('ul')[0]
newElement = document.createElement('li')
newElement.textContent = 'Page manipulation from console is easy'
list.appendChild(newElement)

Exercises

Read

Make UML diagrams

My solutions

My solutions:
(Please complete your own solutions before click here.)

0.4 diagram of creating note on exampleapp/notes

https://studies.cs.helsinki.fi/exampleapp/notes

https://www.websequencediagrams.com/app

title part0 0.4


note left of Browser: Payload: "note: part0 0.4"
Browser->Server:      Request Post /exampleapp/new_note
note right of Server: Save the note at server side
note right of Server: Response 302 redirect to /exampleapp/notes
Browser->Server:      Request Get /exampleapp/notes
Server->Browser:      Response /exampleapp/notes
note left of Browser: Rendering notes page
Browser->Server:      Request Get /exampleapp/main.css
Browser->Server:      Request Get /exampleapp/main.js
Server->Browser:      Response /exampleapp/main.css
Server->Browser:      Response /exampleapp/main.js
note left of Browser: Running js
Browser->Server:      Request Get /exampleapp/data.json
Server->Browser:      Response /exampleapp/data.json
note left of Browser: Js onreadystatechange, got the data.json
note left of Browser: Js console.log(data)
note left of Browser: Js create ul, loop adding li and filling content
note left of Browser: Js getElementById("notes").appendChild(ul)

https://mermaid.live/

https://mermaid.live/edit#pako:eNq9VMtu2zAQ_JUFL7nYsuP0pENOLVIEbVJAvlU9bMiVxYYiVT7cGIb_vStRToAmAZL0oYu0D87ODFbcC-kUiVIE-pHISnqvceOxqy3w06OPWuoebYQb734G8o8LnNwO-VyZ2ubn5zlfwpfrag1tjH0oF4sQk9IUChmKlkzQ9lYXjV7QHXa9Iez7hXWRQsa64k_wetNGcM0RmQFxZxwqOBlay5HLEpbFu5N8CmXUW-STR2L3UIaaEenIrBrfEHBLAWJLMADm_twyZxn3Y8-Wq1xT9GjEc9ovPrxR-pMiniD1cf35EygnU0c2_mN6HWrL5VcyHHzlQ9BoQ_-D4Pc38LvELVbS6z6-hOYza7lmoCmAEHkpA9AdyRS13fw-ZfjpOIc8j6Jsp_W7rK6voPGuG6O_643CiOyNs69z5-sear4ibBzWS5QcjBunWRuGXS1mnGFoyrXVcnU2P52f1gIOMyiKAr79uZfZxMkiicbcoLyFJllGdDa76Mkq8g8_cRAz0ZHnhVB8t-2HWbXgYjcRVdRgMqyotgduxRRdtbNSlNEnmgnv0qYVZYMmcJT6QeF0MeaWwy9KKtBP

sequenceDiagram
    participant browser
    participant server


    browser->>server: POST https://studies.cs.helsinki.fi/exampleapp/notes
    Note right of browser: Payload 'note: part0 0.4'
    activate server
    Note left of server: Server saves the note
    server-->>browser: 302
    deactivate server


    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/notes
    activate server
    server-->>browser: HTML document
    deactivate server


    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.css
    activate server
    server-->>browser: the css file
    deactivate server


    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.js
    activate server
    server-->>browser: the JavaScript file
    deactivate server


    Note right of browser: The browser starts executing the JavaScript code that fetches the JSON from the server


    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/data.json
    activate server
    server-->>browser: [{ "content": "HTML is easy", "date": "2023-1-1" }, ... ]
    deactivate server


    Note right of browser: The browser executes the callback function that renders the notes

0.5 diagram of browsering spa notes page

https://studies.cs.helsinki.fi/exampleapp/spa

https://mermaid.live/edit#pako:eNq1VD1TwzAM_Ss6z21KYcvABAfH8TG0E4RBOEpjSGxjywWu1_-OgkMHWPjMZD3JT0_v5GyUdjWpUkV6TGQ1HRlcBewrC_J5DGy08WgZ7oJ7ihQ-JwRcD3jOjGXTw8OMl3ByvISW2cdyNoucakOx0LFoqYvGPpiiMTN6xt53hN7PosdMhJrNGpl2_AOYz1NhH_uUcLq8OIfa6dST5VxV06fLfyOuR2MlHb-nkFsCuQSN6eifBYp7xf0P5J3hGhc6GM9fUXnpBApm1TK4BnZESyEaA4gsGxKBnkknNnb1scuwdYKh9CPWLcVcsLi6hCa4_i36W2tq5MEbZ7_nzs0GKnkjloftUqUEbwtnZDaML5WaCCLUlHP7e_sH0_l0XinYTqAoCrj9vZfZxNEijV13h_oBmmSF0dnsYiBbU8glViijmqiegixsLY97M_SqlCT7UWhNDaZOJqrsVkoxsVu8WK1KDokmKri0alXZYBclSn6YcPwz7FB5_NfOvcfbV3kwfqU

sequenceDiagram
    participant browser
    participant server


    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/spa
    activate server
    server-->>browser: HTML document
    deactivate server


    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.css
    activate server
    server-->>browser: the css file
    deactivate server


    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/spa.js
    activate server
    server-->>browser: the JavaScript file
    deactivate server


    Note right of browser: The browser starts executing the JavaScript code that fetches the JSON from the server


    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/data.json
    activate server
    server-->>browser: [{ "content": "HTML is easy", "date": "2023-1-1" }, ... ]
    deactivate server


    Note right of browser: The browser executes the callback function that renders the notes

0.6 New note in Single page app diagram

https://mermaid.live/edit#pako:eNqNU01v2zAM_SuELlkBx3GTrSt06GmnHbZi6S6FgUK1aFubLGn6SFYE_e-j7NgYMLSrD7ZF8pHv8UEn1liJjLOAvxKaBj8p0Xkx1AboccJH1SgnTIRHb48B_b8JCh5yfMp8sRHBq66PYNsZxOE7vaFVWoMysMrwCqryagXCSAjpcVDxVXxwovwRwCcDrfVDac0EKiCIA4LJKOqcv2Hs6VF6cczdwruLN7X-C9B4FFSbdAHaWgdCSmU60GpsnWXkY2NNREMUpKea1Th7BVIdoOmVlh5NAcI5JEjSEC3EHnP6Yt7VmcL65mbaIYfbr_s76GN0gW82ISapMJRNKHvUQZmfqmzVBn-LwWmkzhuDx4c89oE0vKrxVjxpKySczpw51GwxoWYkgfTm4Lbavl9XH9e76q665ruKb3flh8vtfc2epwGiieqQlzPbvkzV2I5DZy378Tv6E0bpmWk5AaaaNSlfKH7D4MhVhG11WcDnYA0sZE81GzAE0WHNeM1GtyeP5EJM4svUXjSdJgSrsdS2-88QVlDWD0JJuiyn3LtmJGrIxfQrsRVJx5rVJpeKFO3-yTSMR5-wYN6mrme8FTrQKbm87vNNW6J0me6tnc_PfwChqDyU

sequenceDiagram
    participant browser
    participant server


    Note right of browser: User fill in 'part0 0.6' and submit
    Note right of browser: spa.js run form.onsubmit, save note in notes and redrawNotes()
    Note right of browser: spa.js redrawNotes(create ul, loop adding li and filling content, drop 'notes' div children, append ul to the div)


    browser->>server: POST https://studies.cs.helsinki.fi/exampleapp/new_note_spa
    Note right of browser: Payload {content: "part0 0.6", date: "2024-07-30T08:30:23.512Z"}
    activate server
    Note left of server: Server saves the note.
    server-->>browser: Response 201, Json content: {"message":"note created"}
    deactivate server
    Note right of browser: spa.js console.log {"message":"note created"}