HELLO
1) Please download Class 16 Starter Code
2) Move the following into your homework directory:
• list-maker
3) Solutions to click-count and light-switch are included
Class #16
11/07/2018
Function Arguments and HTML Manipulation
• Final Projects:
⇒ Fourth deliverable due Wednesday, November 14th
⇒ JavaScript/Pseudocode
• No Class:
⇒ Monday, 11/12
⇒ Wednesday, 11/21
Warm Up
Function Arguments
So far, functions have been defined like this:
function myFunction() {
// ...
}
...and called like this:
myFunction()
Many of you have inquired: What are the () for?
Arguments: inputs that are "passed" into a function
• Define a function that will accept an argument:
function hello(name) {
alert("Hello, it's " + name)
}
• Call a function that accepts an argument:
hello('me')
// outputs: "hello, it's me"
hello('Keanu')
hello('Chandler')
• Arguments are accessible using their names:
function hello(name) {
alert("Hello, it's " + name)
}
• Whatever is passed as name replaces name in the function body:
hello('keanu')
// translates to:
function hello('keanu') {
alert("Hello, it's " + 'keanu')
}
Codealong
CodeAlong: Name Machine
5 minute break
HTML Insertion
.append('content')
⇒ Insert "content" at the END of each element
$('div').append('<p>Appended paragraph</p>')
.prepend('content')
⇒ Insert "content" at the BEGINNING of each element
$('div').prepend('<p>Prepended paragraph</p>')
• Assuming the following HTML:
<div id="someDiv">
<p>A paragrpah of text</p>
</div>
• The following JS:
$('#someDiv').append('<p>Appended paragraph</p>')
• Will yield the following HTML:
<div id="someDiv">
<p>A paragrpah of text</p>
<p>Appened paragraph</p>
</div>
HTML Removal
.remove()
⇒ Remove the selected element
$('#someDiv').remove()
.empty()
⇒ Removes all content inside the selected element
$('#someDiv').empty()
1. Open list-maker
2. Follow instructions in js/app.js
• .change() Event
• HTML <form> Element
• .submit() Event
• Preventing Default Event Behaviours
• HTML <table> Element