05 strings, numbers, and dates
DESCRIPTION
TRANSCRIPT
STRINGS, NUMBERS, AND DATES Built-in functions to make your life easier
JavaScript is extremely capable • In this chapter we'll delve into
• Strings • Numbers • Dates • Efficiency
WORKING WITH STRINGS
Strings
• String are text data. Let's look at: • Length • Changing case • Simple search • Getting a substring • Using regular expressions
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.');!}!
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
You can do a simple search within strings var loc = theString.indexOf(str);!var loc = theString.lastIndexOf(str);!
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
REGULAR EXPRESSIONS
JavaScript honors regular expressions
var regex = /regularExpression/g;
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()
You can grab the portion that matched with match()
var result = ! string.match(regex);!// result is an array!!
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.
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'
NUMBER TOOLS
Working with numbers JavaScript has the ability to work with numbers. Let's look at some of the abilities in this next section.
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
You can test if a variable is a number or not
if (isNaN(theString)) {! … !}!
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
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'!
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);!
DATES AND TIMES
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);!
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
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);
Hands on dates and times
OTHER TECHNIQUES
There are some other cool JavaScript tricks you can use • Let's look at some …
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
Use the ternary operator (condition) ? A : B ;!var status = (a == 'correct') ? 'good' : 'bad';!
Minifying makes your JavaScript load quickly
• YUI Compressor • http://developer.yahoo.com/yui/compressor • http://refresh-sf.com/yui
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