Live examples - JavaScript Tutorial

- [Instructor] We pretty much interact with JavaScript all the time. But you might not know exactly what pieces of interactivity JavaScript may be responsible for on the sites you visit. To get a better idea, let's take a look at a few Websites toggling JavaScript off, and seeing what happens. We'll start with this one, Two Trees Olive Oil. All these sites are going to be fictitious brands that we use for demonstration purposes. But the Websites are live on the internet. If we scroll down a little bit on this site, we can see that the logo kind of zips up into the sticky header, in and out. We have some drop down menus here, a couple of buttons with their own little drop down menus and some interactivity there. It's a nice looking site. Let's turn JavaScript off, here in Safari. I'm using Safari because it makes it the easiest to turn JavaScript on and off. Here, in the Safari Preferences, under Security, I just have a simple checkbox here, to enable JavaScript. I've turned it off. Let's reload the page. We can see that the drop down menus still work although there's no special trimmings here, to show me that it's a drop down menu. That account and that shopping cart icon are somehow gone. And if I scroll down the page, the sticky header is still sticky, but it doesn't have its background color and the logo just kind of stays there. So JavaScript takes care of some things that I wouldn't necessarily have expected here, some styling as well as some interactivity. Let's turn JavaScript back on and now I'll go to the Landon Hotel site. If I click this button, I smoothly scroll down to the next section, and all of this navigation will take me around on this Website. Once I get into the Guest Room section, first, note that when I start scrolling, all of these navigation elements update with my scrolling. And as I scroll, I have these sort of weight points, where a little piece of content is made to appear and disappear, depending on where I am in my scrolling. I'm using the scroll wheel as I go down here, and you can see these all change. And let's note that they're full screen, as well. If I keep scrolling down the page, I have this split screen kind of effect, here. Okay, once again, nice looking site. Let's see what happens with no JavaScript. Scroll all the way back up. Turn it off and reload. Okay, first of all, none of these scenes is filling the screen, entirely. Notice that this navigation is no longer following me around. That said, if I click that arrow, I still go to where I'm supposed to go. Clicking those buttons in the navigation does take me to the sections where they're supposed to appear, and that content that was in each of these sections, no longer animates but it is displayed. So in my opinion, this is a pretty good example of progressive enhancement. The site still works fine, even with JavaScript unavailable. The only issue we have here, is this split screen area where we had side-by-side panels of content kind of collapses into a little mess, here. Otherwise, we're in pretty good shape. Turn JavaScript back on, and one more example. Let's refresh this page. We have some drop down menus, another cart area, and we have some bouncing effects here, on all of these images. All these items are filling the screen, here. All right, let's turn JavaScript off again, and reload. This is interesting. All the same content appears, but it no longer fills the screen, and the bounce doesn't happen on hover anymore. It just happens initially, when the page first loads, and that's it. So it's a little strange. The JavaScript is affecting presentation a little more than activity in some cases, here. But that said, the site is still entirely accessible even with JavaScript turned off. I can go to the shopping cart, still, and I can still see how much stuff I have in the shopping cart, even with all that turned off. One thing to note about this site is that if I simulate being on a smaller screen by shrinking my window, there's a menu button here, that doesn't work at all when JavaScript is disabled. I need to turn that back on for this menu to work. Reloading, turn that back on, and now I can see this menu. So that would be something to consider for progressive enhancement purposes. So now we've seen some JavaScript in action and really looked at what it's doing, and not doing. Ideally, we'd like to enhance our sites with JavaScript starting from a baseline of total accessibility to the greatest possible extent. Then we can add JavaScript on top of that for enhanced interactivity, and the occasional feature. In these examples, we've seen some areas where that was working successfully, and some where it wasn't. Keep this in mind when you're building your own sites. People might turn JavaScript off, or simply not have access to it, and plan accordingly.