HTML and JavaScript

- [Instructor] Much the same way that HTML and CSS work together, HTML and JavaScript have become almost inseparable as well. JavaScript is a scripting language developed for the web and supported in almost every web client available. Although it started out as a basic scripting language to help control behavior, JavaScript has evolved into a serious programming language that entire applications are built off of. As you can imagine, there's not enough time or space to discuss the entire scope of JavaScript in a single chapter, so what I'd like to do is introduce you to JavaScript and some of its basic capabilities while focusing on how JavaScript and HTML work together.

And the first thing I wanna do is to show you how integrated JavaScript is in today's web environment. And I'm gonna do that by showing you a couple of popular sites while having JavaScript turned off in the browser. So here we are at the lynda.com site that you know and love. You notice that if I go up to lynda.com now and choose browse the library, instead of getting a drop down menu, I get a pretty big list of links that I can then browse through and click if I wanna find out what courses I have for specific topics.

Now a lot of these things that you might be normally familiar with in the lynda.com interface such as tabs and carousels and things like that are now gone. And that's because JavaScript is required for those to function. If I go to Twitter, and this is my Twitter page and you can kind of see a lot of the information or images or things like that that are usually displaying in these tweets are gone now because JavaScript handling those and any little icons that I have up here that tell me if there are any new notifications or new tweets in my feed are gone now because again, they rely on JavaScript.

Now both of those sites are impacted but they're impacted in minor ways simply because they have certain functionality turned off. But the overall functionality of the site is pretty well preserved. Other sites take it a little bit further. Let's take a look at adobe.com. So this is adobe.com with JavaScript turned off. As you can see, there are still a lot of things that I can access on the site, but that's not really a great experience. Now, in their defense, not too many people are browsing the web these days with JavaScript turned off. But it's certainly a possibility, and as designers, we need to plan for it.

Now really quickly I'm gonna turn JavaScript back on using Firefox's config file. Don't tell them I showed you how to do this. A lot of people don't know. So now I've got JavaScript enabled again and if I come back to lynda.com, and I go back to the home page you can see that now the drop down menu works and it's a lot easier to navigate through all those categories. If I go back to Twitter, and refresh I see that now, I see all the images showing up, there's more information on the sidebar, there's some notifications up here that I've got some direct messages that people have sent me.

So I'm getting a lot more feedback. And if I go to Adobe, it's as if an entirely new world has opened up to me. So Adobe has a lot of dependencies on JavaScript in order for the site to actually work. So for the remainder of the chapter we're going to be working on our HTML Essential Training reference site by adding some tabbed panels to the Next Steps page. If I scroll down I can see right now this is what the page would look like if JavaScript was turned off. You can see we have three tabs, HTML, CSS, and JavaScript and then those three tabs are represented by these panels.

Now this is what it looks like when JavaScript is turned off. And even though it's not really a functioning tabbed panel, we're not hiding any information, or keeping information away from the user. In fact, these links are actually functional. If I click on JavaScript for example, it would jump down to the JavaScript section. This is what we call progressive enhancement. That means basically that when we're dealing with combined technologies like CSS, HTML, and JavaScript, we like to think about the minimum experience required for somebody to access the content.

If somebody has CSS disabled, or if they have JavaScript disabled, what is their experience like? It's not that we want to give them a great experience because if somebody is browsing with JavaScript turned off they're probably used to things not working great. But what we want is to make sure that they at least have access to the information. So now with JavaScript turned on, this becomes a tabbed panel, that actually works. So that should give you some idea as to how integrative HTML and JavaScript have become. The easiest way to describe how HTML and JavaScript work together is that JavaScript can access the basic structure and elements of a page, and then control them through scripting.

Now this could mean animating an element, showing and hiding it, reformatting, or even injecting new elements or content in the page when necessary. Obviously, learning JavaScript takes time and dedication. So in this chapter I just want to introduce you to some of the basic concepts of JavaScript. Later I'll provide you with some resources that can help you learn JavaScript once you've started to master HTML.