Front End Web Development

Spark Boulder, Summer 2017

Session 13: Beyond

Javascript 104: working with the browser API

More Dumb Fun Web Stuff

http://www.jsfuck.com/

Next time

Project 3: Coin Flipping App

For your third project, I'd like you to create an app that flips a coin and records the results!

I'd like for you to create a page with two buttons: "Flip coin" and "Reset". Every time you click the "Flip coin" button, your page writes either a "Heads" or "Tails" to the page. Every time you click the "Flip coin" button, the old results stick around, so eventually you'll have a big long list of "Heads" and "Tails".

If you click the "Reset" button, it should clear out all the previous results, and allow you to click the "Flip coin" button for more results.

I should also mention, there should be a 50/50 chance for heads/tails :)

A couple things:

Today - the Browser API!

Bust out those text editors!

What's an API?

API stands for Application Programming Interface.

Basically, an application (browser, web service, native/mobile phone) has a bunch of commands available to us. We can control the application by running the commands!

What's the Browser API?

Chrome/Firefox/Edge all have pretty much the same commands that we can run.

These commands allow us to do a couple things with the browser:

There are tons of commands for the browser.

I can't teach you them all!

I'm going to give you a small sampling of some of the commands, just to give you an idea of how they work.

The rest of them? Check out the documentation. And remember, Google is your friend!

Selecting Elements

First things first! We need to actually select the elements that we want to manipulate on the page.

getElementById

If we have an element of the page that has a unique id attribute, we can use getElementById to select it.

If an element with the matching id exists, then getElementById will return the element.

<body>
    <p>
        This is the first paragraph
    </p>
    <p id="myParagraph">
        This is the second paragraph
    </p>
    <p>
        This is the third paragraph
    </p>
    <script>
        // remember, I'm putting the script at the bottom of the body!
        var myParagraphElement = document.getElementById("myParagraph"); // don't forget the quotes!
        console.log(myParagraphElement);
    </script>
</body>

What is getElementById? Is it a string, or a number, or an object? Where is it defined?

getElementsByClassName

If we have several elements on the page with the same class, we can use getElementsByClassName.

getElementsByClassName will return an array of the elements that have the matching class.

<body>
    <p class="rightAligned">
        This is the first paragraph
    </p>
    <p>
        This is the second paragraph
    </p>
    <p class="rightAligned">
        This is the third paragraph
    </p>
    <script>
        var rightAlignedParagraphs = document.getElementsByClassName("rightAligned");
        console.log(rightAlignedParagraphs);
    </script>
</body>

What happens if I have no elements with the class rightAligned on the page? What does getElementsByClassName return?

getElementsByTagName

Hey, if you want to get all of the elements with the same tag, whatever works for you.

<body>
    <p>
        This is the first paragraph
    </p>
    <p>
        This is the second paragraph
    </p>
    <p>
        This is the third paragraph
    </p>
    <script>
        var allMyParagraphs = document.getElementsByTagName("p");
        console.log(allMyParagraphs);
    </script>
</body>

What the heck is document, anyway?

Elements

Now that we've selected some elements, let's actually manipulate them!

element.innerHTML

innerHTML allows us to access and modify whatever is actually in the element that we've selected.

<body>
    <div class="kanyeQuotes">
        <p>
            My greatest pain in life is that I will never be able to see myself perform live.
        </p>
        <p>
            I hate when I'm on a flight and I wake up with a water bottle next to me like oh great now I gotta be responsible for this water bottle.
        </p>
        <p>
            Fur pillows are hard to actually sleep on.
        </p>
    </div>
    <script>
        var allMyParagraphs = document.getElementsByTagName("p");
        for (var i = 0; i < allMyParagraphs.length; i++) {
            allMyParagraphs[i].innerHTML = "Liz Lemon, " + allMyParagraphs[i].innerHTML;
        }
    </script>
</body>

document.createElement

We can create a new HTML element with the document.createElement function, but it doesn't attach the element to the page yet.

<!-- index.html -->

<h1>where's our new element?</h1>

<script src="myscript.js" charset="utf-8"></script>
// myscript.js

var myNewParagraphTag = document.createElement("p");
console.log(myNewParagraphTag);
myNewParagraphTag.innerHTML = "hello!";
console.log(myNewParagraphTag);

.appendChild()

In order to attach out new element to the page, we first need to find an HTML element and then call .appendChild(newElement) on the existing HTML element.

<!-- index.html -->

<h1>where's our new element?</h1>

<div id="container"></div>

<script src="myscript.js" charset="utf-8"></script>
// myscript.js

var myNewParagraphTag = document.createElement("p");
myNewParagraphTag.innerHTML = "hello!";
var containerElement = document.getElementById("container");
console.log(containerElement);
containerElement.appendChild(myNewParagraphTag);
console.log(containerElement);

onclick

What if we want to have an alert-ish element that hides after we click it?

<body>
    <div id="myAlert">
        Hey! This is an alert thing. Click me!
    </div>
    <script>
        var myAlertElement = document.getElementById("myAlert");
        myAlertElement.onclick = function () {
            alert("Hey! Quit clicking me!");
        }
    </script>
</body>

There's another way to do it too, with the onclick attribute on HTML elements.

What happens if you try to assign an onclick function on an element twice?

onkeypress

<!-- index.html -->

<h1>turn down for</h1>

<script src="myscript.js" charset="utf-8"></script>
// myscript.js

document.onkeypress = function () {
    console.log("what");
}

There's also onkeydown and onkeyup events.

How do I tell what key was pressed?

classList, add, and remove

We still need to hide the element though :)

<head>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div id="myAlert">
        Hey! This is an alert thing. Click me!
    </div>
    <script>
        var myAlertElement = document.getElementById("myAlert");
        myAlertElement.onclick = function() {
            myAlertElement.classList.add("hidden");
        }
    </script>
</body>

That's all I've got for today!

What questions are there?

How to be a Web Developer

  1. Look stuff up on the internet
  2. Make stuff
  3. Repeat

Excelsior! 🚀