Today’s goals:

• Check out the new online gallery for student graphics: https://padlet.com/agoldsberry/3u71mwf84qlc
• Begin learning JavaScript (JS)!
  • What is it and why would you use it?
  • Using the web console in Chrome to practice JS code
  • What are some examples of JavaScript?
  • Writing JavaScript and adding it to your webpage
  • Using variables, functions, and events

 Today’s featured site:

• http://papertoilet.com/ -Oddly satisfying (and makes use of JavaScript)!

 JavaScript Introduction

• What is JavaScript?
  • What is JavaScript? Why would you want to learn how to use it?
  • JavaScript, much like HTML and CSS, is easy to learn but hard to master. It’s worth the struggle to keep trying hard and learning more as you go!
  • You can think about JavaScript in 3 different parts– basic JavaScript, JavaScript libraries, and JavaScript frameworks. Today you’ll begin learning basic JavaScript and will eventually learn jQuery, a very popular JavaScript library (there are TONS of libraries to help developers do things with JavaScript). We won’t get into frameworks but some examples are Node.js, Meteor.js, Angular.js, etc. You see Angular.js in action if you have a Gmail account.
• JavaScript practice:
  

  • Let’s start writing JavaScript (JS) right now in this fun tutorial https://www.javascript.com/try 
  • Now, let’s try come of the coding from the tutorial directly in our browser. Let’s bring up the console in Chrome by clicking ctrl-shift-i on the keyboard. We’re now going to practice the basics we just learned in here.

 Writing Basic JavaScript

How to add JS to your webpage

• JavaScript can be added in several different ways to your webpage:
  Loaded as an external file (saved as something.js) and linked in the head section
  Added to either the head or body section inside of script tags

Practice

• Ok, now we’re ready to open Notepad++ and start a new page. We’re going to use this tutorial  as a guide.
  • Let’s set up a basic page in Notepad++ with opening and closing html, head, title, and body tags.
  • After we copy the code in our head section, let’s take a look. What does the showAlert function do? Will anything happen when we preview our page in the browser? Why or why not?
  • What does the code we added to our body tag say? How can we see the alert message again?
  • Let’s change the text in the showAlert function to something else.
  • Let’s use JavaScript’s onclick event with our function. We will create a button for a user to click that will show our message. Add some button tags in your body section and add the text click me. Then add onclick=”showAlert()” inside the first button tag.
  • Why did we have to see the pop-up message before the rest of the page loaded?
  • How could we create another message to pop up when we click the button? Hint: we have to create a new function. How can we do that and what has to change inside of our button tag?
  • onclick and onload are examples of JavaScript events that can call functions like showAlert. Let’s try the onmouseover event to show our message. Let’s begin by adding a simple link and adding the onmouseover event to it.
  • Let’s practice creating a variable like we did in the try JavaScript tutorial. First, let’s create a new function and call it classMessage. Let’s call the variable myText and have it equal “Our web design class is awesome!”; Let’s change the function we’re using with the link we just added to this new one. Let’s refer again to the tutorial  to see how to add the variable to our function.

Review

What does the showAlert function do?

In your own words, what is:
a function?
an event?
a variable?