Basic thing you should know

Loading an External Script
Adding an Embedded Script
Handling JavaScript Events

As you can see, JavaScript has quite arange of possibilities, and its use hasexploded. JavaScript libraries like jQuery ( jquery.com), MooTools (mootools.net), YUI(yuilibrary.com), and others have made it easier to add both simple interactivity and sophisticated behavior to pages, whilehelping them behave consistently across browsers. Of these, jQuery enjoys the most widespread use, largely because beginners find it easier to learn, it has good online documentation, and it has a large community behind it. JavaScript also works in tablet and modern mobile browsers, though for performance reasons you’ll want to be smart about how much you load in pages for these devices. I’ll stick to explaining how to insert scripts, once created, into your HTML documents. I’ll also pass along some basic advice about how to do that in a way that minimizes the impact on your page’s rendering time, and I’ll give you a quick look at event handlers.

A The src attribute of the script elemen references the script’s URL. Most of the time, it is best to load scripts at the very end of your page, just before the end tag. You may also load scripts in your page’s head element

B It can affect how quickly your page displays. See the “Scripting and Performance Best Practices” sidebar for more information.

          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="utf-8" />
         <title>Loading an External Script</title>
         <link rel="stylesheet" href="css/base.css" />
         </head>
         <body>
          ... All of your HTML content is here ...
         <script src="behavior.js"></script>
        </body>
         </html>

This example shows a script loaded in the head instead. It is after the link element, so it won’t block the CSS file from beginning to load sooner. See the “Scripting and Performance Best Practices” sidebar to learn why you want to minimize how often you load scripts from the head

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="utf-8" />
        <title>Loading an External Script</title>
        <!-- Load style sheets before any JS files -->
        <link rel="stylesheet" href="base.css" />
       <script src="behavior.js"></script>
      </head>
     <body>
     ... All of your HTML content is here ...
     </body>
     </html>

To load an external script:

Type , where script.js is the location on the server and the file name of the external script. Place each script element directly before the end tag whenever possible.

Your page may load multiple JavaScript files and contain multiple embedded scripts (see in “Adding an Embedded Script”). By default, browsers will load (when necessary) and execute scripts in the order in which they appear in your HTML. See the sidebar to learn.

To keep your files organized, it’s common to place your JavaScript files in a sub-folder ( js and scripts are popular names). Your src attribute values would need to reflect this, just like any URL that points to a resource. For instance, if the file in [ A ]were in a folder named assets/js/ , you could type .

Each script element is processed in the order in which it appears in the HTML, whether it’s an embedded script or an externalone (see “Loading an External Script”).

Even though the script element requires an end tag ( ), you can not embed code between it and the start tag when a src attribute is present (see “Loading an External Script”). In other words, is invalid. Any given script element may only either load an external script with src , or embed a script and not have a src .

A An embedded script doesn’t have a src attribute. Instead, the code is in the page. If you embed a script, do so directly before the end tag whenever possible. It’s also possible to embed a script in the head B but it’s less desirable from a performance standpoint.

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8" />
      <title>Adding an Embedded Script</title>
      <link rel="stylesheet" href="css/base.css" />
      </head>
      <body>
      ... All of your HTML content is here ...
     <script>
      /*
     Your JavaScript code goes here
      */
     </script>
    </body>
   </html>

B This example shows a script embedded in the head . It appears after the link element so that the CSS file will load faster. See the “Scripting and Performance Best Practices” sidebar to learn why you want to minimize how often you embed scripts in the head.

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="utf-8" />
        <title>Loading an External Script</title>
        <!-- Load style sheets before any JS files -->
        <link rel="stylesheet" href="base.css" />
        <script>
        /*
       Your JavaScript code goes here
      */
      </script>
      </head>
      <body>
      ... All of your HTML content is here ...
      </body>
      </html>

Working with Scripts

To load an external script: