Javascript Introduction Lecture Notes

Introduction to Javascript

• Javascript is a web-based interpreted programming language.
• Used for adding interactive behavior to web pages, building web and mobile apps, creating command line tools, and game development.
• Not the same as Java, despite the similar name.

Prerequisites

• HTML and CSS knowledge is helpful but not necessary.
• You'll need a web browser (Chrome, Firefox, Safari, Opera recommended) and a text editor (Visual Studio Code, Sublime Text, Replit).
  • Avoid using Internet Explorer.

Setting up Visual Studio Code

• Visit code.visualstudio.com to download.
• Install the Live Server extension for instant updates in the web browser upon saving.

Basic Setup

• Create a new folder for your project.
• Create essential files: index.js (Javascript), index.html, and style.css.
• Use HTML skeleton code and link CSS and JS files correctly in index.html.

Console and Output

• Use browser Developer Tools (Inspect -> Console) to view outputs.
• Use console.log() for displaying output.
• Use window.alert() for pop-up alerts.

Comments

• Single-line comments start with //.
• Multi-line comments are wrapped in /* ... */.

Variables

• Containers for storing data.
• Declaring variables: var, let, const (prefer let for variable scope management).
• Data types include numbers, strings, and booleans.

Arithmetic Expressions

• Combination of operands and operators.
• Operators include addition (+), subtraction (-), multiplication (*), division (/), and modulus (%).
• Augmented assignment operators like +=, -=, etc.*

User Input

• Easy way: window.prompt().
• HTML text box method for practical applications.

Type Conversion

• Convert strings to numbers using Number(), numbers to strings using String(), and to booleans using Boolean().
• Use typeof to check a variable's data type.

Constants

• Variables that cannot be changed.
• Declared using const keyword.

Javascript Math

• Intrinsic object for mathematical functions.
• Includes Math.round(), Math.floor(), Math.ceil(), Math.pow(), Math.sqrt(), and constants like Math.PI.

Practice Programs

• Examples include creating a simple counter, random number generator, and calculating the hypotenuse using the Pythagorean theorem.

String Properties and Methods

• Use properties like length and methods like charAt(), indexOf(), trim(), toUpperCase(), and replaceAll().

Slice and Method Chaining

• slice() extracts a portion of a string.
• Method chaining allows multiple method calls on the same object in a single line.

Control Flow

• If Statements: Execute code based on conditions.
• Switch Statements: Efficiently compare a value against multiple cases.

Logical Operators

• And (&&): Both conditions must be true.
• Or (||): At least one condition must be true.
• Not (!): Inverts the boolean value.

Loops

• While Loops: Repeat code while a condition is true.
• Do While Loops: Execute code once, then repeat while a condition is true.
• For Loops: Repeat code a specific number of times.
• Break and Continue: Control loop execution.

Arrays

• Store multiple values in a single variable.
• Use methods like push(), pop(), shift(), unshift(), length, and indexOf().

Functions

• Define reusable blocks of code.
• Can return values using return.
• Function expressions and arrow functions as alternatives to traditional functions.

Object-Oriented Programming

• Objects: Collections of properties and methods.
• Classes and Constructors: Blueprints for creating objects.
• Inheritance: Child classes inherit from parent classes.
• Static Members: Belong to the class, not instances.

Error Handling

• Use try-catch blocks to manage errors gracefully.
• throw for user-defined error handling.

Asynchronous Javascript

• Promises: Handle asynchronous operations.
• Async/Await: Syntactic sugar for working with promises.

DOM Manipulation

• Selecting Elements: Use methods like getElementById(), getElementsByClassName(), querySelector(), etc.
• Traversing and Modifying DOM: Navigate and change elements.

Events

• Handle user interactions with event listeners and handlers.

Canvas API

• Draw shapes and text using a 2D context on a canvas.

Games and Projects

• Examples include Stopwatch, Rock-Paper-Scissors, Tic-Tac-Toe, Snake, and Pong in Javascript.

This summary provides a comprehensive overview of the lecture on Javascript basics, covering essential concepts, tools, and programming techniques necessary for writing Javascript code.