Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

Warning: Creating default object from empty value in /home/zbabbcom/public_html/blog/wp-content/plugins/hover/hover.php on line 182

This is the first in what will be a series of tutorials that will hopefully get you feeling confident with programming, computing, and website development. The whole goal is to bridge the gap that modern computing’s raw power combined with a myriad of talented people working on really cool things has created. You could head over to Tumblr and set up a blog in about 30 seconds, but that doesn’t give you any insight into how the blog works, how people can get to the blog, where it’s stored, etc. That’s where these tutorials come in.

These tutorials are going to be geared towards people with no knowledge of anything programming-related. They’ll be jam-packed with information though so even people with plenty of experience should find interesting bits. There will be a lot of new terms so as they come up I’m going to add popups to when you hover over the word like this: definition and then you can hover over the term to see what I’m talking about. I’ll also try to link to the relevant wikipedia page when appropriate. There are also a whole host of tutorials for learning programming and web development and I might link to some that are out there at the bottom of the tutorial posts. I’ll also have other posts where I talk more about the history or just something I found interesting or need to give more expansive instructions. When that’s the case I’ll put some hint in brackets like this: [hint].

I suppose it would be helpful for me to tell you what exactly we’ll be doing in these tutorials. The goal is to have you learn programming, computing, and web development all at once. To accomplish this goal we’re going to build a computer in a website that will run on your computer. Specifically we’re going to build this. I call it the Von Neumann 51 (note, I haven’t completely built the vn51 yet. I’ll keep you posted on the progress). Once we build the computer, we’ll give it a simple OS, define a programming language for it, build the parser, interpreter, and compiler for this language, and then set up the website so that other users can write programs for it.┬áThis probably sounds like a lot, and it is, but if you really want to know what’s going on under the hood you’ve got to put in some time.

So without further ado, let’s get you ready to start working. The rest of this tutorial will be introducing you to some of the tools you’ll be using for development as well as introducing the three languages that the web uses: HTML, JavaScript, and CSS. A lot of what we’re going to be doing isn’t necessarily the best or fastest way to get stuff done, but I find cutting corners when you’re learning doesn’t help in the long run. As the tutorials move on and you get more comfortable, I’ll start layering in tools that will make life easier. I should also say that for websites you’ll definitely want to make sure they work in as many browsers as possible, I however am not going to do that for these tutorials. I’ll make sure everything works in Chrome, Safari, and Firefox, so long as you’re using one of those you’ll be fine.

First and foremost, we need to get you to the command line. If you’re on a Mac you’re looking for an application called Terminal [how do I find Terminal]. On a PC you’re looking for cmd.exe [how do I find cmd.exe]. Once you have your command line open, let’s get a feel for where we are and what we’re doing. You should have a line with some info about your computer and a cursor that looks something like this:

terminal

 

The command line is a text interface for delivering commands to your computer. Most of the commands come from back in the day when computers didn’t have much memory and so they’re all abbreviated. The vn51′s OS will look a lot like this, except we’re going to make the text green because monochromatic phosphoric screens were awesome.

Let’s start by giving your computer the command “ls” (mac) or “dir” (PC). This will list all of the files and directories in your current directory (directories are what we call folders in the command line). We can navigate directories using “cd <directory name>”. Go ahead and try that out, if you have a directory called Documents for example you can “cd Documents” and that will move you into the Documents directory. If you then use ls you’ll see all of your files and directories in the Documents directory. You can then use “cd ..” to go back one directory and we’ll be back where we started. When I first started using the command line, I used to get stuck in places a lot. If you ever find yourself stuck or lost, just quit the program and start over.

One really nice thing about the command line is that pressing tab will autofill a file or directory name for you. This can be really useful when trying to navigate some path through five or more directories. Another thing you should know is that there’s a manual for the command line invoked with the command “man”. When you use man you give it the command whose page you are looking for. When you’re in a man page, you just type q and hit enter to leave. Let’s go ahead and check out the man page for ls. It should look like this:

manls

 

If you scroll down a little (use the arrow keys) you’ll see a list of options. Many commands you may use have options that can be used to accomplish tasks more specifically and efficiently.

Hopefully you’re feeling a little more comfortable here. The goal is to make a directory for our project here and then create our first webpage. So navigate to a directory for our new project. I have a Projects directory that I put everything in. Once you’re in the directory you want, we’re going to make a new directory by using the command “mkdir”. Let’s call it vn51. So we use the command “mkdir vn51″. You can then use “ls” to see if you did in fact make the directory. If it’s there, go ahead and cd into it.

Once you are in the vn51 directory, it’s time to make our first page. This isn’t going to be anything fancy, just something to help you get a feel for how this stuff works. If you’re on a mac you already have a really simple text editor you can use from the command line called nano. On a PC you can download and install nano here. Let’s go ahead and use nano to make our webpage. We’ll call it test.html so we use the command “nano test.html”. Now let’s add some text so that it looks like this:

nanotest

 

You can see the available commands for you down at the bottom. Use ctrl-o to save (WriteOut) the file to test.html. And we’re done. Now let’s leave the command line and head to your computer’s graphical file system (for Macs this is Finder, PCs this is My Computer). Navigate to the directory you created and double click test.html. Congratulations! You’ve created a website.

testhtml

 

Now chances are you’re going to want more there than just some text, so let’s go ahead and start building that. The first thing we’re going to want to add to the site is some HTML. The history of HTML is pretty interesting and I’m going to write about that at some point in time [and here is where that link will go]. HTML uses a tagging structure to tell browsers what kind of content is coming up. Learning the tags and using them appropriately isn’t a topic we’re going to cover here, but as you use them you’ll get a feel for what they’re doing. Google is your best friend when writing HTML and W3Schools is your second best friend. As I show you tags, I’ll do my best to explain what they do.

So let’s go back to our command line and start writing our HTML. In our project’s directory let’s start a new file called tutorial0.html (“nano tutorial0.html”). We’ll start by telling the browser what kind of HTML is coming:

<!DOCTYPE html>

<html></html>

The first tag let’s the browser know that HTML5 is following. The second tag begins the html and the third tag closes the second tag, it’s defining a container for the html so the browser knows everything between these two tags is HTML. Every webpage has two parts, a head and a body. The head contains information like the title of the page and is where you will most often be adding links to your stylesheets and JavaScript. The body is the content of the page and where you will put everything that a user will see. So let’s go ahead and add the head and the body to our webpage, your text should look like:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Now let’s add a title and some content:

<!DOCTYPE html>

<html>
<head>
<title>Tutorial 0</title>
</head>

<body>

<div id=”content”>Getting set up for development.</div>

</body>
</html>

You’ll note the div tag has some additional information. In your opening tags you can set properties for that tag. The properties available are pretty numerous so it’s usually not too hard to find something that suits your needs. In this instance, the id property gives us a way of referencing this element later on. Save your file (ctrl-o), and let’s go ahead and double-click this new file to make sure it looks like we expect it to.

tutorial0html

Our title is what appears in that tab, and our div wraps the text that we see displayed.

Sweet, we are on our way. I mentioned at the top that websites are composed of three languages. The next one we’re going to take a look at is CSS. CSS3 is the current specification and again W3Schools is your friend. CSS references elements in your HTML and applies styles to them. For some reason how this all worked seemed really obtuse to me when I was first trying to learn it, so don’t worry if it seems strange right now. CSS references elements by way of selectors, which is why we gave our div an id in the html.

We can add CSS right within our tutorial0.html document by adding a style tag. Typically it’s good practice to keep your HTML, CSS, and JavaScript files separate, but for today we’re just going to keep them all in one document. There are A LOT of styles you can apply with CSS, and admittedly I’m not as knowledgable of them as I probably should be, let’s just say that whatever you want to do, there’s probably a way to do it with CSS. So let’s go ahead and add our first style. We’ll be adding it to the head tag like so:

<head>
<style type="text/css">
#content {
text-decoration:underline;
}
</style>
<title>Tutorial 0</title>
</head>

And now our text is underlined. Go ahead and open the file again to make sure we were successful. What’s going on here is that the style tag has a type of “text/css” this tells the browser that the style tag contains text that the browser should treat like CSS. Inside the tag we begin with the # selector. This selector allows us to select the element in our HTML that has the id equivalent to what comes after #. In this case #content is selecting the element in our HTML with the id content, our div element that contains our text.

After the selector we have an open curly brace {. If you’re unfamiliar with curly braces, don’t worry you’ll be seeing a ton of them! They’re a very common coding syntax for denoting a section of some type of code. You can think of them just like an HTML tag, in this case the open curly brace is indicating the start of the style for the content element, and the close curly brace is closing this section just like the close tags. Within the braces finally lies our style. We use the text-decoration property and, by using a colon to indicate assignment, we set it to underline. This syntax will probably seem confusing if you’re not used to looking at code. Let me assure you that it gets easier over time.

Finally we want to add in the last part of our website toolkit, JavaScript. A snootier programmer than myself might be of the opinion that what we’ve been doing so far isn’t technically programming. I am not of that opinion, but it’s worth noting the differences between HTML, CSS, and JavaScript. HTML has an extraordinary amount of flexibility, but it doesn’t have any way of processing information. That’s where JavaScript comes in, your browser contains a JavaScript engine, this engine has the ability to process JavaScript code. It’s basically a virtual computer that sits in the browser ready to execute the JavaScript that you write. A quick check of any website you frequent should convince you that the web wouldn’t be what it is without some way of interacting with it. So let’s add some interaction to our website, and then I’ll talk some more about what’s going on.

We can add JavaScript to our document in a very similar way to how we added CSS. Instead of a style tag, however, we use a script tag. So in the head of your document add the following:

<script type="text/javascript">
var clicks = 0;

function doThis() {

var element = document.getElementById(“clickcounter”);

element.addEventListener(“click”, function() {

clicks = clicks + 1;
document.getElementById(“clickcounter”).innerHTML = “You have clicked ” + clicks + ” times.”;
});
}
</script>

You’ll notice the script tags that open and close our JavaScript code. The first line defines a variable called clicks and gives it the value 0. The keyword var is used whenever a new variable is declared, and the = sign is used to assign a value to this variable (contrast this with CSS which used a “:”). This variable is defined globally. This means that any function can make reference to clicks.

The next part uses the function keyword to declare a function named doThis. doThis is also a variable, just like clicks, and it is also globally available. Note the open curly brace that marks the beginning of the code for the function, just like in CSS. Next is the line

var element = document.getElementById("clickcounter");

What’s going on here is that there is a global variable document. This variable happens to be the variable that your site is contained in, so anything on the site is available via the document variable, and it is a JavaScript type called an object. The document object has a property called getElementById. This property happens to itself be a function, and when called with an argument, it will get the element in your HTML that has the id that matches the argument. So here we are declaring a new variable element that will be the object that represents our HTML element with the id “clickcounter”.

Next we have

element.addEventListener("click", function() {

clicks = clicks + 1;
document.getElementById(“clickcounter”).innerHTML = “You have clicked ” + clicks + ” times.”;
});

The element object has a property addEventListener which is itself a function that takes two arguments. The first is the event to listen for, in this case the click event. The second is a function which gets called whenever the event happens. I’m again using the function keyword, but this time there is no name. Anonymous functions like this are really common in JavaScript, and we’ll be using them a lot. Again we have the open curly brace.

Within the function we increment the global clicks variable by one. Next we get our clickcounter element again and this time we set its innerHTML property to update with the number of clicks. The code

"You have clicked " + clicks + " times."

Presents an interesting aside. clicks is a number, but “You have clicked ” and ” times” are what are called strings. The + symbol is called an operator and it’s one that’s very familiar to us in the case of numbers. Here it doesn’t mean addition, however, it means a different operator called concatenation. Concatenation is the operation of joining strings. For example “Hello ” + “world!” would become the single string “Hello world!”. When we use the + operator with a number and a string, the string wins out and the operation becomes concatenation instead of addition. In programming languages this is known as overloading an operator. The question as to how JavaScript knows to turn clicks into a string in this expression is non-trivial, but I’m going to save the discussion for another time since it’s a problem we’re going to run into with the vn51.

So what we have here is some code that will make it so that when you click the clickcounter, it will show you how many times you’ve clicked. We have two problems though, first we don’t have a clickcounter, and second there is nothing calling doThis. To remedy this, let’s add another div to our body

<div id="clickcounter">You have clicked 0 times.</div>

Then in our body tag lets utilize the onload property to call doThis. onload is a property for an element that allows you to tell the browser to call a specific function when the element loads. The body tag should now look like

<body onload="doThis()">

Finally we have our HTML, CSS, and JavaScript ready to go. Save the file and open it up again. This time you can click the clickcounter and watch the number of clicks go up. Your site should look like

tutorial0html-2

 

And I think that’s enough for today. Hopefully you have a little more sense of how websites work and the tools you need to get them to do what you want. Next time we’ll begin to use HTML, CSS, and JavaScript to start building the components of a computer. To begin we’ll be building logic gates. It’s going to be awesome. Don’t forget to comment and let me know you’re reading. Below is the entirety of tutorial0.html.

<!DOCTYPE html>

<html>
<head>
<script type=”text/javascript”>
var clicks = 0;

function doThis() {
var element = document.getElementById(“clickcounter”);

element.addEventListener(“click”, function() {
clicks = clicks + 1;
document.getElementById(“clickcounter”).innerHTML = “You have clicked “+clicks+” times.”;
});
}
</script>
<style type=”text/css”>
#content {
text-decoration:underline;
}
</style>
<title>Tutorial 0</title>
</head>

<body onload=”doThis()”>
<div id=”content”>Getting set up for development.</div>
<div id=”clickcounter”>You have clicked 0 times.</div>
</body>
</html>

 


Category: Uncategorized

About the Author


4 Responses to Tutorial 0 – Getting Set Up

  1. Michael says:

    This is going to be fun. I can’t wait to start building my computer!

  2. Ian says:

    Thank you Zach. I have been looking for something like this for years. Having trouble getting man open in terminal, it keeps asking me for a page, but since I don’t know what page I want, I keep guessing things like 0 or 1 or L5 to no avail.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>