Exercises for Customizing Vendor Systems

Chapter 4: JavaScript Basics

This page contains interactive exercises that go along with Chapter 4: JavaScript Basics. For each exercise, you will find the code snippets presented in the book along with live versions of the markup. Running the code in your browser's Developer Tools console will run the code on the page so you can see how the JavaScript statements being discussed work.

Numbers

Try running this code in your console. Each of these variables has the number data type. What does the + operator to two numbers?

var myNumber = 17;
var myDecimal = 6.9780;
myNumber + myDecimal;

Now try the second set of statements. Here the variables are defined as strings, since they have quotes around them. What does the + operator do with strings?

var myNumber = '17';
var myDecimal = '6.9780';
myNumber + myDecimal;

Booleans

Run the following code in the console to test the boolean value of a defined, but empty variable.

var myString = '';
Boolean(myString);

Now try testing the boolean value of a defined variable with a real value.

var myString = 'This is my string variable';
Boolean(myString);

Arrays

Run the following code in the console to display the third item in the defined array. What happens when you change the value of the index number between the square brackets?

var myArray = ["Books", "Articles", "Databases", 56];
console.log(myArray[2]);

Objects

Run the following code in the console to display the weight property of the myObject object. What happens when you change the value of the property?

var myObject = { color: "red", weight: 120, name: "Bertha", age: 3};
console.log(myObject.weight);

indexOf() Method

Run the following code in the console. The indexOf() property will return the numerical value of the starting position of the substring, if present. If the sub string isn't found, it returns -1. What happens if you look for "Due" instead of "8"? What does it mean if indexOf() returns 0?

var availability = 'Due 8/14/2016';
console.log(availability.indexOf('8'));

.split() Method

.split() creates an array of strings, broken up from a larger string wherever the split character or string appears. Try running the code below in the console. What happens to the array if you split the original string at every forward slash "/" rather than every space?

var availability = 'Due 8/14/2016';
var parts = availability.split(' ');
console.log(parts);

What happens if you change the console.log() from showing the entire array to showing only the item at index 1? (Hint: use parts[1].)

.length() Property

The .length() property measures the number of characters in string variables, or the number of entries in an array. Try running the code below. What happens if you change the variable to a number, like 567?

var availability = 'Due 8/14/2016';
console.log(availability.length);

Now try with an array.

var myArray = ["Books", "Articles", "Databases", 56];
console.log(myArray.length);

getElementById() Method and the .innerHTML and .textContent Properties

This method returns the DOM element with the specified ID. I've included a bit of markup here for you to experiment on:

<div id="container">
	<div id="content">
		<p>This is some awesome content!</p>
	</div>
	<p>And here is some more!</p>
</div>

Now here it is included in the DOM. Go ahead and run the code below in the console, and you'll see what happens when you grab the HTML or text of an element.

console.log(document.getElementById('content').innerHTML);

What happens if you change the .innerHTML property to .textContent? What happens if you remove the properties altogether, and just select the element?

You can also change the HTML or text of an element with the innerHTML or textContent property. Try running this code. What happens to the content above in the gray box?

document.getElementById('content').innerHTML = "<p>This is some SUPER amazing content!</p>;

querySelector() and querySelectorAll() Methods

The querySelector() methods allow us to use CSS-style selectors to find elements on a page. Try running the following code. What happens if you remove the child selector (">")?

console.log(document.querySelectorAll('#container > p'));

encodeURI() and encodeURIComponent() Methods

These two methods will percent-encode strings to be passed in a URL. If you need to encode an entire URL, use encodeURI(), but if you need every special character in a URL escaped, then use encodeURIComponent().

Try running the following code. How is the output different if you change to encodeURI()?

var myVariable = 'This is a forward slash: /';
var path = 'http://mywebsite.com/?text=';
console.log(encodeURIComponent(path + myVariable));

Conditionals

Conditionals allow you to test certain conditions before running code. Try running the code below in your console while visiting different websites (especially a post on a Wordpress blog). Did you see any differences?

if(document.getElementById('comments')) {
	console.log('This page has a comments section.');
} else {
	console.log("I don't see a comments section with an ID of 'comments' here.");
}

The above condition checked for the existence of an element with an ID of 'comments'. The following conditional checks to see if you are on the JavaScript Basics page and then makes changes to the site's visual style. (Refresh the page to return to normal)

if(document.title == 'JavaScript Basics') {
	document.body.style.backgroundColor = 'black';
	document.body.style.color = 'white';
}