30-day JavaScript for beginners
Course Outline
Day 1: Introduction to JavaScript
Objective: Understand the basics of JavaScript and
its usage in web development.
- Topics Covered:
- What is JavaScript?
- How JavaScript works with
HTML and CSS.
- Writing and running your
first JavaScript code.
- Lab Exercise:
- Create a simple HTML page
with a <script> tag.
- Write a JavaScript alert to display "Hello,
World!"
- Learn how to open the
browser's developer tools to view JavaScript output.
Day 2: JavaScript Syntax and Basic Output
Objective: Learn about JavaScript syntax,
statements, and outputs.
- Topics Covered:
- Variables: let, const, var.
- Output: console.log(), alert(), document.write().
- Comments: Single-line (//), Multi-line (/* */).
- Lab Exercise:
- Write a script that
declares a variable, assigns it a value, and then displays that value
using console.log().
Day 3: Data Types in JavaScript
Objective: Explore different data types in
JavaScript.
- Topics Covered:
- Primitive types: String,
Number, Boolean, Null, Undefined, Symbol.
- Reference types: Object,
Array, Function.
- Type checking: typeof.
- Lab Exercise:
- Declare variables of
different data types and log their values and types to the console.
- Experiment with type
conversion using String(), Number(), Boolean().
Day 4: Operators in JavaScript
Objective: Understand operators and their usage.
- Topics Covered:
- Arithmetic operators: +, -, *, /, %.
- Comparison operators: ==, ===, !=, >, <, >=, <=.
- Logical operators: &&, ||, !.
- Assignment operators: =, +=, -=, *=, /=.
- Lab Exercise:
- Create a simple program
that uses arithmetic operators to perform basic calculations and logs the
results.
Day 5: Conditional Statements
Objective: Understand how to use conditionals to
control the flow of a program.
- Topics Covered:
- if, else if, else.
- switch statement.
- Lab Exercise:
- Write a program that checks
a person's age and outputs whether they are eligible to vote using if statements.
- Implement the same logic using
a switch statement.
Day 6: Loops in JavaScript
Objective: Learn how to use loops to repeat code.
- Topics Covered:
- for loop.
- while loop.
- do...while loop.
- Lab Exercise:
- Create a program that
prints numbers from 1 to 10 using all three loops.
- Write a program that sums
all numbers from 1 to 100 using a for loop.
Day 7: Functions in JavaScript
Objective: Understand how to define and use functions
in JavaScript.
- Topics Covered:
- Function declaration and
function expression.
- Parameters and return
values.
- Function scope and
local/global variables.
- Lab Exercise:
- Write a function that takes
two numbers as arguments and returns their sum.
- Call the function with
different arguments and display the result using console.log().
Day 8: Arrays in JavaScript
Objective: Learn how to work with arrays in
JavaScript.
- Topics Covered:
- Creating arrays.
- Accessing array elements.
- Array methods: push(), pop(), shift(), unshift(), splice(), slice().
- Iterating over arrays using
loops.
- Lab Exercise:
- Create an array of five
numbers and calculate the sum and average.
- Use the push() and pop() methods to add and remove
elements from the array.
Day 9: Objects in JavaScript
Objective: Learn how to work with objects in
JavaScript.
- Topics Covered:
- Creating objects.
- Accessing object
properties.
- Methods in objects.
- Adding and removing object
properties.
- Lab Exercise:
- Create an object
representing a car with properties like make, model, and year.
- Add a method to the object
that displays the car details.
Day 10: DOM Manipulation
Objective: Understand how to interact with HTML
elements using JavaScript.
- Topics Covered:
- Selecting elements using document.getElementById(), document.querySelector().
- Changing the content and
style of elements.
- Event handling (click,
hover, etc.).
- Lab Exercise:
- Create a simple webpage
with buttons. Change the text content of a paragraph when a button is
clicked.
Day 11: Event Handling in JavaScript
Objective: Learn how to handle user interactions
using events.
- Topics Covered:
- Adding event listeners.
- Event types: click, mouseover, keydown, submit.
- Event propagation and event.preventDefault().
- Lab Exercise:
- Create a form with input
fields and a submit button. Add an event listener to validate form inputs
when the user submits the form.
Day 12: Error Handling and Debugging
Objective: Learn how to debug JavaScript and handle
errors.
- Topics Covered:
- Using console.log() for debugging.
- try...catch block for error handling.
- Common JavaScript errors.
- Lab Exercise:
- Write a script that throws
an error if the input value is not a number. Use a try...catch block to catch the error
and display a custom message.
Day 13: JSON in JavaScript
Objective: Understand JSON (JavaScript Object
Notation) and its usage.
- Topics Covered:
- JSON syntax.
- Converting JavaScript
objects to JSON and vice versa (JSON.stringify(), JSON.parse()).
- Lab Exercise:
- Convert a JavaScript object
to a JSON string and display it.
- Parse a JSON string into a JavaScript
object.
Day 14: JavaScript ES6 Features
Objective: Learn about modern JavaScript features
introduced in ES6.
- Topics Covered:
- Arrow functions.
- Template literals.
- Destructuring.
- let and const for variable declaration.
- Lab Exercise:
- Refactor a function that
adds two numbers using an arrow function and log the result.
- Use template literals to
construct a string.
Day 15: Asynchronous JavaScript
Objective: Understand how JavaScript handles
asynchronous operations.
- Topics Covered:
- Callbacks.
- Promises.
- async and await.
- Lab Exercise:
- Write a function that
returns a promise and handles it using .then() and .catch().
- Create an async function
that fetches data from a public API.
Day 16: Local Storage and Session Storage
Objective: Learn how to use web storage for saving
data locally.
- Topics Covered:
- localStorage vs sessionStorage.
- Storing and retrieving
data.
- Removing items from
storage.
- Lab Exercise:
- Create a form that stores
user input in localStorage and displays it when the
page reloads.
Day 17: Working with APIs in JavaScript
Objective: Learn how to make HTTP requests to
interact with APIs.
- Topics Covered:
- Using fetch() to make API requests.
- Handling responses.
- Parsing JSON data from API
responses.
- Lab Exercise:
- Write a program that
fetches data from a public API (like JSONPlaceholder) and displays it on
the webpage.
Day 18: JavaScript Classes and Object-Oriented
Programming (OOP)
Objective: Understand the concepts of OOP in
JavaScript.
- Topics Covered:
- Classes and constructors.
- Methods in classes.
- this keyword.
- Lab Exercise:
- Create a class Person with properties like name and age, and a method that
displays the person’s details.
Day 19: More Advanced Array Methods
Objective: Explore advanced array methods for more
efficient manipulation.
- Topics Covered:
- map(), filter(), reduce().
- forEach(), find(), some(), every().
- Lab Exercise:
- Use map() to square all numbers in
an array.
- Use filter() to create a new array with
only even numbers.
Day 20:
JavaScript Set and Map
Objective: Learn about the Set and Map objects in
JavaScript.
- Topics Covered:
- Creating sets and maps.
- Adding and removing items
from sets/maps.
- Iterating over sets/maps.
- Lab Exercise:
- Create a Set that stores unique numbers
and a Map that stores user names as
keys and ages as values.
Day 21: Module System in JavaScript
Objective: Learn how to organize JavaScript code
into modules.
- Topics Covered:
- export and import keywords.
- Default exports vs named
exports.
- Using modules in modern web
development.
- Lab Exercise:
- Create two JavaScript
files: one exporting a function and another importing and using it.
Day 22: JavaScript and CSS Interactions
Objective: Learn how JavaScript can interact with
CSS for dynamic styling.
- Topics Covered:
- Changing element styles
with JavaScript.
- Toggling classes with
JavaScript.
- Animating elements with
JavaScript.
- Lab Exercise:
- Create a button that
toggles between two CSS classes to change the background color of an
element.
Day 23: JavaScript Timing Events
Objective: Learn how to work with time-based
events.
- Topics Covered:
- setTimeout(), setInterval().
- Clearing timers with clearTimeout(), clearInterval().
- Lab Exercise:
- Write a program that
displays an alert after 5 seconds using setTimeout().
- Use setInterval() to print a message every 2
seconds.
Day 24: JavaScript and Forms
Objective: Understand how to work with forms and
form validation using JavaScript.
- Topics Covered:
- Accessing form elements.
- Validating form input.
- Preventing form submission.
- Lab Exercise:
- Create a form with fields
like name and email, and validate the input before submission.
Day 25: JavaScript Modules and NPM
Objective: Learn how to use Node Package Manager
(NPM) and JavaScript modules.
- Topics Covered:
- Installing packages with
NPM.
- Using third-party modules
in your project.
- Lab Exercise:
- Initialize a Node.js
project, install a package like lodash, and use it in your code.
Day 26: Regular Expressions in JavaScript
Objective: Learn how to use regular expressions for
pattern matching.
- Topics Covered:
- Regular expression syntax.
- Using RegExp() constructor.
- test(), exec(), match(), replace().
- Lab Exercise:
- Write a program that checks
if an email is valid using regular expressions.
Day 27: JavaScript with JSON
Objective: Learn how to work with JSON data in
JavaScript.
- Topics Covered:
- Fetching and parsing JSON
data.
- Working with JSON data in
JavaScript objects.
- Lab Exercise:
- Write a program that
fetches data from a public API and displays the JSON data on the webpage.
Day 28: JavaScript for Web Development: SPA
Objective: Learn how to create a basic Single-Page
Application (SPA).
- Topics Covered:
- Frontend routing using
JavaScript.
- Dynamically loading content
without refreshing the page.
- Lab Exercise:
- Create a single-page
application with multiple sections, and use JavaScript to show and hide
sections without reloading.
Day 29: JavaScript and Web APIs
Objective: Understand how to interact with Web APIs
in JavaScript.
- Topics Covered:
- Using fetch() to retrieve data from
APIs.
- Working with the
Geolocation API.
- Working with the Web
Storage API.
- Lab Exercise:
- Fetch the user’s
geolocation data and display it on the page.
Day 30: JavaScript Project
Objective: Apply everything you've learned to build
a small project.
- Lab Exercise:
- Build a to-do list
application where users can add, edit, and delete tasks. Use all the
concepts learned throughout the course, such as DOM manipulation, event
handling, and local storage.
This
concludes the 30-day JavaScript Lab manual, which should give students a solid
foundation in JavaScript and its practical applications. Each day builds upon
the previous one, ensuring a comprehensive learning experience.
