Evan Harmon - Memex

JavaScript

img JavaScript, often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.
wikipedia:: JavaScript

Meta JavaScript

Documentation

Syntax

Comments

Single line
  • //
Multi-line

/* This is a multiline comment */

Curly brackets

  • You don’t technically need curly brackets in one statement conditionals but it is considered not best practice.

Expressions & statements

  • expressions are a subset of statements
  • good thing to think of is if you can return it or not

Blocks

  • Everything inside {}
  • In JavaScript, any code between curly braces is also known as a block.
Header
  • e.g. if (condition)
Body
  • e.g. the block under a conditional

Reserved keywords

  • abstract
  • arguments
  • await
  • boolean
  • break
  • byte
  • case
  • catch
  • char
  • class
  • const
  • continue
  • debugger
  • default
  • delete
  • do
  • double
  • else
  • enum
  • eval
  • export
  • extends
  • false
  • final
  • finally
  • float
  • for
  • function
  • goto
  • if
  • implements
  • import
  • in
  • instanceof
  • int
  • interface
  • let*
  • long
  • native
  • new
  • null
  • package
  • private
  • protected
  • public
  • return
  • short
  • static
  • super
  • switch
  • synchronized
  • this
  • throw
  • throws
  • transient
  • true
  • try
  • typeof
  • var
  • void
  • volatile
  • while
  • with
  • yield
  • Break
  • Case

Security

Versions

Related languages

Environment

JavaScript With HTML

Similar to CSS, JS has 3 Contexts for applying the code
  • In the tag
  • In a script tag (in header or anywhere)
  • In an external file
Javascript inside the script tag
  • <script>{=html}
<script>
   Javascript code;
</script>
- Can add as many ¶ `<script>`{=html} ¶ elements as you want. Can go in either head or body.
Javascript in an external file linked to in the script tag
  • <script src="myjs.js"></script>{=html}
    type=”text/javascript” Not required anymore
  • Best practice now to put the scripts at the bottom
    • Good for performance reasons since it can load the html structure before it might get bogged down in a js script
    • Also because custom scripts tend to not need to be called at the top
    • Exception is things like jquery, bootstrap etc.
Javascript in a remote server linked to in the script tag
  • e.g. the bootstrap CDN
Inline JS
  • onclick
    • onclick=”javascript code;”
Return
  • Return statement to control running of code
  • you can use a return false statement to stop that part of the code from running - e.g. to make a link work or not.

Developer Environment

  • Can run via Live server vs code extension
  • Can run with VS Code debugger
  • Integrate it into html and load the html file

Reference

Data structures

JavaScript stacks

JavaScript queues

JavaScript trees

Control

Program termination

process.exit(0)

Pause execution

setTimeout()

  • https://www.w3schools.com/js/js_timing.asp
    Function printMessage() { console.log(”The future is now!”); } setTimeout(printMessage, 5000);
    setTimeout(function () { console.log(”The Future is now!”); }, 5000);

Async/Await

Promises

Helps avoid callback hell, basically nested callback functions
Way to handle async callbacks
Promise object
  • Example
    • const fetchPromise = fetch(”https://handlers.education.launchcode.org/static/weather.json”); fetchPromise.then( function(response) { console.log(response); } );
    • fetch returns an instance of the Promise class. The Promise class represents a promise. A promise is the eventual outcome of an asynchronous event. In the above example, fetchPromise represents the eventual response from the HTTP request to https://handlers.education.launchcode.org/static/weather.json. A promise can be fulfilled or rejected. When a promise is fulfilled, data is passed to the response handler function. The then method of Promise defines what will happen when the promise is fulfilled. When a promise is rejected, the error reason is returned.
  • .then()
    • on a promise
    • runs async
    • whenever you see .then, it’s a promise
  • .exec()
  • So instead of needing to nest a bunch of callbacks, you can chain a bunch of .then()
  • .catch()
So, can/should you always use promises instead of callbacks?
  • No, because it depends on if the underlying code is modern enough
Example from get programming with node book:
use strict; const mongoose = require(”mongoose”), User = require(”./models/user”); mongoose.connect( “mongodb://localhost:27017/recipe_db”, { useNewUrlParser: true } ); mongoose.set(”useCreateIndex”, true); mongoose.connection; var contacts = \[ { name: { first: “Jon”, last: “Wexler” }, email: “jon@jonwexler.com”, zipCode: 10016 }, { name: { first: “Chef”, last: “Eggplant” }, email: “eggplant@recipeapp.com”, zipCode: 20331 }, { name: { first: “Professor”, last: “Souffle” }, email: “souffle@recipeapp.com”, zipCode: 19103 } \]; User.deleteMany() .exec() .then(() =\> { console.log(”Subscriber data is empty!”); }); var commands = \[\]; contacts.forEach(c =\> { commands.push( User.create({ name: c.name, email: c.email, zipCode: c.zipCode, password: c.zipCode }) ); }); Promise.all(commands) .then(r =\> { console.log(JSON.stringify(r)); mongoose.connection.close(); }) .catch(error =\> { console.log(\`ERROR: \${error}\`); });

Await

Generators?

Quantitative

Money

  • Don't store values in dollars and cents

Date & time

Date #issue

A date consists of a year, a month, a day, an hour, a minute, a second, and a millisecond.
  • getYear()
  • getMonth()
    • month as number, starting with 0
  • getDay()
    • weekday as a number, starting with 0
  • ?getDate()?
  • ?getTime()?
  • getHour()
  • getMinute()
  • getSecond()
  • getMillisecond()
Example

var date = new Date(“1985-10-21”); document.write(date) Mon Oct 21 1985
00:00:00 GMT

I/O

console.log(”message”)

Automatically includes \n per console.log()
console.log(3.4, “hello”, 45);

alert(”message”)

Files

APIs

Fetch

Example

Const port = 3000; const http = require(”http”); const httpstatus = require(”http-status-codes”); let app = http.createServer((request, response) =\> { console.log(”Received an incoming request.“); response.writeHead(httpStatus.OK, { ”Content-Type”: “text/html” }); let responsemessage = ” ¶ hello, nodemon. ¶ “; response.write(responseMessage); response.end(); console.log(\`Sent a response : \${responseMessage}\`); }); app.listen(port); console.log(\`The server has started and is listening on port number: \${port}\`);

App

.listen
.createServer(request, response)
Request
Response

  • .writeHead()
    • http headers
    • 200
  • .write()
  • .end()
    • flushes buffers and sends response

Httpstatus package

  • Helps with http status codes
    Const input = require(’readline-sync’); let info = input.question(”Question text… “);

Innerhtml

Ui

Graphics

Images

Var someimage = new Image(); someImage.src = ‘nanonaut.png’;

Visualization & graphs

D3.js

Issues

  • ?Make a javascript controlled input and button work with enter?

Inbox

Strict mode

  • “use strict”;
    • in a js file
  • node –use_strict
  • checks that variables are declared, etc.
  • Todo: https://medium.freecodecamp.org/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e
  • Codeschool recommends javascript learning strategy:
    “we recommend: Learn JavaScript and its modern ecosystem well. Adopt
    Node.js, even for your client-side development, as it will bring a lot
    of good tooling to help bundle your code, run linters to avoid common
    syntax mistakes, run unit tests, and more. Once you’ve adopted Node.js,
    be sure to bring all your depen- dencies in through NPM, including your
    CSS dependencies, such as Font Awesome, Twitter Bootstrap, etc. Adopt
    ES2015 (also known as ES6) and all its latest features through Babel,
    which transpiles ES6 code back to ES5 JavaScript code that browsers can
    understand, since they haven’t been fully upgraded to support the latest
    fea- tures of JavaScript yet. Also, if you are a fan of strict typed
    languages, then be sure to look into Flow and/or TypeScript.”
  • Everything is an object in js by way of object prototyping which I think is synonymous with inheritance
  • Sockets as opposed to ajax?
  • https://socket.io/

Sources

JavaScript
Interactive graph
On this page
JavaScript
Meta JavaScript
JavaScript Conventions, Style, & Best Practices
Documentation
Syntax
Comments
Single line
Multi-line
Curly brackets
Expressions & statements
Blocks
Header
Body
Reserved keywords
Security
Web Development Debugging
JavaScript Testing
JavaScript Logging
Versions
ECMAScript
Related languages
TypeScript
CoffeeScript
Dart
JavaScript Asynchronous
Environment
Node.js
+JavaScript Dependencies, Packaging, Building, Artifacts, Libraries, Modules, & Structure
Browser
JavaScript With HTML
Similar to CSS, JS has 3 Contexts for applying the code
Javascript inside the script tag
Javascript in an external file linked to in the script tag
Javascript in a remote server linked to in the script tag
Inline JS
Return
DOM (Document Object Model)
Browser Tools (Developer Tools)
JavaScript Frameworks
IDEs & Text Editors
Developer Environment
DOM (Document Object Model)
JavaScript Functions
Object-Oriented JavaScript
JavaScript Objects
JavaScript Classes
Reference
JavaScript Variables
JavaScript Scope
JavaScript Reference & Identity
JavaScript Hoisting
JavaScript Closures
JavaScript Data Types
JavaScript strings
Data structures
JavaScript Arrays
JavaScript Maps
JavaScript Objects
JSON
JavaScript Text Processing
JavaScript stacks
JavaScript queues
JavaScript trees
JavaScript Destructuring
Control
JavaScript Conditionals
JavaScript Iteration
JavaScript ExceptionError Handling
Program termination
Pause execution
Async/Await
Promises
Helps avoid callback hell, basically nested callback functions
Way to handle async callbacks
Promise object
So, can/should you always use promises instead of callbacks?
Example from get programming with node book:
Await
Generators?
Quantitative
JavaScript Operators
JavaScript Math & Science
Money
Date & time
Date #issue
A date consists of a year, a month, a day, an hour, a minute, a second, and a millisecond.
Example
I/O
console.log(”message”)
alert(”message”)
Files
HTTP
APIs
Fetch
Example
App
Httpstatus package
Innerhtml
Ui
Graphics
Images
Visualization & graphs
D3.js
Issues
Inbox
Strict mode
Sources