Module Outline
JavaScript Review
Module Summary
This module serves as a review of key JavaScript concepts and techniques that learners have previously been exposed to. The focus will be on reinforcing foundational JavaScript skills such as variables, functions, conditionals, loops, arrays, and DOM manipulation. Learners will also revisit more advanced concepts, including objects, event handling, and local storage. By the end of this module, learners will be well-prepared to apply these skills in more complex projects.
Learning Objectives
By the end of this module, learners will be able to:
- Explain and use JavaScript variables, functions, and data types.
- Perform mathematical operations and manipulate strings.
- Implement event listeners to handle user interactions.
- Manipulate the DOM using JavaScript methods.
- Utilize arrays and loops to process data efficiently.
- Implement conditional logic to control application flow.
- Create and use objects, including methods and properties.
- Store and retrieve data using local storage.
- Write cleaner code using template literals and function parameters.
Learning Outcomes
Upon completing this module, learners will be able to:
- Demonstrate proficiency in using JavaScript data types, variables, and functions.
- Use event listeners and DOM manipulation to dynamically update web content.
- Apply JavaScript control structures such as loops and conditionals to solve common problems.
- Create, manipulate, and iterate over arrays and objects.
- Implement local storage to persist data across sessions.
- Develop small interactive projects using core JavaScript concepts.
Module Outline
Lesson 1: JavaScript Fundamentals, Template Literals, and Math Methods
- Time: 2 hours
- Topics:
- Variables and data types
- Template literals
- Mathematical operations
- Functions and parameters
- Activities:
- Practice coding: Write functions and variables
- Interactive coding challenge: Build a simple calculator
- Knowledge Check: Multiple-choice questions on variables, data types, functions, and template literals.
Lesson 2: DOM Manipulation & Event Handling
- Time: 1.5 hours
- Topics:
- DOM elements and methods (
innerText
,createElement
,append
) - Event listeners (
onclick
,addEventListener
)
- DOM elements and methods (
- Activities:
- Build a simple to-do list app with DOM manipulation and event listeners.
- Knowledge Check: Multiple-choice questions on DOM manipulation and event handling.
Lesson 3: Arrays and Loops
- Time: 2 hours
- Topics:
- Arrays (
push
,pop
,unshift
,shift
) - Looping through arrays with
for
loops and array methods - Using
while
anddo...while
loops to repeat actions
- Arrays (
- Activities:
- Build a shopping cart application that uses arrays and loops to dynamically display content.
- Knowledge Check: Multiple-choice questions on array methods and loops.
Lab: Variables and Functions Practice
- Time: 1 hour (asynchronous)
- Task: Solve coding challenges that require creating and manipulating variables and functions, logging results in the console.
- Objective: By the end of this activity, you will have demonstrated your ability to declare variables and write reusable functions.
Lab: Array Manipulation
- Time: 1 hour (asynchronous)
- Task: Create and manipulate arrays using JavaScript methods (
push
,pop
, etc.), and dynamically update the DOM to display the results. - Objective: By the end of this activity, you will have demonstrated your ability to manipulate arrays and display their content dynamically using DOM methods.
Lesson 4: Conditionals, Logical Operators, and Object Basics
- Time: 1.5 hours
- Topics:
- Conditional statements (
if
,else if
,else
) - Logical operators (
&&
,||
) - JavaScript objects and methods
- Conditional statements (
- Activities:
- Build a decision-based guessing game using conditionals and objects.
- Knowledge Check: Multiple-choice questions on conditionals, logical operators, and objects.
Final Assessments
Skills-Based Assessment (SBA)
- Time: 4 hours
- Format: Practical project
- Activity: Build an interactive JavaScript-based app that incorporates DOM manipulation, arrays, objects, conditionals, and local storage.
- Deliverable: Submit the project via GitHub and provide a brief reflection on the code structure and problem-solving approach.
- Rubric: Evaluation based on code quality, functionality, use of JavaScript techniques (arrays, loops, objects), and problem-solving approach.