Ћекции.ќрг


ѕоиск:




 атегории:

јстрономи€
Ѕиологи€
√еографи€
ƒругие €зыки
»нтернет
»нформатика
»стори€
 ультура
Ћитература
Ћогика
ћатематика
ћедицина
ћеханика
ќхрана труда
ѕедагогика
ѕолитика
ѕраво
ѕсихологи€
–елиги€
–иторика
—оциологи€
—порт
—троительство
“ехнологи€
“ранспорт
‘изика
‘илософи€
‘инансы
’ими€
Ёкологи€
Ёкономика
Ёлектроника

 

 

 

 


–езка дизайна и создание Web-публикации.




1. “епер переходимо з Photoshop в ImageReady

 

2.“епер Ќов≥ зм≥ни з Photoshop в ImageReady

 

3.ѕограйтес€ з настройками, оптим≥зуйте зображенн€

4.¬ибер≥ть ≥нструмент Slice Tool, ≥ тепер ¬ам сл≥д буквально пор≥зати зображенн€ на частини. –обл€чи це ≥нтуњтивно, спробуйте внести сенс в резку. Ќаприклад, сл≥д в≥докремити зображенн€ посилань один в≥д одного. ¬ останню чергу в≥докремте головне зображенн€, де буде текст. кожн≥й розр≥зний частини присвоюЇтьс€ св≥й номер.:

≈фект Rollover.

1. ¬ибер≥ть ≥нструмент Slice select tool ≥ вид≥л≥ть будь-€ке зображенн€ посиланн€ ≥ вона буде активною, њњ ¬и побачите на панел≥ Web Content. “епер вид≥л≥ть цей же шар на панел≥ Layers. ѕереконайтес€, що видим≥сть ефект≥в в≥дключена!

 

2. ј теперь на панели Web Content данного сло€ правой клик мышью выберите Add Rollover State => Over. —делайте Over активным и на панели Layers включите видимость эффектов.

\

«астосуйте дану д≥ю до вс≥х посилань.

3.ј тепер, щоб по посиланн€х можна було кудись переходити ¬ам сл≥д заповнити њх вм≥ст≥, тобто... посиланн€ми.

7.1.6 ќптим≥зац≥€ зображень.

1. Ќаступне, що ¬ам сл≥д зробити це оптим≥зувати кожен в≥др≥заний шматок дизайну (тобто малюнка). ¬ид≥л€Їмо ≥ експериментуЇмо з настройками.  раще вибирати дл€ маленьких шматк≥в jpg формат, а дл€ великих gif

2. ѕ≥сл€ цього збер≥гаЇмо стор≥нку File> Save optimized as. ” нас вийти hmtl файл ≥ папка з зображенн€ми.

 

7.1.7 —творенн€ макету сайту: спос≥б 2.

¬икористовувати файли leafs.png, pixelated_blue_rectangle.png

 рок 1.

—оздайте новий документ (Ctrl + N) 1200х750 px. ¬ибер≥ть Gradient Tool (G) ≥ застосуйте л≥н≥йний град≥Їнт зверху вниз в≥д # 792700 до # 000000.

 

 рок 2

—твор≥ть новий шар, вибер≥ть Brush Tool (¬), встанов≥ть м'€ку кисть д≥аметром 300 px ≥ додайте кольору на ваш макет. јвтор використав червоний, помаранчевий ≥ блакитний. Ќазв≥ть шар color".

 рок 3

¬≥дкрийте зображенн€ з лист€м ≥ вставте його в ваш документ.  лацн≥ть правою кнопкою миш≥ на шар≥ ≥ вибер≥ть Convert to Smart Object. ѕот≥м Filter> Artistic> Film Grain, встанов≥ть параметри, зазначен≥ на картинц≥ нижче. ƒал≥ Filter> Pixelate> Mosaic. «м≥н≥ть режим накладанн€ шару на Difference, зменшите opacity до 30% ≥ перейменуйте шар в "texture".

 

 рок 4

—твор≥ть новий шар, вибер≥ть Rounded Rectangle Tool (U), встанов≥ть рад≥ус 3 рх ≥ намалюйте чорний пр€мокутник з круглими кутами. ƒв≥ч≥ кл≥кн≥ть на шар≥ ≥ застосуйте параметри дл€ Drop Shadow, зазначен≥ нижче. «менш≥ть opacity шару до 70% ≥ назв≥ть його "black shape".

 

 

 рок 5

¬ибер≥ть вс≥ шари ≥ згрупуйте њх. Ќазв≥ть групу "background".

 

 

крок 6

—твор≥ть нову групу ≥ назв≥ть њњ "home". —твор≥ть ще одну групу всередин≥ "home" ≥ назв≥ть њњ "logo".

 

 рок 7

—оздайте шар в груп≥ "logo". ¬ибер≥ть Type Tool (T) ≥ напиш≥ть логотип сайту (кол≥р # f4f4f4). ƒв≥ч≥ кл≥кн≥ть на шар≥ ≥ застосуйте параметри, вказан≥ нижче. —твор≥ть новий шар ≥ додайте теглайн (кол≥р # eeeeee).

 

 

 рок 8.

—оздайте нову групу, назв≥ть њњ "Sign up | Login". ¬ибер≥ть Rounded Rectangle Tool (U) ≥ намалюйте пр€мокутник €к на картинц≥. ƒв≥ч≥ клацн≥ть на шар≥ ≥ застосуйте параметри, вказан≥ нижче. ¬станов≥ть б≥лий кол≥р foreground ≥ за допомогою Type Tool (T) напиш≥ть на кнопц≥ "Sign up | Login". «менш≥ть opacity текстового шару до 75%.

 

 

 рок 9

—твор≥ть нову групу "Navigation". ƒодайте новий шар, вибер≥ть Single Row Marquee Tool ≥ створ≥ть вид≥ленн€ висотою 1 px. «алийте вид≥ленн€ # 406f94 кольором ≥ видал≥ть област≥, що знаход€тьс€ поза чорного пр€мокутника, використовуючи Rectangular Marquee Tool (M). «менш≥ть opacity шару до 40% ≥ назв≥ть його "Line".

 

 рок 10

—твор≥ть новий шар. «а допомогою Rectangular Marquee Tool (M) створ≥ть вид≥ленн€ €к у автора (зам≥тка: можете використовувати напр€мн≥ дл€ точност≥). ¬≥зьм≥ть Gradient Tool (G) ≥ застосуйте град≥Їнт знизу вврех в≥д # 35423e до прозорого. «н≥м≥ть вид≥ленн€. ѕот≥м Filter> Noise> Add Noise ≥ встанов≥ть параметри, зазначен≥ на картинц≥. Ќазв≥ть цей шар "gradient" ≥ встанов≥ть в≥дстань м≥ж л≥н≥Їю ≥ град≥Їнтом в 1 px

 

 

 рок 11

¬ибер≥ть Type Tool (T) ≥ напиш≥ть назви стор≥нок на нав≥гац≥йн≥й панел≥. ƒв≥ч≥ клацн≥ть на текстовому шар≥ ≥ застосуйте параметри, вказан≥ нижче. јвтор використав шрифт Greyscale Basic.

 

 

 рок 12

„оздайте новий шар, вибер≥ть Single Column Marquee Tool ≥ клацн≥ть один раз на макет≥. ѕот≥м вибер≥ть Rectangular Marquee Tool (M), кл≥кн≥ть на кнопц≥ "Intersect with selection" на панел≥ опц≥й ≥ створ≥ть вид≥ленн€ €к на картинц≥. «алийте вид≥ленн€ б≥лим, зн≥м≥ть вид≥ленн€.

 

 

 

 рок 13

ƒважди клацн≥ть на шар≥, створеному в попередньому кроц≥, встанов≥ть параметри, вказан≥ нижче. Ќазв≥ть шар "line 1".

 

 

 рок 14

ѕродублюйте шар "line 1" ≥ назв≥ть коп≥ю "line 2". ¬ибер≥ть Move Tool (V) та натисн≥ть один раз на праву стр≥лку на клав≥атур≥, щоб зрушити л≥н≥ю на 1 рх вправо. ƒв≥ч≥ кл≥кн≥ть на шар≥, застосуйте параметри, вказан≥ нижче.

 

 

 рок 15

¬ид≥л≥ть шари "line 1" ≥ "line 2", кл≥кн≥ть на них правою кнопкою миш≥ ≥ вибер≥ть Convert to Smart Object. Ќазв≥ть об'Їкт "separator".

 рок 16

—твор≥ть новий шар п≥д "separator". ¬ибер≥ть Rectangular Marquee Tool (M), створ≥ть вид≥ленн€ €к на картинц≥, залийте його # 35423e кольором.  лацн≥ть правою кнопкою миш≥ на шар≥ ≥ вибер≥ть Convert to Smart Object. ѕот≥м Filter> Blur> Gaussian Blur, Filter> Noise> Add Noise (дл€ обох ф≥льтр≥в встанов≥ть параметри, зазначен≥ нижче). ¬станов≥ть opacity шару 60% ≥ назв≥ть його "highlight".

 

 

 

 

 рок 17

¬ибер≥ть шар "separator", пот≥м Layer> Layer Mask> Reveal All. ¬ибер≥ть Gradient Tool (G) ≥ застосуйте град≥Їнт знизу до середини в≥д чорного до прозорого.

 

 рок 18

¬ид≥л≥ть шари "separator" ≥ "highlight". ¬ибер≥ть Move Tool (V), утримуючи клав≥ш≥ Alt ≥ Shift, клацн≥ть в документ≥ ≥ пот€гн≥ть мишку. “епер у вас Ї коп≥њ вид≥лених шар≥в. «а допомогою Move Tool (V) посуньте шари вправо. ѕовтор≥ть цей крок ≥ створ≥ть ст≥льки розд≥льник≥в, ск≥льки потр≥бно.

 

 

 рок 19

¬ибер≥ть вс≥ шари "separator" ≥ "highlight" ≥ згрупуйте њх. Ќазв≥ть групу "separators".

 

 рок 20

¬ибер≥ть Rectangle Tool (U) ≥ створ≥ть пр€мокутник. ѕом≥ст≥ть шар п≥д ус≥ма верствами з назвами стор≥нок. ƒв≥ч≥ кл≥кн≥ть на шар≥ ≥ встанов≥ть наступн≥ параметри дл€ Gradient Overlay. Ќазв≥ть шар "active menu", встанов≥ть opacity 50%.

 

крок 21

—твор≥ть нову групу, назв≥ть њњ "search" ≥ розташуйте њњ п≥д групою "navigation". ¬ибер≥ть Rounded Rectangle Tool (U), встанов≥ть рад≥ус 3 рх ≥ створ≥ть пр€мокутник, €к показано нижче (використовуйте # 104f59 кол≥р). Ќазв≥ть цей шар "text field" ≥ встанов≥ть opacity 80%.

\

крок 22

¬ибер≥ть Rectangle Tool (U) ≥ створ≥ть пр€мокутник. ѕом≥ст≥ть його справа на панел≥ пошуку. ƒв≥ч≥ клацн≥ть на шар≥ ≥ встанов≥ть параметри, вказан≥ нижче.  лацн≥ть правою кнопкою миш≥ на шар≥ ≥ вибер≥ть Create Clipping Mask.

 

 

крок 23

¬ибер≥ть Type Tool (T) ≥ напиш≥ть "search" б≥лим кольором. ¬станов≥ть opacity шару 75%.

 

 

крок 24

¬ибер≥ть Line Tool (U) ≥ намалюйте вертикальну л≥н≥ю (використовуйте кол≥р # 123036). Ќазв≥ть шар "line", розташуйте його п≥д шаром "button" ≥ за допомогою Move Tool (V) розм≥ст≥ть його м≥ж панеллю пошуку ≥ кнопкою.

 

 

крок 25

—твор≥ть нову групу ≥ назв≥ть њњ "Showcase". —твор≥ть ще одну групу всередин≥ ц≥Їњ групи ≥ назв≥ть њњ "background". ¬ибер≥ть Rectangle Tool (U) ≥ створ≥ть пр€мокутник (використовуйте кол≥р # 219aad). ” автора ширина пр€мокутника 983 рх, висота 273 рх. ¬станов≥ть opacity шару 55% ≥ назв≥ть його "bg4".

 

 

 рок 26

¬≥дкрийте зображенн€ з п≥ксельним блакитним пр€мокутником, вставте його в документ ≥ розташуйте його над шаром "bg4". ¬станов≥ть opacity 55%, назв≥ть шар "bg3".

 

 

крок 27

”тримуючи Ctrl, клацн≥ть на масц≥ шару "bg4", пот≥м створ≥ть новий шар, вибер≥ть Gradient Tool (G) ≥ застосуйте град≥Їнт знизу вгору в≥д # 56b8e5 до прозорого. «н≥м≥ть вид≥ленн€.

 

крок 28

—твор≥ть новий шар, вибер≥ть Rectangular Marquee Tool (M) ≥ створ≥ть вид≥ленн€. ¬≥зьм≥ть Gradient Tool (G) ≥ застосуйте град≥Їнт знизу вгору в≥д # 0f2b42 до # 2a607f. «н≥м≥ть вид≥ленн€ ≥ назв≥ть шар "bg1".

 

крок 29

—твор≥ть групу "sign up button". ¬ибер≥ть Rounded Rectangle Tool (U), встанов≥ть рад≥ус 2 рх ≥ намалюйте пр€мокутник. ƒв≥ч≥ кл≥кн≥ть на шар≥ ≥ застосуйте параметри, вказан≥ нижче. ¬ибер≥ть Type Tool (T) ≥ напиш≥ть "sign up" б≥лим кольором.

 

 

крок 30

ѕовтор≥ть попередн≥й крок ≥ створ≥ть ≥ншу кнопку, але тепер напиш≥ть на кнопц≥ "learn more". —твор≥ть новий шар, вибер≥ть Custom Shape Tool (U) ≥ намалюйте б≥лу стр≥лку.

 

 

крок 31

—твор≥ть групу "left arrow". ¬ибер≥ть Ellipse Tool (U) ≥ створ≥ть окружн≥сть кольору # 406f94. ƒв≥ч≥ кл≥кн≥ть на шар≥ ≥ встанов≥ть параметри.

 

крок 32

—твор≥ть новий шар, вибер≥ть Custom Shape Tool (U) ≥ намалюйте б≥лу стр≥лку. ƒв≥ч≥ кл≥кн≥ть на шар≥, встанов≥ть вказан≥ параметри. ¬станов≥ть opacity шару 50%.

 

 

крок 33

ѕовтор≥ть попередн≥й крок ≥ створ≥ть другий стр≥лку на прав≥й сторон≥ блакитного пр€мокутника.

 

 

крок 34

—твор≥ть нову групу "image". ¬ставте невелике зображенн€ в цю групу ≥ назв≥ть шар "image". ƒв≥ч≥ кл≥кн≥ть на шар≥ ≥ встанов≥ть параметри.

 

крок 35

ƒал≥ Layer> Layer Style> Create Layer, пот≥м Layer> Layer Mask> Reveal All. ¬ибер≥ть Gradient Tool (G) ≥ застосуйте град≥Їнт в≥д низу картинки до середини в≥д чорного до прозорого. Ќазв≥ть шар "shadow".

 

 

крок 36

—твор≥ть нову групу, вибер≥ть Type Tool (T) ≥ додайте текст. Ќазв≥ть шар "text".

 

крок 37

—твор≥ть групу "content". —твор≥ть ще одну групу в ц≥й груп≥ ≥ назв≥ть њњ "shadows". ¬ибер≥ть Rectangle Tool (U) ≥ намалюйте пр€мокутник б≥лого кольору. Ќазв≥ть шар "white shape" ≥ встанов≥ть opacity 90%.

 

 

 рок 38

”тримуючи Ctrl, клацн≥ть на масц≥ шару "white shape". —твор≥ть новий шар, вибер≥ть Gradient Tool (G) ≥ застосуйте град≥Їнт в≥д # 8f8f8f до прозорого. ¬станов≥ть opacity 50% ≥ назв≥ть шар "top shadow". ¬ибер≥ть Move Tool (V) ≥ дв≥ч≥ натисн≥ть на стр≥лку "вниз".

 

 

 рок 39

—твор≥ть новий шар. «а допомогою Rectangular Marquee Tool (M) створ≥ть вид≥ленн€. ѕот≥м використовуючи Gradient Tool (G), застосуйте град≥Їнт в≥д # 8f8f8f до прозорого. ƒодайте маску ≥ за допомогою великоњ чорноњ кист≥ замаскуйте центр т≥н≥. ¬станов≥ть opacity 30% ≥ назв≥ть шар "vertical shadow 1". ѕродублюйте шар, назв≥ть його "vertical shadow 2" ≥ посуньте праворуч.

 

 

 рок 40

¬ибер≥ть Line Tool (U) ≥ створ≥ть горизонтальну л≥н≥ю шириною 1 рх (використовуйте кол≥р # aebcc7). Ќазв≥ть шар "line".

 

крок 41

¬ибер≥ть Type Tool (T) ≥ додайте зм≥ст. ¬и також можете використовувати зображенн€.

 

 рок 42

—твор≥ть групу "footer". —твор≥ть новий шар всередин≥ групи, вибер≥ть Rectangular Marquee Tool (M) ≥ створ≥ть вид≥ленн€. ¬станов≥ть кол≥р foreground # 555555, в≥зьм≥ть велику м'€ку кисть ≥ малюйте њй на верхньому краю вид≥ленн€. ¬станов≥ть opacity шару 50% ≥ назв≥ть його "gradient".

 

крок 43

—твор≥ть новий шар, вибер≥ть Single Row Marquee Tool ≥ клацн≥ть в документ≥. «алийте вид≥ленн€ б≥лим, зн≥м≥ть вид≥ленн€. ѕот≥м Layer> Layer Mask> Reveal All, в≥зьм≥ть велику м'€ку чорну кисть ≥ малюйте на масц≥. ¬станов≥ть opacity 15% ≥ назв≥ть шар "line".

 

 

 рок 44

¬ибер≥ть Type Tool (T) ≥ додайте текст на колонтитул.

 

 

–езультат

 

 

«авданн€ дл€ виконанн€ роботи

1. Ќа основ≥ вище описаних приклад≥в ви повинн≥ створити шаблон сайту та Web-публ≥кац≥ю про улюблену кв≥тку, тварину або марку автомоб≥л€ тощо.

2. ќформити протокол лабораторноњ роботи, €кий повинен в≥дображати вс≥ етапи створенн€ Web-публ≥кац≥њ ≥ м≥стити висновки про виконану роботу.

7.3  онтрольн≥ питанн€

1. яка мета створенн€ макету сайту?

2. ќпиш≥ть етапи створенн€ макету сайту.

3. ўо даЇ ефект Rollover?

4. ƒл€ чого робитьс€ оптим≥зац≥€ зображень?

 

Ћабораторна робота 8

“ема: ќзнайомленн€ з мовою програмуванн€ JavaScript

ћета: набути навичок використанн€ засоб≥в мови програмуванн€ JavaScript

 

8.1 “еоретичн≥ положенн€

≈лементи мови JavaScript

JavaScript дозвол€Ї "оживити" веб- стор≥нку. ÷е реал≥зуЇтьс€ шл€хом додаванн€ до статичного опису фрагмент виконуваного коду. JavaScript- сценар≥й може взаЇмод≥€ти з будь-€кими компонентами HTML - документа ≥ реагувати на зм≥ну њх стану.

JavaScript не Ї строго ун≥версальна мова, в зм≥нних можуть збер≥гатис€ практично будь-€к≥ типи даних.

як ≥ програма мовою Java, сценар≥й JavaScript виконуЇтьс€ п≥д управл≥нн€м ≥нтерпретатора. ќднак €кщо Java -додаток або Java- аплет комп≥люЇтьс€ в байтовий код, то сценар≥й JavaScript ≥нтерпретуЇтьс€ на р≥вн≥ початкового тексту.—л≥д зазначити, що мовн≥ конструкц≥њ JavaScript зб≥гаютьс€ з в≥дпов≥дними засобами C + + ≥ Java.

 

8.1.2 Cтруктура сценар≥ю

—ценар≥Їм JavaScript вважаЇтьс€ фрагмент коду, розташований м≥ж дескрипторами <SCRIPT> ≥ </ SCRIPT>:

“екст HTML-документа

<SCRIPT>

код сценар≥ю

</ SCRIPT>

“екст HTML-документа

 

8.1.3 «м≥нн≥

” сценар≥€х JavaScript зм≥нн≥ можуть збер≥гати дан≥ будь-€ких тип≥в: числа, р€дки тексту, лог≥чн≥ значенн€, посиланн€ на об'Їкти, а також спец≥альн≥ величини, наприклад " нульове " значенн€ null або значенн€ NaN, €ке пов≥домл€Ї про неприпустим≥сть операц≥њ.ћ≥нлива в мов≥ JavaScript оголошуЇтьс€ за допомогою ключового слова var. “ак, наприклад, вираз

var selected = " first item "

створюЇ зм≥нну з ≥м'€м selected ≥ привласнюЇ њй €к значенн€ р€док символ≥в " first item ". «м≥нн≥ можуть оголошуватис€ також автоматично. ÷е в≥дбуваЇтьс€ при присвоЇнн≥ значенн€ зм≥нноњ, не зустр≥чалас€ ран≥ше в даному сценар≥њ. “ак, в наступному приклад≥ створюЇтьс€ зм≥нна з ≥м'€м rating, €к≥й присвоюЇтьс€ числове значенн€, р≥вне 512.5:

rating = 512.5;

 

8.1.4 ќб'Їкти

” мов≥ JavaScript не передбачен≥ засоби дл€ роботи з класами в тому вигл€д≥, в €кому вони реал≥зован≥ в C + + або Java. –озробник сценар≥ю не може створити п≥дклас на основ≥ ≥снуючого класу, перевизначити метод або виконати €кусь ≥ншу операц≥ю з класом. —ценар≥Їм, написаним на мов≥ JavaScript, в основному доступн≥ лише готов≥ об'Їкти. ѕобудова нового об'Їкта доводитьс€ виконувати лише в р≥дк≥сних випадках.ќб'Їкти м≥ст€ть властивост≥ (властивост≥ об'Їкт≥в можна пор≥вн€ти з зм≥нними) та методи. ќб'Їкти, а також њх властивост≥ та методи ≥дентиф≥куютьс€ ≥менами. ќб'Їктами Ї форми, зображенн€, г≥пертекстов≥ посиланн€ та ≥нш≥ компоненти веб -стор≥нки, HTML - документ, €кий в≥дображаЇтьс€ у в≥кн≥ браузера, в≥кно браузера ≥ нав≥ть сам браузер. ” процес≥ роботи JavaScript сценар≥й звертаЇтьс€ до цих об'Їкт≥в, отримуЇ ≥нформац≥ю ≥ керуЇ ними.

 р≥м того, розробнику сценар≥ю на мов≥ JavaScript доступн≥ об'Їкти, не пов'€зан≥ безпосередньо з HTML - документом. ѓх називають зумовленими, або незалежними об'Їктами. «а допомогою цих об'Їкт≥в можна реал≥зувати масив, описати дату ≥ час, виконати математичн≥ обчисленн€ ≥ вир≥шити де€к≥ ≥нш≥ завданн€.

ѕерший об'Їкт, з €ким необх≥дно познайомитис€, щоб написати найпрост≥ший сценар≥й, - це об'Їкт document, €кий описуЇ HTML документ, €кий в≥дображаЇтьс€ у в≥кн≥ браузера. Ќижче приведений вих≥дний текст веб- стор≥нки, що м≥стить сценар≥й, д≥њ €кого звод€тьс€ до висновку р€дки тексту у в≥кн≥ браузера.

<HTML>

<Ќ≈јD>

<“I“L≈>ѕерший сценарий JavaScript</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

document.write("ѕерев≥рка сценар≥€ JavaScript");

</SCRIPT>

</BODY>

</HTML>

≤мена чутлив≥ до рег≥стр≥в символ≥в, ≥ €кщо ви спробуЇте звернутис€ до поточного документа на ≥м'€ Document, ≥нтерпретатор JavaScript в≥добразить пов≥домленн€ про помилку.

ќсновне призначенн€ сценар≥њв JavaScript - створювати динам≥чно зм≥нюютьс€ об'Їкти, коригувати вм≥ст HTML-документ≥в в залежност≥ в≥д особливостей оточенн€, зд≥йснювати взаЇмод≥ю з користувачем ≥ т.д.

8.1.5 ќперац≥њ

Ќаб≥р оператор≥в в JavaScript, њх призначенн€ та правила використанн€ в основному зб≥гаютьс€ з прийн€тими в мов≥ — + +. ¬ин€тком Ї операц≥€ задаЇтьс€ символом "+".

” JavaScript символ "+" визначаЇ €к п≥дсумовуванн€ числових значень, так ≥ конкатенац≥ю р€дк≥в.

“ак, наприклад, в результат≥ обчисленн€ виразу

sum = 47 + 21;

зм≥нноњ sum буде присвоЇно значенн€ 68, а п≥сл€ виконанн€ операц≥њ

sum = "р€док 1" + "р€док 2";

в зм≥нну sum буде записана посл≥довн≥сть символ≥в "р€док 1 р€док 2". –озгл€немо ще один приклад:

<HTML>

<BODY>

<H2>„исла та р€дки</H2><BR>

<SCRIPT LANGUAGE="JavaScript">

 

var a = 3;

var b = 8;

var c = " папуг ";

 

document.write("a+b="); document.write(a + b);

document.write("<BR>");

document.write("a + с = "); document.write(a+c);

document.write("<BR>");

document.write("c + a = "); document.write (c + a);

document.write ("<BR>");

document.write ("a + b + с = "); document.write(a + b + c);

document.write("<BR>");

document.write("c + a + b = "); document.write(c + a + b);

document.write("<BR>");

 

</SCRIPT>

</BODY>

</HTML>

” в≥кн≥ браузера Ќаведений вище HTML-код вигл€даЇ так, €к показано на скр≥ншот≥

 

ѕерший р€док в≥дображаЇ результат п≥дсумовуванн€ двох числових значень, друга ≥ трет€ - результат конкатенац≥њ р€дка ≥ символьного представленн€ числа. якщо операц≥€ п≥дсумовуванн€ чисел передуЇ конкатенац≥њ, JavaScript обчислюЇ суму чисел, представл€Ї њњ у символьному вигл€д≥, пот≥м робить конкатенац≥ю двох р€дк≥в. якщо ж перший у вираженн≥ вказана операц≥€ конкатенац≥њ, то JavaScript спочатку перетворюЇ числов≥ значенн€ в символьний вид, а пот≥м виконуЇ конкатенац≥ю р€дк≥в.

 

8.1.6  еруюч≥ конструкц≥њ

 еруюч≥ конструкц≥њ, використовуван≥ в мов≥ — + +, в основному застосовн≥ ≥ в сценар≥€х JavaScript.

” JavaScript додатково визначен≥ мовн≥ конструкц≥њ, в≥дсутн≥ в — + +, а саме: оператори for... in ≥ with.

¬ за допомогою оператора циклу на веб- стор≥нц≥ формуЇтьс€ таблиц€ множенн€ чисел.

<html>

<body>

<table>

<script language="JavaScript">

document.write("<tr><td> </td>");

for (i = 1; i < 10; i++) document.write("<td>"+i+" </td>");

document.write("</tr>");

for (i = 1; i < 10; i++)

{

document.write("<tr><td>" + i + " </td>");

for (j = 1; j < 10; j++)

{

document.write("<td bgcolor='#00ffa0'>" + (i*j) + " </td>");}

document.write("</tr>");

}

</script>

</table>

</body>

</html>

ќкремоњ уваги заслуговуЇ оператор new. Ќезважаючи на те, що б≥льш≥сть об'Їкт≥в вже створен≥ браузером ≥ доступн≥ сценар≥Їм, в де€ких випадках доводитьс€ створювати об'Їкти в процес≥ роботи. ÷е в≥дноситьс€ до наперед визначеним об'Їктам та об'Їктам, що визначаютьс€ розробником сценар≥ю. ƒл€ створенн€ об'Їкта використовуЇтьс€ оператор new, €кий викликаЇтьс€ наступним чином:

зм≥нна = new т≥п_ об'Їкта (параметри)

8.1.7 ‘ункц≥њ

 

‘ормат оголошенн€ функц≥њ вигл€даЇ наступним чином:

function ≥м'€ функц≥њ ([ параметри ]) т≥ло функц≥њ

ќголошенн€ функц≥њ починаЇтьс€ з ключового слова function. “ак само, €к ≥ в мов≥ — дл€ ≥дентиф≥кац≥њ функц≥њ використовуЇтьс€ ≥м'€, при виклику функц≥њ можуть передаватис€ параметри, а по зак≥нченн≥ виконанн€ повертатис€ значенн€. ќднак, на в≥дм≥ну в≥д —, тип значенн€ ≥ типи параметр≥в не задаютьс€. Ќижче показан≥ два способи виклику функц≥њ:

Ј ≥м€_функци≥ ([ параметри ]);

Ј зм≥нна = ≥м'€ функц≥њ ([ параметри ]);

” другому випадку значенн€, що повертаЇтьс€ функц≥Їю, присвоюЇтьс€ зазначеноњ зм≥нноњ.

 

8.1.8.ќбласть видимост≥ зм≥нних

–обота ≥з зм≥нними в т≥л≥ функц≥њ п≥дпор€дковуЇтьс€ таким правилам.

Ј якщо зм≥нна оголошена за допомогою ключового слова var, доступ до нењ зд≥йснюЇтьс€ за правилами, под≥бним тим, €к≥ використовуютьс€ в мов≥ —.

Ј «м≥нна, оголошена всередин≥ функц≥њ, вважаЇтьс€ локальноњ. ќбласть видимост≥ такоњ зм≥нноњ обмежуЇтьс€ т≥лом функц≥њ, в €к≥й вона оголошена.

Ј «м≥нна, оголошена поза функц≥њ, вважаЇтьс€ глобальною. ƒо нењ можна звертатис€ з будь-€коњ точки сценар≥ю.

Ј якщо локальна ≥ глобальна зм≥нн≥ мають однаков≥ ≥мена, то в т≥л≥ функц≥њ локальна зм≥нна " маскуЇ " глобальну.

Ј якщо зм≥нна створюЇтьс€ автоматично, тобто €кщо вона не оголошена за допомогою ключового слова var, але присутн≥й у частин≥ оператора пр€мого присвоюванн€, то вона вважаЇтьс€ глобальною ≥ стаЇ доступною з будь-€коњ точки сценар≥ю.

 

HTML DOM

DOM (Document Object Model) - €вл€Ї собою стандарт консорц≥уму W3C дл€ програмного доступу до документ≥в HTML або XML. ‘актично це платформ - та мовно - нейтральний ≥нтерфейс, що дозвол€Ї програмам ≥ сценар≥€ми динам≥чно звертатис€ ≥ оновлювати вм≥ст, структуру ≥ стиль документа.¬ рамках даного стандарту можна вид≥лити 3 частини:

Ј Core DOM - стандартна модель будь-€кого структурованого документа

Ј XML DOM - стандартна модель XML документа

Ј HTML DOM - стандартна модель HTML документаDOM визначаЇ об'Їкти ≥ властивост≥ вс≥х елемент≥в документа ≥ методи (≥нтерфейс) дл€ доступу до них.

HTML DOM визначаЇ об'Їкти ≥ властивост≥ вс≥х HTML елемент≥в ≥ методи (≥нтерфейс) дл€ доступу до них. ≤накше кажучи, HTML DOM описуЇ €ким чином необх≥дно отримувати, зм≥нювати, додавати ≥ видал€ти HTML елементи.

” в≥дпов≥дност≥ з моделлю DOM все, що м≥ститьс€ всередин≥ HTML документа - Ї вузлом. “обто HTML документ представл€Їтьс€ у вигл€д≥ дерева вузл≥в, €кими Ї елементи, атрибути та текст.

–исунок 8.1. HTML документ представл€Їтьс€ у вигл€д≥ дерева вузл≥в

 

ќб'Їктна модель браузера м≥стить 12 об'Їкт≥в:

1. Document - надаЇ можлив≥сть доступу до компонент≥в документа HTML.

2. Event - надаЇ можлив≥сть доступу до властивостей под≥й, коли останн≥ в≥дбуваютьс€.

3. History - надаЇ ≥нформац≥ю про адреси, €к≥ кл≥Їнт в≥дв≥дав.

4. Location - надаЇ ≥нформац≥ю про адресу поточного документа.

5. MimeType - надаЇ ≥нформац≥ю про тип MIME.

6. Navigator - дозвол€Ї звертатис€ до властивостей браузера.

7. Selection - в≥дображаЇ поточне вид≥ленн€ документа.

8. Style - представл€Ї конкретний елемент стилю в таблиц≥ стил≥в.

9. TextRange - в≥дображаЇ розд≥ли тексту, що формуЇ документ HTML.

10. Screen - надаЇ ≥нформац≥ю про мон≥тор≥ ≥ систем≥ виводу, ≥нформац≥њ кл≥Їнта.

11. Window - надаЇ властивост≥, методи ≥ под≥њ, пов'€зан≥ з в≥кном браузера.

12. StyleSheet - представл€Ї вс≥ елементи стилю всередин≥ таблиц≥ стил≥в.

€к≥ дозвол€ють звертатис€ до частин≥ браузера або частини стор≥нки за допомогою мови JavaScript.

 р≥м об'Їкт≥в в об'Їктн≥й модел≥ ввод€тьс€ так≥ пон€тт€:

ћетоди - способи роботи з об'Їктами. Ќаприклад: закрити в≥кно. ѕо сут≥ це функц≥€, асоц≥йована з об'Їктом. object.methodname

ѕод≥њ - об'Їкт пов≥домл€Ї нам, що щось сталос€. Ќаприклад: елемент ставати активним.

¬ластивост≥ - властивост≥ об'Їкта. Ќаприклад: ≥м'€ та розм≥ри в≥кна.

8.1.10 ¬≥кна д≥алогу. об'Їкт

 

Window-в≥дкритт€ в≥кна.

синтаксис:

window.open (" URL або URI ", " ≥м'€ в≥кна ", " властивост≥ в≥кна ") Ќаступний оператор створюЇ в≥кно, €ке в≥дображаЇ вм≥ст стор≥нки http://www.microsoft.ua:

window.open (" http://www.microsoft.ua ")

ѕри створенн≥ в≥кна ви можете також надати ≥м'€, в даному випадку - nuftWindow, дл€ зверненн€ до в≥кна €к до мети / target при в≥дправц≥ форми або при переход≥ за г≥перпосиланн€м.

window.open (" http://www.microsoft.ua ", " newWindow ")

≤м'€ в≥кна не потр≥бно при створенн≥ в≥кна. јле в≥кно зобов'€зане мати ≥м'€, €кщо ви хочете звернутис€ до нього з ≥ншого в≥кна.

ѕри в≥дкритт≥ в≥кна ви можете специф≥кувати атрибути, так≥ €к висота / height ≥ ширина / width, панель утил≥т / toolbar, адресна р€док / location field або смуги прокрутки / scrollbars.

Ќаступний оператор створюЇ в≥кно без панел≥ утил≥т, але з смугами прокрутки:

window.open (" http://www.microsoft.ua ", " wwwWindow ", " toolbar = no, scrollbars = yes ")

ƒе€к≥ властивост≥ в≥кна:

directories - якщо yes, створюютьс€ стандартн≥ кнопки директор≥й браузера, так≥ €к What's New ≥ What's Cool.

height - специф≥кують висоту в≥кна у точках.

innerHeight - специф≥кують висоту област≥ вм≥сту в≥кна у точках. ÷€ властив≥сть зам≥нило height, €ке залишено дл€ забезпеченн€ зворотноњ сум≥сност≥.

innerWidth - специф≥кують ширину област≥ вм≥сту в≥кна у точках. ÷€ властив≥сть зам≥нило width, €ке залишено дл€ забезпеченн€ зворотноњ сум≥сност≥.

location - якщо yes, створюЇ поле введенн€

Location.menubar - якщо yes, створюЇ р€док меню у верхн≥й частин≥ в≥кна.

outerHeight - специф≥кують розм≥р по вертикал≥ в п≥кселах зовн≥шнього кордону в≥кна.

resizable - якщо yes, даЇ користувачев≥ можлив≥сть зм≥нювати розм≥ри в≥кна screenX - специф≥кують в≥дстань, на €кому нове в≥кно пом≥щаЇтьс€ в≥д л≥вого краю екрана.

screenY - специф≥кують в≥дстань, на €кому нове в≥кно пом≥щаЇтьс€ в≥д верху екрана.

scrollbars - якщо yes, створюютьс€ вертикальна ≥ горизонтальна смуги прокрутки, €кщо документ стаЇ б≥льше розм≥р≥в в≥кна.

status - якщо yes, створюЇтьс€ статусний р€док внизу в≥кна.

titlebar - якщо yes, створюЇтьс€ в≥кно з р€дком заголовка.toolbar - якщо yes, створюЇтьс€ стандартна панель браузера з кнопками, такими €к Back ≥ Forward width - специф≥кують ширину в≥кна в п≥ксел€х.

ƒл€ того щоб функц≥€ в≥дпрацьовувалас€ при натисканн≥ мишкою на елемент≥ документа, використовуватимемо под≥ю onClick об'Їкта Document.

ѕриклад:

¬≥дкриЇмо посиланн€ в новому в≥кн≥

<a href =""

onClick="window.open(http://www.microsoft.ua,'nuftWindow','left=300,top=300,width=200,hight=400,toolbar=no,menubar=no,location=no,directories=no')"> ¬≥дкрити нове в≥кно

</ a>

“еж саме можна зробити за допомогою кнопки:

<input type = "button" value = "¬≥дкрити нове в≥кно" onClick="window.open('http://www.microsoft.ua','kstuWindow','left=300,top=300,width=200,hight=400,toolbar=no,menubar=no,location=no,directories=no')">

 

«акритт€ в≥кна.

Ќаступний оператор закриваЇ поточне в≥кно: window.close ()

¬узли дерева HTML документа.

¬≥дпов≥дно до модел≥ DOM:

Ј ¬есь документ представл€Їтьс€ вузлом документа;

Ј  ожен HTML тег Ї вузлом елемента;

Ј “екст всередин≥ HTML елемент≥в представл€Їтьс€ текстовими вузлами;

Ј  ожному HTML атрибуту в≥дпов≥даЇ вузол атрибута;

Ј  оментар≥ Ї вузлами коментар≥в.

<html>

<head>

<title>HTML документ</title>

</head>

<body>

<h1>«аголовок </h1>

<p>ѕросто текст</p>

</body>

</html>

” цьому приклад≥ кореневим вузлом Ї тег <html>. ¬с≥ ≥нш≥ вузли м≥ст€тьс€ всередин≥ <html>.

” цього вузла Ї два доч≥рн≥х вузла: <head> ≥ <body>.

¬узол <head> м≥стить вузол <title>, а вузол <body> м≥стить вузли <h1> ≥ <p>

—л≥д звернути особливу увагу на те, що текст, розташований у вузл≥ елемента в≥дпов≥даЇ текстовому вузлу. ” приклад≥ <title> HTML документ </ title > вузол елемента <title> м≥стить текстовий вузол " HTML документ", тобто " HTML документ " не Ї значенн€м елемента <title>. ѕроте, в рамках HTML DOM значенн€ текстового вузла може бути доступно за допомогою властивост≥ innerHTML.

¬с≥ вузли HTML документа можуть бути доступн≥ за допомогою дерева, при цьому њх вм≥ст може бути зм≥нено або видалено, а також можна додати нов≥ елементи.¬с≥ вузли дерева знаход€тьс€ в ≥Їрарх≥чних в≥дносинах м≥ж собою. ƒл€ опису цих в≥дносин використовуютьс€ терм≥ни батько, доч≥рн≥й елемент ≥ нащадок. Ѕатьк≥вськ≥ вузли мають доч≥рн≥ вузли, а доч≥рн≥ елементи одного р≥вн€ називаютьс€ нащадками (братами або сестрами).

Ј ¬≥дносно вузл≥в дерева дотримуютьс€ наступн≥ принципи:

Ј —амий верхн≥й вузол дерева називаЇтьс€ кореневим;

Ј  ожен вузол, за вин€тком кореневого, маЇ р≥вно один батьк≥вський вузол;

Ј ¬узол може мати будь-€ке число доч≥рн≥х вузл≥в;

Ј  ≥нцевий вузол дерева не маЇ доч≥рн≥х вузл≥в; Х Ќащадки мають загального батька.

 

8.1.11. ѕрограмний ≥нтерфейс HTML DOM

” рамках DOM модел≥ HTML можна розгл€дати €к безл≥ч вузлових об'Їкт≥в. ƒоступ до них зд≥йснюЇтьс€ за допомогою JavaScript або ≥нших мов програмуванн€. ѕрограмний ≥нтерфейс DOM включаЇ в себе наб≥р стандартних властивостей ≥ метод≥в. ¬ластивост≥ €вл€ють де€к≥ сутност≥ (наприклад, <h1>), а методи - д≥њ над ними (наприклад, додати <a>).

ƒо типових властивост€х DOM належать так≥:

Ј x.innerHTML - внутр≥шнЇ текстове значенн€ HTML елемента x;

Ј x. nodeName - ≥м'€ x;

Ј x.nodeValue - значенн€ x;

Ј x.parentNode - батьк≥вський вузол дл€ x;

Ј x.childNodes - доч≥рн≥й вузол дл€ x;

Ј x.attributes - вузли атрибут≥в x.

¬узловий об'Їкт, в≥дпов≥дний HTML елементу п≥дтримуЇ так≥ методи:

Ј x.getElementById (id) - отримати елемент ≥з зазначеним id;

Ј x.getElementsByTagName (name) - отримати вс≥ елементи з вказаним ≥м'€м тега (name);

Ј x.appendChild (node) - вставити доч≥рн≥й вузол дл€ x; Х x.removeChild (node) - видалити доч≥рн≥й вузол дл€ x.

ѕриклад.ƒл€ отриманн€ тексту з елемента <p> з≥ значенн€м атрибута id "demo" в HTML документ≥ можна використовувати наступний код:

txt = document.getElementById ("demo"). innerHTML

“ой же самий результат може бути отриманий по-≥ншому:

txt = document.getElementById ("demo"). childNodes [0]. nodeValue

” рамках DOM можлив≥ 3 способи доступу до вузл≥в:

1. «а допомогою методу getElementById (ID). ѕри цьому повертаЇтьс€ елемент ≥з зазначеним ID.

2. «а допомогою методу getElementsByTagName (name). ѕри цьому повертаютьс€ вс≥ вузли з вказаним ≥м'€м тега (у вигл€д≥ ≥ндексованого списку). ѕерший елемент у списку маЇ нульовий ≥ндекс.

3. Ўл€хом перем≥щенн€ по дереву з використанн€м в≥дносин м≥ж вузлами. ƒл€ визначенн€ довжини списку вузл≥в використовуЇтьс€ властив≥сть length.

x = document.getElementsByTagName("p");

for (i = 0; i < x.length; i++)

{

document.write(x[i].innerHTML);

document.write("<br/>");

}

” даному приклад≥ всередину HTML документа вставл€Їтьс€ у вигл€д≥ списку текстовий вм≥ст вс≥х елемент≥в в≥дпов≥дних тегом <p>.

ƒл€ нав≥гац≥њ по дереву навколо м≥ста поточного вузла можна використовувати так≥ властивост≥:

Ј parentNode;

Ј firstChild;

Ј lastChild.

ƒл€ безпосереднього доступу до тегам можна використовувати 2 спец≥альних властивост≥:

Ј document.documentElement - дл€ доступу до кореневого вузла документа;

Ј document.body - дл€ доступу до “егу <body>.

8.1.12 ¬ластивост≥ вузл≥в

” HTML DOM кожен вузол Ї об'Їктом, €кий може мати методи (функц≥њ) ≥ властивост≥. Ќайб≥льш важливими Ї наступн≥ властивост≥:

Ј nodeName;

Ј nodeValue;

Ј nodeType.

¬ластив≥сть nodeName вказуЇ на ≥м'€ вузла. ÷€ властив≥сть маЇ так≥ особливост≥:

Ј ¬ластив≥сть nodeName призначене т≥льки дл€ читанн€;

Ј ¬ластив≥сть nodeName вузла елемента точно в≥дпов≥даЇ ≥мен≥ тега;

Ј ¬ластив≥сть nodeName вузла атрибута в≥дпов≥даЇ ≥мен≥ атрибута;

Ј ¬ластив≥сть nodeName текстового вузла завжди одно # text

Ј ¬ластив≥сть nodeName вузла документа завжди одно # document

«ауваженн€: nodeName завжди м≥стить ≥м'€ тега HTML елемента у верхньому рег≥стр≥. ¬ластив≥сть nodeValue вказуЇ на значенн€ вузла. ÷€ властив≥сть маЇ так≥ особливост≥:

Ј ¬ластив≥сть nodeValue вузла елемента не визначено;

Ј ¬ластив≥сть nodeValue текстового вузла вказуЇ на сам текст;

Ј ¬ластив≥сть nodeValue вузла атрибута вказуЇ на значенн€ атрибута.

¬ластив≥сть nodeType повертаЇ тип вузла. ÷€ властив≥сть призначене т≥льки дл€ читанн€: Ќайб≥льш важливими типами вузл≥в Ї наступн≥:

 

“ип элемента “ип узла
Element  
Attribute  
Text  
Comment  
Document  

 

8.1.13.«м≥на HTML елемент≥в

HTML елементи можуть бути зм≥нен≥ з допомогою використанн€ JavaScript, HTML DOM ≥ под≥й. ” приклад≥ показано, €к можна динам≥чно зм≥нювати текстовий вм≥ст тега <p>:

<html>

<body>

<p id="p1">Hello World!</p>

<script type="text/javascript">

document.getElementById("p1").innerHTML="New text!";

</script>

</body>

</html>

 

8.1.14 ƒ≥алогов≥ елементи

” JavaScript п≥дтримуЇтьс€ робота з наступними д≥алоговими елементами ≥нтерфейсу:

1. Alert. «астосовуЇтьс€ дл€ пов≥домленн€ користувача, що працюЇ з веб -браузером.—интаксис: alert ("пов≥домленн€");

2. Confirm. «астосовуЇтьс€ дл€ вибору користувачем одного з двох вар≥ант≥в в≥дпов≥д≥ " “ак / Ќ≥". ¬≥дпов≥дно Confirm повертаЇ значенн€ true / false. —интаксис:confirm ("питанн€ ");

3. Prompt. «астосовуЇтьс€ дл€ введенн€ користувачем значенн€. ѕри натисканн≥ " OK " повертаЇтьс€ введене значенн€, у випадку " Cancel" повертаЇтьс€ значенн€ null.—интаксис:prompt ("питанн€ / запит", " значенн€ за замовчуванн€м ");

Ќижче наводитьс€ код веб -стор≥нки, в €к≥й користувач маЇ можлив≥сть вибрати кол≥р тексту за допомогою д≥алогового елементу

<html>

<body>

// тут буде в≥дображатис€ текст

<div id="c" style="color:blue">¬и обрали кол≥р текста: чорний</div>

 

<script language="JavaScript">

// користувач обираЇ кол≥р текста

var tcolor = prompt("ќберить кол≥р текста: red, blue, green, yellow, black","black");

// задаЇтьс€ текст

document.getElementById("c").innerHTML = "¬иобрали кол≥р текста: " + tcolor;

// задаЇтьс€ кол≥р текста

document.getElementById("c").style.color = tcolor;

 

</script>

</body>

</html>

«авданн€ дл€ виконанн€ роботи 1.

¬ивчить нижчеприведений скрипт ≥ перев≥рте його працездатн≥сть.

<!-- ћен€ем знак числа -->

<HTML>

<HEAD>

<TITLE>¬ычисление максимального значени€</TITLE>

<script language="JavaScript">

function invert(obj)

{

var a = Number(obj.num1.value);

obj.res.value = -a

}

</script>

</HEAD>

<BODY bgcolor="#FFFFCC">

<H4>ћен€ем знак числа</H4>

<FORM name="form1">

„исло: <input type="text" size=8 name="num1"><hr>

ѕосле смены знака число равно

<input type="button" value=ќпределить onClick="invert(form1)">

<input type="text" size=8 name="res"><hr>

<input type="reset">

</FORM>

</BODY>

</HTML>

«авданн€ дл€ виконанн€ роботи 2.

—творити форму дл€ введенн€ 6 чисел та вивести назву в≥дпов≥дного завданн€. ¬икористовуючи приклад 1 в €кост≥ зразка, напиш≥ть скрипт

1) ѕерший додатн≥й елемент пом≥н€ти м≥сц€ми з максимальним.

2) «найти суму третього та пТ€того додатных лемент≥в.

3) ƒругий в≥дТЇмний елемент зам≥нити м≥н≥мальним

4) —к≥льки Ї елемент≥в з м≥н≥мальним значенн€м серед додатн≥х?

5) ќбчислиити суму перших чотирьох в≥дТЇмних елемент≥в

6) ¬ивести номер передостаннього позитивного елемента

7) «найти добуток другого та четвертого елемент≥в, б≥льших н≥ж 3

8) ћаксимальний елемент пом≥н€ти м≥сц€ми з першим нульовим

9) ќстанн≥й в≥дТЇмний елемент пом≥н€ти м≥сц€ми з максимальним

10) ќбчислити добуток другого в≥дТЇмного та першого позитивного елемент≥в

11) „и трет≥й позитивний елемент Ї останн≥м?

12) ¬ивести номери найб≥льших елемент≥в. ќбчислити њх суму

13) ћаксимальний елемент пом≥н€ти м≥сц€ми з м≥н≥мальним

14) ¬изначити номер третього в≥дТЇмного елемента

15) ќбчислити добуток першого позитивного та другого в≥дТЇмного елемент≥в

16) ѕом≥н€ти м≥сц€ми м≥н≥мальний та другий позитивний елементи

17) ¬изначити ≥ндекси м≥н≥мального елемента та обчислити њх суму

18) ќбчислити добуток вс≥х позитивних елемент≥в

19) ¬ивести номер другого в≥дТЇмного елемента

20) ¬ивести номери найменших елемент≥в. ќбчислити добуток њх квадрат≥в

21) ќбчислити суму в≥дТЇмноих елемент≥в

22) ќбчислити к≥льк≥сть в≥дТЇмних елемент≥в та суму позитивних елемент≥в

23) ќбчислити середнЇарифметичне позитивних елемент≥в

24) Ќа м≥сце м≥н≥мального та максимального елемент≥в записати њх ≥ндекси

25) «найти добуток першого та третього елемент≥в, менших н≥ж -10

26) ¬изначити суму номер≥в другого та третього в≥дТЇмних елемент≥в

27) ¬ивести номери другого та четвертого позитивних елемент≥в

28) ¬ивести добуток номер≥в двох найменших елемент≥в серед позитивних

29) „и Ї два елементи серед в≥дТЇмних ≥з максимальних значень?

30) “рет≥й позитивний зам≥нити номером першого в≥дТЇмного

31) ќбчислити добуток перших трьох додатн≥х елемент≥в та визначити њх номери

32) ћаксимальний елемент пом≥н€ти м≥сц€ми з четвертим, що б≥льше 1

 

«авданн€ дл€ виконанн€ роботи 3.

—творенн€ таблиц≥ випадково вибраних кольор≥в

”з€вши за основу сценар≥й побудови таблиц≥ множенн€, побудуйте таблицю випадково вибраних кольор≥в.  ол≥р елементу таблиц≥ задаЇтьс€ за допомогою атрибуту bgcolor.  ол≥р осередку описуЇтьс€ у рамках трикомпонентноњ модел≥ RGB, наприклад: <td bgcolor="#c0a145">. ƒл€ генерац≥њ кожноњ компоненти можна використовувати генератор випадкових чисел за допомогою метод≥в об'Їкту Math ≥ перетворенн€ в ш≥стнадц€тковий формат:

color = Math.round(255.0*Math.random());

r = color.toString(16);

–езультуючий кол≥р утворюЇтьс€ шл€хом конкатенац≥њ компонент≥в:

color = r + g + b;

«разковий вид результату роботи сценар≥ю в загальному вигл€д≥:

 

ѕри цьому таблиц€ повинна маЇ бути наступного виду(вар≥ант залежить в≥д номера останньоњ цифри зал≥ковоњ книжки)

1. ќсередки (4, 4), (5,4) об'Їднан≥, ќсередки (8, 8), (8, 9) об'Їднан≥

2. ќсередки (1, 7), (1,8) об'Їднан≥, ќсередки (8, 1), (9, 1) об'Їднан≥

3. ќсередки (2, 2), (2,3), (2, 4), (2,5) об'Їднан≥

4. ќсередки (3, 9), (4,9), (5, 9), (6,9) об'Їднан≥

5. ќсередки (3, 5), (4,5), (5, 5), (6,5) об'Їднан≥

6. ќсередки (6, 4), (7,4) об'Їднан≥, ќсередки (6, 7), (6, 8) об'Їднан≥

7. ќсередки (2, 7), (3,7) об'Їднан≥, ќсередки (1, 8), (1, 9) об'Їднан≥

8. ќсередки (3, 4), (4,4) об'Їднан≥, ќсередки (9, 1), (9, 2) об'Їднан≥

9. ќсередки (3, 3), (3,4), (3, 5), (3,6) об'Їднан≥

0. ќсередки (9, 8), (9,9) об'Їднан≥, ќсередки (1, 9), (1, 9) об'Їднан≥

 


 

8.3  онтрольн≥ питанн€

1. яка структура сценар≥ю JavaScript?

2. Ќазв≥ть керуюч≥ конструкц≥њ мови JavaScript.

3. ќхарактенризуйте функц≥њ мови JavaScript.

4. ўо таке DOM?

5. як≥ Ї д≥алогов≥ елементи мови JavaScript?

 

–≈ ќћ≈Ќƒќ¬јЌј Ћ≤“≈–ј“”–ј

 

1. Adobe Photoshop CS2: ќфиц. учеб. курс / перевод с англ. ј. √орлач, ј.“имаков Ц ћ.: »здательство Ђ“риумфї, 2005. Ц 480 с.

2. ’ольцшлаг, ћ. языки HTML и CSS. / ћ. ’ольцшлаг, ≈. ћолли Ц ћ.: “риумф, 2007. Ц 304с.

3. ‘лэнаган, ƒэвид. JavaScript. ѕодробное руководство. / ƒэвид ‘лэнаган - ћ.: —имвол-ѕлюс, 2012. Ц 1081с.


 

«ћ≤—“

¬—“”ѕ.. 3

ћ≈“ј, «ћ≤—“, ѕќ–яƒќ  ѕ–ќ¬≈ƒ≈ЌЌя ≤  ќЌ“–ќЋё ЋјЅќ–ј“ќ–Ќ»’ –ќЅ≤“ 4

Ћабораторна робота 1. 5

1.1 “еоретичн≥ положенн€. 5

1.1.1 «агальна структура HTML-документу. 5

1.1.2 “еги ≥ атрибути. 7

1.1.3 –ег≥стр запису команд. 7

1.1.4 Escape-посл≥довност≥ 7

1.1.5 ѕереведенн€ р€дка, прогалини, табул€ц≥€. 8

1.1.6  оментар≥ 9

1.1.7 «агальн≥ рекомендац≥њ 10

1.1.8  ольоров≥ специф≥кац≥њ 10

1.1.9 Ѕазов≥ теги розм≥тки г≥пертексту. 11

1.1.10 елемент <FONT>. 14

1.1.11 јтрибути тега <BODY>. 16

1.1.12 «аголовки. 18

1.1.13—писки. 19

1.1.14 —творенн€ блок≥в цитат. 22

1.1.15 «авданн€ розм≥р≥в пол≥в стор≥нки. 22

1.2. «авданн€ дл€ виконанн€ роботи. 22

1.3  онтрольн≥ питанн€. 22

Ћабораторна робота 2. 23

2.1 “еоретичн≥ положенн€. 23

2.1.1 ¬ставка граф≥чних зображень. 23

2.1.2 ƒоданн€ фоновоњ граф≥ки. 24

2.1.3 ќбрамленн€ граф≥чного зображенн€. 24

2.1.4 «аданн€ параметр≥в обт≥канн€ граф≥ки текстом. 24

2.1.5 ¬ир≥внюванн€ тексту в≥дносно граф≥ки. 25

2.1.6 ѕуста область навколо граф≥чного зображенн€. 25

2.1.7 ѕобудова горизонтальноњ л≥н≥йки. 25

2.1.8 ѕобудова списк≥в з граф≥чними маркерами. 25

2.1.9 ¬становленн€ розм≥р≥в зображенн€. 26

2.1.10 ѕобудова г≥перпосилань, €к≥ вказують на ≥ншу Web-стор≥нку. 26

2.1.11 ѕобудова г≥перпосилань, €к≥ вказують на Web-стор≥нку в межах власного сайту. 27

2.1.12 —творенн€ г≥перпосиланн€ на обТЇкт т≥Ї ж стор≥нки. 27

2.1.13 —творенн€ г≥перпосилань на окрем≥ област≥ ≥ншоњ стор≥нки. 27

2.1.14 ¬икористанн зображень, €к г≥перпосиланн€. 27

2.1.15 —творенн€ г≥перпосилань, €к≥ вказують на зображенн€. —творенн€ м≥н≥атюрних зображень. 28

2.1.16 —творенн€ г≥перпосилань, €к≥ вказують на файл. 28

2.1.17 ѕосиланн€ на адресу електронноњ пошти. 28

2.1.18 —творенн€ г≥перпосиланн€, €ке вказуЇ на сайт FTP. 28

2.1.19 ¬≥дкритт€ Web-стор≥нок в новому в≥кн≥ браузера. 29

2.1.20  ол≥р тексту г≥перпосилань. 29

2.1.21 √≥перпосиланн€ ≥ Угар€ч≥ клав≥ш≥Ф. 29

2.1.22 ѕор€док переходу по г≥перпосиланн€м. 30

2.1.23 —творенн€ г≥перпосиланн€ на файл аудиозапису. 30

2.1.24 ¬провадженн€ звукових обТЇкт≥в. 30

2.1.25 —творенн€ г≥перпосилань на файл в≥деозапису. 31

2.1.26 ¬провадженн€ обТЇкт≥в в≥део. 32

2.2 «авданн€ дл€ виконанн€ роботи. 32

2.3  онтрольн≥ питанн€. 33

ЋјЅќ–ј“ќ–Ќј –ќЅќ“ј 3. 33

3.1 “еоретичн≥ положенн€. 33

3.1.1 —творенн€ таблиц≥ в HTML. 33

3.1.2 ќбрамленн€ таблиц≥ 34

3.1.3 «м≥на кольору рамки. 34

3.1.4 ¬изначенн€ заголовку таблиц≥ 34

3.1.5 √рупуванн€ стовпц≥в таблиц≥ 35

3.1.6 √рупуванн€ р€дк≥в таблиц≥ 35

3.1.7 «м≥на кольору елемент≥в таблиц≥ та граф≥чного фону таблиц≥ 37

3.1.8 ¬ир≥внюванн€ даних в таблиц≥ 38

3.1.9 ¬ир≥внюванн€ даних в ком≥рц≥ таблиц≥ 38

3.1.10 «м≥на розм≥ру таблиц≥ 38

3.1.11 «м≥на розм≥ру ком≥рки таблиц≥ 38

3.1.12 «литт€ ком≥рок таблиц≥ 39

3.1.13 ¬≥дображенн€ меж ≥ л≥н≥й розд≥ленн€ таблиц≥ 39

3.1.14 ѕеренесенн€ сл≥в в середин≥ таблиц≥ 40

3.1.15 ѕобудова вбудованих таблиць. 40

3.1.16 «аданн€ параметр≥в обт≥канн€ таблиц≥ текстом. 40

3.2 «авданн€ дл€ виконанн€ роботи. 41

3.3  онтрольн≥ питанн€. 41

Ћабораторна робота 4. 41

4.1 “еоретичн≥ положенн€. 42

4.1.1 —творенн€ фрейм≥в. 42

4.1.2 ¬≥дтворенн€ обТЇкту г≥перпосиланн€ у в≥кн≥ фрейма. 43

4.1.3 —творенн€ плаваючих фрейм≥в. 45

4.2 «авданн€ дл€ виконанн€ роботи. 45

4.3  онтрольн≥ питанн€. 46

Ћабораторна робота 5. 46

5.1 “еоретичн≥ положенн€. 46

5.1.1 «агальна структура форми. 46

5.1.2ќсновн≥ типи елемент≥в <INPUT>. 47

5.1.3 ≈лемент <SELECT>: 49

5.1.4 ≈лемент <TEXTAREA>. 50

5.2.1 «авданн€ дл€ виконанн€ роботи 1. 51

5.2.2 «авданн€ дл€ виконанн€ роботи 2. 52

5.3  онтрольн≥ питанн€. 52

Ћабораторна робота 6. 52

6.1 “еоретичн≥ положенн€. 52

6.1.1 –озм≥тка стор≥нок за допомогою таблиць. 52

6.1.2 –озм≥тка стор≥нок за допомогою блок≥в (DIV) ≥ CSS. 54

6.1.3 ѕрац€ з зовн≥шн≥м CSS. 57

6.1.4 ¬ластивост≥ ≥ можлив≥ значенн€ в CSS. 59

6.2.1 «авданн€ дл€ виконанн€ роботи 1. 61

6.2.2 «авданн€ дл€ виконанн€ роботи 2. 61

6.2.3 «авданн€ дл€ виконанн€ роботи 3. 61

6.3 онтрольн≥ питанн€. 61

Ћабораторна робота 7. 62

7.1 “еоретичн≥ положенн€. 62

7.1.1 —творенн€ макету сайту: спос≥б 1. 62

7.1.2 ƒодаванн€ елемент≥в дизайну. 67

7.1.3 ≈фект Rollover. ѕ≥дготовка. 68

7.1.4. –езка дизайна и создание Web-публикации. 69

7.1.5 ≈фект Rollover. 70

7.1.6 ќптим≥зац≥€ зображень. 72

7.1.7 —творенн€ макету сайту: спос≥б 2. 72

7.2 «авданн€ дл€ виконанн€ роботи. 118

7.3  онтрольн≥ питанн€. 118

Ћабораторна робота 8. 118

8.1 “еоретичн≥ положенн€. 118

8.1.1 ≈лементи мови JavaScript 118

8.1.2 Cтруктура сценар≥ю.. 119

8.1.3 «м≥нн≥ 119

8.1.4 ќб'Їкти. 119

8.1.5 ќперац≥њ 120

8.1.6  еруюч≥ конструкц≥њ 121

8.1.9.HTML DOM.. 123

8.1.10 ¬≥кна д≥алогу. об'Їкт. 124

8.1.11. ѕрограмний ≥нтерфейс HTML DOM.. 127

8.1.12 ¬ластивост≥ вузл≥в. 128

8.1.13.«м≥на HTML елемент≥в. 129

8.1.14 ƒ≥алогов≥ елементи. 129

8.2.1 «авданн€ дл€ виконанн€ роботи 1. 130

8.2.2 «авданн€ дл€ виконанн€ роботи 2. 130

8.2.3 «авданн€ дл€ виконанн€ роботи 3. 131

8.3  онтрольн≥ питанн€. 133

–≈ ќћ≈Ќƒќ¬јЌј Ћ≤“≈–ј“”–ј.. 133

 





ѕоделитьс€ с друзь€ми:


ƒата добавлени€: 2016-12-04; ћы поможем в написании ваших работ!; просмотров: 469 | Ќарушение авторских прав


ѕоиск на сайте:

Ћучшие изречени€:

Ћучша€ месть Ц огромный успех. © ‘рэнк —инатра
==> читать все изречени€...

507 - | 486 -


© 2015-2023 lektsii.org -  онтакты - ѕоследнее добавление

√ен: 0.662 с.