Java Script #1

Java Scrip #1

Have an Alert box with new line in it
Print special character like copyright sign
Load an HTML page depending on the browser type
Use COOKIE to count the user access to a page
Make a switch to another page after a delay
Change an image when clicking on it
Check and Uncheck a checkbox
Emulate the BACK button
Have a simple on-screen clock
Make sure that a page is displayed in a Frame
Make sure that a page is not displayed in a Frame
Send email without CGI
Send email with attachment
Instruct the browser to bypass the Cache
Open a window with no menu, toolbar or status
Open a page from a FORM INPUT field
Compare Strings

Have an Alert box with new line in it

<script>
alert("line1\r\nline2\r\nline3");
</script>

This tip is also good for inserting new line into a TextArea.

"\r\n" stands for carriage Return and New line. On Netscape, only the \n may be necessary but with Explorer, you need both. To be compatible with both always use the combination "\r\n".
Print special character like copyright sign

Use the escape "&#" and the character number (in decimal) with ";". Or use the escape character "\" with the octal code. The following program prints all available characters with their decimal/octal codes

<script>
document.write("There is no &#169; on this tip");
document.write(" and no &#174; or &#153 too <br>");
for (i=33; i<256; i++) {
  document.write
    ("&#"+i+"     dec =" + i +"   oct =" + (i).toString(8) );
  document.write("<br>");
  }
</script>

To show in an alert box with accentued characters, use something like this :

alert(&quot;\350 \351 \352 \353&quot;);

Load an HTML page depending on the browser type

<script>
if (navigator.appName == "Microsoft Internet Explorer")
  document.write('<META HTTP-EQUIV="REFRESH" CONTENT="1%3bURL%3dmsie.html">');
else
  document.write('<META HTTP-EQUIV="REFRESH" CONTENT="1%3bURL%3dnetscape.html">');
</script>

The browser version can be obtain with

browserVersion = parseInt(navigator.appVersion);

Use COOKIE to count the user access to a page

Make a switch to another page after a delay
Actually there is no Javascript for this trick, only HTML!


<script>
cookieName = "Counter";
function doCookie() {

  var today = new Date()
  var expires = new Date()
  // valid for 1 year
  expires.setTime(today.getTime() + 24*365*3600000)

  if (document.cookie) {
     index = document.cookie.indexOf(cookieName);
     } 
   else { 
     index = -1;
     }
  if (index == -1) {
     document.cookie=cookieName+"=1; " + 
           " expires=" + expires.toGMTString() ;
     } 
  else {
     countbegin = (document.cookie.indexOf("=", index) + 1);
     countend = document.cookie.indexOf(";", index);
     if (countend == -1) {
        countend = document.cookie.length;
        }
     count = eval(document.cookie.substring(countbegin, countend)) + 1;
     document.cookie=cookieName+"="+count+"; " +
           " expires=" + expires.toGMTString();

     }
  }

function getTimes() {
  count=0;
  if(document.cookie) {
    index = document.cookie.indexOf(cookieName);
    if (index != -1) {
       countbegin = (document.cookie.indexOf("=", index) + 1);
       countend = document.cookie.indexOf(";", index);
       if (countend == -1) {
          countend = document.cookie.length;
          }
       count = document.cookie.substring(countbegin, countend);
       }
    }
  return(count);
  }
document.write("You have accessed this page <b>"+getTimes()+"</b> times.");

if (getTimes()==0) {
   document.write("Welcome! This is your first time here");
   } 
</script></pre>
    </td>
  </tr>
</table>
<script>
cookieName = "Counter";
function doCookie() {

  var today = new Date()
  var expires = new Date()
  // valid for 1 year
  expires.setTime(today.getTime() + 24*365*3600000)

  if (document.cookie) {
     index = document.cookie.indexOf(cookieName);
     } 
   else { 
     index = -1;
     }
  if (index == -1) {
     document.cookie=cookieName+"=1; " + 
           " expires=" + expires.toGMTString() ;
     } 
  else {
     countbegin = (document.cookie.indexOf("=", index) + 1);
     countend = document.cookie.indexOf(";", index);
     if (countend == -1) {
        countend = document.cookie.length;
        }
     count = eval(document.cookie.substring(countbegin, countend)) + 1;
     document.cookie=cookieName+"="+count+"; " +
           " expires=" + expires.toGMTString();

     }
  }

function getTimes() {
  count=0;
  if(document.cookie) {
    index = document.cookie.indexOf(cookieName);
    if (index != -1) {
       countbegin = (document.cookie.indexOf("=", index) + 1);
       countend = document.cookie.indexOf(";", index);
       if (countend == -1) {
          countend = document.cookie.length;
          }
       count = document.cookie.substring(countbegin, countend);
       }
    }
  return(count);
  }
document.write("You have accessed this page <b>"+getTimes()+"</b> times.");

if (getTimes()==0) {
   document.write("Welcome! This is your first time here");
   } 
</script>


<p>

"content" is the delay in seconds. Here we will wait 5 seconds before jumping to the specified URL.

To auto-refresh (reload) a page after the delay, the HTML solution is still good. A JAVASCRIPT alternative would be :

<script>
var aTimer;

function aReload() {
  location.reload(true);
  }

function startReload() {
  aTimer = setTimeout("aReload()", 5000);
  }

function stopReload() {
  clearTimeout(aTimer);
  }
</script>

Change an image when clicking on it

<script>
  function change_img(source,index) {
    document.images[index].src = source;
    }
</script>

<a HREF="JavaScript: change_img('open.html',0)">
<img SRC="http://weborbits.com/t/jva/closed.gif"></a>

Check and Uncheck a checkbox

<script>
function checkAll(check) {
   for (i=0;i<6;i++) {
     if (check) { 
        document.forms[0].chbx[i].checked=true;
        }
     else {
        document.forms[0].chbx[i].checked=false;
        }
     }
   }
</script>
</pre>
    <form>
      <pre><input TYPE="checkbox" NAME="chbx" value="ON">
<input TYPE="checkbox" NAME="chbx" value="ON">
<input TYPE="checkbox" NAME="chbx" value="ON">
<input TYPE="checkbox" NAME="chbx" value="ON">
<input TYPE="checkbox" NAME="chbx" value="ON">
<input TYPE="checkbox" NAME="chbx" value="ON">
<input TYPE="button" NAME="btnCheck" VALUE="check All" onClick="checkAll(true)">
<input TYPE="button" NAME="btnCheck" VALUE="unCheck All" onClick="checkAll(false)">

Emulate the BACK button

</pre>
    <form>
      <pre><input TYPE="button" NAME="back" VALUE="BACK" onClick="history.go(-1)">

Have a simple on-screen clock

Make sure that a page is displayed in a Frame

<script>
 var tick;
 function stop() {
   clearTimeout(tick);
   }
 function simpleClock() {
   var ut=new Date();
   var h,m,s;
   var time="        ";
   h=ut.getHours();
   m=ut.getMinutes();
   s=ut.getSeconds();
   if(s<=9) s="0"+s;
   if(m<=9) m="0"+m;
   if(h<=9) h="0"+h;
   time+=h+":"+m+":"+s;
   document.sclock.stime.value=time;
   tick=setTimeout("simpleClock()",1000);    
   }
</script>

</pre>
    </td>
  </tr>
</table>

<form NAME="sclock">
  <pre><input TYPE="text" NAME="stime" SIZE="13">

<script>
function checkStatus() {
  page = self.location.href;
  if (page != "index.html") {
     top.location.href = "../other/index.html";
     return true;
     }
  }
</script>

note : replace "index.html" by your "frame-handler" page Make sure that a page is not displayed in a Frame

<script>
function checkStatus() {
  page = self.location.href;
  if (page != top.location.href) {
     top.location.href = page;
     return true;
     }
  }
</script>

Send email without CGI
Works with Netscape. The important thing is to NAME all the INPUT. The browser will prompt the user that an email is about to be sent.

</pre>
    <form METHOD="POST" ACTION="mailto:someone@somewhere.com" ENCTYPE="text/plain">
      <input type="hidden" name="score" value="1234"><input type="hidden" name="player" value="Mr. Smith"><pre><input TYPE="submit" VALUE="Submit">

To set the subject :

ACTION="mailto:[email protected]?subject=automatic_email"

To send a Carbon Copy of the message to a second person, use the "cc" parameter :

</pre>
    <form METHOD="POST" ACTION="mailto:someone@somewhere.com?subject=important&amp;cc=someoneelse@somewhere.com" ENCTYPE="text/plain">
      <pre><input TYPE="submit" VALUE="Submit">

While you can use a FORM to define the message body, it's also possible to define the body directly in the mailto: URL :

mailto:[email protected]?body=HelloWorld

Send email with attachment
Netscape only

</pre>
    <form ACTION="mailto:someone@somewhere.com?subject=REPORT" METHOD="POST" ENCTYPE="multipart/form-data">
      <pre><input TYPE="FILE" NAME="myReportFile" SIZE="70">

<input TYPE="SUBMIT">

Instruct the browser to bypass the Cache

Open a window with no menu, toolbar or status

Open a page from a FORM INPUT field

<script Language="JavaScript"> 
function simpleDialog(msg) { 
features = 
   'toolbar=no,location=no,directories=no,status=no,menubar=no,' +
   'scrollbars=no,resizable=no,width=200,height=100' 
dlg = window.open ("","Dialog",features) 
dlg.document.write ("<BODY bgColor='black' text='white'><script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-47423994-1', 'fortunecity.ws');
  ga('send', 'pageview');

</script>
<center>
<br>
	
	<div>	
<script language="javascript" type="text/javascript" src="http://ad.broadcaststation.net/ads/show_ad.php?width=728&height=90"></script>
	</div>
</center>
") 
dlg.document.write ("<H2><CENTER>",msg,"</CENTER></H2>") 
dlg.document.write ("<FORM><CENTER>") 
dlg.document.write ("<INPUT type='button' value='OK' onClick = 'self.close()'>") 
dlg.document.write ("</CENTER></FORM>") 
} 
</script></pre>
    </td>
  </tr>
</table>
<script Language="JavaScript"> 
function simpleDialog(msg) { 
features = 
   'toolbar=no,location=no,directories=no,status=no,menubar=no,' +
   'scrollbars=no,resizable=no,width=200,height=100' 
dlg = window.open ("","Dialog",features) 
dlg.document.write ("<BODY bgColor='black' text='white'><script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-47423994-1', 'fortunecity.ws');
  ga('send', 'pageview');

</script>
<center>
<br>
	
	<div>	
<script language="javascript" type="text/javascript" src="http://ad.broadcaststation.net/ads/show_ad.php?width=728&height=90"></script>
	</div>
</center>
") 
dlg.document.write ("<H2><CENTER>",msg,"</CENTER></H2>") 
dlg.document.write ("<FORM><CENTER>") 
dlg.document.write ("<INPUT type='button' value='OK' onClick = 'self.close()'>") 
dlg.document.write ("</CENTER></FORM>") 
} 
</script>


<form>
  <pre><input type="button" value="test simple dialog" onClick="simpleDialog(&quot;Click to close&quot;)">

Compare Strings
Case sensitive:

<script>
function gotoURL(){
  var newURL = document.GotoForm.theURL.value
  document.location.href=newURL
  }
</script></pre>
    </td>
  </tr>
</table>
<script>
function gotoURL(){
  var newURL = document.GotoForm.theURL.value
  document.location.href=newURL
  }
</script>


<form ACTION="JavaScript:gotoURL()" METHOD="GET" NAME="GotoForm">
  <pre>URL:
<input TYPE="text" NAME="theURL" REQUIRED SIZE="50" MAXLENGTH="100">
<input TYPE="submit" VALUE="Goto">

  if (aString == anotherString) {
     alert("equals");
     }

Not case-sensitve:

  if (aString.toUpperCase() == anotherString.toUpperCase()) {
     alert("equals");
     }

12/04/99