Today’s goals:

• Review your Bootstrap feedback
• Discuss and view your JavaScript examples
• 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 site:

• http://balldroppings.com/js/– Make sure you view the code. What is happening here?

 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 online Bootstrap code editor
   • This desktop Bootstrap side builder
   • W3Schools.com’s online tutorials
   • The official Bootstrap site

 Your JavaScript Examples

• Find an example of JavaScript by going to a webpage you like and checking out its features. What is an example of JavaScript? You’re going to see if you can figure that out! Hint– look for some kind of interactivity or animation. View the page code to: #1, see if it is JavaScript that has made that feature you like possible and if so, #2, see if you can recognize anything in the JavaScript code (numbers? words?). Hint– JavaScript code will either be directly on the webpage or linked in a separate file that can you can click on and view.
• Let’s share our examples as a class
• Check out these great examples from Period 3 students: http://www.sbs.com.au/theboat/ and http://run4tiger.com/

 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.
  • 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.
  • Finally, we’re going to learn how make our webpage fart. We need to add the CDN to our webpage and then add the JavaScript to control how many pixels a user has to scroll before hearing the obnoxious farting noise. We also need to add enough content to have a scroll bar; let’s add a bunch of paragraphs.