009: Intro to JavaScript and the Document Object Model (DOM)

What you'll learn

  • What the Document Object Model (DOM) is, and what problem it solves
  • What the DOM looks like, structurally-speaking
  • What you can do with the DOM and JavaScript together
  • What “traversing” the DOM means, and how to do it
  • How you can use JavaScript Event Listeners and Handlers to add cool functionality to your page
  • And finally, some important nuances and advanced functionality of the DOM

Tweetables

In this episode, we’re going to take a deep dive into the Document Object Model, or DOM for short. Nicole explains what the Document Object Model is, what it looks like, and what we can do with it. And because we can’t touch on everything, more resources are included for you to go forth and dominate the DOM.

I’m so excited to share with everyone a basic introduction to JavaScript and DOM! Although I discuss the basics in this podcast episode, it is far from the amount of information and resources that exist across the web. Thus, I have included several resources to help you get started.

A note about these “techy” episodes

I just want to remind listeners really quick that my overall intention in these “Intro” episodes isn’t to go into depth, or even to “teach” people. Thus, I want to create curiosity for these types of topics and pose the questions that these topics provide answers to.

Because there are literally a million and one tutorials and templates out there for JavaScript and DOM that are fantastic, I will happily round the best that I’ve found up for you to continue on your journey of question-asking and answer-seeking in the world of web development.

What we’re doing here is creating valuable context. Context aids in learning. If you like what you hear about Document Object Model, follow the links included, and you’ll find that even if you’ve never heard about DOM before listening to this episode, your brain has now built enough of a context about it that you’ll start to ask yourself questions, and as you learn about it further, you’re not encountering these topics for the first time.

It’s kind of like skimming a book before you really read it. I’m not interested in recreating the wheel; I’m interested in helping my listeners. And the end result of listening to these Intro episodes is that you experience calmer learning with better retention and less frustration.

Learn more about the Document Object Model

Textual

W3C Wiki: Traversing the DOM

TutorialsPoint: JavaScript Document Object Model (or DOM)

W3Schools: JavaScript HTML DOM

TutsPlus: JavaScript and the DOM

Sitepoint: What Is Event Bubbling in JavaScript? Event Propagation Explained

Visual/Auditory

DevTips: JavaScript and the DOM (2-Part Series)

EJ Media: JavaScript Tutorial for Beginners—the Document Object Model

EJ Media: JavaScript Tutorial for Beginners—Using getElementById()

Engagement

Treehouse Course: JavaScript and the DOM (Course)

Treehouse Video: What is the DOM? (within Course: jQuery Basics)

Treehouse Video: Understanding the DOM Tree (within Course: jQuery Basics)

LVEC Special Student Offer

50% off your first month of Treehouse

Check out Nicole’s new 30 Days to Web Development course!
Discount pre-enrollment ends August 1, 2017

Learn more and pre-enroll for $249
(50% off regular course price, limited time only!)

I’d love to hear from you and chat about your thoughts on this episode and experiences learning JavaScript and DOM!

You can reach out to me:

On Twitter as @lavie_encode

On the La Vie en Code Facebook page

Or, via my Contact page

What you'll learn

  • What the Document Object Model (DOM) is, and what problem it solves
  • What the DOM looks like, structurally-speaking
  • What you can do with the DOM and JavaScript together
  • What “traversing” the DOM means, and how to do it
  • How you can use JavaScript Event Listeners and Handlers to add cool functionality to your page
  • And finally, some important nuances and advanced functionality of the DOM

Tweetables

LaunchPad Scavenger Hunt

HOW TO PLAY

Rockets are scattered across the website, waiting for you to find them! Each rocket grants 20 coins. 

When you find one, click it to receive your reward! Rockets reset every day.

ROCKETS DISAPPEAR IN

Days
Hours
Minutes
Seconds

[gamipress_leaderboard_user_position id=”69390″ current_user=”yes” text=”You are in position {position}!” not_ranked_text=”You’re not yet ranked—go find some rockets!“]

[gamipress_leaderboard title="" id="69390" hide_admins="yes"]

Just one more step to download I Want to Learn to Code—Now What!

Total transparency: You’ll get your guide, and also be subscribed to my dope weekly newsletter, Life in Code.

You can always unsubscribe (but I don’t think you’ll want to). :)

Just one more step to download 10 Things You Need to Learn BEFORE Learning to Code!

Total transparency: You’ll get your guide, and also be subscribed to my dope weekly newsletter, Life in Code.

You can always unsubscribe (but I don’t think you’ll want to). :)

Just one more step to download 5 Steps to Solving Code Challenges!

Total transparency: You’ll get your guide, and also be subscribed to my dope weekly newsletter, Life in Code.

You can always unsubscribe (but I don’t think you’ll want to). :)