Skip to main content

Introduction to JavaScript

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 images, 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

index.html
<!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>
http://127.0.0.1:5500/index.html

My First JavaScript

Welcome CodeHarborHub Learners!

2. JavaScript Can Change HTML Styles

index.html
<!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>
http://127.0.0.1:5500/index.html

My First JavaScript

This is a paragraph.

3. JavaScript Can Hide HTML Elements

index.html
<!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>
http://127.0.0.1:5500/index.html

My First JavaScript

This is a paragraph.

4. JavaScript Can Show HTML Elements

index.html
<!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>
http://127.0.0.1:5500/index.html

My First JavaScript

5. JavaScript Can Change HTML Attributes

index.html
<!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>
http://127.0.0.1:5500/index.html

My First JavaScript

This is a paragraph.

6. JavaScript Can Change HTML Image

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

<img
id="myImage"
src="/code-harbor-hub/img/static_website.svg"
width="100%"
height="auto"
/>

<button
type="button"
onclick="document.getElementById('myImage').src='/code-harbor-hub/img/static_assets.svg'"
>
Change Image
</button>
</body>
</html>
http://127.0.0.1:5500/index.html

My First JavaScript

7. JavaScript Can Validate Data

index.html
<!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.