Understanding the functions of Javascript

Introduction: Making Your Web Pages Come to Life!

Welcome to Unit 2! So far, you have learned how HTML provides the "skeleton" of a web page and how CSS adds the "skin" or style. Now, it is time to add the "brain" – JavaScript. JavaScript is the programming language that adds interactivity and responsiveness. Without it, websites would be static, like a printed poster. With JavaScript, we can create image galleries, validate forms, and respond to every click or keypress a user makes. Don't worry if programming seems a bit scary at first; we will break it down step-by-step!

9.1 The Document Object Model (DOM)

To change anything on a web page, JavaScript needs a way to "talk" to the HTML. It does this through the Document Object Model (DOM).

What is the DOM?

Think of the DOM as a map or a family tree of your HTML document. When a browser loads your page, it creates this map. JavaScript can use the DOM to:

• Access content (like reading what a user typed in a box).
• Update content (like changing a heading's text without refreshing the page).
• Change styles (like making a button turn red when clicked).

Analogy: Imagine your web page is a house. The DOM is the electrical wiring plan. JavaScript is the remote control that uses that wiring to turn lights on or off!

Quick Review: The DOM is the bridge between your JavaScript code and the browser window.

Key Takeaway: JavaScript uses the DOM to select, change, or move elements on the page in real-time.

9.2 Regular Expressions (Regex)

Have you ever tried to sign up for a website and it told you "Your password must contain a number"? That is often handled by Regular Expressions.

Validation and Pattern Matching

A Regular Expression (or Regex) is a special sequence of characters that forms a search pattern. We use them for validation checks to ensure data is in the right format.

You need to understand how Regex searches for:

• Letters: Finding specific sequences of upper-case or lower-case characters.
• Numbers: Checking if a field (like a phone number) contains digits.
• Punctuation and Symbols: Looking for things like the "@" symbol in an email.
• Repeating Patterns: Checking for a specific number of digits, like a 5-digit zip code.

Memory Aid: Think of Regex as a "Search and Filter" tool. If the input matches the pattern, the data is valid!

Key Takeaway: Regular Expressions are used to validate user input by matching patterns of letters, numbers, and symbols.

9.3 Programmed Functionality

This is the core of programming. To make a web page "do" things, you need to understand the basic building blocks of code.

Adding JavaScript to a Page

You can add JavaScript to your HTML using the <script> tag. Usually, this is placed at the bottom of the HTML file so the page loads its content first.

Core Programming Concepts

• Variables: These are containers for storing data. Imagine them as labeled boxes where you keep information.
• Assignment: Using the = sign to put a value into a variable. For example: let score = 10;
• Comments: Notes for humans that the computer ignores. In JavaScript, we use // for a single line.
• Data Structures:
  1D Array: A single list of items, like a shopping list. \( [ "Milk", "Bread", "Eggs" ] \).
  2D Array: A list of lists, like a cinema seating plan with rows and columns.
• Selection: Using if statements to make decisions. If the user is logged in, show the "Logout" button.
• Repetition and Iteration: Using loops (like for or while) to do a task over and over again, like checking every item in a list.
• Subprograms (Functions): Blocks of code designed to perform a particular task. You "call" the function whenever you need that task done.
• Object Orientation: A way of organizing code by grouping data and actions into "objects."

Did you know? A 2D Data Structure is basically a table! If you can use a spreadsheet, you can understand a 2D array.

Key Takeaway: Logic structures like selection (decisions) and iteration (loops) allow JavaScript to handle complex tasks automatically.

9.3.3 Understanding Events

JavaScript doesn't just run randomly; it waits for Events to happen. An event is an action that takes place in the browser.

Common Event Types:

• User Interface (UI) events: Like the page finishing its loading process.
• Keyboard events: Like keydown (when a user presses a key).
• Mouse events: Like click or mouseover (hovering).
• Focus and Blur events: Focus is when you click inside a text box; Blur is when you click away from it.
• Form events: Like submit, which happens when a user clicks the "Send" button on a form.

Quick Review Box:
Action -> Event -> Function
(User clicks) -> (Click event triggers) -> (JavaScript runs code)

9.3.4 Combining JavaScript, HTML, and CSS

When these three work together, you can create interactive components. The syllabus requires you to understand how to build:

• Slideshows: Cycling through images.
• Modal Boxes and Images: Pop-up windows that appear over the content.
• Filter and Sort Lists: Organizing data (like sorting prices from low to high).
• Pop-ups: Small alert boxes.
• Tabbed Content: Switching between different sections of content without leaving the page.

Step-by-Step Logic: To make a Modal Box, JavaScript changes the CSS display property from "none" (hidden) to "block" (visible) when a button is clicked.

9.3.5 Error Handling and Debugging

Don't worry if your code doesn't work the first time – even professional developers spend most of their time fixing mistakes! This process is called debugging.

Common types of errors:

• Syntax Errors: Typos in your code (like forgetting a bracket).
• Logic Errors: The code runs, but it does the wrong thing (like adding instead of subtracting).

How to handle errors:
You can use error handling techniques (like try...catch blocks) to prevent the whole website from crashing if something goes wrong. Using browser developer tools (pressing F12) is the best way to find and "debug" these issues.

Key Takeaway: Debugging is the process of finding and fixing errors, while error handling helps the program deal with unexpected problems gracefully.