Программирование в JavaScript 程序

Загрузка

 

var A=new Array(),C=new Array(),Cr=0,Dy,HN,Me=2,Swi=1,TC,TL=1,Tmr=0,Txt;

for(i=1;i<10;i++){A[i]=new Array()}

A[1][1]=1;A[1][2]=2;A[1][3]=4;A[1][4]=7;A[1][5]=6;A[1][6]=5;A[1][7]=8;A[1][8]=9;A[1][9]=3;

A[2][1]=6;A[2][2]=7;A[2][3]=9;A[2][4]=8;A[2][5]=4;A[2][6]=3;A[2][7]=2;A[2][8]=5;A[2][9]=1;

A[3][1]=3;A[3][2]=8;A[3][3]=5;A[3][4]=2;A[3][5]=1;A[3][6]=9;A[3][7]=7;A[3][8]=4;A[3][9]=6;

A[4][1]=4;A[4][2]=5;A[4][3]=2;A[4][4]=9;A[4][5]=8;A[4][6]=1;A[4][7]=6;A[4][8]=3;A[4][9]=7;

A[5][1]=9;A[5][2]=3;A[5][3]=8;A[5][4]=6;A[5][5]=2;A[5][6]=7;A[5][7]=4;A[5][8]=1;A[5][9]=5;

A[6][1]=7;A[6][2]=6;A[6][3]=1;A[6][4]=5;A[6][5]=3;A[6][6]=4;A[6][7]=9;A[6][8]=2;A[6][9]=8;

A[7][1]=8;A[7][2]=9;A[7][3]=3;A[7][4]=4;A[7][5]=5;A[7][6]=6;A[7][7]=1;A[7][8]=7;A[7][9]=2;

A[8][1]=5;A[8][2]=4;A[8][3]=6;A[8][4]=1;A[8][5]=7;A[8][6]=2;A[8][7]=3;A[8][8]=8;A[8][9]=9;

A[9][1]=2;A[9][2]=1;A[9][3]=7;A[9][4]=3;A[9][5]=9;A[9][6]=8;A[9][7]=5;A[9][8]=6;A[9][9]=4;

C['r']=170;C['g']=170;C['b']=170;

function cbx(){

Swi=(Swi==1)?0:1;

document.getElementById('scr').className=(Swi==0)?'hid':'scr';

document.getElementById('swi').className=(Swi==0)?'off':'on';

document.getElementById('box').className=(Swi==0)?'decThr':'decNon'

}

function chk(){

var err=0,row=0,col=0,s9=0,sc,sr;

for(i=1;i<10;i++){

sc=0;sr=0;

for(j=1;j<10;j++){

sr+=1*document.getElementById('i'+i+j).value;

sc+=1*document.getElementById('i'+j+i).value

}

if(sc!=45||sr!=45){err=1;break}

}

if(err==0){

for(i=1;i<4;i++){

for(j=1;j<4;j++){

s9+=1*document.getElementById('i'+(i+row)+(j+col)).value

}

if(i==3){

if(s9!=45){err=1;break}

s9=0;col+=3;

if(col>6){col=0;row+=3}

if(row<7){i=0}

} } }

Txt=(err==1)?'Эпик-фэйл!':'Судоку решена!';

TC=(err==1)?'b00':'090';TL=1;

if(Swi==0){alert(Txt)}

}

function clr(pt){

switch(pt){

case 1:C['r']=187;C['g']=0;C['b']=0;break;

case 2:C['r']=238;C['g']=170;C['b']=0;break;

case 3:C['r']=221;C['g']=221;C['b']=0;break;

case 4:C['r']=0;C['g']=99;C['b']=0;break;

case 5:C['r']=66;C['g']=221;C['b']=221;break;

case 6:C['r']=0;C['g']=0;C['b']=221;break;

case 7:C['r']=187;C['g']=0;C['b']=187;break;

default:C['r']=170;C['g']=170;C['b']=170

}

document.getElementById('r').value=C['r'];

document.getElementById('g').value=C['g'];

document.getElementById('b').value=C['b'];

custom()

}

function custom(){

C['r']=document.getElementById('r').value;

C['g']=document.getElementById('g').value;

C['b']=document.getElementById('b').value;

document.getElementById('scr').style.backgroundColor='rgb('+C['r']+','+C['g']+','+C['b']+')'

}

function GUI(){

var col,m=new Array(),n,row,ui='<table align="center"><tbody>';

ui+='<tr><td colspan=9><div class="';

ui+=(Swi==1)?'scr':'hid';

ui+='" id="scr">О</div></td></tr>';

HN=0;

for(i=0;i<7;i+=3){

col=tri();

for(j=1;j<10;j++){

for(l=1;l<4;l++){m[l]=A[j][l+i]}

for(l=1;l<4;l++){A[j][l+i]=m[col[l]]}

}

row=tri();

for(j=1;j<10;j++){

for(l=1;l<4;l++){m[l]=A[l+i][j]}

for(l=1;l<4;l++){A[l+i][j]=m[row[l]]}

} }

for(i=1;i<10;i++){

ui+='<tr>';

for(j=1;j<10;j++){

if(j==1){n=rnd(3)}

if(j==4){n=rnd(3)+3}

if(j==7){n=rnd(3)+6}

ui+='<td><input id="i'+i+j+'" maxLength=1 ';

if(j==n){ui+='value="'+A[i][n]+'" disabled'}

else{ui+='onKeyUp="InpChk(this)"'}

ui+='></td>'

}

ui+='</tr>'

}

ui+='<tr><td colspan=3><div class="btn" id="bt1" onClick="hint()">!</div></td><td colspan=3><div class="btn" id="bt2" onClick="GUI()">&#9658;</div></td><td colspan=3><div class="btn" id="bt3" onClick="chk()">&#10003;</div></td></tr></tbody></table>';

document.getElementById('game').innerHTML=ui;

TC='ffffff';Txt='Обыграй ИИ';TL=1;

document.getElementById('scr').style.backgroundColor='rgb('+C['r']+','+C['g']+','+C['b']+')'

}

function hint(){

if(HN<15){

HN++;

var col=new Array(),n=0,row=new Array();

for(i=1;i<10;i++){

for(j=1;j<10;j++){

if(document.getElementById('i'+i+j).value==''){

n++;row[n]=i;col[n]=j

} } }

if(n>0){

if(n>1){n=rnd(n)}

document.getElementById('i'+row[n]+col[n]).value=A[row[n]][col[n]];

document.getElementById('i'+row[n]+col[n]).disabled=1

}else{HN=15}

} }

function inp(el){

var elv=(el.value).trim();

elv=elv.replace(/[^0-9]/g,'');

elv=(elv=='')?0:elv*1;

if(elv>255){elv=255}

el.value=elv;

custom()

}

function InpChk(el){if(isNaN(el.value)||el.value==0){el.value=''}}

function menu(){

if(Me==2){mim()}

Me=(Me==1)?0:1;

document.getElementById('menu').className=(Me==1)?'vis':'hid';

document.getElementById('men').className='me'+Me

}

function mim(){

var bk='<div class="decNon" id="box" onClick="cbx()">';

bk+='<span class="on" id="swi">';

bk+='<span class="flg"></span>';

bk+='</span> Дисплей вкл.</div>';

bk+='<div class="clr">';

bk+='<input id="r" maxLength=3 value='+C['r']+' onKeyUp="inp(this)">';

bk+='<input id="g" maxLength=3 value='+C['g']+' onKeyUp="inp(this)">';

bk+='<input id="b" maxLength=3 value='+C['b']+' onKeyUp="inp(this)">';

bk+='<div class="pat">';

for(i=1;i<8;i++){

bk+='<span class="bg0" id="bg'+i+'" onClick="clr('+i+')"></span>'

}

document.getElementById('menu').innerHTML=bk+'</div></div>'

}

function mof(){if(Me==1){menu()}}

function rnd(hi){return Math.floor(Math.random()*hi)+1}

function starter(){

GUI();timer();

Tmr=setInterval('timer()',1000);

document.getElementById('cop').innerHTML='© '+Dy+' <a href="https://mazayaki.ru/" target="_blank" title="Лайфхаки от Мазаяки">Мазаяки</a>'

}

function timer(){

var dt=new Date(),dh=dt.getHours(),dm=dt.getMinutes(),sp=':';

Dy=dt.getFullYear();

if(dh<10){dh='0'+dh}

if(dm<10){dm='0'+dm}

if(dt.getSeconds()%2==0){sp='<span style="visibility:hidden">'+sp+'</span>'}

document.getElementById('clock').innerHTML=dh+sp+dm;

if(TL>0){txt()}

}

function tri(){

var sw=rnd(6),t=new Array();

switch(sw){

case 1:t[1]=1;t[2]=3;t[3]=2;break;

case 2:t[1]=2;t[2]=1;t[3]=3;break;

case 3:t[1]=2;t[2]=3;t[3]=1;break;

case 5:t[1]=3;t[2]=2;t[3]=1;break;

default:t[1]=3;t[2]=1;t[3]=2

}

return t

}

function txt(){

document.getElementById('scr').innerHTML=Txt.substr(0,TL);

document.getElementById('scr').style.color='#'+TC;

TL=(TL<Txt.length)?TL+1:0

}

JS (JavaScript)

JavaScriptобъектно-ориентированный язык программирования (с адаптированным синтаксисом языка C++), который можно использовать в frontend-разработке интерактивных веб-приложений, выполняющихся в клиентском браузере пользователя. JS-код небольшого объёма допустимо располагать в произвольном месте веб-документа между тегами <script type="text/javascript">…</script>. Но для удобочитаемости код сценариев традиционно выносят в отдельные текстовые файлы (например, с именем script и расширением .js), которые подключают к нужным веб-документам (лучше в начале документа в разделе заголовков после мета-тегов) с помощью конструкции <script type="text/javascript" src="script.js"></script>, как показано в примере кода HTML.

В рамках разработки веб-приложений важным инструментом JS являются функции, создаваемые для многократного выполнения команд и взаимодействия с пользователями при наступлении определённых событий (триггеров). Имена JS-функций и всех используемых переменных резонно подбирать таким образом, чтобы они чётко соответствовали своему назначению и были понятны даже сторонним кодерам (разработчикам) при просмотре кода (код-ревью). Для объявления JS-функции используется конструкция function ИмяФункции(аргумент){операторы;}. Последовательность команд между начальной и конечной фигурными скобками {…} называется телом функции.

В теле JS-функций можно объявлять локальные переменные (с помощью служебного ключевого слова var, предшествующего имени переменной), предназначенные для хранения и обработки данных внутри конкретной функции. После выполнения функций локальные переменные должны обнуляться и высвобождать зарезервированную память, снижая нагрузку на ресурсы пользовательского устройства. Также в JS существуют глобальные переменные, которые могут использоваться разными функциями из разных сценариев веб-документа. Глобальные переменные можно объявлять в произвольном месте кода по мере необходимости (например, непосредственно перед функциями, в которых они должны использоваться). Но для экономии места резонно перечислять все глобальные переменные через запятую в самом начале сценария с использованием служебного слова var всего один раз!

При объявлении переменных в JS не требуется указывать их тип, поскольку он определяется браузером автоматически. Но, например, для объявления массива данных следует использовать расширенное объявление var Arr=new Array();. Строковые переменные могут быть переведены в числовые значения с помощью конструкции '007'*1=7, а числа могут быть переведены в строки с помощью конструкции 7+''='7'. Числовые значения переменных 0 и 1 могут восприниматься как булевы false и true. Поэтому в случаях, когда переменные в условии if равняются только 0 или 1, допустимо относить их числовые значения к условному типу Boolean. При этом, если в условии такие значения должны быть равны true, можно не указывать оператор сравнения и использовать краткую запись. Например, краткая запись условия if(!err){…} равнозначна записям if(!err==true){…} (читается «не err истина») и if(err==0){…}.

В отличие от HTML-комментариев, без которых можно обойтись, в тело функций уместно добавлять JS-комментарии, поясняющие отдельные фрагменты выполняемого кода (поскольку в некоторых случаях легко понять, ЧТО делает конкретная строчка кода, но сложно понять, ЗАЧЕМ она это делает). Также в ряде случаев может возникнуть необходимость закомментировать неиспользуемые фрагменты кода (например, при отладке сценария). В JS для записи комментариев предусмотрено целых два способа: парные слэши (косые черты) //… используются для небольших фрагментов текста, а слэши со звёздочками /*…*/ — для многострочных комментариев.

Мудрые люди говорят, что слово — серебро, а молчание — золото! И если не планируется, что слова могут изменить тишину к лучшему, резонно промолчать! Программирование JS-сценариев строится по схожим принципам. Если конкретная строка не делает код лучше, возможно, без этого фрагмента можно обойтись! В ряде случаев простое решение может оказаться самым успешным…

Функционал JS

// … — конструкция для однострочного комментария.

/* … */ — конструкция для многострочного комментария.

Array() — объект для создания переменных в формате массива данных.

Date() — объект для работы с датой и временем.

document — обращение к текущему документу.

function — служебное слово, предшествующее объявлению функции.

getElementById() — метод для получения доступа к элементу документа по его идентификатору.

getElementsByTagName() — метод для получения доступа к элементу документа по его тегу.

innerHTML — метод для получения доступа или изменения контента элемента.

Math — объект JS, вызываемый при проведении математических операций.

var — служебное слово, предшествующее объявлению переменной.

Навигационная карта

Ознакомиться с другими опциями IT-проекта вам поможет навигационная карта с подробным списком веб-сервисов и приложений! Если вы активно пользуетесь социальными медиа, не забудьте рассказать об этом проекте друзьям и подписаться на группы Мазаяки Проджект в ВКонтакте и Одноклассниках, чтобы быть в курсе важных обновлений! Сайонара-сайонара!

© 2021 Mazayaki Project