Pre Javascript Part 1

Data Tree Structures and the DOM

10/1/2016

Programming terms 1

• Data Types:
  • Strings
  • Numbers
    • Integer
    • Float
  • Boolean
• Array
  • List of data types.
  • Languages can change abilities.

Objects

Multi Faceted item

Objects can have Attributes (variables)

It's own functions (methods)

Objects can contain Objects.

Object example 1.

Object type Person.

Presenter = Person.

Attributes.

Name | Age | Height | Race | Gender

Methods :

Birthday | Eat | Work | Speak | Walk

Objects in Object

Head > Face > Mouth

Data Tree Structure

• Nested Data Containers.
  • Array's
  • Objects
• Objects in Objects multiple directions

Person

Head

Torso

Hair

Face

Color

Style

Eyes

Mouth

Arms

DOM

Document object model

• HTML Tags are treated as Objects
• Objects have attributes (properties):
  • bgColor
  • innerHTML
• Objects have methods
  • On
  • innerHTML
  • Parent, Child, Sibling

HTML to Tree

• Document
  • Head
    • Meta
    • title
    • link
  • body
    • h1
    • p

• Meta title and link are siblings
• They are also children of Head
• Head is the parent of Meta Title and Link
• Title is the 2nd child of Head
• note h1 is not a sibling of Meta due to different parents

Workshop challenge

Take PVDCodeCamp.org

Create the DOM Tree for this site.

Find the 2nd child of id "child"

find the siblings of id "meetups"

find the parent of "skills"