Skip to content

Latest commit

 

History

History
241 lines (194 loc) · 5.61 KB

1. JS - Introduction.md

File metadata and controls

241 lines (194 loc) · 5.61 KB

🏠 Home
Home

1. JS Introduction

What is JavaScript?

  • JavaScript (JS) is a high-level, interpreted programming language that is primarily used to create interactive and dynamic content on websites.
  • It was originally developed to add behavior and interactivity to static HTML pages.
  • JavaScript is a core technology of the World Wide Web, alongside HTML and CSS.
  • It can be used for a variety of tasks, including manipulating HTML and CSS, handling events, making network requests, and even building full-fledged web applications.

Key features of JavaScript include:

  • Interactivity: Adds interactive elements like forms, buttons, and animations.
  • Event Handling: Responds to user actions such as clicks, keystrokes, and form submissions.
  • Cross-platform: Runs on most browsers, making it a versatile tool for web development.
  • Client-Side Execution: Primarily executed in the browser, reducing server load.

Different Ways to Use JavaScript with HTML

There are several ways to integrate JavaScript with HTML:

1. Inline JavaScript

JavaScript can be written directly within an HTML tag using the onclick, onmouseover, or similar attributes.

<button onclick="alert('Hello World!')">Click me</button>

2. Internal JavaScript

JavaScript code can be placed within the <script> tags in the HTML document's head or body section.

<html>
  <head>
    <script>
      function sayHello() {
        alert('Hello World!');
      }
    </script>
  </head>
  <body>
    <button onclick="sayHello()">Click me</button>
  </body>
</html>

3. External JavaScript

JavaScript code can be written in a separate .js file, which is then linked to the HTML document using the <script> tag with the src attribute.

<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <button onclick="sayHello()">Click me</button>
  </body>
</html>

script.js

function sayHello() {
  alert('Hello World!');
}

JavaScript Modules: JavaScript can be organized into modules for better code organization and reuse. Modules can be included in HTML using the type="module" attribute in the <script> tag.

<script type="module" src="module.js"></script>

Famous Frontend Libraries

  1. React.js
  2. Vue.js
  3. Next.js
  4. Angular
  5. Svelte

"Hello World!" in JavaScript

1. Using alert

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

2. Using console.log

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

3. Writing to the HTML Document

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World with Document Write</title>
  </head>
  <body>
    <script>
      document.write("Hello World!");
    </script>
  </body>
</html>

4. Modifying the DOM

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World with DOM Manipulation</title>
  </head>
  <body>
    <div id="output"></div>

    <script>
      document.getElementById("output").innerText = "Hello World!";
    </script>
  </body>
</html>

5. Using External JavaScript File

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

script.js

alert('Hello World!');

JS Comments

1. Single Line Comment

// Change heading:
document.getElementById("myH").innerHTML = "My First Page";

// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";

2. Multi-Line Comment

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

🏠 Home
Home