Introduction to programming
There's a lot of code. Everywhere
A huge amount of software exists in the world, controlling the systems that enrich our lives. Some code is really obvious, such as operating systems like Windows, web sites, and video games. Some is not so obvious, for example the embedded code that controls our microwave, our thermostat, or our car engine.
What are we doing when we write code?
Compiler: Some languages also need a compiler to run: an application that turns code into a package that can then be run to create an output. Flash is an example of a compiled language — you create some Flash source code, then compile it into a Flash Movie. A web browser with the Flash Player plugin installed can then display this Flash movie, which is its own standalone little block; the source code is no longer readable.
Let's now look at a Flash example to see how this works. Open up my flash example, which is an old advertising banner for my band. If you try to "View source" on the banner, you won't be able to: the code is compiled and locked away.
Interpreted languages are often easier to learn than compiled languages, because with interpreted languages you can just open up the source code and see how it works. You can't do that with compiled languages because the language is converted into a non-human readable form when compiled.
A quick course in Web
The web works like so: when you type a web address into your browser, it sends a request to the server that the web site is stored on. The server then sends the files that comprise the web page back to the web browser, which is on the client, aka your computer.
- Server-side languages are languages that are processed on the server before the result is then sent to the client and displayed. Example: PHP.
Exercise: server-side vs. client-side
To illustrate this a bit better, let's look at a basic HTML example, and compare it to a basic PHP example. If we look at the HTML example, we can see that the source code is the same as the code after it has been processed. The PHP however is different on the server to how it is when it has been run in the browser. This is because the PHP is processed on the server and converted to some HTML, whihc is then sent to the browser.
The HTML, on both the client and server:
<h1>This is just simple HTML</h1>
The PHP on the server:
<h1>This is PHP: the current date and time is <?php print strftime('%c');?></h1>
The PHP on the client:
<h1>This is PHP: the current date and time is Sat Jan 18 20:17:27 2014 </h1>
Server-side and client languages are no better than each other; they have different uses on the Web. Client-side is for displaying and interacting with content; server-side is for storing data, and providing the right data to the client, based on instructions it is given. For example, when you look at Amazon, you are not looking at a different page every time you look at a product. You are looking at the same page, but with different information inserted into it. when you search for a product using the interface displayed to you on the client-side, a query is sent to a database on the server-side, and server-side technologies find and retrieve the correct data that matches your search, and sends it back to the client to be displayed on the page.
In this course we'll be typing code into a web site called JSBin - follow the link now. This is a simulation of a web site, all conveniently stored in the same web page, so we can easily add different types of code and see how they will react together.
The console pane is used for checking and debugging your code. Don't worry too much about this for now.
When you create a new demo in JSBin, it gives your code a unique web address that you can give to other people to check out your demo. Try my example, at http://jsbin.com/ikuber/2/edit. You can then click the JSBin button in the top left corner, and choose to clone the example, so you can make edits to your own copy, and even download it as a working HTML page.
This work is licensed under a Creative Commons Attribution 4.0 International License. Share it, make it better, use it for good.