The Author – Bart Busschots
Creative Commons
Unless otherwise stated, the content on this site is licensed under Creative Commons Attribution, Noncommercial, No Derivative Works 3.0 License
Oct
13
PBS 41 of x – Form Events
Filed Under Software Development, Computers & Tech on October 13, 2017 | 1 Comment
In this instalment we’ll tie up the last few loose ends related to web forms. With web forms under our belts, we’ll then be ready to pick up where we left off with our cellular automata JavaScript prototypes, and combine our HTML, JavaScript, and CSS skills together to make our first web app – an implementation of Conway’s Game of Life.
This instalment breaks down into two distinct parts – our first look at keyboard interaction with web forms, and a final look at form-related events.
When it comes to keyboard interaction we’ll start by looking at how browsers treat regular web forms, and then we’ll move on to supporting keyboard interaction with custom web form UI elements like the star-rating example from instalment 36.
Finally, we’ll wrap up with a handy reference table summarising the most important webform-related JavaScripts events, giving some guidance on their use.
There’s just one sample file associated with this instalment, and it’s available for download as a ZIP file here.
Oct
29
PBS 42 of x – Playing the Game of Life
Filed Under Software Development, Computers & Tech on October 29, 2017 | 1 Comment
In this instalment it’s finally time to bring our Cellular Automaton prototypes to life by implementing Conway’s Game of Life. By the end of this instalment we’ll have reached a real milestone — our first web app! Granted, it won’t be a very feature-rich web app, but you have to start somewhere!
As usual, I’ve collected the code files for this instalment into a ZIP file which you can download here. As well as the ZIP file, I’ve also published a tagged release of the bartificer.ca.js code on GitHub which you’ll need for this instalment’s challenge.
Nov
12
PBS 43 of x – Introducing JavaScript ES6
Filed Under Software Development, Computers & Tech on November 12, 2017 | 3 Comments
Because its been a while since we focused on JavaScript, the bulk of this instalment will focus on solving the challenge set at the end of the previous instalment. We’ll work through the solution in detail, step-by-step.
We’ll finish the instalment by making a start on moving from JavaScript version 5, to JavaScript version 6, or ECMAScript 6, usually just called ES6. When we started our look at JavaScript about a year and a half ago it made sense to use JavaScript 5, but now it’s time to upgrade our knowledge. ES6 was a very big change indeed, so we won’t bit it all off at once. Instead, we’ll focus on just one very important change in this instalment — ES6’s new take on variables.
There’s no zip file for this instalment as such, instead, I’ve published my sample solution as a tagged release on GitHub instead. You can use the big green clone or download button to either copy the code using GIT, or download it as a ZIP file.
Nov
26
PBS 44 of x – ES6 Arguments & Objects
Filed Under Software Development, Computers & Tech on November 26, 2017 | 1 Comment
In the previous instalment we started our exploration of the new features ES6 brought to JavaScript with a look at block scoped variables. We learned that var will continue to work as it always has, defining function-scoped variables, but that we can now use let and const to define block-spoped variables and constants.
We’ll continue our exploration of ES6 today by looking at how function arguments have been improved, and learning about a new type of loop designed to make looping over object properties easier.
There is no ZIP file for this instalment, instead, I’ve published my solution to the challenge from the previous instalment (which is also the starting point for the next challenge) as a tagged release on GitHub. You can download it using the big green button labeled Clone or Download.
Dec
10
PBS 45 of x – ES6 Arrays & Strings
Filed Under Software Development, Computers & Tech on December 10, 2017 | 2 Comments
We’ll start this instalment be re-visting the question of when to use let and when to use const for variable declarations. My initial advice was to default to using let, but based on some great feedback from the the community, I’ve changed my mind, and will be defaulting to const going forward. I’ll explain why I changed my mind.
Next we’ll have a quick look at my sample solution to the challenge set at the end of the previous instalment, before moving on to some new material. Specifically, we’ll look at some of the ways in which ES6 has improved arrays and strings.
Dec
20
PBS 46 of x – ES6 Spread Operator, Arrow Functions & Classes
Filed Under Software Development, Computers & Tech on December 20, 2017 | 1 Comment
We’ll start this instalment by having a look at my sample solutions to the previous two instalments, and then we’ll move on to looking at three ES6 features, two of which are extremely significant. We’ll start by addressing an accidental oversight from the previous instalment when we looked at arrays. I had intended to cover the so-called spread operator together with Array.from() and the for...of loop, but it slipped mind. Once we’ve dealt with my little oversight we’ll introduce an entirely new type of function that removes the need for the const self = this kludge for callbacks. So-called arrow functions greatly simplify the use of callback in JavaScript, and in modern JavaScript, callbacks are everywhere!
Finally, we’ll make a start on my personal favourite new feature in ES6 — classes. This major change brings JavaScript into line with the other C-style languages, and, more importantly, into line with how most programmers are used to working. This takes JavaScript objects from weird esoteric things only those initiated into the JS cult can understand at a glance to intuitively understandable constructs. For those of you for whom JavaScript is your first language, classes will be nice, but for those of you coming to JavaScript form other languages, classes will be a blessed relief!
We’ll only be covering the basics of the class keyword in this instalment. In the next instalment we’ll take things up a notch when we finally explore the concept of polymorphism, the heart and soul of object oriented programming.
Jan
6
PBS 47 of x – ES6 Polymorphism
Filed Under Software Development, Computers & Tech on January 6, 2018 | 2 Comments
In this instalment we’ll wrap up our look at new features added to JavaScript with the release of ES6. We haven’t come even close to looking at all the new features brought by ES6, instead, we’ve just looked at a curated selection of some of the most useful new features.
Thanks to the power of the new class syntax introduced as part of ES6, we can now learn about two really important object oriented concepts which I had previously been avoiding because of how horrible the old syntax was. What we’ll be looking at are the very closely related concepts of inheritance and polymorphism.
To illustrate the concepts, and to lay the ground work for this instalment’s challenge, we’ll be making our way through a worked example. You can find the code in this instalment’s ZIP file, which you can download here.
Jan
20
PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Filed Under Software Development, Computers & Tech on January 20, 2018 | 2 Comments
I had initially planned to return to our Cellular Automata classes and Conway’s Game of Life for this instalment, but based on some listener feedback I’ve decided to delay that by at least one instalment and dedicate this entire instalment to a closer look at just two JavaScript keywords – this and static instead. The two are more closely related that you might think.
The ZIP file for this instalment contains my sample solution to the challenge set at the end of the previous instalment, the starting point for the next challenge, and a JavaScript file containing all the example code snippets that appear in this instalment.
Feb
3
PBS 49 of x — Improving Our Cellular Automata
Filed Under Software Development, Computers & Tech on February 3, 2018 | Leave a Comment
In this instalment we’re going to continue to consolidate our understanding of JavaScript classes by improving the Cellular Automaton classes we built together in previous instalments. This time we’ll make a start on improving how the classes represent and deal with cell states. The challenge will be to finish the task.
We’ll also take some time to revise the basics of JavaScript objects.
The ZIP file for this instalment contains my sample solution to the previous challenge.
Feb
18
PBS 50 of x — A Worked Example (Object Explorer)
Filed Under Software Development, Computers & Tech on February 18, 2018 | 1 Comment
In this very special 50th instalment I share my screen with Allison and we build up a simple web app together. We start with the scariest thing of all, a blank screen, and take it from there.
The web app we build up together is an object visualiser. Our simple web app consists of a text area into which we can enter JavaScript code to define an object, a <div> into which we will render a representation of the object, and a button to trigger the rendering.
Using a Screen Reader? click here.
Just about everything we use in this little exercise is revision, with one exception — we meet JavaScript’s eval() function for the first time. The eval() function takes as an argument a string, and executes it as JavaScript code. For more details, see the MDN documentation.
You can download the final code here.