JavaScript Overview and Syntax

1. Introduction

2. What is JavaScript?

          JavaScript is a programming language that brings interactivity to our sites and custom behaviors. It is a client-side scripting language which means that like other programming languages do, it runs on the user’s computer and not on the server. This also means that it is based on the settings and capabilities of the browser. It may not even be available because a user has chosen to turn it off or because a device doesn’t support it, which good developers should keep in mind and plan for. In addition, it is also referred to as a dynamic and loosely typed programming language.

          It is a dynamic language because of what you see on paper when you review the code is not the outcome that you will get when you run the code in the browser. This is because JavaScript uses a data structure that is loosely typed, which means you can use all of the declarations (var, const, let) without defining the type of variable.

          Data in JavaScript is typed loosely, meaning we do not automatically tell JavaScript what a variable is. We don’t have to programmatically define that variable as a number if we set a variable to a value of 7, then JavaScript automatically recognizes it as a number.

3. Why is it called JavaScript?

          “LiveScript” was the initial name of JavaScript when it was first developed. The name was changed to JavaScript to enable its developer to position this new "unused language" as the "younger brother" of Java, when at that time it was the more popular language of the two.

          The language was then submitted for standardization to the ECMA world organization. By that point, Netscape did not allow the utilization of the "JavaScript" name, therefore the standardized language is known as ECMAScript.

          JavaScript is a language that every big browser on the market currently supports (including Firefox, Chrome, Internet Explorer, Safari and Opera) and many web browsers as well. Initially developed by Netscape.

          A standard version of the core JavaScript language is specified by the ECMA-262 Specification.

          Below is example of the ECMA standard derived from the ECMA-262 Specification:

• JavaScript is a lightweight programming language that is interpreted. 
• Open and cross-platform.

4. Client-side JavaScript

         Client-side is the language’s most common format. The script could be included in or referenced by an HTML document in the code to be translated by the browser. 

          It implies that HTML can incorporate client-interacting programs, control the browser, and make the content of the HTML powerful.

Advantages:

• Less contact with the server: Before sending the page off to the server, you can validate user feedback to save the server action, which indicates less stacking on your server. 
• Immediate feedback to the visitors: They do not get to be held up for a page reload to see within the occasion that they have neglected to enter something. 
• Expanded interactivity: When a user hovers over an HTML element with a mouse or triggers it through a keyboard, you will be able to create web page interfaces that respond.
• Greater interfacing: To give your web pages a richer GUI, you will be able to use JavaScript to integrate such items as drag-and-drop components and sliders.

Limitations:

• JavaScript is not possible to treat as a complete programming language because of its limitations: 
• JavaScript has no capability to peruse or compose files. 
• JavaScript has no support available for organizing applications 
• It runs in a single execution thread.

5. How to use JavaScript in your web page?

Using the <script> element

          JavaScript codes run from inside a web page and type directly as a separate part of the web page file. The JavaScript programs found in a web page is called a script. Once the web browser encounters a script element, it interprets the statements that the element contains in its scripting engine.

          Script can be embedded or placed in an external file right into a document and connected to a page like CSS. The <script> element uses both methods.

Embedded <script>

          The code must be added as the content of a <script> element to embed a script on a page.

<script>
          Your code here
</script>

External <script>

<script src="external_script.js"></script>

          The benefits of using external script file is the application of the same script to different websites. Each external script, on the other hand, requires an additional server HTTP request, which slows down performance.

6. Where to place the <script> element?

          Typically, the <script> element is placed in the document header and/or at the very end of the body, and goes anywhere in the document. Sprinkling the script through the document is not recommended, as it would be hard to locate and maintain.

          The end of the document, just before the </body> tag, is the recommended placement for most scripts, since the document and its DOM structure will be parsed by the browser. The information would then be ready and usable by the time it gets to the scripts and they can execute faster. In addition, moving the script to the bottom improves the perceived performance, simply because the download and execution of the script blocks the page’s rendering.

6.1. Your First JavaScript code

          Let us take a look at our first JavaScript code. The script is placed in the body section of the document and it produces an output that displays a simple text message and a variable value.

<html>
<body>
 <script>
           document.write("Hello World!" + "</br>");

           var score1 = 10;
           var score2 = 20;
           var total = score1 + score2;
           document.write(total);

 </script>
</body>
</html>

          The following result will be provided by the sample code above:

          The console.log() method can also be used to quickly output a message or write data to the browser console.

<script>
           console.log("Hello World!"); /* This prints a simple message: Hello World! */
           var score1 = 10;
           var score2 = 20;
           var total = score1 + score2;
           console.log(total); /* This prints a variable value: 30 */
</script>

6.2. Common rules of syntax and conventions that work their way through all JavaScript.

1. Case-sensitive. The function names, variables, language keywords, and all other identifiers have to be written continuously with a consistent capitalization of letters. For example, the variable named "myVariable", "myvariable", and "MYVariable" are treated as three different objects. 
2. If white space, like tabs and spaces, is not part of a text string and is enclosed in quotations, it will be ignored. 
3. When you use JavaScript, there are several coding conventions that you need to consider:

• Naming Variable 
• For identifiers names, use camelCase. 
• Names should all begin with a letter or underscore.

• Line Length 

• Spaces around operators 

• To avoid confusion, always use lowercase filenames.
• Statement Rules

• Always terminate or end a simple statement with a semicolon. 
• At the end of the first line, placed an opening bracket. 
• Before the opening bracket, use one space. 
• Without leading spaces, placed the closing bracket on a new line.

          Refer to the given example below:

<html>
<head>
<body>
<script>
       function compute() {
         var fee = 20.00;
         var tax = 0.21;
         var totalFee = fee + (fee * tax);
         return totalFee;
       }
       var firstName = "Juan",  lastName = "dela Cruz";

       document.write("Customer name: " + firstName + " " + lastName + "</br>");
       document.write("Your Total Fee is:" + compute());
</script>
</body>
</html> 

          At the end of the statement, a semicolon informs JavaScript that it is the end of a command. Ending each statement with a semicolon is a good practice, while line break can also trigger a command’s end based on the JavaScript standard.

          The following is the result of the sample code above

6.3. Comments in JavaScript

          You can leave comments throughout a JavaScript, allowing you to leave reminders and explanations in your code. Comments may be useful if another developer is editing the code in the future.

          The following are the two ways of incorporating comments in JavaScript:

• For a single line comment, two slash characters (//) are used at the beginning of a line. You may place a single line comment on the same line as a declaration, as long as it comes after a statement. It is not appropriate to close a single line comment, as a line break effectively closes it.

7. Summary and References

Summary:

• JavaScript is a programming language that brings interactivity to our sites and custom behaviors. It is lightweight and commonly used as a part of web pages that allow client-side scripts to link and build dynamic web pages. It is an interpreted computer programming language with capabilities that are object-oriented. 
• “LiveScript” was the initial name of JavaScript when it was first developed. The name was changed to JavaScript to enable its developer to position this new "unused language" as the "younger brother" of Java, when at that time it was the more popular language of the two. 
• The script could be included in or referenced by an HTML document in the code to be translated by the browser. It implies that a web page requires not an inactive HTML, but it can incorporate client-interacting programs, control the browser, and make the content of the HTML powerful. 
• You can implement JavaScript using its statements that are placed on the web page inside the HTML tags <script>...</script>

References