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