social-media-apn social-media-apn social-media-apn social-media-apn social-media-apn social-media-apn social-media-apn social-media-apn social-media-apn

Style with your own way

Javascript

Javascript

JavaScript is a powerful programming language that is widely used in web development. It allows you to add interactivity and dynamic behavior to your webpages, making them more engaging and user-friendly. In here, we'll take a closer look at JavaScript and some of its key features.

Data Types

JavaScript supports several different data types, including numbers, strings, booleans, objects, and arrays. Numbers are used for mathematical operations, strings for text, and booleans for logical expressions. Objects and arrays are used to store and organize more complex data structures.

In this example, the "p" selector targets all < p > elements, and the "color" property sets the text color to blue.

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

Variables

Variables are used to store values in JavaScript. They can be declared using the "var", "let", or "const" keywords. "var" is an older way of declaring variables, while "let" and "const" are newer and more flexible. "let" is used to declare variables that can be reassigned, while "const" is used to declare variables that cannot be reassigned.

var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;

Functions

Functions are reusable blocks of code that perform a specific task. They can be called multiple times with different input values, making them a powerful tool for building complex applications. In JavaScript, functions can be defined using the "function" keyword, and they can be passed arguments and return values.

let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
return a * b;
}

Control Structures

Control structures are used to control the flow of code in JavaScript. The most common control structures are "if" statements, which are used to execute code conditionally, and loops, which are used to repeat code multiple times. JavaScript also supports switch statements, which are used to select one of several possible code paths based on a given value.

let num = -10;

if (num > 0)
console.log("The number is positive.");
else
console.log("The number is negative");

Event Handling

Event handling is a key feature of JavaScript, allowing you to respond to user interactions on a webpage. Events can be triggered by user actions such as clicking a button, moving the mouse, or submitting a form. JavaScript can be used to listen for these events and respond by executing code.

// Mouse Event
document.addEventListener("mousemove", (e) => {
console.log(`Mouse moved to (${e.clientX}, ${e.clientY})`);
});

// Keyboard Event
document.addEventListener("keydown", (e) => {
console.log(`Key pressed: ${e.key}`);
});

DOM Manipulation

The Document Object Model (DOM) is a representation of the HTML structure of a webpage. JavaScript can be used to manipulate the DOM, adding or removing elements, changing attributes, and updating content. This allows you to create dynamic and interactive webpages that respond to user input.

const element = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"GeeksforGeeks introduction is: " + element.innerHTML;

CSS Code

Type anything in the text area to start preview

Preview