The charAt() method

You use the charAt() method to return a single character that resides at a specified position within a string:

string.charAt(index)

• string: The string that contains the character
• index: The position within string of the character you want

Here are some notes about this method:

• To return the first character in string, use the following:

  string.charAt(0)

• To return the last character in string, use this:

  string.charAt(string.length - 1)

• If the index value is negative or if it's greater than or equal to string.length, JavaScript returns the empty string ("").

The following code presents an example.

HTML:

<div id="output"></div>

JavaScript:

// Set up an array of test strings

var stringArray = new Array(4);

stringArray[0] = "Not this one.";

stringArray[1] = "Not this one, either.";

stringArray[2] = "1. Step one.";

stringArray[3] = "Shouldn't get this far.";

var firstChar;

// Loop through the array

for (var i = 0; i < 4; i++) {

// Get the first character of the string;

firstChar = stringArray[i].charAt(0);

// If it's a number, break because that's the one we want

if (!isNaN(firstChar)) { break }

}

document.getElementById("output").innerHTML = "Here's the one: "" + stringArray[i] + """;

The idea here is to examine a collection of strings and find the one that starts with a number. The collection is stored in the array named stringArray, and a for() loop is set up to run through each item in the array. The charAt() method is applied to each array item to return the first character, which is stored in the firstChar variable. In the if() test, the logical expression !isNaN(firstChar) returns true if the first character is a number, at which point the loop breaks and the correct string is displayed in the web page.

The slice() method

Use the slice() method to carve out a piece of a string:

string.slice(start, end)

• string: The string you want to work with.
• start: The position within string of the first character you want to extract.
• end: An optional position within string immediately after the last character you want to extract. If you leave out this argument, JavaScript extracts the substring that runs from start to the end of the string. Also, this argument can be negative, in which case it specifies an offset from the end of the string.

To be clear, slice() extracts a substring that runs from the character at start up to, but not including, the character at end.

The following code runs through a few examples (see Figure 8-2).

HTML:

<pre>

Web Coding and Development for Dummies

01234567890123456789012345678901234567

</pre>

<div id="output"></div>

JavaScript:

var bookName = "Web Coding and Development for Dummies";

var str = "slice(0, 3) = " + bookName.slice(0, 3) + "<br>";

str += "slice(4, 10) = " + bookName.slice(4, 10) + "<br>";

str += "slice(15) = " + bookName.slice(15) + "<br>";

str += "slice(0, -12) = " + bookName.slice(0, -12);

document.getElementById("output").innerHTML = str;

The split() method

The split() method breaks up a string and stores the pieces inside an array:

string.split(separator, limit)

• string: The string you want to work with.
• separator: The character used to mark the positions at which string is split. For example, if separator is a comma, the splits will occur at each comma in string.
• limit: An optional value that sets the maximum number of items to store in the array. For example, if limit is 5, split() stores the first 5 pieces in the array and then ignores the rest of the string.

If you want each character in the string stored as an individual array item, use the empty string ("") as the separator value.

The split() method is useful for those times when you have a “well-structured” string. This means that the string contains a character that acts as a delimiter between each string piece that you want set up as an array item. For example, it's fairly common to have to deal with comma-delimited strings:

string1 = "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday";

As you can see, each day in the string is separated by a comma. This makes using the split() method a no-brainer:

var string1Array = string1.split(",");

When you run this statement, string1Array[0] will contain "Sunday", string1Array[1] will contain "Monday", and so on. Note, too, that JavaScript sets up the array for you automatically. You don't have to declare the array using new Array().

The following code tries out split() with a couple of example strings.

HTML:

<div id="output"></div>

JavaScript:

var string1 = "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday";

var string2 = "ABCDEF";

var str = "";

var string1Array = string1.split(",");

for (var i = 0; i < string1Array.length; i++) {

str += "string1Array[" + i + "] = " + string1Array[i] + "<br>";

}

var string2Array = string2.split("", 4);

for (i = 0; i < string2Array.length; i++) {

str += "string2Array[" + i + "] = " + string2Array[i] + "<br>";

}

document.getElementById("output").innerHTML = str;

After string1 is split into string1Array, a for() loop runs through the array and writes the items to the web page. For string2, the empty string is used as the separator and a limit of 4 is placed on the size of the string2Array. Again, a for() writes the array values to the page. Figure 8-3 shows what happens.

The substr() method

If you want to extract a substring and you know how long you want that substring to be, then the substr() method is often the best approach:

string.substr(index, length)

• string: The string you want to work with.
• index: The position within string of the first character you want to extract.
• length: An optional value that specifies the length of the substring. If you omit this argument, JavaScript extracts all the way to the end of the string.

The following code runs substr() through some examples; the results appear in Figure 8-4.

HTML:

<pre>

Web Coding and Development for Dummies

01234567890123456789012345678901234567

</pre>

<div id="output"></div>

JavaScript:

var bookName = "Web Coding and Development for Dummies";

var str = "substr(0, 10) = " + bookName.substr(0, 10)+"<br>";

str += "substr(15, 11) = " + bookName.substr(15, 11) + "<br>";

str += "substr(27) = " + bookName.substr(27);

document.getElementById("output").innerHTML = str;

The substring() method

Use the substring() method to extract a substring from a string:

string.substring(start, end)

• string: The string you want to work with.
• start: The position within string of the first character you want to extract.
• end: An optional value that specifies the position within string immediately after the last character you want to extract. If you leave out this argument, JavaScript extracts the substring that runs from start to the end of the string.

The following code gives the substring() method a whirl, and the results are shown in Figure 8-5.

HTML:

<pre>

Web Coding and Development for Dummies

01234567890123456789012345678901234567

</pre>

<div id="output"></div>

JavaScript:

var bookName = "Web Coding and Development for Dummies";

var str = "substring(0, 10) = " + bookName.substring(0, 10) + "<br>";

str += "substring(11, 14) = " + bookName.substring(11, 14) + "<br>";

str += "substring(31) = " + bookName.substring(31);

document.getElementById("output").innerHTML = str;

Understanding the differences between splice(), substr(), and substring()

The splice(), substr(), and substring() methods are very similar and are often confused by even experienced JavaScript programmers. Here are some notes to help you understand the differences between these three string extraction methods:

• The splice() and substring() methods perform the same task. The only difference is that splice() enables you to use a negative value for the end argument. This is handy if you want to leave out a certain number of characters from the end of the original string. For example, if you want to extract everything but the last three characters, you'd use this:

  string.splice(0, -3)

• Use either splice() or substring() when you're not sure how long the extracted string will be. This usually means that you’ll use the indexOf() and lastIndexOf() methods to find particular characters that mark the starting and ending points of the substring you want. You then use those values as the start and end arguments of splice() or substring(). For example, suppose you have a string of the form www.domain.com and you want to extract just the domain part. Here's a short routine that will do it:

  var hostName = "www.domain.com";

  var firstDot = hostName.indexOf(".");

  var lastDot = hostName.lastIndexOf(".");

  var domainName = hostName.substring(firstDot + 1, lastDot);

• On the other hand, if you know in advance exactly how long the extracted string must be, use the substr() method.

Specifying the current date and time

The most common use of the Date object is to store the current date and time. You do that by invoking the Date() function, which is the constructor function for creating a new Date object. Here's the general format:

var dateToday = new Date();

Specifying any date and time

If you need to work with a specific date or time, you need to use the Date() function’s arguments. There are five versions of the Date() function syntax (see the list of arguments near the beginning of this chapter):

var date = new Date("month dd, yyyy hh:mm:ss");

var date = new Date("month dd, yyyy");

var date = new Date(yyyy, mth, dd, hh, mm, ss);

var date = new Date(yyyy, mth, dd);

var date = new Date(ms);

The following statements give you an example for each syntax:

var myDate = new Date("August 23, 2018 3:02:01");

var myDate = new Date("August 23, 2018");

var myDate = new Date(2018, 8, 23, 3, 2, 1);

var myDate = new Date(2018, 8, 23);

var myDate = new Date(1408777321000);

Converting getMonth() into a month name

If you want to use the month in a nicer format than the standard Date object display, there's one problem: The getMonth() method returns a number instead of the actual name of the month: 0 for January, 1 for February, and so on. If you prefer to use the name, you need some way to convert the number returned by getMonth().

There are two ways you can go about this: an array or a function. The following code shows the array route:

HTML:

<div id="output"></div>

JavaScript:

var monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];

var dateNow = new Date();

var monthNow = dateNow.getMonth();

document.getElementById("output").innerHTML = "getMonth() is " + monthNow + "; the name is " + monthNames[monthNow];

The script declares a 12-item array named monthNames that stores the names of the months. The key here is that the array index matches the return value of getMonth(). For example, getMonth() returns 0 for January, so the array index 0 is assigned the string "January". Then the current date is stored in dateNow, and the month is stored in monthNow. Finally, in the getElementById() statement, the month name is displayed by using the monthNow value as the array index: monthNames[monthNow].

The following code shows how to do it using a function.

HTML:

<div id="output"></div>

JavaScript:

function monthName(monthValue) {

switch (monthValue) {

case 0 : return "January";

case 1 : return "February";

case 2 : return "March";

case 3 : return "April";

case 4 : return "May";

case 5 : return "June";

case 6 : return "July";

case 7 : return "August";

case 8 : return "September";

case 9 : return "October";

case 10 : return "November";

case 11 : return "December";

}

}

var dateNow = new Date();

var monthNow = dateNow.getMonth();

document.getElementById("output").innerHTML = "getMonth() is " + monthNow + "; the name is " + monthName(monthNow);

With this technique, you pass the getMonth() value as an argument to the monthName() function, which then uses a switch() statement to test the value and return the appropriate string.

So which method should you use? Neither one has any glaringly obvious benefits over the other. The array method is a bit quicker to set up and it probably executes a bit faster than the function, so it's probably the (slightly) better choice.

Converting getDay() into a day name

You face a similar problem with getDay() as you do with getMonth(): converting the returned number into a “friendly” name such as, in this case, Sunday for 0, Monday for 1, and so on. The solution, as you can imagine, is also similar. The following code shows how to return a day name from a getDay() value using an array.

HTML:

<div id="output"></div>

JavaScript:

var dayNames = ["Sunday","Monday","Tuesday",

"Wednesday","Thursday","Friday","Saturday"];

var dateNow = new Date();

var dayNow = dateNow.getDay();

document.getElementById("output").innerHTML = "getDay() is " + dayNow + "; the name is "+dayNames[dayNow];

This time, the script declares a seven-item array named dayNames and initializes each item to a name of a day (again, making sure each array index corresponds with the return value of getDay()).

A function to return the day name from a getDay() value would be almost identical to the one I listed earlier for month names, so I'll leave that as an exercise.

Determining a person's age

As a practical example, the following code presents a script that calculates a person’s age.

HTML:

<div id="output"></div>

JavaScript:

var userAge;

// Set the birth date: year, month, and day

var userYear = 1990;

var userMonth = 7;

var userDay = 23;

// Make a Date object and change it

// to the user's birthday this year

var birthdayDate = new Date();

birthdayDate.setMonth(userMonth);

birthdayDate.setDate(userDay);

// Store the current date

var currentDate = new Date();

var currentYear = currentDate.getFullYear();

// Check to see if the birthday has yet to occur this year

if (currentDate < birthdayDate) {

userAge = currentYear - userYear - 1;

} else {

userAge = currentYear - userYear;

}

document.getElementById("output").innerHTML = "You are " + userAge + " years old.";

The script prompts the user for the year, month, and day of her birth date. Then it creates a new Date object and stores it in birthdayDate. The date is changed using setMonth() and setDate(), but not setFullYear(). This gives you the user's birthday for this year. Then the current date is stored in currentDate and the year is stored in currentYear.

Now the script compares currentDate and birthdayDate: If currentDate is less, it means the user's birthday hasn’t happened, so her age is the difference between currentYear and userYear (the year she was born), minus one. Otherwise, her age is the difference between currentYear and userYear.

Performing complex date calculations

Other date calculations are more complex. For example, you might need to calculate the number of days between two dates. For this kind of calculation, you need to take advantage of the fact that JavaScript stores dates internally as millisecond values. They're stored, in other words, as numbers, and once you’re dealing with numeric values, you can use numeric expressions to perform calculations on those values.

The key here is converting the basic date units — seconds, minutes, hours, days, and weeks — into milliseconds. Here’s some code that will do it:

var ONESECOND = 1000;

var ONEMINUTE = ONESECOND * 60;

var ONEHOUR = ONEMINUTE * 60;

var ONEDAY = ONEHOUR * 24;

var ONEWEEK = ONEDAY * 7;

In programming, whenever you have variables that are constants — that is, they have values that will never change throughout the script — it’s traditional to write them entirely in uppercase letters to help differentiate them from regular variables.

Because one second equals 1,000 milliseconds, the ONESECOND variable is given the value 1000; because one minute equals 60 seconds, the ONEMINUTE variable is given the value ONESECOND * 60, or 60,000 milliseconds. The other values are derived similarly.

Calculating the days between two dates

A common date calculation involves figuring out the number of days between any two dates. The following code presents a function that performs this calculation.

function daysBetween(date1, date2) {

// The number of milliseconds in one day

var ONEDAY = 1000 * 60 * 60 * 24;

// Convert both dates to milliseconds

var date1Ms = date1.getTime();

var date2Ms = date2.getTime();

// Calculate the difference in milliseconds

var differenceMs = Math.abs(date1Ms - date2Ms);

// Convert to days and return

return Math.round(differenceMs/ONEDAY);

}

This function accepts two Date object arguments — date1 and date2. Note that it doesn't matter which date is earlier or later because this function calculates the absolute value of the difference between them. The constant ONEDAY stores the number of milliseconds in a day, and then the two dates are converted into milliseconds using the getTime() method. The results are stored in the variables date1Ms and date2Ms.

Next, the following statement calculates the absolute value, in milliseconds, of the difference between the two dates:

var differenceMs = Math.abs(date1Ms - date2Ms);

This difference is then converted into days by dividing it by the ONEDAY constant. Math.round() (which I discuss in the next section) ensures an integer result.

The parseInt() function

I begin with the parseInt() function, which you use to convert a string into an integer:

parseInt(string, base);

• string: The string value you want to convert.
• base: An optional base used by the number in string. If you omit this value, JavaScript uses base 10.

Note that if the string argument contains a string representation of a floating-point value, parseInt() returns only the integer portion. Also, if the string begins with a number followed by some text, parseInt() returns the number (or, at least, its integer portion). The following table shows you the parseInt() results for various string values.

The parseFloat() function

The parseFloat() function is similar to parseInt(), but you use it to convert a string into a floating-point value:

parseFloat(string);

Note that if the string argument contains a string representation of a integer value, parseInt() displays just an integer. Also, like parseInt(), if the string begins with a number followed by some text, parseInt() returns the number. The following table shows you the parseFloat() results for some string values.

The + operator

For quick conversions from a string to a number, I most often use the + operator, which tells JavaScript to treat a string that contains a number as a true numeric value. For example, consider the following code:

var numOfShoes = '2';

var numOfSocks = 4;

var totalItems = +numOfShoes + numOfSocks;

By adding + in front of the numOfShoes variable, I force JavaScript to set that variable's value to the number 2, and the result of the addition will be 6.

Properties of the Math object

The Math object's properties are all constants that are commonly used in mathematical operations. Table 8-6 lists all the available Math object properties.

Methods of the Math object

The Math object's methods enable you to perform mathematical operations such as square roots, powers, rounding, trigonometry, and more. Many of the Math object’s methods are summarized in Table 8-7.