Scribd
Upload
15 views4 pages

JavaScript 12-Hour Teaching Plan

The JavaScript Teaching Plan outlines a 12-hour course divided into six sessions, covering foundational topics such as JS basics, control flow, arrays and objects, DOM manipulation, advanced DOM and browser storage, and modern JavaScript features. Each session has specific goals aimed at enabling students to understand and apply JavaScript concepts effectively. The plan emphasizes a teaching approach of 60% explanation and 40% live coding with practical mini projects.

Uploaded by

kimsoroctober
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views4 pages

JavaScript 12-Hour Teaching Plan

The JavaScript Teaching Plan outlines a 12-hour course divided into six sessions, covering foundational topics such as JS basics, control flow, arrays and objects, DOM manipulation, advanced DOM and browser storage, and modern JavaScript features. Each session has specific goals aimed at enabling students to understand and apply JavaScript concepts effectively. The plan emphasizes a teaching approach of 60% explanation and 40% live coding with practical mini projects.

Uploaded by

kimsoroctober
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

✅ JavaScript Teaching Plan (12 Hours Total)

🕒 Session 1 (2 Hours)

JS Basics – Foundation

1. Introduction to JavaScript (what, why, where used)

2. JS Output

o [Link]

o alert

o [Link]

3. JS Data Types & Variables

o var, let, const

o primitive vs reference

4. JS Operators

o arithmetic, comparison, logical, assignment

📌 Goal: Students understand JS basics & syntax

🕒 Session 2 (2 Hours)

Logic & Control Flow


5. JS Conditional

 if, else, else if, switch

6. JS Loop & Iteration

o for, while, do...while

o break, continue

7. JS Function

o function declaration

o arrow function

o parameters & return

📌 Goal: Students can write logic-based programs


🕒 Session 3 (2 Hours)

Array, Object & Methods


8. JS Array & Useful Methods

 push, pop, map, filter, reduce, forEach

9. JS Object & Array of Objects

o object structure

o access/update data

10. JS Number, Math, String Useful Methods

 [Link], [Link]

 toFixed, toUpperCase, split, includes

📌 Goal: Students work with real data structures

🕒 Session 4 (2 Hours)

DOM Basics
11. JS DOM Selector Methods

 getElementById

 querySelector, querySelectorAll

12. JS DOM Event Methods

 onclick

 addEventListener

13. JS DOM Manipulation Methods

 innerHTML

 style

 classList

📌 Goal: Students interact with HTML using JS


🕒 Session 5 (2 Hours)

Advanced DOM & Browser Storage


14. JS DOM Traversal Methods

 parentElement

 children

 nextElementSibling

15. JS JSON

 [Link]

 [Link]

16. JS Local Storage

 [Link]

 getItem

 removeItem

📌 Goal: Students handle data & browser storage

🕒 Session 6 (2 Hours)

Modern JavaScript
17. JS Fetch API + Async / Await

 fetch

 then

 async / await

 API example

18. JS Module Import & Export

 export

 import

 basic module structure

📌 Goal: Students understand modern JS & API usage


🔥 Teaching Tip (Important)

For every session:

 60% explanation

 40% live coding + small exercises

Example mini projects:

 DOM: Todo List

 Fetch: API user list

 LocalStorage: Save form data

You might also like