CPSP 229D: Web design

ALBERT WAVERING BOBBY SENG CPSP 229D: Web design

Week 5: More JavaScript • Quiz • Announcements/questions

Built-in JS Objects • Boolean (true or false) • String • Array • Math • Date • Regular Expression

Boolean • var iWin = new Boolean(); = new Boolean(1); = new Boolean (0); = new Boolean(true); = new Boolean(false);

Boolean Values • True • 1 (or any nonzero number) • true • "anything goes here" • False • 0 • false • ""

String • Built-in functions: • String.length evaluates to length of string • String.toUpperCase all characters to upper case • String.toLowerCase all characters to lower case • String.charAt returns character at index • String.concat combines two strings (like +) • String.split array elements divided on a match • String.substring returns a subset of characters • String.match replace, search: Reg Exp functions

String var myPhrase = "Four score and seven years ago"; myPhrase.charAt(3); myPhrase.substr(5,9); myPhrase.split(" "); myPhrase.toUpperCase();

String myPhrase.charAt(3) 'r' myPhrase.substr(5,9); 'score' myPhrase.toUpperCase(); "FOUR SCORE AND SEVEN YEARS AGO" varmyArray = myPhrase.split(" "); myArray = ["Four","score","and","seven","years", "ago"] (this is an array of size 6)

Array • varmyArray = new Array(); • myArray[0] = 5;my2DArray[1][2] = 8; • document.write(myArray[1]) • Built-in functions: • concat combine two or more arrays • pop removes last element • push adds element to end of array • shift removes first element of array • unshift adds element to beginning of array • reverse reverses order of elements

Math • Constants • Math.E • Math.PI • others • Methods • Math.round • Math.random • Math.floor • Math.ceil • Math.cos, sin, tan • Math.sqrt • Math.pow

Date • varmyDate = new Date(); //current date, time • Date(ms) = milliseconds since 1/1/1970 • Date(dateString) = interprets dateString • Date(y, m, d, h, m, s, ms) = input specific numerals • Comparation • Less than, greater than (after, before) • Methods • getFullYear, getMonth, getDay, getDate • getHours, getMinutes, getSeconds, getMilliseconds, getTime

Regular Expressions • Used to evaluate regular languages • Create patterns to match specific occurrences in strings • Can use to replace, separate, and locate text • varmyRegEx = /pattern/modifiers • Example • varmyRegEx = /[A-Za-z0-9]/g • Look online for specific pattern and modifier syntax (won’t quiz you on this)

So how is this useful?! • Form Submission • Dynamic Content • Functionality • Web Applications

JS: Making Things Happen • We want to interact with HTML of page • Specifically, elements • To do any sort of action (read, change, etc) an element or group of elements, we need to select it/them • Selection tools • document.myFormName.elementName • document.getElementByID("myElementID") • DON’T USE THESE

JS: Selecting Elements • First brick wall with interoperability • Element selection is not universal across IE 6-9, Firefox, Chrome, and Safari • Handle each case? • Heck no • jQuery • JavaScript ‘library’ • Suite of tools that are very useful for JS developers

jQuery • http://jquery.com/ • Element selection • User interface elements • Event handling • Animation • AJAX data transfer

jQuery • Currently 24kb • http://code.jquery.com/jquery-1.4.2.min.js • Include this library if you’re using jQuery, but reference it from your own server • http://docs.jquery.com/Main_Page • jQuery operations make use of the $ variable

Back to Reality • Element selection in jQuery • $("*") selects all elements • $("#myID") selects element with ID myID • $(".myClass") selects elements of class myClass • $("anElement") selects elmnts of type anElement • Many more, check documentation for examples $(“#albert”).attr()

jQuery: Attributes • .addClass • .attr • .hasClass • .html • .removeClass • .val

jQuery: Traversing • .children • .each • .next • .parent • .siblings

jQuery: Manipulation • .append • .height • .position • .remove • .replaceWith • .text

jQuery: CSS • All similar functions we already covered

jQuery: Events • .bind, .unbind • .click • .dblclick • .focusin, .focusout • .keydown, .keyup, .keypress • .mouseenter, .mousemove, .mouseleave, .mouseout, .mouseover • .ready • .select • .scroll • .toggle

jQuery: Effects • .animate • .delay • .fadeIn, .fadeOut • .hide, .show • .slideDown, .slideUp • .stop • .toggle

jQuery: AJAX • .ajaxSend, .ajaxError, .ajaxComplete • .ajaxStart, .ajaxStop, .ajaxSuccess • jQuery.get, jQuery.getJSON, jQuery.getScript • .load • .post • .serialize

Homework • Create a webpage composed of the following: one HTML page that includes a form with text areas, a checkbox, and a button. In a linked .js file, use jQuery to make the entered information appear elsewhere on the page. For examples, check the jQuery documentation. • You will need to link the jQuery library before any jQuery commands you try to run: <script type="text/javascript" src="jquery-1.4.2.min.js"></script> • Download a copy of jQuery from www.jquery.com. Your homework must pass W3C validation. Don't worry about emailing a copy of jQuery with your homework - we've got our own copy ;)

CPSP 229D: Web design