JavaScript Essentials

A Workshop Multi-Pack

This value-priced multi-pack combines Joe Chellman’s popular JavaScript courses “Introducing the JavaScript Language” and “Getting Started with JavaScript Programming.” You’ll learn the syntax of JavaScript and explore a series of real-world examples that show how JavaScript is used in actual web pages. You’ll also be introduced to the hugely popular programming framework jQuery.

Trainer: Joe Chellman

February, 2013

Duration: 5 hrs 15 min

This bundle includes the following courses:

Introducing the JavaScript Language

Getting Started with JavaScript Programming

Save $20 off the individual titles!

Ready for iPad, Android, and HTML5

Powerful, Feature-Rich Interface

HD Video

JavaScript

Add to Cart Downloads

Similar Courses

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

Introducing the JavaScript Language

In these introductory lessons, we'll define our terms for the course and look at the tools you'll use to learn to read and write JavaScript.

Introduction
- The goal of this course is to become conversant in JavaScript. In this lesson, we'll talk about what that means.
  
  Syntax: Learning to Read and Write
  
  01:29
- A web browser is the best tool for interacting with and learning JavaScript. In this lesson, we'll look at available browsers and the tools associated with them that we use when working with JavaScript.
  
  Web Browsers for Learning JavaScript
  
  04:08
- Most modern web browsers have web inspection tools built in, but there are certain steps required to enable them (or install them in the case of Firefox). In this lesson, we'll look at how to prepare several browsers for working with JavaScript.
  
  How to Enable Firebug and Web Inspectors
  
  06:51
- A good text editor is essential for efficient and enjoyable programming. In this lesson, we'll go over some reasons why that is so and look at some of the text editors available for Windows and Mac OS.
  
  Our Friend the Text Editor
  
  03:35
- Learning JavaScript will, of course, take time and effort beyond this course. In this lesson, we'll look at some other resources you can seek out help to help deepen your knowledge.
  
  Additional Helpful Resources
  
  02:02
This chapter introduces variables and a few of the types of data that are usually used in the form of variables.

Variables and Types
- This lesson introduces variables, which are used to give names to data. If you haven't heard of variables since algebra class, don't worry - we'll keep it simple.
  
  Declaring and Assigning a Variable
  
  07:09
- Programming frequently involves working with numbers and a bit of math - sometimes a lot of math. In this lesson, we'll look at how numbers work in this context.
  
  Numbers
  
  03:28
- Strings are JavaScript's way of representing character data, which is basically text. In this lesson we'll look at how strings work.
  
  Strings
  
  06:10
- Boolean values are true or false, which are used to answer questions and check the state of our programs. In this lesson, we'll look at how booleans work in JavaScript.
  
  Booleans and the Quest for Truth
  
  03:26
This chapter introduces a few more complex data types: the array, the object, and the regular expression. We'll also look at how to make code more readable by using white space and comments.

Objects, Arrays and More
- This lesson introduces objects, which are common and important data structures in many programming languages. We'll look at the simple but very useful way objects are expressed in JavaScript.
  
  Objects
  
  06:52
- Once an object is built, there are various operations that can be performed on it. In this lesson, we'll look at how to access, add, and remove an object's properties.
  
  Manipulating Objects
  
  04:32
- An object refers to a location in a computer's memory. There are times when two objects may refer to the same location in memory, and this has some consequences. In this lesson, we'll look at those conditions and how to work with, or around, them.
  
  Objects and References
  
  03:25
- Arrays are another data type found in nearly every language, and are used to represent a set of items in a particular order. This lesson will look at how to express arrays in JavaScript.
  
  Arrays
  
  06:02
- Once an array is built, there are many useful things that can be done with it. In this lesson, we'll look at some of the ways we can play with arrays.
  
  Manipulating Arrays
  
  07:28
- The code we write is meant for two audiences - machines and humans - so it is important to make sure it is readable to both. In this lesson, you'll see how white space can be used to make code more readable for humans without affecting the machine's ability to interpret it.
  
  Readability: White Space
  
  03:38
- Comments are parts of your code that are not executable by the machine and are used to document what the program is doing at any given point. In this lesson, we'll look at how to write comments in JavaScript.
  
  Readability: Comments
  
  04:55
- Regular expressions are a very powerful, if somewhat obscure, way to process strings. In this lesson, we'll take a brief look at what regular expressions look like in JavaScript and explore some of their basic uses.
  
  Regular Expressions
  
  07:16
In this chapter, we'll start looking at what you can do with data once you've learned how to express it. You'll see how to compare items, perform arithmetic, ask yes or no questions, and check what kind of data is contained in a variable.

Operators and Control Structures
- In this lesson, we'll look at how to test for equality and other similar conditions. In particular, the ways of testing equality might be a little different than you would expect.
  
  Simple Comparisons
  
  04:33
- Simple arithmetic is used all the time in programming. In this lesson, we'll look at how to do simple arithmetic in JavaScript. You'll also learn about the less common modulus operator and an extra way of using the plus operator on strings.
  
  (Mostly) Arithmetic Operators
  
  06:55
- Logical operators allow us to ask multiple questions (that is, test multiple conditions) at the same time. In this lesson, we'll look JavaScript's main logical operators and how they work.
  
  Logical Operators
  
  07:05
- The most useful function of a logical operator is to test conditions, most frequently in the form of an if statement. In this lesson, we'll look at what if statements are and how they can be used.
  
  Conditionals: If
  
  07:08
- Conditionals can be chained in several different ways. Along with the if-else if construct, JavaScript has the switch statement. In this lesson, we'll look at how to use switch statements, which are another way of expressing conditional tests.
  
  Conditionals: Switch
  
  05:60
- If statements are used so commonly in programming that there are often very short ways to express them, which saves a bit of typing. In this lesson, we'll look at some of the shorter ways of expressing if statements (while not necessarily recommending that you use them).
  
  Terse Ifs: One-Liners and Ternary Operator
  
  06:37
- JavaScript does not care what kind of data is contained in variables, but there will be times in your program where you will care. In this lesson, we'll look at the typeof operator, which can be used to find out what kind of data a variable contains, and discuss why you might want to do that.
  
  Type Checking
  
  05:32
We write programs for many reasons, but one of the main reasons is to cut down on repetitive tasks. In this chapter, we'll look at how to use loops in JavaScript programs to do the same, or similar, tasks over and over.

Iterating with Loops
- In this lesson, we'll look at for loops, which are used to perform a certain action a prescribed number of times.
  
  For Loops: Sequential
  
  08:02
- Enumerative for loops are related to regular (sequential) for loops, but are generally used to do something with each piece of an array or object. In this lesson, we'll look at how to do that and note some issues with using this type of for loop.
  
  For Loops: Enumerative
  
  04:58
- This lesson introduces the while loop and the related do while loop, a couple different ways of expressing a loop.
  
  While Loops
  
  07:31
At their most basic, functions provide a way of packaging up related, reusable functionality to be used many times in a program. In JavaScript, functions are fundamental and probably more important to the language than in any other popular language. In this chapter, we look at the basics of functions, which are similar in most languages, and some of the finer points of using them that are specific to JavaScript.

Functions
- In this lesson, we'll look at how a function can be used to group together lines of code in such a way that they can be used all at once with a single name.
  
  Basic Functions
  
  02:19
- In addition to grouping code together, functions can be used to operate on data. JavaScript has many built-in functions, but in this lesson, you'll learn how to write your own.
  
  Basic Uses of Functions
  
  04:24
- In this lesson, we'll look at how to specify arbitrary numbers of arguments in a function and give arguments default values, thereby increasing the flexibility of how that function can be called.
  
  More on Arguments
  
  04:14
- In JavaScript, when an object is passed into a function, it may be modified in place. This can have unintended consequences, so in this lesson we look at an example of this effect, and ways it can be avoided.
  
  Objects, References, and Functions
  
  04:56
- In JavaScript, functions are actually objects. This is not the case in many programming languages, which can be a source of confusion. In this lesson, we'll look at how this concept works in a basic context, as well as the related concept of an anonymous function.
  
  Functions Are Objects
  
  04:41
- One of the most important aspects of functions in JavaScript is how they can be used to protect data from being modified by other parts of the program. This lesson will explore that idea, which is called scope, and how to use it to your advantage.
  
  Understanding Variable Scope
  
  05:31

Introducing the JavaScript Language

In this workshop you’ll be introduced to the powerful programming language JavaScript and learn the fundamentals of its syntax. The contents of this course include:

Introduction
In these introductory lessons, we’ll define our terms for the course and look at the tools you’ll use to learn to read and write JavaScript.

Variables and Types
This chapter introduces variables and a few of the types of data that are usually used in the form of variables.

Objects, Arrays, and More
This chapter introduces a few more complex data types: the array, the object, and the regular expression. We’ll also look at how to make code more readable by using white space and comments.

Operators and Control Structures
In this chapter, we’ll start looking at what you can do with data once you've learned how to express it. You'll see how to compare items, perform arithmetic, ask yes or no questions, and check what kind of data is contained in a variable.

Iterating with Loops
We write programs for many reasons, but one of the main reasons is to cut down on repetitive tasks. In this chapter, we’ll look at how to use loops in JavaScript programs to do the same, or similar, tasks over and over.

Functions
At their most basic, functions provide a way of packaging up related, reusable functionality to be used many times in a program. In JavaScript, functions are fundamental and probably more important to the language than in any other popular language. In this chapter, we look at the basics of functions, which are similar in most languages, and some of the finer points of using them that are specific to JavaScript.

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.

No comments yet

Recommended Courses

JavaScript Essentials

A Workshop Multi-Pack

Getting Started with JavaScript Programming

Introducing the JavaScript Language

About this lesson

Introducing the JavaScript Language

Getting Started with JavaScript Programming

System Requirements

Welcome to video2brain!

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