The Complete Javascript & jQuery Course

Basics of Javascript

Variables

Variables accept letters, numbers, underscores, and dollar signs, though they cannot start with numbers. Reserved keywords cannot serve as variable names. The JavaScript community favors lower camelCase naming conventions like firstName or lastName.

Data Types: Strings

Both single and double quotes create valid strings. The typeof operator identifies variable types. Strings support operations including concatenation with the + operator, length measurement, index access, and the replace() method.

Data Types: Numbers

Numeric types include integers, decimals, and negative values. Standard mathematical operators apply, along with the Math object for operations like Math.random(), Math.ceil(), and Math.round(). The += operator works for incremental changes.

Booleans

Comparison operators include == (equal value), === (identical type and value), != (not equal), and !== (not equal value or type).

Null and Undefined

Both represent absent values. "Undefined" appears when variables lack assignment, while "null" typically indicates previously held values that were reset.

Functions

Conventionally use snake_case naming. Functions accept parameters, execute code blocks, and return values using the return keyword.

Arrays

Ordered collections supporting operations: push() (append), pop() (remove last), shift() (remove first), unshift() (prepend).

Objects

Key-value pair collections accessed via bracket notation or dot notation. Methods within objects use the this keyword to reference properties.

Diving Deeper into Javascript

Events

Browser actions trigger events like click, change, mouseover, and keydown. The event object provides details about triggered actions, including keyCode for keyboard events.

Forms

Select Boxes: Access selected options via selectedIndex or direct .value property.

Radio Buttons: Use getElementsByName() to retrieve radio button arrays, then iterate to identify checked items.

Checkboxes: Similar to radio buttons, retrieve arrays and loop through checked elements.

Change Events: The onchange event triggers when form elements change state.

jQuery

Introduction

jQuery simplifies JavaScript syntax. Almost all jQuery statements begin with $, using CSS-like selectors: $(".class"), $("element"), $("#id").

DOM Manipulation

• html() gets/sets inner HTML
• attr() accesses element attributes
• val() retrieves form field values

Forms with jQuery

• Radio buttons: $("input[name='gender']:checked").val()
• Checkboxes: $("input[name='interest']:checked")
• $.each() loops through jQuery collections

Events

• click(), change() bind functions to events
• $(document).ready() ensures DOM loads before execution
• on() method handles single or multiple events

Advanced Javascript

Callback Functions

Functions passed as arguments execute after parent function completion. Essential for handling asynchronous operations like API calls with delays.

Error Handling

try/catch blocks manage errors. The throw statement creates custom exceptions.

Namespaces

Objects group related variables and methods, simulating namespace functionality: var module = { property: value, method: function() {} }

JSON

JSON.stringify() converts objects to strings; JSON.parse() reverses the process.

Storage

• localStorage: Persists after browser closes
• sessionStorage: Clears when session ends

Both accept string values only; use JSON.stringify() for objects.

AJAX

XMLHttpRequest

Create requests with new XMLHttpRequest(). Monitor state changes via onreadystatechange. Success occurs when readyState == 4 and status == 200.

jQuery AJAX

Simplified syntax using $.ajax() with parameters: url, type, dataType, success, and error callbacks.