IO Lab: Javascript &...
Transcript of IO Lab: Javascript &...
![Page 1: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/1.jpg)
INFO 290TA (Information Organization Lab)Kate Rushton & Raymon Sutedjo-The
IO Lab:Javascript & jQuery
September 16, 2013
![Page 2: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/2.jpg)
Javascript(BEHAVIOR)
![Page 3: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/3.jpg)
Javascript 101Javascript is a programming language used most often in web browsers.
You can write comments in your code with // or /* */.
A semi-colon goes at the end of every statement.
![Page 4: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/4.jpg)
Variables
![Page 5: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/5.jpg)
VariablesVariables are how we store data.
A variable has a name and a value.
var grade = 94;
![Page 6: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/6.jpg)
Data Types
Type Example
Number 13
String "Shoe"
Boolean FALSE
Array ["i202", "i206", "i290ta"]
Object {"name": "Tina", "age": 57]
![Page 7: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/7.jpg)
StringA sequence of characters.
Use single- or double-quotes to indicate a string.
var myName = "Steve" myName.length 5
myName.toUpperCase() "STEVE"
myName.indexOf("v") 3
![Page 8: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/8.jpg)
ArrayAn ordered collection of elements.
Use square brackets to indicate an array.
var myArray = ["cherry","banana","apple"]
myArray.length 3
myArray[1]"banana"
myArray.push("watermelon") ["cherry","banana","apple","watermelon"]
myArray.sort() ["apple","banana","cherry","watermelon"]
![Page 9: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/9.jpg)
ObjectA collection of key-value pairs or named properties.
Use curly braces to indicate an object.
var student = {"name":"Robert","age":22,"degree":"masters"}
student.name "Robert"
student.degree"masters"
student.lastName = "Smith"
student.lastNamestudent["lastName"]"Smith"
![Page 10: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/10.jpg)
Conditionalsif
if... else
if... else if... else
switch
http://en.wikibooks.org/wiki/JavaScript/Control_Structures
![Page 11: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/11.jpg)
Loopsfor
for/in
while
do... while
http://en.wikibooks.org/wiki/JavaScript/Control_Structures
![Page 12: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/12.jpg)
=, ==, ===x = 3;y = "3";
x == y;x === y;
“=” sets a variable’s value
“==” compares the variables’ value
“===” compares the variables’ value and type
// TRUE// FALSE
![Page 13: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/13.jpg)
Functions
![Page 14: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/14.jpg)
FunctionsA function is a set of statements that performs a task or calculates a value.
2 ways to write a functionFunction expression
Function declaration
![Page 15: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/15.jpg)
Expression VS Declaration
Function Expression Function Declaration
var sum = function(a,b) { return a+b; }
function sum(a,b) { return a+b; }
![Page 16: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/16.jpg)
Expression VS Declarationtest();
var test = function() { alert("test");}
test();
function test() { alert("test");}
Nope. (Uncaught TypeError) Yep.
“JavaScript knows about declaration functions and can parse them before the program executes... JavaScript has hoisted the function to the top of the current scope.”
http://markdaggett.com/blog/2013/02/15/functions-explained/
![Page 17: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/17.jpg)
Browser Functionsalert("...") confirm("...")
![Page 18: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/18.jpg)
Browser Functionsprompt("...") console.log("...")
![Page 19: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/19.jpg)
Global & Local VariablesGlobal variables exist throughout the script, and it can be accessed by any function.
Local variables only exist in a particular function.
Minimize your use of global variable as much as possible.
![Page 20: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/20.jpg)
Global & Local Variablesvar x = 123;
check_x();
function check_x() { var x = 456; alert(x);}
alert(x);
// 456
// 123
![Page 21: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/21.jpg)
Global & Local Variablesvar x = 123;
check_x();
function check_x() { x = 456; alert(x);}
alert(x);
// 456
// 456
![Page 22: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/22.jpg)
jQuery
![Page 23: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/23.jpg)
jQuery 101“Javascript + CSS,” making your life a lot easier.
In this course, we’ll use v1.10.2.
http://jquery.com/download/
Javascript jQuery
el = document.getElementById("item"); el.style.color = "#ff0000";
$("#item").css("color", "#ff0000");
![Page 24: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/24.jpg)
Common jQuery OperationsEvents
Attributes
Manipulating
Traversing
http://api.jquery.com/
![Page 25: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/25.jpg)
EventsAttaching functions to events in the browser.
$(".link").on("click", function() {...});
![Page 26: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/26.jpg)
AttributesGetting and setting DOM attributes of elements.
var imgTitle = $("#main-photo").attr("title");
$(".link").css("background-color","red");
![Page 27: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/27.jpg)
ManipulatingGetting and setting properties and values.
Inserting, copying, or removing elements.
var firstName = $("form #first-name").val();
$(".link").remove();
![Page 28: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/28.jpg)
TraversingMoving from selected element(s) in the DOM to other(s).
$("#link").parent();
![Page 29: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/29.jpg)
Some Tips
![Page 30: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/30.jpg)
jQuery Chaining
Faster to execute.
Easier to maintain.
// no chaining$("#menu").fadeIn("fast");$("#menu").addClass("active");$("#menu").parent().addClass("open");
// chaining$("#menu").fadeIn("fast") .addClass("active") .parent().addClass("open");
![Page 31: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/31.jpg)
Code Runtime$(document).on('ready', function() { ...});
$(function() { ...});
Code runs after DOM is loaded by the browser.
Tends to be quicker, since it doesn’t wait until everything is loaded (HTML, images, scripts, etc).
$(window).on('load', function() { ...});
![Page 32: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/32.jpg)
Getting & Setting<a id="link-home" href="http://berkeley.edu">UC Berkeley</a>
// GET
$("#link-home").text()"UC Berkeley"
$("#link-home").attr("href")"http://berkeley.edu"
// SET
$("#link-home").text("Berk")<a id="link" href="http://berkeley.edu">Berk</a>
$("#link-home").attr("href", "http://google.com")<a id="link" href="http://google.com">UC Berkeley</a>
![Page 33: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/33.jpg)
.each()<ul id="list"> <li>one</li> <li>two</li> <li>three</li></ul>
$("#list li").each(function() { $(this).addClass("test");});
<ul id="list"> <li class="test">one</li> <li class="test">two</li> <li class="test">three</li></ul>
![Page 34: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/34.jpg)
Some Useful Toolsjsfiddle.net
Test out your Javascript quickly.
jshint.comCheck your script for bugs.
jscompress.comMinify your Javascript files for production.
![Page 35: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/35.jpg)
Homework 1
![Page 36: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/36.jpg)
Next Class
![Page 37: IO Lab: Javascript & jQuerycourses.ischool.berkeley.edu/i290-iol/f13/_files/INFO290TA-lecture-04.pdfString A sequence of characters. Use single- or double-quotes to indicate a string.](https://reader033.fdocuments.in/reader033/viewer/2022042113/5e8f11e05802436dc54549b9/html5/thumbnails/37.jpg)
Next ClassHTML, CSS, & jQuery lab
Readinghtmldog HTML tutorial (beginning & intermediate)
htmldog CSS tutorial (beginning & intermediate)