Stanisław Polak, Ph.D.

Scroll down the page to see the main content

Programming in JavaScript

  1. Home
  2. JavaScript

Bibliography

  1. JavaScript
  2. DOM
  3. AJAX
  4. NodeJS Guides
  5. ExpressJS

Selected lecture slides

Slajdy
Slide modification date: 11-11-2024, 08:29

Laboratories

# Subject How to prepare for the exercise
1 CSS 3
  • The Basics
  • Creating animations
Creating a responsive website based on the framework Bootstrap, W3.CSS or Foundation 		On the computers in the lab 4.29, 4.30 and on the PCoIP pool "Basic system — ICSR (Win10)", the Visual Studio Code editor is installed
  1. Read what features related to the creation of HTML documents and CSS sheets offers this editor
  2. Watch a video about creating the above-mentioned documents
  3. Run the editor using command code
  4. Using the "Open folder..." option (Ctrl+K Ctrl+O) specify the directory where your documents and scripts will be stored
  5. Within the "EXPLORER" panel, hover your mouse over the name of the above directory and click the "New File" icon — create an HTML document (file) called 'document.html'
  6. Press Shift+1, and next Enter, which will create a sample HTML document. If your editor does not have this keyboard shortcut, then create the document manually with the following content: 
                      
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Page title</title>
    </head>
    <body>
    </body>
  </html>
  7. Modify the document — it should contain:
    • The h1 element with your name and surname
    • an internal style sheet containing the following two rules:
      1. The left margin of the web page should be 100 pixels
      2. The content of all elements 'h1' should be displayed in red
  8. View this document in a web browser
2 JavaScript (the Vanilla JS framework)
  • Basic data types
  • Built-in objects
  • Accessing form fields using DOM 0
  • Event handling using DOM 0
  • Creating dynamic graphics — the "canvas" element
  • Unit tests based on Mocha and Chai
3 The DOM 4 standard
  • Dynamic change of CSS styles
  • Creating and modifying the contents of HTML documents "on the fly"
  • Event handling
  • Web components
4 Node.js
  • Creating simple websites — 'http' module
  • File system support — 'fs' module
 After logging in to the Linux system (laboratory 4.29 / 4.30), configure the Visual Studio Code editor
  1. Complete the following commands: 
      
  mkdir ~/exercise4
  cd ~/exercise4
  npm init --yes
  npm install --save eslint eslint-config-airbnb-base eslint-plugin-import
  echo -e "module.exports = {\n  'extends': 'airbnb-base',\n  'rules': {\n    'no-console': 0\n  }\n};" > .eslintrc.js
  code --install-extension dbaeumer.vscode-eslint
  code ~/exercise4
  2. Within the "EXPLORER" panel, hover your mouse over the name exercise4 and click the "New File" icon — create an empty file / script named script.js
  3. Place the following JS code in it: 
                      
  console.log('\x1B[31mHello World\x1B[0m\n');
  4. Use the Ctrl+` keyboard sequence to open the terminal panel, and then enter node script.js in it, which will run your script; here: writing, in red, the inscription "Hello World"
  5. If you want to define a specific keystroke sequence (e.g. Ctrl+Alt+R) to run the command (e.g. node <descriptive_name >), then:
    • Press Ctrl+K Ctrl+S, and the open the keybindings.json file and place, between a pair of square brackets, shown below in lines 2-6, the content: 
                            
  [ 
    { "key": "ctrl+alt+r", 
      "command": "workbench.action.tasks.runTask", 
      "args": "node",
      "when": "editorLangId == 'javascript'" 
    }
  ]
    • Create the tasks.json file with the task content definition:
      1. Press Ctrl+Shift+B
      2. Choose "No build task to run found. Configure Build Task..."
      3. Choose "Create tasks.json file from template"
      4. Choose "Others"
    • Replace its contents with the following:: 
                            
  {
    "version": "2.0.0",
    "tasks": [
               {
                 "label": "node",
                 "command": "node",
                 "args": [ "${file}" ]
                }
             ]
  }
    • Place a code snippet in the JS script that is incompatible with the rules for writing the correct code and check if the editor underlines this passage
    • Hover over the underlined fragment and see what appears in the "bubble"
    • Check if the autocomplete works — add the text console.l at the end of the script. If there is no menu with suggestions for method names, then press Ctrl+Space
    • Read how to use a debugger
5 Framework Express — the basics
  • Creating a web application using the 'Pug' template system
  • Creating an internet application using the 'MongoDB' database
 6 AJAX
  • Performing asynchronous queries, communication with the server using the GET / POST method
  • Read response data based on the responseText() method / responseXML()
7 JQuery programming library
  • DOM support
  • AJAX support
  • Creating a user interface based on Bootstrap