День рождения JavaScript

в 11:42, , рубрики: javascript, Блог компании Mail.Ru Group, Веб-разработка, день рождения javascript

День рождения JavaScript - 1

Всё-таки странно иногда звучит фраза «люди постарше». Особенно применительно к 30-летним. С другой стороны, мир информационных технологий меняется так быстро, что волей не волей приходится употреблять эту избитую фразу. Так вот, люди постарше ещё помнят, что когда-то не было никакого разнообразия веб-браузеров. Мир делился на два полюса, как во времена холодной войны — были только Internet Explorer и Netscape Navigator. NN был на голову лучше соперника (похоже, это просто его карма): он был быстрее, удобнее, с более широким функционалом и продуманным интерфейсом. И в недрах коллектива, создававшего Netscape Navigator в далёком 1995 году, был также разработан один из самых распространённых и популярных ныне языков программирования — JavaScript. Изначально он был наречён LiveScript, но 4 декабря 1995 года его официально переименовали. Так что сегодняшний день можно считать днём рождения JavaScript. С чем мы и поздравляем от всей души всех, кто использует JavaScript в своих проектах по долгу службы или по зову сердца!

JavaScript давно превратился в мощный универсальный язык. С его помощью сегодня можно решать разнообразные задачи, но в начале своего пути он прочно ассоциировался у нас с надоедливостью, неказистостью и низкой производительностью. Почему? Помните, как в конце девяностых-начале нулевых, многие вебмастеры любили «прикручивать» к своим сайтам всевозможные джаваскриптовые красивости? Вроде падающих снежинок, шлейфов за курсором и прочего подобного трэша? Всё бы ничего, вкус есть не у каждого, но зачастую эти примочки заставляли компьютеры так тормозить, словно они выполняли очень тяжёлые вычислительные задачи. А ведь всего-то неведомый автор сайта впилил найденный на просторах интернета скрипт, «для красоты» и потому что круто. Сейчас уже и компьютеры куда мощнее, да и любителей подобных украшений сильно поубавилось. Но всё же есть ещё адепты старой школы, которые используют скриптовые «красоты».

Например, вот такие летающие по странице ангелочки (хотя в оригинале это были бабочки):

День рождения JavaScript - 2

День рождения JavaScript - 3

Код скрипта

<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>

Это уже красочный современный вариант, да и траектория полёта довольно сложная. А вот эта летающая тарелка — словно прямиком из девяностых (надо положить alien.gif и кусочек звёздного неба space.jpg в одну папку со скриптом):

День рождения JavaScript - 4

День рождения JavaScript - 5

День рождения JavaScript - 6

Код скрипта

<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>

В преддверии нового года становятся популярны скрипты, изображающие соответствующую атрибутику. Например, гирлянда в шапке страницы (нуждается в доработке):

День рождения JavaScript - 7

Код скрипта

<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>

Вот ещё один популярный эффект из прошлого: прыгающий волной текст.

День рождения JavaScript - 8

Код скрипта

<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>

Нельзя не вспомнить и такую «красоту», как цикличное изменение цвета текста.

День рождения JavaScript - 9

Код скрипта

<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>

Та самая классика, «дождь» на странице. Извините, скриншотом его наглядно не передать.

Код скрипта

<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>

Зимой многие сайты обзаводились «падающими снежинками» (поместите файл snow.gif в одну папку со скриптом).

День рождения JavaScript - 10

День рождения JavaScript - 11

Код скрипта

<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>

Вообще сейчас уже очень трудно найти в «дикой природе» те олдскульные JavaScript визуальные эффекты. Если у вас есть на примете подобные раритеты, поделитесь ссылками в комментариях.

Долгих лет имениннику JavaScript!

Автор: TeamMRG

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js