Thu Oct. 19

Document Object Model (DOM)

9 – 12h Teaching

Teacher:

Thomas Jaggi

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

Slides: Review
- Core Concept
- Variables & Data Types
- Functions, Conditionals, Loops
- Arrays & Objects

JavaScript & the DOM

Slides: JavaScript & the Document Object Model
- Including JavaScript in HTML
- DOM Access
- DOM Manipulation
- Creating DOM nodes

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.
1. Every image on the page (as a collection)
2. The newsletter sign-up form (has the ID "mc_embed_signup")
3. The two Call-To-Action divs below the newsletter-form (as a collection)
4. The header image below the tagline "Impacting lives by teaching to code"
5. The partner logos at the bottom (as a collection)
6. 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

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

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 a style tag that sets a rule for .list-item to make the color red.
Create a new img element and set its src attribute to a picture of you. Append that element to the page.

[ Solutions ]

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

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.

[ Solutions ]

16 – 17.30h Community Meet-Up

Community Meetup

Everybody who is interested to get to know our Powercoders is invited to join!

Report abuse