Today’s Goals:

• Review your Bootstrap feedback
• Begin learning JavaScript (JS)!
  • What is it and why would you use it?
  • What are some examples of JavaScript?
  • Using variables, functions, and events
  • Using the web console in Chrome to practice JS code

 Today’s featured website:

• http://www.patience-is-a-virtue.org/– Look at the code and see if you can figure out how long it will take before another message appears.

 Finishing up with Bootstrap

1. Thanks for your honest feedback!
2. Congratulations for attempting to use a pretty advanced front end framework! You should be proud of your efforts, regardless of whether you finished. The best way to learn Bootstrap is to just start building something with it.
3. Helpful Bootstrap tools (for future use):
   • Quentin Watt’s Bootstrap video tutorials
   • This Bootstrap cheatsheet
   • This desktop Bootstrap side builder
   • W3Schools.com’s online tutorials
   • The official Bootstrap site
   • Free Bootstrap 4 themes

 What is JavaScript?

• Let’s watch this brief video about JavaScript.
• We recently used JavaScript by learning some of Bootstrap’s features such as the photo carousel and pop-up windows (modals)
• 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

• First, we will follow a tutorial in the browser (Chrome). Second, we will use the console in Chrome to play around with JavaScript code. Third, we will create a basic webpage and add some JavaScript to it. We will be using the same code in all of these examples before we learn some more basics.
• Let’s get in some basic practice with this fun tutorial
• 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.
• 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.
  • How could we create another message to pop up when we click the button?
  • 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. Let’s call the variable myText and have it equal “Our web design class is awesome!”; Let’s refer again to the tutorial to see how to add the variable to our function.
  • Something extra: See if you can figure out how to make your webpage fart