Skip to content

Latest commit

 

History

History
248 lines (178 loc) · 6.47 KB

javascript.md

File metadata and controls

248 lines (178 loc) · 6.47 KB

JavaScript

This guide provides essential information on how to use JavaScript for web development, covering core concepts such as variables, functions, DOM manipulation, and asynchronous operations. JavaScript is a versatile, high-level programming language that enables interactive web pages and dynamic content.

Index

Introduction to JavaScript

JavaScript is the core programming language for creating interactive effects and dynamic web content. It allows you to add interactivity to your website, such as animations, form validation, and server requests. JavaScript is executed by the browser and is supported by all major web browsers, making it essential for modern web development.

Some core features of JavaScript include:

  • Variables and Data Types: Store data such as numbers, strings, and objects.
  • Control Structures: Use loops, conditionals, and functions to control the flow of code.
  • DOM Manipulation: Dynamically modify HTML content and interact with the DOM.
  • Asynchronous Programming: Handle background tasks like HTTP requests without blocking the user interface.

Setting Up JavaScript

To start using JavaScript in your project, you need to include it in your HTML file. You can either use inline scripts or external JavaScript files.

Using Inline JavaScript

Add a <script> tag within the <body> or <head> section of your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Example</title>
  <script>
    alert("Hello, World!");
  </script>
</head>
<body>
</body>
</html>

Using External JavaScript File

You can also place your JavaScript code in an external .js file and reference it in your HTML using the <script> tag.

Create an external file script.js:

console.log("Hello from external JS file");

Then include it in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Example</title>
  <script src="script.js"></script>
</head>
<body>
</body>
</html>

Basic JavaScript Syntax

JavaScript syntax is straightforward and allows you to perform various tasks such as defining variables, performing operations, and controlling the flow of your application.

Example: Variables and Data Types

let name = "John"; // String
let age = 30;      // Number
let isStudent = true; // Boolean
let person = { name: "John", age: 30 }; // Object

Example: Control Structures

let x = 10;
if (x > 5) {
  console.log("x is greater than 5");
} else {
  console.log("x is less than or equal to 5");
}

for (let i = 0; i < 3; i++) {
  console.log(i);
}

Working with Functions

Functions in JavaScript are reusable blocks of code that allow you to execute specific tasks.

Example: Function Definition and Invocation

function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice"));

Example: Arrow Functions

const greet = (name) => `Hello, ${name}`;

console.log(greet("Bob"));

Manipulating the DOM

JavaScript enables you to interact with HTML elements using the Document Object Model (DOM). You can change the content, styles, and attributes of elements.

Example: Changing Text Content

<button id="change-text">Change Text</button>
<p id="text">Original Text</p>

<script>
  document.getElementById("change-text").onclick = function() {
    document.getElementById("text").innerText = "Text Changed!";
  };
</script>

Example: Modifying CSS Styles

<button id="change-style">Change Style</button>
<p id="styled-text">Styled Text</p>

<script>
  document.getElementById("change-style").onclick = function() {
    document.getElementById("styled-text").style.color = "red";
  };
</script>

Asynchronous JavaScript

Asynchronous operations in JavaScript allow you to perform tasks like fetching data from a server without blocking the rest of the application. You can handle these tasks with callbacks, promises, or async/await.

Example: Using Callbacks

function fetchData(callback) {
  setTimeout(() => {
    console.log("Data fetched");
    callback();
  }, 2000);
}

fetchData(function() {
  console.log("Callback executed");
});

Example: Using Promises

let promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Data fetched successfully");
  } else {
    reject("Failed to fetch data");
  }
});

promise.then((message) => {
  console.log(message);
}).catch((message) => {
  console.log(message);
});

Example: Using async/await

async function fetchData() {
  let response = await fetch("https://jsonplaceholder.typicode.com/posts");
  let data = await response.json();
  console.log(data);
}

fetchData();

Common JavaScript Use Cases

Here are some common use cases where JavaScript is commonly applied:

  • Form Validation: Ensuring that form fields are correctly filled out before submission.
  • Image Sliders: Creating interactive galleries or image sliders.
  • Interactive Maps: Embedding and interacting with maps using JavaScript.
  • Dynamic Content: Updating parts of a page without reloading the entire page.
  • Real-Time Updates: Implementing real-time features such as notifications and live chat.

Additional Resources