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