What is JavaScript? – Complete Guide for Beginners
Welcome to JavaScript! In this comprehensive guide, you will see the JavaScript definition, its usage, examples, its importance, frequently asked questions, and more.
What is JavaScript? Definition
It is considered one of the most popular programming languages.
First of all, you would have some questions about this programming language in your mind. So, let’s see what type of questions people have in their minds when they start learning JS.
Whenever you visit a website, you have seen sometimes a popup that appears and shows a contact form or a newsletter signup form. Or popup ads like on your smartphones. JS is behind these popups.
Let’s See Some JavaScript Examples
What JavaScript Can Do?
1. JavaScript can change HTML content
By using the getElementById method we can change any HTML element content. So, let’s see how:
Example: In the example below, I will create a paragraph with id para and then I create a button in HTML and add some JS to the button. Then, whenever we click on the button the content of the HTML element changes.
Let’s See the Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript Tutorials </title>
</head>
<body>
<p id="para">
It is a long established fact that a reader
will be distracted by the readable content
of a page when looking at its layout.
</p>
<button onclick="document.getElementById('para').innerHTML=
'The point of using Lorem Ipsum.'">
click me
</button>
</body>
</html>
Copy the code and paste it into your HTML document and click save and open it in your browser to see the result.
Note: I will use inline JavaScript code in HTML if you don’t understand what’s happening then don’t worry we will discuss it in detail in our later chapters.
If you don’t know what is HTML and CSS? then learn HTML and CSS first. You must have knowledge of HTML and CSS.
2. JavaScript can Change HTML Styles
By using the getElementById method, we can change HTML attribute values too.
Example: In this example, I will create a paragraph in HTML with id para, then apply some JS to change the styles of the paragraph element. Whenever I click on the button the color of the text changes.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript Tutorials </title>
<link rel="stylesheet" href="style.css" type=text/css>
</head>
<body>
<p id="para" style="color: blue;">
It is a long established fact that a reader
will be distracted by the readable content
of a page when looking at its layout.
</p>
<button onclick="document.getElementById('para').style.color='red'">
click me
</button>
</body>
</html>
3. We can also Hide & Show HTML elements
By using the getElementById method, we can hide and show HTML elements.
Example: In this example, I will change the display property value to none. Then, whenever I click on the button the paragraph text will hide.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript Tutorials </title>
<link rel="stylesheet" href="style.css" type=text/css>
</head>
<body>
<p id="para">
It is a long established fact that a reader
will be distracted by the readable content
of a page when looking at its layout.
</p>
<button onclick="document.getElementById('para').style.display='none'">
click me
</button>
</body>
</html>
You can hide the text by default and then by using JS you can show text.
Here is an answer to the question which you can have in your mind.
Q. Is this language hard to learn?
It isn’t hard to learn. Actually, it is easier than other programming languages. If you’re a beginner, then it can take a lot of time to learn. The key to success is to try again till you succeed. And don’t learn coding without doing it.
Note: You should read our tutorials in sequence. To learn faster and gain complete knowledge do not skip any chapter.
Tip: We can use both single and double quotes in this programming language.
After learning all these three languages, you will be able to create your own website using these languages.
I hope you understood well. In the next chapter, we will discuss how to get started with it and how to add this in HTML.
If you have any questions, feel free to ask in the comment section below. We will answer any questions as soon as possible.
Topic: JavaScript
