Intro to JavaScript
04.29.18 ∙ GDI MPLS ∙ Amy Gebhardt
Wifi
Network: OLSONHQguest
Username: Olson
Password: guest
Slides
https://gdiminneapolis.github.io/intro-to-js/day-two/index.html
After today, you will:
Be able to work with Arrays & Objects.
Mess with the DOM in JavaScript:
Select elements.
Manipulate attributes and styles.
Change the HTML within an element & create new elements.
Respond to events.
Build a photo gallery.
An array is a special variable that
can old multiple values of varying data types at a time.
The syntax looks like this:
Take this:
And turn it into this:
You can access items with
bracket notation by using the position of the item you want.
Note: In Computer Science, we start counting at 0!
What is the value of x?
What is the value of y?
You can change the value of an item in an array using the same bracket notation.
You can add items to an existing array.
Functions vs. Methods
JavaScript uses OBJECTS.
Objects come with a set of functions that are specific for them to use. These are methods.
We've seen a few examples already:
window, document, and console are all objects.
alert, write, and log are all methods.
Arrays, Strings, Integers, (and lots of others!) all come with several methods and properties specifically for their data types.
The concept of methods and functions are
very similar, but functions will not be called
with the . following the variable because
they are not specific to the object.
When using an object property it will
not have ( ) following the name.
Don't worry about this too much for now - we'll dive into objects more in depth later.
You can add items to an existing array.
We're using the push method on our array.
You can iterate through arrays.
We're using the length property on our array
to determine the condition
for our for loop.
Let's try it!
Return to your scripts.js.
Create an array named fruits & give it 3 of
your favorite fruits.
Display the first item in your array.
Add a fourth fruit to your array.
Using a for loop and the length property, iterate through
the items in your array and display each of them.
An object is a special variable that
stores a collection of properties.
The syntax looks like this:
The values in an object are written as name:value pairs.
Values in an object can be Strings,
Integers, Arrays, other Objects, etc.
To access a value within an object, you can use
the same bracket notation that we used with arrays
or you can use dot notation.
Let's try it!
Return to your scripts.js.
Create a "person" object that has several
different key/value pairs.
Display a few values using bracket notation.
Display a few values using dot notation.
Arrays can contain objects.
Values in objects can be changed.
Key/Value pairs in objects can be added.
Objects can also hold functions.
Here's a more complex example:
All programming languages have keywords. These have special meaning in a particular context.
The this keyword acts like a variable.
Inside a function, the value of this depends on how the function is called.
When a function is called as a method of an object, this is set to the object the method is called on.
Here's a more complex example:
As we learned yesterday, JavaScript provides several built-in objects with a bunch of methods.
Can you think of any?
Array
String
Document
Console
Number
Date
Math
Let's try it!
Return to your scripts.js.
Create a "recipe" object. Track name, prepTime, and an array of ingredients.
Create a method that lists all of the ingredients.
Don't forget to display your results somewhere!
Anatomy of a Website Review
HTML is the markup used to build the structure of your website.
An element is an individual component of HTML.
An attribute provides
additional info about the element.
CSS defines how HTML elements should be displayed.
CSS selectors allow you to select/manipulate HTML elements.
Selectors find elements based on their ID, class, type, and more.
IDs should only apply to one element on a web page. The # is used
to refer to IDs.
Classes can apply to lots of elements on a web page. The . is used to
refer to classes.
What are some ways we could select the div?
div
#content
.girlDevelopIt
div.girlDevelopIt
#content.girlDevelopIt
The dom (Document Object Model) models the processed nested structure of an HTML page.
JavaScript can access and change all elements of an HTML document.
There are various methods and properties you can use
when accessing and changing the DOM in JavaScript.
Our first method is getElementById.
getElementId is a method on the document object.
Our first property is innerHTML.
innerHTML is a property of a selected element.
It can be read and changed.
Let's try it!
Return to your index.html.
Add a new div with an ID of girlDevelopIt.
Add some text to your new div.
Return to your scripts.js.
Display the contents of your girlDevelopIt div.
Our document object is the DOM.
This object comes with several built-in methods. We just used getElementById().
There's also getElementsByTagName() and getElementsByClassName()
Note the difference between the method names: element vs elements
getElementsByTagName() and getElementsByClassName() return an
array of elements.
What do you think would happen if we tried to
access the innerHTML property on x, y, and z?
We'll need to loop through each element and access the innerHTML property individually.
Let's try it!
Return to your index.html.
Add a few new elements (div,
a, strong, etc) & give those some text/content.
Return to your scripts.js.
Display the contents of your elements using a
loop and the
getElementsByTagName /
getElementsByClassName methods.
Have some extra time? Try looking up
querySelector and querySelectorAll
and give those a try!
You can change attributes on HTML elements.
You can change style on HTML elements.
For each CSS property, change the name to be camelCase.
You can create new HTML
elements and add them to the DOM.
Let's try it!
Return to your scripts.js.
Using JavaScript, change the size and color of the text in your girlDevelopIt div.
Finish early?
Add some new text to your girlDevelopIt div.
Using a document method, display the contents of your girlDevelopIt div before and after you add your new text.
JavaScript can react to HTML events such as
click and change.
An event can be something the browser does or something the user does.
There are several ways in JavaScript to respond to events.
One of the best ways to respond to events is to create event listeners.
Let's try it!
Return to your scripts.js.
When your girlDevelopIt div is clicked, change the color of the font.
Finish early?
Every time your girlDevelopIt div is clicked, increase the font size.
You now have everything you need
to build a photo gallery like this:
In index.html create 2 divs. To use my styles, make sure one has an ID of gallery and the other large_image:
The thumbnails will be in the gallery div.
Return to index.html.
Now, create a bunch of thumbnails. Again, for the sake of the demo, use the following structure:
Feel free to check it out in your browser.
Now for the fun part! Time to add some JavaScript.
Return to your scripts.js.
Using whichever method you prefer, find/select
the large_image div and
store it in a variable.
Do the same for all thumbnail divs.
Do a quick test to ensure you've selected the right nodes. How can you test this?
Now that we've got the right elements,
we need to do something with them.
What user interaction are we looking for?
How can we tell when a user
clicks on a thumbnail?
Set up a click event listener for each thumbnail node.
You'll need to use a for loop!
Do a quick test to ensure you've captured
the event. How can you test this?
Great! We're capturing the click event for each thumbnail.
Next, we need to make the clicked image
appear in our large_image div.
Remember... we want to take the contents (html)
of our thumbnail div and
replace the
contents (html) of our large_image div.
On the click event listener you just created for
each
thumbnail, replace the HTML in the
large_image div
with the thumbnail image.
Test your work!
Let's be over-achievers.
To really make this a solid gallery, we'll want to make a thumnbail appear selected.
In the stylesheet you're using, there is a selected_thumb ID.
When a user clicks on a thumbnail, in addition to making it the large image, select the thumbnail
by giving it the selected_thumb ID.
Do you anticipate any problems with this?
Hint: you will run into something!
Ahh, that's right.
If there is already a selected thumbnail, we need to remove the ID from that element before we
add it to our newly selected element.
Finish up this last step, and your gallery will be complete!
window.alert("You are champions!");
Thanks for coming!
We love your feedback!
tinyurl.com/gdi-js | Use course name "Intro to JS"
Take the survey before you go, and you'll have a chance to win a prize!
