Алгоритм — это точная, однозначная, конечная последовательность действий, которую должна выполнить программа для достижения конкретной цели либо для решения конкретной задачи или группы задач:
- Линейный алгоритм - это такой алгоритм, действия которого следуют друг за другом.
ПРИМЕР: ВЫВОДА ТЕКСТА
<script type=”text/javascript”>
alert(“Вы уверены?”);
</script>
ПРИМЕР: ВВОДА ТЕКСТА
<script type=”text/javascript”>
var years=prompt(“Сколько вам лет?”,100);
alert(“Вам”+years+” лет!”);
</script>
- Разветвляющийся алгоритм - это такой алгоритм, действия которого выполняются в зависимости от условия ( вопрос на который можно ответить “да” или “нет”).
ПРИМЕР:
<script type=”text/javascript”>
if (confirm(“Сказать привет?”))
{
alert(“Привет!”);
} else {
alert(“Вы нажали кнопку отмена”);
}
</script>
- Циклический алгоритм - это такой алгоритм, действия которого повторяются.
ПРИМЕР:
<script type=”text/javascript”>
for (var i = 0; i < 9; i++)
{
alert(“2*”+i+”=”+2*i);
}
</script>
Запуск программы (функции) по желанию (событию):
<a href=”javascript:”onopenmylink();”>Моя ссылка< /a>
<script language=”javascript”>
function onopenmylink()
{ alert(“Вы нажали на ссылку!”); return true; }
</script>
Другие темы:
document.form1.action=”jslink.html”;
document.form1.submit();
Редактирование текста:
<script>
// ***********************
// ШАГ 1: Выводим iframe и получаем доступ к нему
// ***********************
// Выводим в HTML-поток iframe document.write(“<iframe scrolling=’no’ frameborder=’no’ src=’#’ id=’frameId’ name=’frameId’></iframe><br/>”); // Определим Gecko-браузеры, т.к. они отличаются в своей работе от Оперы и IE var isGecko = navigator.userAgent.toLowerCase().indexOf(“gecko”) != -1; // Получаем доступ к объектам window & document для ифрейма var iframe = (isGecko) ? document.getElementById(“frameId”) : frames["frameId"]; var iWin = (isGecko) ? iframe.contentWindow : iframe.window; var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;
// ***********************
// ШАГ 2: Добавим на пустую страницу произвольный HTML-код
// ***********************
// Формируем HTML-код
iHTML = “<html><head>\n”; iHTML += “<style>\n”; iHTML += “body, div, p, td {font-size:12px; font-family:tahoma; margin:0px; padding:0px;}”; iHTML += “body {margin:5px;}”; iHTML += “</style>\n”; iHTML += “<body><u>Содержимое</u> с <b>HTML</b>-<i>разметкой</i></body>”; iHTML += “</html>”; // Добавляем его с помощью методов объекта document iDoc.open(); iDoc.write(iHTML); iDoc.close();
// ***********************
// ШАГ 3: Инициализация свойства designMode объекта document
// ***********************
if (!iDoc.designMode) alert(“Визуальный режим редактирования не поддерживается Вашим браузером”); else iDoc.designMode = (isGecko) ? “on” : “On”;
// ***********************
// ШАГ 4: редактирование: жирность, курсив, подчеркивание
// ***********************
// Выведем HTML-код этих элементов document.write(“<input type=’button’ value=’Ж’ onclick=’setBold()’ class=’bold’ />”); document.write(“<input type=’button’ value=’К’ onclick=’setItal()’ class=’ital’ />”); document.write(“<input type=’button’ value=’Ч’ onclick=’setUnder()’ class=’under’ />”); // Запишем код функции, для выставления форматирования // Используется метод execCommand объекта document function setBold() { iWin.focus(); iWin.document.execCommand(“bold”, null, “”); } function setItal() { iWin.focus(); iWin.document.execCommand(“italic”, null, “”); } function setUnder() { iWin.focus(); iWin.document.execCommand(“underline”, null, “”); } </script>
Технология перетаскивания картинки
<script>
<div style=”position:relative; width:450px; height:125px; cursor:pointer”> <img src=”bear.jpg” style=”position:absolute; left:15px; top:10px” onmousedown=”Move(this)”> <div style=”position:absolute; left:190px; top:10px; width:170px; border: 1px solid; padding:5; text-align:left; background-color:white” onmousedown=”Move(this)”> Этот компонент имеет постоянный размер. </div> <div style=”position:absolute; left:380px; top:10px” onmousedown=”Move(this)”> Этот компонент не имеет постоянный размер. </div> <script type=”text/javascript”> var SelectedItem; var SelectedX, SelectedY; var MouseX, MouseY; function Move(ClickedItem) { SelectedItem = ClickedItem; SelectedX = SelectedItem.style.pixelLeft; SelectedY = SelectedItem.style.pixelTop; MouseX = event.clientX; MouseY = event.clientY; document.onmousemove = Drag; document.onmouseup = Drop; } function Drag() { SelectedItem.style.left = SelectedX + (event.clientX – MouseX); SelectedItem.style.top = SelectedY + (event.clientY – MouseY); return false; } function Drop() { document.onmousemove = null; document.onmouseup = null; } </script>
Проверка формы на JavaScript
<form action=”/cgi-bin/formmail.cgi” onsubmit=”return sendform();”> Ваше имя: *<input type=”text” name=”name”><br> Электронный адрес: *<input type=”text” name=”email”><br> Тема сообщения: <input type=”text” name=”subject”><br> Сообщение: <textarea name=”message”></textarea><br><br> <input type=”submit” value=”Отправить”> <input type=”reset” value=”Очистить”> </form> <script language=”javascript”> <!– function sendform() { if (document.forms[0].name.value == “”) { alert(‘Пожалуйста, введите Ваше имя’); document.mailform.name.focus(); return false } if (document.forms[0].email.value == “”) { alert(‘Пожалуйста, введите электронный адрес’); document.mailform.email.focus(); return false } return true; } //–> </script>
Пример выпадающего меню
<HTML> <HEAD> <TITLE></TITLE> <style> .hidden {position: absolute; visibility: hidden;} .visible {position: absolute; visibility: visible; z-index: 2;} </style> <script language=”JavaScript”> function showObject(obj) { obj.className = “visible” } function hideObject(obj) { obj.className = “hidden” } </script> </HEAD> <body topmargin=0 leftmargin=0> <div style=”position: absolute; top: 20px; left: 20px;” onmouseover=”javascript:showObject(Nav1)” onmouseout=”javascript:hideObject(Nav1)”> <img src=”images/nav1.gif” width=”110″ height=”20″ border=”0″> </div> <div id=”Nav1″ class=”hidden” style=”position: absolute; top: 40px; left: 20px;” onmouseover=”javascript:showObject(Nav1)” onmouseout=”javascript:hideObject(Nav1)”> <img src=”images/1.gif” width=”110″ height=”20″> <br> <img src=”images/2.gif” width=”110″ height=”20″> <br> <img src=”images/3.gif” width=”110″ height=”20″> <br> <img src=”images/4.gif” width=”110″ height=”20″> </div> </body> </HTML>
