JavaScript and HTML What is programming Setting up an HTML page Use of Variables in JavaScript Creating the building blocks of a universe in JavaScript and HTML5 Canvas Creating a square, changing its colour, width, height, and position on x and y axis Introducing key terms: Initialisation of Variables; Incrementation JavaScript Prompt: Getting user input, using it to change variables An Introduction to Programming in HTML & JavaScript Part 1 *Purchase the whole series and the most comprehensive computer science package for schools from

Part 1: Programming, Variables, Intro: HTML, JavaScript, values of variables, User input, objects, incrementation, initialisation, the importance of Sequence An introduction to Programing: HTML and JavaScript Part 2: Use of functions, modular programming, changing colours of objects, calling functions, click event, clear function (clear screen) Intro to selection (if statement) Part 3: Use of arrays, timer, automatic changing of coloured squares, iteration(for loop), automated traffic light squares demo *Html file resource: Part 1 and 2 *Html file resource: Part *Html file resource: Part Part 4: Creation of circles (canvas object in HTML Canvas). Creation and use of Image Arrays. Recap on: Variables, Sequence, Selection, Iteration (introducing while loops), Functions *Html file resource: Part 16 + (Teacher use only if controlled assessment exemplar)

Did you know? This lovely lady on the right was the daughter of Lord Byron (a famous romantic poet) She is best known for her work on Charles Babbage’s analytical engine Her surviving notes on the engines include an algorithm which some say can be considered the first computer program! Many historians regard Ada Lovelace to be the world’s first computer programmer! The language ADA was named after her!

Did you know? A software bug is an error or flaw in a computer program. As a programmer, you are going to come up a lot of these and it is important that you are patient and persevere! The first ever bug was an actual bug! Operators traced an error in the Mark II to a moth trapped in a relay, coining the term bug. This bug was carefully removed and taped to the log book Stemming from this we now call glitches in a computer a bug. A page from the Harvard Mark IIelectromechanical computer's log, featuring a dead moth that was removed from the deviceHarvard Mark II

What is Programming? Programming is basically the process of creating and implementing various sets of instructions to enable a computer to do a certain task. It is also a creative act of Design and Discovery! Programming is discovering a set of rules with real world effects and understanding the interaction of these rules with objects In essence, a program is just a … SET OF INSTRUCTIONS THAT TELLS THE COMPUTER WHAT TO DO!

What is HTML and What is JavaScript? HTML stands for Hypertext Mark up language. Standard mark up language used to make webpages It is written in the form of HTML elements consisting of tags enclosed in angle brackets e.g. HTML elements form the building blocks of all websites JavaScript is NOT the same thing as Java. It is a dynamic programing language* It is commonly used as part of web browsers and allows for interactivity on web pages. It allows for client-side scripts to interact with the user, control the browser and alter the document content that is displayed. Server side implementations are also possible.

Did you know (a few facts about JavaScript) Eich (on the right) was commissioned to create a language that resembled Java – but for a web browser. The first version of JavaScript was completed in 10 days! He is credited as the creator of the JavaScript programming language and also co-founded the Mozilla project He did a bachelors degree in Maths and Computer Science at Santa Clara University and a Masters from the University of Illinois

Your first HTML and JavaScript program Watch the video on the right and use the code and create your very own first interactive webpage in HTML and JavaScript

What if you wanted to create a world? A world (by us at least!) cannot be created in a day. Coding takes time! To create a world, you would have to start from scratch. Minecraft provides an interesting example for us to start with. Note that everything in Minecraft is effectively some manifestation of a rectangle/square. So let’s start there: By creating a single square in HTML and JavaScript. Move on to the next slide to watch the video and create your very own building block

The creation of a square in JavaScript A few notes before you get started. This variable refers o the position of the object on the X axis. If was 30, it would move along to the right. This variable refers o the position of the object on the Y axis. If was 30, it would move up (on the vertical axis) This refers to the width of the rectangle. Increasing this variable will increase the horizontal width This refers to the height of the object. Increasing this variable will increase the height of the rectangle. Fill colour!

Creating a square (HTML and JavaScript) Instructions 1. Open Dreamweaver 2. Open a New HTML doc 3. Click “Split” and “Live” view 4. Cut and paste the code below Challenge 1. See if you can change the shape of the square to create a large rectangle 2. Revert to original square. Create 3 more squares (vertical line going down) *Video Demo with solutions/answers on next slide Javascript and HTML5 Canvas Page Your browser does not support the HTML5 canvas tag. var w = myCanvas.width; var h = myCanvas.height; var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#black"; ctx.fillRect(20,20,23,23);

Video Demo – with solution

Introducing Variables A Variable can be thought of as a block of memory that stores a value. Variables can hold text, numbers, images or Boolean values Variables need to be declared, then given a starting value (initialised) Declaring the variable x Initialising the variable x – giving it the starting value of 20

1.Add the following to your code Creating an object; Declaring Variables Instructions Challenge 1: Change these to reflect the variables that have been declared. Challenge 2: Change the width and height of the object to HALF THE SIZE of the Canvas height and width

Solution + Further notes Experiment with changing the values of the variables You could add: y = x ; What do you think this would do? You could add: y = x ; What do you think this would do? It would reassign the value of x to y. You could also add: y = y + 1 (this is called INCREMENTATION) It will add ONE to the existing value of y You could also add: y = y + 1 (this is called INCREMENTATION) It will add ONE to the existing value of y

User input Challenge Copy the code below and get it to work. The user must input a specified number and it should produce a rectangle (with specified dimensions) on the screen. Why does it work? Hint 1: Declare and prompt input for height as well. Hint 2: Check the sequence of the code Copy the code below and get it to work. The user must input a specified number and it should produce a rectangle (with specified dimensions) on the screen. Why does it work? Hint 1: Declare and prompt input for height as well. Hint 2: Check the sequence of the code Javascript and HTML5 Canvas Page Your browser does not support the HTML5 canvas tag. var canvaswidth = myCanvas.width; var canvasheight = myCanvas.height; var c=document.getElementById("myCanvas"); var x =50; var y =50; var w =0; var h =0; var ctx=c.getContext("2d"); ctx.fillStyle="#black"; ctx.fillRect(x,y,w,h); var w = prompt("Enter width of rectangle:", "this will change the variable w"); Video Demo of Solution: next slide

Solution + Further notes Hint 1: Declare and prompt input for height as well. Hint 2: Check the sequence of the code Watch the video on the right Hint 1: Declare and prompt input for height as well. Hint 2: Check the sequence of the code Watch the video on the right

Final Challenge Copy the following code and get it to do the following: 1.Display a black rectangle on the screen 2.Ask the user for input (colour): 3.The rectangle will change to the colour of the input specified by the user. Copy the following code and get it to do the following: 1.Display a black rectangle on the screen 2.Ask the user for input (colour): 3.The rectangle will change to the colour of the input specified by the user. Javascript and HTML5 Canvas Page Your browser does not support the HTML5 canvas tag. var canvaswidth = myCanvas.width; var canvasheight = myCanvas.height; var c=document.getElementById("myCanvas"); var x =50; var y =50; //hint: You need to declare a variable (colour) and get the user to input a colour of their choice -use the prompt command var ctx=c.getContext("2d"); //hint: black needs to be changed to a variable colour ctx.fillStyle="black"; ctx.fillRect(x,y,60,60); Solution: next slide

Solution

Consolidate your learning

What is a Variable? Your answer here Predict the output (by tracing the values of the variables below) X = 3 Y = 5 X = X + Y Y = Y + 1 Z = X + Y Output Z Your answer here

Why do variables need to be initialised? Your answer here What is meant by “incrementation”? Your answer here

Fill in the blanks in the appropriate label. X = y = w = z = ? ?

Google the term “GetElementById” Your answer here Write in your own words what it means.

Why is the sequence of a program important? Your answer here Variables can be of different data types: Research the different Variable data types Your research here

Suggested Resources/websites (ask a question and see if it has been answered) (teaching resources)

Next PowerPoint in this series: Introducing Functions (Modular Programming) Change the colour of squares ‘Calling’ functions Doing something on a mouse-click (button click = display squares) Introducing Functions (Modular Programming) Change the colour of squares ‘Calling’ functions Doing something on a mouse-click (button click = display squares) Part 2: Use of functions, modular programming, changing colours of objects, calling functions, click event, clear function (clear screen) Intro to selection (if statement) *Html file resource: Part 3 - 9