Home > Articles > Open Source > Ajax & JavaScript

Jumping into jQuery and JavaScript Syntax

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book
This chapter covers ways to add jQuery and JavaScript to your web pages, creating and manipulating arrays of objects, adding code logic to JavaScript, and implementing JavaScript functions for cleaner code.

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="http://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="http://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()">
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus