JavaScript 101

About JavaScript 101

JavaScript is a language designed to add scripting capabilities to a Web page. While HTML is static (it is designed to display fixed data on a page, and, to some extent to collect data from the user), JavaScript can process or even change the contents of the page.

Some of the things we can do with JavaScript include:

  • Manipulating Images
  • Using Cookies
  • Form Validation and Processing
  • Calculations
  • Changing the Content and Styling of Web Pages
  • Games

JavaScript 101 is an introduction to scripting a Web Page with JavaScript.

The course is in two sections. The introductory modules introduce the main JavaScript concepts, such as how to write scripts and programming fundamentals required in JavaScript. This is followed by a number of simple Projects which put these skills to use, and introduce useful techniques in writing scripts.

At all times, the student is encouraged to follow good design and writing principles, and the examples and exercises are clear and written in a way to facilitate further development.

Throughout the book are concept sections which explain key JavaScript concepts, and can be used later as a reference.

Course Outline

Download Course Outline

  • Modules
    • Introduction
      • A Short History of JavaScript
      • What is JavaScript?
      • What Can We Do with JavaScript?
    • Writing JavaScript
      • Writing JavaScript
      • When JavaScript Runs
      • Readability
      • JavaScript and XHTML
      • Our Template Page
    • Getting Your Hands Dirty
      • The JavaScript Sampler
      • Statements
      • Expressions
      • Variables & Assignment Statements
      • The Naming of Variables
      • Declaring Variables
      • Functions
      • Comments
      • Data Types
      • Numbers
      • Strings
      • boolean
      • Using Data Types
      • Objects
      • Undefined or Not Defined?
    • Numbers & Arithmetic
      • Basic Operations
      • Other Arithmetic Operators
    • String Operations
      • String Concatenation
      • String Properties
      • Changing Data Types
      • parseInt() parseFloat()
    • Boolean Calculations
  • Projects
    • Guessing Game
      • Outline
      • Game Function
      • Game Loop
      • Testing the Value
      • A Random Number function
      • Adding a Score
      • Early Exit
      • Testing for Numbers
      • Creating an Ordinal Function
      • Getting the last digits
      • Using switch to differentiate on the last digit
      • Using the Ord Function
      • The JavaScript Library
    • Validating Forms
      • Form Outline
      • Setting up the Form
      • Selecting the first Field
      • Confirming Form Reset
      • Conditional Form Submission
      • Error Array
      • Reporting the Error
      • Allowing or Cancelling Submit
      • Setting up the Error Array
      • The Validation Script
      • Validation: Required Fields
      • Using Regular Expressions
      • Prototype
      • Fixing Text Fields
      • Empty Strings
      • Validation: Specific Types
      • Email
      • Password Matching
      • Post Codes
      • Checking a Radio Button
      • Testing the Radio Buttons
      • Numeric Values
      • Disappearing Text Boxes …
      • Checking A Select Menu
      • Minimum Password Length
    • Slide Show
      • The Basic Outline
      • Outline of the JavaScript
      • Initialising and Global Variables
      • Locating and Assigning the slides img element
      • The slides Array
      • The Next Slide
      • Incrementing and Rolling over the Slide Number
      • Getting the show going
      • Prefetching the Images
      • Stopping the Show
    • Form Calculators
      • A Mortgage Calculator
      • Preparing the Form
      • Initialisation & Setup
      • The Calculate Function
    • Jump Menus
    • Cascading Menus
      • HTML Menus
      • Cascading Menus
      • Preparing the Script
      • Populating the Groups Menu
      • Adding Option Elements
      • Converting to a List
      • Populating the items Menu
      • Clearing the Items Menu
      • Populating the Menu
      • Disabling Menus
      • Simplifying the code with an addOption Function
    • Popup Dialogue Boxes
      • JavaScript Dialogue Boxes
      • Appearing and Disappearing divs
      • The popup div
      • Starting Off
      • Finding the popup element
      • Centring the Popup
      • Enabling the Buttons
      • Form Actions
      • Showing & Hiding the Popup
      • Creating the Background
      • Optional: Creating the Background in JavaScript
      • Optional: Adding a Title Bar
    • Collapsible Lists
      • HTML Lists
      • Collapsible Lists
      • Setting Up
      • Finding Nested Lists
      • Changing HTML attributes
      • Changing Classes
      • Preventing Multiple Triggering
  • Concepts
    • Functions
    • Variables
    • Comments
    • Repeating with a while Loop
    • User Input – prompt
    • Testing the result with if
    • Functions
    • Increment Operator
    • Concatenation
    • Alternatives to true and false
    • Not a Number
    • Converting a number to a string
    • substr()
    • switch()
    • Event Handlers
    • Form Fields
    • The focus() Method
    • confirm()
    • Arrays
    • Array Literals
    • Joining Array Elements
    • Empty Arrays
    • Reading Form Fields
    • replace()
    • Regular Expressions
    • prototype
    • More on Regular Expressions
    • match()
    • Regular Expressions: Special Characters
    • getElementsByName
    • for loops
    • Identity Operator (===)
    • JavaScript Numbers
    • Changing CSS Styles
    • The Conditional Operator
    • Boolean Binary Operators
    • window.onload()
    • Arrays
    • The Modulus (%) Operator
    • Prefetching with the Image Object
    • setInterval()
    • null
    • JavaScript Data Objects
    • Object Literals
    • try … catch
    • JavaScript Events
    • Event Capturing and Bubbling

Prerequisites

  • HTML 101 or Equivalent
  • Other scripting experience is helpful, but not required: this course provides a complete introduction.

Course Duration

2 Days

Pricing

See Pricing

Student Resources