Javascript
Table of Content

Javascript MiniGuide

Copyright © 2023 by Robert Wang

Welcome to the JavaScript MiniGuide, a concise resource designed to help you quickly grasp the fundamental concepts of JavaScript programming.

You might wonder why this MiniGuide was created when there are already so many comprehensive JavaScript resources out there. The answer is simple: to offer you a swift and effective entry point into the world of JavaScript. Starting from scratch or diving into a lengthy book can be overwhelming. This MiniGuide is designed as a streamlined alternative, offering the essential knowledge that can kickstart your JavaScript journey.

From variables and data types to asynchronous programming and debugging techniques, this MiniGuide covers a broad range of foundational topics. It’s not intended to replace extensive resources, but rather to serve as a stepping stone for your learning journey. Exploration further, deepening your understanding, and continuing to build on the strong foundation you’ll establish through this MiniGuide is encouraged.

So, without further ado, let’s dive into the core principles of JavaScript and set you on a path to becoming a proficient developer. Remember, while this MiniGuide will provide you with a solid start, your journey in mastering JavaScript is only just beginning. Happy coding!

Sample code: https://github.com/robertluwang/miniguide-javascript

Table of Contents

  1. Introduction to JavaScript

    • What is JavaScript?
    • Where can you use JavaScript?
    • Basic example: Hello, World!

  2. Variables and Data Types

    • Variables and their declaration
    • Data types: numbers, strings, booleans, null, undefined
    • Variable naming conventions

  3. Operators

    • Arithmetic operators (+, -, *, /, %)
    • Assignment operators (=, +=, -=, *=, /=, %=)
    • Comparison operators (==, ===, !=, !==, >, <, >=, <=)
    • Logical operators (&&, ||, !)

  4. Control Flow

    • Conditional statements: if, else if, else
    • Switch statements
    • Ternary (conditional) operator

  5. Loops

    • for loop
    • while loop
    • do-while loop
    • break and continue statements

  6. Functions

    • Function declaration and invocation
    • Parameters and arguments
    • Return statement
    • Scope and closures

  7. Arrays

    • Creating and initializing arrays
    • Accessing array elements
    • Modifying arrays
    • Array methods: push, pop, shift, unshift, etc.

  8. Objects

    • Creating objects
    • Adding and accessing object properties
    • Methods within objects
    • Object-oriented programming basics

  9. Working with the Document Object Model (DOM)

    • Accessing and modifying HTML elements with JavaScript
    • Event handling: adding event listeners
    • Changing CSS styles dynamically

  10. Error Handling

    • Try…catch statements
    • Throwing custom errors

  11. Asynchronous JavaScript

    • Introduction to callbacks, promises, and async/await
    • Making API calls using fetch

  12. Basic Input/Output

    • Displaying output: console.log()
    • Getting input: prompt() and HTML input elements

  13. Debugging Tools

    • Using the browser console for debugging
    • Debugging techniques and common errors

  14. Further Reading

1. Introduction to JavaScript

  • What is JavaScript?
    JavaScript is a versatile programming language primarily used for creating interactive and dynamic web content. It allows developers to add behaviors and functionality to websites, enhancing user experience. Unlike HTML and CSS, which focus on structure and presentation, respectively, JavaScript is used for programming logic and interactivity.

  • Where can you use JavaScript?
    JavaScript can be used in various environments:

  • Web Browsers: JavaScript is commonly used to enhance web pages by adding interactivity, animations, and dynamic content.

  • Server-side Development: With technologies like Node.js, JavaScript can be used for server-side programming, allowing developers to build web servers and APIs.

  • Mobile App Development: Frameworks like React Native enable building mobile applications using JavaScript.

  • Desktop Applications: Tools like Electron enable creating cross-platform desktop apps with web technologies and JavaScript.

  • IoT (Internet of Things): JavaScript can be utilized in IoT devices and applications.

  • Basic Example: Hello, World!
    Here’s a simple example to display "Hello, World!" using JavaScript:

// The following line outputs "Hello, World!" to the browser console
console.log("Hello, World!");

In a browser’s developer console, you’ll see the output "Hello, World!" displayed.

  • JavaScript in HTML:
    You can include JavaScript code directly within an HTML document using the <script> tag. It can be placed in the <head> or <body> section of the HTML document.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Introduction</title>
<script>
    // JavaScript code goes here
    console.log("Hello from JavaScript!");
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>

Placing JavaScript at the end of the <body> tag is a common practice to ensure that the JavaScript code doesn’t block the rendering of the page content.

2. Variables and Data Types

Variables and Their Declaration:
Variables are used to store and manage data in JavaScript. They act as placeholders for values that can change over time. To declare a variable, you use the var, let, or const keyword followed by the variable name. The difference between them lies in their scope and mutability:

var age;      // Declaring a variable named 'age' using 'var'
let name;     // Declaring a variable named 'name' using 'let'
const pi = 3.14; // Declaring a constant variable named 'pi' using 'const'

Data Types:
JavaScript has several built-in data types that determine the kind of value a variable can hold. The common data types include:

  • Numbers: Represents numeric values, both integers and floating-point numbers.
  • Strings: Represents sequences of characters, enclosed in single (”) or double ("") quotes.
  • Booleans: Represents either true or false.
  • Null: Represents an intentional absence of any value.
  • Undefined: Represents an uninitialized variable or missing property.
  • Objects: Represents complex data structures, including arrays, functions, and more.
  • Arrays: Represents ordered collections of values.

Variable Naming Conventions:
When naming variables, it’s important to follow certain naming conventions to make your code more readable and maintainable:

  • Variable names can contain letters, digits, underscores (_), or dollar signs ($).
  • They must start with a letter, underscore, or dollar sign.
  • Variable names are case-sensitive (myVar and myvar are considered different variables).
  • Use meaningful names that reflect the purpose of the variable.
  • Avoid using reserved words like var, let, const, if, while, etc.

let firstName = "John";   // Good variable name: descriptive and follows conventions
let num1 = 10;            // Less descriptive variable name
let $price = 19.99;       // Variable name starts with a dollar sign
let _counter = 0;         // Variable name starts with an underscore

Here is demo to cover all data types:

// Numbers
var age = 25;
var price = 9.99;

// Strings
var name = "Alice";
var message = 'Hello, world!';

// Booleans
var isActive = true;
var isStudent = false;

// Null and Undefined
var emptyValue = null;       // Represents intentional absence of value
var undefinedValue;          // Represents uninitialized variable

// Objects
var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  isStudent: false
};

// Arrays
var colors = ["red", "green", "blue"];
var numbers = [1, 2, 3, 4, 5];

console.log("Age:", age);
console.log("Price:", price);

console.log("Name:", name);
console.log("Message:", message);

console.log("isActive:", isActive);
console.log("isStudent:", isStudent);

console.log("Empty Value:", emptyValue);
console.log("Undefined Value:", undefinedValue);

console.log("Person:", person);

console.log("Colors:", colors);
console.log("Numbers:", numbers);

run above demo in cli,

node .\data-type.js
Age: 25
Price: 9.99
Name: Alice
Message: Hello, world!
isActive: true
isStudent: false
Empty Value: null
Undefined Value: undefined
Person: { firstName: 'John', lastName: 'Doe', age: 30, isStudent: false }
Colors: [ 'red', 'green', 'blue' ]
Numbers: [ 1, 2, 3, 4, 5 ]

3. Operators

  • Arithmetic Operators:
    Arithmetic operators are used to perform basic mathematical calculations on numeric values.

var x = 10;
var y = 5;

var sum = x + y;     // Addition
var difference = x - y; // Subtraction
var product = x * y; // Multiplication
var quotient = x / y; // Division
var remainder = x % y; // Modulus (remainder of division)

  • Assignment Operators:
    Assignment operators are used to assign values to variables, often with calculations.

var num = 10;
num += 5;   // Equivalent to: num = num + 5;
num -= 3;   // Equivalent to: num = num - 3;
num *= 2;   // Equivalent to: num = num * 2;
num /= 4;   // Equivalent to: num = num / 4;
num %= 2;   // Equivalent to: num = num % 2;

  • Comparison Operators:
    Comparison operators are used to compare values and return boolean results.

var a = 10;
var b = 5;

var isEqual = a == b; // Equal to
var isNotEqual = a != b; // Not equal to
var isGreater = a > b; // Greater than
var isLess = a < b; // Less than
var isGreaterOrEqual = a >= b; // Greater than or equal to
var isLessOrEqual = a <= b; // Less than or equal to

  • Logical Operators:
    Logical operators are used to combine or manipulate boolean values.

var isSunny = true;
var isWarm = false;

var isBoth = isSunny && isWarm; // Logical AND
var isEither = isSunny || isWarm; // Logical OR
var isNot = !isSunny; // Logical NOT

4. Control Flow

  • Conditional Statements: if, else if, else
    Conditional statements allow you to execute different code blocks based on certain conditions.

var age = 18;

if (age >= 18) {
console.log("You're an adult.");
} else if (age >= 13) {
console.log("You're a teenager.");
} else {
console.log("You're a child.");
}

  • Switch Statements:
    Switch statements provide an alternative to multiple if conditions when you need to compare a single value against multiple possible values.

var day = "Wednesday";

switch (day) {
case "Monday":
    console.log("It's the start of the week.");
    break;
case "Wednesday":
    console.log("Halfway through the week.");
    break;
case "Friday":
    console.log("Weekend is almost here.");
    break;
default:
    console.log("It's another day.");
}

  • Ternary (Conditional) Operator:
    The ternary operator provides a concise way to write simple conditional expressions.

var isRaining = true;
var weatherMessage = isRaining ? "Remember your umbrella." : "Enjoy the weather!";
console.log(weatherMessage);

5. Loops

  • for Loop:
    The for loop is used to execute a block of code repeatedly for a specified number of iterations.

for (var i = 0; i < 5; i++) {
console.log("Iteration: " + i);
}

  • while Loop:
    The while loop continues executing a block of code as long as a specified condition is true.

var count = 0;

while (count < 3) {
console.log("Count: " + count);
count++;
}

  • do-while Loop:
    The do-while loop is similar to the while loop, but it ensures the code block is executed at least once before checking the condition.

var x = 0;

do {
console.log("Value of x: " + x);
x++;
} while (x < 3);

  • break and continue Statements:
    The break statement is used to exit a loop prematurely, while the continue statement skips the current iteration and moves to the next.

for (var i = 0; i < 5; i++) {
if (i === 3) {
    break; // Exit the loop when i is 3
}
console.log("Iteration: " + i);
}

for (var j = 0; j < 5; j++) {
if (j === 2) {
    continue; // Skip iteration when j is 2
}
console.log("Iteration: " + j);
}

6. Functions

  • Function Declaration and Invocation:
    Functions are blocks of code that can be defined and called to perform specific tasks.

// Function declaration
function greet(name) {
console.log("Hello, " + name + "!");
}

// Function invocation
greet("Alice");

  • Parameters and Arguments:
    Functions can accept parameters (inputs) and return results (outputs).

function addNumbers(a, b) {
return a + b;
}

var sum = addNumbers(5, 7); // 12

  • Return Statement:
    The return statement specifies the value a function should return when called.

function square(num) {
return num * num;
}

var squaredValue = square(4); // 16

  • Scope and Closures:
    Functions have their own scope, and variables declared within a function are local to that function. Closures allow functions to "remember" variables from their containing scope.

function outer() {
var outerVar = "I'm from outer scope";

function inner() {
    console.log(outerVar); // Can access outerVar due to closure
}

return inner;
}

var innerFunction = outer();
innerFunction(); // Outputs: "I'm from outer scope"

7. Arrays

  • Creating and Initializing Arrays:
    Arrays are ordered collections of values that can hold different data types.

var numbers = [1, 2, 3, 4, 5];
var colors = ["red", "green", "blue"];
var mixedArray = [1, "hello", true];

  • Accessing Array Elements:
    Array elements are accessed using their index, starting from 0.

var fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "orange"

  • Modifying Arrays:
    Arrays can be modified by assigning new values to specific indices.

var animals = ["dog", "cat", "rabbit"];
animals[1] = "elephant"; // Modify the second element

  • Array Methods:
    JavaScript provides built-in methods to manipulate arrays efficiently.

var numbers = [3, 1, 4, 1, 5, 9];

numbers.push(2); // Add an element to the end
numbers.pop();   // Remove the last element
numbers.shift(); // Remove the first element
numbers.unshift(8); // Add an element to the beginning
numbers.splice(2, 1); // Remove one element at index 2

8. Objects

  • Creating Objects:
    Objects are complex data structures that allow you to group related data and functionality together.

var person = {
firstName: "John",
lastName: "Doe",
age: 30,
isStudent: false
};

  • Adding and Accessing Object Properties:
    Object properties are accessed using dot notation or bracket notation.

console.log(person.firstName); // "John"
console.log(person["lastName"]); // "Doe"

  • Methods within Objects:
    Objects can contain functions as properties, known as methods.

var calculator = {
add: function(a, b) {
    return a + b;
},
subtract: function(a, b) {
    return a - b;
}
};

var sum = calculator.add(5, 3); // 8
var difference = calculator.subtract(10, 4); // 6

  • Object-Oriented Programming Basics:
    Objects and classes are foundational concepts in object-oriented programming (OOP).

// Constructor function
function Car(make, model) {
this.make = make;
this.model = model;
}

// Creating an instance of Car
var myCar = new Car("Toyota", "Camry");
console.log(myCar.make); // "Toyota"

9. Working with the Document Object Model (DOM)

  • Accessing and Modifying Elements:
    The Document Object Model (DOM) represents the structure of an HTML document as a tree of objects. JavaScript can be used to access and manipulate these objects.

dom-hello.html

<div id="myDiv">Hello, World!</div>
<script src="dom-hello.js"></script>

dom-hello.js

var myElement = document.getElementById("myDiv");
myElement.textContent = "Hello, DOM!";

We also can change dom interactively from browser developer console.

>var myElement = document.getElementById(&quot;myDiv&quot;);
undefined
>console.log(myElement)
    &lt;div id=​&quot;myDiv&quot;&gt;​Hello, DOM!​&lt;/div&gt;​
>console.log(myElement.textContent)
Hello, DOM!
>myElement.textContent = &quot;Hello, DOM world!&quot;;
'Hello, DOM world!'
t&gt;console.log(myElement.textContent)
Hello, DOM world!

  • Event Handling: Adding Event Listeners:
    You can make web pages interactive by responding to user actions using event listeners.

button.html

<!-- HTML -->
<button id="myButton">Click Me</button>
<script src="button.js"></script>

button.js

var button = document.getElementById("myButton");

button.addEventListener("click", function() {
alert("Button clicked!");
});

  • Changing CSS Styles Dynamically:
    JavaScript can be used to manipulate CSS styles of HTML elements dynamically.

css.html

<div id="myDiv" class="box">Styled Div</div>
<script src="css.js"></script>

css.js

var myDiv = document.getElementById("myDiv");

myDiv.style.backgroundColor = "orange";
myDiv.style.color = "white";

  • Creating and Modifying Elements:
    JavaScript allows you to create new HTML elements and add them to the DOM.

p.html

<div id="container">container</div>

<script src="p.js"></script>

p.js

var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";

var container = document.getElementById("container");
container.appendChild(newParagraph);

10. Error Handling

  • Try…Catch Statements:
    JavaScript provides a mechanism to handle errors gracefully using try and catch blocks.

try {
// Code that might throw an error
var result = 10 / 0; // Division by zero
console.log(result);
} catch (error) {
// Code to handle the error
console.error("An error occurred:", error.message);
}

run result

$node try1.js
Infinity

  • Throwing Custom Errors:
    You can also create and throw custom errors to handle specific situations.

function divide(a, b) {
if (b === 0) {
    throw new Error("Division by zero is not allowed.");
}
return a / b;
}

try {
var result = divide(10, 0);
console.log(result);
} catch (error) {
console.error("An error occurred:", error.message);
}

run result

$node try2.js
An error occurred: Division by zero is not allowed.

11. Asynchronous JavaScript

  • Introduction to Asynchronous Programming:
    Asynchronous JavaScript allows tasks to be executed independently without blocking the main execution thread. This is particularly important for handling tasks like network requests, file I/O, and timers without freezing the user interface.

  • Callbacks:
    Callbacks are functions passed as arguments to other functions. They are commonly used to handle asynchronous operations, like fetching data from a server.

function fetchData(callback) {
// Simulate fetching data from a server
setTimeout(function() {
    var data = "Fetched data";
    callback(data);
}, 1000);
}

fetchData(function(result) {
console.log(result);
});

  • Promises:
    Promises provide a more structured and readable way to work with asynchronous code. They represent the eventual completion or failure of an asynchronous operation.

function fetchData() {
return new Promise(function(resolve, reject) {
    // Simulate fetching data from a server
    setTimeout(function() {
    var data = "Fetched data";
    resolve(data);
    }, 1000);
});
}

fetchData()
.then(function(result) {
    console.log(result);
})
.catch(function(error) {
    console.error(error);
});

  • Async/Await:
    Async/await is a modern approach to handling asynchronous code, making it look more like synchronous code.

async function fetchData() {
// Simulate fetching data from a server
return new Promise(function(resolve) {
    setTimeout(function() {
    var data = "Fetched data";
    resolve(data);
    }, 1000);
});
}

async function process() {
try {
    var result = await fetchData();
    console.log(result);
} catch (error) {
    console.error(error);
}
}

process();

Here’s a complete code example that demonstrates asynchronous programming using both callbacks, promises, and async/await:

async.js

// Simulating asynchronous data fetching
function fetchData(callback) {
  setTimeout(function() {
    var data = "Fetched data using callback";
    callback(data);
  }, 1000);
}

// Using Callbacks
fetchData(function(result) {
  console.log(result);
});

// Using Promises
function fetchDataPromise() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      var data = "Fetched data using promises";
      resolve(data);
    }, 1000);
  });
}

fetchDataPromise()
  .then(function(result) {
    console.log(result);
  })
  .catch(function(error) {
    console.error(error);
  });

// Using async/await
async function fetchDataAsync() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      var data = "Fetched data using async/await";
      resolve(data);
    }, 1000);
  });
}

(async function() {
  try {
    var result = await fetchDataAsync();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
})();

In this example, data fetching is simulated using three different asynchronous approaches: callbacks, promises, and async/await. Each approach achieves the same goal of fetching data asynchronously after a delay of 1 second. The console output will show the fetched data using each method.

run result

$node .\async.js
Fetched data using callback
Fetched data using promises
Fetched data using async/await

12. Basic Input/Output

  • Displaying Output with console.log():
    The console.log() function is used to output data to the browser’s console for debugging and logging purposes.

console.log("Hello, world!");

  • Getting Input with prompt():
    The prompt() function displays a dialog box that allows the user to input data, which can then be captured and used in your code.

var name = prompt("Enter your name:");
console.log("Hello, " + name + "!");

  • HTML Input Elements:
    In a web page, you can use HTML input elements like text fields, buttons, and forms to interact with users and get input.

<!-- HTML -->
<input type="text" id="nameInput">
<button id="submitButton">Submit</button>
<p id="output"></p>


// JavaScript
var nameInput = document.getElementById("nameInput");
var submitButton = document.getElementById("submitButton");
var output = document.getElementById("output");

submitButton.addEventListener("click", function() {
var name = nameInput.value;
output.textContent = "Hello, " + name + "!";
});

13. Debugging Tools

  • Browser Console:
    Most modern browsers provide a built-in developer console that allows you to log messages, inspect variables, and execute code directly within your webpage.

console.log("Debugging message");

  • Debugging Techniques:

  • Logging: Use console.log() to print variable values and debug messages.

  • Breakpoints: Set breakpoints in your code to pause execution and inspect variables.

  • Step Through: Use step-by-step debugging to follow code execution line by line.

  • Inspect Variables: Use the console or debugging tools to inspect variable values.

  • Error Messages: Pay attention to error messages to identify and fix issues.

  • Common Debugging Errors:

  • Syntax Errors: Incorrect syntax that prevents code from running.

  • Logical Errors: Code runs, but produces incorrect results.

  • Runtime Errors: Errors that occur during code execution.

  • Debugging Workflow:

    1. Identify the Problem: Understand what’s causing the issue.
    2. Reproduce the Issue: Make sure the problem is consistent.
    3. Inspect the Code: Check for syntax errors, typos, and logical issues.
    4. Use Debugging Tools: Utilize breakpoints, step through code, and inspect variables.
    5. Fix the Issue: Apply necessary changes to resolve the problem.
    6. Test and Verify: Confirm that the issue is resolved and the code behaves as expected.

14. Further Reading