JavaScript I – Day 9

Geekwise Academy

 

 

Instructors:

Corey Shuman

Aaron Lurz

 

 

Slack Channel:

https://geekwise-js1.slack.com

Github:

https://github.com/coreyshuman/Geekwise-JavaScript-I

Lesson plans:

http://coreyshuman.github.io/Geekwise-JavaScript-I/html/

 

 

Today’s Topics

·         Review Day 8

·         Programming Knowledge Quiz

·         More on DOM Manipulation

o   Creating Elements

o   Removing Elements

o   Styling Elements

 Programming Knowledge Quiz

 

1)      Create a function with the signature num2arr(num1,num2) that takes two number arguments and returns an array. The first number in the array should be the two numbers added together, and the second number in the array should be the two numbers multiplied together.

a.       Example input: 2, 5

b.      Example output: [7, 10]

2)      Create a function with the signature numCompare(num1,num2) that takes two number arguments. If the first number is larger, return the string "larger". If the numbers are equal, return the string "equal". If the first number is smaller, return the string "smaller".

a.       Example Input: 2, 5

b.      Example Output: "smaller"

3)      Create a loop that prints out the numbers 1 – 100. If a number is divisible by 3, print "Fizz" instead of the number. If a number is divisible by 5, print "Buzz" instead of the number. If a number is divisible by both 3 and 5, print "FizzBuzz" instead of the number.

a.       Example output for first few numbers: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz ….

4)      Create a function that takes a single character as an input and returns true is the character is capitalized and false if the character is lowercase.

a.       Example input 1: "A" Example output 1: true

b.      Example input 2: "b" Example output 2: false

5)      Create a function that takes a string as an input and returns an array of the characters in the string.

a.       Example input: "corey"

b.      Example output: ["c", "o", "r", "e", "y"]

6)      Challenge: Create a function that takes an array of unsorted numbers as an input argument and returns the array sorted from least to greatest.

a.       Example Input: [7, 3, 1, 2, 6]

b.      Example Output: [1, 2, 3, 6, 7]

Creating Elements

 

Here is where the real magic of the DOM becomes apparent. Not only can we inspect the existing DOM, we can add to it! To create an element we use the document.createElement() function. It takes as an argument as a string with the same name as the tag you want to create. So if you wanted to create an anchor, you would use document.createElement("a").

 

    
        var a = document.createElement("a");
        console.log(a);
   

 

Great, so we created an empty anchor tag. This isn't of too much use yet, lets assign some other properties to the anchor so we can get some actual use out of it. How about some text (so we have something to click on). We can set the text content using the textContent property:

    
        a.textContent = "I'm a link to google";
        console.log(a);
   

 

And what good is a link without an href? Now...how did we set attributes on a link?

    
        a.setAttribute("href", "http://www.google.com");
        console.log(a);
   

 

It's worth noting that there are some properties of an element that you can access without setAttribute. href is one of these properties. If you're ever not sure check out the MDN for what attributes are available via an elements interface. Here is the link to the Anchor interface. Let's set the href of the a tag using this syntax.

    
        a.href = "http://www.yahoo.com";
   

 

If you're refreshing your page hoping to see your new element ready for use, this may be anticlimactic for you. So far, we've created an element in memory, but now we need to do add it to the page. We do this using the appendChild function. When using the appendChild function, we first need to tell the DOM where exactly to append the child to. In your console, enter document.body. What does the console show?

The document.body is a shortcut that to the body tag. Since we want the new element to show up on the page, at a minimum it needs to be attached to the body tag (since the body tag is what is visible on the page).

    
        document.body.appendChild(a);
   

 

As you can see above, the document.body is a reference to the <body> tag. So it's telling JavaScript to append a child node to the body tag. This can be done on ANY node you have selected.

Try it: append an anchor tag to the h1 we selected earlier in the exercise.

    
        h1.appendChild(a);
   

Removing Elements

What good would all of this be if we couldn't remove elements from the page? This is done with the removeChild called on the parent element of the element you want to remove.

    
        document.body.removeChild(a);
   

 

Note: the removeChild example isn't too exciting, since we add it, then remove it right away. Let's delay the removal of the element using setTimeout.

    
        setTimeout(function () {
        document.body.removeChild(a);
        }, 2000);
   

 

The setTimeout function takes a function as the first argument and a number as the second argument. The setTimeout function will wait the specified amount of time, then call the function you've passed in. The above will wait 2000 milliseconds, then call the function.

Styling Elements

Along with selecting, adding and modifying elements in the DOM, we can also apply styling. We do this via the element.style property.

When we use this property, the style names use no dashes, instead using camelCasing. For instance, if a CSS selector looked like:

    
        a {
        background-color: red;
        }
   

 

The JavaScript style property would be:

    
        a.style.backgroundColor = "red";
   

However, we could alternatively set the style property using the setAttribute function. When we do it that way, we can use the regular CSS syntax.

    
        a.setAttribute("style", "background-color: red; color: white;");
   

Putting it all together

So at this point we now know how to select existing elements, create new elements, modify element attributes, and append the elements to other elements already on the page. Let's create a helper function to make some of this easier.

Try it: Create a function that will have the following signature: e(elementType, text, attributes, styles) where elementType is a string of an element type, attributes is an arrays of attributes to set on an element, and styles is an array of style properties to set on an object. Then return the newly created element.

    
        function e(elementType, text, attributes, styles) {
        var newElement = document.createElement(elementType);
        newElement.textContent = text;
 
        //set the attributes on the tag
        for (var i = 0; i < attributes.length; i++) {
        var attr = attributes[i];
        newElement.setAttribute(attr[0], attr[1]);
        }
 
        //set the styles
        for (var j = 0; j < styles.length; j++) {
        var style = styles[j];
        newElement.style[style[0]] = style[1];
        }
 
        return newElement;
        }
 
        var a = e("a", "link to google", [['href', "http://www.google.com"]], [['color', "red"]]);
        document.body.appendChild(a);
   

 

 

Assignment

  1. Continue work on final project. The HTML and CSS should be pretty far along by this point. Think about how you can start to use the DOM functions we’ve learned about in your project.