Mastering JavaScript

Elevate your web development skills by deep diving into JavaScript
3.7 (37 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.
649 students enrolled
84% off
Take This Course
  • Lectures 39
  • Length 4 hours
  • Skill Level Expert Level
  • 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

About This Course

Published 9/2015 English

Course Description

JavaScript is the browser language that supports object-oriented, imperative, and functional programming styles, focusing on website behavior. It has a rich set of libraries and frameworks and is the most widely used client-side language with features such as asynchronous communication, controlling browsers, and editing documents. JavaScript provides web developers out there with the knowledge to program more intelligently and idiomatically—something not all programmers can do or understand.

Mastering JavaScript will immerse you in the JavaScript world, where you will mature as a developer by exploring the best practices for building an original, functional, and useful cross-platform library.

Starting off with just some basic knowledge of JavaScript and HTML, we will first lay a solid naming foundation for OOP coding by exploring the best naming conventions practices for primitive variables, constructors, methods, and properties. Then we'll shed some light on creating global namespace, create a pure JavaScript onload script, and walk through cross-browser compatibility. We will learn how the onload and DOMContentLoaded events are actually triggered and understand how to use querySelectorAll method and dynamically load scripts using a script loader.

As the course progresses, we will start building up our own libraries by integrating codes, methods, and logic, we will also expand our library with design patterns such as module, façade, adapter, and singleton. Finally, we will create a working time manager and explore unit testing in JavaScript.

After working through this video course, you will be equipped with all the knowledge, tips, and hacks you need to stand out in the advanced world of web development.

About The Author

Ben Fhala discovered his passion for data visualization six years ago while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, 02geekcom, and an Adobe ACP. He enjoys spending most of his time learning and teaching and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards. Among Ben's publications are Packt's HTML5 Graphing and Data Visualization Cookbook.

What are the requirements?

  • This video course assumes you have a basic knowledge of JavaScript and HTML with some familiarity of OOP concepts.

What am I going to get from this course?

  • Master JavaScript best practices for designing and developing fully functional, cross-platform libraries
  • Use powerful design patterns for an innovative and cutting-edge approach to web development
  • Enhance the performance of your libraries by focusing on a new aspect in every video

Who is the target audience?

  • If you are an experienced JavaScript developer and want to take your skills to the next level by mastering the language and it’s usage in the modern web, this course is ideal for you!

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.


Section 1: Idiomatic JavaScript

This video provides you a synopsis of the course.


When working in teams or contributing to existing libraries, it is critical that you adhere to the common naming convention practices. Learn how to format your code and be consistent about your choices.


Strategies of working with variables can help you become a better developer. Know the best tips to work with primitive variables.


It is important to know the differences between functions and variables and how we should name them. Understand the best practices of naming conventions for variables and functions.


Now that we know the naming conventions for functions and variables, let's have a solid naming convention foundation for OOP coding in JavaScript.


There is no namespace keyword in JavaScript, but it is very easy to create one. Let's learn what it is.


A variable's value keeps changing, but many a times, you want to store information that never changes. Let's learn how to define constants in JavaScript and the naming convention that will make it easy for us to treat these variables as constants.


Let's briefly talk about consistency of our code in general using the unary convention. We will see how to use it to make our code more efficient and improve code performance.

Section 2: Cross-browser Development

One of the vital parts of building a library, a framework, or original code that interacts directly with the browser is the need to test and validate compatibility with the browser.


The default way in which onload works is that it only allows one onload to occur at a time. But what happens if you don't control the loading process of other applications and wish to enable an onload without breaking the loading process on your end? Learn a great hack that will enable you to create an onload without needing to worry if other onloads exist.


Not every feature is detectable on every browser, and many a times, you will need to come up with creative solutions that can bypass the issues of the ways by which different browsers do different things.


Let's turn our attention to Modernizr, which makes it easy to write conditional JavaScript and CSS for browser feature supports.

Section 3: Cross-browser DOM Manipulation

There is a new feature in town called querySelectorAll. Before we can start working with it, we need to filter out and define the browsers that support this feature, while building the foundation for an alternative solution.


In the modern world of HTML5, there are very easy ways to select elements natively using the querySelectorAll method. Learn how to build your application in a way that would recognize that your browser does not support this feature when it does not.


When the browser does not support the querySelectorAll feature, we need to develop a script loader that is cross-browser-compatible.


We see how to load scripts dynamically only when we need them, using the script loader we created in the last video. We will have all of the groundwork ready to start creating our own library.

Section 4: Creating a JavaScript Library

Namespaces provide a way for us to avoid overwriting code. Most of the times, we use namespaces to provide a structure for our library elements.


JavaScript doesn't support private variables natively as yet. There are ways to create pseudo-private variables, but the problem is that they can still be overwritten by other developers (by mistake or on purpose).


We will create a safer global variable definition as we get to know our first design pattern—the Module Design Pattern.


As you start working with your library (and it becomes popular), you might get to a situation where it's being loaded more than once. Learn how you can deal with situations like this.


We will take all the scraps of code that we created in previous videos (and sections) and combine them together into our library.

Section 5: Expanding Out with Design Patterns

While interfaces don't exist in JavaScript, the ideas behind them are very relevant for JavaScript. Let's understand what interfaces are and how to implement the logic behind them in JavaScript.


Learn what an adapter is and why we would want to use them in programing and in JavaScript.


We want our library to always do the same thing, no matter what the underlying library that is enabling it is. Let's build a jQuery adapter to first check whether the user has jQuery loaded. If it is, we will use the library for our operations.


So far, our focus in the creation of our library was on getting all the elements of our adapters to work the same, as we focused on creating custom queries. We will now piggyback on the jQuery text method as we discover the problem we have in our current architecture.


Our goal is to create a library that is functional and useful. As such, we will take advantage of the strategy that jQuery uses to make it easier to interact with elements.

Section 6: Exploring the Facade Design Pattern

In this video, we will discover the Facade Design Pattern. Creating a simple constant interface. This interface is going to be sent to the user no matter what library element they are using.


In the last video, we created a Facade Design Pattern, but our solution was not complete. We still need to figure out a way to update the initial values that we configure when we start our application to use the Facade. By the end of this video, we will be fully using the Facade Design pattern.


Want to make your facade a lot more than just a standard Façade? You can do so by incorporating its own methods.


We've created our façade pattern, but it can very easily get exposed to the methods and items that we really want to hide from all users. Let's take our facade design pattern to the next level by exposing only what we want to expose in the library.

Section 7: Working with Time in JavaScript

We need a global object that is always available for all the elements in an application. Let's use a singleton, which is a design pattern that helps us create an object only one time.


We will take our singleton from the last video and start building it out, starting from its constructor.


We will continue and build the dictionary usage for our ticker.


Let's get our ticker to work.


We have a working ticker but it's hidden from users. Let's expose the ticker to all users, and thus complete the creation of our ticker and our singleton.

Section 8: Dispatching Events in JavaScript

An event dispatcher is a type of design pattern derived from the Observer Design pattern that enables the developer's objects to listen to changes in another object without creating a direct two-directional linkage between the objects. In this video, we will have a working event dispatcher.


In the last video, we created an event dispatcher. It's time for us to really test it by integrating it into the ticker time manager that we created in an earlier section.


We already have a working event dispatcher, but at this stage, we can't remove the events. We need to solve this.


We are done building, and in our last video in this course, we need to dedicate a bit of time to testing our application over time.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course