JavaScript – Week 3

More JavaScript this week! I don’t have any concrete examples of code to show, as most of what I’ve covered has been focused on working through textbook examples and exercises. Below I summarize some of the concepts/big ideas I looked at this week.

Besides looking at JavaScript, I’ve also been working on my WordPress theme. Right now I have the bones of my design implemented in the CSS, and am making some tweaks to small things in the design here and there as I go. I’m starting with the mobile layout first, and once I have that to an acceptable point, I’ll be moving along to the appropriate breaks for tablet-sized screens.

Beginning JavaScript: Chapters 1-3

These chapters covered overviews of:

  • JavaScript and the web
  • Data type and variables
  • Decisions, loops, and functions

While a lot of the actual info (particularly in terms of syntax) was at this point review for me, what I really like about this resource is the exercise questions found at the end of each chapter. I’m now feeling much more confident in my ability to put the things I’m learning about into actual practice within the browser, and seeing the results firsthand. I find that I’m much more comfortable with puzzling out what’s happening in these exercise questions, and also in my own time spent playing around with the concepts I’m reading about.

JavaScript Essential Training at Ch. 2 Core JS Syntax, Ch. 4 Understanding the DOM, Ch. 5 Working with the DOM, & Ch. 6 Working with Events and Events Listeners

These videos (especially chapters 2 and 4) were a nice review of concepts from another perspective. I think I gathered some more insight into the language as a whole, while having a much better foundation so that I was able to follow along with a lot of ease. The explanation of the DOM here was one of the most understandable and helpful explanations that I’ve come across yet. It really highlighted how the DOM is a conceptual model, much like an Entity Relationship diagram for a database. (Also made me think of how FRBR works in relation to metadata standards like MARC in cataloging!)

I also really liked the diagram in this video that showed the way the objects in the DOM are split into hierarchies. In particular, distinguishing between these three concepts has been crucial in my understanding of how JavaScript really works/interacts with the DOM:

  • Element node – the HTML element itself, like a ul, li, div, etc.
  • Attribute node – the HTML attribute that can describe the element, like id=”myList” or name=”value”
  • Text node – the actual content/text between two elements, so <p>This is the text node and only this is the text node, not the opening or closing tags</p>

This may be pretty basic stuff, but I feel like prior to this video I wasn’t paying very close attention to which nodes certain methods were accessing/manipulating. I tend to work by picking up on patterns without necessarily recognizing or associating them with their technical names, and stopping to sort out these differences has been really helpful for the way I conceptualize how JavaScript works.

Professional JavaScript for Web Developers: Ch. 3 Language Basics, Ch. 4 Variables, Scope and Memory, Ch. 5 Reference Types, Ch. 12 Events

This again had some similarities and overlaps with the other resources for this week. One thing in particular that this book helped me grasp better was the concept of bubbling vs. capturing events. Bubbling starts with the most specific object that is being targeted (ie., a li tag) and “bubbles” it’s way up the chain of DOM objects (so it goes up the chain from the li –> ul –> div –> body, etc.). Capturing, on the other hand starts with the most generic object and moves down the chain to the most specific item being targeted. So in the same example from before it would begin with the body and move downwards eventually to the li tag. Combined with the video on Events in JavaScript, I was able to see an example of how this actually works with an event, and how if you aren’t aware of the order being used/supported by a browser, you can end up with unexpected behaviors from your code.

Professional JavaScript for Web Developers is certainly the more detailed and technical of the resources I’ve been looking at. I appreciated its discussion of accessibility and JS — something I haven’t explicitly come across in any of the other resources I’ve been looking at so far. Some mouse events, for instance, can not be accessed via the keyboard. Therefore, in order to make a site that is “accessible to users with disabilities, specifically those who are using screen readers, you should be careful when using mouse events. [T]he click event can be fired using the Enter key on the keyboard, but other mouse events have no keyboard support. It’s advisable not to use mouse events other than click to show functionality or cause code execution, as this will severely limit the usability for blind or sight-impaired users” (Zakas).

One concept that I’ve seen in relation to JS is the importance of writing code that follows progressive enhancement. This seems obviously linked to ideas associated with Responsive Web Design, and I think working with this sort of framework in mind is important for creating accessible JavaScript within an overall accessible web page. If the JS is necessary for navigating the page or performing some necessary action, then it needs to be accessible to everyone. If it can’t be for whatever reason, then an alternative should be included in the page. I think this is in line with the ways I’ve seen JavaScript employed in other examples from my study this summer — for instance, the tutorial on how to build a WordPress theme from scratch used JavaScript to add greater functionality to menus for screen readers. JavaScript was therefore being used to add to the functionality of the page and make it more accessible for all users, rather than taking away from that accessibility.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.