Thursday, June 20, 2024

INTRODUCTION OF JAVASCRIPT

 

JavaScript is a high-level, interpreted programming language that is primarily used to create dynamic and interactive content on websites. It is one of the core technologies of the World Wide Web, alongside HTML and CSS.

Why Use JavaScript?

JavaScript is used to enhance the user experience of web pages by enabling interactive elements, real-time updates, and animations. Here are some key reasons to use

  • Interactivity: JavaScript can create interactive effects within web browsers, such as form validation, dynamic content updates, and responsive menus.
  • Client-Side Validation: It can validate user inputs before they are sent to the server, reducing server load and providing immediate feedback to users.
  • Asynchronous Operations: JavaScript can handle asynchronous tasks using AJAX, allowing web pages to update content without reloading.
  • Rich Interfaces: It enables the creation of complex user interfaces, such as drag-and-drop components, sliders, and other UI elements.
  • Versatility: JavaScript can be used for both front-end and back-end development (with Node.js).


JavaScript syntax is the set of rules that defines a correctly structured JavaScript program. Below are some key aspects of JavaScript syntax.

Statements

JavaScript programs are composed of statements, which are instructions to be executed by the browser.

Example of JavaScript Statements

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

<Script>

// Variable declaration
var x = 5;
let y = 10;
const z = 15;

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

// Function call
let result = add(x, y);
console.log(result); // Output: 15

// Conditional statement
if (x < y) {
console.log("x is less than y");
} else {
console.log("x is greater than or equal to y");
}

// Loop
for (let i = 0; i < 5; i++) {
console.log(i);
}


</Script>

</body>

</html>



Comments

Comments are used to explain code and are ignored by the JavaScript engine. There are two types of comments in JavaScript:

  • Single-line comments: Use // to comment out a single line.
  • Multi-line comments: Use /* */ to comment out multiple lines.


Example of Comments

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

<Script>
// This is a single-line comment

/*
This is a multi-line comment.
It can span multiple lines.
*/

// Example code with comments
let greeting = "Hello, world!"; // Declare a variable and assign a string value

function greet() {
console.log(greeting); // Print the greeting to the console
}

greet(); // Call the greet function



</Script>

</body>

</html>



Example: Combining All Concepts

Here's a simple JavaScript example that combines variable declaration, function declaration, conditional statements, loops, and comments:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>JavaScript Introduction</title>
<script>
// This is a single-line comment

/*
This is a multi-line comment.
It can span multiple lines.
*/

// Declare variables
let name = "Alice";
const age = 30;

// Function declaration
function displayInfo() {
// Conditional statement
if (age >= 18) {
console.log(name + " is an adult.");
} else {
console.log(name + " is a minor.");
}

// Loop
for (let i = 1; i <= 3; i++) {
console.log("This is message number " + i);
}
}

// Call the function
displayInfo();
</script>
</head>

<body>
<h1>Check the console for output</h1>
</body>

</html>



Explanation of the Example

  • Variable Declaration: let and const are used to declare variables.
  • Function Declaration: function displayInfo() declares a function.
  • Conditional Statement: An if-else statement checks if age is greater than or equal to 18.
  • Loop: A for loop runs three times, printing a message each time.
  • Comments: Single-line and multi-line comments explain parts of the code.

No comments:

Post a Comment