JavaScript Magic

Beginner workshop

http://slides.com/rkotze/javascript-beginner

By: Richard Kotze

What

• Go though the basics with examples
• Lunch
• Building a simple photo slider

JavaScript

• Runs in the browser
• Version 5.1

• Designed to be easy to use

• Very flexible language

• Not JQuery

Basics Types

• String: "text in double or single quotes"
• Numbers: 101
• Boolean: true || false

Variables

• Store a value in memory
• Reusable value
• Example: string variable
  • var myString = "this is my string"

jsbin.com

Array

• List of values
• Example: ["a","b","c"]
• .length = number of values
• access values using an index
  • e.g. [0] == "a"
• Array index is zero based
  • Access the first value with 0

Operators

• Comparisons: ==, <, >, >=, <=
• Negate: !
• Joining:
  • && (and)
  • || (or)

IF

if(something == true){
    //execute this
}else{
    //or this
}

Assess if an expression is true

Operators part 2

• Maths: *  /  +  -
• Add and minus assignments
  • +=  -=
• Increment and decrement
  • myNumber++
  • myNumber--

Concatenate 

• Join two strings together

var joinTwoStrings = "string a" + " " + "string b";

Functions

• First class
• Reusable
• D.R.Y
• Pass parameters

Code academy course unit 2

https://www.codecademy.com/learn/javascript

Define a function

//name of function
function myFunctionName(parameter)
{
    //body of function
}

//name of function
var myFunctionName = function(parameter)
{
    //body of function
}

Two ways to define a function

Call a function

//name of function
function myFunctionName(parameter)
{
    //body of function
}

//Call the function

myFunctionName("parameter value");

Return value

//name of function
function add2(num)
{
    return num + 2;
}

//Call the function
console.log(add2(7));

For loop

• Loops are useful for repeating functionality
• Move through arrays of data
  • e.g. sum the total values of array

for (var i = 0; i < 3; i++) {
    sum = sum + i;
}

Building the photo gallery

Work in pairs

Flow of workshop:

1. I will demo example code for a step
2. You will try implement it
3. Andy and myself will help
4. I will show how to implement it

Building the photo gallery

Setup:

Get photos from,

http://lorempixel.com/

Create new "PhotoGallery.html" file

Open in Chrome browser

F12 for inspect tools

Use the console tab only

Add JavaScript to the page

<script type="text/javascript">
// the magical code goes here
</script>

A place to render

<div id="Photo">

</div>

<script type="text/javascript">
var Photo = document.getElementById('Photo');
Photo.innerHTML = "New photo gallery";
</script>

getElementById = used to find an element on the page.

Belongs to the document object

The DOM: Document Object Model

Used for accessing and updating the page

Add image to the page

var image = new Image();
image.src = "/path/to/image.jpg"

Photo.appendChild(image);

JavaScript only ;)

Change image part 1

var imageList = [
"http://lorempixel.com/400/400/cats/1",
"http://lorempixel.com/400/400/cats/2"]

Define a list of images 3 or more image URLs

Update the Photo.src to use the first image

Change image part 2

<button id="PhotoLeft">Left</button>

Add two buttons for left and right

We can use HTML for this.

Change image part 3

photoLeft.addEventListener("click", function(){
    //click functionality goes here
});

Add button click event listeners

Allows the program to know a button has been clicked.

Change image part 4

var photoPosition = 0;
photoLeft.addEventListener("click", function(){
    photoPosition++;
});

Increment or decrement a variable tracking the photo position

Use this photo position variable to change the photo.src

Success!!

We have made a working photo changer.

Testing and Code review

Lets manual test our photo gallery

Review the quality of our code

Test the boundaries

What happens if I click "right" button more times than there are photos in the array?

We don't need 'else'

Reducing logic flow makes it easier to read code.

Function power

Both left and right photos event listeners have repeating logic. Lets be D.R.Y.

Done

JavaScript 1 completed

Home work challenges

1. Add a caption for each image.
2. Add thumbnails and make them change the main image when clicked.