How JavaScript aligns with other Web Technologies:

HTML is for content
CSS is for presentation
JavaScript is for interactivity

validate user input in an HTML form before sending the data to a server;
build forms that respond to user input without accessing a server;
change the appearance of HTML documents and write data to browser Windows;
open and close new browser windows or frames;
build small but complete client-side programs.

Things you can do with JavaScript — Some examples:

Validate User Input

Checking the values in input fields
Checking a Password
Checking numeric values

2. Forms that respond to user input without accessing a server

Forms that load a URL
Forms that calculate

3. Write information into HTML documents using Javascript Statements

Programmed output via document.write();
Adjust document colours
Change/rewrite images in a document

4. Open and Close Browser windows and Frames

Create new Browser windows with documents or programmed output

5. Build small but complete client-side programs

Calculators
Games

6. Control Robots

7. Control drones (IOT)

The <script> </script> tag

<html>
<head>
  <title>The Script Tag 1</title>
  <script>
  document.write("<p>Script tags can be placed in the head of an HTML document.</p>");
  </script>
</head>
<body>
  <h1>The Script Tag: Example 1</h1>
  <p>
     Script tags can also be placed in the body of an HTML document.
  </p>
  <script>
document.write("<p>Script tags will be ignored by other browsers that do not understand them.</p>");
  </script>
</body>
</html>

JavaScript syntax basics

Comments

Javascript supports single line and multi-line comments:

// Single and multi line comments.
// this is an example of a single line comment.
 
/*
 * this is an example
 * of a
 * multi line
 * comment.
 */

Whitespace

Whitespace is also ignored in JavaScript.

var hello = "Hello";
 
var world     =      "World!";

Here’s an example with whitespace added for readability:

var foo = function() {
  for ( var i = 0; i < 10; i++ ) {
    alert( i );
  }
};
foo();

And the same code without whitespace. It much harder to read!

var foo=function() {for(var i=0;i<10;i++){alert(i);}};foo();

Reserved Words

There are a handful of reserved words that can’t be used when declaring user-defined variables and functions. Some of these reserved words are currently implemented, some are saved for future use, and others are reserved for historical reasons.

A list of words and in-depth explanations for each can be found on the Mozilla Developer Network JavaScript Reference site.

Identifiers

Identifiers are used to give variables and functions a unique name so they can subsequently be referred to by that name. The name of an identifier must follow a few rules:

Cannot be a reserved word.
Can only be composed of letters, numbers, dollar signs, and underscores.
The first character cannot be a number.

It’s best practice to name identifiers in a way that will make sense to you and other developers later on.

// Valid identifier names.
var myAwesomeVariable = "a";
var myAwesomeVariable2 = "b";
var my_awesome_variable = "c";
var $my_AwesomeVariable = "d";
var _my_awesome_variable_$ = "e";

Types

Types in JavaScript fall into two categories: primitives or objects. Primitive types include:

String
Number
Boolean
Null
Undefined

String

Strings are text wrapped in single or double quotation marks. It is best practice to consistently use one or the other. There may be times when the string contains quotation marks that collide with the ones used to create the string. In this case, either escape the characters using a \ backslash or use different quotes around the string.

Strings can be created with double or single quotes.

var a = "I am a string";
var b = 'So am I!';
 
alert( a ); 
alert( b );

Sometimes a string may contain quotation marks.

var statement1 = 'He said "JavaScript is awesome!"';
var statement2 = "He said \"JavaScript is awesome!\"";
var welcome = "Hello World";

After the assignment of the literal string "Hello World", the welcome is a string object.

result = welcome.length; //result is the number 11
result = welcome.toUpperCase(); //result is HELLO WORLD
result = welcome.toLowerCase(); //result is hello world
result = welcome.charAt( 0 ); //result is the character H
result = welcome.substring( 0, 5 ); //result is the string Hello
result = welcome.indexOf( "World", 0 ); //return is the number 6. 
//If the string is not found indexOf returns -1

Number

Number types are any positive or negative numeric value. There is no distinction between integer and floating point values.

var num1 = 100;
var num2 = 100.10;
var num3 = 0.10;

JavaScript is a loosely typed language. Programmers used to strongly typed languages such as C++ or Java find this difficult to get used to. For example in C/C++/Java the following statements, including the integer division,

int result;
result = 5/10;

the result would equal 0. In JavaScipt there are no explicit integers or floating point numbers. “Unofficially,” you will get one or the other back.

result = 5/10;

the result would be assigned 0.5

JavaScript Precision

Integers are considered accurate up to 15 digits.

The maximum number of decimals is 17, but floating point arithmetic is not always 100% accurate:

var result;
result = 0.2 + 0.1; // result will be 0.30000000000000004

The solution to this problem depends on the type of problem you are dealing with. You can round the result, truncate it or work in a smaller unit.

Numbers in JavaScript are “double-precision 64-bit format IEEE 754 values”.

0.1 + 0.2 == 0.3; //false

You can use parseInt to convert Strings to “Integers”

parseInt("20", 10); //20

A special value, NaN (“Not a Number”) is returned if the string is non-numeric.

parseInt("ABC", 10) //NaN

Type Coercion

JavaScript uses type coercion whenever it needs to perform an operation on two operands that need to be the same type and are not.

8 == "8" // true

Relying on type coercion is not a good idea.

null == udefined   // true
false == undefined // false
false == "false"   // false
'' == '0'          // false
0 == ''            // true
0 == '0'           // true

To avoid type coercion, use the === and !== operators.

8 === "8"           // falsenull === udefined   // false
false === undefined // false
false === "false"   // false
'' === '0'          // false
0 === ''            // false
0 === '0'           // false

Boolean

Boolean types are either true or false.

var okay = true;
var fail = false;

Null and Undefined

Null and undefined are special types in JavaScript. Null types are a value that represent the absence of a value, similar to many other programming languages. Undefined types represent a state in which no value has been assigned at all. This type is created in two ways: by using the undefined keyword or by not defining a value at all.

// Achieve a null value
var foo = null;
// Two ways to achieve an undefined value. 
var bar1 = undefined;
var bar2;

Objects

Everything else is in JavaScript is considered an Object. While there are numerous built-in objects, here we will cover:

Object
Array
Function

Conditional Statements

In JavaScript we have the following conditional statements:

if statement — use this statement to execute some code only if a specified condition is true
if…else statement — use this statement to execute some code if the condition is true and another code if the condition is false
if…else if….else statement — use this statement to select one of many blocks of code to be executed
switch statement — use this statement to select one of many blocks of code to be executed

If Statement

Use the if statement to execute some code only if a specified condition is true.

Syntax

if (condition) {
  // code to be executed if condition is true
}

Example

if ( age < 16 ) {
  entry = "free";
}

If…else Statement

Use the if….else statement to execute some code if a condition is true and another code if the condition is not true.

Syntax

if ( condition ) {
  // code to be executed if condition is true
} else {
  // code to be executed if condition is not true
}

Example

if ( age < 16 ) {
  entry = "free";
} else {
  entry = "£10";
}

If…else if….else Statement

Use the if….else if…else statement to select one of several blocks of code to be executed.

Syntax

if ( condition1 ) {
  // code to be executed if condition1 is true
} else if ( condition2 ) {
  // code to be executed if condition2 is true
} else {
  // code to be executed if neither condition1 nor condition2 is true
}

Example

if ( age < 12 ) {
  entry = "free";
} else if ( age < 18 ) {
  entry = "£10";
} else {
  entry = "£20";
}

Question

Are these equivalent and why?

if ( age < 12 ) {
  entry = "free";
} else if ( age < 18 ) {
  entry = "£10";
} else {
  entry = "£20";
}
if ( age < 18 ) {
  entry = "£10" ;
} else if ( age < 12 ) {
  entry = "free";
} else {
  entry = "£20";
}

The JavaScript Switch Statement

Syntax

switch( n ) {
case 1:
  // execute code block 1
  break;
case 2:
  // execute code block 2
  break;
default:
  // code to be executed if n is different from case 1 and 2
}

Example

var day = new Date().getDay();
switch ( day ) {
  case 0:
    message = "Today is Sunday";
    break;
  case 1:
    message = "Today is Monday";
    break;
  case 2:
    message = "Today is Tuesday";
    break;
  case 3:
    message = "Today is Wednesday";
    break;
  case 4:
    message = "Today is Thursday";
    break;
  case 5:
    message = "Today is Friday";
    break;
  case 6:
    message = "Today is Saturday";
    break;
}
document.write( message );

Example with default

var day = new Date().getDay();
switch ( day )
{
  case 0:
    message = "Today is Sunday";
    break;
  case 6:
    message = "Today is Saturday";
    break;
  default:
    message = "Looking forward to the weekend";
}
document.write( message );

Comparison Operators

Comparison operators are used in logical statements to determine equality or difference between variables or values.

Logical Operators

Logical operators are used to determining the logic between variables or values

JavaScript Loops

In JavaScript we have the following loops:

for — loops through a block of code a number of times
for/in — loops through the properties of an object
while — loops through a block of code while a specified condition is true
do/while — also loops through a block of code while a specified condition is true

The For Loop

The for loop is often the tool you will use when you want to create a loop.

Syntax

for (initial statement; boolean expression; statement) {
  // the code block to be executed
}

initial statement This statment is executed before looping begins.
boolean expression This expression is evaluated to true or false. If true the loop is entered.
Statement This statement is executed at the end of each loop.

Example

for ( counter=0; counter < 10; counter++ ) {
   document.write( "<p>" );
   document.write( "Counter is: " + counter );
   document.write( "<p>" );
}

The While Loop

The for loop is often the tool you will use when you want to create a loop.

Syntax

while ( boolean expression ) {
   // the code block to be executed
}

boolean expression This expression is evaluated to true or false. If true the loop is entered.
Statement(s) Code block to be executed

Example

counter = 0;
while( counter < 10 ) {
   document.write( "<p>" );
   document.write( "Counter is: " + counter );
   document.write( "</p>" );
   counter++;
}

The Break Statement

The break statement breaks the loop and continues executing the code after the loop (if any):

Example

counter = 0;
while ( true ) {    //potentially infinite loop
   if ( counter > 5 ) break;
   counter++;
}

The Continue Statement

The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.

Example

counter = 0;
while ( counter < 6 ) {
   counter++;
   if ( counter % 2 == 0 ) continue;
   document.write( "Counter is now: " + counter );
}

JavaScript Dialog Boxes

alert();

Show a dialogue box with a message

Example

alert( "Your Message Goes Here!" );

confirm();

Show a dialogue box and return a boolean

Example

var answer = confirm( "Are you sure you want to close...." );
if ( answer == true ) {
  alert( "You said OK!" );
} else {
  alert( "You said Cancel!" );
}

prompt();

Show a dialogue box and return a string

Example

var answer = prompt( "Enter something here:", "anything will do" );
alert( "You said " + answer );

Line breaks in dialog boxes

To display line breaks inside a popup box, use a backslash followed by the character n.

Example

alert( "Hello,\nHow are you?" );

@Credits: Medium - The Geekiest One in Zero Equals False

A rough introduction to JavaScript (JS)

How JavaScript aligns with other Web Technologies:

Things you can do with JavaScript — Some examples:

The <script> </script> tag

JavaScript syntax basics

Comments

Whitespace

Reserved Words

Identifiers

Types

String

Number

JavaScript Precision

Type Coercion

Boolean

Null and Undefined

Objects

Conditional Statements

If Statement

Syntax

Example

If…else Statement

Syntax

Example

If…else if….else Statement

Syntax

Example

Question

The JavaScript Switch Statement

Syntax

Example

Example with default

Comparison Operators

Logical Operators

JavaScript Loops

The For Loop

Syntax

Example

The While Loop

Syntax

Example

The Break Statement

Example

The Continue Statement

Example

JavaScript Dialog Boxes

alert();

Example

confirm();

Example

prompt();

Example

Line breaks in dialog boxes

Example

Most Popular Articles

Products

Security & Tools

Company

Generate Password