MMDT1022 HTML II and Javascript
Week 1


Week 1

Read chapters 1 & 2 in the JavaScript textbook.  These chapters are introductory chapters on how to put javascript in your html code and how to do some basic things with JavaScript.

The best browser to use for Javascript debugging is Chrome.
More Tools -> Developer Tools

Javascript patterns.
https://github.com/shichuan/javascript-patterns/tree/master/general-patterns

 


Lab Move the Ball

Your instructor will show you an example to follow.

Screen Shot

File 1 - Create a html document.  This document needs a title of "Move the Ball - my name".  This document contains 5 buttons.  The buttons will be labelled "Up", "Down", "Left", "Right", and "Change Ball".  Create a "ball" using the * character.  Apply styling information to it to make it large and to give it an absolute positon. There will be no Javascript in this document.  This document will, however, reference an external javascript file.

File 2 - Create a javascript document.

Part 1 - Create a function initAll() that sets the initial position of the ball, sets the onclick event of the directional buttons to call function moveBall, and sets the onclick event of the change ball button to call function changeBallChar.

Part 2 - Create a function moveBall() that moves the ball around on the screen.  Use the case decision structure to decide what to do based on which of the direction buttons was clicked.

Part 3 - Create a function changeBallChar() that uses a prompt method, to have the user enter a new ball character.  Provide the default character of  "*".

Part 4 - Create a function keyHit() that shows what key is being pressed on the keyboard and moves the ball around on the screen. Use the case decision structure to decide what to do based on which of the arrow buttons on the keyboard have been pressed.

Grading Criteria Points
20
File 1 - html document with buttons 4
File 2 Part 1 - Javascript function initAll() 4
File 2 Part 2 - Javascript function moveBall() 4
File 2 Part 3 - Javascript function changeBallChar() 4
File 2 Part 4 - Javascript function keyHit() 4

Assignment is due one week from when it was assigned.  50% penalty if late.