index   prev   next RISC OS Notes

JavaScript

tips

Never use document.write() after the document is loaded. It will overwrite the document.
you can still use window.alert for debugging

Sample JavaScript embedded in html

You can see the effect of the following javascript by clicking on this link

<!DOCTYPE html>

<head>
 <link rel="stylesheet" type="text/css" href="jr.css" />
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 <meta http-equiv="author" content="John Rickman"/>
 <title>A Bakehouse-Cyber Product</title>

<!--                 javascript functions go here          -->
<script>

function printhead(hlevel,header)     // this is a javascript comment
{
  document.write("<hr />");
  document.write("<" + hlevel + ">" + header + "</" + hlevel + ">");
}
<!--                                                      -->

function printarray()
{
  var x = 0;
  while (x < arry.length)
  {
    document.write(" arry[" + x + "] = " + arry[x] + "<br />");
    x += 1;
  }
}
<!--                                                      -->
</script>

</head>
<!--                                end of head                      -->

<body>
<div>
<h1> JavaScript that works with NetSurf</h1>

<!--              testing a form and a function                      -->

<!--                                                                 -->
<!--                                javascript starts here           -->
<!--                                                                 -->

<script>
<!--              testing var, and builtin Date function             -->

printhead("h2","  the date today is ");
    var vnewline=("<br />");
    var vspacing=("&nbsp;&nbsp;&nbsp;&nbsp;");
    document.write(Date());
    document.write(vnewline);
    document.write(Date(),vnewline);
    document.write(vnewline);
    document.write(vnewline);

<!--       testing var, cconcat, if, else, search, indexof           -->

printhead("h2","  looking for NetSurf in user agent string");
    var vtag=("user agent string:- &nbsp;&nbsp;&nbsp;&nbsp;");
    var vagent=navigator.userAgent;
    var vtag=vtag.concat(vagent,"<br />");
    document.write (vtag);
    document.write(vnewline);

    var browser="NetSurf"
    if(vagent.search(browser)==-1)
    {
      document.write(vagent.indexOf("Not Found inside string"));
    }
    else
    {
      document.write(browser.concat(" found in string at location "));
    }

<!--              testing typeof keyword                             -->

printhead("h2","  testing keyword: typeof ");
  var newvar = "hello";
  document.write("newvar is a "+ typeof newvar + " variable");

<!--              testing while loop                                 -->

printhead("h2","  testing while loop");
  var x = 1;
  while (x < 5)
  {
    document.write(" x = " + x + "<br />");
    x += 1;
  }

<!--              testing arrays                                     -->

printhead("h2","  setting up and printing the contents of an array");
  var arry = ["uno",
              "dos",
              "tres"
              ];
  var x = 0;
  while (x < arry.length)
  {
    document.write(" arry[" + x + "] = " + arry[x] + "<br />");
    x += 1;
  }
<!--                                                                 -->

printhead("h2","  array insert at start and add entry at end ");

  arry.unshift("cero");
  arry[arry.length] = "cuatro";
  arry.push ( "cinco", "siete");

  var x = 0;
  while (x < arry.length)
  {
    document.write(" arry[" + x + "] = " + arry[x] + "<br />");
    x += 1;
  }

<!--                                                                 -->

printhead("h2","  array shift and pop (top n tail) - print via function ");
  arry.shift();
  arry.pop();
  printarray();

<!--              using a for loop and a function to print arrays    -->

printhead("h2","print array using for loop ");
  for (var x=0; x < arry.length; x+=1)
{
  document.write(" arry[" + x + "] = " + arry[x] + "<br />");
}

</script>

<!--                                                                 -->
<!--                   javascript ends here                          -->
<!--                                                                 -->

<hr />
<p>Copyright &copy; Bakehouse-Cyber 2013
 </p>
</div>
</body>
</html>

© JR 2013