program logbook
-
Upload
jack-eastwood -
Category
Documents
-
view
192 -
download
4
Transcript of program logbook
![Page 1: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/1.jpg)
Jack Eastwood
ContentsProgramming 1.1 Welcome...................................................................................................................1
Programming 1.2 graphical welcome....................................................................................................4
Programming 1.3 Expressions.............................................................................................................11
Programming 1.4 Shape area..............................................................................................................13
Programming 1.5 interest rates...........................................................................................................16
Programming 1.6 Framing a picture....................................................................................................17
Programming 2.1 getting input from the user.....................................................................................20
Programming 2.2 Numerical input......................................................................................................23
Programming 2.3 personal details.......................................................................................................27
2.4 String operations...........................................................................................................................31
2.5 date operations.............................................................................................................................36
2.6 How old are you?...........................................................................................................................41
2.7 Event timer....................................................................................................................................44
3.1 Grading work.................................................................................................................................46
3.2 Date validation..............................................................................................................................52
3.3 Coloured event timer.....................................................................................................................57
3.4 Truth tables...................................................................................................................................60
Programming 1.1 WelcomeTop tips:
Put semi-colons at the end of everything 2 equals signs= comparison Variables can be overwritten Watch out for grammar All variables have to be declared using “VAR” then a value needs to be assigned to the
variable. Code is case sensitive Ordering of variables is very important “//” can be used to apply comments in your code without being applied when running the
program. The “prompt” variable displays a window that asks the user for an input, in this case “Please
enter your name:”
![Page 2: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/2.jpg)
Jack Eastwood
The “alert” variable displays the “message” variable on another window after the user has put an input in the prompt window.
Whenever something is stored as a prompt it’s stored as a string. == means equals, != means not equal parseInt means parse integer, meaning this only picks out any numerical values from a string
of characters identified in a variable. Don’t rely on > or <, use ranges with defined upper and lower limits. Don’t put a semi-colon at the end of a for loop. Var ++ is the same as var= var + 1 && means and, || means or
For Weather graph:
// Ex5-1: Weather Data Graphvar canvas;canvas = openGraphics();
//You may have to decide where this is best placed
var xOS = 10;var yOS = 10;var yAlen = 100;var xAlen = 150;
//Y axiscanvas.drawLine(xOS, yOS, xOS, yOS+ yAlen);
//X axiscanvas.drawLine(xOS, yOS + yAlen, xOS + xAlen, yOS + yAlen);
canvas.paint();
![Page 3: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/3.jpg)
Jack Eastwood
// Ex5-1: Weather Data Graphvar canvas;canvas = openGraphics();var xos = 50;var yos = 50;var yal = 200;var xal = 400;var ylabel = 0;var ylabelnum = 0;var xlabel = 0;var xlabelnum = 0;
//Calculations for points on axis.//A= xos, yos//B= xos, yos + yal//C= xos + xal, yos + yal
canvas.drawLine(xos, yos, xos, yos + yal);canvas.drawLine(xos, yos + yal, xos + xal, yos + yal);
for(ylabelnum = 0; ylabelnum <= 5; ylabelnum++ ){
canvas.drawString(ylabel, xos/2, (yos + yal) - ( 40 * ylabelnum ));ylabel = ylabel + 40;
}
//You may have to decide where this is best placedcanvas.paint();
![Page 4: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/4.jpg)
Jack Eastwood
Some comments are actually put as comments within the code and highlighted in dark blue i.e. //(comment)
var phrase1;phrase1 = "Hello, ";
var phrase2;phrase2 = ", welcome to the Programming module.";
var name;name = prompt( "Please enter your name:" );
var message;message = phrase1 + name + phrase2;
alert( message );
![Page 5: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/5.jpg)
Jack Eastwood
var phrase1;phrase1 = "Hello there ";
var phrase2;phrase2 = ", welcome to the Programming module.";
var phrase3;phrase3 = " I hope that you enjoy it.";
var name;name = prompt( "Please enter your name:" );
var message;message = phrase1 + name + phrase2 + phrase3;
alert( message );
![Page 6: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/6.jpg)
Jack Eastwood
Comments:
I changed the phrase1 message to “hello there”, meaning that the window after I typed my name in would change its first sentence prompt to “hello there Jack,”. Phrase3 means that there is a new sentence of the next window, in this case to “I hope you enjoy it”, but you need to add it to the variable message.
Programming 1.2 graphical welcome var canvas;canvas = openGraphics();
var phrase1;phrase1 = "Hello, ";
var phrase2;phrase2 = ", welcome to the Programming module.";
var name;name = prompt( "Please enter your name:" );
var message;message = phrase1 + name + phrase2;
![Page 7: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/7.jpg)
Jack Eastwood
canvas.drawString( message, 20, 40 );
canvas.paint();
var canvas;canvas = openGraphics();
var phrase1;phrase1 = "Hello, ";
var phrase2;phrase2 = ", welcome to the Programming module.";
var name;name = prompt( "Please enter your name:" );
var message;message = phrase1 + name + phrase2;
canvas.drawString( message, 0, 0 );
canvas.paint();
![Page 8: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/8.jpg)
Jack Eastwood
Comments:
By changing the “canvas . drawString ( message, (value), (value) )”, it will change the position of the output on the graphical window, by increasing the values it will change to be lowered and more to the right.
var canvas;canvas = openGraphics();
var phrase1;phrase1 = "Hello, ";
var phrase2;phrase2 = ", welcome to the Programming module.";
var name;name = prompt( "Please enter your name:" );
var message;message = phrase1 + name + phrase2;
canvas.drawString( message, 20, 40);canvas.drawString( message, 0, 0);
canvas.paint();
![Page 9: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/9.jpg)
Jack Eastwood
var canvas;canvas = openGraphics();
var phrase1;phrase1 = "Hello, ";
var phrase2;phrase2 = ", welcome to the Programming module.";
var name;name = prompt( "Please enter your name:" );
var message;message = phrase1 + name + phrase2;
canvas.setColor( "red" );
canvas.drawString( message, 20, 40);
canvas.setColor( "blue" );
canvas.drawString( message, 0, 0);
canvas.paint();
![Page 10: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/10.jpg)
Jack Eastwood
Comments:
The “setColor” variable is American. The setColor function changes any text underneath where it is declared to the chosen colour. If the user want to make a different sentence in another colour then they will have to declare it again just above the string.
var canvas;canvas = openGraphics();
var phrase1;phrase1 = "Hello, ";
var phrase2;phrase2 = ", <br />welcome to the Programming module.";
var name;name = prompt( "Please enter your name:" );
var message;message = phrase1 + name + phrase2;
canvas.setColor( "red" );
canvas.drawString( message, 20, 40);
canvas.setColor( "blue" );
canvas.drawString( message, 0, 0);
canvas.paint();
![Page 11: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/11.jpg)
Jack Eastwood
Comments:
The <br /> puts the output on the line underneath after it has been declared.
var canvas;canvas = openGraphics();
var phrase1;phrase1 = "Hello, ";
var phrase2;phrase2 = ", <br />welcome to the Programming module.";
var name;name = prompt( "Please enter your name:" );
var message;message = phrase1 + name + phrase2;
canvas.setFont( "times", "20px", Font.BOLD );
canvas.setColor( "red" );
canvas.drawString( message, 20, 40);
canvas.setColor( "blue" );
canvas.drawString( message, 0, 0);
canvas.paint();
![Page 12: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/12.jpg)
Jack Eastwood
Comments:
“canvas.setFont ( “times”, “20px”, Font.BOLD );” sets the font of the output to times new roman, make the font size to 20 pixels and sets the output to bold.
var canvas;canvas = openGraphics();
var phrase1;phrase1 = "Hello, ";
var phrase2;phrase2 = ", <br />welcome to the Programming module.";
var name;name = prompt( "Please enter your name:" );
var message;message = phrase1 + name + phrase2;
canvas.setFont( "comic sans ms", "40px", Font.BOLD_ITALIC );
canvas.setColor( "red" );
canvas.drawString( message, 40, 90);
canvas.setColor( "blue" );
canvas.drawString( message, 0, 0);
canvas.paint();
![Page 13: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/13.jpg)
Jack Eastwood
Programming 1.3 Expressionsvar a;a = 0;var b;b = 0;var c;c = 0;
var result;
result = a + b + c;
alert( result );
var a;a = 5;var b;b = 15;var c;
![Page 14: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/14.jpg)
Jack Eastwood
c = 7;
var result;
result = a + b - c;
alert( result );
var a;a = 2;var b;b = 3;var c;c = 4;
var result;
result = a*b + b*c + a*c;
alert( result );
var a;a = 5;var b;b = 4;
var result;
result = (a+b)*(a-b);
alert( result );
![Page 15: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/15.jpg)
Jack Eastwood
Comments:
Variables are assigned different numeric values. “var result” works out the result of the values given to a,b and c * has to be used to multiply values i.e. “a*b” is “a x b” “alert ( result );” shows the result of calculating the variables on a window
Programming 1.4 Shape areavar canvas;canvas = openGraphics();
var size;size = 100;
var area;area = size * size;
canvas.drawRect( 10, 10, size, size );// drawRect, short for drawRectangle, requires four values:// drawRect( x, y, width, height );// x and y are the coordinates of the top left corner// width and height are what they say!// Setting width and height to the same value draws a square
canvas.drawString( "Square of size:", 10, 250 );canvas.drawString( size, 120, 250 );
canvas.drawString( "Square of area:", 10, 290 );canvas.drawString( area, 120, 290 );canvas.paint();
![Page 16: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/16.jpg)
Jack Eastwood
Comments
The “can=openGraphics();” opens a new graphical window. “var size; size 100” sets the base size of the rectangle to 100. “var area; area size * size “; calculates the area by calculating size x size. “canvas.drawRect( 10, 10 size, size );” the “( 10, 10)” sets the co-ordinates of where the
rectangle is being placed in the window, whilst “(size, size)” sets the width and height parameters.
var canvas;canvas = openGraphics();
var size;size = 200;
var radius;radius = size/2;
var area;area = radius*radius*Math.PI;
canvas.drawEllipse( 10, 10, size, size );//there is a graphics function drawEllipse that requires the same four values as drawRect but draws an oval shape within the bounds of the rectangle specified
![Page 17: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/17.jpg)
Jack Eastwood
by width and height.//The area of a circle is calculated using the formula: area = radius2 X pi//JavaScript already knows the value of pi, it is access using Math.PI//A circle of radius 10 has an area of 314.159
canvas.drawString( "Circle of size:", 10, 250 );canvas.drawString( size, 120, 250 );
canvas.drawString( "Radius of circle:", 10, 290 );canvas.drawString( radius, 120, 290 );
canvas.drawString( "Area of circle:", 10, 330 );canvas.drawString( area, 120, 330 );
canvas.paint();
var canvas;canvas = openGraphics();
var size;size = 200;
var radius;radius = size/2;
var area;area = (radius*radius)*Math.PI;
canvas.setColor( "blue" );canvas.fillEllipse( 10, 10, size, size );//there is a graphics function drawEllipse that requires the same four values as drawRect but draws an oval shape within the bounds of the rectangle specified by width and height.//The area of a circle is calculated using the formula: area = radius2 X pi//JavaScript already knows the value of pi, it is access using Math.PI//A circle of radius 10 has an area of 314.159
canvas.setColor( "black" );canvas.drawString( "Circle of size:", 10, 250 );canvas.drawString( size, 120, 250 );
canvas.drawString( "Radius of circle:", 10, 290 );canvas.drawString( radius, 120, 290 );
canvas.drawString( "Area of circle:", 10, 330 );canvas.drawString( area, 120, 330 );
canvas.paint();
![Page 18: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/18.jpg)
Jack Eastwood
Comments
Canvas.setColor ( “blue” ); changes the colour of all objects in the window underneath to blue. By putting canvas.setColor( "black" ); just above the text this fills all objects underneath to black again.
Programming 1.5 interest ratesvar amount;amount = 250;
var rate;rate = 10;
var years;years = 1;
// declare, and initialise, identifiers for rate and time
var interest;
interest = (amount * rate * years)/100;
// input a formula to calculate the interest//250 x 10=2500 x 1 = 2500/100=25
![Page 19: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/19.jpg)
Jack Eastwood
alert( interest );
Programming 1.6 Framing a picturevar canvas;canvas = openGraphics();
var imageName;var xPosition;var yPosition;var width;var height;
imageName = "Honeysuckle.jpeg";
xPosition = 80;yPosition = 100;//sets the co-ordinates for the position of the image within the window
width = 200;height = 150;//sets the width and height parameters for the image
canvas.setColor ( "white" );canvas.fillRect ( 30, 30, 300, 300 );//sets background for the image coloured in white
canvas.drawImage( imageName, xPosition, yPosition, width, height );
canvas.paint();
![Page 20: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/20.jpg)
Jack Eastwood
var canvas;canvas = openGraphics();
var imageName;var xPosition;var yPosition;var width;var height;
imageName = "Honeysuckle.jpeg";
xPosition = 80;yPosition = 100;//sets the co-ordinates for the position of the image within the window
width = 200;height = 150;//sets the width and height parameters for the image
canvas.setColor ( "white" );canvas.fillRect ( 30, 30, 300, 300 );//sets background for the image colored in white
canvas.setColor ( "black" );canvas.drawRect ( 30, 30, 300, 300 );//sets a border for the background colored black
![Page 21: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/21.jpg)
Jack Eastwood
canvas.drawImage( imageName, xPosition, yPosition, width, height );
canvas.paint();
var canvas;canvas = openGraphics();
var imageName;var xPosition;var yPosition;var width;var height;
imageName = "Honeysuckle.jpeg";
xPosition = 80;yPosition = 100;//sets the co-ordinates for the position of the image within the window
width = 200;height = 150;//sets the width and height parameters for the image
canvas.setColor ( "white" );canvas.fillRect ( 30, 30, 300, 300 );//sets background for the image colored in white
![Page 22: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/22.jpg)
Jack Eastwood
canvas.setColor ( "black" );canvas.setStroke( 6 );//sets width for the width of the framecanvas.drawRect ( 30, 30, 300, 300 );//sets a border for the background colored black
canvas.drawImage( imageName, xPosition, yPosition, width, height );
canvas.paint();
Programming 2.1 getting input from the user// Ex2-1: Based on Ex1-2, Graphical Welcome// All graphics programs require a canvas on which to drawvar canvas;canvas = openGraphics();
// commentvar phrase1;phrase1 = "Hello, ";// First line that appears in the graphical environment after the user has inputted their name
// commentvar phrase2;phrase2 = ",<br />welcome to the Programming module.";
![Page 23: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/23.jpg)
Jack Eastwood
// the "<br>" will place this line underneath the "hello, (name)" line
// commentvar name;name = prompt( "Please enter your name:" );// the first window that appears that prompts the user to input their name
// commentvar message;message = phrase1 + name + phrase2;// This will add phrase1 (hello), followed by (name) when the user inputs their name at the prompt then phrase2 ("welcome to the programming module") underneath phrase1+name in the graphical enviroment
// commentcanvas.setFont( "comic sans ms", "15px", Font.BOLD );// sets the font the graphical environment to comic sans, 15px in size and sets it to bold letters
// commentcanvas.setColor( "darkred" );//sets the colour of the output in the graphical environment to dark red colour
// commentcanvas.drawString( message, 30, 50 );// sets the co-ordinates of the output either more to the right or further down (x, y)
// All graphics programs must instruct the browser to// carry out the commands and render the outputcanvas.paint();
![Page 24: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/24.jpg)
Jack Eastwood
![Page 25: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/25.jpg)
Jack Eastwood
// Ex2-1: Based on Ex1-2, Graphical Welcome// All graphics programs require a canvas on which to drawvar canvas;canvas = openGraphics();
// commentvar phrase1;phrase1 = "Hello, ";
// commentvar phrase2;phrase2 = ",<br />welcome to the Programming module.";
// commentvar name;name = prompt( "Please enter your name:" );
var font;font = prompt( "Enter font style:" );
var color;color = prompt( "Enter font color:" );
var size;size = prompt( "Enter font size:" );
// commentvar message;message = phrase1 + name + phrase2;
// commentcanvas.setFont( font, size, Font.BOLD );
![Page 26: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/26.jpg)
Jack Eastwood
// commentcanvas.setColor( color );
// commentcanvas.drawString( message, 30, 50 );
// All graphics programs must instruct the browser to// carry out the commands and render the outputcanvas.paint();
Programming 2.2 Numerical input// Ex2-2 : based on Ex1-4var canvas;canvas = openGraphics();
var width;width = prompt( "Enter width of the square" );width = parseInt(width, 10);
var height;height = prompt( "Enter height of the square" );height = parseInt(height, 10);
var size;size = width*height;
canvas.drawRect( 10, 10, width, height );// drawRect, short for drawRectangle, requires four values:// drawRect( x, y, width, height );// x and y are the coordinates of the top left corner// width and height are what they say!// Setting width and height to the same value draws a square
canvas.drawRect( 10, 10, width, height );
canvas.drawString( "Area of rectangle:", 10, 250 );canvas.drawString( size, 10, 270 );
canvas.drawString( "Width of rectangle:", 10, 290 );canvas.drawString( width, 10, 310 );
canvas.drawString( "height of rectangle:", 10, 330 );canvas.drawString( height, 10, 350 );
canvas.paint();
![Page 27: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/27.jpg)
Jack Eastwood
// Ex2-2 : based on Ex1-4var canvas;
![Page 28: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/28.jpg)
Jack Eastwood
canvas = openGraphics();
var x = parseInt(prompt( "Enter x co-ordinate for the circle:" ), 10);
var y = parseInt(prompt( "Enter y co-ordinate for the circle" ), 10);
var radius = parseInt(prompt( "Enter radius for the circle" ), 10);
var diameter;diameter = radius*2;
var area;area = (radius*radius)*Math.PI;
canvas.drawEllipse( x, y, diameter, diameter );// drawEllipse, short for drawRectangle, requires four values:// drawEllipse( x, y, diameter, diameter );// x and y are the coordinates of the top left corner// diameter and diameter are needed to draw the circle // radius of a circle is half of the diameter// to work out the radius of a circle it is radius x radius x pi// Math.PI is short for pi (3.1415)
canvas.drawString( "Area of circle:", 10, 250 );canvas.drawString( area, 10, 270 );
canvas.drawString( "Radius of circle:", 10, 290 );canvas.drawString( radius, 10, 310 );
canvas.drawString( "Diameter of circle:", 10, 330 );canvas.drawString( diameter, 10, 350 );
canvas.paint();
![Page 29: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/29.jpg)
Jack Eastwood
![Page 30: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/30.jpg)
Jack Eastwood
Programming 2.3 personal details
Comments
Forgot to start string with a “.
// Ex 2-3: Personal Detailsvar canvas;canvas = openGraphics();
var name;name = prompt( "Please enter your name:" );
var mobile;mobile = prompt( "Please enter your mobile number: ");
var email;email = prompt( "Please enter your email address: ");
var dobDay;dobDay = prompt( "Please enter your birth day: ");dobDay = parseInt(dobDay, 10);
var dobMonth;dobMonth = prompt( "Please enter your birth month: ");dobMonth = parseInt(dobMonth, 10);
var dobYear;dobYear = prompt( "Please enter your birth year: ");dobYear = parseInt(dobYear, 10);
var today = new Date();var dd = today.getDate();var mm = today.getMonth()+1; //January is 0!var yyyy = today.getFullYear();
canvas.setColor( "purple" );canvas.fillRect(5, 5, 500 ,250);
![Page 31: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/31.jpg)
Jack Eastwood
canvas.setFont( "Arial" , "20px" );canvas.setColor( "orange" );canvas.setStroke( 5 );canvas.drawRect(5, 5, 500, 250);canvas.setColor( "pink" );canvas.drawString( "Name: " + name, 10, 10);canvas.drawString( "Mobile: " + mobile, 10, 50);canvas.drawString( "Email: " + email, 10, 90);canvas.drawString( "Date of birth: " + dobDay + "/" + dobMonth + "/" + dobYear, 10, 130);canvas.drawString( "Age: " + "19", 10, 170);canvas.drawString( "Date: " + dd + "/" + mm + "/"+ yyyy, 10, 210);
canvas.paint();
![Page 32: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/32.jpg)
Jack Eastwood
![Page 33: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/33.jpg)
Jack Eastwood
![Page 34: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/34.jpg)
Jack Eastwood
2.4 String operations
canvas.drawString( " Hello" .bold());
canvas.drawString( "My name is Jack Eastwood", 0, 20 );
canvas.drawString( " Hello" .link());
canvas.drawString( "My name is Jack Eastwood", 0, 20 );
![Page 35: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/35.jpg)
Jack Eastwood
// Ex2-4 : String operationsvar canvas;canvas = openGraphics();
canvas.drawString( " Hello" .fixed());
canvas.drawString( "My name is Jack Eastwood", 0, 20 );
canvas.drawString( " Hello" .strike());
canvas.drawString( "My name is Jack Eastwood", 0, 20 );
![Page 36: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/36.jpg)
Jack Eastwood
var name = "Jack";var nameLength;
nameLength = name.length;canvas.drawString( "Number of characters in my name: ");canvas.drawString( nameLength, 250, 0);//aString.length calculates the number of characters assigned to a variable
canvas.paint();
// Ex2-4 : String operationsvar canvas;canvas = openGraphics();
var name = "Jack";var nameCharAt;
nameCharAt = name.charAt(3);canvas.drawString( " 4th character of my name: ");canvas.drawString( nameCharAt, 200, 0);//aString.charAt() finds the specified character in a variable i.e. charAt(0) finds the first character in a variable, in my case it will be J
canvas.paint();
![Page 37: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/37.jpg)
Jack Eastwood
// Ex2-4 : String operationsvar canvas;canvas = openGraphics();
var name = "Jack";var nameCharAt;
nameCharAt = name.charAt(0) + name.substr(1)canvas.drawString( " Separate 1st letter of my name from the rest: ");canvas.drawString( name.charAt(0), 0, 30);canvas.drawString( name.substr(1), 30, 30);//aString.charAt() finds the specified character in a variable i.e. charAt(0) finds the first character in a variable, in my case it will be J
canvas.paint();
![Page 38: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/38.jpg)
Jack Eastwood
// Ex2-4 : String operationsvar canvas;canvas = openGraphics();
var name = "jack";var nameCharAt;
nameCharAt = name.charAt + name.substr;canvas.drawString( " Separate 1st letter of my name from the rest: ");canvas.drawString( name.charAt(0).toUpperCase(), 0, 30);canvas.drawString( name.substr(1).toLowerCase(), 30, 30);
// .toUpperCase will select the 1st letter chosen from name.charAt and will put it into upper case, whilst .toLowerCase will select the other characters and put them into lower case.
canvas.paint();
![Page 39: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/39.jpg)
Jack Eastwood
2.5 date operations// Ex2-5var canvas;canvas = openGraphics();
var value;var aDate;
aDate = new Date();
canvas.drawString( "The date is: " + aDate, 10, 20 );
value = aDate.toLocaleString();canvas.drawString( "toLocalString: " + value, 10, 40 );
value = aDate.getYear();canvas.drawString( "Year is: " + value , 10, 60 );
canvas.paint();
// Ex2-5var canvas;canvas = openGraphics();
var value;var aDate;
aDate = new Date();
![Page 40: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/40.jpg)
Jack Eastwood
canvas.drawString( "The date is: " + aDate, 10, 20 );
value = aDate.toLocaleString();canvas.drawString( "toLocalString: " + value, 10, 40 );
value = aDate.getFullYear();canvas.drawString( "Year is: " + value , 10, 60 );
value = aDate.getMonth();canvas.drawString( "Month is: " + value, 10, 80 );
value = aDate.getDay();canvas.drawString( "Day is: " + value, 10, 100 );
value = aDate.getDate();canvas.drawString( "Date is: " + value, 10, 120 );
canvas.paint();
// Ex2-5var canvas;canvas = openGraphics();
var value;var aDate;
aDate = new Date( 1995, 6, 6);
Ranges from 0-11 , 0= January, 11= December
Day 1 = Monday, Day 7 = Sunday
![Page 41: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/41.jpg)
Jack Eastwood
canvas.drawString( "The date is: " + aDate, 10, 20 );
value = aDate.toLocaleString();canvas.drawString( "toLocalString: " + value, 10, 40 );
value = aDate.getFullYear();canvas.drawString( "Year is: " + value , 10, 60 );
value = aDate.getMonth();canvas.drawString( "Month is: " + value, 10, 80 );
value = aDate.getDay();canvas.drawString( "Day is: " + value, 10, 100 );
value = aDate.getDate();canvas.drawString( "Date is: " + value, 10, 120 );
canvas.paint();
// Ex2-5var canvas;canvas = openGraphics();
var value;var aDate;
aDate = new Date( 1995, 11, 25 );
canvas.drawString( "The date is: " + aDate, 10, 20 );
I was born on a Thursday
![Page 42: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/42.jpg)
Jack Eastwood
value = aDate.toLocaleString();canvas.drawString( "toLocalString: " + value, 10, 40 );
value = aDate.getFullYear();canvas.drawString( "Year is: " + value , 10, 60 );
value = aDate.getMonth();canvas.drawString( "Month is: " + value, 10, 80 );
value = aDate.getDay();canvas.drawString( "Day is: " + value, 10, 100 );
value = aDate.getDate();canvas.drawString( "Date is: " + value, 10, 120 );
canvas.paint();
Christmas in 1995 was on a Monday
![Page 43: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/43.jpg)
Jack Eastwood
// Ex2-5var canvas;canvas = openGraphics();
var value;var aDate;
aDate = new Date();
value = aDate.setDate(29);canvas.drawString( "Date is: " + value, 10, 20 );
value = aDate.setMonth(11);canvas.drawString( "Month is: " + value, 10, 40 );
value = aDate.setFullYear(1980);canvas.drawString( "Year is: " + value, 10, 60 );
canvas.paint();
Put : instead of ; at the end and only supposed to put a number from 0-9
![Page 44: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/44.jpg)
Jack Eastwood
The toLocaleString coverts the new Date function into a date format, the getDate, getDay, getMonth and getFullYear all retrieve the date from the computer’s clock. The setDate functions allow the user to input the day, month and year, however the output is displayed in minutes, so this will need to be divided to get the proper date, month and year.
2.6 How old are you?
![Page 45: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/45.jpg)
Jack Eastwood
// Ex2-6var canvas;canvas = openGraphics();
var day;var month;var year;var birthday;
// get user's birthday details// create two dates
day = parseInt(prompt( "Please enter your birthday: "), 10);
month = parseInt(prompt( "Please enter your birth month: "), 10);
year = parseInt(prompt( "Please enter your birth year: "), 10);
var aDate = new Date(year, month-1, day);canvas.drawString ( "Date of birth: " + aDate, 10, 20);
var today = new Date();canvas.drawString ( "Today's date: " + today, 10, 100);
var age = today - aDate;canvas.drawString ("Your age: " + age, 10, 140);var ageindays = age/86400000;canvas.drawString( "Your age in days: " +ageindays.toFixed(0), 10, 180);
Identifier is date1, not date
![Page 46: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/46.jpg)
Jack Eastwood
var ageinyears = ageindays/365;canvas.drawString( "Your age in years: " + ageinyears.toFixed(0), 10, 220);
// calculate age in mS and convert to days and then years
canvas.paint();
![Page 47: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/47.jpg)
Jack Eastwood
Comments
This asks the user to input their birth date, month and year and format it into a date using the new Date function and placing the variables within the (). Because January is assigned to 0 and December is 11, month-1 is used to make the months 1-12 instead of 0-11.
2.7 Event timer// Ex2-7: Event Timer// This program calculates the difference in time// between two events: the user clearing alerts// The difference is a measure of the time it// Takes to make two keypresses or mouse clicks
var canvas;canvas = openGraphics();
// Put a Title on the output screencanvas.setColor( "Yellow" );canvas.setFont( "Comic sans ms", "30px", Font.UNDERLINE );canvas.fillRect( 10, 10, 300, 200 );canvas.setColor( "Red" );canvas.drawString( "Timer",150,0 );// uncomment the next line to see the title// canvas.paint();
// create a Date object and store the current timealert( "Press \"OK\" to start the timer." );var date = new Date();
// create another Date object and store the time now
![Page 48: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/48.jpg)
Jack Eastwood
alert( "Press \"OK\" to stop the timer." );var date1 = new Date();
var difference = date1 - date;canvas.setFont( "Comic sans ms", "20px" );canvas.drawString( " Difference in time: " + difference + "ms", 10, 60);
// calculate the difference between the two times// output a suitable message to the user
canvas.paint();
![Page 49: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/49.jpg)
Jack Eastwood
Comments
This works by pressing the first alert window will collect the exact current time all the way to milliseconds and the next alert window will also collect the exact current time. This is then subtracted by the variable called difference which minus’s the second date (“stop timer alert”) against the first date (“start timer alert”).
3.1 Grading work// Ex: 3-1 Grading Workvar mark;var grade;grade = "Not Yet Graded";
mark = prompt( "Please input the mark(%)" );mark = parseInt( mark, 10 ); // see comment
if( mark > 69 ){
grade = "First Class";}
else if ( mark > 59 ){
grade = "Upper Class (2.1)";}
else if (mark > 49 ){
grade = "Lower Class (2.2)";}
else if (mark > 39 ){
grade = "Third Class";}
alert( "Mark: " + mark + "% - Grade: " + grade );
![Page 50: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/50.jpg)
Jack Eastwood
Forgot to close string with “
![Page 51: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/51.jpg)
Jack Eastwood
![Page 52: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/52.jpg)
Jack Eastwood
// Ex: 3-1 Grading Workvar mark;var grade;grade = "Not Yet Graded";
mark = prompt( "Please input the mark(%)" );mark = parseInt( mark, 10 ); // see commentif ( mark >= 0 && mark <=100 ){
if( mark > 69 ){
grade = "First Class";}
else if ( mark > 59 && mark < 70){
grade = "Upper Class (2.1)";}
else if (mark > 49 && mark < 60){
grade = "Lower Class (2.2)";}
else if (mark > 39 && mark < 50){
grade = "Third Class";}
![Page 53: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/53.jpg)
Jack Eastwood
else if (mark < 40 ){
grade = "Fail";}
}else{
alert( "Invalid mark, grade needs to be between 0-100" );}
alert( "Mark: " + mark + "% - Grade: " + grade );
![Page 54: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/54.jpg)
Jack Eastwood
![Page 55: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/55.jpg)
Jack Eastwood
Comments
This program prompts the user to input the grade percentage which gets parsed with parseInt(), then the IF statements sets boundaries for the input i.e. if mark is above 70 then that’s a first and if the mark is between 50-59 then a 2:2 is awarded. If a negative number or a number over 100 is entered, then the program creates an alert that the inputted number or character is invalid.
3.2 Date validation
![Page 56: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/56.jpg)
Jack Eastwood
// Ex 2-3: Personal Detailsvar canvas;canvas = openGraphics();
var name;
Forgot to end with } after IF statement
Forgot to put variable name after &&
![Page 57: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/57.jpg)
Jack Eastwood
name = prompt( "Please enter your name:" );
var mobile;mobile = prompt( "Please enter your mobile number: ");
var email;email = prompt( "Please enter your email address: ");
var dobDay;dobDay = prompt( "Please enter your birth day: ");dobDay = parseInt(dobDay, 10);
var dobMonth;dobMonth = prompt( "Please enter your birth month: ");dobMonth = parseInt(dobMonth, 10);
var dobYear;dobYear = prompt( "Please enter your birth year: ");dobYear = parseInt(dobYear, 10);
var birthday;birthday = new Date(dobYear, dobMonth-1, dobDay );
var today = new Date();var dd = today.getDate();var mm = today.getMonth()+1; //January is 0!var yyyy = today.getFullYear();
var age;age = today - birthday;
var ageindays;ageindays = age/86400000;
var ageinyears;ageinyears = ageindays/365;
canvas.setColor( "purple" );canvas.fillRect(5, 5, 700 ,250);
canvas.setFont( "Arial" , "20px" );canvas.setColor( "orange" );canvas.setStroke( 5 );canvas.drawRect(5, 5, 700, 250);canvas.setColor( "pink" );canvas.drawString( "Name: " + name, 10, 10);canvas.drawString( "Mobile: " + mobile, 10, 50);canvas.drawString( "Email: " + email, 10, 90);canvas.drawString( "Date of birth: " + birthday, 10, 130);canvas.drawString( "Age: " + ageinyears.toFixed(0), 10, 170);canvas.drawString( "Date: " + today, 10, 210);
if (ageinyears.toFixed(0) == 20){
![Page 58: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/58.jpg)
Jack Eastwood
alert("Age is correct");}else if (ageinyears.toFixed(0) != 20){
alert( "Age is incorrect");}
if (dobDay >=1 && dobDay<=31){
alert ("Day is valid");}else{
alert ("Day is invalid");}
if (dobMonth >=1 && dobMonth <=12){
alert("Month is valid");}else{
alert("Month is invalid");}
if (dobYear > 0 && dobYear < 2015){
alert("Year is valid");}else{
alert("Year is invalid");}
canvas.paint();
Valid entries
![Page 59: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/59.jpg)
Jack Eastwood
Invalid entries
![Page 60: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/60.jpg)
Jack Eastwood
3.3 Coloured event timer// Ex2-7: Event Timer// This program calculates the difference in time// between two events: the user clearing alerts// The difference is a measure of the time it// Takes to make two keypresses or mouse clicks
var canvas;canvas = openGraphics();
// Put a Title on the output screencanvas.setFont( "Comic sans ms", "30px", Font.UNDERLINE );canvas.drawString( "Timer",150,0 );// uncomment the next line to see the title// canvas.paint();
// create a Date object and store the current timealert( "Press \"OK\" to start the timer." );var date = new Date();
// create another Date object and store the time nowalert( "Press \"OK\" to stop the timer." );var date1 = new Date();
var difference = date1 - date;canvas.setFont( "Comic sans ms", "20px" );canvas.drawString( "Difference in time: ", 10, 60 );
if (difference <= 150){
canvas.setColor( "green" );canvas.drawString( difference + "ms", 200, 60);
}else if ( difference >=151 && difference <= 350 ){
canvas.setColor( "orange" );canvas.drawString( difference + "ms", 200, 60);
}else if (difference > 350 ){
![Page 61: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/61.jpg)
Jack Eastwood
canvas.setColor( "red" );canvas.drawString( difference + "ms", 200, 60);
}
// calculate the difference between the two times// output a suitable message to the user
canvas.paint();
![Page 62: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/62.jpg)
Jack Eastwood
Comments
I separated the “difference in time:” from the result due to the “difference in time:” also being coloured, so this would have been put before the if statements.
![Page 63: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/63.jpg)
Jack Eastwood
3.4 Truth tablesAND Table
// Ex: 3-4var canvas;canvas = openGraphics();
var operation;operation = "AND";
var heading;heading = "Truth Table for the " + operation + " operation.";
canvas.drawStringRect( heading.big(), 0, 5, 400, "center" );
var message;message = "An entry in the table is the result of the operation ";message = message + "A " + operation + " B";
canvas.drawStringRect( message, 0, 30, 400, "center" );
message = "i.e. result = a && b;";
canvas.drawStringRect( message, 0, 65, 400, "center" );
var x; // left edge of tablevar y; // top of tablex = 50;y = 100;
// draw table outline
canvas.setStroke( 3 );canvas.drawLine( x, y, x+300, y );canvas.drawLine( x, y, x, y+150 );canvas.drawLine( x, y+50, x+300, y+50 );canvas.drawLine( x, y+150, x+300, y+150 );canvas.drawLine( x+100, y, x+100, y+150 );canvas.drawLine( x+300, y, x+300, y+150 );
canvas.setStroke( 1 );canvas.drawLine( x, y+100, x+300, y+100 );canvas.drawLine( x+200, y, x+200, y+150 );
canvas.setStroke( Stroke.DOTTED );canvas.drawLine( x, y, x + 100, y + 50 );
// Put in column and row labels
canvas.setFont( "lucida console", "20px", Font.BOLD );canvas.setColor( "darkred" );
canvas.drawStringRect( "A", x+15, y+20, 50, "left" );
![Page 64: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/64.jpg)
Jack Eastwood
canvas.drawStringRect( "B", x+5, y+5, 80, "right" );
canvas.drawStringRect( "true", x, y+50+15, 100, "center" );canvas.drawStringRect( "false", x, y+100+15, 100, "center" );
canvas.drawStringRect( "true", x+100, y+15, 100, "center" );canvas.drawStringRect( "false", x+200, y+15, 100, "center" );
// Now to put the results in the table
var result;var a;var b;
canvas.setColor( "Darkblue" );a = true;b = true;result = a && b;canvas.drawStringRect( result, x+100, y+50+15, 100, "center" );
a = true;b = false;result = a && b;canvas.drawStringRect( result, x+200, y+50+15, 100, "center" );
a = false;b = true;result = a && b;canvas.drawStringRect( result, x+100, y+100+15, 100, "center" );
a = false;b = false;result = a && b;canvas.drawStringRect( result, x+200, y+100+15, 100, "center" );
canvas.paint();
![Page 65: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/65.jpg)
Jack Eastwood
OR Table
// Ex: 3-4var canvas;canvas = openGraphics();
var operation;operation = "OR";
var heading;heading = "Truth Table for the " + operation + " operation.";
canvas.drawStringRect( heading.big(), 0, 5, 400, "center" );
var message;message = "An entry in the table is the result of the operation ";message = message + "A " + operation + " B";
canvas.drawStringRect( message, 0, 30, 400, "center" );
message = "i.e. result = a || b;";
canvas.drawStringRect( message, 0, 65, 400, "center" );
var x; // left edge of tablevar y; // top of tablex = 50;y = 100;
// draw table outline
![Page 66: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/66.jpg)
Jack Eastwood
canvas.setStroke( 3 );canvas.drawLine( x, y, x+300, y );canvas.drawLine( x, y, x, y+150 );canvas.drawLine( x, y+50, x+300, y+50 );canvas.drawLine( x, y+150, x+300, y+150 );canvas.drawLine( x+100, y, x+100, y+150 );canvas.drawLine( x+300, y, x+300, y+150 );
canvas.setStroke( 1 );canvas.drawLine( x, y+100, x+300, y+100 );canvas.drawLine( x+200, y, x+200, y+150 );
canvas.setStroke( Stroke.DOTTED );canvas.drawLine( x, y, x + 100, y + 50 );
// Put in column and row labels
canvas.setFont( "lucida console", "20px", Font.BOLD );canvas.setColor( "darkred" );
canvas.drawStringRect( "A", x+15, y+20, 50, "left" );canvas.drawStringRect( "B", x+5, y+5, 80, "right" );
canvas.drawStringRect( "true", x, y+50+15, 100, "center" );canvas.drawStringRect( "false", x, y+100+15, 100, "center" );
canvas.drawStringRect( "true", x+100, y+15, 100, "center" );canvas.drawStringRect( "false", x+200, y+15, 100, "center" );
// Now to put the results in the table
var result;var a;var b;
canvas.setColor( "Darkblue" );a = true;b = true;result = a || b;canvas.drawStringRect( result, x+100, y+50+15, 100, "center" );
a = true;b = false;result = a || b;canvas.drawStringRect( result, x+200, y+50+15, 100, "center" );
a = false;b = true;result = a || b;canvas.drawStringRect( result, x+100, y+100+15, 100, "center" );
a = false;b = false;result = a || b;
![Page 67: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/67.jpg)
Jack Eastwood
canvas.drawStringRect( result, x+200, y+100+15, 100, "center" );
canvas.paint();
Comments
The difference between AND and OR is that AND operations are defined by && between 2 variables whilst || is used to define OR.
3.5 Experiments with graphics
// Ex3-5 : Graphics Experiments// Part of demo program:var canvas;canvas = openGraphics();
var x;var y;var size;x = 0;y = 0;size = 500;
while( size > 0 ){
canvas.setColor( "white" );canvas.fillEllipse( x, y, size, size );canvas.setColor( "blue" );canvas.drawEllipse( x, y, size, size );
![Page 68: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/68.jpg)
Jack Eastwood
x = x + 10;y = y + 10;size = size - 20;
}canvas.paint();
// Ex3-5 : Graphics Experiments// Part of demo program:var canvas;canvas = openGraphics();
var x;var y;var width;var height;x = 0;y = 0;
![Page 69: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/69.jpg)
Jack Eastwood
width = 200;height = 700;
while( (width > 0 ) && (height > 0) ){
canvas.setColor( "white" );canvas.fillEllipse( x, y, width, height );canvas.setColor( "blue" );canvas.drawEllipse( x, y, width, height ); x = x + 23;y = y + 3;width = width - 7;height = height - 70;
}canvas.paint();
![Page 70: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/70.jpg)
Jack Eastwood
3.6 Graphical Event timer
// Ex 3-6 : Graphical Event Timer
![Page 71: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/71.jpg)
Jack Eastwood
var canvas;canvas = openGraphics();
var textX = 20;var textY = 30;var lineX = 180;var lineY = textY + 5;
for (var i = 0; i < 10; i++) {// Put your event timer code herealert( "Press \"OK\" to start the timer." );var date = new Date();
// create another Date object and store the time nowalert( "Press \"OK\" to stop the timer." );var date1 = new Date();var difference = date1 - date;var previoustime;canvas.setStroke(3);canvas.setColor("black");canvas.drawString( "Timer", 150, 0 );canvas.drawString( " Difference in time: " + difference + "ms", 10,
textY);
if (previoustime>difference) {canvas.setColor("Green");
}else if (previoustime<difference){canvas.setColor("Red");}else {
canvas.setColor("black");}canvas.drawLine( lineX, lineY, lineX + difference, lineY );textY = textY + 20;lineY = lineY + 20;previoustime=difference;
canvas.paint();
}
![Page 72: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/72.jpg)
Jack Eastwood
3.7 Sudoku Grid
// Ex3-7 : Blank Sudoku Gridvar canvas;canvas = openGraphics();
var x;var y;var gap;x = 20;y = 20;gap = 25;// so not much help here!
var count;for( count=0; count<11; count++ ){
canvas.drawLine( x,y,x+225,y );y = x+count*gap;
} //endfor
x = 20;y = 20;
for( count=0; count<11; count++ ){
canvas.drawLine(x,y,x,y+225);x = y+count*gap;
}
x = 20;y = 20;
for( count=0; count<5; count++ ){
![Page 73: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/73.jpg)
Jack Eastwood
canvas.setStroke(3);canvas.drawLine(x,y,x+225,y);y = x+count*gap*3;
}
x = 20;y = 20;
for( count=0; count<5; count++){
canvas.setStroke(3);canvas.drawLine(x,y,x,y+225);x = y+count*gap*3;
}
canvas.paint();
![Page 74: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/74.jpg)
Jack Eastwood
4.1 Garfield cartoon
// Ex4-1: Garfield Cartoonvar canvas;canvas = openGraphics();
var imageName1;var imageName2;var imageName3;var xPosition;var yPosition;var width;var height;
imageName1 = "garfield1.gif";
xPosition = 10;yPosition = 10;
canvas.drawImage(imageName1, xPosition,yPosition);
imageName2 = "garfield2.gif";
xPosition = 210;yPosition = 10;
canvas.drawImage(imageName2, xPosition, yPosition);
imageName3 = "garfield3.gif";
xPosition = 400;yPosition = 10;
canvas.drawImage(imageName3, xPosition, yPosition);
canvas.setFont( "comic sans ms","10.5px", Font.BOLD );canvas.drawStringRect("THERE'S A GOOD SCARY MOVIE ON TV TONIGHT", 30, 13, 150);canvas.drawStringRect("YEAH, SURE", 140, 55, 50);canvas.drawStringRect("YOU SAY THAT EVERY NIGHT", 328, 40, 61);canvas.drawStringRect("''INVASION OF THE 50-FOOT ADOLESCENTS''", 415, 12, 150);canvas.drawStringRect("TONIGHT, THOUGH, YOU WOULD BE CORRECT", 530, 40, 70);
![Page 75: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/75.jpg)
Jack Eastwood
canvas.paint();
4.2 guess the number
// Ex4-2: Guess the Numbervar canvas;canvas = openGraphics();
var max;max = 100;
var numberToGuess;numberToGuess = 50; // use a known value for testing canvas.drawString("Welcome to Jack Eastwood's guessing game", 50, 10);
var guess;guess = parseInt(prompt("Please input a number between 0 and 100"),10);
var guessed = false;
var message;
// (3) if too high .....if (guess < numberToGuess){
canvas.drawString("You was wrong, try a higher number", 10, 30);}
// (4) if too low .....if (guess > numberToGuess){
canvas.drawString("You was wrong again fool, try a lower number", 10, 30);}
![Page 76: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/76.jpg)
Jack Eastwood
// (5) "just right" said Goldilocks .....if (guess == numberToGuess){
canvas.drawString("You was right",10,30);}
// (6) canvas.drawString( message ......
canvas.paint();
![Page 77: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/77.jpg)
Jack Eastwood
// Ex4-2: Guess the Numbervar canvas;canvas = openGraphics();
var max;max = 100;
var numberToGuess = Math.floor( Math.random() * max ) +1;canvas.drawString("Welcome to Jack Eastwood's guessing game", 50, 10);
var x = 20;var y = 20;var guess;var guessed = false;
while( !guessed ){guess = parseInt(prompt("Please input a number between 0
and 100"),10);
![Page 78: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/78.jpg)
Jack Eastwood
var message;// (3) if too high .....if (guess > numberToGuess){message = guess + " Too high";}
// (4) if too low .....if (guess < numberToGuess) {message = guess + " Too low";}
// (5) "just right" said Goldilocks .....if (guess == numberToGuess) {message = guess + " Correct";guessed = true;}
canvas.drawString( message, x, y);y = y + 20;canvas.paint();}
![Page 79: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/79.jpg)
Jack Eastwood
4.3 Square root calculator
// Ex4-3 : Square Root Calculatorvar canvas;canvas = openGraphics();
//var number = prompt( "Enter a number: " );//number = parseInt( number, 10 );//var sqRoot;//sqRoot = Math.sqrt( number );
//var message;//message = "Using the JavaScript library,<br>";//message = message + "The square root of " + number + "<br>";//message = message + "is " + sqRoot;
// Put your version here
var lowGuess = 0;var highGuess = 10;var squareRoot = Math.sqrt( highGuess );var guess = prompt( "Please enter a number: ");var message;
if( guess > squareRoot){message = guess + " Too high";
}
if( guess < squareRoot){message = guess + " Too low";
![Page 80: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/80.jpg)
Jack Eastwood
}
if( guess == squareRoot){message = guess + " Correct";
}
canvas.drawString( message, 10, 10 );
canvas.paint();
4.4 BMI calculator
// Ex4-4: BMI Calculatorvar canvas;canvas = openGraphics();
var height = 160/100;var weight = 40;var bmi = weight/(height * height);
alert( bmi );
canvas.paint();
// Ex4-4: BMI Calculatorvar canvas;canvas = openGraphics();
canvas.setFont( "Comic Sans MS", "20px", Font.BOLD );canvas.drawString( "BMI calculator bitch's", 150, 0);
var height = parseFloat(prompt("Please enter your height in cm: ") ,10)/100;var weight = parseFloat(prompt("Please enter your weight in kg: ") ,10);var calculation = weight/(height * height);var bmi = calculation.toFixed(2);var classification;
if (bmi <= 18.4999){classification = " Underweight";
}else if (bmi > 18.4999 && bmi <= 24.999){
classification = " Ideal";
![Page 81: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/81.jpg)
Jack Eastwood
}else if (bmi > 24.999 && bmi <= 29.999){
classification = " Overweight";}else if (bmi > 29.999 && bmi <= 39.999){
classification = " Obese";}else if (bmi > 39.999){
classification = " Very obese";}
canvas.setFont( "Comic Sans MS", "14px" );canvas.drawString( bmi + ":" + classification, 0, 50 );
canvas.paint();
![Page 82: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/82.jpg)
Jack Eastwood
// Ex4-4: BMI Calculatorvar canvas;canvas = openGraphics();var reset = false;
![Page 83: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/83.jpg)
Jack Eastwood
var xos = 20;var xosGreen = 125;var xosOrange = 205;var xosBrown = 265;var xosRed = 385;var yos = 20;var lineHeight = 400;var lineHeight2 = 396.5;var lineLength = 550;var lineYellow = 105;var lineGreen = 80;var lineOrange = 60;var lineBrown = 120;var lineRed = 185;var label = 10;var labelnum = 0;
var ArmLength = 30;var ArmYPos = 330;var LArmPos = 265;var RArmPos = 320;
var LegLength = 70;var LegYPos = 350;var LLegPos = 300;var RLegPos = 320;
while( !reset ){
canvas.setFont( "Comic Sans MS", "20px", Font.BOLD );canvas.drawString( "BMI calculator bitch's", 150, 0);canvas.setFont( "Comic Sans MS", "14px");canvas.drawString( "This program will calculate your body
mass index which is an indication of the status of your weight.", 0 ,30 ); canvas.drawString( "The higher the BMI figure, the more
likely it is that you are overweight.", 0, 50);var height = parseFloat(prompt("Please enter your height in
cm: ") ,10)/100;var weight = parseFloat(prompt("Please enter your weight
in kg: ") ,10);var calculation = weight/(height * height);var bmi = calculation.toFixed(2);var classification;
canvas.setFont( "Comic Sans MS", "14px" );canvas.setColor( "DarkBlue" );canvas.drawString( "Height " + ":" + height + " m", 120,
100 );canvas.drawString( "Weight " + ":" + weight + " kg", 0,
100 );
![Page 84: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/84.jpg)
Jack Eastwood
if (bmi <= 18.4999){canvas.setColor( "black" );canvas.setStroke(3);classification = " Underweight";canvas.drawEllipse(xos + 3 + 50, 290, 20, 20);canvas.fillEllipse(xos + 50, 310, 30, 70);canvas.drawLine( xos + 50 + 50, ArmYPos, xos + 50 +
ArmLength, ArmYPos );canvas.drawLine( xos - 50 + 50, ArmYPos, xos + 50 +
ArmLength, ArmYPos );canvas.drawLine( xos + 5 + 50, LegYPos, xos + 5 + 50,
LegYPos + LegLength );canvas.drawLine( xos + 20 + 50, LegYPos, xos + 20 + 50,
LegYPos + LegLength );
}else if (bmi > 18.4999 && bmi <= 24.999){canvas.setColor( "black");canvas.setStroke(3);classification = " Ideal";canvas.drawEllipse(xos + 3 + 150, 290, 20, 20);canvas.fillEllipse(xos + 150, 310, 30, 70);canvas.drawLine( xos + 50 + 150, ArmYPos, xos + 150 +
ArmLength, ArmYPos );canvas.drawLine( xos - 50 + 150, ArmYPos, xos + 150 +
ArmLength, ArmYPos );canvas.drawLine( xos + 5 + 150, LegYPos, xos + 5 + 150,
LegYPos + LegLength );canvas.drawLine( xos + 20 + 150, LegYPos, xos + 20 +
150, LegYPos + LegLength );
}else if (bmi > 24.999 && bmi <= 29.999){canvas.setColor( "black" );canvas.setStroke(3);classification = " Overweight";canvas.drawEllipse(xos + 3 + 200, 290, 20, 20);canvas.fillEllipse(xos + 200, 310, 30, 70);canvas.drawLine( xos + 50 + 200, ArmYPos, xos + 200 +
ArmLength, ArmYPos );canvas.drawLine( xos - 50 + 200, ArmYPos, xos + 200 +
ArmLength, ArmYPos );canvas.drawLine( xos + 5 + 200, LegYPos, xos + 5 + 200,
LegYPos + LegLength );canvas.drawLine( xos + 20 + 200, LegYPos, xos + 20 +
200, LegYPos + LegLength );
}else if (bmi > 29.999 && bmi <= 39.999){canvas.setColor( "black" );canvas.setStroke(3);classification = " Obese";canvas.drawEllipse(xos + 3 + 300, 290, 20, 20);
![Page 85: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/85.jpg)
Jack Eastwood
canvas.fillEllipse(xos + 300, 310, 30, 70);canvas.drawLine( xos + 50 + 300, ArmYPos, xos + 300 +
ArmLength, ArmYPos );canvas.drawLine( xos - 50 + 300, ArmYPos, xos + 300 +
ArmLength, ArmYPos );canvas.drawLine( xos + 5 + 300, LegYPos, xos + 5 + 300,
LegYPos + LegLength );canvas.drawLine( xos + 20 + 300, LegYPos, xos + 20 +
300, LegYPos + LegLength );
}else if (bmi > 39.999){canvas.setColor( "black" );canvas.setStroke(3);classification = " Very obese";canvas.drawEllipse(xos + 3 + 450, 290, 20, 20);canvas.fillEllipse(xos + 450, 310, 30, 70);canvas.drawLine( xos + 50 + 450, ArmYPos, xos + 450 +
ArmLength, ArmYPos );canvas.drawLine( xos - 50 + 450, ArmYPos, xos + 450 +
ArmLength, ArmYPos );canvas.drawLine( xos + 5 + 450, LegYPos, xos + 5 + 450,
LegYPos + LegLength );canvas.drawLine( xos + 20 + 450, LegYPos, xos + 20 +
450, LegYPos + LegLength );
}canvas.setColor("Purple"); canvas.drawString( bmi + ":" + classification, 0, 150 );canvas.setStroke(5);canvas.setColor ( "Yellow" );canvas.drawLine( xos, yos + lineHeight2, xos + lineYellow, yos + lineHeight2 );canvas.setColor( 'Green' );canvas.drawLine( xosGreen, yos + lineHeight2, xosGreen + lineGreen, yos + lineHeight2 );canvas.setColor( "Orange" );canvas.drawLine( xosOrange, yos + lineHeight2, xosOrange + lineOrange, yos + lineHeight2 );canvas.setColor( "Brown" );canvas.drawLine( xosBrown, yos + lineHeight2, xosBrown + lineBrown, yos + lineHeight2 );canvas.setColor( "Red" );canvas.drawLine( xosRed, yos + lineHeight2, xosRed + lineRed, yos + lineHeight2 );canvas.setStroke( 3 );canvas.setColor( "Black" );canvas.drawLine( xos, yos + lineHeight, xos + lineLength, yos + lineHeight);//canvas.drawEllipse(300, 290, 20, 20);//canvas.fillEllipse(295, 310, 30, 70);//canvas.drawLine( RArmPos, ArmYPos, RArmPos + ArmLength, ArmYPos );//canvas.drawLine( LArmPos, ArmYPos, LArmPos + ArmLength, ArmYPos );//canvas.drawLine( LLegPos, LegYPos, LLegPos, LegYPos + LegLength );//canvas.drawLine( RLegPos, LegYPos, RLegPos, LegYPos + LegLength );
![Page 86: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/86.jpg)
Jack Eastwood
//canvas.drawEllipse(xos + 3, 290, 20, 20);//canvas.fillEllipse(xos, 310, 30, 70);//canvas.drawLine( xos + 50, ArmYPos, xos + ArmLength, ArmYPos );//canvas.drawLine( xos - 50, ArmYPos, xos + ArmLength, ArmYPos );//canvas.drawLine( xos + 5, LegYPos, xos + 5, LegYPos + LegLength );//canvas.drawLine( xos + 20, LegYPos, xos + 20, LegYPos + LegLength );
for( labelnum = 0; labelnum <= 9; labelnum++ ){canvas.drawString( label, xos + (labelnum * 60), (yos +
lineHeight));label = label + 5;}
canvas.paint();
reset = prompt( "Would you like to start over? (Y/N)" );if ( reset == "y"){reset = false;canvas.clear();}else { reset = true;}
}
5.1 Weather graph
// Ex5-1: Weather Data Graphvar canvas;canvas = openGraphics();var xos = 50;var yos = 100;var yal = 400;var xal = 400;var ylabel = 0;var ylabelnum = 0;var xlabel = 0;var xlabelnum = 0;var monthwidth = 30;var month;var rainfall;var monthString = ("JFMAMJJUSOND");
//Calculations for points on axis.//A= xos, yos//B= xos, yos + yal//C= xos + xal, yos + yal
canvas.drawLine(xos, yos, xos, yos + yal);canvas.drawLine(xos, yos + yal, xos + xal, yos + yal);
![Page 87: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/87.jpg)
Jack Eastwood
for(ylabelnum = 0; ylabelnum <= 10; ylabelnum++ ){
canvas.drawString(ylabel, xos/2, (yos + yal) - ( 40 * ylabelnum ));
ylabel = ylabel + 50;
}
for(month = 0; month <=11; month++ ){
rainfall= prompt( "Please enter rainfall." );parseInt (rainfall, 10);canvas.setColor( "blue" );canvas.fillRect(xos+(monthwidth*month), (yos + yal) -
rainfall, monthwidth, rainfall);canvas.setColor( "black" );canvas.drawRect(xos+(monthwidth*month), (yos + yal) -
rainfall, monthwidth, rainfall);canvas.drawString( monthString.charAt(month), xos+ 10 +
(monthwidth*month), (yos + yal) - rainfall);}
//You may have to decide where this is best placedcanvas.paint();
5.2 Picture frame revisited
var canvas = openGraphics();var xPosition = 100;var yPosition = 50;var width = 200;var height = 150;var xPos;var xLeft;var xRight;var yPos;var yTop;var yBottom;var i;var imageName = "Honeysuckle.jpeg";canvas.setColor ("Beige");canvas.fillRect (75, 25, 250, 200);canvas.setColor ("Firebrick");canvas.setStroke (3);canvas.drawRect (73, 23, 250, 200);canvas.setStroke(1);canvas.setColor("Black");xPos = 326;yTop = 22;yBottom = 226;for( i = 0; i<2; i++){
canvas.drawLine(xPos, yTop, xPos, yBottom);xPos += 1;
![Page 88: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/88.jpg)
Jack Eastwood
yTop -= 1;yBottom += 1;
}xPos = 76;yTop = 26;yBottom = 222;for(i = 0; i<4; i++){
canvas.drawLine(xPos, yTop, xPos, yBottom);xPos += 1;yTop += 1;yBottom -= 1;
}xLeft = 80;xRight = 318;yPos = 29;for( i = 0; i<4; i++){
canvas.drawLine(xLeft, yPos, xRight, yPos);xLeft -= 1;xRight += 1;yPos -= 1;
}xLeft = 73;xRight = 325;yPos = 226;for( i = 0; i<2; i++){
canvas.drawLine(xLeft, yPos, xRight, yPos);xLeft -= 1;xRight += 1;yPos += 1;
}
canvas.setColor("Red");xPos = 322;yTop = 26;yBottom = 222;for(i = 0; i<4; i++){
canvas.drawLine(xPos, yTop, xPos, yBottom);xPos -= 1;yTop += 1;yBottom -= 1;
}xPos = 72;yTop = 22;yBottom = 226;for( i = 0; i<2; i++){
canvas.drawLine(xPos, yTop, xPos, yBottom);xPos -= 1;yTop -= 1;yBottom += 1;
}xLeft = 73;xRight = 325;yPos = 22;for( i = 0; i<2; i++){
![Page 89: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/89.jpg)
Jack Eastwood
canvas.drawLine(xLeft, yPos, xRight, yPos);xLeft -= 1;xRight += 1;yPos -= 1;
}xLeft = 77;xRight = 321;yPos = 222;for( i = 0; i<4; i++){
canvas.drawLine(xLeft, yPos, xRight, yPos);xLeft += 1;xRight -= 1;yPos -= 1;
}canvas.drawImage( imageName, xPosition, yPosition, width, height );canvas.paint();
5.3 Interest calculator html
<html> <head> <title>
Interest Calculator </title> </head> <body>
<h1> Interest Calculator </h1><p> This will calculate the interest on any amount of
money from the interest rate and investment period. </p><form action="server_program_name" method="get"
id="money"><label for="money">
Amount of money:</label><input type="number" name="money"></form><form action="server_program_name" method="get"
id="interest_rate"><label for="interest_rate">
Interest rate(%):</label><input type="number" name="money"></form><form action="server_program_name" method="get"
id="investment_period"><label for="investment_period">
Investment period (years):</label><input type="number" name="investment_period"
min=”0”></form><button value="submit" type="submit">
Calculate Interest</button>
</body>
![Page 90: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/90.jpg)
Jack Eastwood
</html>
5.4 Date validation form
<html> <head> <title>
Date Validation </title> </head>
<body><h1> Date validation </h1><p> Page to validate the day, month and year</p><form id="day" action="server_program_name"
method="get"><label for="day">
Day:</label><input type="number" name="money" min="1"
max="31"></form><form id="month" action="server_program_name"
method="get"><label for="month">
Month:</label><input type="number" name="month" min="1"
max="12"></form><form id="year" action="server_program_name"
method="get">
![Page 91: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/91.jpg)
Jack Eastwood
<label for="month">Year:
</label><input type="number" name="year" value="2000"
></form><button value="submit" type="submit">
Validate date</button>
</body></html>
5.5 Bmi calculator html
<html> <head> <title>
BMI Calculator </title> </head>
<body><h1> BMI calculator </h1><p> Body Mass Index is derived from calculating an
individuals weight and height. The calculation to work out an individuals BMI for a metric conversion is weight/height x height. </p>
<p> There are classifications for different bmi values: </p><p> 18.5 or under: Underweight </p><p> 18.5 - 25: Ideal </p><p> 25 - 30: Overweight </p><p> 30 - 40: Obese </p><p> 40 or over: Very Obese </p><form id="weight" action="server_program_name"
![Page 92: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/92.jpg)
Jack Eastwood
method="get"><label for="weight">
Please enter your weight (KG):</label><input type="number" name="weight" min="0"></form><form id="height" action="server_program_name"
method="get"><label for="height">
Please enter your height (CM):</label><input type="number" name="height" min="0"></form><button value="submit" type="submit">
Calculate BMI</button></body>
</html>
6.1 Metric Conversion
<html> <head> <title>
![Page 93: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/93.jpg)
Jack Eastwood
Metric Conversions </title> <script type = "text/JavaScript">
function milesToKilometers(){ var miles; miles =
document.getElementById( "milesBox" ).value; miles = parseFloat( miles ); var kilometers = miles / 5 * 8; document.getElementById( "kilometersBox" ).value
= kilometers.toFixed(2);}function KilometersToMiles(){var kilometers;kilometers =
document.getElementById( "kilometersBox" ).value;kilometers = parseFloat( kilometers );var miles = kilometers / 8 * 5;document.getElementById( "milesBox" ).value =
miles.toFixed(2);}
</script> </head> <body> <h1>
Metric Conversions </h1> <h2>
Miles : Kilometers </h2> <p>
The conversion factor for miles and kilometersis based on the fact that 5 miles is the samedistance as 8 kilometers.
</p> Miles:
<input type = "text"id = "milesBox"value = "" />
<br />Kilometers:<input type = "text"
id = "kilometersBox"value = "" />
<br /><br /><input type = "button"
id= "convert1"value = "Miles to Kilometers"onclick = "milesToKilometers();" />
<br /><br /><input type = "button"
![Page 94: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/94.jpg)
Jack Eastwood
id = "convert2"value = "Kilometers to Miles"onclick = "KilometersToMiles();" />
</body></html>
![Page 95: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/95.jpg)
Jack Eastwood
6.2 Interest Calculator Page
<html> <head> <title>
Interest Calculator </title>
<script type = "text/Javascript">function InterestCalculator(){var amount;amount = document.getElementById( "money").value;amount = parseFloat( amount );
var rate;rate = document.getElementById( "Interest_rate" ).value;rate = parseFloat( rate );
var years;years = document.getElementById( "Investment_period" ).value;years = parseFloat( years );
// declare, and initialise, identifiers for rate and time
var interest;
interest = (amount * rate * years)/100;
// input a formula to calculate the interest//250 x 10=2500 x 1 = 2500/100=25
alert( interest );}</script>
</head> <body>
<h1> Interest Calculator </h1><p> This will calculate the interest on any amount of money from the
interest rate and investment period. </p><form action="server_program_name" method="get">
<label for="money">Amount of money:
</label><input type="number"id="money" name="money"></form>
<form action="server_program_name" method="get"><label for="interest_rate">
Interest rate(%):</label><input type="number" id="Interest_rate"
name="money"></form><form action="server_program_name" method="get">
<label for="investment_period">Investment period (years):
</label>
![Page 96: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/96.jpg)
Jack Eastwood
<input type="number" id="Investment_period" name="Investment money" min="0">
<br /><br /><input type = "button"
id = "CalculateInterest"value = "Calculate Interest"onclick = "InterestCalculator();" />
</form></body>
</html>
![Page 97: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/97.jpg)
Jack Eastwood
6.3 Validating a date
<html> <head> <title>
Date Validation </title>
<script type = "text/Javascript">function DateValidation(){var day;day = document.getElementById( "day" ).value;day = parseFloat( day );
var month;month = document.getElementById( "month" ).value;month = parseFloat( month );
var year;year = document.getElementById( "year" ).value;
![Page 98: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/98.jpg)
Jack Eastwood
year = parseFloat( year );
var today = new Date();var tDay = today.getDate();var tMonth = today.getMonth()+1;var tYear = today.getFullYear();
var birthday;birthday = new Date( year, month-1, day );
var age;age = today - birthday;
var ageindays;ageindays = age/86400000;
var ageinyears;ageinyears = ageindays/365;
if (day >=1 && day<=31){alert ("Day is valid");}else{alert ("Day is invalid");}
if (month >=1 && month <=12){alert("Month is valid");}else{alert("Month is invalid");}
if (year >= 0 && year <= 2015){alert("Year is valid");}else{alert("Year is invalid");}
document.getElementById( "ageBox" ).value = ageinyears.toFixed(2);
}</script>
</head>
<body>
![Page 99: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/99.jpg)
Jack Eastwood
<h1> Date validation </h1><p> Page to validate the user's birthday</p><form action="server_program_name" method="get">
<label for="day">Day:
</label><input type="number" name="money" id="day"
min="1"></form><form action="server_program_name" method="get">
<label for="month">Month:
</label><input type="number" name="month" id="month"
min="1"></form><form action="server_program_name" method="get">
<label for="year">Year:
</label><input type="number" name="year" id="year" ></form>
<form action="server_program_name" method="get"><label for="age">
Age:</label><input type="number" id="ageBox" value=" " ></form><br /><br />
<input type = "button"id = "ValidateDate"value = "Validate Date's"onclick = "DateValidation();" />
</body></html>
![Page 100: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/100.jpg)
Jack Eastwood
![Page 101: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/101.jpg)
Jack Eastwood
6.4 BMI calculator html
<html> <head> <title>
BMI Calculator </title>
<script type ="text/Javascript">function BMIcalculation(){var height;height =
document.getElementById( "Height" ).value/100;height = parseFloat( height );
var weight;weight =
document.getElementById( "Weight" ).value;weight = parseFloat( weight );
var calculation = weight/(height * height);var bmi = calculation.toFixed(2);var classification;
if (bmi <= 18.4999){classification = " Underweight";
}else if (bmi > 18.4999 && bmi <= 24.999){
classification = " Ideal";}else if (bmi > 24.999 && bmi <= 29.999){
![Page 102: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/102.jpg)
Jack Eastwood
classification = " Overweight";}else if (bmi > 29.999 && bmi <= 39.999){
classification = " Obese";}else if (bmi > 39.999){
classification = " Very obese";}
alert( bmi + classification );document.getElementById( "BMIbox" ).value =
bmi;}
</script></head>
<body><h1> BMI calculator </h1><p> Body Mass Index is derived from
calculating an individuals weight and height. The calculation to work out an individuals BMI for a metric conversion is weight/height x height. </p>
<p> There are classifications for different bmi values: </p>
<p> 18.5 or under: Underweight </p><p> 18.5 - 25: Ideal </p><p> 25 - 30: Overweight </p><p> 30 - 40: Obese </p><p> 40 or over: Very Obese </p>
<form action="server_program_name" method="get">
<label for="weight">Please enter your weight (KG):
</label><input id = "Weight" type="number"
name="weight" min="0"></form><form action="server_program_name"
method="get"><label for="height">
Please enter your height (CM):</label><input id = "Height" type="number"
name="height" min="0"></form><button value="submit" type="submit"
onclick = "BMIcalculation();">Calculate BMI
</button><form action = "server_program_name"
method="get"><label> BMI: </label><input id="BMIbox" type="number"></form>
</body></html>
![Page 103: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/103.jpg)
Jack Eastwood
![Page 104: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/104.jpg)
Jack Eastwood
![Page 105: program logbook](https://reader035.fdocuments.us/reader035/viewer/2022081418/588419961a28ab95518b7615/html5/thumbnails/105.jpg)
Jack Eastwood