A gentle introduction to Java Script
Megha Sahay
Full Stack Development || DevOps || C#/.Net || Java/J2EE || Python || Masters in AI & ML || Ex HSBC || Epiroc Sweden
JavaScript is a versatile, high-level programming language that's widely used in web development. It can be used to add interactivity to websites, handle events, manipulate the DOM (Document Object Model), and much more. Here's a gentle introduction to JavaScript.
What is it ?
Java script is a scripting language that is written from top to bottom. It is used to create dynamic content on websites. Unlike HTML and CSS , java script adds behaviors to web pages, making them interactive to the user.
JavaScript in HTML
Java script can be embedded in the HTML using the <script> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Introduction</title>
</head>
<body>
<h1>Hello, World!</h1>
<button onclick="displayMessage()">Click Me</button>
<script>
function displayMessage() {
alert("Hello from JavaScript!");
}
</script>
</body>
</html>
When you click on the button you get a message as "Hello from JavaScript" as shown below:
JavaScript Syntax Basics
a) Variables
Variables are used to store data values. You can declare a variable using var, let, or const.
let name = "Ram"; // String
const age = 25; // Number
var isStudent = true; // Boolean
b) Data Types
JavaScript has several data types:
let student= { firstName: "Ram", lastName: "Doe", age: 25}; // Object
let numbers = [1, 2, 3, 4, 5]; // Array
c) Operators
JavaScript supports a variety of operators, including:
领英推荐
let x = 10;
let y = 5;
let result = x + y; // result is 15
d) Functions
Functions are reusable blocks of code that perform a specific task.
function greet(name) {
return "Hello, " + name + "!";
}
let greeting = greet("Ram");
console.log(greeting); // Outputs: Hello, Ram!
e) Control Structures
JavaScript supports various control structures for decision-making and looping.
let age = 18;
if (age < 18) {
console.log("Minor");
} else if (age === 18) {
console.log("Just turned adult");
} else {
console.log("Adult");
}
DOM Manipulation
JavaScript can be used to manipulate the DOM, allowing dynamic changes to the content and structure of a web page. The below code finds an HTML element with the ID myElement and changes its text content to "New Content".
document.getElementById("myElement").innerText = "New Content";
Event Handling
JavaScript can respond to user actions like clicks, form submissions, or key presses.
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
Objects and Arrays
JavaScript is an object-oriented language, and much of its power comes from using objects.
let car = {
make: "Toyota",
model: "Camry",
year: 2020
};
console.log(car.make); // Outputs: Toyota
Conclusion
JavaScript is a powerful language that opens up many possibilities for web development. The best way to learn is to practice writing code and experimenting with different features and APIs.