The JavaScript programming language

• We are currently in the first Beginning JavaScript tutorial. It covers the basics of the JavaScript programming language.
• The second tutorial is a project where you incorporate the Beginning JavaScript concepts into a simple To-Do list application.
• It is important to have an overall understanding of all the basic concepts before moving on to the Intermediate JavaScript tutorial. Go through the Beginning JavaScript CheatSheet, the flashcards, and the To-Do list project. Using the forest and the trees analogy, having a solid understanding of all the basic concepts covered in the beginning tutorial will give you a view of the forest. In the intermediate JavaScript series we will focus on the individual trees.

• The example code from the tutorial the series is available for download on GitHub: github.com/LearnByCheating/javascript-tutorial
• There is a separate file or folder for each tutorial.

Work environment Setup

• The only things you need to start coding JavaScript are a web browser, a text editor, a Terminal application, and Node.js. 

• Both Macs and PCs ship with some very basic text editors. But these are not sufficient. There are a number of free and paid text editors. We recommend using the free and very popular Visual Studio Code. Download from code.visualstudio.com/download
• It has three features we will be using:
• A built-in Terminal panel you can open to enter commands in the command line without having to open a separate Terminal application. 
• A built-in Debugger sidebar that allows you to set breakpoints in your code, pause the program, and inspect variable values.
• A plugin called Live Server that will launch a local web server to use in development.
• VS Code is not required however, so if you are already a programmer happy with your text editor, you can follow along using that, plus your Terminal application and the DevTools source tab for Debugging. Or use console logs. 
• There is a separate CheatSheet and tutorials for VS Code and VS Code's debugger feature. 

Node.js

• There are two main environments for running JavaScript code, the browser and Node.js. The browser environment is mainly for using JavaScript to access and manipulate web pages. The Node.js environment is often used for running web servers. There is a separate CheatSheet and tutorial series for Node.js.
• To see if Node.js (or just Node) is installed on your computer, open the Terminal and enter: node
• If you get a prompt you can start entering JavaScript code directly in the Terminal. 
• Or run a file by entering "node" followed by the file name node filename, or the path to the file if it is in a different directory: node path/to/file

Project setup

• For this tutorial series create a project directory called javascript-tutorial.
• Open the javascript-tutorial directory with the VS Code text editor.
• Create a JavaScript file to test code with. You can call it anything such as try.js.
• Then type or paste in the code from this tutorial.
• Open a Terminal window by clicking the Terminal menu and selecting New Terminal.
• Run the file with the node command: node try or whatever file name you choose. The .js extension is implied.
• To see variable or expression values put console logs in the code. It will log the value in the Terminal: 

• const x = 7;
  const res = x + 3;
  console.log(res); // logs 10

• The rest of this tutorial will cover key concepts in the JavaScript programming language. This is the bare minimum that you need to know to program with JavaScript. It is important to learn all of these concepts before moving on the the Intermediate JavaScript tutorial series. You will need to go through this a minimum of two times since the concepts are interrelated. If you take the intermediate JavaScript course you should memorize all the Beginning JavaScript concepts including the syntax, although for now make sure you just understand what they do. 
• The next tutorial is a project where we put most of these concepts to use. 
• Type or paste the example code in the javascript-tutorial to see it in action. Add your own console.log()s to see the values. 

• The concepts you need to learn include:

1. Data Types
2. Variables
3. Expressions and Operators
4. Booleans and If Statements
5. Functions
6. Strings
7. Objects
8. Classes
9. Arrays
10. The DOM: Using JavaScript to manipulate web pages.

What is JavaScript?

JavaScript Syntax

// Reference the below code snippet for the syntax explanations.
const name = 'Joey';
if (name === 'Joey') {
  console.log('My name is Joey');
}

• Statement: A line of code that instructs the computer to execute some action. Programs are formed by a sequence of one or more statements. Statements are often grouped into blocks such as functions or if blocks.

• Indentation: Indent your code two spaces to make it easier for you or others to read. Set up VS Code to use soft tabs so you can press the tab key and it will indent two spaces.
• In the above example there is an if block that contains one statement. Indent the statement with two spaces to show that it is inside the block.
• Comments: // single line /* multiple lines */ You can use comments to give short explanations about the next line or block of code. You can also use comments in development to temporarily "comment out" code you are working on.
• Semicolons: Put semicolons at the end of each statement. Do not put semicolons at the end of code blocks (i.e., do not put a semicolon after the closing curly brace.
• Double vs single quotes: Text strings must be put in double or single quotes. You can use either but style guides recommend single quotes. Use double quotes if your string includes one or more single quotes.

• String: text surrounded by quotes. Example: "Hello"
• Number: numeric values. Example: 7
• Boolean: true or false
• Undefined: variables that have not been initialized with a value are undefined.
• Example: typeof x; // returns undefined since x has not been initialized.
• Null: Null is the intentional assignment of no value to a variable. let x = null;
• Object: An object is an unordered collection of properties written as name:value pairs. 
• Example: { name: 'Joey', age: 22 };
• Arrays and functions are a type of object.

const vs let:

• The difference between variables declared with const vs let is const variables can't change their value, but let variables can. 
• Use const unless you intend to change the variable's value.
• For let variables, only use the let keyword when you declare the variable. After that just use the identifier.

let result = 0;
result = 8 * 2;
result; // returns 16
result = 4 + 9;
result; // returns 13

Scope

• Script scope / Local scope: Variables declared in your JavaScript file that are not inside of a block (e.g., not inside a function or if statement) are scoped to the whole script. The variable is available anywhere in your script's code after it is declared. This is called script scope if you are running JavaScript in the browser and local scope if you are running the file with Node.js.
• Block scope: Variables declared inside a block (e.g., inside a function or if statement) are locally scoped to that block. That means they can only be accessed within that block.

const x = 1;
if (x > 0) {
  const y = 2;
  y; // returns 2
}
x; // returns 1
y; // throws ReferenceError: y is not defined

let result
const score = 80;
if (score > 60) {
  result = 'Pass';
else {
  result = 'Fail';
}
result; // returns 'Pass'

const x = 1;
const y = 3 - 2;
const res = (x === y); // returns true. They both store the value 1. The values are equal.

const str1 = 'hello';
const str2 = 'hello';
const res = (str1 === str2); // returns true. They both store the value "hello".

const obj1 = { name: 'Joey', age: 22 };
const obj2 = { name: 'Joey', age: 22 };
let res = (obj1 === obj2); // returns false

const objCopy = obj1;
let res = (objCopy === obj1); // returns true

Operators

const num = 5;

Compound assignment operator +=

let res = 5;
res = res + 1; // returns 6
res = res + 1; // returns 7

• Instead of adding 1 to the result variable like this: res = res + 1;
• You can use the += compound assignment operator: res += 1;

res = 5;
res += 1; // returns 6
res += 1; // returns 7

Comparison operators === !== == != > < >= <= 

• Comparison operators compare two operands and return true or false. They can check for equality ===, inequality !==, greater than >,  greater than or equal to >=, less than <, less than or equal to <=.

• Strict equality and inequality: Strict equality checks for equality of the value and data type. The strict equality operator is 3 equal signs ===, and the strict inequality operator is !==. Expressions are evaluated before doing the comparison. Examples:
• 7 === (5 + 2); // returns true
• 7 === '7'; // returns false. One value is a number while the other is a string.
• true === 1; // returns false.
• undefined === null; // returns false. 
• Loose equality and inequality: Loose equality uses == as the operator, and != for loose inequality. Loose equality does some type conversions before doing the equality check.
• 7 == '7'; // returns true. When a number is compared to a digit string, the string converts to a number before doing the comparison.
• true == 1; // returns true. When a boolean is compared to the numbers 0 or 1, 0 converts to false and 1 converts to true.
• undefined == null; // returns true. This resolves to true when using loose equality.

4a. Booleans

Booleans

• Boolean is a primitive data type with two possible values: true or false.
• Comparison expressions resolve to boolean values. Examples:

let name = 'Joey';
let age = 22;
name === 'Joey'; // returns true
age < 21; // returns false.

4b. If Statements

If statements

• An if statement is a block of code that executes if its condition resolves to true. If the condition resolves to false it is skipped.

if (condition) { 
  statements; 
}

const score = 77;
let pass = false;
if (score >= 60) {
  pass = true;
}
pass; // returns true

If... else:

if (condition) { 
  statements; 
} else {
  statements; 
}

const score = 77;
let pass;
if (score >= 60) {
  pass = true;
} else {
  pass = false;
}
pass; // returns true

5. Functions

function name(parameters) { 
  statements;
  return statement;
} 
name(arguments);

function add(x, y) {
  const res = x + y;
  return res;
}
let res = add(5, 3); // returns 8

let res = add(5, 3); // returns 8
function add(x, y) {
  const res = x + y;
  return res;
}

const funcName = (params) => {
  statements;
  return statement;
}

const add4 = (x) => {
  const result = x + 4;
  return result;
}
add4(10); // returns 14

const functionName = (parameters) => statement;
functionName(args);

const add5 = (x) => x + 5;
add5(10); // returns 15

const name = 'Joey';
const age = 22;
`My name is ${name}.
I am ${age} years old.`

const name = 'Joey';
let username = name.toLowerCase(); // returns "joey"

let str = 'Hello ' + 'world'; // Returns "Hello world"

str = 'Hello ';
str.concat('world'); // Returns "Hello world" 

7. Objects

• An object is an unordered collection of properties written as name:value pairs.
• Object is one of JavaScript's eight data types and the only one that is not a primitive type.

const objName = {
  prop1: value,
  prop2: value,
};

const author = { 
  name: 'Joey R', 
  age: 34,
  active: true,
  books: ['Learn JavaScript', 'Learn Node.js', 'Learn Express'],
};

const name = 'Joey R';
const age = 34;

const author = { name, age }

8. Classes

• If you want to create multiple objects that have the same properties and methods, use a class. 
• Like most popular programming languages, JavaScript is object oriented. But unlike the others, JavaScript uses prototypes to create objects, instead of classes. 
• However, in the 2015 ES6 release a class syntax was added to JavaScript. This gives it a similar look and feel to to class-based programming languages.
• Behind the scenes JavaScript still uses prototypes, but class syntax enforces class-like behavior. 

• A JavaScript class is a special type of function, called a constructor function, that generates new objects. 
• It is a template that defines the properties and methods that all instances of this class will have.

class ClassName {
  constructor(prop1, prop2) {
    this.prop1 = prop1;
    this.prop2 = prop2;
  }
}
const instance1 = new ClassName(val1, val2);

• To create a class, declare it with the class keyword followed by the class name. By convention, the class name is capitalized and singular. Put multiple word names in UpperCamelCase.

• Then add a function named constructor, with parameters for the object property values.
• The this keyword refers to the instance object you are creating. The constructor chains each property name to the object being created and assigns it to the parameter value passed in. 
• To instantiate an object: 

• Call the class with the new operator. 
• Pass in the property values as arguments. 
• The class will return a new object. 
• Assign the returned object to a variable.

class Author {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const author1 = new Author('Joey', 32);

• The above example creates an Author class.
• The constructor function has parameters for name and age.
• In the last line we instantiate a new object by calling the Author class with the new operator, passing in arguments 'Joey' and 32 for the name and age property values. We assign the new object to variable author1.

Get and set instance properties

• Access property values by chaining the property name to the object.

author1.name; // returns "Joey"

• Set property values with the equals assignment operator.

author1.age = 33;

Instance methods

class ClassName {
  constructor(prop1, prop2) {
    this.prop1 = prop1;
    this.prop2 = prop2;
  }
  method1() { statements; };
  method2() { statements; };
}
const instance1 = new ClassName(val1, val2);
instance1.method1();

class Author {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  addYear() { this.age += 1; };
  log() { return `${this.name} is ${this.age} years old.` };
}
const author1 = new Author('Joey R', 32);
author1.addYear();
let view = author1.log(); // returns Joey R is 32 years old.

9. Arrays

• JavaScript arrays are list-like objects. They store multiple values, called elements, in a single variable.
• You can create an array literal using the array operator "[]".

const arr = ['apple', 'banana', 'orange'];

• In general, arrays should be assigned to const variables unless you plan to assign that variable name to another array or other value.

• Each element has an associated index number that is its order in the array. Array indexes are 0 based so the first element is at index 0, the second is at index 1, etc.

• You can think of arrays as objects whose keys are the index numbers 0, 1, 2, 3 etc.

• Arrays can change length and the elements can be of one or more data types.

• Arrays are not their own data type, rather they are a type of object.

let view = typeof []; // returns 'object'

• You can get an array element's value with its index number. Place the index number in square brackets and append it to the array.

const arr = ['apple', 'banana', 'orange'];
let view = arr[0]; // returns 'apple'

• To get the last element's index number, subtract one from the length property.

view = arr[arr.length - 1] // returns 'orange'

• You can change an element value using the equals sign.

arr[1] = 'blackberry';
view = arr[1]; // returns 'blackberry'

Add or remove elements from the start or end of the array

• Shift() removes an item from the front of the array and returns it.

const arr = ['a', 'b', 'c'];
let elem = arr.shift(); // arr is now ['b', 'c']
elem; // returns 'a'

arr; // returns ['b', 'c']
arr.unshift(1); // arr is now [1, 'b', 'c']

arr; // returns [1, 'b', 'c']
let elem = arr.pop(); // arr is now [1, 'b']
elem; // returns 'c'

arr; // returns [1, 'b']
arr.push(3); // arr is now [1, 'b', 3']

const arr = ['a', 'b', 'c', 'd', 'e'];
arr.forEach((elem) => {
  console.log(elem);
});

10. The DOM - Using JavaScript to manipulate web pages

• The JavaScript programming language was initially created to manipulate web pages directly in the browser. HTML by itself is static. Without JavaScript if you want to change anything on the web page the server would have to send an entirely new HTML document over the internet. That may be fine for a very simple website but if it involves user interaction it can noticeably hurt performance. So web developers use JavaScript to make the changes locally right in the browser when possible.

• Web APIs and the DOM: We haven't talked about Web APIs yet. API stands for Application Programming Interface. It is an interface for two or more computer programs to communicate with each other. In the case of Web APIs it is our JavaScript program communicating with the web browser. When an HTML document is sent by a server to the web browser, the browser converts it to an object called the Document Object Model, or the DOM. The browser has a number of Web APIs for JavaScript to access the DOM and manipulate elements on a web page. We will cover the most commonly used DOM-related Web APIs in this section.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Try JS</title>
  <link rel="stylesheet" href="/stylesheets/style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <h1 id="heading" class="light-theme">Try JS</h1>
  <button id="btn">Clickme</button>
  <ul id="list"></ul>
</body>
</html>

.light-theme { background-color: whitesmoke; color: black; }
.dark-theme { background-color: black; color: white; }

const heading = document.getElementById('heading');
const btn = document.getElementById('btn');
const list = document.getElementById('list');

console.log(heading.textContent); // logs "Try JS"
heading.textContent = "Try JS code snippets";

const arr = ['Item 1', 'Item 2', 'Item 3'];
let listItems = '';
arr.forEach((item) => {
  listItems += `<li>${item}</li>`; 
});
list.innerHTML = listItems;

btn.addEventListener('click', () => {
  heading.classList.remove('light-theme');
  heading.classList.add('dark-theme');
});

• The next tutorial is a project that uses the above concepts. We will build a To-Do List applications.