JavaScrip Programming

JavaScript is a powerful and flexible programming language. It can execute on a web browser that allows us to make interactive webpages such as popup menus, animations, form validation, etc.

JavaScript has evolved a lot in the past decade. Our JavaScript tutorials will help you understand the core concepts of modern JavaScript, one step at a time.

JavaScript is a popular programming language that has a wide range of applications.

JavaScript was previously used mainly for making webpages interactive such as form validation, animation, etc. Nowadays, JavaScript is also used in many other areas such as server-side development, mobile app development and so on.

Because of its wide range of applications, you can run JavaScript in several ways:

  • Using console tab of web browsers
  • Using Node.js
  • By creating web pages

Course Outline

Getting started

The need for scripting

Scripting overview

Where do we use scripting?

Scripting in Web browsers

JavaScript

JScript

ECMAScript

Java

What can JavaScript do?

What can JavaScript not do?

Browser wars and JavaScript compatibility

Scripting beyond this course

JavaScript-based languages

Web-based languages

Hello world

Writing Hello World to the screen

Another method to write to the screen

Adding JavaScript to an HTML page

Using JavaScript in the head tag

Using JavaScript with an HTML element

Linking to an external script

JavaScript basics

Understanding JavaScript

Writing JavaScript

Debugging JavaScript

Adding comments

Understanding JavaScript characteristics

Case-sensitivity

Reserved words

Variables

Variable types

Quotation marks

Escaping characters

JavaScript statements

JavaScript objects and properties

JavaScript methods

JavaScript functions

JavaScript operators

Mathematical operators

Assignment operators

Comparison operators

Logical operators

Bitwise and special operators

JavaScript expressions

Review

Interacting with the user

Concepts: variables and conditionals

JavaScript variables

Local versus global variables

If /else statements

Dialog boxes

Asking for confirmation

Prompting

Using variables to store information

Adding variables to strings

Alerts

Debugging with alerts

JavaScript events

Calling JavaScript from HTML: Events

Concepts: parameters and the this keyword

Using parameters in a function

The this keyword

Page load events

Event: onload

Event: onunload

Form events

Events: onfocus, onblur

Event: onchange

Events: onsubmit, onreset

Mouse events

Event: onclick

Events: onmouseover, onmouseout

Events: onmousedown, onmouseup

Combining events and CSS properties

Common events and event handlers

Working with forms

Quick review of forms

Concepts: return, parseFloat, Arrays, and isNaN

Return command

Using parseFloat and parseInt

isNaN function

Arrays

Referring to forms in JavaScript

Changing the value of a field in a form

Creating drop-down links

Using checkboxes in forms

Using radio buttons

Reading values entered in a form

Doing form calculations

Form input validation

Why validate with JavaScript?

Checking user input in a form

Using the return command in validation

Form validation – checking for a minimum number

Checking for an empty field using onblur

Validating an email address

Working with objects

Object hierarchy

Assigning properties to an object

Using methods to manipulate objects

Creating a new custom object

Concepts: eval and length

Length property

eval function

Window object

Opening a pop-up window

Enlarging an image

Creating a simple timer

Document object

String object

Joining strings – concatenation

Fetching characters

Finding and fetching pieces

Splitting a string

Arrays

Setting and getting values

Joining arrays

Date object

Today

Getters and setters

Message with today’s date

Local time, UTC

Math object

Image object

Image slideshow

Changing HTML with JavaScript

Concepts: conditions and loops

If/else statement

While loop

For loops

Do/while loop

Changing properties

Changing image properties

Writing HTML dynamically

Doing mathematical calculations

Doing conversions

Creating a simple order form

Creating new Web pages using JavaScript

Using rollovers

Putting events and properties together: image rollovers

Using image rollovers with links

More scenarios

Using the DOM

More about the DOM tree

Understanding the DOM

Accessing the DOM tree

Using the DOM in Web pages

Using styles with DOM

Finding elements

Changing attributes

Creating elements

Setting a time delay

Hiding and displaying text

Cookies

Cookie property

Remembering values between events

Remembering values with a global variable

Remembering values with a DOM property

JavaScript “recipes”

Identifying browsers

Using links to execute JavaScript

Opening a popup in the center of the page

Viewing a directory

Detecting screen resolution

Checking and unchecking checkboxes

Window status bar

Counting the characters in a form field