We will conclude our introduction to web technologies and design with a brief study of JavaScript and jQuery. When we started this course, we learned that there are three key web technologies:
JavaScript is what we call a "scripting" language. JavaScript is a programming language that runs on your web browser. In essence, you can run little programs on your web site. Because JavaScript and jQuery both run on your web browser, they are "client scripting" languages. Your computer (or mobile phone, tablet, etc) is considered the "client". The opposite of a "client scripting" language is a "server scripting" language. In the case of a "server scripting" language, the code is not run on your computer, but on a remote computer, which then sends the completed code to your computer.
How about an example of a program that does not use a scripting language? Well, you run programs all the time on your computer. Microsoft Word is an example of a very popular program that can can run on your computer. You launch the program, and it runs until you quit the program. We think of scripting programs as programs that run once, and then quit, unlike Microsoft Word which runs until you specifically stop the program.
This is not a strict definition, there is no point where a "scripting" language becomes a "regular" language. In fact, some web applications built using JavaScript work in much the same way as a "regular" program. But we still refer to JavaScript as a scripting language.
JavaScript has been around for a long time, more than twenty years, and has its roots in the web browser wars of the late nineties. The developers of the Netscape browser, now known as Firefox, realized that the web browsing experience would be greatly enhanced if there was some kind of scripting language that could run programs on a web browser. Brendan Eich created JavaScript in May 1995.
Around the same time that JavaScript was getting off the ground, Microsoft was developing the "Active X" scripting language for Internet Explorer. Having two competing scripting languages caused a great number of headaches for developers. Eventually a common standard was adopted, and now all web browsers have the ability to run JavaScript.
If a web page contains JavaScript, the web browser will understand the code, and execute the code, in the same way that when a web browser sees HTML code, it understands the code and will process the HTML to make the web page. Also, like HTML, JavaScript is free. You do not have to pay a fee to run JavaScript.
A name was needed for the new programming language, and "JavaScript" was chosen, primarily to associate the unknown program with the very popular Java programming language. Unfortunately, this has been a source of continued confusion ever sense, as JavaScript is not the same as Java. While the programs share some similar features, they are mostly the common features found with all programming languages.
For example, both Java and JavaScript are case sensitive. In both languages, the variable "superimage" is not the same as "Superimage." On the other hand, Java is a "strongly typed" programming language, while JavaScript is a "weakly typed" programming language. Without getting into the specifics, this means that programming in Java requires a greater amount of detail, while JavaScript is somewhat friendlier to the programmer, and a bit easier to write.
We will not be creating any JavaScript code in this class. Instead, we will be copying and pasting code into our web pages. JavaScript has more than enough detail to warrant a separate course, or several courses. Still, let us review a few JavaScript basics to keep in mind.
The JavaScript Tag
All JavaScript must be contained inside the JavaScript tag. This is a HTML tag that goes before and after the JavaScript. It works like our other HTML tags. Here is a very simple bit of JavaScript that will display the message "This is JavaScript":
<script>
window.alert("This is JavaScript");
</script>
Notice that we have an opening and closing JavaScript tag, and one line of code. You can copy this code, and add it to any page on your website, or try using the JavaScript at the W3 Schools TryIt Editor.
Differences Between HTML4 and HTML5
If you are looking for some JavaScript to add to your website, you may see some code written with a slightly different JavaScript tag:
<script type="text/javascript">
window.alert("This is JavaScript");
</script>
Before HTML5, you were required to include the type attribute, type="text/javascript". This is no longer necessary. If you do include the type="text/javascript" attribute, your code will work just fine, but this is no longer required.
You already have some JavaScript on your website! When Dreamweaver created your HTML page using the Bootstrap framework, a JavaScript file name "bootstrap.js" was added to the "js" folder. Among other things, the code in this file makes your navigation bar work. Without this code, the Bootstrap navigation will not function properly. This JavaScript is also required for the image carousel we added, and this JavaScript also drives the "Learn More" modal on the home page.
In addition to working with JavaScript, we will be making use of jQuery. I think of jQuery as JavaScript on speed dial. You can dial a friend's phone number each time you call, or you can use the "speed dial" feature on your phone to dial the number for you. For the phone company, the outcome is the same, a series of numbers is received, and a connection is made.
About ten years after the introduction of JavaScript, developers noticed they were using they were using some chunks of JavaScript over and over again. Having a library of some of the most popular chunks of JavaScript would save time and ease the process of creating web pages. John Resig released jQuery in 2006. Like JavaScript and HTML, jQuery is a free resource. There is no charge to use jQuery on your website.
Features of jQuery:
Less code to write: First and foremost, since jQuery bundles together frequently used code, there is just less work for the developer when using jQuery. jQuery describes itself as the "Write Less, Do More" JavaScript library.
The first thing you may notice when using jQuery is the "$" that shows up over and over again. You will wonder, what on earth is the "$" sign? The "$" is the same thing as jQuery! Rather than write "jQuery" over and over again, you can use the "$". These two examples of code do the exact same thing:
<script>
jQuery(document).ready(function(){
jQuery("#div1").fadeIn();
jQuery("#div2").fadeIn("slow");
jQuery("#div3").fadeIn(3000);
});
</script>
<script>
$(document).ready(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
</script>
Which code would you rather write?
Actually, let's look at that code again. There is a very important, commonly used jQuery function included, the "document ready" function:
$(document).ready(function(){
/* insert various jQuery or JavaScript code here */
});
Basically, this prevents the code from running until the web page has finished loading. This function is frequently used as a "wrapper" for JavaScript and jQuery. This simple bit of code makes sure that all the elements are in place before the JavaScript or jQuery code starts to run.
Using CSS Selectors with jQuery
Throughout this course we have created CSS selectors to target elements on a web page. Recall the CSS selector that we used to target all images inside an element with an id="photoGallery":
#photoGallery img
If I want to target these elements using jQuery, I can use the exact same CSS selector. If you know how to target an element using CSS, then you can target an element using jQuery! Doing the same thing with plain JavaScript is more complex.
Imagine you have a paragraph on your web page with an ID of "target":
<p id="target">We want to change this text!</p>
If I want to change to color of the text in this paragraph, I can use the CSS selector "#target":
<style> #target { color:red; } </style>
But I can also change the text itself, using jQuery:
$( "#target" ).html( "Hello <b>World</b>!" );
Reducing Cross Browser Incompatibilities
Finally, jQuery is great for reducing cross browser incompatibilities. In most cases, we are broadly talking about Internet Explorer versus all other web browsers. This goes back to the early days of JavaScript, when it was competing with Active X. There is still a legacy of some JavaScript not working as expected in Internet Explorer. jQuery has built in tests for the Internet Explorer web browser and alters the code to produce consistent results.
The first step to using jQuery is including jQuery in your website. While all web browsers can immediately process JavaScript, you need to add the jQuery library to use jQuery. You can link to a copy of the jQuery library saved locally inside your website, or you can link to a CDN, or content delivery network, as you did with the Font-Awesome library.
Here is the link to a CDN maintained by Google:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
When Dreamweaver created your HTML page using Bootstrap, a local copy of the jQuery library was added to the "js" folder. The file added has a name something like "jquery-1.11.3.min.js". The first part of the name, "jquery" tells us that this is the jQuery library, and the numbers give us the version. The version numbers may change with time.
You will add a very popular jQuery program called FancyBox, developed by Janis Skarnelis, that opens an image in a new window in front of the existing window when the visitor clicks on an image. We call this a "Lightbox".
A Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page. (Lightbox - JavaScript Wikipedia)
The term originally referred to boxes with lights inside, typically with a frosted panel to diffuse the light on one side for consistent illumination, like a glowing table top. Photographers would lay strips of film against the light box, then use special magnifiers to closely examine each image.
If you come across a jQuery package of code you would like to add to your website, you will find that there are typically three elements to install:
In the case of the FancyBox light box we will be adding, here are the three parts:
The first element is self-explanatory, this is the JavaScript code. If the package uses jQuery, like FancyBox, then you will need to place this code on the web page after the code that loads the jQuery. This is why our web page has the link to the bootstrap jQuery file first, then the bootstrap.js file next. The bootstrap.js file is dependent on the jQuery code.
The next file is the CSS file. This file adds the proper styling, or appearance to the page. In the case of FancyBox, this styles the appearance of the photos we will be linking to.
The final element is the initialization script. This is the code that actually starts the program running. If there are different features or options for the program, you can set them in the initialization script. The initialization script for FancyBox is typical:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
You will notice the "document ready" function that prevents FancyBox from running until all the elements in the page have loaded.
Next is the actual FancyBox function itself. Inside the parenthesis is '.fancybox'. You can see that this is a class selector. We can use the CSS selector '.fancybox' to target anything with a class="fancybox".
In plain English, this line of code says:
"Apply the FancyBox jQuery application to any element on the web page that has a class of 'fancybox'."
To enable our website to use FancyBox on the page, we will be adding a class of "fancybox" to various images we have linked to.
And So Much More...
50 Amazing jQuery Plugins That You Should Start Using Right Now
Wayne Joness
West Los Angeles College, cs952
Fall