software lesson 1 - JavaScript

For the moment (2020, April), this is a quick and dirty version. I would like my apprentices to start shaping this and creating their own lesson outlines and such.

By default, I recommend starting with client-side, browser-based JavaScript. (Node.js is server-side and does not necessarily run in browsers.) Why I recommend this is of course important, but I'll save that for later versions.

I don't have a perfect place to send you, but I'll give you some leads.

My own web site has (at least, to start with) 2 directories / folders with some simple JavaScript ('19/08 and '20/03). Those aren't actually lessons, despite the name, but they should eventually be helpful. I recommend immediately learning about "view source" / viewing HTML source code / Control-U. On a laptop or desktop browser, you should learn to see the HTML and JavaScript source code. The source code on almost all of my web pages starts with "<!DOCTYPE html>". Look up the term "source code."

Client-side JavaScript is designed in large part to make HTML pages programmable. Essentially all web pages are written in HTML. My hand-coded HTML on my web site is probably about the best you'll see in terms of being able to read it. Facebook's code, for example, is almost impossible to read, even for me, last I checked. WikiPedia should be better.

Try copying the source code to your computer and saving it as a .html file. Then double click it or otherwise run it in a browser and see if it works on your own computer (file:///lesson1.html as the URL if you copy and paste or "expand" the URL as opposed to https://kwynn.com/....) Seeing, copying, and running the source code on your own computer are critical lessons. There are probably a number of how-tos and videos on this. I would hope the process is relatively obvious, but I have to be very careful making assumptions about what's obvious. Once you've dug around a bit, let me know if you need help.

I am a foaming-at-the-mouth open source fanatic. (Look up "open source.") I have exclusively run Ubuntu Linux for 6 years. If you must use Microsoft, though, use something like Notepad++ for writing HTML and JavaScript. You want something that at least color-codes the code. Notepad++ is thus a big improvement over Notepad.

I was once asked if you need the colors to program--if the colors are necessary for the code to run. No, the colors are an aid for humans. The colors don't exist as far as the computer is concerned. The computer is only seeing the raw text you enter.

While I'm at it, that same apprentice got way hung up on my web site's "favicon"--the yellow and blue square that may mark my web site's tabs. I made the statement that everything you see on the page comes from the source code. However, the favicon does NOT come from the source code (at least not at all obviously) and is another lesson for another time. So, no, you can't easily see how that's done. Don't let it confuse you.

As for tutorials on learning to code in JavaScript, I use W3Schools quite a bit for my own reference, but I of course know what I'm looking for. I already have a big problem with their "My First JavaScript" example. At some point I could make an entire lesson out of that first example. They make a huge number of assumptions. It's obvious to me that that their first example isn't obvious. Also, I'm almost certain their tutorial doesn't have you dev'ing on your own computer. You might make something out of their tutorial, but hopefully you can find better, given my guidelines below and above.

I also use Mozilla Developer Network (MDN) as a reference, and their information is professional-grade, and very, very detailed. That of course is not necessarily useful for a beginner. Aside from their reference material, they have at least one tutorial. I hear that it's good information but not well organized. See what you make out of it, though.

There must be a zillion tutorials and videos and lessons out there. You want to find something that shows you how to code on your own computer and run the JavaScript in your own browser. Eventually you'll want lessons in how to use Chrome Developer Tools or the Firefox equivalent (or another browser's). You'll want to use the JavaScript debugger and step line by line through code, watch variables at each line, etc.

page history

HTML5 valid