This post is part 27 of 35 in the series Programming by Stealth

In this instalment we’ll make a start on a large topic which we have intentionally ignored until now – taking user input on the web. The way this is done is through HTML forms. It will take us a few instalments to learn all about them, so we’ll start with the basics in this instalment.

The code for the examples in this instalment has been collected into a single ZIP file which you can download here.

Read more

Tagged with:

This post is part 26 of 35 in the series Programming by Stealth

After our brief division in the previous instalment, it’s time to get back to learning new things. We’ll learn about data attributes – a mechanism for embedding data into HTML elements.

We’ll also revise what we learned about defining our own object prototypes to start including prototypes in our APIs.

Finally, as a practical worked example, we’ll build a better clock API for Allison’s website. Each Sunday she streams the live recording of her podcast from podfeet.com/live at 5pm at her house. To avoid timezone confusion, Allison would like a clock on that page that shows the current time at her house.

As usual I’ve packaged all the files needed for the worked example into a ZIP file which you can download here.

Read more

Tagged with:

This post is part 25 of 35 in the series Programming by Stealth

This instalment is a little unusual – rather than learning new topics, and then demonstrating them with a few simple examples, we’re going to look at a real-world JavaScript API, see how it works, and in so doing, reinforce what we’ve already learned, and expand our knowledge a little.

The library we’ll be examining is bartificer.linkToolkit.js, a small open source library I released over the weekend. This library bundles some functions for manipulating links in HTML documents. The two main functions of the library are to ensure that links with a target of _blank also specify a rel of noopener (for security reasons), and, to automatically make links leading out of the site open in a new tab, and denoting that fact with an icon appended to the end of the links. You can see the library in use right here on this page!

We’ll be looking at the library from three points of view – the actual JavaScript code, the JSDoc comments, and the documentation produced from those comments, and, project management.

Read more

Tagged with:

This post is part 24 of 35 in the series Programming by Stealth

In this instalment we’ll take our JavaScript skill up a level, learning how to write code that is designed to be re-used by ourselves or by others. When you solve a problem that you know you’ll need to solve again, it’s worth putting in a little extra effort to make your code as easy to re-use as possible. You may decide to share that code with others, or you may not, but either way, it’s in your interest to write it using some simple best practices.

Re-usable code without documentation is all but useless, so, we’ll also learn how to create great API documentation as you code. We’ll learn to do this using the free and open source tool JSDoc.

As a worked example, we’ll re-write our link fixer as an easily re-usable API, and while we’re at it we’ll also add in some extra functionality to make its behaviour more customisable, and hence, more useful to more people.

The sample files used in this instalment, as well as some needed libraries, can be downloaded as a ZIP file here. The examples assume you’ll save the files within the zip in a folder named pbs24 in the document root of your local web server.

Read more

Tagged with:

This post is part 23 of 35 in the series Programming by Stealth

So far in this series we have been using jQuery to alter existing HTML elements by changing their attributes or style. In this instalment we take things to the next level, and learn how to use jQuery to create entirely new HTML elements, and inject them into the DOM, and hence, into the web page.

We’ll be working towards our first truly practical assignment in the series – a function that finds all links on a page, and if, and only if, they lead to an external page, alters them to open in a new tab, and appends an icon indicating that fact. In order to work up to that we need to learn five new things:

  1. How to build HTML elements with jQuery
  2. How to inject HTML elements into the DOM
  3. How to loop through each element represented by a jQuery object
  4. How to embed images directly into web pages using Data URLs
  5. How to use the 3rd-party library URI.js to interrogate URLs

There are four examples in this instalment, and a starting-point for the challenge. I’ve gathered them, and the other files they depend on, into a ZIP file which you can download here. It’s assumed that you’ll extract this ZIP file and place the five HTML files and one folder it contains into a folder named pbs23 in your local web server’s htdocs folder. The folder is particularly important because it contains a copy of the URI.js library, and if it’s not in the same folder as pbs23d.html and pbs23-assignment.html, those pages won’t work.

Read more

Tagged with:

This post is part 22 of 35 in the series Programming by Stealth

In the previous instalments we experimented with jQuery using the web console on our dummy page. In this instalment we’ll learn how to embed JavaScript into web pages, and, how to attach our code so it gets triggered by browser events.

This instalment includes a number of examples. You can copy-and-paste the code out of the page, but for convenience I’ve zipped up all the files and you can download them here.

Read more

Tagged with:

This post is part 21 of 35 in the series Programming by Stealth

In the previous instalment we took our first tentative steps into the browser. We learned about the Javascript console, the concept of the Document Object Model, or DOM, and we introduced the jQuery library.

Our initial introduction to jQuery was very superficial, now, it’s time to dive in deeper, and get much more rigorous in our understanding. We’ll look at how to use jQuery to select specific HTML elements on the page, and then, how to manipulate their styling, and their HTML attributes.

For this instalment we’ll still be using the Javascript console on the PBS dummy page. From the next instalment on, we’ll be embedding our JavaScript directly into our web pages, so this will be the last time we use the dummy page.

Read more

Tagged with:

This post is part 20 of 35 in the series Programming by Stealth

After six instalments, it’s finally time to bring our JavaScript knowledge into the web browser. We’ve already learned that HTML is used to specify the structure of a web page, and CSS to specify its appearance, so where does JavaScript come in? JavaScript’s primary use on the web is to add interactivity and/or automation of some kind. For example, clicking on something could cause the page to change in some way, or, icons could be automatically injected into the page to mark links that open in new tabs as being different to other links.

A key point to note is that HTML, CSS, and JavaScript are all so-called client-side technologies. It’s the web browser doing the work, not the web server. The web server simply delivers the HTML, CSS, and JavaScript code to the browser as text, just like you type it, and the browser then interprets that code and turns it into the web page you see and interact with.

Read more

Tagged with:

This post is part 19 of 35 in the series Programming by Stealth

While recording instalment 18 of the Programming by Stealth series, I promised Allison some challenges to help listeners test and hone their understanding of the core JavaScript language. Since we’ve now covered pretty much the whole language in the series, it’s the perfect time to pause and consolidate that knowledge.

These challenges are designed to be run in the PBS JavaScript Playground. You may also find the PBS JavaScript cheatsheet helpful.

Read more

Tagged with:

This post is part 18 of 35 in the series Programming by Stealth

We’ve now covered most of the core JavaScript language. We’ve learned that variables can store literal values, or references to objects. We’ve learned there are three types of literal values – numbers, booleans, and strings. We’ve learned about operators. We’ve learned about conditionals. We’ve learned about loops of various sorts, and we’ve learned about objects. We’ve learned that in JavaScript, arrays are implemented as objects with the prototype Array, and that functions are also implemented as objects.

Before we can leave the playground and head off into the world of the browser, we just have a few more loose ends to tie up, which we’ll take care of in this instalment.

Now that we know about objects, we need to re-visit the arguments object present in every JavaScript function. We need to take a detailed look at the typeof operator, and we need to look at some built-in objects and functions JavaScript provides.

We also need to look at how JavaScript handles regular expressions, and finally, we need to introduce the concept of exception handling.

Read more

Tagged with:

« go backkeep looking »