Learning JavaScript Home
This web site is all about adding dynamics to our web pages using JavaScript and jQuery. You need to have an understanding of how HTML and CSS work to get the most benefit from these tutorials. Visit the HTML Doctor web site for in-depth tutorials on the HTML and CSS disciplines as well as a comprehensive reference section.
What is JavaScript?
JavaScript is an object oriented, event driven scripting language that works on multiple platforms and allows us to add dynamics to our web pages. Whereas HTML is all about the structure and CSS the presentation, JavaScript allows us to change the behaviour of elements. Unlike server-side languages, such as PHP, which have to communicate with a web server before actioning events, JavaScript responds immediately in client side mode, leading to much faster response times for users.
In the following tutorials we will start with the basics and gradually introduce more advanced topics as we move through the lessons. We will ensure that we keep the HTML (structure), CSS (presentation) and JavaScript (behaviour) separated from each other to conform to best practice.
JavaScript Basics
In these basic lessons we start by writing a simple 'Hello World' program in JavaScript. Following on from our simplistic 'Hello World' program we look at JavaScript Syntax and the anatomy of the 1.5 version of the language.
We then examine the various ways we can insert JavaScript into our HTML. After this we look at basic maths functions creating variables using the var statement.
After this we take our first look at some of Javascripts predefined objects by looking at the Object and String
objects and some of the methods associated with them. We finish the basics section by examining booleans and the Boolean object.
JavaScript Intermediate
We start the intermediate section by looking at arrays and the Array object and some of the methods. We continue our look at some of JavasScripts predefined objects by
examining the Date object and some of the data and time methods available for use with this object. After this we take a first look at conditional statements with the
if....else construct, before looking at the loop statements JavaScript offers us. We look at some more maths functions, compact our code by using object literals and
functions, before finishing the intermediate section with a look at regular expressions.
JavaScript Advanced
In these advanced lessons we start by taking at look at some more conditional statements and then see how to utilize JavaScripts error handling. We then take a final look at maths by exploring the
Number and Math global objects. After this we finish our three part lessons on object creation
before looking at the domain object model and how to bring our pages to life with events. We then tackle the tricky subjects of function recursion and closures before finishing our study of Javascript by looking at the
globals and functions not covered in previous lessons.
JavaScript Reference
All the global objects, constructors, properties, variables and pre-defined functions, as well as statements and operators available in JavaScript. This comprehensive reference section gives usage for each entity along with methods and properties where applicable.
What is jQuery?
Originally developed and coded by John Resig and worked on by a dedicated team of jQuery evangelists ever since, jQuery is a fast and compact JavaScript library that allows simplified usage of DOM traversal and modification, event handling and AJAX as well as giving us more selectors to work with and some nice effects and animations. With jQuery we can write concise powerful code which would take many lines of JavaScript code to achieve the same results. jQuery also positively encourages separation of concerns so there is no adulteration of the mark-up when using this powerful library. In these tutorials we will be using jQuery major release version 3.5.
This side of the website is all about the jQuery library and how to use it. Though knowing JavaScript isn't a prerequisite of learning jQuery it will certainly make the journey easier. If you are completely new to The JavaScript and jQuery disciplines I recommend using The JavaScript side of the site first. You need to have an understanding of HTML and CSS to get the most benefit from these tutorials.
Visit the HTML Doctor website for in-depth tutorials on the HTML and CSS disciplines as well as a comprehensive reference section.
jQuery Basics
In these basic lessons we start by looking at how to download jQuery and start using it in our pages. We will use the same simplistic 'Hello World' program we looked at on The JavaScript side of the site, to get a feel for how the jQuery library works. We then take a look at the jQuery Core and Internal methods and properties. We investigate elements selection using the selectors already available in CSS1/2/3 as well as the custom selectors provided by jQuery itself. After this we look at the jQuery DOM element methods as well as those methods that allow us to traverse the DOM in a simple and concise way. Following this we see how to work with CSS classes and their attributes before finishing with a look at the CSS properties methods available..
jQuery Intermediate
We start the intermediate lessons by examining the methods available for filtering our matched sets. We then take a look at DOM manipulation and how to do inner, outer and DOM Insertion, Around as well as modify and replace DOM elements. Creating visually stunning effects in jQuery is a breeze as we find out when we explore the jQuery methods and properties available to fade, slide and control effects. We finish the intermediate section by exploring the multitude of jQuery general, copy, data and type utilities we can use.
jQuery Advanced
We start the advanced section by looking at Events, which are used to bring our pages to life. jQuery cuts through the browsers differences and makes event usage simple and elegant as we will see when we investigate loading, browser, keyboard, mouse and form events. We continue our investigation of events by looking at the Event Handler Attachments available. We then look at three powerful objects that jQuery provides for us, the Events object, the Callbacks object and the Deferred object. Following on from this we take an in-depth look at ajax starting with the jQuery low-level interface and ajax shorthand methods. We then examine Ajax Helper Functions before concluding our ajax studies and the lessons for this side of the site with a look at ajax global event handlers.
jQuery Reference
A fully linked reference covering the jQuery 3.5 major release giving syntax and usage for every method, property and object as well as all signatures within each method. The reference section can either be perused by looking through the alphabetical list or by clicking on one of the tabs on the reference page. The tabs cover every part of the jQuery library split into logical modules for easy retrieval of relevant information.
Case Study
In this section of the website we utilise what we have learnt from the JavaScript and jQuery tutorials to create a case study. The case study consists of a proposal for an interactive quiz followed by lessons in which we create all the other components starting with the HTML and CSS and then adding the JavaScript and jQuery.
JavaScript & jQuery Quizzes
In this section of the site we utilise what we have learnt from the JavaScript and jQuery tutorials and test your knowledge with some interactive quizzes.