В интернет съществуват множество сайтове, които емулират не само цифрова, но и аналогова електроника. Това което на мен ми трябва е да симулирам единствено цифрова електроника. Вместо готово решение, то реших да си създам свое, което ще ми е доста по-удобно за употреба. Ето ключовите моменти които считам да приложа:
1. За удобство приложението ще е web базирано. Така няма да има инсталации и евентуалните опасения за вируси от външни потребители ще са по-малки.
2. Ще е изцяло javascript базирано, без флаш и други подобни. При това ще се опитвам да ползвам колкото се може по-стари технологии (за съвместимост с по-старите браузъри).
3. Ще работи без сървър. Ще може да се ползва от компютъра offline, само след отварянето на записана статична уеб страница.
В тази тема ще представя как изграждам това приложение. Стъпка по стъпка. Мисля, че ще е полезно и на други. Целта е не да се ползват супер качествени техники, а просто нещата трябва да работят. Отначало ще се бия с html и javascript, а след това ще реализирам и подобрявам функционалността.
Начало
Като първа стъпка трябва да си създам работна област. Разбира се това ще е нещо просто, ето такова:
Записваме горният код в текстов документ с разширение html и го отваряме от браузъра и в текстов редактор. При Windows XP поради неизвестни причини разширението на файловете е скито. Затова като отворите Windows Explorer трябва да изберете 'Tools'/'Folder options...', след което избирате таб 'View'. След това трябва да изключите отметката на "Hide extensions for known file types" и да натиснете "OK". Сега вече всички файлове са си с видими разширения.
Активиране
Това което направихме за момента е една статична страница. Ще ни трябва javascript код, който да използваме за динамичните промени по страницата.
Но как се използваше този javascript... Тъй като съм забрави (не целия javascript, а начина за добавяне на елементи), то търся в Google за следния низ: "javascript add element". Отварям първия резултат и си записвам редовете от показаният там сорс, които ме интересуват:
Готови сме да приложим току що наученото. Отначало ще приложим някои промени в html сорса, а именно:
Тестово извикване на функцията за чертаене.
Атрибутът onload съдържа име на функция. Последната се изпълнява веднага, след като страницата бъде заредена.
Даване id на основната територия в която ще се чертае.
Както виждате кръстили сме DIV-ът на основната територия с "area".
Накрая в head частта ще напишем и функцията за добавянето на линията:
След нанесените промени записваме страницата и презареждаме същата в браузъра. Вече ще имаме една синя черта в основната територия.
Поправяне на грешки
Какво щеше да стане, ако програмата не работеше? Всъщност какво да направим, ако допуснем грешки?
Съществуват доста разширения за браузърите, които са доста удобни за проверка и следене на функциониране на уеб страниците. Така наречения debugger процес. Ако го нямате, то може да приложите някои по-дървени, но много лесни номера. Как се осъществява това ще покажем по-долу.
Ще започнем със следния фрагмент:
Точно това написах, когато писах програмата за първи път. Дали процедурата се изпълнява правилно, или дава грешка на някой от редовете? За целта първата ми задача беше да проверя точно това. Добавяйки "alert(№)" след всеки ред от сорса може да се провери това. Тук чрез "№" се означава номера на използвания alert. Започваме 1, 2, 3 и така нататък. При изпълнението ще се появява специфичен диалогов прозороц в който ще се изобразява съответното число "№".
В конкретния случай се оказа, че процедурата се изпълнява правилно и без проблеми. Но желаната синя линия не се появи, т. е. явно някъде програмата е грешна!
За да открием грешката, то при FireFox браузъра правим следното. Маркираме всичко от резултатната уеб страница. Използваме клавишна комбинация Ctrl+A. След това поставяме курсорът на мишката на част от маркираното (примерно текста "Работна област:") и натискаме десен бутон. Избираме от падащото меню "Изходен код на маркираното" (ако не се с кирилизиран браузър, то не се сещам какъв беше съответния английски тест - ако някой има такава версия, то да каже).
В отвореният прозорец ще видим нещо от вида:
Това по-горе само малко го подредих с отмествания за по-добра четимост. Както виждате в основния div вече се съдържа нашия такъв, който трябва да изобразява линията. Грешката ми сега е очевидна, т. е. атрибути на css стила на елемента съм ги декларирал като атрибутите на таговете. Това е грешно. Трябва всичко да се декларира като CSS текст в style атрибут - така както всъщност направихме в работещия вариант.
Между другото показаната тук техника трябва да е ползвате още веднъж, за да откриете още една грешка. Атрибутът possition не се пише така и затова след като прегледате сорсът на страницата по описания начин, то ще видите че нищо подобно на possition няма вътре. След поправка с правилното position атрибутът се появява и изобразяването е вече коректно.
Сега да направим и малка параметризация
Нека направим така, че изчертаваната линия да й се задава височината на която ще се изобразява.
За целта в заглавието на функцията задаваме параметър "h":
След това в "style" атрибута трябва вече да направим "top" параметъра да не е фиксиран, както е досега:
а да е точно толкова, колкото е параметъра h. Това се прави, като горното парче от текст се замине със следното:
Накрая трябва да тестваме резултата. За целта променямe <body> тага със следното:
Презареждаме страницата и получаваме очаквания резултат.
Заключение
До момента написахме следната web страница:
В бъдеще при разработването на проекта може би ще опитам да поместя текста на уеб страницата някъде в интернет, за да е удобно хем за тестване, хем за бързо записване.
1. За удобство приложението ще е web базирано. Така няма да има инсталации и евентуалните опасения за вируси от външни потребители ще са по-малки.
2. Ще е изцяло javascript базирано, без флаш и други подобни. При това ще се опитвам да ползвам колкото се може по-стари технологии (за съвместимост с по-старите браузъри).
3. Ще работи без сървър. Ще може да се ползва от компютъра offline, само след отварянето на записана статична уеб страница.
В тази тема ще представя как изграждам това приложение. Стъпка по стъпка. Мисля, че ще е полезно и на други. Целта е не да се ползват супер качествени техники, а просто нещата трябва да работят. Отначало ще се бия с html и javascript, а след това ще реализирам и подобрявам функционалността.
Начало
Като първа стъпка трябва да си създам работна област. Разбира се това ще е нещо просто, ето такова:
Код:
<html>
<head>
</head>
<body>
Работна област:
<div style="height:400px;border:1px solid red;"></div>
</body>
</html>Активиране
Това което направихме за момента е една статична страница. Ще ни трябва javascript код, който да използваме за динамичните промени по страницата.
Но как се използваше този javascript... Тъй като съм забрави (не целия javascript, а начина за добавяне на елементи), то търся в Google за следния низ: "javascript add element". Отварям първия резултат и си записвам редовете от показаният там сорс, които ме интересуват:
По-горе за удобство в курсив съм добавил коментари на български, кое за какво служи.
Готови сме да приложим току що наученото. Отначало ще приложим някои промени в html сорса, а именно:
Тестово извикване на функцията за чертаене.
Код:
<body onload="draw();">Даване id на основната територия в която ще се чертае.
Код:
<div id="area" style="height: ...Накрая в head частта ще напишем и функцията за добавянето на линията:
Код:
<script type="text/javascript">
function draw()
{var draw_area=document.getElementById('area');
var line=document.createElement('div');
line.setAttribute("style","position:relative;top:10px;left:10px;width:200px;height:1px; background-color:blue;");
draw_area.appendChild(line);
}
</script>След нанесените промени записваме страницата и презареждаме същата в браузъра. Вече ще имаме една синя черта в основната територия.
Поправяне на грешки
Какво щеше да стане, ако програмата не работеше? Всъщност какво да направим, ако допуснем грешки?
Съществуват доста разширения за браузърите, които са доста удобни за проверка и следене на функциониране на уеб страниците. Така наречения debugger процес. Ако го нямате, то може да приложите някои по-дървени, но много лесни номера. Как се осъществява това ще покажем по-долу.
Ще започнем със следния фрагмент:
Код:
line.setAttribute("possition","absolute");
line.setAttribute("top","10px");
line.setAttribute("left","10px");
line.setAttribute("width","200px");
line.setAttribute("height","1px");
line.setAttribute("background-color","blue");В конкретния случай се оказа, че процедурата се изпълнява правилно и без проблеми. Но желаната синя линия не се появи, т. е. явно някъде програмата е грешна!
За да открием грешката, то при FireFox браузъра правим следното. Маркираме всичко от резултатната уеб страница. Използваме клавишна комбинация Ctrl+A. След това поставяме курсорът на мишката на част от маркираното (примерно текста "Работна област:") и натискаме десен бутон. Избираме от падащото меню "Изходен код на маркираното" (ако не се с кирилизиран браузър, то не се сещам какъв беше съответния английски тест - ако някой има такава версия, то да каже).
В отвореният прозорец ще видим нещо от вида:
Код:
Работна област:
<div id="area" style="height: 400px; border: 1px solid red;">
<div background-color="blue" height="1px" width="200px" left="10px" top="10px" possition="absolute"></div>
</div>Между другото показаната тук техника трябва да е ползвате още веднъж, за да откриете още една грешка. Атрибутът possition не се пише така и затова след като прегледате сорсът на страницата по описания начин, то ще видите че нищо подобно на possition няма вътре. След поправка с правилното position атрибутът се появява и изобразяването е вече коректно.
Сега да направим и малка параметризация
Нека направим така, че изчертаваната линия да й се задава височината на която ще се изобразява.
За целта в заглавието на функцията задаваме параметър "h":
Код:
function draw(h)
Код:
... top:10px ...
Код:
... top:"+h+"px ...Накрая трябва да тестваме резултата. За целта променямe <body> тага със следното:
Код:
<body onload="draw(10);draw(20);draw(30);draw(40);">Заключение
До момента написахме следната web страница:
Код:
<html>
<head>
<script type="text/javascript">
function draw(h)
{var draw_area=document.getElementById('area');
var line=document.createElement('div');
line.setAttribute("style","position:relative;top:"+h+"px;left:10px;width:200px;height:1px; background-color:blue;");
draw_area.appendChild(line);
}
</script>
</head>
<body onload="draw(10);draw(20);draw(30);draw(40);">
Работна област:
<div id="area" style="height:400px;border:1px solid red;"></div>
</body>
</html>
