Video Get Elements from DOM
One of the top level DOM objects is called "document". We'll see now that getting a handle on this in Javascript is very easy. To do this we load the simple web page we just saw. Then we open the Chrome Development Environment. You can do this by holding down the keys "Ctl+shift+i" at the same time or do it as we showed the video. This is shown again in the image on the next page.
You should see this
Now bring up the Console.
It will now look like this
So now we can use Javascript to access the objects in the DOM. Lets get hold of the H1 tag and change the text in it. Once we change the object in memory the browser immediately re-renders the page to reflect those updates.
We are going to use the following Javascript to get hold of the H1 tag (in the DOM its called an "element" ).
You should now see the following
The rendered page will now change to look like this.
The blue and brown colors are added by the Chrome Development Environment to show that we are "touching" the H1 tag. It gives some additional information about the size in pixels of the Ninja string - 621px x 37px.
We have seen that we can enter Javascript into the Console in the Development Environment. One advantage of using the Console is that it shows us what objects and functions are available. So typically we will use the Console to "try out" small snippets of code to see if they work. However, once we understand how they work we can embed the Javascript directly into the Web Page. Remember we can put the Javascript between the "SCRIPT" tags as shown on the next page.
Copy the code from next page. Create another text box to enter the velocity.
Create a third text box to hold the product of velocity*dt. In 'Run()' calculate the product of velocity*dt and write it into the result box. Write out the product to the Chrome console by using 'console.log('some string') - Check the console in Chrome to make sure its written there.
You can write values to the console to help debug your program.
