Introduction to Programming

by SwampFall

HTML

<h1 id="hOutput1">1. Output</h1>
<p class="instruction" id="pOutput1">
  
</p>
<p class="instruction" id="pDataTypes1">
  In a program we can work with different kinds of data, such as boolean <span class="code">(true,&nbsp;false)</span>, integers <span class="code">(-5,&nbsp;0,&nbsp;8,...)</span>, floating point numbers <span class="code">(3.141592,&nbsp;1.618034,...)</span>, characters <span class="code">('a',&nbsp;'9',...)</span>, strings <span class="code">("Some&nbsp;text",&nbsp;"I'm&nbsp;23",...)</span>, etc. There are many other types which we'll discuss when we need them.<br>
  
</p>
<p class="instruction" id="pMakeVar1">
  Programming starts getting interesting when you can do things with your data, such as visualizing, storing, changing,... Your computer has a lot of storage space which can be used by your program. You can visualize this like a little box that holds a value, as you can see at the moment it's still empty. 
</p>
<div id="imgStorage"></div>
<p class="instruction" id="pMakeVar2">
To fill the box we'll need to store some data. A place to store data is commonly refered to as a variable, which we'll use from now on. To make a variable in JavaScript the <span class="code purple">var</span> keyword is used. Because storing data is useless if you don't do something with it afterwards we need a way to access it later. This is done by giving it a <span class="code orange">name</span> that describes what the variable is used for. Finally we need to give the variable a value and that's done with a simple <span class="code">= <span class="red">value</span></span>. So the syntax in JavaScript is: <span class="code"><span class="purple">var</span>&nbsp;<span class="orange">name</span>&nbsp;=&nbsp;<span class="red">5</span>;
  </span>
</p>
<p class="instruction" id="pDisplayVar1">
  
</p>

CSS

body {
  padding: 5px;
  font-family: verdana;
  background: white;
}

h1 {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 10px;
}

p {
  text-align: justify;
  text-justify: inter-word;
  margin-bottom: 10px;
}

.code {
  background: #f3f5f6;
  font-family: Lucida Console;
  padding: 2px;
}
.purple { color: #a151d2; }
.orange { color: #f18c16; }
.red { color: #ED5C65; }