Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add JavaScript 24-Hour Trainer to your Wishlist.

Add to Wishlist

JavaScript 24-Hour Trainer

A total learning experience, how JavaScript works in the real world.
4.5 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
179 students enrolled
Last updated 3/2014
$10 $20 50% off
23 hours left at this price!
30-Day Money-Back Guarantee
  • 6.5 hours on-demand video
  • 4 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Add JavaScript to a web page
Create JavaScript animations
Execute code based on conditions
Repeat code with loops
Use object oriented programming with JavaScript
Access and alter styles
Dynamically create new HTML elements
Navigate the document object model
Enable drag and drop in the browser
Handle errors and debug with Firebug
View Curriculum
  • A PC running Windows, Mac OS, or Linux with at least 1 GB RAM

A new generation of web browsers has emerged that are specifically optimized for the capabilities of JavaScript. This unique video course and eBook package shows you how to use JavaScript to make web pages more dynamic and interactive so that you can create a first-rate user experience. Packed with expertly written lessons, this must-have course provides instructional demonstrations that enhance your Java Script learning experience through tutorial demos and helpful examples. Assuming little or no previous programming experience, the self-paced lessons guide you through the fundamentals of programming with the JavaScript language and gradually build upon the basics.

Wrox guides are crafted to make learning programming languages and technologies easier than you think. Written by programmers for programmers, they provide a structured, tutorial format that will guide you through all the techniques involved.

Visit and

Who is the target audience?
  • Beginner to Intermediate
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 44 Lectures Collapse All 44 Lectures 14:24:08
Introduction to JavaScript
9 Lectures 01:30:49

This lesson introduces how to add JavaScript to an HTML web page using the <script/> element and the differences between external script and inline scripts.

Preview 05:12

The core of any language is its syntax — a set of rules that dictate how certain pieces of the language fit together. Think of a spoken language and how difficult it would be to communicate with others if that language did not have a set of rules that defined how words are arranged into complete and understandable sentences. The same is applicable to programming languages. In the case of JavaScript, the browser wouldn’t know what to do with your code if it weren’t for the rules set forth by the language specifications. Syntax defines how very small pieces of code fit together in order to perform some kind of work.

This lesson focuses on the syntax of one line of code — the variable declaration:

var message = "Hello, World!";

In this lesson, you learn about variables and the syntax required to make them. In the Try It in this lesson, you learn about variables, primitive data types, and some of JavaScript’s syntax.

Variables and JavaScript Syntax

Functions in a programming language encapsulate one or more statements to perform a certain task, and you can call, or execute, them whenever you want. In JavaScript functions are exceptionally important because they have first-class status. In programming, first-class means that functions can be created on-the-fly, they can be stored in variables, and they can be passed as arguments to other functions. In other words, functions are a type of value in JavaScript, and this is a powerful feature that makes JavaScript one of the best languages to program with. This lesson teaches you to declare functions, functions as values, passing functions to other functions, and returning functions.


This lesson teaches the control structures you use in applications to have your code make decisions on conditions you set. You will learn about comparison operators, operator precedence, logical operators, logical AND, OR, and NOT, and executing code based on conditions using the if statement, the switch statement, and the ternary operator.

Making Decisions

In programming, looping means to repeat one or more lines of code while a particular condition is true. This functionality and this lesson introduces some loops. You learn the for Loop, while Loop, and do-while Loop.


Scope is important to understand scope because it determines what variables a function can see and access. This lesson works with global scope, functional scope, no block-level scopes, variable delarations, and identifier lookup.


In programming, objects are things that can have properties, or special variables, that contain data about them. They also have methods, which are similar to functions, which perform some type of action — usually on the data stored in properties. Object-oriented programming is a type of programming intended to mimic the real world by using objects to organize and work with data that is typically complex. In the Try It in this lesson, you learn how to use objects and some of JavaScript’s built-in object types.

Objects and Built-In Types

The capability to build your own objects and data types other than the built-in objects provided by the language is an important feature of JavaScript and any object-oriented language that makes it possible to write flexible and maintainable applications. At the heart of JavaScript’s object-oriented design is the Object data type. It’s the basis of all objects and reference types in JavaScript, and you’ll look at how to use it in this lesson.

Custom Objects

Prototypes and Inheritance (the Function Object)
Programming the Browser
26 Lectures 04:13:10

The web browser is a JavaScript developer’s platform and one of the web browser's two main set of objects and data types that allow a developer to interact with it is the Browser Object Model (BOM). The BOM enables you to determine what web browser a user is currently using, to open and resize windows, and to navigate to a different page or website. This lesson introduces you to the main object in the BOM: the window object. This object represents the browser window that contains the HTML page, and it allows you to manipulate many aspects of the browser window. Its most important purpose is to serve as JavaScript’s global scope.

Preview 07:12

This lesson covers opening new browser windows, manipulating windows, coding between windows, and security. In the Try It in this lesson, you learn about creating new windows and how to interact with them by changing their position and size, and you learn about interacting with the objects and JavaScript code (if security permits).

Scripting Windows

The <frameset/> element, however, allows web developers to divide a browser window into two or more smaller window panes. Each of these panes is itself a browser window, and as such has a full-fledged window object. Over the course of this lesson you’ll see many similarities between cross-frame scripting and cross-window scripting. In the Try It in this lesson, you learn how to script frames. You learn how the browser automatically creates a variable to allow access to a frame. You also learn about the parent and top objects that allow you to navigate the window object hierarchy created by framesets.

Scripting Frames

This lesson teach you what the Document Object Model (DOM) is, how to navigate the DOM with JavaScript, and how to select element nodes.

The Document Object Model

The DOM allows you to create new HTML elements and add them to the page on-the-fly. You can do this in one of two ways that you learn in this lesson: with creation methods provided by the DOM standard, and with the innerHTML property.

Adding HTML with JavaScript

In this lesson, you learn how you can leverage the power of the DOM and CSS to change the appearance elements in a web page. You can modify an element’s style in two ways: 1. Change individual CSS properties using the style property. 2. Change the value of the element’s class attribute.

Modifying Element Style

Lesson 16 is a short reading assignment with no accompanying video or Try It. In lesson 16, you learn about Events including mouse events, keyboard events, and events that happen from within an HTML document.

Introduction to Events
6 pages

This lessons shows how to use HTML attributes to handle events. This approach can be very useful when you need to handle an event quickly.

Assigning Event Handlers with HTML Attributes

Early DOM event handlers are so popular because they are supported by all browsers (something you’ll appreciate in coming lessons), and you can use them in JavaScript code, effectively decoupling JavaScript from HTML. In this lesson and the Try It, you learn how to use early DOM event handlers.

Using Early DOM Event Handlers

Using Standard DOM and IE Event Handlers

Writing Cross-Browser Event Handlers

The Standard Event Object

Internet Explorer’s Event Object

Writing Cross-Browser Event Code

In this lesson you learn to get the mouse pointer's location, move an element on the page, and use events to facilitate drag-and-drop. You then apply this information by writing a drag-and-drop script in the Try It.

Preview 16:35

To create animation on a web page you modify an element (the character) bit-by-bit (or frame by frame) over a certain period using timers. In this lesson you’ll learn about two methods that are used for timing. Then you’ll use the timers to create an animation.

Timers and Animating Elements

Forms are an important part of any web application that requires input from the user. With JavaScript, you can validate some form fields before any information is sent to the server — providing a good experience for the user. In this first lesson on forms, you look at some basics of scripting forms, common properties, and methods with JavaScript.

Forms — A Primer

This lesson teaches scripting the most common form control — the button.

Scripting Buttons

Several text elements are the best way to have users input data into your web application. This lesson looks at scripting the textbox, password textbox, hidden textbox, and multiple textbox.

Scripting Text Elements

In this lesson you will see how to use the <select/> element DOM to add and remove options from <select/> elements on a page.

Scripting Selection Boxes

Checkboxes and radio buttons have something in common: Their DOM objects share the same properties, methods, and events. But scripting them can be a little different due to how they are represented in the DOM. This lesson teaches you how to write JavaScript against these controls, starting with the checkbox.

Scripting Checkboxes and Radio Buttons

Ajax is the use of JavaScript to send and receive data using HTTP without reloading the page. In 2005 this was a revolutionary idea but today you see it widely used in common applications such as the search term suggestions you see as you type a Google search or the dynamic loading of map images in Google Maps. The video portion of this lesson walks you through installation of a web server which is an important requirement to implement Ajax.

An Introduction to Ajax

The most popular way to add Ajax functionality to an application is by using the XMLHttpRequest (XHR) object. Despite its name, you can retrieve more than XML with XHR. In fact, it’s more commonly used to retrieve plain text. This lesson shows how to create and use XHR objects, determine the success of a request, and JavaScript security restrictions on XHR.

Using XMLHttpRequest Objects

There are two types of requests you can make with XMLHttpRequest (XHR) objects: GET and POST. The majority of requests users make on the Internet are GET requests. Similarly, the majority of requests you’ll make with XHR will be GET requests. This lesson covers making GET requests and explains the asynchronous mode and how your programming approach with it will differ.

Making Ajax Requests Using GET

POST requests are the exact opposite of GET requests: They are used to submit data to a web application so the application can do something with that data. The request’s data is sent in the request’s body, unlike with GET requests, in which data can be sent in the URL’s query string. Despite these differences, making POST requests with XMLHttpRequest (XHR) objects is strikingly similar to making GET requests. There are, of course, some differences, and you’ll learn about them in this lesson.

Making AJAX Requests Using POST

This lesson introduces you to an interchange format suitable for representing more complex data than the previous 2 lessons. It is today’s standard in Ajax communication: JavaScript Object Notation (JSON). You'll learn to convert to and from JSON and in the Try It in this lesson, you learn how to leverage JSON to send, receive, and work with complex data in JavaScript.

Handling Errors, Debugging, and Best Practices
9 Lectures 50:09

There are some common mistakes that all developers make — even professionals. Mistakes are inevitable, but you can minimize the number of common ones you make by watching out for them as you code. The majority of mistakes covered in this lesson are syntax mistakes. Most syntax mistakes are reported by the browser, but some, as you’ll see, don’t cause the browser to throw any errors. The mistakes explained in this lesson are undefined variables, incorrect cases, closing braces and parenthesis, and operator misuse.

Preview 07:15

Errors in your application can occur even if you follow JavaScript’s syntax rules. These are called runtime errors because they occur while the program is running. This lesson shows how to handle runtime errors first by preventing errors, then the try...catch statement, and intentionally throwing an exception.

Handling Errors

Lesson 38 is a short reading assignment with no accompanying video. With a debugger, you can pause the code execution of your script, and with a process known as stepping, you can execute the lines one at a time to find bugs in your code. Debugging is universally necessary across all browsers and languages. The most popular JavaScript debugger is a Firefox add-on called Firebug. Even if you don’t use Firefox as your browser, you, like many other developers, may decide to install it just so you can use Firebug. This lesson helps you get familiar with Firebug, shows how to set breakpoints, step through code, and and use the console to get information and change values as you need to..

Debugging with Firebug

Lesson 39 is a short reading assignment with no accompanying video or Try It. You learn about how to use whitespace to make code readable, variable declarations, avoiding global scope, and using literals.

Coding Guidelines
4 pages

Web applications are naturally separated into different layers. The HTML layer is responsible for getting data to the user, the CSS layer is responsible for the visual representation of that data, and JavaScript adds behavior to the page. Despite this separation, developers have a tendency to tie HTML, CSS, and JavaScript together by using inline style sheets or scripts, as well as by using the style and event handler attributes (such as onclick). Decoupling your JavaScript and HTML is one of the tenants of progressive enhancement, a Web development philosophy that champions accessibility. The idea behind progressive enhancement is to create a bare-bones document that works in all browsers (no CSS or JavaScript whatsoever). Then the developer adds enhancements to the page via external style sheets or JavaScript. Progressive enhancement enables users with the latest browsers to experience the full-feature page; whereas, users with JavaScript-disabled browsers can still use the page’s basic functionality without having to download the unnecessary JavaScript files. In this lesson, you learn how to separate your JavaScript from HTML to avoid errors and make your application easier to maintain and debug.

Separating JavaScript and HTML

Lesson 41 is a short reading assignment with no accompanying video. It introduces the benefits of separating your JavaScript and CSS code.

Separating JavaScript and CSS
2 pages

A naming conflict occurs when you use an identifier that is used in another script on the same level of scope. If multiple objects use the same identifier, one will overwrite the other and likely cause the page to break. This lesson shows you how to avoid naming conflicts by avoiding global scope.

Avoiding Global Scope

Once your code is working and your application is running, you can improve performance by refactoring code, optimizing DOM code, and using event delegation, all discussed in this lesson.

Optimizing Your Code

The JavaScript 24-Hour Trainer begins by introducing the reader to fundamentals of programming with the JavaScript language. The book will then build on those basic concepts and applies them creating web applications and programming the browser. Finally the book will conclude by teaching the reader how to avoid common mistakes, debug code, and use best programming practices. The companion videos in this course will enhance the lessons and subject matter with thoroughly explained examples and demos.

Some primary topics covered are:

  • A foundation on the language basis: variables, types of data, functions, and control structures
  • Object-oriented programming with JavaScript, including brief description of built-in reference types, as well as writing custom types.
  • Manipulating HTML pages with JavaScript: forms, windows, and the Document Object Model (DOM)
  • Ajax and JSON
  • Avoiding, finding, and handling errors
  • JavaScript best practices
458 pages
About the Instructor
4.3 Average rating
847 Reviews
27,408 Students
35 Courses

Founded in 1807, John Wiley & Sons, Inc. has been a valued source of information and understanding for more than 200 years, helping people around the world meet their needs and fulfill their aspirations. Wiley and its acquired companies have published the works of more than 450 Nobel laureates in all categories: Literature, Economics, Physiology or Medicine, Physics, Chemistry, and Peace.

Wiley is a global provider of content and content-enabled workflow solutions in areas of scientific, technical, medical, and scholarly research; professional development; and education. Our core businesses produce scientific, technical, medical, and scholarly journals, reference works, books, database services, and advertising; professional books, subscription products, certification and training services and online applications; and education content and services including integrated online teaching and learning resources for undergraduate and graduate students and lifelong learners. Wiley's global headquarters are located in Hoboken, New Jersey, with operations in the U.S., Europe, Asia, Canada, and Australia. The Company is listed on the New York Stock Exchange under the symbols JWa and JWb.

Report Abuse