JavaScript Introduction Lecture Notes

Overview

In this lecture, we cover four frequently asked questions about JavaScript:

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?

• JavaScript is one of the most popular programming languages worldwide.
• It is growing rapidly and is used by big companies like Netflix, Walmart, and PayPal.
• Average salary for a JavaScript developer in the US: $72,000/year.
• Job roles include:
  • 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.
• Now enables the development of:
  • Full 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 using JavaScript engines (SpiderMonkey for Firefox, V8 for Chrome).
• Node.js allows running JavaScript outside the browser:
  • Developed by Ryan Dahl in 2009 by embedding Chrome's V8 in a C++ program.
• JavaScript code can run in:
  • Browsers
  • Node.js

---

4. Difference between JavaScript and ECMAScript

• ECMAScript is the specification; JavaScript is a language that adheres to this specification.
• Maintained by ECMA International.
• First version released in 1997. Annual updates started in 2015 (ES6 introduced many new features).

---

JavaScript in Action

• Demonstration of how to run JavaScript code in the browser's console.
  • Example: console.log('Hello, world!');
  • Mathematical operations: 2 + 2;
  • Alerts: alert('Yo!');

---

Setting Up Development Environment

• Recommended code editor: Visual Studio Code (VS Code)
  • Download from code.visualstudio.com
• Node.js installation recommended for managing third-party libraries.
  • Download from nodejs.org

Creating Project Folder

1. Create a new folder named Js-Basics.
2. Add index.html file with basic HTML boilerplate.
3. Install Live Server extension in VS Code to serve the web application.
4. Test by adding an h1 heading and checking in the browser.

---

Writing Your First JavaScript Code

• Insert a <script> tag at the end of the body section of index.html.
• Best practice to ensure the HTML elements are rendered before executing JavaScript.
• Example:

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

• Comments can be added using // for documentation.

---

Variables

• Variables store data temporarily in memory.
• Declaring Variables:
  • Use let for modern variable declarations (best practice over var).
• Variable naming rules:
  • Cannot be a reserved keyword.
  • Should be meaningful.
  • Cannot start with a number.
  • No spaces or hyphens.

Constants

• Use const for values that shouldn’t change.
• Example of error when trying to reassign a constant value.

---

Data Types in JavaScript

Primitive Types

• String: Sequence of characters (e.g., "Mosh").
• Number: Numeric value (e.g., 30).
• Boolean: True/False value.
• Undefined: Default for uninitialized variables.
• Null: Explicitly clear variable value.

Dynamic Typing

• JavaScript is a dynamic language; variable types can change at runtime.
• Example of checking variable types using typeof operator.

---

Reference Types

Objects

• Objects store related variables (properties).
• Example: Defining a person object with name and age properties.

Arrays

• Arrays store lists of items (e.g., selected colors).
• Access elements using indices (starting from 0).
• Example of dynamic array resizing and mixed data types.

Functions

• Functions perform tasks or calculate values.
• Example of defining and calling functions:
  • Function with parameters and return values.
  • Distinction between parameters and arguments.

---

Conclusion

• Encouragement to enroll in a comprehensive JavaScript course for further learning.
• Emphasis on hands-on practice and understanding core concepts.