Jumping into jQuery and JavaScript Syntax
- Adding jQuery and JavaScript to a Web Page
- Accessing the DOM
- Understanding JavaScript Syntax
- Understanding JavaScript Syntax, continued
- Summary / Q&A / Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Throughout the book, you’ll see several examples of using jQuery and JavaScript to perform various dynamic tasks. jQuery doesn’t replace JavaScript, it enhances it by providing an abstract layer to perform certain common tasks, such as finding elements or values, changing attributes and properties of elements, and interacting with browser events.
In this hour, you learn the basic structure and syntax of JavaScript and how to use jQuery to ease some of the development tasks. The purpose of this hour is to help you become familiar with the JavaScript language syntax, which is also the jQuery language syntax.
Adding jQuery and JavaScript to a Web Page
Browsers come with JavaScript support already built in to them. That means all you need to do is add your own JavaScript code to the web page to implement dynamic web pages. jQuery, on the other hand, is an additional library, and you will need to add the jQuery library to your web page before adding jQuery scripts.
Loading the jQuery Library
Because the jQuery library is a JavaScript script, you use the <script> tag to load the jQuery into your web page. jQuery can either be downloaded to your code directory and then hosted on your web server, or you can use the hosted versions that are available at jQuery.com. The following statement shows an example of each; the only difference is where jQuery is being loaded from:
<script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="includes/js/jquery-latest.min.js"></script>
The jQuery library downloads and hosted links can be found at the following location: http://jquery.com/download/
Implementing Your Own jQuery and JavaScript
jQuery code is implemented as part of JavaScript scripts. To add jQuery and JavaScript to your web pages, first add a <script> tag that loads the jQuery library, and then add your own <script> tags with your custom code.
The JavaScript code can be added inside the <script> element, or the src attribute of the <script> element can point to the location of a separate JavaScript document. Either way, the JavaScript will be loaded in the same manner.
The following is an example of a pair of <script> statements that load jQuery and then use it. The document.write() function just writes text directly to the browser to be rendered:
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function writeIt(){
document.write("jQuery Version " + $().jquery + " loaded.");
}
</script>
Accessing HTML Event Handlers
So after you add your JavaScript to the web page, how do you get it to execute? The answer is that you tie it to the browser events. Each time a page or element is loaded, the user moves or clicks the mouse or types a character, an HTML event is triggered.
Each supported event is an attribute of the object that is receiving the event. If you set the attribute value to a JavaScript function, the browser will execute your function when the event is triggered.
For example, the following will execute the writeIt() function when the body of the HTML page is loaded:
<body onload="writeIt()">
Try it Yourself: Implementing JavaScript and jQuery
Those are the basic steps. Now it is time to try it yourself. Use the following steps to add jQuery to your project and use it dynamically in a web page:
- In Aptana, create a source folder named hour05.
- In the same folder as the hour05 folder, add an additional directory called js.
- Go to jQuery.com/download and download the latest jQuery library to that folder and name the file jquery.min.js. The file may come up as clear text in the browser. If so, just press Ctrl+s (Command-s on Macs) and save the file that way.
- Now create a source file named hour0501.html in the hour05 folder.
- Add the usual basic elements (html, head, body).
Inside the <head> element, add the following line to load the library you just downloaded:
06 <script src="../js/jquery.min.js"></script>
Now you can add your own <script> tag with the following code to print out the jQuery version to the browser windows:
07 <script> 08 function writeIt(){ 09 document.write("jQuery Version " + $().jquery + " loaded."); 10 } 11 </script>To have your script execute when the document is loaded, tie the writeIt() function to the <body> onload event using the following line:
13 <body onload="writeIt()">
Save the file, shown in Listing 5.1, and view it in a web browser. The output should be similar to Figure 5.1.
FIGURE 5.1 The function writeIt() is executed when the body loads and writes the jQuery version to the browser.
)
LISTING 5.1 Very Basic Example of Loading Using jQuery in a Web Page to Print Out Its Own Version
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 5-1</title>
05 <meta charset="utf-8" />
06 <script src="../js/jquery.min.js"></script>
07 <script>
08 function writeIt(){
09 document.write("jQuery Version " + $().jquery + " loaded.");
10 }
11 </script>
12 </head>
13 <body onload="writeIt()">
14 </body>
15 </html>