05 strings, numbers, and dates
DESCRIPTION
TRANSCRIPT
![Page 1: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/1.jpg)
STRINGS, NUMBERS, AND DATES Built-in functions to make your life easier
![Page 2: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/2.jpg)
JavaScript is extremely capable • In this chapter we'll delve into
• Strings • Numbers • Dates • Efficiency
![Page 3: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/3.jpg)
WORKING WITH STRINGS
![Page 4: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/4.jpg)
Strings
• String are text data. Let's look at: • Length • Changing case • Simple search • Getting a substring • Using regular expressions
![Page 5: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/5.jpg)
You get a string's length from string.length var password = document.getElementById('password').value;!if (password.length < 8 ) {! alert('That password is too short.');!}!
![Page 6: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/6.jpg)
Changing case of a string var x = theString.toUpperCase()!var y = theString.toLowerCase()!• These return the changed string but do not change the
string itself
![Page 7: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/7.jpg)
You can do a simple search within strings var loc = theString.indexOf(str);!var loc = theString.lastIndexOf(str);!
![Page 8: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/8.jpg)
You can get substrings from strings • var sub = theString.slice(start,end); • start is zero-based • end is one-based
• if less than zero, they will reach backwards into the string
![Page 9: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/9.jpg)
REGULAR EXPRESSIONS
![Page 10: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/10.jpg)
JavaScript honors regular expressions
var regex = /regularExpression/g;
![Page 11: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/11.jpg)
You can find the location of a regex within a string • var whereInString = theString.search(regex); • The result will be its zero-based location within the string • -1 => not found • Just like indexOf()
![Page 12: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/12.jpg)
You can grab the portion that matched with match()
var result = ! string.match(regex);!// result is an array!!
![Page 13: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/13.jpg)
match() gives you an array back with all the matches • var matches = theString.match(regex); • var numMatches = matches.length; • var firstMatch = numMatches[0]; • var nextMatch = numMatches[1]; • … and so on.
![Page 14: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/14.jpg)
And you can replace the string with replace() • var newString = orig.replace(regex, new); • Does not change the original string • Replaces every occurrence of regex with new • Example: var date = '10.28.2012';!var regex = /\./g;!date = date.replace(regex, '/');!• date is now '10/28/2012'
![Page 15: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/15.jpg)
NUMBER TOOLS
![Page 16: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/16.jpg)
Working with numbers JavaScript has the ability to work with numbers. Let's look at some of the abilities in this next section.
![Page 17: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/17.jpg)
You can change strings to numbers • Several ways: var num = Number(theString);!
• Returns NaN if theString isn't numeric
var num = parseInt(theString);!• Reads theString char by char until it gets to a non [0-9] character
and stops. This includes '.'
var num = parseFloat(theString);!• Reads until it gets to a non [0-9] or '.' and stops
![Page 18: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/18.jpg)
You can test if a variable is a number or not
if (isNaN(theString)) {! … !}!
![Page 19: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/19.jpg)
You can round numbers with Math.round() • Original number is not changed • Returns a rounded number var rounded = Math.round(number);!
• Rounds to nearest whole number
var roundedUp = Math.ceil(number);!• Always rounds up
var roundedDown = Math.floor(number);!• Always rounds down
![Page 20: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/20.jpg)
You can round a number to any number of significant digits • var rounded = oldNumber.toFixed(n); • Where n is the number of digits to the right of the decimal • Example: To make something look like currency …
var number = '101.37501';!var currency = '$' +! number.toFixed(2);!// currency now is '$101.38'!
![Page 21: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/21.jpg)
You can make random numbers with Math.random() • Returns a number
between 0 and 1
• Get any random number between x and y with: Math.floor((Math.random() * (y - x + 1)) + x);!
![Page 22: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/22.jpg)
DATES AND TIMES
![Page 23: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/23.jpg)
You can also work with dates and times
//Today's date!var now = new Date();!//Christmas, 2012!var then = new Date(2012, 11, 25);!//3:23 pm same day!then = new Date(2012, 11, 25, 15, 23);!
![Page 24: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/24.jpg)
Date functions show different parts of the date • getFullYear() // 4-digit year • getMonth() // integer between 0 (Jan.) & 11 (Dec.) • getDate() // integer between 1 & 31 • getDay() // integer between 0 (Sunday) & 6 (Saturday) • getHours() • getMinutes() • getSeconds() • getTime() // number of milliseconds since Jan 1, 1970
![Page 25: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/25.jpg)
To get timespans … • var now = new Date(); • var then = new Date(2014, 11, 25); • var diff = then – now; • var daysTill = diff / (1000 * 60 * 60 * 24);
![Page 26: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/26.jpg)
Hands on dates and times
![Page 27: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/27.jpg)
OTHER TECHNIQUES
![Page 28: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/28.jpg)
There are some other cool JavaScript tricks you can use • Let's look at some …
![Page 29: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/29.jpg)
Reuse JavaScript files as much as possible • They'll be cached, saving download time. • Big files = slow download • Don't download things that aren't needed • So, best practice is • One JS file per page with unique functions • One global with shared functions
![Page 30: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/30.jpg)
Use the ternary operator (condition) ? A : B ;!var status = (a == 'correct') ? 'good' : 'bad';!
![Page 31: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/31.jpg)
Minifying makes your JavaScript load quickly
• YUI Compressor • http://developer.yahoo.com/yui/compressor • http://refresh-sf.com/yui
![Page 32: 05 strings, numbers, and dates](https://reader033.vdocuments.net/reader033/viewer/2022051514/5492a24eac7959182e8b4686/html5/thumbnails/32.jpg)
Conclusion • Strings • Regex • Converting with Number(), parseInt(), parseFloat() • isNan() • Rounding with round(), ceil(), floor(), and toFixed() • Random numbers with Math.random() • Dates • Ternary statement • Switch statement • Minifying code