Javascript

Javascript

Introduction

Purpose

Describe installation, build and development

References

• JavaScript Tutorial for Beginners [JS Crash Course 2024]
• node.js home
• Node documentation
• Execism javascript
• TODO [Node.js, Express, MongoDB & More: The Complete Bootcamp]
• Configure and run a development container
• Dockerhub node
• Node packge manager

Vocabulary

• API - Aplication Programing Interface.
• dynamic website - web site is generate upon request. AKA server side rendering.
• Express.js - web server framework.
• NestJS - a framework built on top of Node.js that is specifically useful for building robust and scalable server-side applications.
• Node.js - a runtime environment that executes JavaScript code outside the browser. Not a framework.
• route - ? in http; e.g. /my_path
• static website - static files. can contain .js(which does make it dynamic).

Tools

• nodemon - monitor for source changes and restart app if changes happen.
  • nodemon index.js
• npm

Install development environment

Structure of developement directory

• node_modules - dependencies of our dependencies.
• modules - our own modules
• package.json -

package.json content

• scripts - command to be executed with 'npm run'
  • "server": "nodemon index.js"
    • npm run server

Development in a container

• cd source
• npm init
• npm install
  • something about save dev
• node app.js

Picking fonts for your style sheet

See: fonts.google.com

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

* {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}

Create a Javascript environment

Create a javascript build env in docker

Javascript syntax

Types

• boolean
• integer
• decimal
• object

Variables

• var - global scope
• let - (block scope)
• const - constant

Conditionals

• if else statement
  • if ( totalPrice > 20 ) {
  • condition: totalPrice
  • comparison operation: >, <,==,===, >=, <=, !==, !==
  • ==
    • 30 == 30 : true
    • 30 == "30" : true
  • ===
    • 30 === 30 : true
    • 30 === "30" : false
  • if ( alpa == 8 || beta > 9) {

Putting variables in log messages

let shippingCost = 22;
console.log(`shipping cost for you is ${shippingCost}`)

• Seems like you can actually put javescript code in there.

Functions

function testingSomething(): void {
  let shippingCost = 22;

  console.log(`shipping cost for you is ${shippingCost}`)
}

Comments

// Single line comment.

Modules

• fs - file system
• http - http server
• url - url manipulation?

HTTP

const server = http.createServer((req, res) => {
  // This part is executed every time any call is sent to the server.

  // req - the request sent to this server
  // res - ??? TODO the place to respond to???

  const pathName = req.url;

  if ( pathName === '/' || pathName === '/overview') {
    // TODO what does 'end' do?
    res.end('This is the OVERVIEW');
  } else {
    // Put data in the header.
    // TODO is it merged with whatever res might contain?
    res.writeHead(404, {
      'Content-type': 'text/html'
    });
    res.end('<h1>Page not found!</h1>');
  }

});

// This starts an endless loop listening at port 8000.
server.listen(8000, '127.0.0.1', () = {

})

Create your own module

• mkdir modules
• somthing.js
  • TODO how to add this

Using NPM

• npm init
• npm i - short for npm install.
• npm install - add external modules that are required to operate this application.
  • npm install slugify
  • npm install nodemon --save-dev
    • This is for dev tools only.
    • TODO nodemon restarts the app whenever changes in the source has been detected.
  • npm install nodemon --global
    • install the package so it is available for all project on this machine.
    • Requires admin access?
• npm outdated -
• npm update - update package(s)
• npm uninstall - uninstall module.

Package version update

• ~ - only patch releases.
• ^ - update minor and patch version.
• * - all versions.

Export your app via NPM

• npm init

Javascript design

• Single threaded.
  • but has a thread pool
  • TODO how does the thread pool work?

Event loop

• Has four phases
  • Expired timer callbacks
  • I/O polling and callbacks - mainly networking and file access.
    • TODO something about, if there is no I/O then wait for I/O until there is data or a timer runout.
  • setImmediate callbacks - if we want to process callbacks immediatly after I/O
  • close callback - when something closes like a web server connection.
• will empty the callback queue for a phase before moving on to the next phase.
• Two other queues - will be executed right after each of the four phases.
  • Process.nexttick() - can be used when we really really need to execute right after a phase.
  • other microtasks - mainly for resolved promis's
• at the end of the loop, check if there are any timers or I/O tasks waiting, if not exit.

Dont block

• Don't use syncversions of functions in fs, crypto and zlib modules in youy callback functions.
  • you can use sync functions in the top level, but not the call-back functions.
• Don't perform complex calculations
  • e.g. loops inside loops
• Don't use too complex regular expressions
  • e.g nested quantifiers.

Event-driven architecture

  graph LR;
  emitter[Event emiter] -->|emit event|listener[Event listener];
  listener-->|calls|cb_function[Attached callback function];

Loading

• listener
  • server.on
  • TODO called observer pattern???