Learning Path: Javascript Patterns

Learning Object-Oriented JavaScript 23 lectures 02:48:34 Setting Up the HTML and CSS This is our setup lesson to start working in JavaScript.

• Explore the rules and the setup of your source files
• Modify your HTML structure and the CSS file

Knowing When the Document is Loaded Before we can manipulate any data in our document, we need to know whether it's completely loaded.

• Understanding how callbacks work
• Use the window.onload callback

Understanding What Objects Are This video provides a quick revision of the basic theory of JavaScript.

• A look at objects, functions, properties, and methods
• Take a look at the date object

The Difference between Browsers Unfortunately, different brand servers react differently to our JavaScript. We will see how we can work around it.

• Use a few built-in methods that are not fully supported in all browsers

Tying Up Loose Ends Our clock is almost ready; we just need to format it and get it to tick. That's exactly what we will do in this video.

• Create an original formatter function
• Use the setInterval function to update the clock every second

Building with Objects The whole point of object-oriented programming is to enable you to cluster concepts into buckets.

• Create relationships between functions and variables using objects
• Create your first custom object that leverages the built-in object

Scoping for Your Scope: ‘this’ not ‘that’ As a traditional developer, there was no relevance to relativism. One of the biggest advantages of working in an object-oriented mindset is the concept of relative relationships.

• Understand relative relations between items
• Take your first dive into the world of scope as we explore the ‘this’ command

Constructing a Constructor In the previous video, we created our first object that leverages the built-in object. The next step is the process to actually create a complete standalone object.

• Understand how a constructor works
• Create a constructor to understand the scope end of the "this" command

Reusing Objects One of the biggest features of object oriented programming is the ease of reusing code. Once you complete building an object, you don't even need to remember or know how it actually works. All you need to do is remember how to work with it.

• Add more features to your clock
• Make the clock capable of displaying different time zone hours

Creating Methods with the Prototype So far, everything that we did worked perfectly as long as we weren't planning on expanding our object to be able to work with other objects.

• Discover the prototype property of your constructor
• Enable yourselves to create standalone methods that belong to your constructor

Augmenting Built-in Objects We don't need to learn new techniques to learn another way to leverage our new knowledge of the prototype. Every built-in object has a prototype as well, and we can automatically add features to any object, including built-in objects, by expanding and adding more methods into the prototype.

• Expand the capabilities of the date object
• Improve the efficiency of your project

Static Properties and Methods In the previous sections, we focused on the functions and properties that belong to objects, but there are different types of properties and methods that belong to the actual constructor.

• Build a smart callback functionality using static properties and methods

Moving Our Code into a Namespace As you start building your own objects, you're going to encounter a problem at some point of time. A common problem occurs when you create a function name that has already been created by someone else.

• Understand namespaces and their implementations
• Use a namespace to package your constructors into unique names

Functions that Have Functions Every function in JavaScript, just by being a function, is a type of object (a Function Object), and this means that every function has built-in methods.

• Introduce the call function
• Introduce the apply function

Inheriting Your Parents' Belongings In the previous sections, we've been creating objects and making them more dynamic. Apart from expanding features of other objects with object-oriented programming in JavaScript, we can tell an object to lean on another object for methods and properties.

• Understand the value of inheritance
• Expand this inheritance relationship between objects

Creating a Polyfill for Object.create The Object.create message that we used in the previous section to create an inheritance chain between our objects is a modern update to JavaScript and does not exist in older versions of it.

• Create an inheritance that is compatible with two older browsers as well
• Create a polyfill or a name for the code that we expect the browser to run

Overriding Properties and Methods Now that we have object-oriented inherited objects, it’s time to update a specific method or change it while keeping all the rest.

• Delve into the importance of overriding
• Override the methods we want to change
• Create a completely different skin for your clock

Creating an Alarm Clock In the course of the previous sections, we've been expanding our capabilities as object-oriented programmers with inheritance. It's time for us to practice our new skills.

• Create an alarm clock that has an inheritance chain that is two levels deep

Turning DIVs into Editable Content in HTML5 One of the new cool features in HTML5 is the capability of automatically turning HTML elements to become live editable content in the browser.

• Take this new functionality to help your clock become an alarm clock
• Turn the div layer into an editable one

Listening to Events It's time for us to move into events, a completely new topic and capability in object-oriented programming.

• Listen to the event that will tell us when the user enters into a DIV
• Listen to the event that will tell us when the user blurs out of the DIV

Setting the Alarm Time Dynamically In the previous video, we learned how to listen to events. In this section, we will continue to work with those events.

• Configure your alarm clock to be able to update dynamically and work
• Create a clock with an alarm that will dynamically chain based on the user’s input

Dispatching Events Not every object has a built-in event dispatcher, and the most common way to create a notifier mechanism in JavaScript is by using callbacks.

• Dedicate your time to the topic of callbacks
• Expand your date static method

Custom Callbacks Now that we have reached the end of the course, let’s see how we can cut down on the number of intervals in our clock.

• Create a sophisticated callback
• Complete the alarm clock

Learning Object-Oriented JavaScript. 23 lectures 02:48:34 Setting Up the HTML and CSS This is our setup lesson to start working in JavaScript.

• Explore the rules and the setup of your source files
• Modify your HTML structure and the CSS file

Knowing When the Document is Loaded Before we can manipulate any data in our document, we need to know whether it's completely loaded.

• Understanding how callbacks work
• Use the window.onload callback

Understanding What Objects Are This video provides a quick revision of the basic theory of JavaScript.

• A look at objects, functions, properties, and methods
• Take a look at the date object

The Difference between Browsers Unfortunately, different brand servers react differently to our JavaScript. We will see how we can work around it.

• Use a few built-in methods that are not fully supported in all browsers

Tying Up Loose Ends Our clock is almost ready; we just need to format it and get it to tick. That's exactly what we will do in this video.

• Create an original formatter function
• Use the setInterval function to update the clock every second

Building with Objects The whole point of object-oriented programming is to enable you to cluster concepts into buckets.

• Create relationships between functions and variables using objects
• Create your first custom object that leverages the built-in object

Scoping for Your Scope: ‘this’ not ‘that’ As a traditional developer, there was no relevance to relativism. One of the biggest advantages of working in an object-oriented mindset is the concept of relative relationships.

• Understand relative relations between items
• Take your first dive into the world of scope as we explore the ‘this’ command

Constructing a Constructor In the previous video, we created our first object that leverages the built-in object. The next step is the process to actually create a complete standalone object.

• Understand how a constructor works
• Create a constructor to understand the scope end of the "this" command

Reusing Objects One of the biggest features of object oriented programming is the ease of reusing code. Once you complete building an object, you don't even need to remember or know how it actually works. All you need to do is remember how to work with it.

• Add more features to your clock
• Make the clock capable of displaying different time zone hours

Creating Methods with the Prototype So far, everything that we did worked perfectly as long as we weren't planning on expanding our object to be able to work with other objects.

• Discover the prototype property of your constructor
• Enable yourselves to create standalone methods that belong to your constructor

Augmenting Built-in Objects We don't need to learn new techniques to learn another way to leverage our new knowledge of the prototype. Every built-in object has a prototype as well, and we can automatically add features to any object, including built-in objects, by expanding and adding more methods into the prototype.

• Expand the capabilities of the date object
• Improve the efficiency of your project

Static Properties and Methods In the previous sections, we focused on the functions and properties that belong to objects, but there are different types of properties and methods that belong to the actual constructor.

• Build a smart callback functionality using static properties and methods

Moving Our Code into a Namespace As you start building your own objects, you're going to encounter a problem at some point of time. A common problem occurs when you create a function name that has already been created by someone else.

• Understand namespaces and their implementations
• Use a namespace to package your constructors into unique names

Functions that Have Functions Every function in JavaScript, just by being a function, is a type of object (a Function Object), and this means that every function has built-in methods.

• Introduce the call function
• Introduce the apply function

Inheriting Your Parents' Belongings In the previous sections, we've been creating objects and making them more dynamic. Apart from expanding features of other objects with object-oriented programming in JavaScript, we can tell an object to lean on another object for methods and properties.

• Understand the value of inheritance
• Expand this inheritance relationship between objects

Creating a Polyfill for Object.create The Object.create message that we used in the previous section to create an inheritance chain between our objects is a modern update to JavaScript and does not exist in older versions of it.

• Create an inheritance that is compatible with two older browsers as well
• Create a polyfill or a name for the code that we expect the browser to run

Overriding Properties and Methods Now that we have object-oriented inherited objects, it’s time to update a specific method or change it while keeping all the rest.

• Delve into the importance of overriding
• Override the methods we want to change
• Create a completely different skin for your clock

Creating an Alarm Clock In the course of the previous sections, we've been expanding our capabilities as object-oriented programmers with inheritance. It's time for us to practice our new skills.

• Create an alarm clock that has an inheritance chain that is two levels deep

Turning DIVs into Editable Content in HTML5 One of the new cool features in HTML5 is the capability of automatically turning HTML elements to become live editable content in the browser.

• Take this new functionality to help your clock become an alarm clock
• Turn the div layer into an editable one

Listening to Events It's time for us to move into events, a completely new topic and capability in object-oriented programming.

• Listen to the event that will tell us when the user enters into a DIV
• Listen to the event that will tell us when the user blurs out of the DIV

Setting the Alarm Time Dynamically In the previous video, we learned how to listen to events. In this section, we will continue to work with those events.

• Configure your alarm clock to be able to update dynamically and work
• Create a clock with an alarm that will dynamically chain based on the user’s input

Dispatching Events Not every object has a built-in event dispatcher, and the most common way to create a notifier mechanism in JavaScript is by using callbacks.

• Dedicate your time to the topic of callbacks
• Expand your date static method

Custom Callbacks Now that we have reached the end of the course, let’s see how we can cut down on the number of intervals in our clock.

• Create a sophisticated callback
• Complete the alarm clock

Setting Up the HTML and CSS This is our setup lesson to start working in JavaScript t-in object Building with...