A Smarter Way to Learn JavaScript

A Smarter Way to Learn JavaScriptReviews
Author: Mark Myers
Pub Date: 2014
ISBN: 978-1497408180
Pages: 320
Language: English
Format: PDF/EPUB/MOBI
Size: 10 Mb

Download

I found JavaScript books so frustrating, I decided to write my own.
The authors of JavaScript books are probably some of the brightest people around. And maybe that’s the problem. Maybe they don’t know how to relate to those of us who may sometimes struggle to learn. My sister is a wonderful dancer. I dance like Bill Gates. She says, “C’mon, dancing is easy!” Yeah, for her, but not for Bill and me. She’ll never teach me to dance until she understands that dancing isn’t easy for me.
Whether you’re a beginner or an experienced coder doesn’t matter. Plenty of veterans have told me, “I wish someone had used this approach to teach me [HTML, PHP, jQuery, C#, Ruby, Java, Python—fill in the blank].” Experienced or not, you’ll probably like my book if you find other books too dense, too technical, and too unsympathetic to the learner’s needs.
What you’ll especially like, I think, is that the book is just the tip of the iceberg. The larger part is the abundance of interactive exercises that encourage you to practice, practice, practice. You’ll agree, I think, that without practice, a coding student might as well be reading a novel.
One caveat: If you’re an older programmer who has established ways of doing things, you may get bent out of shape by my insistence that you do some things that aren’t habitual for you. If you think this might be a problem, please try the free sample of the book before you buy it. Then do a few of the interactive exercises. You’ll soon know whether you can tolerate being pushed around by me.
Here’s what’s different about my book:
Testing showed that books and courses load up the reader with far too much information at a time. So I divide up the information into little chunks that won’t overwhelm anyone.
A book on coding doesn’t have to be written in impenetrable legalese. It can actually be human-readable. My book is.
Most people learn best through examples, so I provide plenty of them.
Most important, before you have a chance to forget what you’ve read in the book, I ask you to fire up your desktop or laptop (not your mobile device) and head over to my website, where you run a set of interactive exercises, practicing everything you’ve learned—until you’re sure you’ve mastered it.
Readers tell me they often start the exercises thinking they know the material cold. and quickly find out they don’t. The automated exercise manager keeps you at it until your overconfidence becomes real confidence—confidence that’s based on your excellent performance. There are 1,750 exercises in all. They’re all interactive, with an automated answer-checker that corrects your missteps and points you in the right direction when you stumble. And they’re all free.
Readers tell me the combination of book and interactive exercises is involving, fun, frustration-free, addictive, confidence-building, and…well, read the reviews.

+

The DOM

In previous chapters you learned two different ways to target components of your web page so you could read or set them. You learned to getEiementByid, and you learned to getEiementsByTagName. These are often the best methods for targeting things, but they have limitations. The first, getEiementByid, gives you access only to those components that have been assigned an id. The second, getEiementsByTagName, is good for wholesale changes, but is a bit cumbersome for fine surgical work. Both approaches can change things on your web page, but neither is able to deal with all the things on the page, to create new things, to move existing things, or to delete them.

Fortunately, both of these approaches are only two of many methods for working with the Document Object Model, the DOM. The DOM is an organization chart, created automatically by the browser when your web page loads, for the whole web page. All the things on your web page—the tags, the text blocks, the images, the links, the tables, the style attributes, and more—have spots on this organization chart. This means that your JavaScript code can get its hands on anything on your web page, anything at all, just by saying where that thing is on the chart. What’s more, your JavaScript can add things, move things, or delete things by manipulating the chart. If you wanted to (you wouldn’t), you could almost create an entire web page from scratch using JavaScript’s DOM methods.

Here’s a simplified web page. I’ve indented the different levels in the hierarchy. The three top levels of the DOM are always the same for a standard web page. The document is the first level. Under the document is the second level, the html. And under the html are the co-equal third levels, the head and the body. Under each of these are more levels.

Here’s the same thing, shown as an organization chart. Note that this is an idealized chart, cleaned of junk artifacts that most browsers iasert in the DOM. I’ll show you how to clean out these artifacts in later chapters.

As you can see, every single thing on the web page is included, even the title text and the paragraph text. Let’s make it a little more complicated by adding a div and a second paragraph. Here it is in HTML form.

In a company organization chart, each box represents a person. In the DOM organization chart, each box represents a node. The HTML page represented above, in its cleaned-up DOM form, has 11 nodes: the document node, the html node, the head and body nodes, the title node, the div node, two paragraph nodes, and three text nodes, one for the title and one for each of the two paragraphs.

In this particular chart, there are three types of nodes: document, element, and text. The document node is the top level. Element nodes are <html>, <head>, <body>, <title>, <div>, and <p>. Text nodes are the strings that comprise the title and the two paragraphs.