Main Body
Tutorial 7 • JavaScript and jQuery
This tutorial demonstrates the basics of using the JavaScript programming language and jQuery library to add interactivity to a web site. Thanks to Ahmed (Am) Sagarwala (GCM ’08) for contributing the section on jQuery.
“Plain” JavaScript
Using a Variable, Conditional Statement, and Function
In this section we will see how to write JavaScript code, include a conditional statement, and place the code into a function so it can be used multiple times.
- Open the starter document for the “Fireside Chat.”
- Inside the <div id=”livearea”>, place opening and closing <script> tags and add the code:
document.write("Welcome to the Fireside Chat web page.");Note that the text is written below the heading.
- Add opening and closing <p> tags inside the quotes. Add a style statement and style the text as you like.
- Above the “document.write” line, add a variable statement to hold the reader’s name:
var name=prompt("Please type your name."); - Add the variable name to the statement by placing it outside the quotes and connecting it to the text with “+” signs:
document.write("<p style="font-family: Georgia;">Welcome to the Fireside Chat web page, " + name + ".</p>"); - If the reader does not type a name, the statement will print with a blank. To prevent the statement from printing if the user does not enter a name, place the “document.write” statement in a conditional “if” statement:
if (name!="") { document.write("p style="font-family: Georgia;">Welcome to the Fireside Chat web page, " + name + ".</p>"); } - To make a function out of the statements, add opening and closing <script> tags to the <head>. Create the function by writing:
function writeName() { place code here } - Call the function by keeping the <script> tags in the <body> and writing:
writeName();
Making a Print Button
In this section we will create a function to print the page and link it to a button. Adding an “@media” query will enable fitting the document on a letter-size page and omitting the buttons from the print.
- Program the button at the bottom of the page to print the page.
- Add a function to the <script> tag in the <head>:
function printPage() { this.window.print(); } - Call the printPage function by linking it to the “Print” button:
<button onClick="printPage()">Print</button>
- Add an @media print {} query to confine the page to 8.5×11″ and hide the buttons in the print view:
@media print { body { transform: scale(0.85); } #page { width: 8.25in; height: 10.0in; } footer { display: none; }
Using Buttons to Change Color
In this section we will link a button to a function to change color of the text.
- In the <script> tag in the head, add a function to change color of the div “livearea”:
function colorGrey() { document.getElementById("livearea").style.color="dimgray"; } - Link the function to the “Grey” button:
<button onClick="colorGrey()">Grey</button>
- Create a similar function to change the text color back to black.
jQuery JavaScript Library
jQuery is a curated library of functions that was started by a group of computer science professors at MIT. jQuery simplifies the application of JavaScript by providing pre-coded functions. Instead of scripting all of the steps to select an element and make it do something, we can usually achieve this in a few lines of code using jQuery’s functions.
The jQuery library is only a few K in file size and can be downloaded and hosted on your site or linked-to on the code.jquery.com site.
To create an interaction using jQuery, think of a sequence of events—an action and the resulting reaction. For example:
- The user moves the cursor to a button.
- A click action on the button takes place.
- An element on the page reacts by fading out.
1. Create Custom Style to Change Color
Create a custom style that will be applied to change the color.
#box.new-color {
background: lightblue;
}
2. Link to jQuery
Links to the jQuery and jQueryUI libraries need to be inserted. You can download both libraries and host them on your site, or link to them on Google’s hosted libraries site, GoogleAPIs (application programmer interfaces). Place the jQuery link anywhere before your JavaScript code, but it is best to place this before the end of your </body> tag. This helps with page load times and there improves user experience. Around line 49 in our tutorial is ideal for this (before the line of code starting with $).
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 3. Add Selectors to Code
Add your selectors to the JavaScript code:
$('#button-change').click(function() {
$("#box-2").toggleClass("new-color", 1000);
});
4. fadeToggle
Use the fadeToggle function to fade the box in and out.
$('#fade').click(function() {
$("#box-1").fadeToggle(1000);
});
5. slideToggle
Use the slideToggle function to make the boxes slide up and down.
$('#slide').click(function() {
$("#box-3, #box-4, #box-5").slideToggle(1000);
});
6. animate
Use the animate function to move Box 6 down and up with the respective buttons. Animation can be done in the directions top, bottom, left, and right. The operators “+=” and “-=” mean add or subtract the specified value (215px) to the current value.
$('#down).click(function() {
$("#box-6").animate({
top: '+=215px'}, 1000);
});
$('#up).click(function() {
$("#box-6").animate({
top: '-=215px'}, 1000);
});
7. draggable
Use the draggable function to enable readers to click-and-drag Box 7 around the page.
$('#box-7').draggable();