Flor Azul.net

The linked page above, OnClick_Sor.html, uses pre-defined CSS styles and JavaScript onclick event handlers to provide some useful user interaction.

The CSS styles defined in the document head provide the initial display values- display:none (hidden) or display:block (shown) for the paragraph text, unordered list and images appearing at the bottom of the page:

Ex.1: CSS setup for Onclick_Sor.html

[Note: the last two ID entries explicitly declare the default display attribute value, display:block, for the purpose of demonstration.]

Upon the user’s mouse click of the >>Show important works piece of text, JavaScript’s onclick event handler invokes the getElementById() function and changes the values of the display attributes for the three elements involved as follows:

>>Show important works (#show_e) text to display=none
>>Hide important works (#hide_e) text to display=block
The composer’s works list (#important_works) to display=inline

Ex.2: “Show/hide toggling” of text through JavaScript’s onclick event handler

On the flipside of the onclick event, the display attribute values are reversed as follows when the user clicks on >>Hide important works:

Piece of text, >>Hide important works (#hide_e), is set to display=none
>>Show important works (#show_e) is reset to display=block
The composer’s works list (#important_works) is reverted to display=none

The image <div>’s work in much the same way as those for the unordered list. Upon user’s click of the >>Show further illustrations piece of text, the >>Hide further illustrations text (#hide_p) and the images (#images) are set to display=block and display=inline, respectively. Clicking >>Hide further illustrations switches out the class fakelink text and sets the display property of the images to none.

Ex.3: “Show/hide toggling” of text and images

Resources:

Sams Teach Yourself HTML, CSS and JavaScript by Julie C. Meloni (Sams). Copyright 2012 Julie C. Meloni, 978-0-672-33332-3.

http://en.wikipedia.org/wiki/Fernando_Sor

This is my first tutorial on my new web developer site- hooray!

For this project, I am tackling a relatively simple concept but one which may benefit from some elucidation since I have found ambiguous information regarding it during my learning process.

Assignment operator (“=”)

A single “=” sign in JavaScript indicates the assignment of a literal value to a variable or the assignment of one variable to another. As in:

Ex. 1: Assignment operator (“=”)

Equality operator (“==”) [Relational operator, type 1]

Two equal signs (“==”) represent the first of two types of relational operators, which are used to evaluate boolean expressions to ‘true’ or ‘false’.

Ex. 2: Equality operator (“==”) comparing a variable to a value

The equality operator exploits JavaScript’s loosely-typed characteristics by providing automatic type conversion (e.g, from number to string), as demonstrated in Ex. 3 below.

Ex. 3: Equality operator (“==”) comparing string and number variable types

The preceding function returns true since, upon evaluation, the JavaScript interpreter converts febdays1′s string “29″ to a number, whereby it is equal to febdays2′s number 29.

Identity operator (“===”) [Relational operator, type 2]

As of JavaScript 1.3, the identity operator, like the equality operator, compares two operands but prohibits automatic type conversion when comparing two different variable types.

Ex. 4: Identity operator (“===”) type-safe comparison

In the preceding example, only the first statement is executed, printing “loosely typed.” The identity operator in the second statement disallows conversion of the string “29″ to the number 29 and, in this case, the conditional statement evaluates to false.

Resources:

Sams Teach Yourself HTML, CSS and JavaScript by Julie C. Meloni (Sams). Copyright 2012 Julie C. Meloni, 978-0-672-33332-3.

Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Websites by Robin Nixon (O’Reilly). Copyright 2009 Robin Nixon, 978-0596157135.