ALBERT WAVERING BOBBY 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.lengthevaluates to length of string  String.toUpperCaseall characters to upper case  String.toLowerCaseall characters to lower case  String.charAtreturns character at index  String.concatcombines 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:  concatcombine two or more arrays  popremoves last element  pushadds element to end of array  shiftremoves first element of array  unshiftadds element to beginning of array  reversereverses 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   Element selection  User interface elements  Event handling  Animation  AJAX data transfer

jQuery  Currently 24kb   Include this library if you’re using jQuery, but reference it from your own server   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. jQuery documentation.  You will need to link the jQuery library before any jQuery commands you try to run:  Download a copy of jQuery from Your homework must pass W3C validation. Don't worry about ing a copy of jQuery with your homework - we've got our own copy ;)