HTML and JavaScript

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 it's basic capabilities, while focusing on how JavaScript and HTML work together.

it's basic capabilities, while focusing on how JavaScript and HTML work together. And the first thing I want to do is to show you how integrated JavaScript is in today's web environment. And I'm going to 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 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. I'll want to find out what courses I have for specific topics. Now, a lot of the things that are, 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. Now 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 is handling those. And any little icons that I have up here that tell me if there are any new notifications.

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 get 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 going to 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 now to lynda.com, and I go back to the homepage, 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. 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 working on our HTML essential. Training reference site, by adding sub tabs panels to 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 clicked 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's 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 integrated 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 it 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 started to master HTML.