In order to get started with with JavaScript, create a folder wherever you want on your system and name it whatever you want. For the sake of simplicity, I will create a folder on the desktop by the name of html-script. Inside that I will create a new HTML file by the name of index.html and another file by the name of script.js.
Then, I will open the index.html file and write the following markup in that file.
1!DOCTYPE html> 2<html> 3 <head> 4 <title>My Site</title> 5 </head> 6 <body> 7 <h1>JavaScript</h1> 8 <p>Learning JavaScript</p> 9 <script src="./script.js"></script> 10 </body> 11</html> 12
As can be seen from the above markup, I have already linked my script file with the markup. Now, I will open the script.js and write the below code in that file:
1const fullName = 'John Doe'; 2const age = 28; 3 4console.log(fullName); 5console.log(age); 6
After that I will open my index.html file in the browser and will then go to the browser console. There I should see two lines printed with following text:
- John Doe
- 28
That's it! Now you have written your first very basic JavaScript program that runs in the browser. Now it's time to get to know what each line of as written in script.js file does.
The first two lines of script
The first line of the script.js starts with a word const. That is a keyword in JavaScript which means we are going to create a variable (we are going to reserve some memory which will store some value). After that a white space is left and that is necessary to avoid any syntax errors. Since, we have used const keyword while creating a variable, we will not be able change its value later in our code. There are two more forms of variable declaration keywords which will be discussed in a variables' specific article.
After that, we have written a word fullName which is the name we have assigned to the variable that is created with the help of const keyword. There is not typo error in the word fullName. It was intentional. The reason is that we can't leave a white-space in a variable name. Moreover, since the character "f" is small while character "N" is capitalised only because of a variable declaration convention which is called camel-case.
In camel-case convention, we use the small letter for the first word in a variable name and if there are more than one word in a variable name, all subsequent words' first character is capitalised.
After that, there is an equal sign which simply means that the value of this variable would be what is after the equal sign.
Please note that the value after the equal sign in wrapped around with single-quotes and that is because it is a string i.e. sequence of characters which then form words and sentences. Therefore, it is is mandatory for us to use single or double-quotes around the string. One can use either single-quotes or double-quotes to wrap the strings as long as the both the opening and closing are of same type.
After that we have marked the end of the line or statement with a semi-colon. It is optional but recommended to use them as it specifies that statement ends here.
The second line of the code in script.js file has same rules as the first line but in that line, we have not used quotations for the value and that is only because the value is a number, and we do not use quotes around the value.
The last two lines script
The last two lines in the script file are very simple. These are just the built-in functions of JavaScript which will print any thing that is provided in between parenthesis. In this case, we have stored values in variables and then passed those variables in the function in between parenthesis. Hence, when page gets loaded, fullName and age variables are printed in the browser's console.