Front End Web Development

Spark Boulder, Summer 2017

Session 10: Nemesis

Javascript 101: the <script> tag

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:

More dumb fun web stuff

We're halfway through the class! Hooray!

For the first half of the class, we focused exclusively on HTML and CSS.

For the second half of the class, we're going to focus exclusively on JavaScript.

This is a bit of a cognitive leap that we have to make.

Before, we were just using markup languages (HTML and CSS) to tell the browser what to put on the page and what to make it look like.

Now, we're going to use a programming language to give instructions to the computer, sometimes unrelated to what we want to display on the page. Things like changing the contents of the page, listening for user interaction events, and communicating with servers.

A brief history of JavaScript

In 1995, a programmer at Netscape named Brendan Eich wrote a language that would make it easier for early web developers to manipulate on the content on web pages. He wrote it in 10 days, and initially named it Mocha.

20 years later, it’s still pretty easy to describe JavaScript as a complete clusterfuck.

More info: https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript

What is JavaScript?

JavaScript is a programming language that we use to control browsers.

We can modify page elements, fetch data across the network, perform computations, or listen to user inputs using JavaScript.

Recently, it’s changed so that we can use JavaScript in lots more places than the browser - for desktop applications and server-side programming, for example.

Fun fact - Atom is written in JavaScript!

Side note: Java =/= JavaScript

Java is a cross-platform programming language designed to be easy to run natively on lots of devices - desktops, early cell phones, ATMs, satnav systems, etc.

JavaScript is completely different - it’s a programming language designed to run in the browser and manipulate web pages. They share some loose syntax, and it was a bit of a marketing play when it was named, but that's about it.

The current state of JavaScript

(still a complete clusterfuck)

The past 5 years has seen an explosion of client-side (browser) and server-side JavaScript libraries, frameworks, and new language features.

Some of the major JavaScript tools, frameworks, and libraries out there:

Feeling overwhelmed? Totally expected. Here's what a state-of-the-art JavaScript "stack" looks like in 2016.

Don't worry about knowing any of those things! That's a list of what professional web devs use in big companies and in startups today. If they use a specific stack, framework, or library, they'll generally teach it to you before you start working on it.

If you're an ultra-über-advanced professional web developer, companies will probably expect you to have a decent amount of knowledge on one or two of those technologies, and some slight familiarity with the rest. Try to be a "T-shaped" person!

Time to write some JavaScript!

Prepare your text editors!

The <script> tag

The <script> tag tells the browser to execute the contents of the tag as JavaScript.

<!-- index.html -->
<html>
    <body>
        <script>
            alert("Mathematical!");
        </script>
    </body>
</html>

For the time being, you should include your script as the last element in the <body> tag. More on that when we start working with the Browser API!

Technically, you can put a <script> tag wherever you'd like on a page! The browser evaluates your HTML from top-to-bottom, and whenever it sees a <script> tag, it goes ahead and executes it.

External JavaScript

We can also specify our JavaScript in an external file, just like CSS!

<!-- index.html -->
<html>
    <body>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js
alert("Algebraic!");

Same thing goes for JavaScript libraries that exist out there somewhere on the internet! If I wanted to include jQuery in my project, I'd just throw in <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>.

alert()

<!-- index.html -->

<script>
    alert("This is one of those annoying popups that asks if you’re sure that you want to leave this site");
</script>

Notice that everything within the parentheses is also wrapped in quotation marks!

console.log()

<!-- index.html -->

<script>
    console.log("Where does this message get logged to?");
</script>

What happens if you don't put everything in quotation marks?

document.write()

<!-- index.html -->

<script>
    document.write("<h1>asdfasdfasdf</h1>");
</script>

There's a semicolon at the end of all of these, but it's not technically required. Generally a good idea to include it anyway.

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! 🚀