Java Script Practice

 

What is JavaScript?

JavaScript is a versatile programming language that allows you to create dynamic and interactive content on web pages. It is a client-side scripting language, meaning it runs directly in the browser, and is essential for modern web development.

Basic Concepts of JavaScript

1. Variables: Used to store data that can be used and manipulated throughout the code. JavaScript uses var, let, and const to declare variables.

2. Functions: Blocks of code designed to perform a specific task. Functions can be defined using the function keyword and can take parameters and return values.

   • Example:

     function greet(name) {
     return "Hello, " + name + "!";}
     

3. Conditionals: Control the flow of the program based on certain conditions using if, else if, and else statements.

4. Loops: Allow you to repeat a block of code a certain number of times or until a condition is met. Common loops include for, while, and do...while.

5. Events: JavaScript can respond to user actions, such as clicks, key presses, and form submissions, using event listeners.

Code Examples for Practice

Example 1: Basic Variable and Function

// JavaScript
let name = "John";
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet(name));

<!-- HTML -->
<script src="script.js"></script>

Example 2: Simple Calculator

// JavaScript
function add(a, b) {
    return a + b;
}

let result = add(5, 3);
console.log("The sum is: " + result);

<!-- HTML -->
<script src="script.js"></script>

Example 3: Event Handling with Button Click

// JavaScript
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button was clicked!");
});

<!-- HTML -->

<button id="myButton">Click Me!</button>
<script src="script.js"></script>

Example 4: Loop through an Array

// JavaScript
let fruits = ["Apple", "Banana", "Cherry"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

<!-- HTML -->
<script src="script.js"></script>

Example 5: Form Validation

// JavaScript
function validateForm() {
    let x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}

<!-- HTML -->
<form name="myForm" onsubmit="return validateForm()">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>
<script src="script.js"></script>

Chapter Challenges

1. Challenge 1: Create a JavaScript program that calculates the factorial of a number entered by the user.

2. Challenge 2: Build a dynamic to-do list where users can add, remove, and mark tasks as completed. Use event handling and DOM manipulation.

3. Challenge 3: Develop a simple quiz application with multiple-choice questions. Track the user’s score and display the result at the end.

4. Challenge 4: Implement a countdown timer that counts down from a specified time and displays an alert when the time is up.

5. Challenge 5: Create a responsive navigation menu that toggles between showing and hiding the menu items when the user clicks a button.