It's great because I feel pretty comfortable with using the FTP software now, it's been a while since I last used it, and it only took a couple of minutes to do what I wanted to do.
So, I started earlier today on Chapter 60 The DOM: Finding Children. If we take this code as the starting point:
<body>
<div id="cal">
<p>Southern Cal is sunny.</p>
<p>Northern Cal is rainy.</p>
<p>Eastern Cal is desert.</p>
</div>
<div id="ny">
<p>Urban NY is crowded</p>
<p>Rural NY is sparse.</p>
</div>
</body>
Then all the code below can be used to read the contents of the last paragraph of the markup.
var div = document.getElementById("ny");
var p = div.getElementsByTagName("p");
var lastP = p[1].innerHTML;
OR
var p = document.getElementsByTagName("p");
var contents = p[4].innerHTML;
OR
var p = document.childNodes[0].childNodes[1].childNodes[1];
var contents = p.innerHTML;
The third version is the one that I'm learning about in this chapter. In practice, though, we would usually code something like this to target that same text inside the second paragraph under the "ny" div:
var d = document.getElementById("ny");
var p = d.childNodes[1];
var contents = p.innerHTML;
This is interesting:
<div id="sample">
<p>This is a<em>piece</em> of a larger puzzle.</p>
</div>
For the code above, this code:
var d = document.getElementById("sample");
var emElement = d.childNodes[0].childNodes[1];
Would pull the <em> element, which is neat, so the "This is a" would be the first child of the <p> element, the <em> element is the second child of the <p> element, and the "of a larger puzzle" is the 3rd child of the <p> element. This is because any element enclosed by another element is a child of that element, so the text element is the first, the <em> tag is the second, and the last text element is the 3rd.
Okay, I finished chapter 60. The next chapter is Chapter 61 The DOM: Junk Artifacts and Nodetype.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
Javascript: 1,120
Treehouse Ranking (%): "You have more total points than 94% of all students."
Treehouse Badge(s) Earned Today:
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 199)
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 29% Complete
3. Ruby Programming 0% Complete
4. Ruby on Rails 0% Complete
5. HTML5 and CSS3 0% Complete
6. Javascript and JQuery 0% Complete
7. Getting Hired as a Web Developer 0% Complete
Hours Spent Coding Today: 2
Total Hours Coding: 593
No comments:
Post a Comment