Geekly Articles each Day
⬆️ ⬇️

Javascript birthday





Still, the phrase “older people” sometimes sounds strange. Especially when applied to 30-year-olds. On the other hand, the world of information technology is changing so quickly that, willy-nilly, you have to use this hackneyed phrase. So, older people still remember that once there was no variety of web browsers. The world was divided into two poles, like during the Cold War - there were only Internet Explorer and Netscape Navigator. NN was better than his opponent (it looks like it's just his karma): he was faster, more comfortable, with a wider functionality and a thoughtful interface. And in the depths of the team that created Netscape Navigator back in 1995, one of the most widely used and popular programming languages, JavaScript, was also developed. It was originally named LiveScript, but on December 4, 1995 it was officially renamed. So today can be considered the birthday of JavaScript. With what we congratulate heartily all those who use JavaScript in their projects on duty or at the call of the heart!



JavaScript has long become a powerful universal language. With his help, today you can solve various tasks, but at the beginning of his path, he was firmly associated in our country with annoyance, backwardness and low productivity. Why? Remember how in the late nineties and early zero, many webmasters loved to “tie” all kinds of beauty javascript to their sites? Like falling snowflakes, loops behind the cursor and other similar trash? Everything would be fine, not everyone has a taste, but often these gadgets made computers slow down as if they were performing very heavy computational tasks. But after all, an unknown author of the site saw the script found on the Internet, “for beauty” and because it’s cool. Nowadays, computers are much more powerful, and fans of such jewelry have diminished a lot. But there are still adherents of the old school who use script "beauty".



For example, here are such flying angels on the page (although in the original they were butterflies):

')









Script code
<script language="JavaScript1.2"> /* Flying Butterfly script (By BGAudioDr@aol.com) Modified slightly/ permission granted to Dynamic Drive to feature script in archive */ var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES //FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !! var floatimages=new Array(); floatimages[0]='http://noginsk.ucoz.com/ipg/papillonkiss017.gif'; floatimages[1]='http://noginsk.ucoz.com/ipg/papillonkiss018.gif'; //*********DO NOT EDIT BELOW*********** var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false; var IE4 = (document.all)? true : false; var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false; var wind_w, wind_h, t='', IDs=new Array(); for(i=0; i<floatimages.length; i++){ t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a ">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a >'; t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">'; t+=(NS4)? '</a></layer>':'</a></div>'; } document.write(t); function moveimage(num){ if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false; if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true; if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false; if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true; moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep); } function getnewprops(num){ IDs[num].Ydir=Math.floor(Math.random()*2)>0; IDs[num].Xdir=Math.floor(Math.random()*2)>0; IDs[num].Ystep=Math.ceil(Math.random()*Ymax); IDs[num].Xstep=Math.ceil(Math.random()*Xmax) setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax)); } function getscrollx(){ if(NS4 || NS6)return window.pageXOffset; if(IE4)return document.body.scrollLeft; } function getscrolly(){ if(NS4 || NS6)return window.pageYOffset; if(IE4)return document.body.scrollTop; } function getid(name){ if(NS4)return document.layers[name]; if(IE4)return document.all[name]; if(NS6)return document.getElementById(name); } function moveidto(num,x,y){ if(NS4)IDs[num].moveTo(x,y); if(IE4 || NS6){ IDs[num].style.left=x+'px'; IDs[num].style.top=y+'px'; }} function getidleft(num){ if(NS4)return IDs[num].left; if(IE4 || NS6)return parseInt(IDs[num].style.left); } function getidtop(num){ if(NS4)return IDs[num].top; if(IE4 || NS6)return parseInt(IDs[num].style.top); } function moveidby(num,dx,dy){ if(NS4)IDs[num].moveBy(dx, dy); if(IE4 || NS6){ IDs[num].style.left=(getidleft(num)+dx)+'px'; IDs[num].style.top=(getidtop(num)+dy)+'px'; }} function getwindowwidth(){ if(NS4 || NS6)return window.innerWidth; if(IE4)return document.body.clientWidth; } function getwindowheight(){ if(NS4 || NS6)return window.innerHeight; if(IE4)return document.body.clientHeight; } function init(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); for(i=0; i<floatimages.length; i++){ IDs[i]=getid('pic'+i); if(NS4){ IDs[i].W=IDs[i].document.images["p"+i].width; IDs[i].H=IDs[i].document.images["p"+i].height; } if(NS6 || IE4){ IDs[i].W=document.images["p"+i].width; IDs[i].H=document.images["p"+i].height; } getnewprops(i); moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H))); if(NS4)IDs[i].visibility = "show"; if(IE4 || NS6)IDs[i].style.visibility = "visible"; startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100); }} function hidebutterfly(){ for(i=0; i<floatimages.length; i++){ if (IE4) eval("document.all.pic"+i+".style.visibility='hidden'") else if (NS6) document.getElementById("pic"+i).style.visibility='hidden' else if (NS4) eval("document.pic"+i+".visibility='hide'") clearInterval(startfly) } } if (NS4||NS6||IE4){ window.onload=init; window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); } } </script>






This is a colorful modern version, and the flight path is quite complicated. But this flying saucer - as if straight from the nineties (you need to put alien.gif and a piece of the starry sky space.jpg in one folder with the script):















Script code
 <div id="pic1" style="position:absolute; visibility:visible; left:0px; top:0px; z-index:1"> <img src="alien.gif" border="0"> </div> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin document.body.background="space.jpg"; var isNS = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4)); var pic1=document.getElementById("pic1").style; var _all = ''; var _style = ''; var wwidth, wheight; var ydir = '++'; var xdir = '++'; var id1, id2, id3; var x = 1; var y = 1; var x1, y1; if(!isNS) { _all='all.'; _style='.style'; } function getwindowsize() { clearTimeout(id1); clearTimeout(id2); clearTimeout(id3); if (isNS) { wwidth = window.innerWidth - 55; wheight = window.innerHeight - 50; } else { wwidth = document.body.clientWidth - 55; wheight = document.body.clientHeight - 50; } id3 = setTimeout('randomdir()', 20000); animate(); } function randomdir() { if (Math.floor(Math.random()*2)) { (Math.floor(Math.random()*2)) ? xdir='--': xdir='++'; } else { (Math.floor(Math.random()*2)) ? ydir='--': ydir='++'; } id2 = setTimeout('randomdir()', 20000); } function animate() { eval('x'+xdir); eval('y'+ydir); if (isNS) { pic1.left = x+pageXOffset; pic1.top = y+pageYOffset; } else { pic1.pixelLeft = x+document.body.scrollLeft; pic1.pixelTop = y+document.body.scrollTop; } if (isNS) { if (parseInt(pic1.top) <= 5+pageYOffset) ydir = '++'; if (parseInt(pic1.top) >=wheight+pageYOffset) ydir = '--'; if (parseInt(pic1.left) >= wwidth+pageXOffset) xdir = '--'; if (parseInt(pic1.left) <= 5+pageXOffset) xdir = '++'; } else { if (pic1.pixelTop <= 5+document.body.scrollTop) ydir = '++'; if (pic1.pixelTop >= wheight+document.body.scrollTop) ydir = '--'; if (pic1.pixelLeft >= wwidth+document.body.scrollLeft) xdir = '--'; if (pic1.pixelLeft <= 5+document.body.scrollLeft) xdir = '++'; } id1 = setTimeout('animate()', 30); } window.onload=getwindowsize; window.onresize=getwindowsize; // End --> </script>






On the eve of the new year, scripts depicting appropriate attributes are becoming popular. For example, a garland in the header of the page (needs some work):







Script code
 <SCRIPT language=javascript type=text/javascript> //<![CDATA[ var Ovr2=''; if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat') {cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";} else {cot_t1_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";} if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat') {cot_t1_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";} else {cot_t1_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";} var cot_tl_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: left top;}'; var cot_tl_fixedCSS='#cot_tl_fixed{position:fixed;'; var cot_tl_fixedCSS=cot_tl_fixedCSS+'_position:absolute;'; var cot_tl_fixedCSS=cot_tl_fixedCSS+'top:0px;'; var cot_tl_fixedCSS=cot_tl_fixedCSS+'left:0px;'; var cot_tl_fixedCSS=cot_tl_fixedCSS+'clip:rect(0 100 85 0);'; var cot_tl_fixedCSS=cot_tl_fixedCSS+cot_t1_DOCtp; var cot_tl_popCSS='#cot_tl_pop {background-color: transparent;'; var cot_tl_popCSS=cot_tl_popCSS+'position:fixed;'; var cot_tl_popCSS=cot_tl_popCSS+'_position:absolute;'; var cot_tl_popCSS=cot_tl_popCSS+'height:98px;'; var cot_tl_popCSS=cot_tl_popCSS+'width: 1920px;'; var cot_tl_popCSS=cot_tl_popCSS+'right: 120px;'; var cot_tl_popCSS=cot_tl_popCSS+'top: 20px;'; var cot_tl_popCSS=cot_tl_popCSS+'overflow: hidden;'; var cot_tl_popCSS=cot_tl_popCSS+'visibility: hidden;'; var cot_tl_popCSS=cot_tl_popCSS+'z-index: 99999;'; var cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2; document.write('<style type="text/css">'+cot_tl_bodyCSS+cot_tl_fixedCSS+cot_tl_popCSS+'</style>'); function COT(cot_tl_theLogo,cot_tl_LogoType,LogoPosition,theAffiliate) {document.write('<div id="cot_tl_fixed">'); document.write('<><img src='+cot_tl_theLogo+' alt="" border="0"></a>'); document.write('</div>');} //if(window.location.protocol == "http:") COT("http://www.honeybearplayhomes.com/resources/flashing%20christmas%20lights.gif", "SC2", "none"); //]]> </SCRIPT>






Here is another popular effect from the past: wave-jumping text.







Script code
 <script language="JavaScript" type="Text/JavaScript"> fifteenth="Your Text Here";sixteenth=1;var nineteenth=document.getElementById && document.all;seventeenth=new Array();seventeenth[0]=-1;seventeenth[1]=-3;seventeenth[2]=-6;seventeenth[3]=-10;seventeenth[4]=-8;seventeenth[5]=-3;seventeenth[6]=-2;eighteenth=0;twentieth=0;first2=""; function second2(){ if (nineteenth && !sixteenth){third2.innerHTML=fifteenth;return;} if(fifteenth.length > 6){ for(fourth2=0; fourth2 != fifteenth.length;fourth2++){first2=first2+"<span style='position:relative;' id='n"+fourth2+"'>"+fifteenth.charAt(fourth2)+"</span>"};third2.innerHTML=first2;first2="";fifth2();} else{alert("Too short message!");}} function fifth2(){sixth2=(document.getElementById)? document.getElementById("n0") : document.all.n0;sixth2.style.left=-twentieth; if(twentieth != 9){twentieth=twentieth+3;setTimeout("fifth2()",30);} else{fifteenth3();}} function fifteenth3(){sixth2.style.left=-twentieth; if(twentieth != 0){twentieth=twentieth-3;setTimeout("fifteenth3()",30)} else{seventeenth3();}} function seventeenth3(){first2=""; for(fourth2=0;fourth2 != fifteenth.length;fourth2++){ if(fourth2+eighteenth > -1 && fourth2+eighteenth < 7){first2=first2+"<span style='position:relative;top:"+seventeenth[fourth2+eighteenth]+"'>"+fifteenth.charAt(fourth2)+"</span>";} else{first2=first2+"<span>"+fifteenth.charAt(fourth2)+"</span>";}}third2.innerHTML=first2;first2=""; if(eighteenth != (-fifteenth.length)){eighteenth--;setTimeout("seventeenth3()",30);} else{eighteenth=0;setTimeout("second2()",30);}} </script> <h1><div align="center" id="eighteenth3" style="color:red"></div></h1> <script language="javascript" type="text/javascript"> if (document.all||document.getElementById){third2=(document.getElementById)? document.getElementById("eighteenth3") : document.all.eighteenth3;second2();}else document.write(fifteenth); </script>






It is impossible not to recall such a “beauty” as a cyclic change in the color of the text.







Script code
 <script language="javascript" type="text/javascript"> <!-- Begin function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) { this[i] = initArray.arguments[i]; } } var ctext = "Wow! Look at all the pretty colors! ;-)"; var speed = 1000; var x = 0; var color = new initArray( "red", "blue", "green", "black" ); document.write('<div align="center" id="c">'+ctext+'</div>'); function chcolor(){ document.getElementById("c").style.color=color[x]; (x < color.length-1) ? x++ : x = 0; } setInterval("chcolor()",1000); // End --> </script>






That same classic, "rain" on the page. Sorry, the screenshot does not clearly convey it.



Script code
 <script language="javascript" type="text/javascript"> <!-- Begin var no = 50; var speed = 15; var ie4up = (document.all) ? 1 : 0; var ns4up = !ie4up; var s, x, y, sn, cs; var a, r, cx, cy; var i, doc_width = 800, doc_height = 600; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } x = new Array(); y = new Array(); r = new Array(); cx = new Array(); cy = new Array(); s = 8; for (i = 0; i < no; ++ i) { initRain(); document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">"); document.write(",</font></div>"); } function initRain() { a = 6; r[i] = 1; sn = Math.sin(a); cs = Math.cos(a); cx[i] = Math.random() * doc_width + 1; cy[i] = Math.random() * doc_height + 1; x[i] = r[i] * sn + cx[i]; y[i] = cy[i]; } function makeRain() { r[i] = 1; cx[i] = Math.random() * doc_width + 1; cy[i] = 1; x[i] = r[i] * sn + cx[i]; y[i] = r[i] * cs + cy[i]; } function updateRain() { r[i] += s; x[i] = r[i] * sn + cx[i]; y[i] = r[i] * cs + cy[i]; } function raindropNS() { for (i = 0; i < no; ++ i) { updateRain(); if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) { makeRain(); doc_width = self.innerWidth; doc_height = self.innerHeight; } document.getElementById("dot"+i).style.top = y[i]; document.getElementById("dot"+i).style.left = x[i]; } setTimeout("raindropNS()", speed); } function raindropIE() { for (i = 0; i < no; ++ i) { updateRain(); if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) { makeRain(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } document.all["dot"+i].style.pixelTop = y[i]; document.all["dot"+i].style.pixelLeft = x[i]; } setTimeout("raindropIE()", speed); } if (ns4up) { raindropNS(); } else if (ie4up) { raindropIE(); } // End --> </script>






In winter, many sites acquired “falling snowflakes” (place the snow.gif file in the same folder as the script).











Script code
 <script language="javascript" type="text/javascript"> <!-- Begin var no = 25; // snow number var speed = 50; // smaller number moves the snow faster var snowflake = "snow.gif"; var ie4up = (document.all) ? 1 : 0; var ns4up = !ie4up; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.getElementById("dot"+i).style.top = yp[i]; document.getElementById("dot"+i).style.left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx[i] += stx[i]; document.all["dot"+i].style.pixelTop = yp[i]; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowIE()", speed); } if (ns4up) { snowNS(); } else if (ie4up) { snowIE(); } // End --> </script>






In general, it is already very difficult to find those old-school JavaScript visual effects in the “wild” nature. If you have in mind these rarities, share links in the comments.



Long years of birthday JavaScript!

Source: https://habr.com/ru/post/244949/

More articles:



All Articles