highlighting feature such as Notepad++

(1)

JavaScript – part III

Maciej Grzenda, PhD

Warsaw University of Technology

Faculty of Mathematics and Information Science M.Grzenda@mini.pw.edu.pl

http://www.mini.pw.edu.pl/~grzendam

(2)

HTML/CSS/JS tasks

• In this task and all the other

HTML/CSS/JavaScript tasks use any text editor you prefer, if possible with syntax highlighting feature such as Notepad++

highlighting feature such as Notepad++

• Verify whether your document is compliant with HTML standard and fix errors, if

necessary

(3)

Task 1 – DOM methods

• Develop a generic set of procedures that will check if every text box with mandatory feature was provided with a value

• If not, a message should be displayed. The text of the message should contain a label automatically retrieved from a label

element element

• Hints:

– use DOM methods (such as getElementsByTagName()) to automatically get a list of INPUT (or LABEL) elements in a document

– Consider adding a new MANDATORY attribute to mandatory INPUT items and setting it to TRUE for mandatory items

– Use www.w3schools.com for DOM tutorial and www.w3.org for DOM reference

(4)

Task 2 – DOM methods with JavaScript library

• Use jQuery or prototype to reimplement solution of task 1

1. It is important to note here that JavaScript libraries such as jQuery or prototype use regular JavaScript and DOM methods in the background

2. An important advantage of such libraries is the fact they have been prepared and tested to work with different web browsers

3. In spite of standardisation efforts, differences in JavaScript handling among different browsers are still observed. Hence, the need for libraries revealing developers from resolving such problems and minimising extra testing

overhead.

(5)

Task 3 – HTML5 and canvas element

• Develop a canvas-based solution

• The canvas should have a red border and blue color

• Scenario:

– A user moves around in rectangular canvas by pressing – A user moves around in rectangular canvas by pressing

h,l,k,j to move left, right, up, and down, respectively

– Wherever a user moves, a MINI logo is placed in the new location and green trace is left in old locations

• Hint: use jQuery library for keyboard handling

(6)

Task 3 – sample result

1. In this case simple rectangles and pictures are drawn

2. The capabilities of canvas go far

beyond this beyond this 3. See

http://www.w3sch ools.com/tags/ref_

canvas.asp for details