HELLO
1) Please download Class 12 Starter Code
2) Move the following into your homework directory:
• rgb-color-choice
Class #12
10/24/2018
JS and the Browser
• Final Projects:
⇒ Second deliverable due Monday, October 29th
⇒ Wireframes
• .innerHTML property
• Lab
Warmup
Functions
• 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!';
alert(greeting);
}
• 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) {
console.log(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
helloWorld
// use () to call a function
helloWorld()
Code Along
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
1) Use document.querySelector() to select the element you want to apply the event to:
document.querySelector('#click-me')
2) Apply the event (ex: .onclick) to the query:
document.querySelector('#click-me').onclick
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
• Allow users to submit data
• A gateway between the client and server
• Prominent input-related elements:
⇒ <input>
⇒ <select>
⇒ <textarea>
<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:
document.querySelector('#my-input').value
• WATCHOUT - similar to .innerHTML
Code Along
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
• jQuery
• HTML manipulation via .html()
• CSS manipulation via .css()
• The .click() method
• The .val() method