Lab 3 – HTML 5 Canvas & CSS3 - No-IPfoss.ddns.net/notes/polyu/peter/2014-15sem1/COMP3421/Lab3...The Hong Kong Polytechnic University COMP3421 Web Application Design and Development

The Hong Kong Polytechnic University

COMP3421 Web Application Design and Development Lab 3 – HTML 5 Canvas & CSS3

Page 1 of 16

Lab 3 – HTML 5 Canvas & CSS3

Objective After this lab session, you will

- Get further understanding on the usage of JavaScript

- Hands-on-experience in using DOM and external JavaScript file in HTML documents

- Hands-on-experience in using HTML 5 Canvas

- Hands-on-experience in using CSS3

- Exercise on Page 3, 5, 7. Additional Exercise om Page 12.

Laboratory

More on HTML 5 elements

A. Create a new web page called lab3a.html with the following code. You are going to

learn how to link with the external JavaScript.

<html> <head>

<title>COMP321</title> <script type="text/javascript" src="test.js"> </script>

</head> <body>

<form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form>

</body> </html>

Create a JavaScript file called test.js using the following code and store it in the same

directory with the file lab3a.html

function displaymessage()

{

alert("Hello World!");

}

i. Place lab3a.html and test.js under directory public_html

ii. Go to http://www.comp.polyu.edu.hk/~{your student id}/lab3a.html

iii. Check the result



Page 2 of 16

B. Create a new web page called lab3b.html with the following code. You are going to

learn how to use Regular Expressions in JavaScript to validate the data.

<html > <head><script type="text/javascript"> function validate() { var REname = /^[a-zA-Z\s]+$/; var REemail = /^[\w]+(\.[\w]+)*@([\w\-]+\.)+[a-zA-Z]{2,7}$/; var REbirth = /^[\d]{2}[\-][\d]{2}[\-][\d]{4}$/; var REmobile = /^[0-9\s\+\-]{8,15}$/; var name = document.getElementById("name").value; var email = document.getElementById("email").value; var birth = document.getElementById("birth").value; var mobile = document.getElementById("mobile").value; var msg = ""; if (!REname.test(name)) msg += "- name\n"; if (!REemail.test(email)) msg += "- email address\n"; if (!REbirth.test(birth)) msg += "- birthday\n"; if (!REmobile.test(mobile)) msg += "- mobile number\n"; if (msg != "") alert("The following inputs are invalid.\n" + msg); else alert("All inputs are valid."); } </script></head> <body><form name="fm"> <pre style="font-family:san serif;font-size:16px"> English Name: <input type="text" name="name" id="name" /> Email address: <input type="text" name="email" id="email" /> Birthday: <input type="text" name="birth" id="birth" /> Mobile number: <input type="text" name="mobile" id="mobile" /> <input type="button" value="Validate" onclick="validate()"/> </pre> </form></body> </html>

i. Place this file under directory public_html

ii. Go to http://www.comp.polyu.edu.hk/~{your student id}/lab3b.html

iii. Check the result

iv. Modify the html by using the date element of HTML5.



Page 3 of 16

Exercise 1. You are going to use Regular Expression to perform the email validation.

2. Download the template of products.html from the following URL:

http://www4.comp.polyu.edu.hk/~cshfng/labEx2ans.html

3. Modify products.html by adding a regular expression to replace HTML5 element,

so that the web page can validate user’s email address.

http://www4.comp.polyu.edu.hk/~cshfng/labEx2ans.html



Page 4 of 16

Working with HTML 5 canvas

A. Create a new web page called lab3part2a.html with the following code. You are going

to learn how to control the elements in HTML5.

<html>

<body>

<canvas id="e" width="1000" height="800" style="border:1px

solid #c3c3c3;">

Your browser does not support the canvas element.

</canvas>

<script>

var canvas = document.getElementById("e");

var context = canvas.getContext("2d");

var koala = new Image();

koala.src = "Koala.jpg";

koala.onload = function() {

for (var y = 0;

y < 500;

y += 37) {

context.drawImage(koala, 0, y, 50, 37);


}

for (var x = 0;

x < 300;

x += 50) {

context.drawImage(koala, x, 250, 50, 37);

}

context.drawImage(koala, 400, 200, 50, 37);

for (var y = 250;

y < 500;

y += 37) {


}



Page 5 of 16

context.fillStyle = '#00f';

context.font = 'italic 30px sans-serif';

context.textBaseline = 'top';

context.fillText ('Hello world!', 800, 0);

context.font = 'bold 30px sans-serif';

context.strokeText('Hello world!', 800, 50);

};

</script>

</body>

</html>

iv. Place lab3Part2b.html under directory public_html

v. Go to http://www.comp.polyu.edu.hk/~{your student id}/lab3Part2a.html

Check the result

Exercise

B. Modify the sample and display the image as following pattern



Page 6 of 16

C. Create a new web page called lab3part2b.html with the following code. You are going

to learn how to animate the elements in HTML5.

<html>

<head>

<title>Ball Bouncing</title>

<script type="text/javascript">

var ctx;

var radx=2;

var rady=5;

var x=50;

var y=70;

function draw(){

ctx= myCanvas.getContext("2d");

ctx.clearRect(0,0,500,500);

ctx.beginPath();

ctx.fillStyle="#00ff00";

ctx.arc(x,y,20,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

if( x<0 || x>500)

radx=-radx;

if( y<0 || y>500)

rady=-rady;

x+=radx;

y+=rady;

}

function addcount(){

if(localStorage.counter){

localStorage.counter = Number(localStorage.counter)+1;

}

else{

localStorage.counter = 1;

}

document.getElementById("count").innerHTML = "Visit Count: " + localStorage.counter;

}

setInterval(draw,10);

</script>

</head>



Page 7 of 16

<body onload = "addcount()";

<audio autoplay loop>

<source src="bg.mp3">

</audio>

<canvas id="myCanvas" width="500" height="500"></canvas>

<p id = "count"></p>

</body>

</html>

vi. Place lab3Part2b.html under directory public_html

vii. Go to http://www.comp.polyu.edu.hk/~{your student id}/lab3Part2b.html

viii. Check the result

Exercise D. Create a new web page called lab3part3a.html with the following code. Complete the

Code inside the loop until a checker pattern is displayed.

<html> <body> <canvas id="e" width="300" height="300" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("e"); var cxt = canvas.getContext("2d"); var mapArray = [ [0,1,0], [1,0,1], [0,1,0] ]; var cellSize = 100; for(var i in mapArray){ for (var j in mapArray[i]){ // Coding } }



Page 8 of 16

</script> </body> </html>

E. Modify the code as following. setInterval() is used to redraw the display by recall

draw() in each 0.1s. Try to draw a circle and animate as shown.

<!DOCTYPE HTML> <html> <body> <canvas id="e" width="300" height="300" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var canvas = document.getElementById("e"); var cxt = canvas.getContext("2d"); var mapArray = [ [0,0,0], [0,0,1], [0,1,0] ]; var cellSize = 100; var mainChar = [1,0]; var timeCounter = 1.0;



Page 9 of 16

function draw(){ cxt.clearRect(0,0,300,300); for(var i in mapArray){ for (var j in mapArray[i]){ if (mapArray[i][j] == 1){ cxt.fillStyle="#DDDDDD"; cxt.fillRect(i*cellSize,j*cellSize,100,100); } } }

//Coding cxt.closePath(); cxt.fill(); timeCounter += 1; } setInterval(draw,100);

</script> </body> </html>

F. Add the following code into your program. Try to control the xy coordinate of the circle



Page 10 of 16

G. Use the mouse or keyboard to get the focus to the canvas

<canvas id="e" width="300" height="300" tabindex="0" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>

canvas.addEventListener( "keydown", doKeyDown, true);

function doKeyDown(e) { alert(e); }

H. Modify the program until the circle cannot pass through the grey area and go outside

the canvas.

Introduction to CSS3

A. Create a new web page called lab3Part4a.html with the following code. You are going

to learn how to do a 3D animation by using CSS3.

B. By using the new features of CSS3, no additional JavaScript is needed to animate the

div. We only need to set the properties of each keyframes.

<html>

<head>

<style type="text/css">

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

}

@keyframes myfirst

{

0% {background:red; left:0px; top:0px;}



Page 11 of 16

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}


}

@-moz-keyframes myfirst /* Firefox */

{






}

@-webkit-keyframes myfirst /* Safari and Chrome */

{






}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer and

Opera.</p>

<div></div>

</body>

</html>



Page 12 of 16

Additional Exercise

1. Create a simple page called lab3_1, ask users for 2 string inputs, and check whether one is

the substring of another one

(Please use substr(), string.length and Looping to do it)

2. Create a new web page called lab3_2.html with the following code and will in the blank, you

are going re-write the “Lucky Message” example using Array.

Modify the program to check the null value for the user input, and display the message

“Please enter your lucky number for today” for the input value is null.

(you may use if statement to handle this)

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">



Page 13 of 16

<head>

<title>COMP320</title>

<script type = "text/javascript">

function luckymsg()

{

var msg =

["Congratulations! You're so Lucky Today!",

"Well, it should be a nice day to you!",

"Sorry, you may meet some unlucky things today! Be careful!"];

var

luckyvalue=parseInt(document.getElementById("luckyvalue").value);

if ((___________) || (________________))

alert(_____________________);

else

alert(________________);

}

</script>

</head>

<body>

<h2>Please Input a value [1, 2 or 3]</h2>

<form>

<input type="text" id="______________" />

<input type="button" value="Calculate!" onclick="__________"

/>

</form>

</body>

</html>

3. Create a new web page called lab3_3.html with the following source code, you are going to

handle string in JavaScript.



Page 14 of 16





<head>


<script type = "text/javascript">

function handleString()

{

var string1 = __________("Please enter the String:", "");

var length = ___________("Please enter the length of the substring:", "");

var substring1 = ________________________;

______("The substring of '" + string1 + "' can be : '" + substring1 + "'");

}

</script>

</head>

<body onload = "_____________">

</body>

</html>

4. Create a new web page called lab3_4.html with the following code, you are going to get 10

integers from the user, and output the maximum and minimum values





<head>



function maxmin()

{

var i;

var in1, in2;

var max;

var min;

for (________________)

{

in1 = window.prompt("Please input 10 integers (" + i + " / 10)",

"");

in2 = ____________(in1);

if (i==____)

{



Page 15 of 16

max = _____;

min = ______;

}

else

{

max = Math.___(___, max);

min = Math.____(____, min);

}

}

alert("The max. number is " + max + "\n\nThe min. number is "

+ min);

}

</script>

</head>

<body onload="__________________">

</body>

</html>

5. Create a new web page called lab3_5.html with the following code, you are going to build a simple clock in the web page. Place this file under your web directory and see the result.





<head>



function addzero(i)

{

if (i < 10)

{

i = "0" + i;

}

return i;

}

function runClock()

{

var today = new Date();

var h = ________________;

var m = ________________;

var s = _________________;

h = addzero(_);



Page 16 of 16

m = addzero(_);

s = addzero(_);

document.getElementById('clock').innerHTML = "The time now is: "

+ h + ":" + m + ":" + s;

t = setTimeout(‘_______', 1000);

}

</script>

</head>

<body onload="______________">

<div id="clock"></div>

</body>

</html>

~ End ~

Documents

Lab 3 – HTML 5 Canvas & CSS3 - No-IPfoss.ddns.net/notes/polyu/peter/2014-15sem1/COMP3421/Lab3...The Hong Kong Polytechnic University COMP3421 Web Application Design and Development