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.
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 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.
Creating and Executing Your First JS Script
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:
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
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.
- 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