Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics Working with jQuery Collections Stopping the Browser's Default Behavior

Mariela Napoles
Mariela Napoles
13,434 Points
Posted by Mariela Napoles
Mariela Napoles
13,434 Points

Why do we have to append the checkbox here?

Im having a hard time understanding why does she have to append the checkbox instead of adding it directly on to the html. Ill be so thankful if anyone can answer my question. Thank you so much

Fred Bryant
Fred Bryant
3,888 Points

My of understanding this is: the checkbox is used for a javascript-based functionality on the page; if javascript is disabled, the .preventDefault and alert won't work, so the checkbox wouldn't serve any purpose.

Therefore the checkbox should only be added if javascript is enabled, as that's the only situation in which it's useful.

Mariela Napoles
Mariela Napoles
13,434 Points
Mariela Napoles
Mariela Napoles
13,434 Points

Thanks for your answer Andrew. I understand now!

2 Answers

Bjorn Beishline
Bjorn Beishline
14,753 Points
Bjorn Beishline
Bjorn Beishline
14,753 Points

The reason the check-box is not added directly to the HTML is, because the principles of making your JavaScript unobtrusive. Unobtrusive JavaScript has three concepts as described in an earlier video in the jQuery Basics Course.

https://teamtreehouse.com/library/understanding-unobtrusive-javascript

These three concepts are...

  • JavaScript, as the functional layer of webpages, should be kept separate from the structural and presentational layers, the HTML and CSS.
  • cross-browser inconsistencies should be accounted for. Users should have similar experiences, regardless of which browser they're using.
  • Progressive enhancement is the idea that your website's core content and functionality should be available even when JavaScript is blocked, disabled, or not fully supported.

We need to make sure that our websites core content and functionality should be available even when JavaScript is block, disabled, or not fully supported.

Why would someone have JavaScript turned off you may ask?

  • Your user might have some kind of firewall or plug-in installed that ends up blocking or breaking your scripts.
  • Something might go wrong at the network level causing your scripts to only be partially loaded.
  • A business might disable JavaScript on employee computers to limit the use of certain websites.
  • Your user could be using an older browser at a public library, or a school with older computers, or using your website in a developing country that doesn't yet have the technology to support modern browsers, or your script can simply fail for some unknown reason.

Think about progressive enhancement in this way. It's about making sure your site's core content and functionality is available regardless of the technology your user has access to, and adding on interactivity and other bells and whistles from there.

Have you ever spent a few moments furiously clicking on a button that doesn't respond? Not fun right?

-Treasure Porth

If the entire check-boxes functionality revolves around JavaScript being allowed, it's best not to include it in the page if JavaScript is disabled. It would only serve to frustrate your users, because it has no purpose.

Mariela Napoles
Mariela Napoles
13,434 Points
Mariela Napoles
Mariela Napoles
13,434 Points

Alrighty! Thanks for your detailed answer Bjorn! I remember Treasure was talking about this and yep you are right! Thank you again :)

Daven Hietala
Daven Hietala
8,040 Points
Daven Hietala
Daven Hietala
8,040 Points

I understand everything accept why wouldn't we leave the code on the .index? I mean if there is this hypothetical situation in which javaScript doesn't work.. Why would we add the code to the app.js? I mean that is the javascript. The javascript doesn't work in this hypothetical situation. WHY!?!? I'm confused.

Max Sturman
Max Sturman
11,048 Points

Using unobtrusive JavaScript means that you're basically practising in creating JavaScript as a layer which can be added if available, but the site will still be 100% functional if it's unavailable

For this to happen, you need to add more to the code of the JavaScript Document as the HTML isn't relying on JavaScript anymore, where as if there is no JavaScript and the HTML is relying on it for the page to be displayed correctly, then the page will break!