Thu Oct. 19
Document Object Model (DOM)
9 – 12h Teaching
Teacher:
- Thomas Jaggi
Goals
Goals
- I know how and where to add JavaScript to my HTML code
- I know what the Document Object Model (DOM) is and how to manipulate it
- I have added JavaScript to my personal home page which displays a list of my favourite books
JavaScript Review
JavaScript Review
- Slides: Review
- Core Concept
- Variables & Data Types
- Functions, Conditionals, Loops
- Arrays & Objects
JavaScript & the DOM
JavaScript & the DOM
- Slides: JavaScript & the Document Object Model
- Including JavaScript in HTML
- DOM Access
- DOM Manipulation
- Creating DOM nodes
Exercise: DOM Detective
Exercise: DOM Detective
- Navigate to the Powercoders site, and open up the Dev Tools console –
Cmd
-Opt
-I
(Mac),Ctrl
-Shift
-I
(Windows) - Use the DOM access methods we learned to find the following parts of the page. There may be multiple ways to select the same DOM node.
- Every image on the page (as a collection)
- The newsletter sign-up form (has the ID "mc_embed_signup")
- The two Call-To-Action
div
s below the newsletter-form (as a collection) - The header image below the tagline "Impacting lives by teaching to code"
- The partner logos at the bottom (as a collection)
- All the links within this page
Bonus: Find another element (or collection of elements), and challenge a classmate to find it in the DOM.
[ Solutions ]
Exercise: The Logo Hijack
Exercise: The Logo Hijack
- Navigate to the Powercoders website, and open up the Dev Tools console – Cmd-Opt-I (Mac), Ctrl-Shift-I (Windows)
- Find the Powercoders logo and store it in a variable.
- Modify the source of the logo so it points to the Microsoft logo.
- Find the first container (with the golden background) and store it in a variable.
- Change the background color of this container to 'silver'.
- Find the first link in the first container and store it in a variable.
- Modify the text of the link so that it shows "the best place to be right now".
- Modify the link so that it points to your portfolio instead.
[ Solutions ]
12 - 13.30h Lunch
13.30 – 16h Coaching
Coaches:
- Nik Clayton
personal Homepage Exercises
personal Homepage Exercises
About Me
About Me
- Open your personal Powercoders home page in Brackets and add this "about me" section where it fits best:
<ul>
<li>Nickname: <span id="nickname"></span>
<li>Favorites: <span id="favorites"></span>
<li>Hometown: <span id="hometown"></span>
</ul>
- Add a
<script>
tag to the bottom of the HTML body. - (In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".
- (In the JavaScript) Replace each of the spans (nickname, favorites, hometown) with your own information.
- Iterate through each
li
and change the class to "list-item". - (In the HTML
head
) Add astyle
tag that sets a rule for.list-item
to make the color red. - Create a new
img
element and set itssrc
attribute to a picture of you. Append that element to the page.
[ Solutions ]
The big question: where should I put the <script> tag?
The big question: where should I put the <script> tag?
Here's what happens when a browser loads a website with a <script>
tag on it:
- Fetch the HTML page (e.g. index.html)
- Begin parsing the HTML
- The parser encounters a
<script>
tag referencing an external script file. - The browser requests the script file. Meanwhile, the parser blocks and stops parsing the other HTML on your page.
- After some time the script is downloaded and subsequently executed.
- The parser continues parsing the rest of the HTML document.
Step 4 causes a bad user experience. Your website basically stops loading until you've downloaded all scripts. If there's one thing that users hate it's waiting for a website to load.
Solution: Check out this Stackoverflow thread and find out how you can solve this.
The Book List
The Book List
- Add a new
<ul>
section to your personal home page with the ID "my_books". - In the JavaScript section, create an array of objects of your favourite books, similar to this:
var books = [
{
title: 'The Design of EveryDay Things',
author: 'Don Norman',
alreadyRead: false
}, {
title: 'The Most Human Human',
author: 'Brian Christian',
alreadyRead: true
}
];
- Now iterate (loop) through this list. For each book, create a
<li>
element within your "my_books" list with the book name and author. - Bonuses:
- Add an
<img>
to each book that links to a URL of the book cover. - Change the style of the book depending on whether you have read it or not.
- Add an
[ Solutions ]
16 – 17.30h Community Meet-Up
Community Meetup
Community Meetup
Everybody who is interested to get to know our Powercoders is invited to join!