JavaScript – part I

JavaScript – part I

Maciej Grzenda, PhD Michał Okulewcz, MSc

Warsaw University of Technology

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

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

p. 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++

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

necessary

Task 1 – On-line CSS editing

Modify CSS attributes on-the-fly with Firebug/Developer Tools in Chrome:

1. Open a document you want to edit in a web browser

2. Activate developer extensions of your browser

3. Read more at:

https://developer.chrome.com/

devtools#devtools-window

CSS and HTML attributes can be dynamically

changed in developer tools

p. 4

Task 2 – form validation

Develop the following form. It is trivial, but it contains some validation:

Only digits can be accepted. At least one digit has to be

provided.

Non-empty string has to be provided for surname and identifier

1. Use JavaScript rather than pattern attribute

2. The validation should be performed when a user:

a. moves a cursor to another input,

b. clicks on Submit query button (as some inputs might have been skipped, hence not validated so far)

Task 2 – to start from

Event handlers are registered for onSubmit (entire form) and onChange (input items). In this example, the JavaScript code is declared in head section (see below)

p. 6

Task 2 – further details…

1. The entire code can be found in

lab_5_task_2.html

2. This includes the trim() function

Task 2 – code debugging

Firebug/Chrome DevTools debug console can be used to monitor the execution of JavaScript code, set breakpoints, watch variables etc.

After a breakpoint is

placed in the code, the age value is changed. When a mouse cursor is moved to another input item, the onChange event handler is activated

p. 8

Error console

• Modern browsers provide error consoles displaying JavaScript errors

• Depending on a browser version, the access path is different. The term to search for in a browser menu is Developer tools/For developers/Web

developer, etc.

• One of the ways to use the console is:

– Clear error messages referring to other recently opened documents first – Recreate the error condition and observe the error details

• Sample error console:

Task 3 – registration for basketball trainings

• Add the following solutions to task 2:

– Move the JavaScript code to a separate file (with .js extension) – Add an input item for PESEL (YYMMDDNNNNN expected)

– Check if PESEL value supplied by a user seems to be correct i.e.

whether first 6 digits represent correct date

– Calculate age of the person based on PESEL number. The age text box should be disabled

– If the age is less than 10 years, reject the data

1. Use lecture notes and http://www.w3schools.com/js/default.asp for details of the language

2. Use built-in Date object to get current date,

3. Use built-in String object to check PESEL value

p. 10

Task 4

Investigate the behaviour and code of lab_5_task_4.html

1. These buttons change attributes of HTML elements incl. CSS display attribute

2. In this case new document content is dynamically added

Task 4 – behind the scenes

1. A web browser works with internal representation of a document, which has a tree-like structure

2. Due to dynamic changes (here: adding a new country: Spain) the document

p. 12

Task 5

Use JavaScript to develop the following solution:

• Three DIV elements are displayed in the same place

• Only one of them is visible

• Three buttons are used to show a corresponding DIV and hide the remaining DIVs

• A separate button is used to add one more:

– Button with a label: Page [N]

– DIV with a text: A new page has been added. It is page number [N]

Task 6

Use JavaScript to develop the following solution:

• A button used to add new pages:

– Button with a label: Page [N]

– DIV with a text entered by a user in a prompt window

• Hint: the added text is stored in a Page [N] button click event handler