Skip to main content

What is javascript

JavaScript is a high-level, dynamic, and interpreted programming language that is widely used in web development. It was created by Brendan Eich in 1995 and is now maintained by the Mozilla Foundation.

JavaScript is primarily used to create dynamic and interactive web pages by adding functionality to HTML and CSS. It is also used in server-side development with Node.js, desktop and mobile application development, game development, and more.

Important aspects of JavaScript​

  • High-level, dynamic, and interpreted programming language
  • Created by Brendan Eich in 1995 and maintained by the Mozilla Foundation
  • Used primarily for creating dynamic and interactive web pages
  • Supports object-oriented programming, functional programming, and procedural programming
  • Versatile language with a vast ecosystem of libraries and frameworks
  • Can be executed in the browser or on the server with Node.js
  • Key features include dynamic typing, prototypal inheritance, first-class functions, closures, and asynchronous programming with callbacks and promises
  • Latest version is ECMAScript 2022 (ES2022) with new features such as private methods and fields and logical assignment operators.

Uses of JavaScript​

Change HTML Content​

JavaScript can dynamically modify the HTML content of a web page by manipulating DOM, allowing developers to create dynamic and interactive user interfaces.

Below example shows how JavaScript can dynamically update the text of an HTML element:

Editor

Loading...

Example Explanation:

  • The JavaScript code is included within the <script> tag in the <body> of the HTML file.
  • The code selects the paragraph element with the id of "myParagraph" using the getElementById() method.
  • It then modifies its content using the innerHTML property.
  • When the page is loaded in the browser, the original text "Hello World!" is replaced with "Hello JavaScript!".

Change HTML Attribute Values​

JavaScript can also modify the attribute values of HTML elements, allowing developers to change the behavior and appearance of the page.

Below example shows how JavaScript can update the attribute value of an HTML element with an example:

Editor

Loading...

Example Explanation:

  • We've added a button element to the HTML file, which calls the changeImage() function when clicked.
  • The changeImage() function selects the img element with the id of "myImage" using the getElementById() method.
  • It then modifies its src attribute to change the image displayed on the page.
  • When the user clicks the "Change Image" button, the changeImage() function is executed, which replaces the original image with "new-image.jpg".
Defining changeImage() function

We've defined the changeImage() function within the <script> tag in the <body> of the HTML file, but it's also possible to define functions in a separate JavaScript file and link to it using the <script> tag in the <head> of the HTML file.

Change HTML Styles (CSS)​

JavaScript can change the styles (CSS) of HTML elements, allowing developers to modify the appearance of the page dynamically.

JavaScript can dynamically update HTML element styles. Example below:

Editor

Loading...

Example Explanation:

  • We've added a button element to the HTML file, which calls the changeStyle() function when clicked.
  • The changeStyle() function selects the div element with the id of "myDiv" using the getElementById() method.
  • It then adds the new class "new-class" to the element using the classList property.
  • When the user clicks the "Change Style" button, the changeStyle() function is executed, which changes the appearance of the div element based on the styles defined for the "new-class" in the CSS.
Defining changeStyle() function

We've defined the changeStyle() function within the <script> tag in the <body> of the HTML file, but it's also possible to define functions in a separate JavaScript file and link to it using the <script> tag in the <head> of the HTML file.

Hide & Show HTML Elements​

JavaScript can hide & show HTML elements by manipulating their CSS display property.

Below example shows how to Hide/show HTML element dynamically:

Editor

Loading...

Example Explanation:

  • We have added two button elements to the HTML file.
  • One button is used to call the hide() function when clicked.
  • The other is used to call the show() function when clicked.
  • The hide() function selects the div element with the id of "myDiv" using the getElementById() method.
  • It then sets the display CSS property of the element to "none", which hides it from the page.
  • The show() function does the opposite, setting the display property to "block", which makes the element visible again.
  • When the user clicks the "Hide" button, the hide() function is executed, which hides the div element by setting its display property to "none".
  • When the user clicks the "Show" button, the show() function is executed, which makes the div element visible again by setting its display property to "block".