<<<<<<< HEAD ======= >>>>>>> 889cc4e82e9b36a4a53da0a96b2e27aad1b8d170 FEWD: Class 12


1) Please download Class 12 Starter Code

2) Move the following into your homework directory:


Class #12


JS and the Browser


• Final Projects:

⇒ Second deliverable due Monday, October 29th

⇒ Wireframes



Browser events

.innerHTML property

Input elements





• Group of code that executes (runs) when asked

• Often perform a specific task - consider them miniature programs

• Can take an input, perform logic on that input, and return ouput

• What is the name of this function? What does this function do?

  function hello() {
    var greeting = 'hello, world!';



• A function has the following syntax:

function keyword

⇒ Name: used to invoke or call the function

⇒ Parameters: options to change the function's input

⇒ Body: code that runs when the function is called

  function speak(words) {


• Remember: you must call functions to use them!

• Calling a function will execute the function's body

• To call a function, follow the function's name with ()

  // function declaration
  function helloWorld() {
    console.log('hello, world!')

  // will not call the function; returns the definition

  // use () to call a function

Code Along

Browser Events

Browser Events

Events are actions users perform in the browser:

⇒ Click

⇒ Key press / key down / key down

⇒ Form submit

⇒ Scroll

• JavaScript can listen and respond to events

Browser Events: Usage

1) Use document.querySelector() to select the element you want to apply the event to:


2) Apply the event (ex: .onclick) to the query:


Browser Events: Usage

3) Set the query/event equal to a function

  function hello() {
    alert('Hello, World!');

  document.querySelector('#click-me').onclick = hello;

• Function hello runs when #click-me is clicked

Code Along

Code Exercise

innerHTML Property

innerHTML Property

.innerHTML reads/writes HTML inside an element

• Assuming the following HTML:

  <div id="my-div">Hello!</div>

• To change the content within #my-div:

  document.querySelector('#my-div').innerHTML = 'Hello, World!';

Code Along

Code Exercise

Input Elements

Input Elements

• Allow users to submit data

• A gateway between the client and server

• Prominent input-related elements:




<input> element

• Used to accept a variety of data from user

  <input type="text" />

• The type attribute determines the type of input:

⇒ text (default; don't have to specify)

⇒ password

⇒ color

.value Property

.value Property

• The .value property gets/sets <input> values

• To get the value of an input:


• WATCHOUT - similar to .innerHTML

Code Along

Lab: RGB Color Choice

Open rgb-color-choice and write JS for the following:

1. User enters a value into the red, green, and blue inputs

2. User clicks the button

3. Text in id=colorful-text updates with the user input

4. The background color of #wrapper changes to the user input

On Deck: #13 - jQuery (pt. 1)

• jQuery

• HTML manipulation via .html()

• CSS manipulation via .css()

• The .click() method

• The .val() method

Exit Tickets!