JavaScript Basics Hello World!
JavaScript is a programming language that uses for developing websites, games, animations, validation, etc.
In this article, you can learn about JavaScript its uses, and basic syntaxes. JavaScript is a dynamic programming language that can add interactivity with a website. This language was invented by Brendan Eich. You can make games animation 2D and 3D using this language. JavaScript is one of the most popular language in the world.
Before you create your first javascript program you must know about HTML basics.
Create your first javascript Hello World! Web Page.
Step 1. Create a new directory on your desktop (command: mkdir)
Step 2. Create a .html file in your newly created directory (command: touch)
Step 3. Open your .html file in your favourite code editor(you can use any code editor like vscode, sublime, bracket, you can even use a simple text editor like notepad ) now create HTML basic boilerplate.
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
</head>
<body>
<h1></h1>
</body>
</html>
Step 4. Create a javascript file in the same directory, use extension .js
Step 5. Include your javascript file in between of <head> tag
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<script src="<filename>.js"></script>
</head>
<body>
<h1></h1>
</body>
</html>
Step 6. Open your javascript file and write below code
const hello = document.querySelector(‘h1’); hello.textContent = ‘Hello World!’;
Step 7. Save both files then open your .html file in your web browser, You will see Hello World! written in your web browser.
Now we discuss javascript syntax that used in our program,
const is a constant variable where you can store a constant value that never changes.
After const we choose a variable name, you can write what you want but in our case, we use hello.
We use = sign to define a value in our variable.
document is your HTML documents window that we select using querySelector.
querySelector is a javascript property to select an HTML element like h1, now we define the h1 value using textContent. textContact is another javascript property to select HTML tags text and manipulate it to another text. In our case, we define h1’s value ‘Hello World!’ using hello.textContent.
