Javascript Fundamental for a non-technical person

Making sense out of all the technologies that go into programming for the web can be difficult, especially so for people who do not have a technical background and do not know the difference between a monitor and the PC that powers it, or between WiFi and the Internet. How would you explain HTML, CSS and Javascript and their relationship to such a person? I'll give it a try.

Imagine you are a bookmaker in a fantasy world, and you are making a magical book about cooking, that comes with a familiar that does the cooking. Your book will need to contain instructions on how to prepare the dish, ingredients that go into the dish, and probably a few nice photos of the completed dish and intermediate stages, to make it more appealing to the broader audience.

HTML would be your ingredient list, as it contains all the elements required and allowed to use in the dish preparation if the dish was a web-page. A paragraph, a heading, a foot-note at the end of an article - they are all ingredients of a page, giving it structure and meaning.

CSS would be the artistic flair, the look and feel of your book. Do you want a red medieval style waxed capital letter at the beginning of every page of your book? Or you want the text in the book to wrap around the beautiful paintings of the final dish? Do you want the pictures to be painted in a circle? CSS allows you to do all this and much more to add appeal to the content of your book.

Once you have the content and design of your book laid out, you want to add some instructions for the familiar, and in this fantasy world you would be using Javascript to do that. A simple shopping list for him might look something like this:

  1. Go to the market
  2. Buy a newt eye
  3. Buy a bat wing
  4. Collect some soot from the inn
  5. Come back home

If you had something more complicated, you need to add control flow, conditions for certain steps. For example, ask your familiar to buy some sweets on the way back, but only if it has money left over after shopping at the market. Or maybe, use a loop to buy multiple lists of ingredients, if you are planning a party.

You can use the HTML5 Document Object Model with Javascript to make the book interactive. For example, while your familiar is buying the ingredients on the market, you can get him or her to chec off the ingredients off the list, and then by pure Javascript magic, the ingredient on the recipe page would be crossed off and marked green to confirm that you have what you need.

A couple key elements in Javascript (and any programming language for that matter) are arrays and objects. An array is something like a grocery list: you start at the top and you go down through the list in sequence, but you could also jump to a certain item directly if you wanted to. An object in Javascript would be akin to a shelf in the pantry, where you have dedicated shelves for spices, or different sorts of flour, and you could tell the familiar to go and get it by accessing the "spices" object/shelf and the "pepper" property/item.

And finally, you might sometimes need functions to be able to reuse sets of instructions over an over without having to write them from scratch again. For example, you can get your familiar to make drinks for the party at the bar by providing him with instructions saved under a quick and easy to remember spell. Whenever someone asks for a drink of a certain kind, the familiar would cast one of the preset spells instead of asking you for instructions every time.

This might not be the ideal representation of web-programming, but I'd say it is close enough. After all, for a lot of people programming and sometimes even just interacting with computers can be a little bit like magic...