|
|
|
|
Issue #172 (defaultChecked property & Learning Tools)11/03/16
Here's an interesting DOM feature when working with forms that maybe you haven't seen before. Let's say you have a set of radio buttons or checkboxes in a form, like this:
|
<form id="form">
<input type="radio" value="one" name="setOne">One
<input type="radio" value="two" name="setOne" checked>Two
<input type="radio" value="three" name="setOne">Three
</form>
|
There are three radio buttons and the second one is selected by default. As you probably know, you can use the checked attribute to determine which of those is selected at any given time. So even if the user switches the selection to a different radio button, you can find out which one it is:
|
let myForm = document.getElementById('form');
for (i = 0; i < myForm.setOne.length; i++) {
if (myForm.setOne[i].checked === true) {
console.log(myForm.setOne[i].value);
// logs "two"
}
}
|
Even after the user switches the selected button, you can run the same type of script and get the newly selected value. Simple enough.
But what if you want to determine which radio button was selected by default when the page first loaded? You can use the defaultChecked property for that:
|
for (i = 0; i < myForm.setOne.length; i++) {
if (myForm.setOne[i].defaultChecked === true) {
console.log(myForm.setOne[i].value);
// always logs "two"
}
}
|
Here's a JS Bin with a bunch of tests logged.
So no matter what gets changed on the form as a result of user input, the defaultChecked property will always be the value of the one that was selected by default. The only strange behaviour with this feature is the fact that you can define it with JavaScript and you can define it for more than one radio button in a set.
This means if you do:
|
myForm.setOne[0].defaultChecked = true;
|
on the above form, you will then have two radio buttons that log true for defaultChecked. So you have to unset the other one if you want to have only one have this attribute. Which I find a little strange, to be honest. The JS Bin includes a test for that too, towards the bottom.
Now on to this week's tools!
Buy my JavaScript/DOM e-book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Interactive Learning Tools
CodeQuizzes
Short, online quizzes for JavaScript, Git, Ruby, Bash, and more. The questions are designed to stand alone, and are beneficial with repetition.
checkIO
Build your space base and conquer other bases using your coding skills. Currently supports JavaScript and Python.
ES6 Cheatsheet
"This is an interactive ES6 cheatsheet. It uses a series of small examples to show you the important parts of new JavaScript syntax. All code is editable and runnable so you can play with it all you want."
HTML parser quiz
Not as easy as it sounds. You'll really have to understand how browsers parse markup.
Sublime Tutor
"An interactive in-editor keyboard shortcuts tutorial for Sublime Text 3."
Learn Flexbox with Webflow
Webflow, the website builder, now includes flexbox support. This interactive set of lessons lets you preview the tool and learn flexbox at the same time.
Super Markup World
For beginners to learn HTML and CSS. But it's actually not that easy to solve the challenges. But maybe it's just me.
Untrusted
A challenging JavaScript adventure game where you have to adjust the existing code to free your character from the maze.
CodeUpStart
"Learn to code by creating real world tech products. Use technology stacks like Rails, Python, Ionic, Swift and more to build real apps like Kickstarter, Fiverr and Instagram."
Books
Modular JavaScript
Book series by Nicolás Bevacqua. "Let’s improve our collective understanding of writing robust, well-tested, modular JavaScript code."
React Enlightenment
By Cody Lindley. "Learn React in the terse cookbook style found with previous Enlightenment titles."
SurviveJS Webpack
By Vepsäläinen, Koppers, and Rodríguez. "The purpose of this guide is to help you get started with Webpack and then go beyond basics."
Practical SVG
By Chris Coyier. A 150-page guide to understanding, creating, and working with SVG, from basics to animating and toolling.
React In-Depth
By the DevelopmentArc® team. An exploration of their processes, research, and experiences with the popular UI library.
Designing for Performance
By Lara Callender Hogan. "Helps you approach projects with page speed in mind, showing you how to test and benchmark which design choices are most critical."
Enduring CSS
By Ben Frain. "Learn how to write CSS for any size project. CSS that endures continual iteration, multiple authors and yet always produces predictable results. Enduring CSS is a robust and proven approach to authoring and maintaining style sheets at scale."
HTML Canvas Deep Dive
By Josh Marinacci. "When you finish reading this short tome you will have the skills to make charts, effects, diagrams, and games that integrate into your existing web content."
Building Front-End Web Apps with Plain JavaScript
By Gerd Wagner. "An incremental in-depth tutorial about building front-end web applications with plain JavaScript, not using any third-party library or framework, for theory-underpinned and example-based learning by doing it yourself."
Courses and Video Series
Learn Grid Layout
Rachel Andrew's site promoting the new Grid Layout spec now has an accompanying video series.
Front End Center
"Screencasts on the web platform for web professionals. Two episodes every month on browsers, performance, tooling & techniques."
React Basics
Treehouse's 183-minute course on getting up and running with React.
Learn Node.js
"A free interactive course for Node beginners Get started with developing applications with Node.js, and learn everything you need to know about 'advanced' JavaScript along the way."
ES6 for Everyone
"A premium training course to strengthen your core JavaScript skills and master all that ES6 has to offer."
GreenSock 101
"Are you ready to start learning the basics of GreenSock and web animations? Learn the basics of GreenSock API and web animations in 60 minutes!"
Web Accessibility
Google's Udacity course on making web apps accessible via input focus management, tag semantics, and WAI-ARIA.
Learn Redux
"20 video tutorials to help you learn how to build JavaScript apps with React.js and Redux."
The Bash Academy
"This guide is an introduction to basic and advanced concepts of the bash shell. It teaches both newcomers and long-time users the best, safest and most robust ways of writing powerful bash scripts."
A Tweet for Thought
Alex Russell with a tweet storm on the web bloat crisis.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
What's the best way to refer to ES6/ESNext/ES2015? Here's a lengthy discussion about it.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
