Getting Started with JavaScript Programming

Become a Dangerous Front End Designer

JavaScript is a powerful scripting language that allows you to create dynamic websites. Fortunately, it is also easy to learn, as you’ll see in this workshop from web developer and trainer Joe Chellman. After a quick exploration of the basics, Joe walks you through a series of real-world examples that show how JavaScript is used in actual web pages to create interactivity, move data between web applications, power mobile apps, and more. You’ll also be introduced to jQuery, a hugely popular programming framework that adds some great features to JavaScript, and get tips on avoiding common coding problems. There’s never been an easier way to get started programming with JavaScript.

Trainer: Joe Chellman

November, 2012

Duration: 2 hrs 35 min

If you're new to JavaScript, Introducing the JavaScript Language is an excellent course to take before you start this workshop. This course will also be available as part of JavaScript Essentials, coming soon.

Ready for iPad, Android, and HTML5

Powerful, Feature-Rich Interface

HD Video

JavaScript

Add to Cart Downloads

Similar Courses

Welcome to Getting Started with JavaScript Programming

This chapter introduces JavaScript and the various pieces of software we'll be using as we explore how to use the language.

Introduction to JavaScript
- In this lesson you'll learn about what JavaScript is and what it does. We'll discuss JavaScript in general and look at specific examples from actual websites.
  
  What Is JavaScript? What Does It Do?
  
  05:12
- A web inspector is software that is integrated into a web browser to allow for deep interactions with HTML, CSS, and JavaScript. In this lesson, we will look at the web inspectors that go with each major web browser.
  
  Web Inspectors
  
  05:50
- Most modern web browsers have their inspectors built in, although Firebug (the full inspector for Firefox) needs to be installed separately. In this lesson, we'll investigate how to enable and begin to use the inspectors for Firefox, Chrome, and Safari.
  
  Enabling Web Inspectors
  
  06:44
- Every programmer needs a text editor that they enjoy and trust. In this lesson, we'll look at some of the dimensions along which you might judge the quality of a text editor, and explore some of the current best options.
  
  Our Friend the Text Editor
  
  05:60
JavaScript can be used in nearly any programming context, but by far the most popular is in a web browser. This chapter will provide an overview of the essential aspects of using JavaScript in that context.

Using JavaScript In Actual Pages
- JavaScript code is included in HTML pages using <script> tags. In this lesson, we'll look at how and where to use these tags in a page for the best performance and reliability.
  
  Script Tags in HTML
  
  03:38
- Along with the code we write ourselves, JavaScript developers very often include third-party code (written by others) in our projects. In this lesson, we'll look at how to do that.
  
  Including Third-Party Code
  
  04:43
- The Document Object Model (DOM) is the interface through which JavaScript interacts with the contents of web pages. In this lesson, we'll take our first look at the DOM in a web inspector and explore how to begin manipulating it.
  
  The Document Object Model (DOM)
  
  06:56
- Events are things that happen during the execution and usage of a web page, and JavaScript can respond to those events. In this lesson, we'll look a few of the many events that you may encounter.
  
  Events
  
  04:42
- In order to respond to an event in the DOM, we must "listen" for the event. In this lesson, we'll look at how to add an event listener using JavaScript.
  
  Adding Event Listeners
  
  06:08
jQuery is a fairly large, and extremely popular, JavaScript library that eliminates a lot of the drudgery of working with JavaScript on the web. This chapter will introduce jQuery and demonstrate some of the ways it can make your JavaScript life more pleasant.

Introducing jQuery
- jQuery is a large collection of functions that solves many problems facing JavaScript developers in a convenient, well-tested package. In this lesson, we'll look at some of the benefits of using jQuery.
  
  What Is jQuery?
  
  04:29
- It is important to make sure the DOM is ready before trying to manipulate it using JavaScript. jQuery's ready() method is very good for this, and we'll look at how to use it in this lesson.
  
  Using the ready() Method
  
  04:58
- Manipulating the DOM is not terribly difficult using vanilla JavaScript, but it is much easier using jQuery, as you'll see in this lesson.
  
  Using the DOM with jQuery
  
  05:18
- The way jQuery is built allows functions to be chained, which is really handy. This lesson shows what chaining means in this context and how to do it in your code.
  
  Chaining Functions
  
  05:34
This chapter includes numerous examples of how JavaScript can be used to execute real-world ideas. Some examples use pure JavaScript, others include jQuery, and all of them are small enough to understand but useful enough to appear in actual projects.

JavaScript Examples
- An easy way to make links open in a new window is to use the HTML target attribute, but adding it to links that need it can be annoying. In this example, we'll use JavaScript to find all links to external websites and make them open in new windows.
  
  Creating New Windows for External Links
  
  07:06
- When many articles are listed on the same page, it's often desirable to show just a teaser of each one, instead of the full content. In this lesson, we'll use jQuery to add some links that will show and hide the full content of articles on our example page.
  
  Adding "Read More" with Animation (Part 1)
  
  05:42
- In this lesson, you'll see how to leverage event delegation to show and hide the full content of articles based on links added via JavaScript.
  
  Adding "Read More" with Animation (Part 2)
  
  07:49
- Validating the inputs on forms is one of the oldest uses of JavaScript, and remains one of its more helpful applications to this day. In this lesson, you'll see how to perform various kinds of validation using jQuery and the HTML5 "required" attribute.
  
  Basic Form Validation
  
  08:37
- Not only is jQuery useful for simplifying many aspects of writing JavaScript, it also opens up your project to a wealth of useful third-party libraries. In this video, we'll walk through the process of integrating Colorbox, an excellent JavaScript lightbox plug-in, into our example project.
  
  Adding Colorbox for Image Fun
  
  06:54
- The may be occasions when it is not possible to change the markup on a page to suit a third-party library. In this lesson, we'll use jQuery's .each() method and some other techniques to integrate Colorbox in a slightly more "hostile" markup environment.
  
  Using jQuery .each() and Colorbox
  
  05:31
- AJAX is a well-known buzzword in modern web development. AHAH (asynchronous HTML and HTTP) is not quite as popular a term, but at least as popular a technique. In this lesson, we'll use AHAH to dynamically add an HTML snippet to our example project.
  
  Basic AHAH
  
  06:55
- This lesson takes our AHAH example and refines it, changing the implementation slightly and adding animation to make it much easier for our visitors to see what has changed when they click a magic link.
  
  AHAH Refined
  
  02:50
Debugging is an essential skill that every programmer, of any skill level, needs to learn. This chapter explores how to find and fix problems in JavaScript code using the built-in tools, including both relatively simple console logging and the more powerful but complex debugger.

Debugging JavaScript
- Thanks to herculean efforts by the web standards community, core JavaScript implementations are much more consistent between browsers than they were in the early days of JavaScript. That said, there are still issues to be aware of. In this lesson, we'll discuss some of those issues and look at QuirksMode.org, a helpful compatibility resource.
  
  Browser Differences to Be Aware Of
  
  02:49
- Printing the current state of code to a console is one of the fastest and easiest ways to learn methods of debugging code. In this lesson you'll see how to use console.log to figure out what's going on in your JavaScript code.
  
  Using console.log()
  
  05:34
- Stepwise debugging is a fairly advanced technique but can yield enormous benefits, especially when working with third-party libraries and other people's code. In this lesson, you'll see how to use this powerful class of tool.
  
  Stepping Through with a Debugger
  
  08:01
- Minification is a technique used to make large files download more quickly, and while minified code is great for putting into a website, it is useless for debugging. In this lesson you'll see how to "unminify" your code for debugging.
  
  Using "Unminified" Code for Debugging
  
  02:50
JavaScript can run in a variety of environments, with different best practices depending on the exact context in which it is running. In this chapter, we'll look at several practices that should be relatively easy to follow while paying nice dividends in terms of headache avoidance.

Pretty Good Practices
- Progressive enhancement means establishing a baseline that is fully accessible and adding on enhancements (like JavaScript interactivity) afterward. In this lesson we'll take a very brief look at what this means and how it is reflected in the example project in this course.
  
  Progressive Enhancement
  
  03:28
- Code comments are generally ignored by computers, but crucial for humans. In this lesson, we'll look at code comments in more depth and discuss why they are so important.
  
  Comment Early, Comment Often
  
  03:25
- Strict mode is a relatively new feature of JavaScript parsing engines that can help mitigate many problems. In this lesson, we'll look at how to enable Strict mode, and how it helps stop us from accidentally creating global variables.
  
  Using Strict Mode
  
  02:54
- Although you usually don't want to use minified libraries during development, when it comes time to deploy your code on the Internet, minification is a very good idea indeed. In this lesson, we'll look at how to minify code to ready it for deployment.
  
  Minify Before Deployment
  
  04:48

Welcome to Getting Started with JavaScript Programming

In this course you’ll learn the fundamentals of programming with JavaScript. The contents of this course include:

Introduction to JavaScript
This chapter introduces JavaScript and the various pieces of software we’ll be using as we explore how to use the language.

Using JavaScript In Actual Pages
JavaScript can be used in nearly any programming context, but by far the most popular is in a web browser. This chapter will provide an overview of the essential aspects of using JavaScript in that context.

Introducing jQuery
jQuery is a fairly large, and extremely popular, JavaScript library that eliminates a lot of the drudgery of working with JavaScript on the web. This chapter will introduce jQuery and demonstrate some of the ways it can make your JavaScript life more pleasant.

JavaScript Examples
This chapter includes numerous examples of how JavaScript can be used to execute real-world ideas. Some examples use pure JavaScript, others include jQuery, and all of them are small enough to understand but useful enough to appear in actual projects.

Debugging JavaScript
Debugging is an essential skill that every programmer, of any skill level, needs to learn. This chapter explores how to find and fix problems in JavaScript code using the built-in tools, including both relatively simple console logging and the more powerful but complex debugger.

Pretty Good Practices
JavaScript can run in a variety of environments, with different best practices depending on the exact context in which it is running. In this chapter, we’ll look at several practices that should be relatively easy to follow while paying nice dividends in terms of headache avoidance.

The lessons are wrapped in a feature-rich interface that lets you jump to any topic and bookmark individual sections for later review. Full-Screen mode provides a hi-def, immersive experience, and Watch-and-Work mode shrinks the video into a small window so you can play the videos alongside your application. Also included are exercise files that give you an easy way to try out the techniques you learn.

System Requirements

Broadband internet connection
Up-to-date browser with Flash plug-in
Screen resolution 1024x768 or higher
Sound card with speakers or headphones attached
Pentium 4 2.6 GHz or higher, or Apple Mac G5
512 MB RAM

Ready for iPad, Android, and HTML5

It's easy to watch this course from your Android device, iPad, or iPhone (4 or later). Access videos straight from your browser, or, for Android devices or iPads, use this course in one of our free apps.

Project Files (Downloadable Feature)

Project files are included with this course so you can practice what you learn and work right along with the videos.

Powerful, Feature-Rich Interface

This course features video2brain’s interactive interface. As you navigate the course, rolling over a chapter or video brings up text describing that item.

Full-Screen mode provides a hi-def, immersive experience. And Watch-and-Work mode puts the video into a resizable window that you can shrink so you can watch the lessons on one side of your screen while you’re following along and applying what you’ve learned on the other.

HD Video

This course comes in crisp 1280 x 720 high definition video.

Bookmarks (Downloadable Feature)

Available in the downloadable version of our courses, this feature makes it easy to create a custom bookmark in any lesson to mark where you left off or to make note of something you want to refer back to later. You can even add a name or short note to remind yourself what the bookmark is for.

Thanks

ken m.

This comment was made on the following lesson: Enabling Web Inspectors

so far so good.

Recommended Courses

Getting Started with JavaScript Programming

Become a Dangerous Front End Designer

About this lesson

Welcome to Getting Started with JavaScript Programming

System Requirements

Welcome to video2brain!

Other sites. Andere Seiten. Otros sitios. Autres sites.