JavaScript Intro

(Enzo Mari remix)

​

https://enzomari.com/

Website by Jon Lucas

What's happening on this website?

What's happening on this website?

• ​

• When the page loads, I see one image with a caption.
• Everytime I reload the page, I see a different image.
• When I click on an image, a second image with caption appears on the page, to the left of the first image.
• Every time I click, a new image appears at the top-left of the page. The other images shift over in order.
• Each image is given a max-width within a range

Programming is all about breaking behavior down into small individual steps, and repeatable patterns.

• When the page loads, I see one image with a caption.

​

• When the page loads, I see one image with a caption.
• Everytime I reload the page, I see a different image.

​

Batch of images

Function that randomly chooses one

Function that displays that image

Batch of images

JavaScript array defining a batch of images

var images = [

"<img src='images/horse_1.jpg'>",

"<img src='images/horse_2.jpg'>",

"<img src='images/horse_3.jpg'>",

"<img src='images/horse_4.jpg'>",

"<img src='images/horse_5.jpg'>",

"<img src='images/horse_6.jpg'>",

"<img src='images/horse_7.jpg'>",

"<img src='images/horse_8.jpg'>",

]

​

Function that randomly chooses one image

JavaScript function that returns a random image.

It does this by supplying a random number between 0 and the number of images in my batch, and then using that number to pick an image.

JavaScript methods - built-in functionality for simple tasks

function random_image() {

return Math.floor(Math.random() * images.length);

}

​

Function that displays that image

JavaScript function that adds the chosen image (here called "new_image")� to the page.

function add_image() {

var new_image = document.createElement('div');

new_image.innerHTML = images[random_image()];

document.body.prepend(new_image);

}

​

add_image();

Demo

• When the page loads, I see one image with a caption.
• Everytime I reload the page, I see a different image.
• When I click on an image, a second image with caption appears on the page, to the left of the first image.

• When the page loads, I see one image with a caption.
• Everytime I reload the page, I see a different image.
• When I click on an image, a second image with caption appears on the page, to the left of the first image.

Detect a click

Repeat all the steps we just wrote out.

Detect a click

A JS method that makes any image I'm adding to the page sensitive to clicks.

new_image.addEventListener('click', add_image);

• When the page loads, I see one image with a caption.
• Everytime I reload the page, I see a different image.
• When I click on an image, a second image with caption appears on the page, to the left of the first image.
• Each image is given a max-width within a range

​

Detect a click

Repeat all the steps we just wrote out.

Add some complexity �to this step

• When the page loads, I see one image with a caption.
• Everytime I reload the page, I see a different image.
• When I click on an image, a second image with caption appears on the page, to the left of the first image.
• Each image is given a max-width within a range

​

Get a random width

Apply that width to the image

Get a random width

This returns a number between 100 and 300, and converts it to a pixel value like "256px"

var random_width = Math.floor(Math.random() * (500 - 50 + 1) + 50);

var random_width_pixels = random_width + "px";

​

This assigns my randomly-generated width to the new image I'm adding to the page.

Apply it with CSS to the image

JavaScript method used for manipulating CSS

new_image.style.width = random_width_pixels;

Download sample code

�For next week: Make some edits to this demo code. �See following pages for some examples.

Some ways to edit this code....

• Edit the batch of images

Replace image path with your own images.

Replace whole HTML element with a different element.

You could add a lot more images to your set.

var images = [

"<img src='images/horse_1.jpg'>",

"<img src='images/horse_2.jpg'>",

"<img src='images/horse_3.jpg'>",

"<img src='images/horse_4.jpg'>",

"<img src='images/horse_5.jpg'>",

"<img src='images/horse_6.jpg'>",

"<img src='images/horse_7.jpg'>",

"<img src='images/horse_8.jpg'>",

]

​

• Edit the min/max size of the images

300 stands for the MAX value, and 100 stands for the MIN value. Change those numbers here to get a different range.

Change the CSS unit used. For example you could size your images in "em" or "%" or "vw"

var random_width = Math.floor(Math.random() * (300 - 100 + 1) + 100);

​

var random_width_pixels = random_width + "px";

​

• Change how the image is added to the page.

prepend is a JS method that adds the element to the beginning of the body.

Try replacing prepend with:

append

replaceChildren

​

​

function add_image() {

var new_image = document.createElement('div');

new_image.innerHTML = images[random_image()];

document.body.prepend(new_image);

}

Edit the HTML and CSS of the page...

• Change the layout of the page using CSS
• Instead of the images appearing in a row, could they appear in a pile?
• Add hover states or animations with CSS
• Add additional content with HTML.
• You'll see that there's already a little credit added to the site. You could delete that and replace it with your own content.