JavaScript Tutorial | Learn JavaScript – Part1
7 August 2023
In the vast world of web development, one programming language stands out as the cornerstone of modern interactivity and user experience, which is known as JavaScript. It is a powerful programming language that can add interactivity to a website. It was invented by Brendan Eich. In today’s tutorial we are going to take a basic tour of javascript and how it works and how it is different from other programming languages. Whether you’re a seasoned developer looking to expand your skill set or a complete beginner eager to take your first steps into the vast field of coding, this JavaScript tutorial is your ultimate guide to unleashing the power of this dynamic language.
Points we covered in this tutorial:-
- Syntax of JavaScript
- Comments in JavaScript
- Variables in Javascript
- Output in Javascript
Syntax
JavaScript is a versatile and powerful programming language used primarily for web development. JavaScript code is primarily embedded in script tags, commonly in HTML webpages. It is a case-sensitive language. In JavaScript, the language keywords, variables, function names, and any other identifiers must always be typed with a consistent type of letters. Here is an example of the simple syntax of JavaScript.
<html> <body> <script> JavaScript code........ </script> </body> </html>
Comments in JavaScript
In JavaScript or any other programming language, we use comments to explain our code. Comments are not a part of the code. Comments do not affect the execution of the code and are ignored by the JavaScript interpreter.
There are two types of comments in JavaScript:
- Single line comments – Single line comments start with the // and end with the end of the line. Anything after // on the same line will be considered a comment and not executed by the Javascript interpreter.
- Multi line comments – Multi line comments start with /* and end with */. It is represented by the forward slash (/) and a (*) asterisk sign.
JS Variables
As we already know that variables are known as containers which use to store data and values. Variables allow you to provide a particular name to your container which helps to manipulate and change your data. So there are also some predefined rules for declaring the variable name.
The general rules for constructing names for variables (unique identifiers) are:
- Names can contain letters, digits, underscores, and dollar signs.
- Names must begin with a letter.
- Names can also begin with $ and _ sign.
- Names are case sensitive (y and Y are different variables).
- Reserved words (like JavaScript keywords) cannot be used as names.
We can declare JavaScript variables in mainly four ways –
- Automatically declaration
- Using Var Keyword
- Let keyword
- Const Keyword
We use these pre-defined keywords for declaring variables name in JavaScript.
Example Using Var
<!DOCTYPE html>
<html>
<body>
<p>This is an example to declare variable using the var keyword.</p>
<p id="add"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("add").innerHTML = "The value of z is: " + z;
</script>
</body>
</html>
Output
This is an example to declare variable using the var keyword. The value of z is: 11
Example Using Let
<!DOCTYPE html>
<html>
<body>
<p>In this example, x, y, and z are variables.</p>
<p id="add"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("add").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Output
In this example, x, y, and z are variables. The value of z is: 11
Example Using Const
<!DOCTYPE html>
<html>
<body>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 8;
const y = 12;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Output
In this example, x, y, and z are variables. The value of z is: 20
A list of all the reserved words in JavaScript are given in the following table. They cannot be used as JavaScript variables, functions, methods, loop labels, or any object names.
| abstract | else | instanceof | switch |
| boolean | enum | int | synchronized |
| break | export | interface | this |
| byte | extends | long | throw |
| case | false | native | throws |
| catch | final | new | transient |
| char | finally | null | true |
| class | float | package | try |
| const | for | private | typeof |
| continue | function | protected | var |
| debugger | goto | public | void |
| default | if | return | volatile |
| delete | implements | short | while |
| do | import | static | with |
| double | in | super |
Output in JavaScript
In the JavaScript programming language, we have a different way to display the data, meaning there are many ways to print the output. Primarily, we have four different ways –
- innerHTML
- document.write()
- window.alert()
- console.log()
Example of innerHTML
To set the innerHTML of an element, you first need to select the element using one of the various methods available (e.g., getElementById, querySelector, etc.), and then assign the desired HTML content to the innerHTML property.
<!DOCTYPE html>
<html>
<body>
<p>JavaScript Output elements.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 9 + 4;
</script>
</body>
</html>
Output
JavaScript Output elements. 13
Example of document.write()
It is commonly used for simple testing and demonstration purposes but should be used with caution in real-world applications, as it has some limitations and can lead to unexpected behavior.
<!DOCTYPE html> <html> <body> <p>Input Using document.write().</p> <p>Never call document.write after the document has finished loading. It will overwrite the whole document.</p> <script> document.write(7 + 6); </script> </body> </html>
Output
Input Using document.write(). Never call document.write after the document has finished loading. It will overwrite the whole document. 13
Example of window.alert()
It is a method that displays a simple dialog box, commonly known as an alert box, with a specified message and an “OK” button. It is often used to show a message or prompt the user for some information. When the alert box is displayed, it temporarily interrupts the user’s interaction with the web page until the user clicks the “OK” button or closes the alert box.
<!DOCTYPE html>
<html>
<body>
<p>The process of alert function.</p>
<script>
window.alert("Welcome to APalgorithm");
</script>
</body>
</html>
Example of console.log()
It is a standard way to produce output is by using the console.log() function. This function allows you to display text or values in the console, which is often the developer’s primary tool for debugging and logging information.
<!DOCTYPE html> <html> <body> <p>The famous and primary output method in JavaScript.</p> <script> let a = 5; let b = 11; console.log(a + b); </script> </body> </html>
Suggested Reading
Hey there, I’m Anshul Pal, a tech blogger and Computer Science graduate. I’m passionate about exploring tech-related topics and sharing the knowledge I’ve acquired. With two years of industry expertise in blogging and content writing, I’m also the co-founder of HVM Smart Solution. Thanks for reading my blog – Happy Learning!
