JavaScript and HTML What is programming Setting up an HTML page Use of Variables in JavaScript...
27
ript and HTML s programming g up an HTML page Variables in JavaScript ng the building blocks of a universe in JavaScript and HTML5 Canvas ng a square, changing its colour, width, height, and position on x and y axis ucing key terms: Initialisation of Variables; Incrementation ript Prompt: Getting user input, using it to change variables Introduction to Programming in HTML & JavaScript Part 1 *Purchase the whole series and the most comprehensive computer science package for schools from www.teachingcomputing.com
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
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
www.teachingcomputing.comwww.teachingcomputing.com
Slide 2
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 3 - 9 *Html
file resource: Part 10 - 16 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)
Slide 3
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 Babbages 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 worlds first computer programmer! The language ADA was named
after her!
Slide 4
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
Slide 5
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!
Slide 6
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.
Slide 7
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
Slide 8
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
Slide 9
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 lets 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
Slide 10
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!
Slide 11
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);
Slide 12
Video Demo with solution
Slide 13
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
Slide 14
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
Slide 15
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
Slide 16
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
Slide 17
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
Slide 18
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
Slide 19
Solution
Slide 20
Consolidate your learning
Slide 21
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
Slide 22
Why do variables need to be initialised? Your answer here What
is meant by incrementation? Your answer here
Slide 23
Fill in the blanks in the appropriate label. X = y = w = z = ?
?
Slide 24
Google the term GetElementById Your answer here Write in your
own words what it means.
Slide 25
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
Slide 26
Suggested Resources/websites www.w3schools.com
www.homeandlearn.co.uk www.thecodeplayer.com www.stackoverflow.com
(ask a question and see if it has been
answered)www.stackoverflow.com www.teachingcomputing.com (teaching
resources)www.teachingcomputing.com
Slide 27
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
