JavaScript
JavaScript is a programming language that started off simply as a mechanism to add logic and interactivity to an otherwise static Netscape browser. In the years since its introduction, it has not only supplanted a variety of other competing languages and technologies to become the standard for browser-based programming, but it has also expanded beyond the client space to become a dominant language on the server side, as well.
What JavaScript can be used for
The Hyper Text Transport Protocol, or HTTP, was designed to do exactly what the name implies, which is to transport HTML text across a network for viewing. But the problem with HTML is that it is completely static, providing no capabilities to implement logic.
Basic features we currently take for granted, such as input validation, autocorrect, progress bars or causing a graphic to change during a mouse rollover, would all be impossible for a browser to perform without some type of scripting capability. As a result, when the web first rose to prominence, every vendor in that space provided some mechanism to make HTML web pages more interactive.
Alternatives to JavaScript
Microsoft promoted a competitor to JavaScript named VBScript, along with plug-in technologies, such as ActiveX Data Object (ADO). Sun Microsystems promoted Java applets that were cross-platform and could be used in any browser.
Many other technologies came and went as the internet matured. In the end, JavaScript won the battle for popularity, and it is the only client-side scripting technology supported by the Chrome, Firefox, Safari and Internet Explorer browsers.
JavaScript is an interpreted language, as opposed to compiled languages, such as C++ and Java. This means that the code written in JavaScript does not go through an intermediary compilation stage in which the source code is transformed into machine language that is easy for a CPU to process.
Instead, JavaScript is interpreted on the fly by the computer processing it. Because JavaScript code is not packaged in a CPU-friendly form, such as Java bytecode or a binary executable, program execution can be slower than a comparable program written in Scala or F#. However, modern JavaScript engines are highly optimized, and inefficiencies are rarely noticeable when using modern hardware.
Short note on JavaScript versus Java
Given the first four letters of the name, a misconception exists that JavaScript and Java are similar. While it is true that Java and JavaScript share some very basic syntax elements, such as the use of semicolons to terminate a statement, the use of curly braces to delineate code block, and similar constructs to create looping and iterative structures, the similarities end there.
The two languages do not originate from the same vendor, the two languages are not maintained by the same consortium, and fundamental language features, such as object orientation and strong typing, are major instances in which the two differ. Java and JavaScript are two very separate and distinct programming languages that should not be confused with one another.
Basics of JavaScript programming
HTML provides a special <SCRIPT> tag that enables developers to embed JavaScript within the markup of the page.
Variable declaration using the var keyword in JavaScript is very straightforward and does not involve a complex set of initialization rules as one might see in Java or C++. JavaScript is known as an untyped language, which means that variables can take on a variety of different forms as a program executes.
For example, in the following program, a variable named greeting is declared and is initialized to a text string. But, on the next line, the greeting variable is assigned to an integer value of 10. A new variable named product is then initialized to the value of the greeting variable multiplied by itself.
var greeting = 'Hello World';
greeting = 10;
var product = greeting * greeting;
Using JavaScript's var keyword to declare variables
Because it is permissible for a variable named greeting that is created as a text string type String to change on the fly to a variable of type integer, JavaScript is known as a weakly typed language. In a strongly typed language like C++ or Java, this type of variable transformation would trigger a compilation error.
JavaScript's let vs. var
Historically, the var keyword has been used to instigate the declaration of a variable. However, when using the var keyword, the variable can end up having a broader scope than was originally intended, which can cause conflicts with other parts of the code that might declare a similarly named variable.
Version 6 of the ECMAScript standard introduced the let keyword for declaring variables. Both var and let share the same syntax, but variables declared using JavaScript's var keyword are scoped to the function in which they are declared, whereas the JavaScript let keyword keeps the variable scoped to the block in which it was declared.
{
let greeting = 'Hello World';
greeting = 10;
let product = greeting * greeting;
}
JavaScript functions versus methods
The content of the <SCRIPT> tag can either be code to be invoked as soon as a user encounters the <SCRIPT> tag or it can contain JavaScript functions.
JavaScript functions are analogous to what other languages would call methods. These JavaScript functions contain code that can be triggered by a browser-based event, such as a mouse click, page load, form submission or keystroke. It is also common to have one JavaScript function invoke another to perform supplemental work.
Example of JavaScript code
The following is a simple example of a rock-paper-scissors application coded using HTML and JavaScript. The <SCRIPT> tag contains a JavaScript function called playRoshambo, which is triggered by the onclick event of the user clicking on an anchor link that contains the text paper. The result of playing the game is displayed within the <div> tag named results.
<script>
playRoshambo = function(clientGesture) {
//server always chooses rock
if (clientGesture=='rock') {
result = "tie";
}
if (clientGesture=='paper') {
result = "win";
}
if (clientGesture=='scissors') {
result = "lose";
}
document.getElementById('results').innerHTML = result;
}
</script>
Which one will it be?<br/>
<a href="#" onclick="playRoshambo('paper')"> paper </a>
<div id="results"></div>
Modern JavaScript libraries
The basic JavaScript engine that comes packaged with a modern browser only provides a basic and rudimentary set of APIs for software development. To perform complicated tasks, such as implementing an Ajax-based request-response cycle or even performing advanced DOM parsing or string manipulations, a great deal of code needs to be written.
Further complicating the task of writing code to achieve common yet complex programming tasks is the fact that there are differences between each of the major vendors in terms of which versions of JavaScript they implement, as well as how bug-free those implementations are.
To address the differences between browsers while at the same time providing prepackaged code for performing very common tasks, JavaScript libraries have become a mainstay of browser-based UI development. The most popular JavaScript library in use today is jQuery, while competitors such as Prototype and Dojo remain quite popular.
Shortcomings of JavaScript
Two common criticisms of JavaScript is the fact that it is weakly typed and that it is not an object-oriented language. Software developers tend to prefer strongly typed object-oriented languages because these features tend to accelerate software development while also helping to maintain a high degree of software quality.
However, because JavaScript has become the de facto language of internet browsers, being able to write high-quality, bug-free code has become a priority for many members of the software development community.
As a result, new languages, such as TypeScript, have emerged that are both strongly typed and object-oriented. TypeScript looks very much like JavaScript, although it enforces strong typing and provides features for developing in an object-oriented manner. TypeScript is also a compiled language, as opposed to JavaScript, which is interpreted.
However, unlike Java or C++ where the source code is compiled into bytecode or binary, TypeScript compiles into pure JavaScript that can be optimized based on the target browser.
About JavaScript frameworks
A big industry trend in UI design is to push as much logic, processing and state management onto the client as you can and to interact with the server through lightweight RESTful APIs and web services. This has led to the development of full scale JavaScript frameworks that control all the aspects of client-side presentation, often pushing a single-page interface (SPI) user experience.
Popular frameworks in this space are Angular, React and Ember, with these frameworks often leveraging compiled JavaScript languages, such as TypeScript and JavaScript libraries like jQuery for logic and Handlebars.js or Mustache.js for web page templating.