Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

JavaScript in HTML5

From: JavaScript Essential Training

Video: JavaScript in HTML5

If you build web pages, you probably know HTML5 is the newest version of HTML, and it is the way the web world is moving. It adds great new features to web sites, many of which were previously only available by using external plug-ins like Flash or Java, but this will make them part of the regular web, standardized across all platforms across all devices. And we're big fans of the HTML5 here at lynda.com, but if you haven't done much with it yet, it's often a little confusing to approach, particularly because HTML5 is talked about along with other technologies, like CSS3 and JavaScript.

JavaScript in HTML5

If you build web pages, you probably know HTML5 is the newest version of HTML, and it is the way the web world is moving. It adds great new features to web sites, many of which were previously only available by using external plug-ins like Flash or Java, but this will make them part of the regular web, standardized across all platforms across all devices. And we're big fans of the HTML5 here at lynda.com, but if you haven't done much with it yet, it's often a little confusing to approach, particularly because HTML5 is talked about along with other technologies, like CSS3 and JavaScript.

And these aren't part of HTML5, but they do typically come along for the ride. And that is an important distinction. HTML5 is not changing this arrangement. It's HTML5 for your markup, CSS3 for your presentation, and JavaScript for your behavior. Now if you remember our discussion of ECMAScript earlier in the course and that what we're doing in this course is ECMAScript 3, you might think, "Well, does HTML5 mean I must have an ECMAScript 5?" Unfortunately, it's not quite that simple, and here is really the first problem with the picture. HTML5 is not finished yet.

The specification is still a work in progress, but that does not mean you should be holding off thinking, "Well, I'll wait and see if it gets implemented." HTML5 is happening. We know what's going to be in it. There are pieces of it already implemented in the latest browsers, and there are things we can be doing right now to work with it. So what are these main features? HTML5 brings new tags, new elements, new abilities, and the main areas are better support for video and audio built into HTML itself, so we don't have to use Flash plug-ins, for example.

There is a new element called Canvas that will allow us to draw on the screen directly. There is offline storage support, so web sites can actually store a significant amount of data, meaning they can be used without a connection. There are a whole lot of new form elements for building better forms. There is drag-and-drop support, built-in abilities to drag and drop items, not only within your own pages, but actually between web sites. There is Geolocation, understanding of latitude and longitude built into the language and local storage, being able to store more data than just simple cookies.

And there are new JavaScript APIs. What that means is it kind of makes sense that there will be new objects and methods in JavaScript, if we want to write code that works with these features. But here's an important thing. These features are being implemented into new browsers piece by piece, not as one thing. Firefox 4 has core support for all the main HTML5 features, but if you've had to support Firefox 3, you'd lose most of them. Similarly, Internet Explorer 9 has support for just about everything, but if you have to go back to Internet Explorer 8, you're going to lose quite a lot of this, and it's the same story with the other browsers.

Now if you haven't come across this site before, this is caniuse.com, and it allows you to break down features of HTML5 and CSS3 that are available in the different browsers, some of which have very good support, but as you get further on you'll find certain ones missing, and then the general scorecard for how well the different browsers are doing for each of those features. But we're really focused on JavaScript here, and while this course, as we've mentioned, concentrates on the core of ECMAScript 3, there are a couple of new things that you should know about that are coming along with HTML5.

In addition to the regular getElementByID and getElementsByTagName that we know about, we now have the much-requested getElementsByClassName, which returns all elements that match that class. You can even tell it to find multiple classes separated by spaces. Most libraries like jQuery and Prototype have implemented their own version of this for years, but it's great to have it finally natively supported in the language. But this is really the only general-purpose new method that I would associate with HTML5, and it's not available in Internet Explorer 8 and before, so if need that functionality in earlier browsers, look at using jQuery or another Library, because most of the new JavaScript abilities in the most recent browsers are just support for those new HTML5 features in those browsers.

Here's an example of that. So in HTML5 there is a new video tag in the markup, and while this does work quite well on its own, if you grab the video element object using, say, getElementByID, you can then call methods of it, like .play and .pause, and set properties of it like the currentTime and do that all through JavaScript. And the object also has events, so we can choose to listen out for say the ended event. Now you might recognize that here I'm using the addEventListener format for working with events.

This is the one that I talked about earlier in the course that I was avoiding because of cross-browser differences. But here, I can pretty much assume that if I have a browser that supports the video tag, it certainly supports the addEventListener method. And there are other events, such as play and pause, that we can react to. Now for more information about video, take a look at our course, HTML5: Video and Audio in Depth. Similarly, HTML5 brings a lot of storage options along with it that we can target in JavaScript, from simple localStorage where you just pick a name and start storing and retrieving simple values all the way to full offline support allowing your site to be used as an application without even requiring current network connection. And then there is Web SQL and something called IndexedDB, really adding substantial local storage abilities to the web.

And if you're interested in more about this, check out our course on HTML5: Local Storage and Offline Applications in Depth. Now, HTML5 does have a new JavaScript feature called Web Workers. We'll be able to load JavaScript and make it run in the background, regardless of what else is going on in your page. This is something that most other languages can do, usually under the term multithreading, but JavaScript has never been able to do. You can create a new Worker object and point it to a separate file of JavaScript.

Now, the Worker object can't directly affect the DOM, so you have to allow it to generate events and send them back, reacting to a message event from the Worker the same way you might react to a click event from the user. And from your page you can send messages to kick off certain functions in the Worker itself. Now Web Workers aren't supported in Internet Explorer yet, but are available in Chrome, Safari, Firefox, and Opera. And while there's obviously more to it, you can tell that HTML5 is bringing some interesting stuff that's going to impact us as JavaScript developers.

So the question is, what if you want to use these features? Well, you can't just ask, does this particular browser support HTML5? That's the wrong question, because as you've seen, HTML5 is really not one thing. It's a collection of features and abilities all wrapped up and given this name HTML5. And your responsibility as a JavaScript developer is to be aware of the new features that HTML5 brings, figure out if they meet a need for you, and then write any code to deal with that particular feature, and perhaps to deal with that feature not existing in an older browser.

So if you want to be an early adopter with HTML5, you will be interested in cross-browser differences. Now, if you wrote any JavaScript more than a few years ago, the idea of detecting differences between browsers might seem like a throwback to the bad old days of trying to detect whether the user was on Netscape or IE 4. This is not the same thing here that we're talking about. We're not remotely interested in browser detection, but we are interested in feature detection--big difference.

You do not want to be worried about writing code to detect whether the user has Chrome version 12.1 on a Mac or Firefox 3 on a PC, but we might want to ask, does the current browser support the new video functionality in HTML5? If so, I'll use it; if not, I'll do something else. It's the specific features we care about. Feature detection in JavaScript is quite simple. You treat the feature as an object and ask if it exists. Well, how? Well, here I'm writing a little bit of code to ask if the new getElementsByClassName method exists in the current browser.

And the way that I just do it is just name it inside an if statement. If it exists, this will be regarded as true. Now very important, notice that here I'm not calling the getElementsByClassName. I'm not using the opening and closing parentheses and passing any parameters; I'm just using the name of it inside our if condition. And you can do this with any of the future-facing objects. First check if it exist, and if it does, use it; if doesn't, ignore it or fall back to some backwards-compatible way. For example, if HTML5 video doesn't exist, we can generate some elements to include a Flash Player.

And next up, what I'm going to cover is a very simple way to detect all the HTML5 features that might or might not be available in a browser.

Show transcript

This video is part of

Image for JavaScript Essential Training
JavaScript Essential Training

56 video lessons · 101801 viewers

Simon Allardice
Author

 
Expand all | Collapse all
  1. 3m 28s
    1. Welcome
      1m 1s
    2. What you should know
      1m 44s
    3. Using the exercise files
      43s
  2. 15m 41s
    1. Introduction to JavaScript
      8m 6s
    2. Creating your first JavaScript
      2m 13s
    3. Getting to know the tools and applications
      5m 22s
  3. 56m 8s
    1. Understanding the structure of JavaScript code
      7m 9s
    2. Where to write your JavaScript
      3m 56s
    3. Creating variables
      6m 21s
    4. Working with conditional code
      5m 44s
    5. Working with operators
      13m 28s
    6. Sending messages to the console
      2m 59s
    7. Working with loops
      8m 1s
    8. Creating functions
      8m 30s
  4. 36m 13s
    1. Working with arrays
      7m 57s
    2. Working with numbers
      6m 13s
    3. Working with strings
      8m 27s
    4. Working with dates
      5m 38s
    5. Working with objects
      7m 58s
  5. 9m 6s
    1. What is the DOM?
      5m 49s
    2. Working with nodes and elements
      3m 17s
  6. 25m 17s
    1. Accessing DOM elements
      11m 3s
    2. Changing DOM elements
      5m 42s
    3. Creating DOM elements
      8m 32s
  7. 24m 45s
    1. Introduction to JavaScript event handling
      8m 16s
    2. Working with onClick and onLoad events
      7m 36s
    3. Working with onBlur and onFocus events
      2m 36s
    4. Working with timers
      6m 17s
  8. 21m 41s
    1. Common JavaScript errors
      7m 14s
    2. Using Firebug
      4m 7s
    3. Going through a debugging session
      10m 20s
  9. 10m 13s
    1. Accessing form elements
      4m 20s
    2. Preventing a form from being submitted
      2m 36s
    3. Hiding and showing form sections
      3m 17s
  10. 9m 49s
    1. CSS and JavaScript
      3m 46s
    2. Removing and applying CSS classes
      2m 16s
    3. Changing inline styles
      3m 47s
  11. 19m 44s
    1. Understanding JavaScript style
      7m 39s
    2. Minifying your code
      4m 28s
    3. Using JavaScript code checkers
      7m 37s
  12. 22m 24s
    1. Introduction to JavaScript libraries
      3m 17s
    2. Linking to multiple JavaScript files
      2m 11s
    3. Introduction to jQuery
      12m 7s
    4. Using a content distribution network to deliver JavaScript files
      4m 49s
  13. 17m 35s
    1. JavaScript in HTML5
      9m 37s
    2. Using Modernizr
      3m 2s
    3. Using Strict Mode
      4m 56s
  14. 33m 3s
    1. Knowing the JavaScript to avoid
      6m 35s
    2. Introduction to regular expressions
      6m 56s
    3. Working with AJAX
      10m 44s
    4. Working with objects and prototypes
      8m 48s
  15. 21m 10s
    1. Example: Countdown
      8m 3s
    2. Example: Resize
      5m 47s
    3. Example: Accordion
      7m 20s
  16. 4m 58s
    1. Where to go from here
      4m 0s
    2. Goodbye
      58s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.