JavaScript and HTML PowerPoint Presentation, PPT

PowerPoint JavaScript and HTML PowerPoint Presentation, PPT - DocSlides Slideshow

Slide1JavaScript and HTMLWhat is programmingSetting up an HTML pageUse of Variables in JavaScriptCreating the building blocks of a universe in JavaScript and HTML5 CanvasCreat

Likes 9
Views 43

Download this presentation

JavaScript and HTML PowerPoint Presentation, PPT - DocSlides

Click below link (As may be) to download this presentation.

Download Note - The PPT/PDF document "JavaScript and HTML PowerPoint Presentat..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Presentations text content in JavaScript and HTML PowerPoint Presentation, PPT - DocSlides

JavaScript and HTML
What is programmingSetting up an HTML pageUse of Variables in JavaScriptCreating the building blocks of a universe in JavaScript and HTML5 CanvasCreating a square, changing its colour, width, height, and position on x and y axisIntroducing key terms: Initialisation of Variables; IncrementationJavaScript 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.com
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)
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
II
electromechanical
computer's log, featuring a dead moth that was removed from the device
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>
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
0
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!
1
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
<html><body>Javascript and HTML5 Canvas Page <br></body><canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>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); </script></html>
2
Video Demo – with solution
3
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
4
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
5
Solution + Further notes
Experiment with changing the values of the variables
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
6
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
<html><body>Javascript and HTML5 Canvas Page <br></body><canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>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");</script></html>
Video Demo of Solution: next slide
7
Solution + Further notes
Hint 1: Declare and prompt input for height as well. Hint 2: Check the sequence of the codeWatch the video on the right
8
Final Challenge
Copy the following code and get it to do the following:Display a black rectangle on the screenAsk the user for input (colour):The rectangle will change to the colour of the input specified by the user.
<html><body>Javascript and HTML5 Canvas Page <br></body><canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>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 commandvar ctx=c.getContext("2d");//hint: black needs to be changed to a variable colourctx.fillStyle="black";ctx.fillRect(x,y,60,60); </script></html>
Solution: next slide
9
Solution
0
Consolidate your learning
1
What is a Variable?
Your answer here
Predict the output (by tracing the values of the variables below)
X = 3Y = 5X = X + YY = Y + 1Z = X + YOutput Z
Your answer here
2
Why do variables need to be initialised?
Your answer here
What is meant by “incrementation”?
Your answer here
3
Fill in the blanks in the appropriate label.
X =
y =
w =
z =
?
4
Google the term “GetElementById”
Your answer here
Write in your own words what it means.
5
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
6
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.teachingcomputing.com
(teaching resources)
7
Next PowerPoint in this series:
Introducing Functions (Modular Programming)Change the colour of squares‘Calling’ functionsDoing 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