Introduction
I have met a lot of people who dreamed of becoming programmers, but did not have a clue as to how to get started. And that is just what I'm going to help you with, I'm going to get you started, even if you don't know anything about programming.And what's more, it will not cost you anything, as long as you have a computer and an internet connection, which seems to be the case, since you are reading this.
The tools for writing computer programs used to be expensive and not for just any hobby programmer to have. But that has changed. I used to say: 'If they just had given us some limited edition to learn on, we would be promoting their tools proffessionaly, once we start working as a programmers'.
And today there are not only very cheap tools, but also many excellent, free tools.
For a starter I will assume you have a Windows computer, but some of the exercises will be possible to do on a Linux system, like e.g. Ubuntu, and in that case you even have the operating system for free!
Most, if not all, Internet browsers today support javascript. Since you have a text editor, at least notepad, you can write a simple program to run in the browser.
Just for a starter, without beeing too technical, just enter or copy this into a text-file:
<html>
<head>
<script type="text/javascript">
function AlterLabel(Object) {
Object.textContent =
'You clicked me! How dare you?';
}
</script>
</head>
<body>
There is a label here below, I wouldn't dare
click it if I were you!<br />
<label id="MyLabel" onClick="AlterLabel(this);">
Don't click me!
</label>
</body>
</html>
...and
save it on your desktop naming it click.html. Note how the desktop icon
changes to show the icon of your default web browser.<head>
<script type="text/javascript">
function AlterLabel(Object) {
Object.textContent =
'You clicked me! How dare you?';
}
</script>
</head>
<body>
There is a label here below, I wouldn't dare
click it if I were you!<br />
<label id="MyLabel" onClick="AlterLabel(this);">
Don't click me!
</label>
</body>
</html>
Double-click it an try it out. Some browsers would prohibit use of javascript, but you should be able to override that in it's settings.
This is what you vould see:
There is a label here below, I wouldn't dare
click it if I were you!
Note that I have all this published here on mrmartin.eu from where you may copy any code samples. Just select from the menu.
Let's assume you know nothing about html and javascript, and let's take a closer look at the above code snippet.
A web page normally has some html 'tags' that is there just to set format and stuff. There is nothing of that above. Actually there are only a few parts you normally should put in there in order to create a web page. It is standard to 'wrap' the entire content inside an html block, i.e. between <html> and </html>. Note that there is normally one starting tag and one ending tag and that the ending tag differs from the starting tag in that sense that the end tag name, in this case 'html' is prefixed with a slash character.
Inside the html tag block we have two sub-blocks, a head block and a body block. The head block contains a script block while the body block contains a text and a label block. There is also a short tag that ends itself, a break tag, <br /> which has the function to insert a line break.
These are the tags in our page:
<html>
<head>
<script></script>
</head>
<body>
<br />
<label></label>
</body>
</html>
You will not see those
tags when viewing the page. Actually, most browsers would work without
them in a simple page that just displays a text that has no formatting
at all.<head>
<script></script>
</head>
<body>
<br />
<label></label>
</body>
</html>
However, the <br /> tag is needed to give us a line break, and in our sample, and in most actual web pages, we like to have a <head> section to put stuff in that is not to be displayed, and a <body> section to put text and images in that are to be displayed to the viewer.
The <script> tag is there to tell the browser that here's where we will put in some scripting code. Scripting code is just like program code, and we will discuss the difference later.
There are many different browsers available, and they are designed to more or less conform to a set of rules written mostly by an organization named IETF, Internet Engineering Task Force and those rules are available at www.w3.org where the rules are listed in a series of RFC, Request For Comments.
Those rules are suggested in RFC:s and browser designers tend to follow them in order to have their browsers working well. However, some rules are in the form 'should' rather than 'must' so there are differences between browsers.
In order to make sure the script code works, I have added an attribute to the script tag telling the browser that I am using javascript.
Inside the script tag I have written a function. A function is a chunk of program code. It is written in the language javascript, but the browser will compile it and produce a block of machine-code, a bunch of ones and zeroes that a microprocessor understands.
The label tag has also been supplied with an attribute. In this case it is an event handler. The browser knows that if you add an attribute called 'onClick' it is supposed to add an event handler that makes it run our block of code declared in the script tag when the user clicks the label. Note that the onClick event is given the name of the function, that's why the browser knows what function to call, and that it should supply itself (this) as an argument for the function.
The function uses that argument as a handle to the label to alter another attribute of the label, it's inner text. So, when you click the label, the text changes.
You can get back to this sample later, if you like, and there are also some other example you can check out using the menu 'Code samples' at the top of this page.
This was just a teaser, but maybe it wasn't all that exciting. There are much more fun stuff to do, so let's move on.
In this course, we are going to work with some serious tool from Microsoft. They are available in free versions that you can download for private use. The versions and the download links changes from time to time, so the links I give you in the menu might not be accurate. Maybe it is better to google for the latest downloads. I am using Visual Studio 2013 and SQL Server 2014, but feel free to select other versions. Just note that some details may differ between my lessons and what you see in your tools.
My suggestion is that you download and install the following products from msdn:
Microsoft Visual Studio 2013 for the Web
Microsoft Visual Studio 2013 for Desktop
Microsoft SQL Server with tools
There are also a Microsoft Visual Studio 2013 for Windows, which I will not use in this course. It is for the tablet style programs.
Note that you need the tools for SQL Server. Those include the Management Studio which is an excellent tool to create, browse and maintain your databases and database objects.
When you have installed at least Visual Studio for Desktop, you are ready for the next lesson.