Skip to content

intro-js.md

Latest commit

 

History

History
236 lines (187 loc) · 7.78 KB

intro-js.md

File metadata and controls

236 lines (187 loc) · 7.78 KB
Raw
slug /
title Introduction to JavaScript
sidebar_label Introduction to JavaScript
sidebar_position 1
tags
JavaScript
Introduction of js
Introduction of JavaScript
description What is JavaScript? Why JavaScript? How to use JavaScript? Learn about JavaScript in this tutorial.

import BrowserWindow from "@site/src/components/BrowserWindow";

JavaScript is a high-level, interpreted programming language that is used to make web pages interactive. It is a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.

What is JavaScript?

JavaScript is a programming language that enables you to create dynamically updating content, control multimedia, animate images, and much more. JavaScript is a scripting language. JavaScript is a high-level, interpreted programming language that is used to make web pages interactive. It is a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.

:::note

Key Points

  • JavaScript is a high-level, interpreted programming language that is used to make web pages interactive.
  • It is a dynamic, weakly typed, prototype-based language with first-class functions.
  • JavaScript is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.
  • JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java.
  • JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.
  • JavaScript is a programming language that enables you to create dynamically updating content, control multimedia, animate images, and much more.
  • JavaScript is a scripting language.
  • JavaScript is a high-level, interpreted programming language that is used to make web pages interactive.
  • It is a dynamic, weakly typed, prototype-based language with first-class functions.
  • JavaScript is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.
  • JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java.

:::

Why JavaScript?

JavaScript is scripting language that enables you to create dynamically updating content, control multimedia, animate imsages, and much more. And it is the most popular programming language in the world. JavaScript is the programming language of the Web. The overwhelming majority of websites use JavaScript, and all modern web browsers—on desktops, game consoles, tablets, and smartphones include JavaScript interpreters, making it an essential part of the web platform.

How to use JavaScript?

JavaScript can be used in a lot of different ways. Here are a few examples:

1. JavaScript Can Change HTML Content

<!DOCTYPE html>
<html>
  <body>
    <h1>My First JavaScript</h1>

    <p id="demo">This is a paragraph.</p>

    <script>
      document.getElementById("demo").innerHTML =
        "Welcome CodeHarborHub Learners!";
    </script>
  </body>
</html>

My First JavaScript

Welcome CodeHarborHub Learners!

2. JavaScript Can Change HTML Styles

<!DOCTYPE html>
<html>
  <body>
    <h1>My First JavaScript</h1>

    <p id="demo">This is a paragraph.</p>

    <script>
      document.getElementById("demo").style.fontSize = "35px";
    </script>
  </body>
</html>

My First JavaScript

This is a paragraph.

3. JavaScript Can Hide HTML Elements

<!DOCTYPE html>
<html>
  <body>
    <h1>My First JavaScript</h1>

    <p id="demo">This is a paragraph.</p>

    <button
      type="button"
      onclick="document.getElementById('demo').style.display='none'"
    >
      Click Me!
    </button>
  </body>
</html>

My First JavaScript

This is a paragraph.

document.getElementById('hidedemo').style.display='none'}> Click Me!

4. JavaScript Can Show HTML Elements

<!DOCTYPE html>
<html>
  <body>
    <h1>My First JavaScript</h1>

    <p id="show" style="display:none">This is a paragraph.</p>

    <button
      onclick="document.getElementById('show').style.display='block'"
    >
      Click Me!
    </button>
  </body>
</html>

My First JavaScript

This is a paragraph.

document.getElementById('showdemo').style.display='block'}>Click Me!

5. JavaScript Can Change HTML Attributes

<!DOCTYPE html>
<html>
  <body>
    <h1>My First JavaScript</h1>

    <p id="demo">This is a paragraph.</p>

    <button
      onclick="document.getElementById('demo').style.color='red'"
    >
      Click Me!
    </button>
  </body>
</html>

My First JavaScript

This is a paragraph.

document.getElementById('mydemo').style.color='red'}>Click Me!

6. JavaScript Can Change HTML Image

<!DOCTYPE html>
<html>
  <body>
    <h1>My First JavaScript</h1>

    <img
      id="myImage"
      src="/tutorial/img/svg/static_website.svg"
      width="100%"
      height="auto"
    />

    <button
      type="button"
      onclick="document.getElementById('myImage').src="https://github.com/tutorial/img/svg/static_assets.svg""
    >
      Change Image
    </button>
  </body>
</html>

My First JavaScript

document.getElementById('myImage').src="https://github.com/tutorial/img/svg/static_assets.svg"}>Change Image

7. JavaScript Can Validate Data

<!DOCTYPE html>
<html>
  <body>
    <h1>My First JavaScript</h1>

    <form
      name="myForm"
      action="#"
      onsubmit="return validateForm()"
      method="post"
    >
      Email: <input type="text" name="email" />
      <input type="submit" value="Submit" />
    </form>

    <script>
      function validateForm() {
        let x = document.forms["myForm"]["email"].value;
        if (x == "") {
          alert("Name must be filled out");
          return false;
        }
      }
    </script>
  </body>
</html>

Conclusion

In this article, we have learned about JavaScript, its introduction, and its usage. We have also seen how JavaScript can be used to change HTML content, styles, and attributes. We have also seen how JavaScript can be used to validate data.