Thursday, November 13th

Class Hours: 10:05 – 2:40
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

• Thanksgiving Break – Saturday, Nov. 22- Sunday, Nov. 30th
• Did you order Lunch for Friday? Hope so…
• Congratulations in order – for……

---

10:10 LTA Assignment – Adrian’s Photos!

Let’s tune in and see how Adrian photographed Fall in Vermont.

10:15am Famous Photographer Assignment

Famous Photographers – let’s review this assignment together.

This assignment will be due for presentations on Wednesday, December 10th. This will be your last large photography assignment. That’s in 3 Weeks! We’ll still do some smaller photography work like nighttime photography and portraits.

10:50 Morning Break (10 minutes)

11:00 Navigation the DOM – THE DOM TREE

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

   1. HTML to define the content of web pages

   2. CSS to specify the layout / styling of web pages

   3. JavaScript to program the behavior and interactivity of web pages

So if you want to have your webpage be interactive, you are going to need to learn some JavaScript. Fortunately there are thousands of resources, code snippets and tutorials to assist with all kinds of projects.

Our goal today is simple:

1. Use the console to explore the DOM (Document Object Model)
2. Learn about Elements and Nodes
3. Get familiar with the developer tools and console
4. Create a small project to teach us how to link our JS and do some sample code
5. Add a little interactivity to the CodePen we did yesterday.

The DOM stands for Document Object Model

When we set up an html document (index.html) we are creating the document object model. The DOM is just a visual structure of your document. We can see this in the inspector with our Dev Tools. Let’s do this quickly by going to example.com

Think of the DOM as an upside down tree. The root being the Document Type (HTML) and then the branches descending. So that means that the HTML element is the Root Element of our tree. Therefore the Head and Body elements are its children.

Working through the DOM with JavaScript allows programmers to be able to target elements and write programs to make (in this case) web sites interactive. The elements that provide structure to the web are objects.

The way you can find elements is by identifying them by tag name, class, id or combination of all three.

An important place to start is to find the starting / anchor element and then navigating around the tree from there.

All Elements in the DOM are nodes, but not all nodes are elements. Now, you already know a thing or two about this but maybe didn’t think about it much in terms of JS.

The three most popular types of nodes are:

1. Element Node
2. Attribute Node
3. Text Node

nodeType – tells you what kind of node you have
nodeName – returns the name of the node
w3schools Node Types

Using a sample webpage, let’s explore the Node interface, the document object and some document object methods.

Popular Methods include:

• querySelector – returns a single element (div, p, *, div[id=’cool’], #unique-id, .classname, :nth-child() )

var mainElement = document.querySelector("#main");

• querySelectorAll – returns a collection of elements

var multipleELements = document.querySelectorAll(".house");

• getElementbyId – returns an element with a specific id

• getElemenstbyClassName – returns elements by a specific class name

• firstChild, firstElementChild, lastChild, lastElementChild, parentElement, parentNode, children, previousSibling, previousElementSibling, nextElementSibling, nextSibling

createElement(), createTextNode(), appendChild()

The createElement() method creates new HTML element using the name of the HTML tag. You can add this element to the web page by using different method for DOM insertion such as appendChild().

// Create element:
const para = document.createElement("p");
para.innerText = "This is a paragraph.";

// Append to body:
document.body.appendChild(para);

let newTitle = document.querySelector("h1");

newTitle.innerText = "Traverse The Dom";

11:55 Lunch

12:25 English with Mx. Yopp

1:10 Afternoon Break

1:25 Speed Design

1:45 Independent Production & Guided Support

• Famous Photographer Assignment
• My Favorite Things – lets talk if you are stuck
• Star Wars Fan Film Reflections

2:10 Dailies

2:15 Independent Reading

2:40 Dismissal