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

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

3 Графика и таблицы...

4 Графика и таблицы

5 Графика и обработка событий

6 Меню …

7 Меню <a href="javascript:void(0);" onMouseover="document.evente.src='../images/jsi/corner.gif';" onMouseout="document.evente.src='../images/jsi/clear.gif';"> <a href="javascript:void(0); onMouseover="document.evente.src='../images/jsi/corner.gif';" onMouseout="document.evente.src='../images/jsi/clear.gif';">

8 Меню function submenu(a) { if(a==1) { document.menu00.src="../images/jsi/historyb.gif"; // History document.menu01.src="../images/jsi/faceb.gif"; // In face } … <a href="javascript:void(0);" onMouseover="submenu(1);return true;">

9 Объект URL Значения свойств: href: 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 Массивы … for(i=0;i "); 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);

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= ' ';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= ' ';void(0);"; } }

12 Массив ссылок 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

13 Обработка событий мыши <a href="javascript:void(0);" onMouseover="line2(0);return true;">...

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;">

15 Обработка событий мыши onClick перехода Нет атрибута href Нет атрибута href. Нет атрибута href > Нет атрибута href.

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

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

18 Литералы числовой литерал: 10 числовой литерал: числовой литерал: 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(" "); wid.document.write(" var t; "); wid.document.write(" "); wid.document.write(" Новое окно "); wid.document.write(" "); wid.document.write(" /html>"); wid.document.close();...

21 Массивы a = new Array(); b = new Array(10); c = new Array(10,"Это значение"); c = new Array(30,"Это значение");

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 Скрытая передача данных s = " document.x.src= s;

27 JavaScript: безопасность ОбъектСвойства Documentcookie, domain, forms[], lastModified, links[], location, referer, title, URL Formaction document.forms[].elements[] checked, defaultChecked, defaultValue, name, selectedIndex, toString, value Historycurrent,next,previous,toString(),all array elements Location, Link,,Area hash, host, hostname, href, pathname, port, protocol, search, toString() OptiondefaultSelected, selected, text, value WindowdefaultStatus,status