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.
42 students enrolled
$40
Take This Course
  • Lectures 87
  • Length 7 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2012 English

Course 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>

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Article
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
Section 1: Quick JavaScript Recap
Lesson Introduction
01:10
Article
  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…
Article
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…
Article
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…
Article
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…
Article
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…
Article
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…
Using the XHR object with JSON
14:02
Section 2: Advanced Techniques
Lesson Introduction
01:48
Article
  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…
Article
  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…
Explaining Truthy and Falsy
Preview
07:41
Article
  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…
Article
  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…
Explaining the Default Operator
13:59
Article
  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…
Article
  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…
Article
  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…
Article
  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…
Function, Functions, Functions
15:43
Article
  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…
Article
  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…
Article
  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…
Article
  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…
Article
  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…
Section 3: Regular Expressions
Lesson Introduction
01:21
Article
  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…
Article
  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 Explained
10:23
Article
  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…
Article
  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…
Using Regular Expressions for Form Validation
08:08
Article
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…
Sanitizing User Input
05:34
Article
  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…
Section 4: The HTML Document Object Model
Lesson Introduction
01:59
Article
  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 DOM Element Explained
06:06
Article
  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…
Article
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 Explained
06:27
Article
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...…
Article
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…
Article
  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…
Article
  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…
Demo of Soccer Game
07:24
Article
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 in Soccer Game
01:20
Article
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…
Article
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…
Article
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 whitespace from the DOM
07:46
Article
  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…
Article
  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…
Article
  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…
Article
  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…
Section 5: Dynamic Forms
Lesson Introduction
01:35
Article
  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.…
Article
  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 Explained
12:28
Article
  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…
Article
  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…
Article
  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 Explained
19:26
Article
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…
Article
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…
Demo of JavaScript Timers
10:56
Article
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…
Article
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…
Article
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…
Sample Quiz Explained
24:14
Section 6: Dynamic HTML
Lesson Introduction
02:11
Article
  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…
Article
  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 Element Explained
05:23
Article
  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…
Article
  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…
Article
  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 Solution
07:23
Article
  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…
Demo of Timed Slider
06:19
Article
  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…
Element Positioning Explained
11:20
Article
  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…
Article
  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…
Article
  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…

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Webucator Training, 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?

Ready to start learning?
Take This Course