What is Javascript?

JavaScript is the most popular web programming language today. This is an interpreted language , built into HTML that makes web pages come to life.

What is Javascript

Why Learn Javascript?

JavaScript is among the most powerful and flexible programming languages of the web. It powers the dynamic behavior on most websites, including this one.

JavaScript Getting Started

How to write Javascript? JavaScript in HTML

  • The HTML <script>.....</script> tag is used to embed/insert/implement a JavaScript programs/code into any part of an HTML document/page
  • The <script>.....</script> tag specifies that we are using JavaScript
  • The <script>.....</script> element can be placed in the <head>, or <body> section of an HTML document
  • Each <script>.....</script> tag blocks the page rendering process until it has fully downloaded and executed the JavaScript code
    • So the best practice is to place/add the <script>.....</script> at the bottom/end of body tag/section ie. just before the closing </body> tag

Note:
JavaScript is the default scripting language in HTML. The old HTML standard attributes like type="text/javascript" and language="javascript" no longer required in modern browser

Syntax & Example

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>03.01.js.script.tag.html</title>
 <!-- internal style -->
 <style>
 /* css selector: { property:value; } */
 body {
 font-family: arial;
 }
 </style>
 <!-- internal JavaScript - head section -->
 <script>
 // Write all JavaScript code here
 alert('welcome to JavaScript');
 </script>
</head>
<body>
 Content
 <!-- internal JavaScript - body section -->
 <script>
 /* Write all JavaScript code here */
 console.log('welcome to JavaScript');
 document.write('This is dyanamic content. Hello All, Lets write something on web page');
 </script>
</body>

Where to write JavaScript in HTML? Where to embed include write put JavaScript in HTML?

JavaScript provides 3 places to write the JavaScript code in our webpage:

  1. Inside the HEAD section
  2. Inside the BODY section
  3. External JavaScript .js file (separation of concern)

1. Inside the HEAD section (code between the head tag)

  • JavaScript programs/code/statements can be placed in the <head> section of an HTML page
  • As each <script>.....</script> tag blocks the page rendering process until it has fully downloaded and executed the JavaScript code so placing them in the head section (<head> element of the document without any valid reason will significantly impact your website performance

Syntax & Example:

<head>
 <!-- internal JavaScript - head section -->
 <script>
 // Write all JavaScript code here
 alert('welcome to JavaScript written in head section');
 </script>
</head>

2. Inside the BODY section (code between the body tag)

  • JavaScript programs/code/statements can be placed in the <body> section of an HTML page
  • As blocking nature of <script>.....</script> tag ideally, scripts should be placed at the end of the body section, just before the closing </body> tag, it will make your web pages load faster since it prevents obstruction of initial page rendering

Syntax & Example

<body>
 page content
 <!-- internal JavaScript - body section -->
 <script>
 // Write all JavaScript code here
 alert('welcome to JavaScript written in body section');
 console.log('welcome to JavaScript written in body section');
 document.write('<h2>welcome to JavaScript written in body section</h2>');
 </script>
</body>

3. External JavaScript .js file (separation of concern)

  • We can easily write JavaScript code in between the script element. In a real-world application, we have 100+ maybe even 1000+ lines of code, we don't want to write all that code inline here
  • We must have to extract and separate our JavaScript behavior code from our HTML markup code
  • A simple thumb-rule is if we have a lot of JavaScript code, we can put it into a separate file
  • We can use/add/attach an external JavaScript file by using <script> tag with src (source) attribute:
    • <script src="path/scriptfile.js"></script>
    • One can provide a full URL (absolute path) or relative path from the current page
  • We can create a single external JavaScript file and embed it in many/any HTML page which provide code re-usability

4. Advantages of External JavaScript

  • It separates HTML and JavaScript code (separation of concern)
  • Code re-usability
  • It makes HTML and JavaScript file/code easier to read, maintain and more meaningful/semantic
  • Web page loads faster /increase the speed of the webpage (Cached JavaScript files)

Note:
Usually, when an external JavaScript file is downloaded for the first time, it is stored in the browser's cache (like images and style sheets), so it won't need to be get downloaded multiple times from the web server that makes the web pages load faster/quickly.

Syntax & Example - .html file:

<body>
 page content
 <!-- include external JavaScript - body section -->
 <script src="./03.script.js"></script>
</body>

Syntax & Example - .js file:

// external js file
// Write all JavaScript code here
alert('welcome to JavaScript written in external file');
console.log('welcome to JavaScript written in external file');
document.write('<h2>welcome to JavaScript written in external file</h2>');

JavaScript Code structure

The syntax of JavaScript is the set of rules that define a correctly structured JavaScript program. Let's study some of the building blocks of JavaScript code:

JavaScript Statements

  • One line of JavaScript Code is one JavaScript Statement / Instruction / Command
  • Statements are a command to Browser to do something / perform actions
  • A Statement is a piece of code that expresses an action to take place
  • JavaScript code/program (or just JavaScript) is a sequence of statements
  • Statements are written in-between <script>.....</script> tag
  • Statements are separated by Semicolon; so we may write many statements in a line (optional)
  • JavaScript ignores extra line breaks and white spaces
  • JavaScript is case sensitive language (VB, Pascal, HTML are case insensitive)
  • JavaScript is interpreted not compiled (write and handed over to the web browser)
  • All statement in JavaScript should be terminated by a Semicolon;

Note:
JavaScript statements are composed of: Values, Operators, Expressions, Keywords, and Comments

Whitespace and Line Breaks

  • JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs
  • We can freely use spaces, tabs, and newlines to format and indent programs in a neat-clean and consistent way that makes the code easy to read and understand (not advisable)

Semicolons

  • JavaScript statements are generally followed by a semicolon; character
  • A semicolon may be omitted in most cases when a line break exists
  • JavaScript interprets the line break as an implicit semicolon, called an automatic semicolon insertion
  • In most cases, a newline implies a semicolon, But “in most cases” does not mean “always”!

Note:
It is a good programming practice to use semicolons; after every statement

Case Sensitivity

  • JavaScript is a case-sensitive language
  • in Javascript variables, language keywords, function names, and other identifiers must always be typed with a consistent capitalization of letters
  • Example: var firstName='Dinanath'; and var FirstName='Dinanath'; here firstName & FirstName are different ie. two different variable

Note:
Take care/precautions while writing variable and function names in JavaScript

JavaScript Code Blocks

  • JavaScript commands/statements/code can be grouped together in code blocks, inside curly brackets {...}
  • Grouped statements/lines form code blocks
  • The purpose of code blocks is to define statements to be executed together like a single JavaScript command
  • An often occurrence of a code block in JavaScript is a JavaScript function

Syntax & Example:

// external js file
// Write all JavaScript code here
// define function - block of code to show welcome message
function sayHello() {
 alert('Hello All! Welcome to JavaScript!!');
}
// define function - block of code to show total of two numbers
function showTotal() {
 var num1 = 10;
 var num2 = 20;
 var total = num1 + num2;
 alert('Total is : ' + total);
}
// invoke / run / call a function
sayHello();
showTotal();

JavaScript Keywords

Usually, JavaScript commands/statements start with a specific keyword which defines what action/function should the browser will perform/do:

Keyword Keyword Keyword Keyword Keyword
break do ... while if ... else try ... catch const
continue for return var class
debugger function switch let import

Reserved Keywords

JavaScript has several reserved keywords. These are the words that you cannot use as identifiers (variable names, function names, and loop labels) in your JavaScript programs. The following list shows the keywords that are reserved in ECMAScript 6. It also includes keywords that are reserved for future as well as keywords that are disallowed in strict mode.

  • arguments, await, break, case, catch, class, const, continue, debugger, default, delete, do, else, enum, eval, export, extends, false, finally, for, function, if, implements, import, in, instanceof, interface, let, new, null, package, private, protected, public, return, static, super, switch, this, throw, true, try, typeof, var, void, while, with, yield,

Comments

  • The comments are a meaningful way to deliver the message (description to code) for others/for future reference and to understand/follow the code statements/lines
  • Comments are special lines written for other developers as a reference purpose and browser ignores while interpreting
  • It is used to add information about the code, warnings or suggestions so that end-user can easily interpret the code (Why and How of code/program/logic)
  • Comments are used to explain code/programs/statements and to make it more readable for developers
  • A comment is ignored by the JavaScript engine embedded in the browser
  • Comments can also be used to prevent the execution of certain logic when testing code
  • Comments can be put into any place of a script, they don’t affect its program execution because the engine simply ignores them
  • Comments help to make code easy to understand and it avoids the unnecessary code

Types of JavaScript Comments

There are two types of comments in JavaScript:

  1. Single-line Comments
  2. Multi-line Comments

1. Single-line Comments

  • Single-line JavaScript comments are used for one line of comment only
  • Single-line comments starts with two forward slash: // is single comment
  • Any statements between // till the end of the line will be ignored by JavaScript (not be executed)
  • Single-line comments do not need closure/closing

Syntax & Example:

// external js file
// Write all JavaScript code here
// show alert box
alert('Welcome to JavaScript!');
var firstName = 'Dinanath'; // variable to store firstName
var lastName = 'Jayaswal'; // variable to store lastName

2. Multi-line Comments

  • Multi-line comments usually comment out a block of code
  • Multi-line comments in JavaScript can comment on bigger parts (a few lines) of code
  • Multi-line comments are more convenient as it can be used to comment single as well as multi-line comments
  • Multiline comments start with forward slash and an asterisk, /* and also end with an asterisk and a forward slash */: /* multi-line comment */
  • Multi-line comments need closing
  • Multi-line comments are more often used for formal documentation

Syntax & Example:

/* show alert box */
alert('Welcome to JavaScript!');
/* This is a multiline comment.
A code block can be commented on. */
/* var firstName = 'Dinanath'; // variable to store firstName
var lastName = 'Jayaswal'; // variable to store lastName */