Preparation

First do the activities on your own to become familiar with them.

To complete this session you should know a little bit about HTML the language used to show the contents of web pages. Have a look at the resources below and think about ways of integrating this into your session if you learners have not come across HTML before.

Introduction

A short introduction about Javascript and creating web pages.

In this session we will use variables in Javascript to output one part of the web page after the other. This will teach us about two areas:

• What HTML we need to create simple web pages
• How we can create a simple program / algorithm (a series of instructions) with Javascript

 

Hopefully you are good at following instructions because there is a mission to save a strawberry that needs people to pay careful attention. Some instructions are tricky and you have to follow the steps exactly and in the right order. Writing web pages is a lot like this.

Watch the video on this page to find out more about sequences in text-code (like Javascript). If you want to you can read the three pages there later and try out the quiz (but you don't need to do that in this session)

 

Prepare to be a-Mazed

This activity is good to show you how to make a sequence of instructions.

 

Blockly is a game which uses block coding to show you how to create a sequence of instructions. When you solve the puzzle it shows you what the instructions would look like in Javascript.

HTML catch up - Research and Physical activities on HTML

To complete this session you should know a little bit about HTML the language used to show the contents of web pages. You may have done another session about this. If not here are some activities and online tutorials which can help you get started.

Related Physical Activities

 

If you have a fun group to work with or if they need something to help them get lively you can use some physical activities to explore the basic make up of an HTML page. Try the ones below:

Remix Activity - Use Javascript to create a simple about you page

If you are in a workshop, split learners into groups of 2 or individuals if there enough computers. We will use the console to find out more about how Javascript can write to our web pages.

 

Follow these instructions:

Experimental Activity - Use the console to create a page with Javascript

We are going to write to a simple web page in an unusual way using the console. Follow the instructions below.

If there are messages in the console you can click on Clear to get rid of them.

 

Write the following line into the console and press ENTER key.

document.write("<h1>A little about Me</h1>") 

You should see the result. You have taken over the browser and are writing to the page using a Javascript function.

Function is a new word for us. In a nutshell a function is a short cut for doing something in Javascript. This function writes the value or variable between the () brackets to the web page. In coding we call the web page a document.

Let's learn more about hacking and taking control over our browser using Javascript.

Exploring: Create your own series of instructions in a web page

Computer programming is all about creating a list of instructions that you follow exactly. We call this list of instructions a sequence or an algorithm. When we put these sequences together they form a program. We need these skills to create our own web pages.

Thimble is a tool that lets you create web pages online. You type in the code on the left and you can see the result as a web page on the right. We used it when we remixed the About Me page in the above activity.

Now it is time to create your own page from scratch. If you are not sure what information to share you could include some of the following:

• Your name:
• Your age:
• Where you live:
• A picture of your town or favourite person:

How to create a sequence using variables

 

The following activity creates a web page using Javascript variables with information about you.

To make a sequence of HTML statement we will create a list of variables at the top of the page. And then make a list of commands using the document.write() function to write to our web page. In coding language we say we declare the value of variables first and call the document.write() functions using the variables later.

In real life you probably wouldn't create such a simple web page using javascript but it is a good exploring task for us to do this before moving on to more complicated examples.

To start with keep it very simple. A first step might look like this:

Keep building this up adding different variables and write functions to your page. Use this as a way to explore different HTML tags from our HTML cheat sheet

How to add images

 

To add images to your page you need to add code similar to the following to your page.

<img src="http://digitalducks.org/chips.png" width = "300">

IMG stands for Image and SRC is URL source. It is the source of the image on the internet. When you look for images you can copy the image URL and paste it into your code. When you see an image you want you can right click it and choose Copy Image Location or Copy Image URL.

Be careful: If you are using Google Images, if what you copy and paste is very long and doesn't end with a jpg, gif or png then something is not right. When you are previewing images, click on View Image and try again.

Also be careful about quotation marks. We tell javascript that our variable is a String by putting it in quotion marks. The danger is that if there are also quotation marks in our string that we'll make an error. To avoid this we do a thing called escaping quotation marks that we want to keep inside our string and we do this by putting a \ infront of them. See the following image for an example.

 

Wrapping up -

We have learned the following things.