Ocean Stack

JavaScript Essentials Course

Add interactivity and logic to your web pages with JavaScript. This course introduces variables, functions, events, DOM manipulation, and simple client-side scripting, enabling you to bring your static pages to life.

🗓️ Course Schedule: JavaScript Essentials

Duration: 2 Days
Time: 10:00 AM – 4:00 PM Daily
Format: Instructor-led • Live Coding • Practical Labs

🔹 Day 1: JavaScript Basics & Programming Logic

10:00 AM – 11:30 AM
🚀 Getting Started with JavaScript

  • What is JavaScript and where does it run?
  • Embedding JavaScript in HTML (<script> tags)
  • Using browser developer tools (console and inspector)
  • Variables: let, const, var — when and why to use
  • Data types: strings, numbers, booleans, null, undefined

11:30 AM – 1:00 PM
🔁 Conditions & Control Flow

  • if, else, and else if logic
  • Comparison and logical operators
  • Writing reusable logic with functions
  • Function declarations vs expressions
  • Lab: Create a simple age checker or input validator

1:00 PM – 2:00 PM — Lunch Break

2:00 PM – 4:00 PM
📊 Arrays, Loops & Basic Data Handling

  • Declaring arrays and accessing elements
  • Looping with for, while, and for...of
  • Using .length, .push(), .pop(), .splice()
  • Intro to objects and simple key-value data
  • Lab: Build a small contact list viewer with looped output

🔹 Day 2: Interactivity, Events & DOM Manipulation

10:00 AM – 11:30 AM
🖱️ DOM Access & Manipulation

  • What is the DOM?
  • Selecting elements: getElementById, querySelector
  • Changing content (innerText, innerHTML)
  • Updating styles and classes with JavaScript
  • Lab: Make a “theme switcher” or live label updater

11:30 AM – 1:00 PM
📌 Events & User Interaction

  • Listening to events: click, input, submit
  • Using addEventListener() properly
  • Form input and validation basics
  • Lab: Build a mini form that responds to user input

1:00 PM – 2:00 PM — Lunch Break

2:00 PM – 4:00 PM
🛠️ Final Project: Interactive Web App

  • Combine all concepts into a mini-app (choose one):
    → To-Do List, Quiz App, or Feedback Form
  • Features include:
    • Dynamic DOM updates
    • Array manipulation
    • Events and validation
  • Wrap-up, Q&A, recap of key JavaScript concepts

🧠 What You’ll Learn

  • The fundamentals of JavaScript syntax and logic
  • How to make web pages dynamic and interactive
  • DOM access and event-driven programming
  • Building functional mini-apps with real-world utility