Start learning with our library of video tutorials taught by experts. Get started

Foundations of Programming: Fundamentals

Reading and writing from the DOM


From:

Foundations of Programming: Fundamentals

with Simon Allardice

Video: Reading and writing from the DOM

JavaScript is a scripting language, not a general purpose programming language, and its world is the webpage that loaded it, not your operating system, not your hard drive. Instead, it has some great functions for grabbing and manipulating what's on the webpage. JavaScript is using something called the Document Object Model or the DOM to do this. Now, I can't talk much about the DOM without also talking a little bit about HTML and webpages in general. So while the next few minutes by itself is a little specialized to be something I'd call a general programming fundamental, well, that's not really about this.
Expand all | Collapse all
  1. 4m 14s
    1. Welcome
      1m 16s
    2. Making the most of this course
      2m 8s
    3. Using the exercise files
      50s
  2. 22m 11s
    1. What is programming?
      5m 45s
    2. What is a programming language?
      4m 48s
    3. Writing source code
      5m 34s
    4. Compiled and interpreted languages
      6m 4s
  3. 16m 29s
    1. Why JavaScript?
      4m 45s
    2. Creating your first program in JavaScript
      6m 54s
    3. Requesting input
      4m 50s
  4. 31m 38s
    1. Introduction to variables and data types
      5m 16s
    2. Understanding strong, weak, and duck-typed languages
      3m 51s
    3. Working with numbers
      5m 4s
    4. Using characters and strings
      4m 5s
    5. Working with operators
      4m 47s
    6. Properly using white space
      6m 46s
    7. Adding comments to code for human understanding
      1m 49s
  5. 24m 49s
    1. Building with the if statement
      7m 35s
    2. Working with complex conditions
      4m 10s
    3. Setting comparison operators
      6m 59s
    4. Using the switch statement
      6m 5s
  6. 17m 56s
    1. Breaking your code apart
      4m 1s
    2. Creating and calling functions
      2m 57s
    3. Setting parameters and arguments
      6m 7s
    4. Understanding variable scope
      2m 23s
    5. Splitting code into different files
      2m 28s
  7. 13m 32s
    1. Introduction to iteration
      4m 28s
    2. Writing a while statement
      5m 24s
    3. Creating a for loop
      3m 40s
  8. 19m 28s
    1. Cleaning up with string concatenation
      4m 30s
    2. Finding patterns in strings
      8m 3s
    3. Introduction to regular expressions
      6m 55s
  9. 19m 59s
    1. Working with arrays
      5m 47s
    2. Array behavior
      5m 29s
    3. Iterating through collections
      5m 18s
    4. Collections in other languages
      3m 25s
  10. 10m 50s
    1. Programming style
      5m 55s
    2. Writing pseudocode
      4m 55s
  11. 25m 55s
    1. Input/output and persistence
      3m 6s
    2. Reading and writing from the DOM
      8m 11s
    3. Event driven programming
      7m 47s
    4. Introduction to file I/O
      6m 51s
  12. 24m 26s
    1. Introduction to debugging
      5m 57s
    2. Tracing through a section of code
      7m 5s
    3. Understanding error messages
      3m 21s
    4. Using debuggers
      8m 3s
  13. 14m 17s
    1. Introduction to object-oriented languages
      5m 18s
    2. Using classes and objects
      6m 29s
    3. Reviewing object-oriented languages
      2m 30s
  14. 11m 14s
    1. Memory management across languages
      5m 11s
    2. Introduction to algorithms
      4m 2s
    3. Introduction to multithreading
      2m 1s
  15. 29m 20s
    1. Introduction to languages
      1m 42s
    2. C-based languages
      4m 40s
    3. The Java world
      3m 13s
    4. .NET languages: C# and Visual Basic .NET
      6m 17s
    5. Ruby
      3m 4s
    6. Python
      2m 56s
    7. Objective-C
      4m 3s
    8. Libraries and frameworks
      3m 25s
  16. 1m 2s
    1. Where to go from here
      1m 2s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Foundations of Programming: Fundamentals
4h 47m Beginner Sep 22, 2011

Viewers: in countries Watching now:

This course provides the core knowledge to begin programming in any language. Simon Allardice uses JavaScript to explore the core syntax of a programming language, and shows how to write and execute your first application and understand what's going on under the hood. The course covers creating small programs to explore conditions, loops, variables, and expressions; working with different kinds of data and seeing how they affect memory; writing modular code; and how to debug, all using different approaches to constructing software applications.

Finally, the course compares how code is written in several different languages, the libraries and frameworks that have grown around them, and the reasons to choose each one.

Topics include:
  • Writing source code
  • Understanding compiled and interpreted languages
  • Requesting input
  • Working with numbers, characters, strings, and operators
  • Writing conditional code
  • Making the code modular
  • Writing loops
  • Finding patterns in strings
  • Working with arrays and collections
  • Adopting a programming style
  • Reading and writing to various locations
  • Debugging
  • Managing memory usage
  • Learning about other languages
Subjects:
Developer Web Programming Foundations
Author:
Simon Allardice

Reading and writing from the DOM

JavaScript is a scripting language, not a general purpose programming language, and its world is the webpage that loaded it, not your operating system, not your hard drive. Instead, it has some great functions for grabbing and manipulating what's on the webpage. JavaScript is using something called the Document Object Model or the DOM to do this. Now, I can't talk much about the DOM without also talking a little bit about HTML and webpages in general. So while the next few minutes by itself is a little specialized to be something I'd call a general programming fundamental, well, that's not really about this.

It's the bigger picture here that's important. And the idea which is fundamental is that the languages you use become specialized to the world that they work in. So if you work designing mobile applications, well you'll end up being able to write code to deal with what happens if the phone rings while your program is running. But you would not find that same ability when you're writing desktop applications. Instead, you might be able to write code to deal with the printer or the USB port because that would be your world.

And if you work in JavaScript, you'll find yourself being able to write code to deal with the webpage. You see, we've been focused on using JavaScript so far to illustrate the basics of programming, things like conditions, iterations, arrays, and using these annoying alert boxes. But we know JavaScript doesn't run with alert boxes all the time. Real-world JavaScript is all about reaching from our script into the webpage that we have, and causing that page to reach back into our script.

And we do that by understanding this thing called the DOM, the Document Object Model. Now, this is the term that's a little odd to understand the first time you hear it because it's kind of vague. People ask me, well, what is the DOM? Is it a language, is it part of JavaScript? What is it? Well, DOM is actually a pretty simple idea. And the best way to understand it is really to pull it apart into its three different words. Document, Object, Model. So we're going to take it apart piece by piece. We'll start with the first one. What do we mean by document? Well, if I'm in Microsoft Word, document might mean one thing, whatever I'm working on there, but we're not.

We're on a webpage. For us, document simply means the page. Our JavaScript was loaded by a webpage and that page is the document as far as the script is concerned. But this document can be represented in different ways. It already is. We know this. We know that our page is written in HTML. So between the two here, which one will be the document? Well, both of them. One is the browser view, and one is the HTML code. It's perfectly allowable to have the same document with a different representation.

It's the same idea here, but JavaScript perceives the same webpage a third way, Same document with a different representation. So if the current page is all we mean by Document, what's the Object part of Document Object Model? Well, Object here just means the different elements, the components, the pieces of this document. If I was to talk to a user, I could say look at the headline on this page, look at the bullet point list on this page, look at the whole page, or even look at the third letter in the second word.

But if you're a web developer, I could use a different perspective. I could say look at the HTML, look at the h1 that represents the headline, look at the unordered list part, look at the whole document. All these things are objects. And yes, sometimes one object contains other object. That's okay. We'll have a way in JavaScript to get to every single piece, every object at whatever level that makes sense, from being able to grab the entire document to being able to grab the smallest piece.

That leads us to the idea of the model. The model simply means what do we call these individual pieces and how do we describe the relationships between them. The model here is like a business model or a data model. It's trying to represent something complex by making it abstract, making it simple. It's simply a set of terms that we can agree on. Do we call these individual pieces elements or nodes or doohickeys? What do we call them? We all have to agree. What we end up with is that the DOM in JavaScript is an agreed-upon set of terms.

That's our model. That describes how to interact with the pieces of a webpage. And that's a pretty long phrase, so we call it the Document Object Model. It is not a language, it's an idea. But it's an idea that JavaScript agrees on and that the web browsers agree on. So it's available there. Using the DOM, it lets us describe and interact with any webpage. Not any one specific page, but any webpage. When I know the basic concepts of the DOM, I could write some JavaScript that would say get the title text or get the second paragraph or get the third link in the menu and make it invisible, change the background color, get all the elements in the list, find an image and move it 40 pixels to the right, and a lot more besides.

And that's why if we're working in JavaScript we'd need to know the DOM. It is the way to reach into the page from our script and the way our page can reach into our script. Let me show you just one quick example. In my folder here, I have the same old couple of files. I'm going to open up this HTML page first in the browser. It's a little different, not very from what I've been looking at so far. If I open that up in the text editor, I can see that one thing I've added here, and I'm looking at both different views, is this.

I've added a headline. In the web browser, it shows up as this big bold Interesting Headline. In the HTML view, it's being represented by this h1 tag, and I've given it an ID of mainHeading. This is really like giving it its own unique label. Okay, so what's the point of this? Well, part of the idea of the DOM is that understand what it means to be a named element on a page. I can grab this headline if I know this name. So I'm going to leave the HTML here and go into my JavaScript.

What I can do is create a new variable. I'll call it headline and I want to grab that part of the webpage. The way that I do it is using the Document Object Model. I will say well, it's part of the document. Document is an object that actually exists anywhere in my JavaScript. Then I'm going to say that I want to get a particular element. There's a built-in function here called getElementById. It's one of the most popular functions in the whole of JavaScript.

I give it one piece of information, which is, what did I call it? Well, I called it mainHeading. And as soon as this line of code runs, I'll have this handle on that particular piece of the page. Then I can use this handle, this variable name, to say well, I'm going to reach inside of it, and set its own contents in our HTML to something new, "Wow, a new headline!" Okay, not the most exciting thing in the world. But if I save this, I jump back to my folder, and I run this page again, no alert box this time, but I can see that I'm immediately reaching into that headline, and actually changing the value of it.

It's not changing my actual HTML. If I look at the HTML file, it still says Interesting Headline. But what's happening is the HTML was loading, it's bringing in our JavaScript, and immediately our JavaScript is reaching back and changing the contents of this headline tag. And sure, while this by itself might not set your world on fire, if we can affect the headline, we can affect anything. We can change colors, we can change text. We are creating the contents of this page through our JavaScript.

All programming languages have an area in which they become specialized based on the world that they're working in. When you're a JavaScript developer, knowing the DOM and learning the DOM, being able to navigate through the page, is the single most important skill for being proficient in that language.

There are currently no FAQs about Foundations of Programming: Fundamentals.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Foundations of Programming: Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked