Understanding JavaScript Basics - JavaScript - PHP, MySQL, JavaScript & HTML5 All-in-One For Dummies (2013)

PHP, MySQL, JavaScript & HTML5 All-in-One For Dummies (2013)

Book III: JavaScript

Chapter 1: Understanding JavaScript Basics

In This Chapter

arrow.png Understanding JavaScript’s role in web programming

arrow.png Adding JavaScript to a page

This minibook is all about JavaScript and its place in building web applications. JavaScript is a very powerful language, and you can use it to add great features to enhance the user experience. In this chapter, we tell you a little bit about the types of interactivity that you can add to a web page with JavaScript and then show you how to add JavaScript to a page.

In the next chapter, we show you how to use JavaScript to perform some very basic programming functions, and then we follow that with a look at more practical items with JavaScript.

Viewing the World of JavaScript

JavaScript is used for web programming to enhance or add to the user experience when using a web page. This section looks at some of the aspects of JavaScript that will help you understand the language and give you a good foundation upon which you’ll be able to really make your web pages stand out.

JavaScript isn’t Java

Don’t be confused by the name. JavaScript has absolutely nothing to do with Java — the coffee or the programming language. JavaScript’s name came about because marketing folks wanted to latch onto the “cool” factor back when the Java programming language was shiny and new.

Java is a heavy language that doesn’t necessarily run on everyone’s computer; people have to install extra software to get it to run. Although powerful, Java is not meant for the types of web programming that you usually need to do. JavaScript, on the other hand, is included with just about every web browser and doesn’t need anything else installed. You use JavaScript to make the pages come alive, with auto-populating form fields, and all kinds of bells and whistles that enhance the user experience.

One of the most common things that we hear from nontechnical folks is confusing or calling JavaScript, “Java.” Now that you know that the two are completely different, you won’t do the same! You will, however, need to resist the urge to correct people when you hear them confuse the two languages.

technicalstuff.eps JavaScript is defined by the specification known as ECMA-262. Web browsers have varying degrees of support for the ECMA-262 specification, so the exact version of JavaScript that’s available in the browser varies according to the version of the browser being used.

Knowing what JavaScript can do

JavaScript is an integral part of web pages today. When you see something like Google Maps, where you can scroll left and right by simply dragging the map, that’s JavaScript behind the scenes. When you go to a site to look up flight details, and the site automatically suggests airports as you type into the field, that’s JavaScript. Countless widgets and usability enhancements that you take for granted when you use the web are actually JavaScript programs.

JavaScript programs run in the user’s web browser. This is both a blessing and a curse. On the one hand, by running on the user’s web browser it means that your server doesn’t need to run the program. On the other hand, by running in the user’s browser it means that your program runs slightly differently depending on the version of browser that the user is using on your site. In fact, the user may have JavaScript turned off completely!

While theoretically all JavaScript should run the same, in practice it doesn’t. Internet Explorer, especially older versions like 6 and 7, interpret JavaScript in entirely different ways than other browsers like Firefox and Chrome. This means that you need to create two different programs or two different ways to make the same thing work on your web pages. Luckily, there are ways around this, which you discover in this minibook.

Examining the Ways to Add JavaScript to a Page

Although JavaScript is included in everyone’s web browser, you still need to program the actions that you want to happen on your page. You might recall from Book II, Chapter 2, if you’ve read it, that you can style your page with Cascading Style Sheets (CSS) added directly to the HTML or reference a separate CSS file. Similarly, this section shows the various ways to incorporate JavaScript into a page. You can add the JavaScript directly to the HTML file, reference a separate JavaScript file, or do both — and we help you understand when each option is appropriate.

Adding the JavaScript tag

You add JavaScript to a page with the <script> tag, like this:

<script type="text/javascript">

// JavaScript goes here

</script>

You may see various ways to include JavaScript in a page, like "text/ecmascript" or without the type attribute at all, just an empty <script> tag. These methods work, sort of, and some of them are technically correct. But the one that you see most often and the one that we've had the best luck with is the one shown, with a type of "text/javascript".

If you’re wondering, the sets of double slashes you see in this example start a comment, which we tell you more about in the next chapter.

Adding JavaScript to a page’s HTML

Always position the JavaScript code after the opening <script type="text/javascript"> tag and before the closing </script> tag. You can include those tags in both the <head> section and the <body> section of a page.

Here’s an example showing JavaScript in two different locations in a page:

<!doctype html>

<html>

<head>

<title>Another Basic Page</title>

<script type="text/javascript">

// JavaScript goes here

</script>

</head>

<body>

<h1>Here's another basic page</h1>

<script type="text/javascript">

// JavaScript can also go here

</script>

</body>

</html>

You could actually place as many of those separate script elements as you want on a page but there's usually no reason to do so.

Using external JavaScript

The example you just saw shows JavaScript within the page, in much the same way that you can add CSS inside of a page. Although that method works for small scripts and certainly comes in handy for showing examples in this book, a better way to add JavaScript is by using external JavaScript files.

tip.eps Using external JavaScript files is the same concept as using external files for CSS. Doing so promotes reusability and makes troubleshooting and changes easier.

You can add external JavaScript by using the src attribute, like this:

<script type="text/javascript"

src="externalfile.js"></script>

This example loads the file "externalfile.js" from the same directory on the web server. The contents of that file are expected to be JavaScript.

remember.eps Notice in this example that there's nothing between the opening <script> and closing </script> tags. When using an external JavaScript file, you can't put JavaScript within that same set of tags.

You could add a reference, like the one shown, anywhere in the page, but the traditional spot for that is in the <head> section of the page. Also note there's nothing preventing you from using an external JavaScript file along with in-page JavaScript, so this is perfectly valid:

<!doctype html>

<html>

<head>

<title>Another Basic Page</title>

<script type="text/javascript" src="externalfile.js"></script>

<script type="text/javascript">

// JavaScript goes here

</script>

</head>

<body>

<h1>Here's another basic page</h1>

</body>

</html>

This example loads an external JavaScript file and then runs some JavaScript right within the page.