JavaScript: Introduction to Client-Side Programming

Hello Readers , Welcome to yet another insightful blog at CareerHunt.

In this article, I will discuss every nook & corner of JavaScript.

JavaScript is very easy to learn and apply, for which we need not be a programmer or a student of Computer Science. All we require is a good browser and a code editor.Almost every webpage on the internet uses JavaScript for some purpose.

  1. Introduction of JavaScript
  2. Web Development Background
  3. What is Javascript?
  4. Pros and Cons of using JavaScript
  5. JavaScript Development Tools
  6. What is the difference between HTML & JavaScript?
  7. Applications(or uses) of Javascript
  8. Job Opportunities in Javascript

 

1.Intoduction of Javascript

The basic programming & underlying concepts of JavaScript are fairly easy to understand as well as implement for anyone.

Therefore, I am trying to bring to light here its basic concepts and compare their usage, with a few demonstrations & figures wherever possible & necessary for better grasping.

But first, let us understand what exactly do we mean by “Client side programming”.

2.Web Development Background

Web development is all about communication. In this case, communication between two parties, over the HTTP protocol:

  • The Server – This party is responsible for serving pages.
  •  The Client – This party requests pages from the Server, and displays them to the user. In most cases, the client is a web browser.
  •  The User – The user uses the Client in order to surf the web, fill in forms, watch videos online, etc.

Each side’s programming refers to the code which runs at the specific machine, the server’s or the client’s.

Server-side Programming

Server-side programming is the general name for the kinds of programs which are run on the Server.

Uses
  • Process user input
  • Render pages using HTML, etc
  • Structure web applications
  • Implement business logic of the application
  • Interact with permanent storage (SQL, files).
Example Languages
  • PHP
  • Python
  • ASP.NET in C#, C++, or Visual Basic

Nearly any language (C++, C#, Java). Note- These were not designed specifically for the task, but are now often used for application-level web services.

Client-side programming:

Much like the server-side, Client-side programming is the name for all of the programs which are run on the Client. It has mostly to do with the user interface with which the user interacts.

In web development, it’s basically the browser in the user’s machine that runs the code, and it’s mainly done in JavaScript, Flash, etc. This code must run across varied browsers.

Uses
  • Make interactive webpages.
  • Make stuff happen dynamically on the web page
  • Interact with temporary storage as well as local storage (cookies etc.)
  • Send requests to the server, and retrieve data from it, provide a remote service for client-side applications such as software registration, content delivery, remote multi-player gaming, etc.
Example languages
  • JavaScript (primarily)
  • HTML, CSS

Any language running on a client device that interacts with a remote service is a client-side language. However, HTML and CSS aren’t really programming languages. They are markup syntaxes by which the Client renders the page for a User.

Some of the main tasks of Client-side programming include-

  • Validating input :Validation must be done in the server. A redundant validation in the client could be used to avoid server calls when speed is very critical.
  • Animation & graphics
  • Manipulating UI elements
  • Applying styles, etc.

3.What is JavaScript?

JavaScript is a lightweight, open, and cross-platform interpreted programming language.

It is designed for building network-centric dynamic web pages and web applications.

JavaScript is very easy to learn & implement because it is integrated with HTML.

However, its understanding & implementation gets quicker & easier if the reader has some prior exposure to object-oriented programming concepts and a general idea on creating online applications.

Technically, JavaScript is one implementation of the specification called as ECMA Script. It was developed by Brendan Eich at Netspace in the year 1995 in the name of LiveScript.

For marketing reasons, it was later renamed as JavaScript.

JavaScript runs across all major platforms and is hardware independent. Its programs are executed by JavaScript interpreter built inside the browser.

When an HTML page is loaded by a browser, as soon as the <script> element is encountered, the JavaScript interpreter takes over and the script is parsed line by line.

JavaScript can be implemented using JavaScript statements that are placed within the <script>… </script>.

We can place the <script> tags, containing our JavaScript, anywhere within our web page, but it is normally recommended that we should keep it within the <head> tags.

The <script> tag alerts the browser program to start interpreting all the text between these tags as a script. A simple syntax of our JavaScript will appear as follows:

<html>

  <body>

     <script language=“javascript” type=“text/javascript”>

        <!–document.write(“Welcome to Career Hunt!”)//–>

     </script>

  </body>

</html>

Client-side JavaScript is the most common form of the language. The script should be included in or referenced by an HTML document for the code to be interpreted by the browser.

It means that a web page need not be a static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.

JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions that the user initiates explicitly or implicitly.

4.Pros & Cons of using JavaScript

Now, let us closely understand the advantages & disadvantages of using JavaScript for building our applications.

Merits of using JavaScript
  • Executed on the client side. For example, we can validate any user input before sending a request to the server. This reduces the load on the server.
  •  A relatively easier language. It’s quite easy to learn and the syntax is close to general English.
  •  Provides an instant response to the visitors. That is, no server interaction is required, hence we don’t have to wait for a page reload to obtain the desired result.
  •  Eases creating interfaces that can react when the user hovers over them or activates them using the keyboard, thus increasing interactivity.
  • Provides rich interfaces. Drag and drop components or sliders may give a rich interface to our site/application.
Limitations of using JavaScript
  • Any JavaScript snippets while appended into web pages on client-side can also immediately be used for exploiting the user’s system.
  •  Doesn’t implement any multiprocessor or multi-threading capabilities.
  •  As no supports are available, JavaScript cannot be used for any networking applications.
  •  Doesn’t allow us to read or write files.
  •  Rendering may vary across different layout engines. As a result, this causes inconsistency in terms of interface and functionality.

5.JavaScript Development Tools

One of the major strengths of JavaScript is that it doesn’t demand expensive development tools. We can even start with a simple text editor such as Notepad.

Since it is an interpreted language inside the context of a web browser, we don’t even need to buy a compiler.

These tools offer capabilities ranging from event-handling to code reduction and data-rendering.

To make our life simpler, various vendors have come up with very nice JavaScript editing tools. Here are some of Career Hunt’s choices for JavaScript developer tools

VS Code (Visual Studio Code)

VS Code provides IntelliSense, debugging, and powerful editor features for JavaScript. VS Code uses the JavaScript language service to make authoring JavaScript easy. In addition to syntactical features like format, format on type and outlining, we also get language service features such as PeekGo to DefinitionFind all References, and Rename Symbol. Here’s a sneak peek into how it looks-

Plunker

It is an online community for creating, collaborating on and sharing our web development ideas. Plunker is great for prototyping test ideas. Here’s a sneak peek into how it looks-

Chrome’s dev tools

for easily debugging JavaScript errors and identifying performance bottlenecks. Here’s a sneak peek into how it looks-



Atom

It is an open source text editor for building super rich & responsive applications. It is a modern text editor. Here’s a sneak peek into how it looks-

6.What is the difference between HTML & JavaScript?

I have jotted down some basic differences between HTML & JavaScript along with the categories they belong to for a better understanding

 

HTML JAVASCRIPT
Client-side v/s Server-side HTML is rendered from the server on the browser. This means that any (Backend ) code programmed on the Web page is processed by the server before it is sent to the user. JavaScript is completely run on the client machine, so any code created is compiled and executed on the Web browser.
Dynamic Programming HTML is a static markup language in which we can’t do anything dynamic just by using its tags. The static code created in the HTML pages are hosted on the website’s domain and the HTML rendered can be created using dynamic programming languages such as C#, PHP or VB.NET. With JavaScript, a programmer can change the values and properties of an HTML tag as the user clicks a button or chooses a value from a drop-down box. JavaScript is included with the HTML code on a Web page, so it works in conjunction with the code.
Compatibility Consistently supported by all browsers, and the main tags used for a Web page are rendered without an issue JavaScript functions are not always compatible across browsers. Some work well in Internet Explorer, but they may not execute properly in Firefox or Chrome. For this reason, some companies are forced to list a compatibility browser for the Web application to ensure users are able to view the website properly.
AJAX Not supported Supported
OOP Concepts Not supported Inheritance and Encapsulation are the only two OOP concepts that are applicable in JavaScript, particularly since, in JavaScript, objects can encapsulate functionalities and inherit methods and properties from other objects.

 

7.Applications (Uses) of JavaScript

  • Allows us to create highly responsive interfaces that improve the user experience and provide dynamic functionality, without having to wait for the server to react and show another page.
  • Can enhance the HTML interfaces. For example, while it is nice to have a textbox input, we might want to have a combo box allowing us to choose from a list of preset values or entering our own. Using JavaScript, we can enhance a normal input box to do that.
  • Information that changes constantly can be loaded periodically without the need for user interaction. For example, sports match results, stock market tickers, etc.
  • Can be used to animate elements on a page. For example, to show and hide information, or highlight specific sections of a page. This can vouch for a more usable, richer user experience. 
  • Works on web users’ computers, even when they are offline.
  • Can test for what is possible in our browser and react accordingly. This phenomenon is commonly known as defensive scripting.

8.Job opportunities in JavaScript

We at CareerHunt researched & surveyed a few tech communities & forums to get a hunch on the developer skills in order to ensure that we can provide our readers with the crux of what’s cooking in the tech market, such as, when did they push code for the first time, how do they learn coding, what are their favourite languages and frameworks, what do they want in a job, what hiring managers want in a candidate, etc. One such source for this particular research is HackerRank.

Even though new languages arise frequently, it’s most important for developers to master core legacy languages. By far, employers’ most common requirements today are- JavaScript, Java, Python, C++, and C.

When we compare the most in-demand languages by employers with that of the most common languages that developers know, there is no gap as such. Java, JavaScript, C and C++, and Python are all top picks of developers.

However, the biggest gap in knowledge is with JavaScript frameworks. A number of the most in-demand frameworks are JavaScript frameworks.

It’s the only language versatile enough to build frontend, backend, as well as mobile & browser extensions. Hence, JavaScript is ruling the web.

Most often, employers want developers who know AngularJS, Node.js, and React.js.

React.js has the biggest margin between percentage of developers who know the framework and percentage of employers who look for candidates with this skillset. In other words, there’s a big opportunity for developers to learn React as a marketable skill that companies need today.

I hope this article was able to help you to gain a clear understanding of the fundamentals of JavaScript, its applications, origin, and scope. So Readers, what are you waiting for? Buckle up & begin your JavaScript learning NOW! ☺