JavaScript Introduction

JavaScript is a language full of quirks which people love to hate on. However, so long as you follow a simple basic steps, you are unlikely to run into these problems.

Weird History of JavaScript

JavaScript was created in 1995 when Netscape (many people will be unaware of who this even is) wanted to create a language for adding interactivity to their browsers. Two team competed: java makers sun microsystems (later bought by oracle) and Brendan Eich. Netscape went with Eich after he created ECMAScript (javascript’s real name) in 10 days.

Microsoft copied it creating JScript. Netscape, likely in response to Java’s growing popularity at the time, decided to rename ECMAScript into JavaScript. JavaScript has grew and grew over time, morphing to meet the newer needs of the web. Most significantly was AJAX or asynchronous javascript. Asynchronous means that tasks can be performed in the background to update the page without forcing a refresh on the user. Without AJAX sites like Google Docs could have been created.

Why JavaScript Became Good

Google, seeing an entirely new set of applications which could be built using JavaScript, made performance optimizations a key goal of the Chrome team. Google developed the v8 JavaScript engine. It can not be overstated how much faster was V8. Perviously considered a terrible inefficient language, the introduction of v8 made JavaScript over 100x faster.

Node JS

Node JS is a server-side JavaScript runtime. So, no browser is required to run JavaScript. Node’s creator, Ryan Dahl did not like that programmers had to know JavaScript for frontend development (client-side) and another language (c++, java, c, etc.) for backend development (server-side). Node took the power of v8 and brought it sever-side.

Node Package Manager

Node quickly became popular. Because programmers are lazy, commonly used chunk of code are duplicated and shared as packages. To accommodate packages being shared, the node package manager was created or npm for short.

• A package: some code, could be a full program or only a small part

Due to JavaScript’s interpreted nature, the runtime environment is highly standardized. If it runs on one computer, it will run on another (more or less) ¹

Package Managers are life changing. Imagine installing any program you want with, all with a simple line of text (npm install chrome).

No more navigating to the website, clicking through download pages, and clicking agree to terms of use to download software, things just work.

Why is this background useful?

• JavaScript is a patchwork of a language, do not feel bad it if it is confusing
• Asynchronous JavaScript (AJAX) allowed interactivity in sites like Google Docs
• v8 turbocharged JavaScript by over 100x
• Node JS allows JavaScript to be run without a browser, making server-side deployment possible.
• Node Package Manager is how you get commonly used pieces of JavaScript software

Java and JavaScript: A Metaphor

Java and JavaScript are similar, not just syntax (both derived from C, the mother of all programming languages), but also in terms of functionality – thanks to the Java Runtime Environment and v8, both languages use just-in time (JIT) compilation to achieve high performance.

Those with a background in Java from AP Computer Science A, CSP or equivalent will find picking up JavaScript easy.

A major difference between Java and JavaScript is typing. JavaScrip is a weakly-typed language. So, instead of having to explicitly declare the type of a variable, you can use either let for a variable or const for a constant (var is the same thing as let for the most part, but let is preferred now ² ).

Java and Javascript Equivalency Chart

System.out.println("Hello World");

  console.log('hello world');

void printHelloWorld(){
  System.out.println("Hello world");
}

function printHelloWorld(){
    console.log('hello world');
}

// printHelloWorld() // uncomment me to try

int x = 1;
float y = 0.2f;
double z = 0.1;

let x = 1;
let y = 0.2;
let z = 0.1;

console.log(x, y, z);

int[] myArray = new int[6];

myArray[0] = 5;
myArray[1] = 2;
myArray[2] = 9;
myArray[3] = 8;
myArray[4] = 1;
myArray[5] = 7;

myArray = new int[6]{5, 2, 9, 8, 1, 7};

let x = [5, 2, 9, 8, 1, 7, 3, 6, 8];
console.log(x);

for(int i = 0; i < 10; i++){
  System.out.println(i);
}

for(let i = 0; i < 10; i++){
  console.log(i);
}

String name = "will";
String test = "will";

if(name.equals(test)){
  System.out.println("equal!");
}

let name = 'will';
let test = "will";

if(name === test){
    console.log("equal");
}

import java.util.ArrayList;

ArrayList<Integer> myList;

myList = new ArrayList<Integer>(
   List.of(5, 2, 9, 8, 1, 7)
);

myList.add(10);

let myList = [5, 2, 9, 8, 1, 7];

myList.push(10)

console.log(myList);

try {
  int result = 1 / 0;
} catch(ArithmeticException e){
  System.out.println("Div. by zero!");
} finally{
  System.out.println("Aways executes");
}

try {
    let result = 1 / 0;
} catch (e){
  console.log("Can not divide by zero!");  
} finally{
  console.log("Always executes");   
}

JavaScript and the Document Object Model (DOM)

JavaScript’s foundational use case was interaction with HTML document. An HTML document is comprised of a series of tags. Each tag represents an object to manipulate. This forms the Document Object Model (DOM).

<html>
  <h1>Hello there!</h1>

  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>

  <p>
    Lorum ism..
  </p>

</html>

Tags are more powerful than that and can have classes and ids attached to them along with other data. Additional information powers JavaScript selectors.

<a id="google-link" class="link strong" href="https://google.com">
  Click Me!
</a>

JavaScript is able to select and modify elements to the dom using each tag’s features.