1. INFSCI 1052

2.  Client Side versus Server Side  Server side PHP, ASP, Cold Fusion, Ruby on Rails Good for accessing databases  Client Side Good for immediacy of action Forms WebPages Also, Flash, Ajax

3.  Compiled versus interpreted languages C, C#, JAVA, JS, PHP, Python  Adding JS to a webpage Usually add to the section Can be added to the section too Can be linked to an external JS file

4.   Untitled Document   alert('helloworld'); 

5.  External Linking to JS File- Two separate lines   Untitled Document   alert('helloworld'); 

6.  Linking and paths Absolute paths  http://www.sis.pitt.edu http://www.sis.pitt.edu Root-relative paths  Using a webserver  Relative to the site’s top level folder  Ex. /myfolder/index.html Document-relative paths  Specifies path from Web page to the JS file  Ex:../myscripts/myjsfile.js

7.  JavaScript:The Missing Manual  http://www.sawmac.com/js/tutorials/exa mples/index.html http://www.sawmac.com/js/tutorials/exa mples/index.html  Completed tutorials section and working tutorials  Focus is on basic JS and using JS libraries such as JQuery.

8.  Writing text to a web page Document.write (‘ Hello World </P’); 1.2.html  Attaching external file 1.3.html

9.  Errors and debugging If error in code typically nothing happens  Web Browsers have consoles that can display JS errors  Firefox has better console than IE Lists type of error, name of file, and line number Select Tools->Error Console  Common Errors Missing semicolon, missing quote mark, misspelled word, missing ), unterminated string literal, missing }

10.  Statement: the basic unit of JS program, ends in semicolon  Data Types Number  Integer or fractional String  Use quote marks Boolean  True or False  Variables Var varname;  Begin with letter, $, or __  Can only contain letters, numbers, $ and __  CaSE SENSITIVE

11.  Var Examples var number=0; var name=‘Bob’; var age=26; var open=true;  Math operators and order of operations apply +, -, *, / Use parenthesis to ensure correct order of operations

12.  Addition and concatenation + sign for both purposes When adding two numbers the + sign does addition When “adding” two string or a number and a string then the concatenation function is performed  Ex. var fname = ‘Bill’;  var lname = ‘Smith’;  var totalname=fname+lname;  Sample: 2.1.html

13.  Arrays var months = [‘Jan’, ‘Feb’, ‘Mar’]; var months = new Array(‘Jan’, ‘Feb’, ‘Mar’]; Empty array  var months =[]; Accessing arrays  nameofarray[#];  Zero based so nameofarray[2] references the third element Adding element to end of array  Nameofarray[nameofarray.length] = ‘text’;  Var colors = [‘red’, ‘blue’, green’]  Colors = [colors.length]=‘purple’;

14.  Arrays Push command to add multiple elements to the array  colors.push(‘pink’, orange’, ‘brown’); Add to the beginning of an array .unshift Push and unshift return a value: the number of items in the array Removing items in an array  pop() – removes the last item  shift() – removes the first item  Ex. var x = [0,1,2,3];  var removeditem = x.pop() Adding and deleting in middle of array  splice function Sample: 2.3.html

15.  Logic If (condition) { Code statements } Comparison operators >, =, <= If else and if else if && = and || = or ! = not Sample: 3.1.html

16.  Loops While while (condition) { JS statements } For Loops for (var=x, x<=100; x++) { JS statements } Do While Loops do { JS statements } while (condition); Sample: dowhile loop

17.  Functions Function functionName() { JS Statements }  Sample:  3.2.html  Send information to functions via arguments and paramaters

18. function functionName ( paramater 1, paramater2) { JS Statements }; functionName (argument1, argument2); Retrieving Information from functions Function functionName (paramater1, paramater2) { JS statements Return value; } Sample: 3.3.html

19.  DOM Document Object Model Working with Web pages  Identify an element on a page  Do something with the element  Add/remove a class attribute  Change a property of the element  Add new content  Remove the element  Extract information from the element

20.  Provides the information that JS needs to interact with elements on the webpage  A navigation structure or map of the elements on the webpage  Standard from the W3C Most browsers have adopted but in different ways  Hierarchical structure of the tags in a web page

21.  Tags Parents Chidren Siblings All nodes Text is nodes too Nesting determines the relationships  Selecting a page element getElementById()  Locating a single element that has a unique ID  document.getElementById(‘header’)  Searches page for a tag with an ID of ‘header’  Typically the results of this action are stored in a variable  var headNode=document.getElementById(‘header’);

22.  GetElementsByTagName document.getElementsByTagName (‘a’);  Usually stored in a var  var myLinks=document.getElementsByTagName (‘a’);  Find all tags and store results in a var named myLinks  This action returns a list of nodes instead of a single node  Similar to arrays  Can access a single node using index notation  Can use the length property  Can loop using a for loop

23.  Accessing near by nodes.childNodes  A property of a node  Ex. var headline = document.getElementById(‘header’); var headlineChildren = headline.childNodes;.parentNode A property that represents the direct parent of a node.nextSibling and.previousSibling Properties that access next and previous siblings.innerHTML  Not a standard part of DOM but most browsers implement it  Accesses the text part of a node

24.  Example var pTags = document.getElementsByTagName(‘p’); var theP = pTags[0]; alert(theP.innerHTML); Opens an alert box and prints out the text of the first paragraph.

25.  JavaScript Quiz quiz.html  JavaScript Libraries Small file size Web oriented Tested Free Large developer community

26.  Jquery.js is a single file that you download that you link to a Web page http://docs.jquery.com/Downloading_jQuery  Uncompressed – includes comments  Minified – compression  Browser downloads the file once and caches it  After downloading the file place the library file in your project  Link this file to your web page   Once linked write your javascript program

27.  Example:  Javascript code here Note: here we created a folder called js and put the downloaded jquery.js file in it.

28.  Selecting page elements CSS Selectors  Use the jQuery object to select elements  $(‘css-selector’)  Can use all CSS 2.1 selectors  Ex: $(‘#header’)  Typically used to select ID’s, classes and element selectors

29.  ID Selector The key point var keyparagraph=document.getElementById (‘key’); Or var keyparagraph=$(‘#key’); Timesaver  Element Selector var mylist=$(‘a’);  Class selector var mystuff= $(‘.classthings’)  Selects all elements with same class name

30.  Advanced selectors Descendent selectors  $(‘#header a’) Child selectors  $(‘body > p’) Adjacent siblings Attribute selectors  More advanced selectors not supported by all browsers just as in CSS

31.  Jquery Selections Not like the DOM based results Can’t use traditional DOM methods on them  Ex innerHTML will not work Most DOM based actions have JQuery equivalent  Automatic Looping Jquery functions have looping built-in  $(‘#slideshow img’).hide();  Automatically slects all images inside of div tag with ID slideshow and hides images

32.  Chaining Ability to perform several operations on a selection of elements Ex:  $(‘#popUp’).width(300).height(300).text(‘Message’).f adeIn(1000);  Sets width and height and adds text and fades inside div with ID popUp  Chaining with the period

33.  Some functions.html  Works like innerHtml  Read current element ( can retrieve what is in an element)  Replace info in current element  $(‘#header’).html(‘ Look at me I’m a new header );.remove  Replace or remove an element  $(‘#footer’).remove;

34.  What else can Jquery do? Select elements Change value of elements Replace elements Remove elements Change value of elements attribute Add a class to a tag Change a CSS property Get the value of an attribute

35.  Functions.addClass and.removeClass  Adds a specified class to an element  Of course the newly added CSS class must have been written .removeClass removes a class.css  Change CSS property  $(‘body’).css(‘padding’,50); .attr  Read/Set an element attribute  var attributeinfo=$(‘banner img’).attr(‘src’);  Reads and stores the src attribute of the image in the banner  A second argument would set the src

36.  Example Using.each this.clone.addClass.removeClass.before  pullquote

37.  Events $(document).ready(function() { Code here }); Makes sure the html of the page loads before the Javascript runs. Two step process 1) Identify the page element you wish to respond to 2) Assign an event and define a function to run when event occurs

38.  Events Mouse Events  click  dblclick  mousedown  mouseup  mouseover  mouseout Document Window Events  Load  Resize  Scroll  Unload Form Events  Submit  Reset - button  Change  Focus – enter a field  Blur – exit a field

39.  Events Keyboard Events  keypress  keydown  Keyup  Using Events with Jquery 1) Select element 2) Assign an event  $(‘a’).mouseover(); - adds mousever to every link 3) Pass a function to event  $(‘a’).mouseover(startSomething());  Or pass an anonymous function $(‘a’).mouseover (function() { Code here });

40.  Example: desecendent selectors.mouseover anonymous function.addClass.mouseout  Example: Table.html

41.  Events When web browser fires an event information is stored about the event in an event object  Vertical and horizontal coordinates  the element  when event occurred  The event object is available to the function handling the event Ex  $(document).click(function(evt){  var xPos=evt.pageX;  var yPos=evt.pageY;  });  Note: evt is not a keyword – use any word

42.  Stopping an event’s normal behavior Evt. preventDefault(); Ex. To prevent a link being clicked and moving off the page