Intermediate JavaScript
06.04.18 ∙ GDI MPLS ∙ Amy Gebhardt
Wifi
Network:
training
Password:
classroom
Slides:
https://gdiminneapolis.github.io/intermediate-js/class-one.html
Project Files:
https://tinyurl.com/yd9bo3y6
Welcome!
Who are you?
What do you do?
How did you hear about Girl Develop It?
On a scale of 1 to "I could do this while sleeping" how comfortable are you with JavaScript and programming concepts?
What's a recent "win" you've had?
Expectations
Review
(today!)
Vanilla JavaScript is ugly
Define library and framework
Learn how to research, implement, and use a library
Hear what the "cool" kids are using these days
Do some cool stuff with jQuery
get excited.
What is JavaScript?
The
browser reads
and executes the code.
Let's you build
dynamic
web pages that respond
to
user input.
Just like with CSS, you can put your JavaScript into separate files.
JavaScript files have a
.js extension.
Set up some project files:
Download the project files by going to:
https://tinyurl.com/yd9bo3y6
Unzip the
intermediate-js-project-files.zip file and move
the folder somewhere handy (in your repos
folder, on your desktop, etc).
Open your code editor, then open
your
intermediate-js-project-files directory.
Add a link to the
scripts.js file by modifying your
index.html.
Don't forget to save!
Add this JavaScript to
scripts.js & save again:
Open
index.html in Google Chrome. What do you see?
So... what did we just do?
document.write("JavaScript is awesome!");
We
invoked the
write
function on the
global
object:
document.
When we
invoked it, we gave it a
parameter
of
type
string:
"JavaScript is awesome!".
We ended the
statement with a
;.
Let's try it!
Go back to your
index.html file.
Set up a few
DOM elements in the
<body> of your page:
When you're ready, save and open the file in Chrome.
Let's try it!
Add a link to the
counter.css file by modifying
the
head of your
index.html.
When you're ready, save and open the file in Chrome.
Quick note...
This is not a CSS course, but it
is important to know when to use JavaScript and when to use CSS.
Finally, onto the JavaScript!
We need to
select the
result,
subtract, and
add elements.
Store each element into a new
variable.
To confirm you've successfully
selected them, output their
innerHTML
using
document.write(),
alert(), or
console.log()
We need to
select the
result,
subtract, and
add elements.
Since these
elements are all accessible by an
id, we can use JavaScript's
document.getElementById() function.
Store each element into a new
variable.
The
returned value from each
document.getElementById() can
be stored in a new
variable that we initialize using
the
var variableName = value; syntax.
To confirm you've successfully
selected them, output their
innerHTML
using
document.write() ,
alert() , or
console.log()
We'll access the
innerHTML
property from each of our new
variables using
dot notation.
Using any of the three output methods,
display the value of
innerHTML.
Let's add some events!
Next, we'll need to add an
event listener to handle the
click
event for the
add and
subtract buttons.
To confirm you've successfully captured the
click
event, output a
"hello world from the [add][subtract] click event!"
message using
document.write(),
alert(), or
console.log()
Next, we'll need to add an
event listener to handle the
click
event for the
add and
subtract buttons.
Use the
addEventListener() method on the
Element
object using
dot notation
to capture the
click
event
for both
add
and
subtract.
Next, we'll need to add an
event listener to handle the
click
event for the
add and
subtract buttons.
The
addEventListener() method takes in two
arguments.
The first is a
string and refers to the name of the event.
In this case,
"click".
The second
argument is a
function that is
invoked when the
event is triggered.
To confirm you've successfully captured the
click
event, output a
"hello world from the [add][subtract] click event!"
message using
document.write(),
alert(), or
console.log()
Using any of the three methods, display the message.
Make them unique, so you can see the difference
between
add and
subtract.
Open in Chrome to confirm the results!
Update the result
Get the current
content of the
result
element.
Using JavaScript
operators, do the assumed operation (+1 if it's add, -1 if it's subtract) each time the
buttons are clicked.
Update the
HTML of the
result
element, so
the user can see what's happening.
Test your work!
Get the current
content of the
result
element.
We can get this by accessing the
innerHTML property
on the
Element object using
dot notation. Let's go ahead
and store it in a new
variable.
Using JavaScript
operators, do the assumed operation (+1 if it's add, -1 if it's subtract) each time the
buttons are clicked.
This snippet is for the
add button, so we'll add 1 to the
currentResult
variable and store that in a
newResult
variable.
Full disclosure: I'm intentionally leading you astray, here...
Output the value of
newResult. Is it what you expect?
Using JavaScript
operators, do the assumed operation (+1 if it's add, -1 if it's subtract) each time the
buttons are clicked.
JavaScript
operators behave differently depending
on the
data types
being used.
We need to convert the
string from
innerHTML to an
integer using JavaScript's
parseInt() function before we add or subtract 1 from it.
Output the value of
newResult. Is it what you expect?
Update the
HTML of the
result
element so the user can see what's happening.
In addition to
accessing the
innerHTML
property,
we can also
set it. The
DOM will be manipulated.
Open your page in Chrome. Test out both buttons. How'd we do?
Quick note...
This is not a CSS course, but it
is important to know when to use JavaScript and when to use CSS.
Style the result when it changes
Set the
class of the
result
element to
"changing" when either button is clicked.
After
200 milliseconds, remove the
class.
CSS will handle all of the fancy transitions
(and CSS typically does this better than JavaScript)
Test your work!
Set the
class of the
result
element to
"changing" when either button is clicked.
The
Element object also has a
className
property.
Just like with
innerHTML, we can
set it and the
DOM will be manipulated.
Open your page in Chrome. Test out both buttons.
Did the class get added? How can you tell?
After
200 milliseconds, remove the
class.
We can use JavaScript's
setTimeout()
function to handle the
200 millisecond delay.
setTimeout() takes two
arguments. The first is a
function that is
invoked after the specified number of milliseconds. The number milliseconds is the second
argument.
After
200 milliseconds, remove the
class.
Within the
setTimeout()
function (the first argument),
set
className to an empty
string.
How does it look?
How about your code?
Refactoring
"Code refactoring is the process of restructuring existing computer code – changing the factoring – without changing its
external behavior."
Readability, maintainability, less room for error.
Thanks for coming
See you next week!
Have feedback you'd like to share before next week? Let us know!