Advanced JavaScript Programming
2.0 (1 rating)
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.
43 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Advanced JavaScript Programming to your Wishlist.

Add to Wishlist

Advanced JavaScript Programming

Learn advanced JavaScript techniques and good standard coding conventions from the experts at Webucator Training.
2.0 (1 rating)
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.
43 students enrolled
Published 9/2012
English
Price: $40
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 61 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Description

In this Advanced JavaScript Training class, you will learn advanced JavaScript techniques and good standard coding conventions. You will also learn advanced form validation with Regular Expressions, to manipulate the HTML DOM and to create jump menus and cascading select menus. Finally, you will learn to manipulate CSS with JavaScript to create applications using Dynamic HTML.

Take this Advanced JavaScript Training course and become a JavaScript Pro.

</p>
Students Who Viewed This Course Also Viewed
Curriculum For This Course
87 Lectures
07:13:01
+
Class Files
1 Lecture 00:06
Before you begin the course, please take a moment to check out the link below to setup your computer and download your exercise files. http://www.webucator.com/help/wiki/index.cfm/JSC251
Class Files
00:06
+
Quick JavaScript Recap
8 Lectures 24:41
Lesson Introduction
01:10

  Primitive data types JavaScript comes with a number of data types that we can use in our variables. Let's look at them. Null Null is a data type that has only one possible value, null , which is also a reserved word in the language. We use null to represent a value that we don't know or that is mi…
Preview 02:40

Native Types In addition to primitive data types, JavaScript provides a few other data types, which are implemented as objects. Date We can store date values using Date objects. The Date object stores the date and time information internally as the number of milliseconds since January 1, 1970. There…
Preview 02:44

Functions Functions in JavaScript are more than just static blocks of code. They are Function objects that we can use just like any other data type value, e.g. we can pass functions to other functions, we can store a function in a variable, we can modify a function, etc. We will discuss functions in…
Functions
00:36

The DOM The DOM is not JavaScript It's important to understand that the DOM is a standard that is separate from JavaScript. It was created by the W3C to normalize the browser vendors' implementations of Dynamic HTML. The DOM enables programmatic access to the HTML document structure for reading or m…
The DOM
01:12

The XMLHttpRequest object Another important object that we use a lot in JavaScript these days is the XMLHttpRequest object. This is the object that powers the Ajax functionality in a lot of web pages. This object is also not part of JavaScript. It can be used from JavaScript but it isn't part of the…
The XMLHttpRequest object
01:09

JSON JSON is a lightweight format for exchanging data between the client and server. It is often used in Ajax applications because of its simplicity and because its format is based on JavaScript object literals. Take a look at this plain text page: Code Sample: QuickRecap/Demos/json.txt { "1" : { "n…
JSON
01:06

Using the XHR object with JSON
14:02
+
Advanced Techniques
17 Lectures 01:01:28
Lesson Introduction
01:48

  Optional Function Arguments When we declare a function in JavaScript, we normally include a list of the arguments the function expects. Code Sample: AdvancedTechniques/Demos/sumAll-1.html ---- C O D E O M I T T E D ---- function sumValues(val1, val2, val3) { return val1 + val2 + val3; } ---- C O D…
Optional Function Arguments
02:30

  Truthy and Falsy JavaScript, as we already know, has a boolean data type, which has only two possible values: true or false . Boolean expressions (e.g., a == b ) also evaluate to a boolean value. But that's not the entire story. When used in a boolean context (e.g, an if condition) non-boolean exp…
Truthy and Falsy
02:26


  Type Coercion Duration: 5 to 10 minutes. In this exercise, you will debug and fix a simple script. Open AdvancedTechniques/Exercises/type-coercion.html in your editor. Determine what is wrong with the code and fix it. Be sure to test your solution in the browser. Solution: AdvancedTechniques/Solut…
Type Coercion
00:53

  Default Operator The boolean operators && and || also use truthy and falsy to resolve each of the operands to a boolean value. From your previous experiences with other programming languages you may be led to believe that the result of a boolean operation is always true and false . This is not the…
Default Operator
03:37

Explaining the Default Operator
13:59

  Applying defaults to function parameters Duration: 5 to 15 minutes. Here we will revisit an earlier example and use the default operator to handle optional parameters. Open AdvancedTechniques/Exercises/sumAll-defaults.html for editing. Edit the existing sumValues() to use the default operator inst…
Applying defaults to function parameters
00:48

  Functions Passed as Arguments In JavaScript, functions are first-class objects. Functions aren't just an immutable block of code that can only be invoked. Rather, each function we declare becomes an object, with its own properties and methods, that can be passed around like any other object. Let's…
Functions Passed as Arguments
01:18

  Anonymous Functions Going back to our previous example, the functions add and multiply are only referred to once, in each call to combineAll . Furthermore, if we stick to that pattern, we will need to create a new function for each new combination behavior we desire (e.g., concatenation) just so w…
Anonymous Functions
01:18

  Nested Functions Since functions in JavaScript are just one more type of object, we can create a function inside another function. These are called nested functions or inner functions . The example below shows how to create and use a function inside another one: Code Sample: AdvancedTechniques/Dem…
Nested Functions
00:53

Function, Functions, Functions
15:43

  Variable Scope Variables in JavaScript are declared with the var keyword and are either globally or locally scoped. A variable is globally scoped if: It is declared outside of a function. It is used without being declared using the var keyword. A variable is locally scoped if it is declared within…
Variable Scope
01:03

  Observing and Capturing Events You are probably accustomed to using the HTML event handlers ("on" attributes) to capture events as in the demo below: Code Sample: AdvancedTechniques/Demos/onclick.html ---- C O D E O M I T T E D ---- Red Orange Green Blue ---- C O D E O M I T T E D ---- It's better…
Observing and Capturing Events
00:25

  The eval() Function The reason we are mentioning eval() in this lesson is to acknowledge its existence and to urge you not to use it. We will explain why, but first let's explain what it does. eval compiles and executes a string containing JavaScript code. It can be a simple expression like "1 + 2…
The 'eval()' Function
01:17

  Error Handling No matter how careful you are, it always seems that errors find their way into your code. Sometimes they are runtime errors caused by unpredicted scenarios. Sometimes the errors are just incorrect behavior of your code, popularly known as bugs . Fortunately, we have tools to deal wi…
Error Handling
04:44

  The delete Operator The delete operator is used to delete properties of objects and elements of arrays. Deleting is different from setting the value to null . The former removes the property or element (i.e, makes it undefined) while the latter keeps the property or element, but sets its value to…
The 'delete' Operator
01:01
+
Regular Expressions
10 Lectures 36:12
Lesson Introduction
01:21

  Getting Started Regular expressions are used to do sophisticated pattern matching, which can often be helpful in form validation. For example, a regular expression can be used to check whether an email address entered into a form field is syntactically correct. JavaScript supports Perl-compatible…
Getting Started
02:48

  Regular Expression Syntax A regular expression is a pattern that specifies a list of characters. In this section, we will look at how those characters are specified. Start and End ( ^ $ ) A caret ( ^ ) at the beginning of a regular expression indicates that the string being searched must start wit…
Regular Expression Syntax
03:00

Regular Expression Syntax Explained
10:23

  Backreferences Backreferences are special wildcards that refer back to a subpattern within a pattern. They can be used to make sure that two subpatterns match. The first subpattern in a pattern is referenced as 1 , the second is referenced as 2 , and so on. For example, the pattern ([bmpw])o1 matc…
Backreferences
00:47

  Form Validation with Regular Expressions Regular expressions make it easy to create powerful form validation functions. Take a look at the following example: Code Sample: RegularExpressions/Demos/Login.html Login Form Email: Password: *Password must be between 6 and 10 characters and can only cont…
Form Validation with Regular Expressions
01:43

Using Regular Expressions for Form Validation
08:08

Cleaning Up Form Entries It is sometimes nice to clean up (or sanitize) user entries immediately after they are entered. This can be done using a combination of regular expressions and the replace() method of a string object. The replace() Method Revisited Earlier in the 'Getting Started' lesson, we…
Cleaning Up Form Entries
01:08

Sanitizing User Input
05:34

  Cleaning Up Form Entries Duration: 15 to 25 minutes. Open RegularExpressions/Exercises/PhoneCleaner.html for editing. Where the comment indicates, declare a variable called cleanedPhone and assign it a cleaned-up version of the user-entered phone number. The cleaned up version should fit the follo…
Cleaning Up Form Entries
01:18
+
The HTML Document Object Model
21 Lectures 01:05:56
Lesson Introduction
01:59

  Accessing Element Nodes innerHTML Most HTML elements have an innerHTML property, which can be used to access and modify the HTML within that element. The innerHTML property wasn't included in any specification until HTML5. However, as it's extremely useful and well supported, we will use it widely…
Accessing Element Nodes
03:52

Accessing DOM Element Explained
06:06

  Accessing Elements Duration: 25 to 40 minutes. In this exercise, you will practice using the methods for accessing elements. Open HTMLDOM/Solutions/AccessingElements.html in your browser . It will look like this: Click on the links and notice how the calendar changes. For example, click on Weekday…
Accessing Elements
01:43

Attaching Events It is possible to attach all sorts of events, such as clicks, mouseovers, mouseouts, etc., to elements in the DOM. The simplest, standard cross-browser method for adding events is to assign an event handler property to a node. The syntax is shown below: node.onevent = DoSomething; H…
Attaching Events
02:17

Attaching Events Explained
06:27

Attaching Events Duration: 10 to 20 minutes. In this exercise you will use the observeEvent() function to attach multiple callback functions to the same event. Open HTMLDOM/Exercises/AttachEvent.html for editing. A screen shot of the page is shown below: In the init() function, write code so that...…
Attaching Events
01:24

Event Propagation: Capturing and Bubbling Let's look back at the useCapture argument in the observeEvent() function. Consider a user who clicks on a word in a table cell. The user's intent might be to click the word, the cell, the row, or maybe even the entire table. To illustrate, take a look at th…
Event Propagation: Capturing and Bubbling
03:45

  A Simple Soccer Game Duration: 15 to 25 minutes. In this exercise, you will finish creating a very simple game, in which the user must click a soccer ball before it moves off the field. The field looks like this: Open HTMLDOM/Exercises/soccer-game.html in your editor and study the code. Don't worr…
A Simple Soccer Game
01:45

  A Simple Soccer Game Duration: 15 to 25 minutes. In this exercise, you will finish creating a very simple game, in which the user must click a soccer ball before it moves off the field. The field looks like this: Open HTMLDOM/Exercises/soccer-game.html in your editor and study the code. Don't worr…
A Simple Soccer Game
01:45

Demo of Soccer Game
07:24

Detaching Events Our game, though extremely advanced and likely to sell well, has one small issue: clicks on the field are captured even before the Start button is pushed. Also, the Start button should be disabled when the game is active. We need to do the following three things to improve the game:…
Detaching Events
01:58

Detaching Events in Soccer Game
01:20

Accessing Attribute Nodes The element .getAttribute() Method The getAttribute() method of an element node returns the attribute value as a string or null if the attribute doesn't exist. The syntax is shown below: myNode.getAttribute("AttName"); Most HTML attributes are also directly available as pro…
Accessing Attribute Nodes
00:33

Accessing Nodes by Type, Name or Value The element .nodeType Property Every node has a nodeType property, which contains an integer corresponding to a specific type. For example, 1 is an element node, 2 is an attribute node, 3 is a text node, etc. The W3C DOM specifies a set of constants that corres…
Accessing Nodes by Type, Name or Value
01:10

Removing Nodes from the DOM Element nodes have a removeChild() method, which takes a single parameter: the child node to be removed. There is no W3C method for a node to remove itself, but the following function will do the trick: function removeElement(elem) { elem.parentNode.removeChild(elem); ele…
Removing Nodes from the DOM
01:22

Removing whitespace from the DOM
07:46

  Equalizing the Browser DOMs Duration: 15 to 25 minutes. In this exercise, you will write a function that removes all "empty" child text nodes (text nodes containing only whitespace) from an element. We will use this function to remove discrepancies across browsers caused by the different methods o…
Equalizing the Browser DOMs
01:57

  Creating New Nodes The document node has separate methods for creating element nodes and creating text nodes: createElement() and createTextNode() . These methods each create a node in memory that then has to be placed somewhere in the object hierarchy. A new node can be inserted as a child to an…
Creating New Nodes
02:24

  Identifying the Target of an Event Often you will want to take action on the target of an event. For example, in a drag-and-drop application, you click down on an element and drag it around the screen. To write that code, you need to be able to identify which element receives the click. In most mo…
Identifying the Target of an Event
00:58

  Creating and Inserting DOM Nodes Duration: 45 to 60 minutes. In this exercise, you will modify our soccer game so that it adds new balls when the user misses. Open HTMLDOM/Solutions/soccer-game-multiball.html in your browser and play for a bit. Notice that when you miss the ball, a new one appears…
Creating and Inserting DOM Nodes
07:55
+
Dynamic Forms
15 Lectures 01:29:31
Lesson Introduction
01:35

  Jump Menus A jump menu is a select menu that contains a list of websites or pages to visit. There are two main types of jump menus. One jumps to the selected page as soon as the user makes a selection. The other jumps to a page only after the user has made a selection and clicked on a "Go" button.…
Jump Menus
02:35

  Jump Menus A jump menu is a select menu that contains a list of websites or pages to visit. There are two main types of jump menus. One jumps to the selected page as soon as the user makes a selection. The other jumps to a page only after the user has made a selection and clicked on a "Go" button.…
Jump Menus
02:35

Jump Menus Explained
12:28

  Modifying the Jump Menu Duration: 15 to 25 minutes. In this exercise, you will modify the jump menu from the demo so that it jumps to the selected page as soon as the user makes a selection. Open DynamicForms/Exercises/JumpMenus.html for editing. Remove the "GO" button from the form and remove all…
Modifying the Jump Menu
01:24

  Adding Options to a Select Menu As we learned previously, select menus have an options collection. You can create a new option using Option() constructor and then add it to the options collection using the add() method of the select object. Select objects have a corresponding remove(position) meth…
Adding Options to a Select Menu
01:50

  Cascading Select Menus Cascading select menus allow you to populate one select menu based on a choice made in another select menu. For example, a menu of states might change based on the country that was selected in another menu, as shown in the following example: Code Sample: DynamicForms/Demos/c…
Cascading Select Menus
02:25

Cascading Select Menus Explained
19:26

Creating Cascading Select Menus Duration: 20 to 30 minutes. In this exercise, you will modify DynamicForms/Exercises/cascading.html, so that when a rock band is selected from the first menu, the second menu provides a list of artists in that band. The bands and artists are shown below: Beatles Paul…
Creating Cascading Select Menus
02:36

Creating a JavaScript Timer JavaScript timers can be used to create timed quizzes or events. Timers are started and stopped with the following four methods of the windows object: setTimeout(code_to_execute,wait_time_in_milliseconds) clearTimeout(timer) setInterval(code_to_execute,interval_in_millise…
Creating a JavaScript Timer
01:29

Demo of JavaScript Timers
10:56

Adding a "Pause" Button to the Timer Duration: 10 to 20 minutes. In this exercise, you will add a "Pause" button to the timer. Open DynamicForms/Exercises/Timer.html for editing. This page is the same as DynamicForms/Demos/Timer.html, except that it has a new "Pause" button that, when clicked, calls…
Adding a "Pause" Button to the Timer
01:01

A Sample Quiz Tool The following example brings together the concepts learned in this lesson to create a quiz tool. The quiz looks like this: Code Sample: DynamicForms/Demos/MathQuiz.html Category: Addition Subtraction Multiplication Division Question: --Please Choose-- Answer: Timer: seconds left G…
A Sample Quiz Tool
02:27

A Sample Quiz Tool The following example brings together the concepts learned in this lesson to create a quiz tool. The quiz looks like this: Code Sample: DynamicForms/Demos/MathQuiz.html Category: Addition Subtraction Multiplication Division Question: --Please Choose-- Answer: Timer: seconds left G…
A Sample Quiz Tool
02:27

Sample Quiz Explained
24:14
+
Dynamic HTML
15 Lectures 46:17
Lesson Introduction
02:11

  Accessing and Modifying Styles The style object is a collection of an element's styles that are either defined within that HTML element's style attribute or directly in JavaScript. Styles defined in the tag or in an external style sheet are not part of the style object. The W3C specifies a method…
Accessing and Modifying Styles
01:02

  Hiding and Showing Elements Elements can be hidden and shown by changing their visibility or display values. The visibility style can be set to visible or hidden and the display property can be set to block , table-row , none , and several other values. The two work slightly differently as the fol…
Hiding and Showing Elements
02:04

Hiding and Showing Element Explained
05:23

  Showing and Hiding Elements Duration: 20 to 30 minutes. In this exercise, you will modify a Math Quiz to only show the countdown timer when it is running. Open DynamicHtml/Exercises/MathQuiz.html for editing. Modify the code so that the table row with the timer in it (the last row) only shows up w…
Showing and Hiding Elements
01:20

  Manipulating Tables HTML tables can be created and manipulated dynamically with JavaScript. Each table element contains a rows array and methods for inserting and deleting rows: insertRow() and deleteRow() . Each tr element contains a cells array and methods for inserting and deleting cells: inser…
Manipulating Tables
02:05

  Tracking Results in the Math Quiz Duration: 15 to 25 minutes. In this exercise, you will dynamically create a table that shows the user how she is doing on the Math Quiz. The screenshot below shows how the result will look: Open DynamicHtml/Exercises/MathQuizTable.html for editing. Change the msg(…
Tracking Results in the Math Quiz
01:54

Tracking Results in the Math Quiz Solution
07:23

  Dynamically Changing Dimensions The dimensions of an object can be changed by modifying the width and height properties of the element's style property. The following example demonstrates this: Code Sample: DynamicHtml/Demos/Dimensions.html When the page loads, we begin observing mouseover and mou…
Dynamically Changing Dimensions
01:31

Demo of Timed Slider
06:19

  Positioning Elements Dynamically The position of an object can be changed by modifying the left and top properties of the element's style property. The following example demonstrates this: Code Sample: DynamicHtml/Demos/Position.html Left Right Up Down When the page loads, we begin observing click…
Positioning Elements Dynamically
01:27

Element Positioning Explained
11:20

  Changing the Math Quiz Timer to a Slider Duration: 15 to 25 minutes. In this exercise, you will modify the Math Quiz so that the timer is a slider rather than a count down. The result will look like this: Open DynamicHtml/Exercises/MathQuizSlider.html for editing. Notice that the timer on the page…
Changing the Math Quiz Timer to a Slider
00:49

  Changing the Z-Index The z-index value of an element indicates its relative position in the "stack" of elements the page. Elements with higher z-index values sit on top of elements with lower values. You can think of a stack of papers thrown on a table. The ones at the top have a higher z-index th…
Changing the Z-Index
00:51

  A Note on JavaScript Frameworks In the Demos folder of this lesson, you will find a Pong.html file that uses the features covered in this lesson to create the classic Pong game. Although the code is somewhat complex, with some study you should be able to understand everything in the file. There ar…
A Note on JavaScript Frameworks
00:33
About the Instructor
Webucator Training
4.1 Average rating
31 Reviews
751 Students
12 Courses
Global training company. Trained over 26,000 students. Thousands of student testimonials.
  • Founded in 2003.
  • Webucator provides technical and business training.
  • Webucator is a Microsoft Certified Partner for Learning Solutions (CPLS)
  • Webucator is a Registered Education Provider (R.E.P.) approved by PMI to issue professional development units (PDUs) for its training courses.
  • Webucator has a GSA Contract (GS-35F-0556S).
  • We have provided training to over 70% of the Fortune 100 companies (See Partial Client List).
Why should you choose us?