Getting Started With JavaScript (Introduction)

This is my first JavaScript guide on this blog, and in this guide, we would go over the introduction of JavaScript, but first…

What is JavaScript?

JavaScript is a client-side scripting language supported by all browsers. It gives you control over how a page displays once it is loaded or displayed by the browser, it is mostly used to create interactive elements once a web page is loaded.

When we talk about the client side, we are basically referring to where the code performs its operation, in this case, your client is your web browser that runs on your computer, or smartphone, and connects to a server when necessary to get the resources it needs to run the operation/actions.

When I say operations, it means all the work performed by the programming language (in this case, JavaScript). For example, to program an interactive element, your client or web browser needs to understand a language, and that language is JavaScript, the fact you can do it on your computer is why it is called on the client side.

There is also a server-side language, these sorts of languages are not run by your browser, they are run on a server somewhere, hence the name server-side.

In more detail, here are the differences between a server-side language vs a client-side language:

• Client-side language like Javascript is read and executed by the web or user browser (e.g Chrome, Firefox, etc) after downloading the web page (embedded programs and all) from the server, while a server-side, e.g PHP is run by the web server before sending the web page to the browser.
• Client-side gives you control over how a page behaves once it’s displayed by the browser, server-side on the other hand lets you generate customized pages on the fly before they are sent to the browser.
• Client-side puts the burden on your computer where the web browser is run, while the server-side applications put the burden on the server to perform its operation, if operations can be performed by the client, without sending data over the network, they may take less time, use less bandwidth, and incur a lesser security risk.

So, what is the major difference:

The major difference between a client-side application and a serverside application is that an application that is run on the server can't be used to build an interactive element, while a client-side application can do that.

An example of an interactive element is the scroll-to-top button on this page, try scrolling your way to the very top of this guide, and you'll see the scroll-to-top button disappear. Try scrolling down, you'll see it reappears. That is what we call interactive actions, all that the server-side cares about is displaying the page for you, and it leaves the rest of the interactivity to your client-side application.

Before we move ahead, you might have thought about where the code the client-side runs come from. The code comes from the web server, but it doesn't run there, it runs on your web browser. For the server side, it runs and generates the page for you on the fly, and for the client side, it passes the browser to the location where the JavaScript code is located, and it then runs code interactively when required.

Creating and Executing Your First JS Script

Note: I'll shorten JavaScript to JS

The good thing about programming js script is that you can directly program and run it directly in your browser console. Fire up your developer console, I assume you are using chrome, use F12 to launch the console, click on the console tab, and you are ready to get started:

Hit CTRL + L to clear the logs, or press the delete button at the upper left section.

Below is an example of a Hello World program: console.log("Hello World!");

Easy right? So far, Out of all the programs, I have ever learned, JavaScript is by far the sweetest of all, it's so easy to get started, and you can learn very quickly. It's so also easy to create nonsense in JavaScript, so, beware.

By looking at the example, you would have guessed what it does, it simply outputs Hello World to the console, it is as simple as that.

The semicolon is part of the way JS helps to know if one command is over, and another one is starting, although JS doesn't require each statement to be terminated with a semicolon, you can omit a semicolon between two statements if those statements are written on separate lines. I'll suggest you start separating statements with semicolons to avoid uninitiated bugs.

Basic Syntax and Statements

To get a basic grasp of JavaScript, we need to learn the basic syntax and statement, and first…

Comments

If you want to become a good developer, who doesn’t? Then you need to learn how to use code comments. This is very very important, I repeat this is very very important in JS, and even any programming language.

A comment is a readable explanation in a script that is ignored by the interpreter, you can either add a comment about what the script does or you can write a comment about what a specific function/section does in the script.

Either way, a comment makes code easier for humans to understand the code when viewed later on.

In JavaScript, there are a couple of ways you can write code comments.

• Single Line Comment: Any text between a //and the end of a line is treated as a single comment and is ignored by javascript. It is called a single-line comment because you can only write it on a single line
• Multiline Comment:  Any text between the characters /* and */ is treated as a multiline comment. This is comment is called a multiline comment because it may span multiple lines but may not be nested.

The following are examples of legal comments in Js:

// This is a single line comment

/* This is a multiline comment, 
I am spanning across multiple 
lines */

Use SHIFT + ENTER key to jump to the next line when using multiline comment in the browser console tab.

My preferred style of the multiline comment is as follows:

/* 
# Description : This is a multiline comment
#     Version : 1.0
#      Author : Mr. Devsrealmer
#        Date : 09/11/2020
*/

The pound sign (#) is not required, this is just my style to keep things organized ;)

Identifiers and Reserved Words

An identifier is a name you can reference and are used to name variables, constants, properties, functions, and the like. Identifier naming convention is as follows:

• A valid identifier name can starts with a dollar sign followed or a letter or underscores followed by letters, digits, or underscores.
• They cannot start with digits as the first character
• They can’t contain any space, and they are case sensitive, meaning $book is different from $Book

Valid identifiers are as follows:

var
myVar
_hey
$myVar
myVar342

Reserved word a.k.a reserved identifier is a word that cannot be used as an identifier, such as the name of a variable, function, classes or label – it is "reserved from use".

Examples of a reserved identifier are as follows:

Reserved Words Table

Conclusion

This would conclude our guide on Getting Started With JavaScript. If you have any doubts or questions, please leave a comment.