Basics of JavaScript
JavaScript is a powerful, versatile language used for adding interactivity to websites. If you're just starting with web development, JavaScript is an essential tool in your toolkit. In this post, we’ll cover the basics of JavaScript, including how to add JavaScript to your HTML, basic syntax, variables, data types, functions, and event handling.
1. Adding JavaScript to Your HTML
You can add JavaScript directly into your HTML file. The simplest way is by using the <script> tag.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Basics</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
alert("Welcome to JavaScript!");
</script>
</body>
</html>
In this example, the
alert() function will display a pop-up message saying "Welcome to JavaScript!" as soon as the page loads. This method is great for testing simple scripts, but for larger projects, it’s better to link an external JavaScript file.2. Variables and Data Types
Variables store information that can be used later in the program. In JavaScript, you can declare variables using let, const, or var.
Example: Declaring Variables
let name = "Alice"; // A string
const age = 25; // A number
var isStudent = true; // A boolean
Explanation:
letallows you to reassign the variable later, whileconstis used for values that shouldn’t change.varis an older way of declaring variables but is still used. Generally, useletandconstin modern JavaScript.
Data Types
JavaScript supports several data types:
- String: Text data, e.g.,
"Hello" - Number: Numeric data, e.g.,
10 - Boolean: True or false, e.g.,
true - Array: A list of items, e.g.,
[1, 2, 3] - Object: A collection of key-value pairs, e.g.,
{ name: "Alice", age: 25 }
3. Basic Operations
You can perform operations like addition, subtraction, and concatenation.
let x = 5;
let y = 10;
let sum = x + y; // 15
let greeting = "Hello" + " " + "World"; // "Hello World"
4. Functions
Functions allow you to define reusable code blocks.
Example: Basic Function
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Output: Hello, Alice!
Explanation:
functiondeclares a function.- Functions can take parameters (like
namein this example) and return values.
5. Conditional Statements
Conditions allow you to make decisions in your code.
Example: If-Else Statement
let age = 18;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}
6.Looping Statement
JavaScript provides several types of looping statements, which allow you to execute code multiple times. Here are the main looping statements:
1. for Loopfor (let i = 0; i < 5; i++) {
console.log("Iteration:", i);
}
2.while loop
let i = 0;
while (i < 5) {
console.log("Iteration:", i);
i++;
}
3.do while loop
let i = 0;
do {
console.log("Iteration:", i);
i++;
} while (i < 5);
for (let number of numbers) {
console.log(number);
}
5. for...in Loop
let person = { name: "Alice", age: 25 };
for (let key in person) {
console.log(key + ": " + person[key]);
}
7. Event Handling
JavaScript is often used to handle events like clicks or key presses.
Example: Button Click Event
<!DOCTYPE html>
<html>
<body>
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("Button was clicked!");
}
</script>
</body>
</html>
In this example, clicking the button triggers the
showMessage() function, which shows an alert.Example: Adding two Numbers
<!DOCTYPE html>
<html>
<head>
<title>Add Two Numbers</title>
</head>
<body>
<h1>Add Two Numbers</h1>
<input type="number" id="num1" placeholder="Enter first number">
<br>
<input type="number" id="num2" placeholder="Enter second number">
<br>
<button onclick="addNumbers()">Add</button>
<h2 id="result"></h2>
<script>
function addNumbers() {
// Get the values from the input fields
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
// Check if the inputs are valid numbers
if (isNaN(num1) || isNaN(num2)) {
document.getElementById("result").innerText = "Please enter valid numbers.";
} else {
// Calculate the sum
let sum = num1 + num2;
// Display the result
document.getElementById("result").innerText = "Sum: " + sum;
}
}
</script>
</body>
</html>
Explanation:
HTML Structure:
- There are two input fields for entering numbers and a button to trigger the addition.
- The result will be displayed in an
<h2>element with the idresult.
JavaScript Function
addNumbers():- The function retrieves the values from the input fields, converts them to numbers using
parseFloat(), and checks if they are valid numbers. - If valid, it calculates the sum and displays the result in the
<h2>element. - If invalid, it displays an error message asking for valid numbers.
Example: Finding Prime Numbers
<!DOCTYPE html>
<html>
<head>
<title>Prime Numbers</title>
</head>
<body>
<h1>Prime Number Finder</h1>
<p>Enter a number:</p>
<input type="number" id="num" placeholder="Enter N">
<button onclick="findPrimes()">Show Prime Numbers</button>
<h2>Prime Numbers:</h2>
<p id="result"></p>
<script>
function isPrime(number) {
if (number <= 1) return false;
for (let i = 2; i <= Math.sqrt(number); i++) {
if (number % i === 0) {
return false;
}
}
return true;
}
function findPrimes() {
let num = parseInt(document.getElementById("num").value);
let primes = [];
for (let i = 2; i <= num; i++) {
if (isPrime(i)) {
primes.push(i);
}
}
document.getElementById("result").innerText = primes.join(", ");
}
</script>
</body>
</html>
Explanation:
HTML Structure:
- An input field to enter the maximum number.
- A button that, when clicked, calls the findPrimes() function to display prime numbers.
- A <p> element with the id result to show the output.
- isPrime(number): Checks if a number is prime by seeing if it has any divisors other than 1 and itself.
- findPrimes(): Retrieves the user's input, iterates through numbers from 2 up to the entered number, and calls isPrime(i) for each. If isPrime(i) returns true, the number is added to the primes array.
- Finally, the function displays the list of prime numbers in the <p id="result"> element.
Comments
Post a Comment