Java Script Practice
- Get link
- X
- Other Apps
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
Variables: Used to store data that can be used and manipulated throughout the code. JavaScript uses
var
,let
, andconst
to declare variables.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 + "!";}
- Example:
Conditionals: Control the flow of the program based on certain conditions using
if
,else if
, andelse
statements.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
, anddo...while
.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
// JavaScriptlet name = "John";
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet(name));
<!-- HTML --><script src="script.js"></script>
Example 2: Simple Calculator
// JavaScriptfunction 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
// JavaScriptdocument.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
// JavaScriptlet 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
// JavaScriptfunction 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
Challenge 1: Create a JavaScript program that calculates the factorial of a number entered by the user.
Challenge 2: Build a dynamic to-do list where users can add, remove, and mark tasks as completed. Use event handling and DOM manipulation.
Challenge 3: Develop a simple quiz application with multiple-choice questions. Track the user’s score and display the result at the end.
Challenge 4: Implement a countdown timer that counts down from a specified time and displays an alert when the time is up.
Challenge 5: Create a responsive navigation menu that toggles between showing and hiding the menu items when the user clicks a button.
- Get link
- X
- Other Apps
Comments
Post a Comment