1. JavaScript Introduction

What is JavaScript ?
  • JavaScript is the programming language of HTML and the Web.
  • JavaScript is easy to learn.
  • JavaScript Can Change HTML Content.
  • JavaScript Can Change HTML Attribute Values.
  • JavaScript Can Change HTML Styles (CSS).
  • JavaScript Can Hide HTML Elements.
  • JavaScript Can Show HTML Elements.
  • In HTML, JavaScript code must be inserted between tags.
  • You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

2. JavaScript Where To

The <script> Tag

In HTML, JavaScript code must be inserted between <script> and </script> tags.

EXAMPLE :

RESULT:


JavaScript in <head> or <body>

You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

EXAMPLE :

RESULT:


JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

EXAMPLE :

RESULT:


External JavaScript

Scripts can also be placed in external files:

External File: myScript.js

External scripts are practical when the same code is used in many different web pages. JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:

EXAMPLE:


External JavaScript Advantages

Placing scripts in external files has some advantages:

  • It separates HTML and code
  • It makes HTML and JavaScript easier to read and maintain
  • Cached JavaScript files can speed up page loads
EXAMPLES:

3. JavaScript Output

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

  • Writing into an HTML element, using innerHTML.
  • Writing into the HTML output using document.write().
  • Writing into an alert box, using window.alert().
  • Writing into the browser console, using console.log().

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:

EXAMPLE:

RESULT:


Using document.write()

For testing purposes, it is convenient to use document.write():

EXAMPLE:

RESULT:


Tip:Using document.write() after an HTML document is loaded, will delete all existing HTML.

Tip:The document.write() method should only be used for testing.

Using window.alert()

You can use an alert box to display data:

EXAMPLE:

RESULT:


Using console.log()

For debugging purposes, you can use the console.log() method to display data.

EXAMPLE:

RESULT:


4. JavaScript Variables

JavaScript variables are containers for storing data values.


EXAMPLES :

RESULT :


JavaScript Identifiers

All JavaScript variables must be identified with unique names.

These unique names are called identifiers.

The general rules for constructing names for variables (unique identifiers) are:

  • Names can contain letters, digits, underscores, and dollar signs.
  • Names must begin with a letter
  • Names can also begin with $ and _ (but we will not use it in this tutorial)
  • Names are case sensitive (y and Y are different variables)
  • Names are case sensitive (y and Y are different variables)

TIIP: JavaScript identifiers are case-sensitive.

Declaring (Creating) JavaScript Variables

Creating a variable in JavaScript is called "declaring" a variable.

You declare a JavaScript variable with the var keyword:

EXAMPLES :

5. JavaScript Operators

Assignment operator

The assignment operator (=) assigns a value to a variable.

ASSIGNMENT :

RESULT:


Addition operator

The addition operator (+) adds numbers:

ADDING :

RESULT:


Multiplication operator

The multiplication operator (*) multiplies numbers.

MULTIPLYING :

RESULT:


JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic on numbers:

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement

JavaScript Assignment Operators

Assignment operators assign values to JavaScript variables.

Operator Example Same as
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

JavaScript String Operators

The + operator can also be used to add (concatenate) strings.

EXAMPLE:

RESULT:


The += assignment operator can also be used to add (concatenate) strings:

EXAMPLE:

RESULT:


Adding Strings and Numbers

Adding two numbers, will return the sum, but adding a number and a string will return a string:

EXAMPLE:

RESULT:


JavaScript Comparison Operators

Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= equal to
== greater than or equal to
<= less than or equal to
? ternary operator

JavaScript Logical Operators

Operator Description
&& logical and
|| logical or
! logical not

JavaScript Type Operators

Operator Description
typeof Returns the type of a variable
instanceof Returns true if an object is an instance of an object type

JavaScript Bitwise Operators

Bit operators work on 32 bits numbers.

Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.

Operator Description Example Same as Result Decimal
& AND 5 & 1 0101 & 0001 0001 1
| OR 5 | 1 0101 | 0001 0101 5
~ NOT ~5 ~0101 1010 10
^ XOR 5 ^ 1 0101 ^ 0001 0100 4
<< Zero fill left shift 5 <<1 0101 << 1 1010 10
>> Signed right shift 5 >> 1 0101 >> 1 0010 2
>>> Zero fill right shift 5 >>> 1 0101 >>> 1 0010 2

6. JavaScript Data Types

JavaScript variables can hold many data types: numbers, strings, objects and more:

JavaScript supports the following data types:-

JavaScript Types are Dynamic

JavaScript has dynamic types. This means that the same variable can be used to hold different data types:

EXAMPLE:


JavaScript Strings

A string (or a text string) is a series of characters like "John Doe".

Strings are written with quotes. You can use single or double quotes:

EXAMPLE:


JavaScript Numbers

JavaScript has only one type of numbers.

Numbers can be written with, or without decimals:

EXAMPLE:


JavaScript booleans

Booleans can only have two values: true or false.

EXAMPLE:


Booleans are often used in conditional testing.

JavaScript Arrays

JavaScript arrays are written with square brackets.

Array items are separated by commas.

The following code declares (creates) an array called cars, containing three items (car names):

EXAMPLE:


7. JavaScript Events

HTML events are "things" that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can "react" on these events.

HTML Events

An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

  • An HTML web page has finished loading
  • An HTML input field was changed
  • An HTML button was clicked

Common HTML Events

Here is a list of some common HTML events:

Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

8. JavaScript String

JavaScript strings are used for storing and manipulating text.

JavaScript Strings

A JavaScript string is zero or more characters written inside quotes.

EXAMPLE:


String Length

The length of a string is found in the built in property length:

EXAMPLE:

RESULT:


Finding a String in a String

The indexOf() method returns the index of (the position of) the first occurrence of a specified text in a string:

EXAMPLE:

RESULT:


Searching for a String in a String

The search() method searches a string for a specified value and returns the position of the match:

EXAMPLE:

RESULT:


9. JavaScript Arrays

What is an Array?

An array is a special variable, which can hold more than one value at a time.

JavaScript arrays are used to store multiple values in a single variable.

Creating an Array

Using an array literal is the easiest way to create a JavaScript Array.

Syntax:


Example:


Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it:

EXAMPLE:


Access the Elements of an Array

You access an array element by referring to the index number.

This statement accesses the value of the first element in cars:

EXAMPLE:

RESULT: