JavaScript

History

• Originally designed as a language to run in the browser to
  • Add nice UI effects
  • Reduce the need for page reloads (e.g., by performing form validation locally).
• 1995: Netscape creates LiveScript (quickly changed to JavaScript)
• Microsoft introduces VBScript and then Jscript
• 1996: Netscape proposes ECMAScript specification as a standard
  • ECMA: European Computer Manufacturers Association
  • https://www.ecma-international.org
• 1997: First version of ECMA-262
• 2015: ES6 – later called ES2015
  • Introduced many of the “modern” features (classes, imports, () => notation, etc.)
• New (minor) version every year since https://www.w3schools.com/js/js_versions.asp
• Current version is 10th Edition (also called ES2019)
• Has capability to modify the web page (i.e., the DOM), thereby giving web apps a more native feel. (More on that later.)

Basics

• Similar to Java/C/C++
• I will focus on the key features – especially those that are different from most programming languages.
• JavaScript is Dynamically Typed (as opposed to Java/C/C++ which are statically typed)
  • What does it mean for a language to be dynamically typed?
    • Variable types aren’t declared.
  • What are the pros and cons?
    • Pro: Can leverage polymorphism without elaborate inheritance/interface structures.
    • Con: Compiler can’t identify when you’ve tried to call a method that doesn’t exist.
    • See dynamicTyping.js in the CIS 371 Sample Code <”https://github.com/kurmasz-sampleCode/CIS371-SampleCode/”>

Installing

• Install the latest version of Node.js (https://nodejs.org/en/).
• Type node name_of_file.js to run code (if it stands alone.)
• If you want to use published node packages, you will need to set up a project using npm (start with npm init and accept the defaults).
  • The process and readline packages used by the Connect 4 project are built-in, so you won’t need to set up a project with npm.

Key features / differences

• See keyFeatures.js
• Template strings
  • You can put code inside the ${}. It doesn’t have to just be a variable.
• Uses “Java-style” comments (both // and /* ... */)
• Integers and floating point are the same type. (Try typeof(1) and typeof(3.14159));
• All objects behave like associative arrays.
• == vs ===
  • == converts both parameters to the same type before comparison (called coercion)
  • === does not coerce parameters. If the parameters are different types, the result is false.
  • Use === unless you have a good reason to use ==.
  • When you use == add a comment explaining why.
  • See keyFeatures.js
• null and undefined are different.
  • null == undefined is true: Both convert to false
  • null === undefined is false: They are different types.
  • Be sure to check for both null and undefined.
• Nullish Coalescing Operator (??) https://www.w3schools.com/js/js_2019.asp#mark_nullish_coalescing
• let vs var
  • Variables declared using let have block scope (are local to the block)
  • Variables declared using var are visible throughout the function (are not local to the block.)
  • Use let unless you have a good reason to use var.
  • When you use var, and a comment explaining why.
• Deconstructing arrays (See deconstructingArrays.js)
• Deconstructing objects (See deconstructingObjects.js)
• Use a linter (e.g., JSHint) https://jshint.com
• Modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Asynchronous Programming

• Many methods are asynchronous. (See asynchronous.js)
• Look at hiLo.mjs

Modules

• CommonJS vs ES6
• Explain the ES6 setup in the project starter code.