JavaScript Introduction Lecture Notes

Overview

• Four Frequently Asked Questions:
  1. What is JavaScript?
  2. What can you do with it?
  3. Where does JavaScript code run?
  4. What is the difference between JavaScript and ECMAScript?

---

1. What is JavaScript?

• One of the most popular programming languages.
• Widely used by companies like Netflix, Walmart, and PayPal.
• Average salary for a JavaScript developer in the U.S.: $72,000/year.
• Job roles:
  • Front-end developer
  • Back-end developer
  • Full-stack developer

---

2. What can you do with JavaScript?

• Initially used only in browsers for interactive web pages.
• Current capabilities include:
  • Full-blown web and mobile applications
  • Real-time networking applications (e.g., chats, video streaming)
  • Command line tools
  • Games

---

3. Where does JavaScript code run?

• Originally designed to run in browsers; each browser has a JavaScript engine.
  • Examples of engines:
    • Firefox: SpiderMonkey
    • Chrome: V8
• In 2009, Ryan Dahl embedded the V8 engine in a C++ program called Node, allowing JavaScript to run outside browsers.
• Runtime environments:
  • Browsers
  • Node.js

---

4. Difference between JavaScript and ECMAScript

• ECMAScript: Specification for JavaScript.
• JavaScript: Programming language conforming to ECMAScript.
• Managed by the ECMA organization.
• First version: 1997.
• Annual releases since 2015, e.g., ES6 (ECMAScript 2015) introduced new features.

---

JavaScript Demo

• Open Chrome Developer Tools: Right-click > Inspect > Console tab.
• Example code:

  console.log('Hello, World!');
  

• Additional example:

  alert('Yo');
  

• Next Topic: Setting up the development environment.

---

Setting Up the Development Environment

• Recommended Code Editor: Visual Studio Code (VS Code)
  • Download: code.visualstudio.com
• Recommended to install Node from Node.js.org for library installations.
• Create a folder named Js-Basics and open it in VS Code.
• Add an index.html file with basic HTML structure.
• Install Live Server extension for serving the web application.

---

Writing JavaScript Code

• Add a <script> element at the end of the body in index.html for best practice.
• Example JavaScript code:

  console.log('Hello, World!');
  

• Extract JavaScript code into index.js and link it in index.html.

---

Executing JavaScript Code in Node

• Open terminal (or integrated terminal in VS Code) to run Node.
• Command:

  node index.js
  

• Node utilizes V8 engine to execute JavaScript code.

---

Introduction to Variables

• Variable: Stores data temporarily in memory.
• Declaration with let (modern practice):

  let name;
  

• Variables are case-sensitive and must follow naming rules.

---

Constants in JavaScript

• Use const for values that shouldn’t change.
• Example:

  const interestRate = 0.3;
  

• Attempting to reassign a constant results in an error.

---

Primitive vs. Reference Types

• Primitive Types: String, Number, Boolean, Undefined, Null.
• Dynamic Language: Variable types can change at runtime.
• Reference Types: Objects, Arrays, Functions.

---

Objects in JavaScript

• Objects group related variables (properties) together.
• Example:

  let person = { name: 'Mosh', age: 30 };
  

• Access properties using dot notation or bracket notation.

---

Arrays in JavaScript

• Use arrays to store lists of items.
• Example:

  let selectedColors = ['red', 'blue'];
  

• Access elements using their index.

---

Functions in JavaScript

• A function is a set of statements performing a task or calculating a value.
• Declare a function:

  function greet(name) {
      console.log('Hello ' + name);
  }
  

• Functions can have parameters and return values.