Помогите пожалуйста. Оптимизация кода.
 

<script type='text/javascript'>
var text = '';
var pass='ACB';
var coordX=0;
var coordY=0;
var Width=64;
var Height=64;
function getCoords() {
imageMapX = findPosX(imageMap);
imageMapY = findPosY(imageMap);
imageMap.onmousemove = moveDot;
imageMap.onmouseover = moveDot;
imageMap.onclick = coordsFix;
}
function moveDot(cursor) {
if(!cursor) var cursor = window.event;
var x = 0;
var y = 0;
if (cursor.pageX || cursor.pageY) {
x = cursor.pageX;
y = cursor.pageY;
}
else if (cursor.clientX || cursor.clientY) {
x = cursor.clientX + document.body.scrollLeft;
y = cursor.clientY + document.body.scrollTop;
}
x -= imageMapX;
y -= imageMapY;
x -= dX;
y -= dY;
(x < 0) ? coordX = 0 : coordX = x;
(y < 0) ? coordY = 0 : coordY = y;
}

function coordsFix() {
if(((coordX<Width/2+10)&&(coordX>Width/2-10))&&((coordY<Height/2+10)&&(coordY>Height/2-10)))
{
text = '';
var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();
}
else{
if(coordX<Width/2)
{
if(coordY<Height/2)
text = text+'A';
else
text = text+'C';
}
else
{
if(coordY<Height/2)
text = text+'B';
else
text = text+'D';
}}
if(text==pass)
{
var picture = document.getElementById('lock');
picture.src = 'port/lock2.png?' + Math.random();
}
else
{
var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();
}

}

function findPosX(obj) {
var currleft = 0;
if (obj.offsetParent)
while (obj.offsetParent) {
currleft += obj.offsetLeft
obj = obj.offsetParent;
}
else if (obj.x) currleft += obj.x;
return currleft;
}

function findPosY(obj) {
var currtop = 0;
if (obj.offsetParent)
while (obj.offsetParent) {
currtop += obj.offsetTop
obj = obj.offsetParent;
}
else if (obj.y) currtop += obj.y;
return currtop;
}

function getObj(name) {
if (document.getElementById) return document.getElementById(name);
else if (document.all) return document.all[name];
else if (document.layers) return document.layers[name];
else return false;
}

function init() {
dX = 7;
dY = 7;
myForm = getObj('mainForm');
imageMap = getObj('schemePlace');
imageMap.onmouseover = getCoords;
mapWdt = imageMap.offsetWidth - dX;
mapHgt = imageMap.offsetHeight - dY;
}

try {
window.addEventListener('load', init, false);
} catch(e) {
window.onload = init;
}

function check()
{
if(text==pass) alert('Пароль верный,поздравляю!');
else alert('Не угадал пароль,тыкай еще!');
text='';
var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();
}
</script>

<center>

<div id='schemePlace'
style='width:64px;height:64px;'>
<image src='port/lock.png' id='lock'>

<br >
<input type='button' class='input' value='Нажми на меня' onclick='check()'/>


в общем-то вот, необходимо уменьшить код, урезать лишние части.
сам скрипт рисует замок"лок.пнг", при нажатии в лев. верх, лев. низ, прав. верх, замок "открывается" "лок2.пнг". при неправильном наборе не открывается и сообщение выводится "пароль неверный", предыдущий набор сбрасывается.

touch_the_sky,
ты две темы создал или у меня глюки?

глюки видимо..

Ага, все это один большой глюк, наверное, не стоит отвечать глюку.

И зачем врать?
равно, как и создавать две темы?
http://javascript.ru/forum/events/40...ciya-koda.html

И кстати...

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

да просто пошутил))

<script type='text/javascript'>
var text = '';
var pass='ACB';
var coordX=0;
var coordY=0;
var Width=64;
var Height=64;
function getCoords() {
imageMapX = findPosX(imageMap);
imageMapY = findPosY(imageMap);
imageMap.onmousemove = moveDot;
imageMap.onmouseover = moveDot;
imageMap.onclick = coordsFix;
}
function moveDot(cursor) {
if(!cursor) var cursor = window.event;
var x = 0;
var y = 0;
if (cursor.pageX || cursor.pageY) {
x = cursor.pageX;
y = cursor.pageY;
}
else if (cursor.clientX || cursor.clientY) {
x = cursor.clientX + document.body.scrollLeft;
y = cursor.clientY + document.body.scrollTop;
}
x -= imageMapX;
y -= imageMapY;
x -= dX;
y -= dY;
(x < 0) ? coordX = 0 : coordX = x;
(y < 0) ? coordY = 0 : coordY = y;
}

function coordsFix() {
if(((coordX<Width/2+10)&&(coordX>Width/2-10))&&((coordY<Height/2+10)&&(coordY>Height/2-10)))
{
text = '';
var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();
}
else{
if(coordX<Width/2)
{
if(coordY<Height/2)
text = text+'A';
else
text = text+'C';
}
else
{
if(coordY<Height/2)
text = text+'B';
else
text = text+'D';
}}
if(text==pass)
{
var picture = document.getElementById('lock');
picture.src = 'port/lock2.png?' + Math.random();
}
else
{
var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();
}

}

function findPosX(obj) {
var currleft = 0;
if (obj.offsetParent)
while (obj.offsetParent) {
currleft += obj.offsetLeft
obj = obj.offsetParent;
}
else if (obj.x) currleft += obj.x;
return currleft;
}

function findPosY(obj) {
var currtop = 0;
if (obj.offsetParent)
while (obj.offsetParent) {
currtop += obj.offsetTop
obj = obj.offsetParent;
}
else if (obj.y) currtop += obj.y;
return currtop;
}

function getObj(name) {
if (document.getElementById) return document.getElementById(name);
else if (document.all) return document.all[name];
else if (document.layers) return document.layers[name];
else return false;
}

function init() {
dX = 7;
dY = 7;
myForm = getObj('mainForm');
imageMap = getObj('schemePlace');
imageMap.onmouseover = getCoords;
mapWdt = imageMap.offsetWidth - dX;
mapHgt = imageMap.offsetHeight - dY;
}

try {
window.addEventListener('load', init, false);
} catch(e) {
window.onload = init;
}

function check()
{
if(text==pass) alert('Пароль верный,поздравляю!');
else alert('Не угадал пароль,тыкай еще!');
text='';
var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();
}
</script>

<center>

<div id='schemePlace'
style='width:64px;height:64px;'>
<image src='port/lock.png' id='lock'>

<br >
<input type='button' class='input' value='Нажми на меня' onclick='check()'/>

ну вот. пожалуйста посоветуйте, как можно сократить обьем? может что-то лишнее увидите, или функцию какую-нибудь переделать можно..

опять какое-то условие не выполнено? помогите пожалуйста=)

пожалуй, да
мы не делаем что-то за вас, а вы именно этого и хотите
задавайте более конкретный вопросы, и и оптимизируйте сами
и попутно вопрос: чем вам этот код не нравится?

да вот жешь..если б он мне не нравился..
задание просто оптимизировать его, каким то образом уменьшить. я честно говоря представления не имею каким. но я и яву плохо знаю. может есть какие-то альтернативные функции, которые меньше объема занимают.

п.с. я не прошу делать что-то. просто подскажите какой именно фрагмент можно сократить, какие параметры лишние..

а вы-то сами как думаете какие параметры лишние?
какие не используются, те и лишние

вы его сами писали?
если да, то вам виднее что в нем можно оптимизирвоать
если нет, то вам в раздел работа

и повторю вопрос:зачем его оптимизирвоать?
тормозит? долго грузится?
-------------------
бля, что за идиотская привычка писать по два поста подряд?
я чуть было не пропустил твой первый пост, из-за того, что он был на предудущей странице
задание говориш?
и ты решил скинуть это задание на других людей?
похвально. тебе в раздел работа

да, его можно оптимизировать
потому что он писался несколько лет назад судя по всему
что в функции getObj делает вторая и третья строки?

ты уверен?
может они все-таки нужны, просто используются для того случая, о котором ты не знаеш?
в первую очередь отличаются браузеры
браузеры постоянно развиваются, и те браузеры, которые использовались пару лет назад нигде сейчас не стоят как правило
этот код написан в соответсвии с правилами кросбраузерности давно минувших лет

Gvozd,
Вероятно, имеется ввиду не оптимизация кода под современные браузеры, а просто показать на примере способы его сокращения.


Не обязательно писать несколько var, можно так:

var text = '',
	pass='ACB',
	coordX=0,
	coordY=0,
	Width=64,
	Height=64;

Ниже еще такие ситуации есть.

Здесь:

imageMap.onmousemove = moveDot;
imageMap.onmouseover = moveDot;

присваивается одно и тоже, лучше так:

imageMap.onmousemove = imageMap.onmouseover = moveDot;

Ниже еще такое есть.
При этом частая ошибка:

var x = y = 0;

Здесь "y" попадет в глобальную область видимости. Нужно так:

var x = 0,
	y = 0;

Кусок:

x -= imageMapX;
y -= imageMapY;
x -= dX;
y -= dY;

Можно записать в две строки. Если ты закончил в школе хотя бы 3 класса, то сделаешь это без проблем.

Здесь:

(x < 0) ? coordX = 0 : coordX = x;

В обоих случаях присваивается к одному и тому же, лучше так:

coordX = x < 0 ? 0 : x;

Здесь:

if(coordY<Height/2)
text = text+'A';
else
text = text+'C';
}

так же можно применить тернарный оператор и оператор "+=".

Здесь:

if(text==pass)
{
var picture = document.getElementById('lock');
picture.src = 'port/lock2.png?' + Math.random();
}
else
{
var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();
}

в обоих случаях происходят схожие действия. Их нужно вынести из if-else.

Зачем здесь "try" ?

try {
window.addEventListener('load', init, false);
} catch(e) {
window.onload = init;
}

Читаем про события: http://javascript.ru/tutorial/events

Здесь:

if(text==pass) alert('Пароль верный,поздравляю!');
else alert('Не угадал пароль,тыкай еще!');

С тернарным оператором хочется сделать так:

text==pass
	? alert('Пароль верный,поздравляю!')
	: alert('Не угадал пароль,тыкай еще!');

Еще проще будет так:

alert(text==pass ? 'Пароль верный,поздравляю!' : 'Не угадал пароль,тыкай еще!');

Зачем здесь:

var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();

создается переменная, если она используется только один раз.


Для начала хватит.

спасибо большое за столь развернутый ответ, однако я уже начал сокращать, убрав div.

<img id='lock' src="port/lock.png" width="200" height="200" onclick="doIt();">

function doIt() {
y0=document.getElementById("lock").offsetTop+1;
x0=document.getElementById("lock").offsetLeft+1;
document.all("x").value=x-x0;
document.all("y").value=y-y0;

теперь только не могу найти каким образом получать координаты мыши при клике самым простым способом.

Так что мы сокращаем, html или javascript ?

ну обе программы написаны на яваскрипте.
во второй я избавился от кучи ненужных функций. мне всего лишь надо нарисовать картинку (200,200), отследить координаты клика, присвоить переменной символ, соотв. координатам и сравнить ее с переменной "pass". в случае совпадения - нарисовать на месте одной картинки другую. вот у меня возникли проблемы с отслеживанием клика и с перерисовкой картинки.

<script language="JavaScript" type="text/javascript">
var text = '';
var pass='A';
function doIt()  
{

=>ЗДЕСЬ ДОЛЖНЫ ОТСЛЕЖИВАТЬСЯ КООРДИНАТЫ И ОНИ ДОЛЖНЫ ПРИСВАИВАТЬСЯ ПЕРЕМЕННЫМ X И У.<=
 
 
 if (xcoord<100)
    {
          if(ycoord<100)
                    text = text+'A';
          else
                    text = text+'C';
    }  
    else
    {
           if(ycoord<100)
                    text = text+'B';
           else
                    text = text+'D';
     }}
  }
  if(text==pass) alert('Пароль верный,поздравляю!');

=> ЗДЕСЬ ДОЛЖНА ПЕРЕРИСОВЫВАТЬСЯ КАРТИНКА<=
  else alert('Не угадал пароль,тыкай еще!');
  text='';
}  
</script>
 <img id='lock' src="port/lock.png" width="200" height="200" onclick='doIt()'/>

Я совсем запутался. Мы уже значит, вовсе ничего не оптимизируем, а решаем какую-то проблему?

ну почему.. вторая программа результат сокращения первой. правда переделанная немного.

я вот что не пойму..каким образом определяются коориднаты клика? относительно картинки или относительно документа не важно.

Координаты берутся из события: http://javascript.ru/tutorial/events

А в чем задача вообще этого кода?

задача-нарисовать замок("lock.png"). он разделен по координатам на 4 части, при нажатии на определенные части замка набирается текст, он сравнивается с паролем, и в случае совпадения картинка закрытого замка меняется на картинку открытого "lock2.png".
теперь правда у меня не выполняются операторы if. может кто подскажет почему?
п.с. скрипт работает только под IE.


-----------------------------------------------------

разобрался. причина - двойная проверка нажатия мыши.

<script language="JavaScript" type="text/javascript">
var text = '';
var pass='A';
 function doIt()  
{
y0=document.getElementById("lock").offsetTop+1;
x0=document.getElementById("lock").offsetLeft+1;
 Xm=event.x-x0; Ym=event.y-y0;
 document.all("x").value=Xm;
 document.all("y").value=Ym;
{ 
 if(Xm<100)
  {
          if(Ym<100)
                    text = text+'A';  
          else
                    text = text+'C';
  }  
  else
  {
           if(Ym<100)
                    text = text+'B';
           else
                    text = text+'D';
   }
}
if(text==pass)  
    alert('Пароль верный,поздравляю!');
    else alert('Не угадал пароль,тыкай еще!');
  text='';
}  
</script>
<img id='lock' src="port/lock.png" width="200" height="200" onmousedown="doIt();"><br >
X: <input name="x" type="text"><br >
Y: <input name="y" type="text"><br >