ALBERT WAVERINGBOBBY SENG

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.splitarray 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"var myArray = myPhrase.split(" ");

myArray = ["Four","score","and","seven","years",

"ago"](this is an array of size 6)

Array

var myArray = 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

var myDate = 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 var myRegEx = /pattern/modifiers Example

var myRegEx = /[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 ;)