ASCII-animations

Perhaps you already have a javascript or two on your pages. Sometimes they conflict with each other. Also, an embedded javascript makes it difficult to validate the HTML coding. Putting your javascript into an external file can often resolve these problems.

It's very easy to put a javascript into an external file. Here again is the singing bird javascript (optimized) as it appears when embedded in an HTML file. To turn the javascript into an external file, copy and paste the coding that appears between "<script [...] hide from older browsers" and "// end [...] </script>" into a text editor (such as notepad).

Save the file as "bird.js". Upload the file via ASCII to your web directory into a folder named "js".

<script type="text/javascript" language="javascript">
<!-- hide from older browsers
    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf("mac") != -1) { var a="\r"; } else { var a="\n"; }
    var max=0;    
function tlist(){ max=tlist.arguments.length;
        for(i=0;i<max;i++) this[i]=tlist.arguments[i];
    }
    tl = new tlist(

"   \<\") "+a,
"   \>\") "+a

    );
    var x=0;
    function tick() {
        document.f.t.value=" "+a+
        tl[x]+
        "   ( \>\\"+a+   
        "    \" \\\\"+a+
        "       \\  ejm"+a;
        x++; if(x==max) x=0;
        //if(confirm('continue?'))
            setTimeout("tick()",70);
    }

    // end-->

</script>

Put the form coding into the javascript

For all of the other lessons, you have been placing the form coding in your HTML file. But you can also include the form coding for the ASCII-animation in the javascript itself (the part that appeared AFTER </script> in the previous examples). This way, if javascript is disabled, there will be no sign of it at all; many people have javascript turned off for a reason and don't really want to see signs of what they have chosen to ignore....

To include the form parts, you will use document.write. Please remember that if you have any apostrophes in the text, you must place a leading slash before each one.)

    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf("mac") != -1) { var a="\r"; } else { var a="\n"; }
    var max=0;    
function tlist(){ max=tlist.arguments.length;
        for(i=0;i<max;i++) this[i]=tlist.arguments[i];
    }
    tl = new tlist(

"   \<\") "+a,
"   \>\") "+a

    );
    var x=0;
    function tick() {
        document.f.t.value=" "+a+
        tl[x]+
        "   ( \>\\"+a+   
        "    \" \\\\"+a+
        "       \\  ejm"+a;
        x++; if(x==max) x=0;
        //if(confirm('continue?'))
            setTimeout("tick()",70);
    }

// put the form coding into the javascript
document.write ('<form name="f" action="self" id="f"><b>bird singing</b><br />');
document.write ('<small>-ejm98</small><br /><textarea name="t" rows="6" cols="15"></textarea></form>');
document.write ('<p><b>to <a href="https://llizardakaejm.wordpress.com/gallery/ascii-animations/">');
document.write ('llizard\'s Javascript ASCII-animations</a></b></p>');

Put the onload= command into the javascript

You can also include onload="tick();" in the javascript rather than placing it in the body tag of the HTML. This may help to prevent conflicts in javascripts if you have other javascripts (such as image rollovers, clocks, etc) on your page.

    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf("mac") != -1) { var a="\r"; } else { var a="\n"; }
    var max=0;    
function tlist(){ max=tlist.arguments.length;
        for(i=0;i<max;i++) this[i]=tlist.arguments[i];
    }
    tl = new tlist(

"   \<\") "+a,
"   \>\") "+a

    );
    var x=0;
    function tick() {
        document.f.t.value=" "+a+
        tl[x]+
        "   ( \>\\"+a+   
        "    \" \\\\"+a+
        "       \\  ejm"+a;
        x++; if(x==max) x=0;
        //if(confirm('continue?'))
            setTimeout("tick()",70);
    }

// put the form coding into the javascript

document.write ('<form name="f" action="self" id="f"><b>bird singing</b><br />'+
'<small>-ejm98</small><br /><textarea name="t" rows="6" cols="15"></textarea></form>'+
'<p><b>to <a href="https://llizardakaejm.wordpress.com/gallery/ascii-animations/">'+
'llizard\'s Javascript ASCII-animations</a></b></p>');

// put onload command into the javascript 
onload=tick();                  // alternatively, erase this line and 
// place it inside the body tag of your HTML page:  <body onload="tick();">

(For more detailed information about document.write, please see w3schools.com: JavaScript Statements and w3schools.com: JavaScript Special Characters.)

Put the javascript on an HTML page

And finally, here is the coding that you would put onto your HTML page to call up the external javascript:

<html>
<head>
<title>your title here</title>
</head>
<body>

<b>bird singing</b> --ejm
<script src="/js/bird.js" type="text/javascript" language="javascript"></script>


</body>
</html>


                     \ 
                      \,^^%---
                      <\/  \ See? It's easy when you know how....
                      >
                      >^^
                     /| 
ejm                  | \


To first part of animation lesson
To second part of animation lesson
To third part of animation lesson
To fourth part of animation lesson
To fifth part of animation lesson
To sixth part of animation lesson