Programming for beginners

1. Intro
2. Variables
3. Conditions & loops
4. Document Object Model (DOM)
5. <canvas>
6. Functions
7. Events

Code is just another language

• Human language = talk to humans
• Programming = writing code
• Code = language to talk to a computer
• JavaScript = code that talks to a web browser

JavaScript is interpreted

• JavaScript engine inside browser
• Browser turns code into web pages/apps

How the Web works

1. Browser (client) requests web page
2. Request sent to server
3. Server sends code to browser
4. Browser turns code into web pages/apps

Server-side vs client-side

• Server-side code: runs on server, then result is sent to client
• Client-side code: code sent to client, and runs on client

HTML

• Elements: e.g. <h1>Example heading</h1>
• Content structure and meaning

CSS

• Rules: e.g. h1 { color: red; }
• Styling content

JavaScript

• Objects: e.g. console.log('JavaScript test!');
• Programming for the Web
• Dynamic functionality

Browser developer tools

• Debugging and testing
• Ctrl + Shift + I (Cmd + Opt + I on Mac OSX, F12 on Internet Explorer)
• Run JavaScript in console

Variables

Run these in the browser console

• Containers for values
• Test — myVariable (undefined)
• Create — var myVariable = 'Chris'
• Update — myVariable = 'Bob'
• Test again — myVariable ('Bob')

Common variable data types

• Integer, no quotes, e.g. 25
• String, in quotes, e.g. "Chris". "25" is still a string
• Boolean — true or false
• Array/Object — anything else

Syntax rules

• var to declare variable
• Variable naming rules: no space, punctuation or reserved words/characters
• JavaScript is case sensitive: myVariable is not myvariable
• Lines end with a semi-colon (;)
• Code block: { ... }

Operators

• + — addition/concatenation
• - — subtraction
• / — division
• * — multiplication
• % — modulo

Operators

• = — assignment
• === — strict equality/identity
• || — logical OR
• && — logical AND
• <, >, <=, => — less than, greater than, less than or equal to, greater than or equal to
• !, !== — logical NOT, not equal to

Operator precedence

• 8 + 4 / 3 * 4 = 13.33333333333
• Division/multiplication, then addition/subtraction
• Source order if precedence is the same
• Force order using brackets
• (8 + 4) / (3 * 4) = 1

Conditional code

• Allows different code to run depending on a condition
• If expression is true, run code 1, else run code 2

if ... else pseudocode

			if(condition === true) {
			  // run expression 1
			} else {
			  // run expression 2
			}
		

if ... else example

			var myTown = prompt('Enter your home town or city');
			if(myTown === 'Manchester') {
			  alert('Is it still raining in Manchester?');
			} else {
			  alert('I don\'t know your home town very well');
			}
		

if ... else if ... else example

			if(myTown === 'Manchester') {
			  alert('Is it still raining in Manchester?');
			} else if(myTown === 'Barcelona') {
			  alert("You have beautiful architecture, and sun");
			} else {
			  alert('I don\'t know your home town very well');
			}
		

logical OR and AND

			if(myTown === "Manchester" || myTown === "Bradford") {
			  alert("It is rainy in those Northern towns.");
			}
			 
			if(myTown === "Manchester" && mySeason === "Summer") {
			  alert("Manchester must be enjoying some warmer weather.");
			}
		

Nesting if ... else

			if(condition1 === true) {
			  if(condition2 === true) {
			    // run expression 1 {
			  }
			} else {
			  // run expression 2
			}
		

Loops

• Run the same code several times
• With updated variables each time
• for loops are the most common

For loop pseudocode

			for(i = starting value; exit-condition ; iterator) {
			  // run code
			}
		

For loop features

• i — variable
• starting value — what i begins at
• exit-condition — what value i has to be for the loop to keep running
• iterator — how i changes each time the loop is run
• Run code — the code run each time the loop runs

For loop example

			for(i = 0; i <= 20; i++) {
			  console.log(i);
			}
		

JavaScript and CSS accessing the DOM

1. JS/CSS "walk" up and down the tree
2. Find elements they are interested in
3. Do stuff to those elements

This is how many useful things are done on a web page

Example: JavaScript updating element contents

<h1 class="myHeading">My heading</h1>

			var myH1 = document.querySelector('.myHeading');
			myH1.innerHTML = "My updated heading";
		

<canvas> is

1. A scriptable HTML element
2. Create images using JavaScript
3. Can then animate them, etc.

Create a canvas + get a context

<canvas width="500" height="500"> </canvas>

			var myCanvas = document.querySelector('canvas');
			var myContext = myCanvas.getContext('2d');
		

Draw squares

			myContext.fillStyle = 'rgba(0,0,255,0.5)';
			myContext.fillRect(0,0,200,200);
			 
			myContext.strokeStyle = 'rgba(0,255,0,0.5)';
			myContext.lineWidth = 1;
			myContext.strokeRect(200,200,50,50);
		

Canvas loops

			myContext.fillStyle = 'rgba(0,0,255,0.15)';
			for(i = 0; i <= 50; i++) {
			  myContext.fillRect(i,i,25+i,25+i);
			}
		

More loop ideas

• Bigger each time — myContext.fillRect((i*6),(i*4),25+(i*10),25+(i*10));
• Bigger loop iterator — i+=5
• Vary colours — myContext.fillStyle = 'rgba(0,0,' + (150+(i*6)) + ',0.15)';
• Random values — Math.floor(Math.random()*200)
• Rotate each time — myContext.rotate(0.025);

More loop ideas

• Sine wave — myContext.fillRect((i*5),(250+(Math.sin(i/6))*50),10,10);
• Circles:

          myContext.beginPath();
          myContext.arc((i*5),(250+(Math.sin(i/6))*50),10,0,Math.PI*2,true);
          myContext.fill();
        

Functions are...

• ...reusable blocks of code
• Write once, call multiple times
• JavaScript has many built-in functions
• You can also write your own

Sample function

          function random10() {
            var randomNumber = Math.floor(Math.random() * 10) + 1;
            return randomNumber;
          }
           
          random10(); // call function
        

Function with argument

          function random(input) {
            var randomResult = Math.floor(Math.random() * input) + 1;
            return randomResult;
          }
           
          random(250); // call function
        

Canvas function

          function sineWave(number,y) {
            for(i=0;i<=number;i++) {
              myContext.fillStyle = 'rgba(0,0,'
               + (Math.floor(Math.random()*200)) + ',0.5)';
              myContext.fillRect((i*5),(y+(Math.sin(i/6))*50),10,10);
            }
          }
        

Events are...

• ...how JavaScript responds to user interactions
• Such as clicking a button
• Or moving the mouse pointer
• Event listeners listen out for things happening

Sample event usage (anonymous function)

<button class="welcome">Click me!</button>

          var button = document.querySelector('.welcome');
           
          button.onclick = function() {
            alert("Ouch, that hurt!");
          }
        

Sample event usage (named function)

          var button = document.querySelector('.welcome');
           
          function clicky() {
            alert("Ouch, that hurt!");
          }
           
          button.onclick = clicky;
        

Credits

• "Matrix" cover pic by David Asch