Учебный курс Введение в JavaScript и CGI Лекция 1 Введение в JavaScript кандидат технических наук Павел Брониславович Храмцов paul@kiae.su 1 Объекты документа Графический объект Массив графических ссылок Мобильный код 2 Объекты Свойства <a href=kuku.htm>kuku</a> document.links[0].href="kuku1.htm"; Методы id=window.open("","example","width=400,height=150"); События <input type=button value="Don't click here" onClick="window.alert('We repeate again: DON\'T CLICK HERE');"> 3 Пример 1 Вид если нажать на «help» Вид если нажать на «top» 4 Методы function hello() { id=window.open("","example","width=400,height=150"); id.focus(); id.document.open(); id.document.write("<h1>Hello JavaScript</h1>"); id.document.write("<hr><form>"); id.document.write("<input type=button value='Закрыть окно' "); id.document.write("onClick='window.opener.focus(); window.close();'>"); id.document.close(); } 5 Пример 2 6 События <input type=button value="Don't click here" onClick="window.alert('We repeate again: DON\'T CLICK HERE');"> 7 Размещение кода JavaScript на HTML странице Гипертекстовая ссылка (схема URL) Обработчик события (handler) Подстановка (Entity) Элемент разметки Script 8 Схема URL <a href="javascript:JavaScript_код">...</a> <a href="javascript:alert('Attention!!!');"> <font color=red>Внимание!!!</font></a> при нажатии на гипертекстовую ссылку Внимание!!! можно получить окно предупреждения: 9 Схема URL <form name=f method=post action="javascript:window.document.f.i.value='Нажали кнопку Click';void(0);"> <table border=0> <tr> <td><input name=i> <td><input type=submit value=Click> <td><input type=reset value=Reset> </table> </form> 10 Пример 3 До нажатия на кнопку Click После нажатия на кнопку Click 11 Обработчик событий <form><input type=button value=Кнопка onClick="window.alert('Yahoo!!!');"></form> 12 Обработчик событий <form> <select name=s1 onChange=" window.alert( document.s.s1.options[document.s.s1.selectedIndex].text);"> <option>Привет <option>Пошел вон </form> 13 Подстановки <script> function l() { str = window.location.href; return(str.length); } </script> <form><input value="&{window.location};" size="&{l();};"></form> 14 Вставка (контейнер SCRIPT) <html> <head> <script language=JavaScript> <!-- Это комментарий ...JavaScript-код... // --> </script> <body> ... Тело документа ... </body> </html> 15 Вставка (контейнер SCRIPT) <html><head> <script> function time_scroll() { d = new Date(); window.status = d.getHousrs()+":"+d.getMinutes()+":"+d.getSconds(); setTimeout('time_scroll();';500); } </script></head> <body onLoad=time_scroll()><center> <h1>Часы в строке статуса</h1> <form> <input type=button value="Закрыть окно" onClick=window.close()> </form> </center></body></html> 16 Вставка (контейнер SCRIPT) <input type=button value="Изменить поле статуса в окне примера" onClick="id.defaultStatus='Привет';id.focus();"> 17