May 14th, 2019 | Updated on May 16th, 2019
Among the three main web languages, HTML and CSS, JavaScript has become the one language that is (probably) the most important and a must for every web developer to learn and understand. That’s why learning all of the available Javascript commands well makes a huge difference in a web developers life.
Invented by Brendan Eich in 1995, JavaScript whose official name is ECMAScript became the main programming language of the web. JavaScript is used to give a command to the browser to perform a certain action like change the background color when a button is clicked or even communication with the server.
The JavaScript code that a developer writes is called statements or commands. Keep in mind that the JavaScript syntax is different from the markup language, HTML and the stylesheet language, CSS. So it is essential that a developer knows how to write programming commands is the main requirement when coding JavaScript.
One needs to also understand that Javscript has become so important, that most website use this script from a number of different plugins and features. Such extensive use has been made of Javascript that these days, the volume of code used has become quite extensive and might cause a website to actually load slower, for example using code which loads asynchronously using the async command, or possibly deferred loading using the defer command, as we can see on this post on Collectiveray.
Writing clean and professional JavaScript code is also an important aspect when coding. We am going to discuss the top 9 most used JavaScript commands and how they should be used.
Essential Javascript Commands
Here are a few essential programming codes that each developer needs to master.
1. Control Flow Statements
These are commands used to perform different actions based on different conditions. For example, you may have a webpage that needs to be dynamic by a click of a button in the sense that the background color should change to green if a certain variable value is true and to red, if the value is false. Looking at these statements, certain commands which are mostly used include, if …else and switch…case statements.
a. if … else
var name;
name = “A”;
if (name == “A”) {
document.getElementById(“body”).style.background = “green”;
} else {
document.getElementById(“body”).style.background = “red”;
}
In the above code, we are first declaring a variable called name and assigning a value to it. We then subject that variable to the if…else statement to determine if it is equal to the value ‘A’. If it is true, the background color of the body of the web page which is referenced by the ID ‘body’ is changed to green and to red if the condition is false.
b. switch … case
This kind of command is used to execute a condition with multiple values. For example, the background color of a web page can change on different days
switch (new Date().getDay() ) {
case 0:
document.getElementById(“body”).style.background = “green”;
break;
case 1:
document.getElementById(“body”).style.background = “red”;
break;
default:
document.getElementById(“body”).style.background = “white”;
break;
}
The code above is using the command Date().getDay() which returns the position of days in numbers starting from 0 which is Sunday. The different values are subjected to the case which determines which number is returned. If the value is 0 which is Sunday, the background color should be green, if the value is 1 which is Monday, the background should be red but white on all the other days. The default is keyword is used to define values apart from the ones declared is the case keyword. The break keyword is used to stop execution and get out of the switch block.
2. Looping Commands
These statements are used to execute a certain block of code until a condition is satisfied. They include ‘while’ statements and ‘for’ loop.
a. while statement
It is a command used to execute a certain block of code repeatedly as long as a certain condition is true.
while (x > 0) {
x–;
}
The code above will keep decreasing the value of x by 1 until it is less than or equal to 0.
b. for loop
It is a command used to execute a block of the code number of times until a certain condition is satisfied
for (count = 0; count < 10; count++) {
document.write(“Count = ” + count);
}
The code above will keep on printing the count number until the value of count which is initialized at 0 is any number apart from a number less than 10.
3. document.getElementById(“value”) and document.getElementsByClassName(“value”)[0]
These are JavaScript commands used to get a certain elements defined by a certain ID or ClassName “value” as shown in the syntax above. With this command, more commands to perform an action to the element are derived. They include:
i. document.getElementById(“value”).innerHTML and document.getElementsByClassName(“value”)[0].innerHTML
These commands will change the value displayed by the specified element
Example:
document.getElementById(“title”).innerHTML = “Monday”;
document.getElementsByClassName(“title”)[0].innerHTML = “Monday”;
The code above will get the elements called “title” and replace whatever text is there already with the word “Monday”.
ii. document.getElementById(“value”).style. and document.getElementsByClassName(“value”)[0].style.
Are used to change the style of a specified element.
Example:
document.getElementById(“title”).style.color = “red”;
document.getElementsByClassName(“title”)[0].style.color = “red”;
The code above will change the color for the element called “title” to red.
4. Alert(“message”)
This is a command that pop’s up to an alert box in the browser window.
Usage:
alert (“Hello World”);
The code above will display a message box with the message “Hello World”.
5. Function Statements
These statements are used to define certain functions with specified parameters. A function is a block of code which can be executed a number of times to give certain results.
Usage:
function calcArea(width, height) {
return width*height;
}
document.write(calcArea(10,5));
The code above is used to calculate the area of a rectangle. A function command called calcArea is declared with parameters which are used to calculate the area. The result is then output to the web page by calling the function with some parameters.
6. Car Command
This is a simple command that allows the declaration of a variable. It is important to declare a variable before using it. A variable is a container used to hold values.
Usage:
var name;
var name = “Monday”;
The command above is used to create a variable called name in the first code and initialize the created variable with a value “Monday” in the second line of code.
A variable can be local or global depending on where it is declared. When a variable is declared such that its value is available in the entire code, it is, therefore, global while when the value is available to a certain function it is local.
7. Try / Catch Statement
They are used to handles exceptions that might occur during the execution of a program. The try part will have a code to execute and if an error occurs, the catch part will handle it.
Usage:
try {
alerting (“Hello world”);
} catch(err) {
document.write(err.message);
}
Since there is no function like alerting, the code above will produce an error which will be handled in the catch block.
8. Export And Import Statements
export command as the name suggests is used to transfer functions, objects or variables so as to be used by another JavaScript program. import, on the other hand, is used to receive bindings which have been exported from another program.
Usage:
In a script named “expo.js”, we could have the following code
var day = “Monday”;
export day;
In another script named “impo.js”, we can then import the exported data as follows:
import day from “expo.js”;
document.write(day);
The import code will print out “Monday” on the web page.
9. Console.[command]
This command is used to send messages to the command line from your JavaScript code. It has more commands that are easy to use. They include
console.log(“message”) which sends some message to the window
console.warn(“message”) which sends a warning message to the console window.
Usage:
var a = 10;
var b = 15;
var sum = a + b;
console.log(sum);
The code above will display the sum of the two variables “a” and “b” to the console window.
Placement
JavaScript commands have different areas where they can be placed which include:
i. The working HTML document.
If you are working on a certain web page, JavaScript commands can be placed in the same document by introducing
ii. A JavaScript file
The commands can also be defined in a different file which will contain a .js extension. To include this file to a web page, we need to link it using the
