<-- Back to point64.com Javascript/jQuery Notes, Page 2
Development Environments and Technical References
While experimenting with JavaScript, I use Notepad++ - a free source code editor and supporter of multiple languages.
Inspiration for code samples, definitions, and concepts are derived from multiple locations (books, websites) including, but not limited to the jQuery.com website and:
 Head Rush Ajax by Brett McLaughlin |
 JavaScript Frameworks by Orchard, Pehlivanian, Koon, Jones |
 Eloquent JavaScript: Modern Introduction to Programming by Marijn Haverbeke |
 Building a Web 2.0 Portal with ASP.NET 3.5 by Omar AL Zabir |
Javascript is primarily used in the form of client-side scripts, implemented as part of a web browser to provide an enhanced user interface. The primary use of JavaScript is to write functions that are embedded in or included from HTML pages and that interact with the Document Object Model (DOM) of the page. Simple examples include: Opening or popping up a new browser window with programmatic control over the size, validating input values of a web form to make sure that they are acceptable before being submitted to the server, and changing images as the mouse cursor moves over them.
Automatic type conversions can occur by adding non-string values to a string or by multiplying a number and a string. The statement "8" * 8 results in 64 while the statement "eight" * 8 results in NaN (not a number). Interestingly enough, NaN does NOT equal NaN. Checking NaN requires the usage of the isNaN function. In the statement "8" * 8, the first 8 is implicitly converted into a number. The keyword Number can be used to explicitly convert the string to a number: (Number("8") * 8);
The operator || is used as an OR operator within an IF statement like this:
if (("website" == "point64.com") || ("website" == "point64") { // OR comparison
The operator || can also be used an indicator to determine if a field value exists. This code will return the field value (if it exists) or an empty string if the value does not exist:
var fieldvalue = (data.d[index].SomeDataField || "");
|
Demonstrations and Functions javascript calculator demo: |
|
javascript calculator source: |
Number to binary, hexadecimal, octal conversion demo:
Enter a number:
Number to binary, hexadecimal, octal conversion source:
In the calculator demo and conversion demo above, we use functions (routines that return a value). The calculator demo uses the JavaScript eval() function to perform calculations for the calculator. The conversion demo uses the dec2bin function to convert a decimal value into binary, hexadecimal, and octal. You can see the inner-workings of the dec2bin function and the way it writes out the result to the web page (sets innerHTML of the result element to the output value).
The syntax for the dec2bin function is less than ideal. Instead of using the function to write output to the screen, it is preferable to have the function return a value using the "return" keyword, like this:
This way, the power() function can be utilized in multiple locations throughout your application - locations like textboxes, labels, and alert boxes by calling it:
alert(power(2, 10));
Recursive power function:
The power function can be rewritten using Recursion, however, the performance is less than ideal. Most browsers are much slower in calling a function multiple times than running through a simple loop multiple times.
While writing JavaScript, you can compare test cases via jsPerf - JavaScript performance playground.
Prototypes and objects
This is a simple object:
var website = {url: "www.point64.com", color: "black", accessibility: "public"};
To set and show properties of the "website" object:
website.color = "white";
show(website.url);
To create another simple object, type:
var myObject = {};
The reason this works is because {} is the same as typing "new Object()". All objects are based on a prototype that gives new JavaScript objects a default set of properties and methods. The most basic prototype is associated with the Object constructor. You can access the prototype property via the prototype keyword.
Prototypes influence objects that are based on it, but influenced objects never change the prototype.
var WingedAnimal = {};
WingedAnimal.prototype.CanFly = true;
var duck = new WingedAnimal("duck");
var chicken = new WingedAnimal("chicken");
chicken.CanFly = false;
JavaScript will first look at the property an object has (chicken.CanFly?, duck.CanFly?). If it finds the property name within the object, it will use that property. In the case of chicken, JS will determine that chicken cannot fly. If JS does not find the property in the object, JS searches the prototype of the object. In the case of duck, JS will determine that duck can fly (based on the prototype property).
Using the "hasOwnProperty" method and passing in the property name, you can determine if the property is set in an object's prototype or in the object itself.
Here's another example of using the prototype property to add a property to an object:
Arrays are special objects that can provide helpful properties (length property to determine size and other special array operations). When looping through an array, remember that we start at element 0 and the last element can be found at position x - 1. To create an empty array object, type:
var somearray = [];
To add items to your new 'somearray', use the push method:
somearray.push("Item1");
somearray.push("Item2");
somearray.push("Item3");
In the case you want to create a large string from all of the string values in a string array, you can use the .join(). join() allows you to pass a parameter that will be pasted between each value.
If I wanted to create a pipe-delimited string from the somearray we created, I would type this:
var somestring = somearray.join("|");
Now that we have turned our array into a pipe-delimited string, let's turn our pipe-delimited string back into an array. The split() keyword takes an argument to determine where to cut. In our example we will pass in a pipe "|".
var backtoSomeOtherArray = somestring.split("|");
You will see the push() and split() again in the source code for the "Random Quote Loader" and "Random Image Loader" at the bottom of this page.
As you build out JS objects, you can explore different JS patterns. This is the Revealing Module Pattern:
jQuery is a JavaScript library that simplifies client-side scripting. jQuery is the most popular JavaScript library in use today (18 August 2012). jQuery is free and very easy-to-use.
Start coding with jQuery:
Step 1. Download the latest jQuery from here. The code looks something like this:
Step 2. The downloaded JavaScript library should be in a file named 'jquery-1.8.0.min.js' or something similar. Save the file in the same folder as your web page. This file MUST be referenced in the web page wanting to use jQuery. To reference the file, place code like this in your web page:
Step 3. Run a jQuery test. Add this HTML-JavaScript-jQuery to your page:
If your jQuery code is correct, the behavior of the buttons will be similar to the behavior of clicking the buttons above.
In three simple steps, we unlocked the power of jQuery. Displaying yellow text is only the beginning. Using jQuery's html method was just an easy way to access the browser's innerHTML property. Experiment with the html method and with .fadeIn() and .fadeOut() to see some animation techniques the jQuery library provides.
Here's the source for the fade example (assumes existing reference to jQuery library):
jQuery.com describes the special effects in great detail. The .hide() and .show() methods are especially helpful because they allow you to present and suppress different parts of a web page based on the action.
Using .show() and .hide(), let's make the astronaut clickable and show a table. Click on the astronaut below to show the table, then click again to hide the table.
Click to show and hide:
Here's the source to toggle the visibility of the Astronaut table:
You've created a table that can be toggled visible and invisible using jQuery. Customize your table to include HREF tags, a background image and you have an expandable/collapsible navigation menu for your website.
Click to show and hide:
AJAX (Asynchronous JavaScript XML) is a group of interrelated web development techniques utilized on the client-side to create interactive web applications. With AJAX, web applications can pull data from the server asynchronously in the background without interfering with the existing display and behavior of the page. The use of Ajax techniques has led to an increase in interactive, dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object.
The jQuery library includes the .ajax() method that performs an asynchronous HTTP request.
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
Random Quote Loader
With jQuery, we can write some code that can take all the quotes from a text file and display a random quote each time a button is clicked. I have created a text file called point64quotes.txt and placed it in the same folder as this web page.
Click to show random quotes:
Here's the source code for the random quote loader:
Random Image Loader
With the random quote loader example working, let's create a function to loop through all images on a page and randomly display one of the images when the user clicks a button.
To get a page with bunch of images, I will be using the page: www.point64.com/space/
Step 1. Loop through all images and save the SRC attribute to an array.
Step 2. Grab a random index.
Step 3. Render dynamic HTML to display the random image.
Click to show random images:
The Random Image Loader ties many pieces of code together (array building, image control looping, random number generation, and dynamic HTML rendering). This is the source code:
Do you have any tips, tricks, topics or questions that should be included?
Send them to me:
<-- Back to point64.com Javascript/jQuery Notes, Page 2