front-end masters day 1
DESCRIPTION
Front-end Masters day 1. pres.learningjquery.com/femasters/. Outline. Philosophy of jQuery and API Walkthrough Dev Tools Bare-bones JavaScript jQuery Selectors and Traversing. DOM Scripting. DOM Scripting. Based on web standards Tests features, not browsers Unobtrusive. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/1.jpg)
Front-end Masters
day 1
pres.learningjquery.com/femasters/
![Page 2: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/2.jpg)
Outline• Philosophy of jQuery and API Walkthrough• Dev Tools• Bare-bones JavaScript• jQuery Selectors and Traversing
![Page 3: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/3.jpg)
DOM Scripting
![Page 4: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/4.jpg)
DOM Scripting• Based on web standards• Tests features, not browsers• Unobtrusive
![Page 5: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/5.jpg)
DOM ScriptingBooks
Jeremy Keith Peter-Paul Koch Jonathan Snookdomscripting.com quirksmode.org snook.ca
![Page 6: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/6.jpg)
Unobtrusive
custom.js
Behavior Content
index.html
Presentation
style.css
![Page 7: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/7.jpg)
DOM Scripting• Verbose
if (!document.getElementsByTagName) { return false; }var quotes = document.getElementsByTagName("blockquote");for (var i=0; i<quotes.length; i++) { var source = quotes[i].getAttribute("cite"); if (source) { var link = document.createElement("a"); link.setAttribute("href",source); var text = document.createTextNode("source");//!? link.appendChild(text); var para = document.createElement("p"); para.className = "attribution"; para.appendChild(link); quotes[i].appendChild(para); }}
![Page 8: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/8.jpg)
jQueryInteraction for the Masses
![Page 9: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/9.jpg)
Just a few of jQuery's Benefits
• Lets you move quickly from beginner to advanced
• Improves developer efficiency• Excellent documentation // pats self on
back• Unobtrusive from the ground up• Reduces browser inconsistencies• At its core, a simple concept
![Page 10: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/10.jpg)
Unobtrusive
jquery.js
custom.js
Behavior Content
index.html
Presentation
style.css
![Page 11: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/11.jpg)
Reduces browser inconsistencies
• Example:Get the height of the viewport…
![Page 12: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/12.jpg)
var x,y;if (self.innerHeight) { // all except Explorer x = self.innerWidth; y = self.innerHeight;}else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode x = document.documentElement.clientWidth; y = document.documentElement.clientHeight;}else if (document.body) { // other Explorers x = document.body.clientWidth; y = document.body.clientHeight;}
DOM Scripting
![Page 13: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/13.jpg)
var x = $(window).width();var y = $(window).height();
jQuery
![Page 14: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/14.jpg)
Documentation &Support
– API: api.jquery.com– Forum: forum.jquery.com– IRC: irc.freenode.net, #jquery– Coming Soon: learn.jquery.com
![Page 15: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/15.jpg)
Simple Concept• Find something• Do something
![Page 16: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/16.jpg)
Find Something"Select" elements in the document
![Page 17: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/17.jpg)
$
![Page 18: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/18.jpg)
$( )
![Page 19: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/19.jpg)
$('div')
![Page 20: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/20.jpg)
$('#id')
![Page 21: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/21.jpg)
Do Something
![Page 22: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/22.jpg)
Do Something1.Let elements "listen" for something to
happen … • the document is ready• user does something• another "listener" acts• a certain amount of time elapses
![Page 23: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/23.jpg)
Do Something2.… and then do something
a.Manipulate elementsb.Animate elementsc.Communicate with the server
![Page 24: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/24.jpg)
Dev Tools
![Page 25: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/25.jpg)
Dev Tools• up to five browsers to test against
• Firefox• Chrome• Internet Explorer• Safari• Opera
• developer tools can make your life much easier
![Page 26: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/26.jpg)
Browser Support• Modernizr
• http://www.modernizr.com• Can I Use?
• http://caniuse.com
![Page 28: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/28.jpg)
• TextMate• jQuery Bundle:
http://github.com/kswedberg• JavaScript Tools Bundle:
http://github.com/subtleGradient• Sublime Text 2• MacVim• Espresso
• jQuery Sugar:• code.google.com/p/espresso-jquery-sugar
Text EditorsMac OS X
![Page 29: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/29.jpg)
• E• jQuery Bundle:
http://github.com/kswedberg• Eclipse / Aptana• Notepad++• Visual Studio• and so on.
Text EditorsWindows
![Page 30: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/30.jpg)
• Console• DOM Viewer• JavaScript debugger• Net view• Lots of extensions
http://getfirebug.com/wiki/index.php/Firebug_Extensions
Firefox: Firebug
![Page 31: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/31.jpg)
Chrome Developer Tools• In many ways, leapfrogging Firebug
• Live debugging, code changing• Lots of "hidden" goodies• http://code.google.com/chrome/devtools/• Paul Irish screencast: http://youtu.be/nOEw9iiopwI
![Page 32: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/32.jpg)
• Included since Safari 3.1• Similar to Chrome Dev Tools, but not as
advanced• Activate via Preferences > Advanced
Safari: Developer Menu
![Page 33: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/33.jpg)
• Much, much better than in previous versions.• Finally includes a console.
Internet Explorer 8+:
Developer Tools
![Page 34: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/34.jpg)
• CompanionJS:tinyurl.com/companionjs
• IETester:tinyurl.com/dbtester
• MS Developer Toolbar: tinyurl.com/msdevtoolbar
• Script Debugger: tinyurl.com/msscriptdebug
• None of them comes even close to the tools available in other browsers
Internet Explorer <= 7
![Page 35: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/35.jpg)
Bare-bones JavaScript
![Page 36: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/36.jpg)
The Basics
• Strings: textual content. wrapped in quotation marks (single or double).• 'hello, my name is Karl'• "hello, my name is Karl"
• Numbers: integer (2) or floating point (2.4) or octal (012) or hexadecimal (0xff) or exponent literal (1e+2)
• Booleans: true or false
In JavaScript, you can work with the following things:
![Page 37: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/37.jpg)
The Basics
• Arrays: simple lists. indexed starting with 0• ['Karl', 'Sara', 'Ben', 'Lucia']• ['Karl', 2, 55]• [ ['Karl', 'Sara'], ['Ben', 'Lucia']]
• Objects: lists of key, value pairs• {firstName: 'Karl', lastName: 'Swedberg'}• {parents: ['Karl', 'Sara'], kids: ['Ben', 'Lucia']}
In JavaScript, you can work with the following things:
![Page 38: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/38.jpg)
Variables• Always declare your variables!• If you don't, they will be placed in the global scope
(more about that later).• bad: myName = 'Karl';• good: var myName = 'Karl';• still good: var myName = 'Karl';
// more stuff myName = 'Joe';
![Page 39: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/39.jpg)
Conditionals and Operators
• conditionals:• if, else • switch
• operators:• +, -, *, %, ++, --• >, <, ==, !=, >=, <=, ===, !==• !, &&, ||
![Page 40: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/40.jpg)
Loops• Loops iterate through a list of some kind.• A common pattern in JavaScript is to build a list, or
collection, and then do something with each item in that list.
![Page 41: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/41.jpg)
Loops• CSS uses implicit iteration.
• div { color: red; } /* applies to ALL divs */• JavaScript relies on explicit iteration. Must
explicitly loop through each div• jQuery allows for both (because it does the
looping for you)
![Page 42: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/42.jpg)
Loops• The two most common loops...
• for loops — for general-purpose iteration. Used with arrays or array-like objects)
• for-in loops — used with arrays or objects (but don't use with arrays)
• The other two are...• while loops• do-while loops
![Page 43: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/43.jpg)
for (initial value; condition; increment) { // code block}
for Loops• three statements and a code block1.initial value2.condition3.increment
![Page 44: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/44.jpg)
for Loopsfor (var i = 0; i < 3; i++) { alert(i+1);}
This is your variable, so it can be anything!(but developers often use “i”)
![Page 45: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/45.jpg)
for Loopsvar divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { // do something with each div individually divs[i].style.color = 'red';}
![Page 46: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/46.jpg)
for Loopsvar divs = document.getElementsByTagName('div');
// better to store length in variable first var divCount = divs.length
for (var i = 0; i < divCount; i++) { // do something with each div individually divs[i].style.color = 'red';}
![Page 47: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/47.jpg)
for Loopsvar divs = document.getElementsByTagName('div');
// can store it directly in the initializerfor (var i=0, divCount=divs.length; i < divCount; i++) { // do something with each div individually divs[i].style.color = 'red';}
![Page 48: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/48.jpg)
for-in Loopsvar family = { dad: 'Karl', mom: 'Sara', son: 'Benjamin', daughter: 'Lucia'}
for (var person in family) { alert('The ' + person + ' is ' + family[person]);}
This is your variable, so it can be anything!
![Page 49: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/49.jpg)
while and do-whilevar i = 1; while (i < 4) { alert(i); i++;}
var j = 1;// code block always executed at least oncedo { alert(j); j++;} while (j < 4)
![Page 50: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/50.jpg)
Functions
![Page 51: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/51.jpg)
The Basics: Functions
• Functions allow you to define a block of code, name that block, and then call it later as many times as you want.• function myFunction( ) { /* code goes here */ } // defining• myFunction( ) // calling the function myFunction
• You can define functions with parameters • function myFunction(param1, param2 ) { /* code goes
here */ }• You can call functions with arguments:
• myFunction('one', 'two')
In JavaScript, you can also work with functions:
![Page 52: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/52.jpg)
Functions// define a functionfunction doSomething() { alert('I am something');}
// call the functiondoSomething();
![Page 53: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/53.jpg)
Functions// define a functionfunction sumThing(a, b) { return a + b;}
// call the functionalert( sumThing(1, 2) );
![Page 54: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/54.jpg)
Functions// define a functionfunction sumThing(a, b) { return a + b;}
var mySum = sumThing(1, 2);
// call the functionalert( mySum );
![Page 55: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/55.jpg)
The arguments Object
• Every function has an arguments object• a collection of the arguments passed to the
function when it is called• an "array-like object" in that it is indexed and
has a length property but can't attach array methods to it
• can be looped through• allows for variable number of arguments
![Page 56: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/56.jpg)
Functions// call the functionfunction logThing() { for (var i=0; i < arguments.length; i++) { console.log(arguments[i]); }}
// call the functionlogThing(1, 2, 'three');
/* prints to the console: >> 1 >> 2 >> three*/
![Page 57: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/57.jpg)
ExerciseConvert the sumThing function to allow for variable number of arguments.function sumThing(a, b) { return a + b;}Use a for loop to loop through the arguments object, adding to a "sum" variable with each iteration.After the loop, return sum.
![Page 58: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/58.jpg)
(Simple) Solution// define a functionfunction sumThing() { var sum = 0, countArgs = arguments.length; for (var i = 0; i < countArgs; i++) { sum += arguments[i]; } return sum;}// call the functionconsole.log( sumThing(1, 2, 4 ) );
![Page 59: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/59.jpg)
function multiple(n) { function f(x) { return x * n; } return f;}var triple = multiple(3);var quadruple = multiple(4);
console.log( triple(5) ); // 15console.log( quadruple(5) ); // 20console.log( multiple(4)(5) ); // 20
Returning Functions• Functions can return other functions
![Page 60: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/60.jpg)
Named vs. AnonymousFunctions• Named:
• function foo() { } // function declaration• var foo = function foo() { }; // function
expression• Anonymous:
• var foo = function() { }; // function expression
![Page 61: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/61.jpg)
Anonymous Functions
• Prevalent in jQuery• Good for creating closures• Used as "callback" functions• Can be used as object properties (methods)
let’s take a look ...
![Page 62: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/62.jpg)
$(document).ready(function() {
});
Anonymous Functions• Prevalent in jQuery
![Page 63: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/63.jpg)
function() { // variables are defined within this scope // avoid name collisions}
Anonymous Functions
• Good for creating closures
![Page 64: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/64.jpg)
(function() { // variables are defined within this scope // avoid name collisions})();
Anonymous Functions
• Good for creating closures• Can be defined and then immediately invoked: “immediately
invoked function expression,” ( a.k.a. IIFE; pronounced “iffy”)
![Page 65: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/65.jpg)
(function($) { // "$" is the function's param })(jQuery); // function is called with "jQuery"
Anonymous Functions
• Good for creating closures• Used by plugins to keep jQuery safe.
![Page 66: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/66.jpg)
$('p').slideDown('slow', function() {// code in here is not executed // until after the slideDown is finished// jQuery calls the code in here when effect
ends});
Anonymous Functions
• Used as "callback" functions
![Page 67: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/67.jpg)
Objects
![Page 68: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/68.jpg)
Objects
• Objects are objects : { }• Arrays are objects : [ ]• even Functions are objects : function( ) { }• jQuery is an object• Numbers, strings, and booleans (true/false) are
primitive data types, but they have object wrappers.
In JavaScript, everything is an object. Well, almost everything.
![Page 69: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/69.jpg)
Global Object
• location
• parseInt(); parseFloat()
• isNaN()
• encodeURI(); decodeURI()
• setTimeout(); clearTimeout()
• setInterval(); clearInterval()
In the browser environment, the global object is windowIt collects all functions and variables that are global in scope.Usually implied.
Comes with some useful properties and methods:
![Page 70: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/70.jpg)
Date Objectvar now = new Date(); // current date and timevar then = new Date('08/12/2000 14:00');
console.log( then.getTime() ); // 966103200000
console.log( then.toString() ); // Sat Aug 12 2000 14:00:00 GMT-0400 (EDT)
console.log( then.getMonth() ); // 7 !!!!
![Page 71: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/71.jpg)
RegExp ObjectRegular Expression
• Object constructor• var re = new RegExp('hello');
• Regular expression literal• var re = /hello/;
![Page 72: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/72.jpg)
Creating a RegExp• Object constructor• var re = new RegExp('hello');
• Regular expression literal• var re = /hello/;
![Page 73: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/73.jpg)
Using a RegExpvar text = 'The quick brown fox';
var re = new RegExp('quick');console.log( re.test(text) ); // true
console.log( /brown/.test(text) ); // trueconsole.log( /red/.test(text) ); // false
![Page 74: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/74.jpg)
RegExp Syntax• Most characters (incl. all alphanumerics) represent
themselves• Special characters can be escaped with a
backslash (\)
![Page 75: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/75.jpg)
Character Classes• /t.p/ matches 'tap' and 'tip' and 'top'• /t[ai]p/ matches 'tap' and 'tip', not 'top'• /t[a-k]p/ matches 'tap' and 'tip', not 'top'• /t[^m-z]p/ matches 'tap' and 'tip', not 'top'
![Page 76: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/76.jpg)
Repetition• /frog*/ matches 'fro', 'frog', 'frogg', ...• /frog+/ matches 'frog', 'frogg', ...• /frog?/ matches 'fro' or 'frog'• /frog{2,3}/ matches 'frogg' or 'froggg'
![Page 77: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/77.jpg)
Grouping• Grouping
• /(frog)*/ matches "frog" or "frogfrog"• Alternation
• /th(is|at)/ matches "this" and "that"
![Page 78: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/78.jpg)
Anchor Points• ^ matches the beginning of a string• $ matches the end of a string• \b matches word boundaries
![Page 79: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/79.jpg)
ExercisesWrite a regular expression that matches any word that starts with a vowel.Write a regular expression that matches any HTML tag.
![Page 80: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/80.jpg)
String RegExp Methods
str.search(re)•str.match(re)•str.replace(re, replacement)•str.split(re)
![Page 81: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/81.jpg)
String Replacementvar str = 'The quick brown fox jumps over the lazy dog.';
console.log(str.replace(/[aeiou]/, '*'));// Th* quick brown fox jumps over the lazy dog.
![Page 82: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/82.jpg)
RegExp Flags• Placed after closing / character• Global (g): find as many as possible• Case insensitive (i)• Multiline (m): ^ and $ work with newlines
![Page 83: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/83.jpg)
String Replacementvar str = 'The quick brown fox jumps over the lazy dog.';
console.log(str.replace(/[aeiou]/g, '*'));// Th* q**ck br*wn f*x j*mps *v*r th* l*zy d*g.
console.log(str.replace(/the/gi, 'a'));// a quick brown fox jumps over a lazy dog.
![Page 84: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/84.jpg)
Backreferencesvar str = 'The quick brown fox jumps over the lazy dog.';
console.log(str.replace(/r(.)/g, '$1x'));// The quick boxwn fox jumps ove xthe lazy dog.
![Page 85: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/85.jpg)
Replacement Functions
var str = 'Kill 5+9 birds with 2+5 stones.';function add(match, first, second) { return parseInt(first, 10) + parseInt(second, 10);}str = str.replace(/([0-9]+)\+([0-9]+)/g, add);console.log(str);// Kill 14 birds with 7 stones.
![Page 86: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/86.jpg)
ExercisesWrite a function that uppercases all the vowels in a string.
Write a function that strips the angle brackets from around any HTML tags in a string.
![Page 87: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/87.jpg)
Greediness• Repeat operators usually match as much of the
string as possible; they are greedy
• JavaScript supports reluctant repetition as well• Append ? to the repeat operator
![Page 88: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/88.jpg)
And Much More• JavaScript supports most Perl regular expression
extensions• POSIX character classes• Unicode character escapes• Look-ahead assertions
![Page 89: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/89.jpg)
Math Object•Not a constructor, a singleton•Gathers useful methods and propertiesMath.PI
Math.abs(), Math.sin(), Math.pow(), Math.random(),
Math.max(), Math.min()
Math.round(), Math.floor(), Math.ceil()
![Page 90: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/90.jpg)
CSS:h3 {font-size: 1.2em;line-height: 1;}
JS:var h3 = {fontSize: '1.2em','line-height': 1};
CSS Tip• Object literal notation looks a lot like CSS style
rule notation!
![Page 91: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/91.jpg)
var person = { firstName: 'Karl', lastName: 'Swedberg', hello: function() { return 'Hello, my name is ' + this.firstName + ' ' + this.lastName; }};
Object Literals• person is the object• firstName and lastName are properties• hello is a method (a property that is a function)
![Page 92: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/92.jpg)
var person = { firstName: 'Karl', lastName: 'Swedberg', hello: function() { return 'Hello, my name is ' + this.firstName + ' ' + this.lastName; }, interests: { athletic: ['racquetball', 'karate', 'running'], musical: ['rock', 'folk', 'jazz', 'classical'] }};
Object Literals• interests is a property and an object
![Page 93: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/93.jpg)
Object Literalsvar person = { firstName: 'Karl', lastName: 'Swedberg', hello: function() { return 'Hello, my name is ' + this.firstName + ' ' + this.lastName; } // ⬅ notice, no comma here!};
![Page 94: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/94.jpg)
Object Literals“dot” notation
var person = { firstName: 'Karl', lastName: 'Swedberg', hello: function() { return 'Hello, my name is ' + this.firstName + ' ' + this.lastName; }};
// "dot" notationperson.firstName; // 'Karl'person.lastName; // 'Swedberg'person.hello() // 'Hello, my name is Karl Swedberg'
![Page 95: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/95.jpg)
Object Literalsarray notation
var person = { firstName: 'Karl', lastName: 'Swedberg', hello: function() { return 'Hello, my name is ' + this.firstName + ' ' + this.lastName; }};
// array notationperson['firstName']; // 'Karl'person['lastName']; // 'Swedberg'person['hello']() // 'Hello, my name is Karl Swedberg'
![Page 96: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/96.jpg)
var person = { firstName: 'Karl', lastName: 'Swedberg', hello: function() { return 'Hello, my name is ' + this.firstName + ' ' + this.lastName; }, interests: { athletic: ['racquetball', 'karate', 'running'], musical: ['rock', 'folk', 'jazz', 'classical'] }};// person['interests']['musical'][1] == ??// == person.interests.musical[1]
Object Literals
![Page 97: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/97.jpg)
Object Literalsvar person = { firstName: 'Karl', lastName: 'Swedberg', hello: function() { return 'Hello, my name is ' + this.firstName + ' ' + this.lastName; }};person.firstName = 'Karl';
var prop = 'firstName';person[ prop ]; // 'Karl'
prop = 'lastName';person[ prop ]; // 'Swedberg'
![Page 98: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/98.jpg)
Object Literalsvar blah;var person = { firstName: 'Karl', lastName: 'Swedberg', hello: function() { return 'Hello, my name is ' + this.firstName + ' ' + this.lastName; }};for (var el in person) { blah = typeof person[el] == 'function' ? person[el]() : person[el]; console.log( blah );}
![Page 99: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/99.jpg)
doSomething({ speed: 'fast', height: 500, width: 200, somethingElse: 'yes'});
doSomething({width: 300});
Object Literals• Great as function arguments• single argument allows flexibility when calling the
function
![Page 100: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/100.jpg)
JSONJavaScript Object Notation
• a data interchange format. In other words, a format for passing data back and forth
• “discovered” and popularized by Douglas Crockford
• a subset of JavaScript Object Literal Notation• a tree-like structure of object(s) and/or array(s)• no functions• all strings, including object keys, take double
quotes
![Page 101: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/101.jpg)
JSON{ "firstName": "Karl", "lastName": "Swedberg", "age": 24, "interests": { "athletic": [ "racquetball", "karate" ] }}
![Page 102: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/102.jpg)
JSON{"firstName":"Karl","lastName":"Swedberg","age":24,"interests":{"athletic":["racquetball","karate"]}}
![Page 103: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/103.jpg)
Referencing Scriptsin the HTML
browser slides
![Page 104: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/104.jpg)
Selectors & Traversal
![Page 105: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/105.jpg)
At the heart of jQuery...
• Find something• Do something
![Page 106: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/106.jpg)
CSS Selectors • element {} • #id {} • .class {}• selector1, selector2 {}• ancestor descendant {}• parent > child {}• :nth-child() {}
![Page 107: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/107.jpg)
CSS Selectors • $('element')• $('#id')• $('.class')• $('selector1,
selector2')• $('ancestor
descendant')• $('parent > child') • $(':nth-child(n)')
(jQuery Equivalents)
![Page 108: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/108.jpg)
CSS Selectors • $('element')• $('#id')• $('.class')• $('selector1,
selector2')• $('ancestor
descendant')• $('parent > child') • $(':nth-child(n)')
(jQuery Equivalents)
• and others …
• $('prev + selector')• $('prevAll ~
selector')$(':nth-child(an+b')$(':not(selector)')
• $(':checked')• $(':disabled')
![Page 109: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/109.jpg)
CSS Attribute Selectors
• $('input[name=firstname\\[\\]]')• $('[title]') has the attribute• $('[attr="val"]') attr equals val• $('[attr!="val"]') attr does not equal val• $('[attr~="val"]') attr has val as one of space-sep.
vals• $('[attr^="val"]') attr begins with val• $('[attr$="val"]') attr ends with val• $('[attr*="val"]') attr has val anywhere within
![Page 110: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/110.jpg)
Custom Form Selectors
• $('div.myclass :checkbox')• $(':input') <input>, <textarea>,
<select>, <button>• $(':text') <input type="text">• $(':radio') <input type="radio">• $(':button') <input type="button">,
<button>• $(':selected') <option
selected="selected">• etc.
![Page 111: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/111.jpg)
Custom Misc. Selectors
• $(':animated')• $(':has(descendant)')• $(':eq(n)')• $(':lt(n)')• $(':gt(n)')• $(':even')• $(':odd')
• $(':visible') $(':hidden')$(':header')$(':contains(string)')
![Page 112: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/112.jpg)
Selectors• List of all selectors on the jQuery API site• http://api.jquery.com/category/selectors
![Page 113: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/113.jpg)
Traversal Methods• Move Up• Move Sideways• Move Down• Filter• Context• Check
![Page 114: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/114.jpg)
<ul> <li>level 1 <ul class="foo"> <li>level 2 <ul> <li class="bottom"><span>level</span> 3</li> </ul> </li> </ul> </li></ul>
Move Up• parent() : up one level $('li.bottom').parent();• parents() : up multiple levels $('span').parents('ul');• parentsUntil() : possibly multiple $
('span').parentsUntil('ul');
![Page 115: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/115.jpg)
<ul> <li>level 1 <ul> <li>level 2 <ul> <li class="bottom"><span>level</span> 3</li> </ul> </li> </ul> </li></ul>
Move Up• .closest(selector) : up 0 or more levels
• $('span').closest('ul');• $('.bottom').closest('li');
![Page 116: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/116.jpg)
Move Sideways• .siblings()• .next()• .nextAll()• .nextUntil()• .prev()• .prevAll()• .prevUntil()
![Page 117: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/117.jpg)
Move Down• .children()• .find()
![Page 118: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/118.jpg)
Filter• .filter(selector)
• .filter('.some-class')
• .filter(function)• .filter(function() {
return $(this).parents('li').length >= 2;
});
![Page 119: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/119.jpg)
Filter• .not(selector)
• .not('.some-class')
• .not(function)• .not(function() {
return $(this).parents('li').length >= 2;
});
![Page 120: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/120.jpg)
Filter• .slice()
• .slice(2)
• .slice(-2)
• .slice(3, 6)
• .slice(2, -1)
• .eq()• .eq(2)
• .eq(-2)
![Page 121: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/121.jpg)
Context• $('selector', 'context')
• Different from "or" selector – $('selector1, selector2')
• Same as $('context').find('selector')• Not worth using; too confusing.
• .add()• .andSelf()• .end()
![Page 122: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/122.jpg)
Check• .hasClass(class)• .is(selector)
** returns a boolean
![Page 123: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/123.jpg)
Traversal Methods• List of all traversal methods on the jQuery API site• http://api.jquery.com/category/traversing
![Page 124: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/124.jpg)
Chaining• JavaScript has chaining built in.
• 'swap this text'.replace(/w/, 'n').replace(/this/,'that');
• '616-555-1212'.split('-').join('.');• jQuery takes advantage of this concept by having
almost all methods return the jQuery object.
![Page 125: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/125.jpg)
$('a').parent('li').siblings().find('a')
Chaining• Chain traversal methods together
![Page 126: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/126.jpg)
$('a').removeClass('old').addClass('new');
Chaining• Attach multiple behaviors.
![Page 127: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/127.jpg)
$('a').addClass('foo').parent('li').removeClass('foo')
Chaining• DOM Traversal methods are different from other jQuery
chaining methods!• New jQuery instance is created with each one.
![Page 128: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/128.jpg)
var lis = $('.container li:first').addClass('first-li') .next() .addClass('second-li').end() .nextAll() .addClass('not-first-li').end(); // unnecessary; added for symmetry
Chaining• JavaScript ignores white space, so use it to your
advantage.
![Page 129: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/129.jpg)
$('li').removeClass('myclass'); //implicit
$('li').each(function(index) { //explicit $(this).append( ' #' + (index+1) );});
Looping• Implicit Iteration• Explicit Iteration (Looping)
![Page 130: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/130.jpg)
$('li').each(function() { console.log( this ); // DOM element console.log( $(this) ); });
this Keyword
• Refers to the current object• jQuery sets this to matched elements in the jQuery object.
![Page 131: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/131.jpg)
var $listItems = $('li');var numItems = $listItems.length
//no need for length check$listItems.addClass('pretty');
if (numItems) { // do something with other elements}
Tips• Store selectors used more than once in variables• Use length property to check existence
• ...but often no need for the check
![Page 132: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/132.jpg)
$('#menu li').each(function(index) { $(this).click(function() { $$((''#footer#footer li:eq(' li:eq(' + index ++ index + ')'')')) .addClass('active'); });});
Tips• Concatenate to pass in a variable
![Page 133: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/133.jpg)
// bad$(':checkbox') // better$('input:checkbox')// best$('input[type="checkbox"]')
Tips• Avoid jQuery's custom selectors when possible
![Page 134: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/134.jpg)
// uncool$('div:first')
// cool$('div').first();
Tips• Avoid jQuery's custom selectors when possible
![Page 135: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/135.jpg)
// slower$('li:eq(3)')$('li:lt(3)')
// faster$('li').eq(3)$('li').slice(0, 3)
Tips• Avoid jQuery's custom selectors when possible
![Page 136: Front-end Masters day 1](https://reader036.vdocuments.us/reader036/viewer/2022081503/56815b0e550346895dc8ba6c/html5/thumbnails/136.jpg)
Q & A