Looking for ugly code comparisons WAS: Slashdotter looking for kids' programming language

J. Landman Gay jacque at hyperactivesw.com
Thu Dec 11 13:49:02 EST 2008


Judy Perry wrote:
> I again come hat-in-hand to ask for some really ugly-looking code examples
> in those "real world" programming languages to compare with Rev for the
> Slashdot thread.
> Posters there are actually recommending things like Assembly(!), Java, & C#!
> <shudders>
> 
> Specifically the OP was looking to teach basics such as conditionals,
> variables & loops.
> 
> Does anyone have any ugly examples?

There are several in my "Do anything with text" stack from RevLive 2008 
(on card 2), comparing Rev to Javascript. Here are two:

====
display a phone number and hilite each character in sequence
======
JavaScript (57 lines)

<HEAD>
<script type="text/javascript">
<!-- Begin
var bgcolour="#ffffff"; // background colour
var hlcolour="#bfceff"; // highlight colour
var speed=250; // speed colours change, 1 second = 1000

// DON'T EDIT BELOW THIS LINE *
var w3c=document.getElementById;
var ie45=document.all;
var p_txt, p_cnt=0;
window.onload=function() {
   if (w3c||ie45) {
     var 
phone=(w3c)?document.getElementById("phonein"):document.all["phonein"];
     p_txt=(w3c)?phone.firstChild.nodeValue:phone.innerHTML;
     if (ie45) {
       var phoni="";
       for (var i=0; i<p_txt.length; i++) phoni+='<sp'+'an 
id="phon'+i+'">'+p_txt.charAt(i)+'</'+'span>';
       phone.innerHTML=phoni;
     } else {
       while (phone.childNodes.length) 
phone.removeChild(phone.childNodes[0]);
       for (var i=0; i<p_txt.length; i++) {
         var phoni=document.createElement("span");
         phoni.setAttribute("id", "phon"+i);
         phoni.appendChild(document.createTextNode(p_txt.charAt(i)));
         phone.appendChild(phoni);
       }
     }
     p_cnt=p_txt.length-1;
     phone=setInterval ("phon1()", speed);
   }
}
function phon1() {
   var p_ct=p_cnt%p_txt.length;
   var 
p_tmp=(w3c)?document.getElementById("phon"+p_ct):document.all["phon"+p_ct];
   p_tmp.style.backgroundColor=bgcolour;
   p_tmp.style.fontWeight="normal";
   p_ct=++p_cnt%p_txt.length;
 
p_tmp=(w3c)?document.getElementById("phon"+p_ct):document.all["phon"+p_ct];
   p_tmp.style.fontWeight="bold";
   if (((w3c)?p_tmp.firstChild.nodeValue:p_tmp.innerHTML)!=" ") 
p_tmp.style.backgroundColor=hlcolour;
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<span id="phonein">555-123-4567</span>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

In Rev (16 lines, but it could be trimmed to less):

on mouseUp
   create fld "ascii"
   set the autohilite of fld "ascii" to true
   set the traversalOn of fld "ascii" to true
   set the showFocusBorder of fld "ascii" to false
   set the topleft of fld "ascii" to  350,450
   put "612-724-1596" into fld "ascii"
   put the seconds into tStart
   repeat until the seconds - tStart > 5 or the shiftkey is down
     repeat with x = 1 to the number of chars in fld "ascii"
       select char x of fld "ascii"
       wait 200 milliseconds
     end repeat
   end repeat
   delete fld "ascii"
end mouseUp

==========
show a field and select each line in turn; display its contents (this 
was called "Advanced Gallery" on the web page)
===========

Javascript (149 lines):

<HEAD>

<style type="text/css">
.gallerycontroller{
width: 250px
}

.gallerycontent{
width: 250px;
height: 200px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
display: block;
}

</style>

<script type="text/javascript">

var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds)
var displaymode="auto" //displaymode ("auto" or "manual"). No need to 
modify as form at the bottom will control it, unless you wish to remove 
form.

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.gallerycontent{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=0
var totalDivs=0

function getElementbyClass(classname){
partscollect=new Array()
var inc=0
var alltags=document.all? document.all.tags("DIV") : 
document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function contractall(){
var inc=0
while (partscollect[inc]){
partscollect[inc].style.display="none"
inc++
}
}

function expandone(){
var selectedDivObj=partscollect[selectedDiv]
contractall()
selectedDivObj.style.display="block"
temp.options[selectedDiv].selected=true
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
if (displaymode=="auto")
autocontrolvar=setTimeout("expandone()",tickspeed)
}

function populatemenu(){
temp=document.gallerycontrol.menu
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<totalDivs;i++){
var thesubject=partscollect[i].getAttribute("subject")
thesubject=(thesubject=="" || thesubject==null)? "HTML Content "+(i+1) : 
thesubject
temp.options[i]=new Option(thesubject,"")
}

temp.options[0].selected=true
}

function manualcontrol(menuobj){
if (displaymode=="manual"){
selectedDiv=menuobj
expandone()
}
}

function preparemode(themode){
displaymode=themode
if (typeof autocontrolvar!="undefined")
clearTimeout(autocontrolvar)
if (themode=="auto"){
document.gallerycontrol.menu.disabled=true
autocontrolvar=setTimeout("expandone()",tickspeed)
}
else
document.gallerycontrol.menu.disabled=false
}

function startgallery(){
document.getElementById("controldiv").style.display="block"
getElementbyClass("gallerycontent")
totalDivs=partscollect.length
populatemenu()
for (i=0; i<document.gallerycontrol.mode.length; i++){
if (document.gallerycontrol.mode[i].checked)
displaymode=document.gallerycontrol.mode[i].value
}

if (displaymode=="auto")
document.gallerycontrol.menu.disabled=true
expandone()
}

if (window.addEventListener)
window.addEventListener("load", startgallery, false)
else if (window.attachEvent)
window.attachEvent("onload", startgallery)
else if (document.getElementById)
window.onload=startgallery

</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<div class="gallerycontent" subject="What is JavaScript?">
JavaScript is a scripting language originally developed by Netscape to 
add interactivity and power to web documents. It is purely client side, 
and runs completely on the client's browser and computer.
</div>

<div class="gallerycontent" subject="Java & JavaScript Differences">
Java is completely different from JavaScript- it's more powerful, more 
complex, and unfortunately, a lot harder to master. It belongs in the 
same league as C, C++, and other more complex languages.
</div>

<div class="gallerycontent" subject="What is DHTML?">
DHTML is the embodiment of a combination of technologies- JavaScript, 
CSS, and HTML. Through them a new level of interactivity is possible for 
the end user experience.
</div>

<div id="controldiv" style="display:none" class="gallerycontroller">
<form name="gallerycontrol">
         <select class="gallerycontroller" size="3" name="menu" 
onChange="manualcontrol(this.options.selectedIndex)">
         <option>Blank form</option>
         </select><br>
Auto: <input type="radio" checked name="mode" value="auto" 
onClick="preparemode('auto')"> Manual: <input type="radio" name="mode" 
value="manual" onClick="preparemode('manual')">
</form>

</div>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Rev (36 lines):

local sStart
local sCount = 0

on mouseUp
   create fld "ascii"
   set the dontwrap of fld "ascii" to false
   set the rect of fld "ascii" to the rect of fld "example"
   create fld "list"
   set the width of fld "list" to 200
   set the height of fld "list" to 350
   set the topleft of fld "list" to the topleft of fld "bullets"
   set the listbehavior of fld "list" to true
   put "What is Revolution?" &cr& "Ease of Use" &cr& "Concise Coding" 
into fld "list"
   put the seconds into sStart
   send "doLoop" to me in 1
end mouseUp

on doLoop
   if the seconds - sStart > 20 or the shiftkey is down then
     delete fld "ascii"
     delete fld "list"
   else
     get nextline(sCount)
     set the hilitedline of fld "list" to lineoffset(item 1 of it,fld 
"list")
     put item 2 of it into line 3 of fld "ascii"
     put (sCount+1) wrap 3 into sCount
     send "doLoop" to me in 2 seconds
   end if
end doLoop

function nextline pCount
   get "What is Revolution?" &comma& "Revolution is a scripting language 
that adds interactivity and power to stacks." & \
       cr & "Ease of Use" &comma& "No other language has the simplicity 
and power contained in Revolution, and no other language is as easy to 
learn." & \
       cr & "Concise Coding" &comma& "What would take dozens or hundreds 
of lines in other languages can often be done in a handful of lines of 
Revolution script."
   return line pCount of it
end nextline

-- 
Jacqueline Landman Gay         |     jacque at hyperactivesw.com
HyperActive Software           |     http://www.hyperactivesw.com



More information about the use-livecode mailing list