You are here: Home | teaching | Spring 2012 | Week 11

PopUp MP3 Player (New Window)

CMP 342-Internet Programming

Week 11

Class 20+21 - April 16 + 18

JavaScript! Yay!!!

So, we've finally gotten to the portion of the class where we get to work with JavaScript. JavaScript is a browser or client-side, interpretive, scripting language that has been around since 1995, when it was called LiveScript and it was maintained by the browser company Netscape as a way of adding interactivity to web pages. We're going to be exploring JavaScript via jQuery, a very popular JavaScript framework that is currently blowing up huge. 

framework, in this sense, is a comprehensive library of shortcut methods (a.k.a. functions) and objects that are all built with JavaScript. In other words, developers took many of the functions and classes they had already been using in JavaScript, stuck them all in a single library file, and made them accessible with shortcut syntax that we call jQuery.

Example #1

We'll start with a simple example. Create an HTML doc with the following code and call it index.html:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title>
 <meta name="description" content="">
 <meta name="author" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="/css/style.css"> <script src="/js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
 <p>
 jQuery is not loaded.
 </p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="/js/libs/jquery-1.7.2.js"><\/script>')</script> <script src="/js/plugins.js"></script>
<script src="/js/script.js"></script>
</body>
</html>
 

Then create the following CSS file and name it style.css:

body { font: 16px sans-serif; }
p { color: red; border: 1px solid red; padding: 5px; margin: 5px; }
p.tmpFrameworkLoaded { color: green; border: 1px solid green; }

and place the following JavaScript in a js/script.js file:

if ($) {
$(document).ready( function() {
$('p').addClass('tmpFrameworkLoaded');
$('p').text('jQuery successfully loaded and running!');
} );
}
 

You are here: Home | teaching | Spring 2012 | Week 11