JavaScript and AJAX lab

Function, timer, events, DOM style+content, PHP/JS mix

• Write event.html which shows a simple alert "Hi there!"
• Make the alert appear not at the page loading, but 3 seconds later.
• Add a button, initially containing text "0 clicks". Each click increments the number shown on the button, e.g. "5 clicks".
• Add a paragraph and two buttons, Show and Hide. Initially, Show is disabled. Clicking on Hide hides the paragraph (using visibility property), disables itself and enables the Show button (using disabled property). Show button acts similarly.
• Add a video. When the user stops the video, the paragraph is hidden, and when the user plays again the video, the paragraph becomes visible.
• Write js.php which shows n consecutive stars (with n a parameter in the URL, read using PHP) which change colour: when the mouse is over a star all the stars become red, elsewhere they change back to black.

Form validation (and security)

• Create validate.html with a form containing a button and an edit field (age) which prevents submission when it is empty or is not in the interval 0-122. Use min and max HTML attributes for that.
• Instead of HTML, use JavaScript to prevent submitting when the above requirements are not met and, additionally, when the number is not odd.
• (ONLY IF ENOUGH TIME: Write the processing page in PHP, which simply shows the given age. Afterwards, show how a user can bypass the HTML and JavaScript validations and send to PHP an invalid age. Explain orally how to fix the PHP file to throw an error if the age is not in the expected interval.)

Canvas (can be skipped)

• Create canvas.html with an edit box, initially with value 50 and which allows only a number between 0 and 100 (percentage), and an "Update" button (without form).
• Create a canvas which shows a rectangle (width 400px, height 50px) divided in two parts: the left one in red, the right one in blue. Initially, both parts are equal: 50-50.
• When the user clicks the button, the canvas is updated: the percentage of the left part is taken from the edit box, and the right part takes the remaining space.

Write tic-tac-toe in JavaScript

• Create a page with the 3x3 grid.
• Use onclick on each square to print a simple alert.
• Modify onclick to show the alert only on squares with dot.
• Modify onclick so that it changes the square to x or o.
• Check for the winner.
• Check for draw game.

AJAX

• Write a file sec.txt on server, initially containing the string "0-0". Write a Web page ajax.php showing just a paragraph, initially with text "0-0".
• Each 2 seconds, ajax.php gets the content of sec.txt from server, and updates its paragraph with the text received. Check that the page is really updated when you manually change sec.txt on server, such as "1-0".
• Instead of only the score, modify the PHP page to show also the teams: "Romania 0-0 France". The player with a greater score is printed in blue, the other in black.