Introduction to JAVASCRIPT

Module Overview
JavaScript works together with HTML and CSS to build complete and interactive websites. It runs directly in the users web browser, so no special software is required to execute it. JavaScript helps improve user experience by making web pages more responsive and engaging.

LEARNING OUTCOMES

  • • Understand JavaScript Basics
  • • Write Basic JavaScript Code
  • • Control Program Flow
  • • Handle Functions
  • • Work with Events
  • • Manipulate the DOM (Document Object Model)
  • • Debug and Test Code
  • • Develop Interactive Web Applications

    • Unit 1: Understanding the Web and HTML

    JavaScript is a client-side scripting language that runs in the web browser to make websites interactive. To understand how JavaScript works on the web, you need to know how web pages are built and displayed.

    KEY TERMS

  • • JavaScript (JS) – A programming language used to make web pages interactive and dynamic.
  • • Variable – A container that stores data values. Declared using var, let, or const.
  • • Data Types – Types of data in JS, including Number, String, Boolean, Object, Array, Null, and Undefined.
  • • Function – A block of code that performs a specific task and can be reused.
  • • Parameter / Argument – Values passed into a function to work with inside it.
  • • Operator – Symbols that perform operations on values, e.g., +, -, *, /, ==.
  • • Conditionals – Statements that make decisions, like if, else if, else, and switch.
  • • Loop – Repeats a block of code multiple times, e.g., for, while, do-while.
  • • Array –A collection of multiple values stored in a single variable.
  • • Object – A collection of key-value pairs used to represent real-world entities.
  • • DOM (Document Object Model) – A programming interface that allows JavaScript to access and manipulate HTML elements.
  • • Event – Actions or occurrences that JavaScript can respond to, e.g., click, hover, keypress.
  • • Comment – Text ignored by JavaScript, used to explain code. Written as // for single-line or /* */ for multi-line..
  • • Console –A tool in the browser used for debugging and logging messages using console.log().
  • • Syntax – The set of rules that defines correct JavaScript code.

    • Unit 2: JAVASCRIPT Document Structure

    A JavaScript program or file is typically saved with a .js extension. The structure of a JavaScript document follows a simple pattern that organizes code for readability and functionality.

    CORE STRUCTURE COMPONENTS

  • • Comments
  • • Variables and Constants
  • • Data Types
  • • Operators
  • • Statements
  • • Functions
  • • Conditionals
  • • Loops
  • • Events
  • • DOM (Document Object Model) Interaction

    • Unit 3: Text and Content Elements

    JavaScript can manipulate both text and content on a web page dynamically. These elements allow developers to update the page without reloading it.

    COMMON TEXT ELEMENTS

  • • textContent
  • • innerText
  • • innerHTML (strong)
  • • style (Text Styles)
  • • fontSize
  • • fontFamily
  • • textAlign

    • hover any card → interactive glow, shift, and icons respond

    interactive ✦