Random pearls of wisdom.

It bothered me for a couple of years that I did not know javascript. It does not bother anymore: I spent three long days studying javascript. Now I know it:

I have in a file — do not ask why — various citations in the following form:

<citation>
  <citatitle> Aphorism, n.:</citatitle>
  <citate>
     A concise, clever statement.
   </citate>
  <citatitle>Afterism, n.: </citatitle>
  <citate>
     A concise, clever statement you don't think of until too late.
   </citate>
  <author> James Alexander Thom </author>
</citation>
			

Javascript allows me to include in a web page some functions to manipulate the contents of the web page. My javascript program reads the citations from the file and presents them to you interactively.

For anyone knowing some programming the principle is simple, but the devil is in the details. And there are plenty of cryptic details:

<div  style="float: right" >
  <button id="nappi" type="button" onclick="displayJoke()">
    <p>Want to see</p>
    <p id="btnTxt">A pearl of wisdom no: 0?</p>
  </button>
  <p style="color: white">Do not like one? Click it to remove.</p>
  <p id="ijokes" style="color: white">Total number of pearls of wisdom: 0</p>
</div>

The above creates initially the button on the web page.

Note: I omitted all "if Microsoft then exception this and that else normal " statements from my program. Thus, if you are using Internet Explorer this may not work.

The following happens when you click the button. As you can easily see you will be shown a new pearl of wisdom:

function displayJoke(){
    joke= jokes[i];
    resultDocument = xsltProcessor.transformToFragment(joke,document);
    document.getElementById("joke").appendChild(resultDocument);
    pearlNumber();}
	

How does the wisdom get its appearance?

div.fcitation {
  float: left;
  max-width: 40%;
  border-style: ridge;
  border-color: SkyBlue;
  border-width: 6px; border-radius: 20px;
  margin: 1em;
  padding: 2em;
  background-color: #EBF5D6;}

How does the piece of wisdom know how to react on the mouse?

<xsl:template match="citation" >
  <div class="fcitation"
       onclick="removeJoke(this)"
       onmouseover="style.color = 'red'"
       onmouseout="style.color='black'">
      <xsl:apply-templates  />
   </div>
</xsl:template>

This is what happens when you click a piece of wisdom:

	function removeJoke(disliked){
	var r=confirm("Remove this wisdom?");
	if (r—true)
	{ parent = disliked.parentNode;
	parent.removeChild(disliked);}}

    function pearlNumber(){
    i= Math.round(ijokes*Math.random());
    document.getElementById("btnTxt").innerHTML =
      "a pearl of wisdom no: " + i;
    }

You think I am bizarre? What do you think about all those filling in sudokus?

I demonstrated my javascript program to my wife:

"So brilliant!" she exclaimed with a voice of a mother praising her little child for a successfull visit on a potty.

A newer version with some features not documented above.