JavaScript and HTML PowerPoint Presentation, PPT - DocSlides

Download olivia-moreira | 2017-05-06 | General 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. ID: 545270

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

  • 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
Recommended
Supply Chain Planning
  • 107

Supply Chain Planning

Practical guide: Medical Imaging Concepts
  • 62

Practical guide: Medical Imaging Concepts

Where do diamonds come from?
  • 90

Where do diamonds come from?

A PRACTICAL WAY TO INTRODUCE A WORLDWIDE JEWELLERY ETHICAL
  • 55

A PRACTICAL WAY TO INTRODUCE A WORLDWIDE JEWELLERY ETHICAL

Welcome to Snap! Below the Line Decal
  • 58

Welcome to Snap! Below the Line Decal

Macroprudential Surveillance
  • 47

Macroprudential Surveillance

HD Series
  • 32

HD Series

w ebinar 6
  • 47

w ebinar 6

Wings of Fire
  • 65

Wings of Fire

Report this Document.