Область видимості блоку. Clip

Зовсім необов'язково показувати весь блок цілком. Можна показати тільки частину блоку. Управляється таке відображення параметром clip опису CSS:

<DIV STYLE="position:absolute;top:0;left:0;

width:300px;height:50px;

clip:rect(0,100,20,0);">

...

< / DIV>

При вирізуванні області видимості в Internet Explorer слід враховувати, що працює clip тільки при абсолютному позиціонуванні. У Netscape Navigator підтримується як абсолютне позиціонування, так і відносне.

Лекція 12. Призначення та застосування JavaScript.

• Вступ. Особливості JavaScript

• Розміщення коду JavaScript на HTML-сторінці

• Спосіб 1: URL-схема "JavaScript:"

• Спосіб 2: обробники подій

• Спосіб 3: підстановки

• Спосіб 4: вставка (контейнер <SCRIPT>)

  • Розміщення коду всередині HTML-документа

  • Умовна генерація HTML-розмітки на стороні браузера

• Коментарі в HTML і JavaScript

• Вказівка мови сценарію

• Регістр символів

 

 

 

 

 

Описано призначення мови JavaScript. Розглянуто способи впровадження JavaScript-коду в HTML-сторінку і принципи його роботи.

Вступ

Гіпертекстова інформаційна система складається з безлічі інформаційних вузлів, безлічі гіпертекстових зв'язків, визначених на цих вузлах і інструментах маніпулювання вузлами і зв'язками. Технологія World Wide Web - це технологія ведення гіпертекстових розподілених систем в Internet, і, отже, вона повинна відповідати загальним визначенням таких систем. Це означає, що всі перераховані вище компоненти гіпертекстової системи повинні бути і в Web.

Web як гіпертекстову систему можна розглядати з двох точок зору. По-перше, як сукупність відображуваних сторінок, пов'язаних гіпертекстовими переходами (посиланнями - контейнер <A>). По-друге, як безліч елементарних інформаційних об'єктів, що становлять відображаються сторінки (текст, графіка, мобільний код і т.п.). В останньому випадку безліч гіпертекстових переходів сторінки - це такий же інформаційний фрагмент, як і вбудована в текст картинка.

При другому підході гіпертекстова мережа визначається на безлічі елементарних інформаційних об'єктів самими HTML-сторінками, які і відіграють роль гіпертекстових зв'язків. Цей підхід більш продуктивний з точки зору побудови відображуваних сторінок "на льоту" з готових компонентів.

При генерації сторінок в Web виникає дилема, пов'язана з архітектурою "клієнт-сервер". Сторінки можна генерувати як на стороні клієнта, так і на стороні сервера. У 1995 році фахівці компанії Netscape створили механізм управління сторінками на клієнтській стороні, розробивши мову програмування JavaScript.

Таким чином, JavaScript - це мова керування сценаріями перегляду гіпертекстових сторінок Web на стороні клієнта. Якщо бути більш точним, то JavaScript - це не лише мова програмування на стороні клієнта. Liveware, прабатько JavaScript, є засобом підстановок на стороні сервера Netscape. Однак найбільшу популярність JavaScript забезпечило програмування на стороні клієнта.

Основна ідея JavaScript полягає в можливості зміни значень атрибутів HTML-контейнерів і властивостей середовища відображення в процесі перегляду HTML-сторінки користувачем. При цьому перезавантаження сторінки не відбувається. На практиці це виражається в тому, що можна, наприклад, змінити колір фону сторінки або інтегровану в документ картинку, відкрити нове вікно або видати попередження.

Назва "JavaScript" є зареєстрованим товарним знаком компанії Sun Microsystems. Реалізація мови, здійснена розробниками Microsoft, офіційно називається JScript. Версії JScript сумісні (якщо бути зовсім точним, то не до кінця) з відповідними версіями JavaScript, тобто JavaScript є підмножиною мови JScript. У даний момент JavaScript повністю займає нішу браузерних мов. На синтаксис JavaScript вплинув мова Java, звідки і пішла назва JavaScript; як і Java, мова JavaScript є об'єктним. Проте на цьому їх зв'язок закінчується: Java і JavaScript - це різні мови, ні один не є підмножиною іншого.

Стандартизація мови була ініційована компанією Netscape і здійснюється асоціацією ECMA (European Computer Manufacturers Association - Асоціація європейських виробників комп'ютерів). Стандартизована версія має назву ECMAScript і описується стандартом ECMA-262.

Перша версія стандарту (прийнята в 1997 р.) приблизно відповідала JavaScript 1.1. На даний момент (2008 р) вийшла вже третя редакція стандарту (прийнята в грудні 1999 р), що включає потужні регулярні вирази, поліпшену підтримку рядків, нові керуючі конструкції, обробку винятків try / catch, конкретизоване визначення помилок, форматування при чисельному виведення та інші зміни . Ведеться робота над розширеннями і четвертої редакцією стандарту. Відзначимо, що не всі реалізації JavaScript на сьогодні повністю відповідають стандарту ECMA. У рамках даного курсу ми у всіх випадках будемо використовувати назву JavaScript.

Розміщення коду JavaScript на HTML-сторінці

Головне питання будь-якого початківця програміста: "Як оформити програму і виконати її?". Спробуємо на нього відповісти якомога простіше, але при цьому не забуваючи про всі способи застосування JavaScript-коду.

По-перше, виконує JavaScript-код браузер. У нього вбудований інтерпретатор JavaScript. Отже, виконання програми залежить від того, коли і як цей інтерпретатор отримує управління. Це, у свою чергу, залежить від функціонального застосування коду. У загальному випадку можна виділити чотири способи функціонального використання JavaScript:

• гіпертекстове посилання (схема URL);

• обробник події (в атрибутах, що відповідають подіям);

• підстановка (entity);

• вставка (контейнер <SCRIPT>).

Нижче ми розглянемо їх по черзі. У підручниках з JavaScript опис застосування JavaScript зазвичай починають з контейнера <SCRIPT>. Але з точки зору розуміння суті взаємодії JavaScript і HTML це не зовсім правильно, оскільки такий порядок не дає відповіді на ключове питання: як JavaScript-код отримує управління? Іншими словами, яким чином викликається і виконується програма, написана на JavaScript і розміщена в HTML-документі?

В залежності від професії автора HTML-сторінки і рівня його знайомства з основами програмування можливі кілька варіантів початку освоєння JavaScript. Якщо ви програміст класичного спрямування (С, Fortran, Pascal і т.п.), то простіше за все починати з програмування всередині тіла документа. Якщо ви звикли програмувати під Windows, то в цьому випадку починайте з програмування обробників подій. Якщо ж ви маєте лише досвід HTML-розмітки або давно не писали програм, то тоді краще почати з програмування гіпертекстових переходів.

Примітка 1. Усі наступні приклади Ви можете перевіряти на працездатність у Вашому браузері самостійно. Для цього скопіюйте текст прикладу в файл (скажімо, primer.htm); якщо текст прикладу складається тільки з JavaScript-коду, то укладіть його в теги <SCRIPT> і </ SCRIPT>. Одержаний файл можна переглядати в браузері.

Примітка 2. У даній вступній лекції приклади даються без розбору деталей всіх використаних конструкцій - сприймайте їх поки інтуїтивно. Наступні лекції всі прояснять. Опишемо лише два найважливіших оператора, що зустрічаються майже в кожному прикладі. Оператор alert (рядок) виводить цей рядок на екран у вікні попередження, приклад такого вікна зображений на рис. 1.1. Оператор document.write (рядок) записує зазначену рядок у поточний HTML-документ. Наприклад, наступні два фрагменти HTML-документа рівносильні:

Простий HTML-документ	Використання document.write ()
<HTML> <BODY> <H1> Тема </ H1> </ BODY> </ HTML>	<HTML> <BODY> <SCRIPT > document.write ('<H1> Тема </ H1>'); </ SCRIPT> </ BODY> </ HTML>

Спосіб 1: URL-схема "JavaScript:"

Схема URL (Uniform Resource Locator) - це один з основних елементів Web-технології. Кожен інформаційний ресурс в Web має свій унікальний URL. URL вказують в атрибуті HREF контейнера A, в атрибуті SRC контейнера IMG, в атрибуті ACTION контейнера FORM і т.п. Всі URL поділяються на схеми доступу, які залежать від протоколу доступу до ресурсу, наприклад, для доступу до FTP-архіву застосовується схема ftp, для доступу до Gopher-архіву - схема gopher, для відправки електронної пошти - схема mailto. Тип схеми визначається за першим компоненту URL, наприклад:

http://intuit.ru/directory/page.html

У даному випадку URL починається з http - це і є завдання схеми доступу (схема http).

Основним завданням мови програмування гіпертекстової системи є програмування гіпертекстових переходів. Це означає, що при виборі тієї чи іншої гіпертекстового посилання викликається програма реалізації гіпертекстового переходу. У Web-технології стандартною програмою, що викликається при гіпертекстовому переході, є програма завантаження сторінки (тобто при кліці по посиланню завантажується сторінка з зазначеним URL). JavaScript дозволяє поміняти стандартну програму на програму користувача. Для того щоб відрізнити стандартний перехід по протоколу HTTP від переходу, програмованого на JavaScript, розробники мови ввели нову схему URL - JavaScript:

<A HREF="JavaScript:код_программи"> ...</ A>

<FORM ACTION = "JavaScript: код_программи "...> ... </ FORM>

У даному випадку текст "код_программи" позначає програму-обробник на JavaScript, яка викликається при виборі гіпертекстового посилання в першому випадку і при відправці даних форми (натисканні кнопки Submit) - у другому. Наприклад, при натисканні на гіпертекстове посилання "Кликни тут" можна отримати вікно попередження:

<A HREF="JavaScript:alert('Вніманіе!!!');"> Кликни тут </ A>

Рис. 1.1. Вікно попередження

А при натисканні на кнопку типу submit у формі можна заповнити текстове поле цієї ж форми:

<FORM METHOD = post NAME = "form"

 ACTION = "JavaScript: form.e.value = 'Натиснули кнопку: Заповнити'; void (0); ">

TYPE=text NAME=e SIZE=30 VALUE=""> <BR> <INPUT

<INPUTTYPE=submit VALUE="Заполніть">

<INPUT TYPE=reset VALUE="Очістіть">

</ FORM >

Приклад 1.1. Заповнення поля при натисканні кнопки

У URL можна розміщувати складні програми і виклики функцій. Таким чином, при програмуванні гіпертекстового переходу JavaScript-інтерпретатор отримує управління після того, як користувач "клікнув" через гіпертекстове посилання.

Спосіб 2: обробники подій

Такі програми, як обробники подій, вказуються в атрибутах контейнерів, з якими ці події пов'язані. Наприклад, при натисненні на кнопку відбувається подія Click і відповідно викликається обробник цієї події onClick:

<FORM> <INPUT TYPE=button VALUE="Кнопка"

    onClick="alert('Ви натиснули кнопку');"> </  В

FORM>момент завершення повного завантаження документа (він пов'язаний з контейнером <BODY>) відбувається подія Load і, відповідно, буде викликаний обробник цієї події onLoad:

<BODY onLoad="alert('Пріветствуем!');">

...

</ BODY>

Спосіб 3: підстановки

Підстановки (entity) підтримуються тільки браузером Netscape Navigator 4.0. Вони зустрічаються на Web-сторінках досить рідко. Тим не менш це досить потужний інструмент генерації HTML-сторінки на стороні браузера. Підстановки мають формат: & {код_программи}; і використовуються як значення атрибутів HTML-контейнерів. У наступному прикладі поле введення INPUT буде мати, як значення за замовчуванням, адреса поточної сторінки, а розмір поля буде рівним кількості символів в цю адресу.

<HTML>

<HEAD>

<SCRIPT>

Function l ()

{str

 = window.location. href;

 return

(str.length);}

</ SCRIPT>

</ HEAD>

<BODY>

<FORM> <INPUT TYPE = text SIZE = "& {l ()};"

  VALUE =" & {window.location.href }; ">

</ FORM>

</ BODY>

</ HTML>

У разі підстановки JavaScript-інтерпретатор отримує управління в момент розбору браузером (компонент парсер) HTML-документа. Як тільки парсер зустрічає конструкцію &{..}; у атрибуту контейнера, він передає управління JavaScript-інтерпретатору, який, у свою чергу, після виконання коду це управління повертає парсер. Таким чином, дана операція аналогічна підкачування графіки на HTML-сторінку.

Очевидно, що розміщувати в заголовку документа генерацію тексту сторінки безглуздо - він не буде відображений браузером. Тому в заголовок поміщають декларації загальних змінних і функцій, які будуть потім використовуватися в тілі документа. При цьому браузер Netscape Navigator більш вимогливий, ніж Internet Explorer. Якщо не розмістити опис функції в заголовку, то при її виклику в тілі документа можна отримати повідомлення про те, що дана функція не визначена.

В Internet Explorer підстановки не підтримуються, тому користуватися ними слід акуратно. Перш ніж видати браузеру сторінку з підстановками, потрібно перевірити тип цього браузера. Альтернативою підстановка в Internet Explorer можна вважати динамічні властивості стилю. Наприклад, наступний фрагмент створить поле введення, ширина якого в пікселях (px) дорівнює кількості символів в адресі сторінки, помноженому на 10:

<INPUT TYPE = text style = "width: expression (10 * location.href.length + 'px')" >

Ми не будемо детально зупинятися на цьому способі використання JavaScript-коду.

Спосіб 4: вставка (контейнер <SCRIPT>)

Контейнер SCRIPT - це розвиток підстановок до можливості генерації тексту документа JavaScript-кодом. У цьому сенсі застосування SCRIPT аналогічно Server Side Includes, тобто генерації сторінок документів на стороні сервера. Однак тут ми забігли трохи вперед. При розборі документа HTML-парсер передає управління JavaScript-інтерпретатору після того, як зустріне тег початку контейнера <SCRIPT>. Інтерпретатор отримує на виконання весь фрагмент коду всередині контейнера SCRIPT і повертає управління HTML-парсер для обробки тексту сторінки після тега кінця контейнера </ SCRIPT>.

Поміщати JavaScript-код на HTML-сторінці за допомогою контейнера <SCRIPT> можна двома способами. Перший полягає в написанні тексту коду безпосередньо всередині цього контейнера:

<SCRIPT>

a = 5;

</ SCRIPT>

Другий спосіб полягає в тому, щоб винести код JavaScript в окремий файл, наприклад, myscript.js (розширення може бути будь-яким), і потім включити його в HTML-сторінку наступним чином:

<SCRIPT SRC="myscript.js"> </ SCRIPT>

Цей спосіб зручний, коли один і той же скрипт планується використовувати на різних HTML-сторінках. Зверніть увагу, що при наявності атрибуту SRC вміст контейнера <SCRIPT> порожньо, і це не випадково: згідно специфікації HTML, якщо скрипт підключається із зовнішнього файлу, то скрипт, написаний між тегами <SCRIPT> і </ SCRIPT>, якщо такий є, буде проігнорований браузером.

Тут доречно невелике зауваження, яке дозволить Вам уникнути однієї помилки початківців програмістів. Між тегами <SCRIPT> і </ SCRIPT> не повинно зустрічатися послідовності символів </ SCRIPT> у будь-якому контексті. Наприклад, наступний приклад працювати не буде:

<SCRIPT>

alert ('</ script>');

</ SCRIPT>

Справа в тому, що специфіка розбору HTML-документа браузером така, що він спочатку визначає межі скрипта, а потім вже передає його інтерпретатору JavaScript. У нашому випадку браузер вважатиме, що код скрипта завершився на першій же зустрілася йому послідовності символів "</ script>", тобто не на тій, на якій було потрібно нам. Щоб приклад запрацював, достатньо, наприклад, написати alert ('<\ / script>') (тому що комбінація "\ /" виводить на екран символ "/"), або розбити рядок на дві: alert ('</ scr '+' ipt> ').

Контейнер SCRIPT виконує дві основні функції:

• розміщення коду всередині HTML-документа;

• умовна генерація HTML-розмітки на стороні браузера.

Перша функція аналогічна декларуванню змінних і функцій, які потім можна буде використовувати в якості програм переходів, обробників подій і підстановок. Друга - це підстановка результатів виконання JavaScript-коду в момент завантаження чи перезавантаження документа.

Розміщення коду всередині HTML-документа

Власне, особливого розмаїття тут немає. Код можна розмістити або в заголовку документа (всередині контейнера HEAD) або в тілі документа (всередині контейнера BODY). Останній спосіб і його особливості будуть розглянуті в розділі "Умовна генерація HTML-розмітки на стороні браузера". Тому звернемося до заголовка документа.

Код в заголовку документа розміщується всередині контейнера SCRIPT. У наступному прикладі ми декларували функцію time_scroll () в заголовку документа, а потім викликали її як обробник події Load в тезі початку контейнера BODY.

<HTML>

<HEAD>

<SCRIPT>

Function time_scroll ()

{var

 d = new Date ();

 window . status = d.getHours ()

         + ':' + d.getMinutes ()

         + ':' + d.getSeconds ();

 setTimeout ('time_scroll ()',

1000);}

</ SCRIPT>

</ HEAD>

< BODY onLoad = "time_scroll ()">

<H1> Годинник у рядку статусу </ H1>

</ BODY>

</ HTML>

Приклад 1.2. Годинник у полі статусу вікна

Функція time_scroll () викликається після закінчення повного завантаження документа (обробником onLoad). Вона заносить поточну дату і час (new Date) в змінну d. Потім записує поточний час у форматі ГГ: ММ: СС у window.status, тим самим воно буде відображатися в полі статусу вікна браузера. Нарешті, вона відкладає (setTimeout) повторний виклик самої себе на 1000 мілісекунд (тобто 1 секунду). Таким чином, кожну секунду в полі статусу буде відображатися новий час.

Умовна генерація HTML-розмітки на стороні браузера

Завжди приємно отримувати з сервера сторінку, підлаштований під можливості нашого браузера або, більше того, під користувача. Існує тільки дві можливості генерації таких сторінок: на стороні сервера або безпосередньо у клієнта. JavaScript-код виконується на стороні клієнта (насправді, сервери компанії Netscape здатні виконувати JavaScript-код і на стороні сервера, тільки в цьому випадку він носить назву LiveWire-код, не плутати з LiveConnect), тому розглянемо тільки генерацію на стороні клієнта.

Для генерації HTML-розмітки контейнер SCRIPT розміщують в тілі документа, тобто всередині контейнера BODY. Простий приклад - вбудовування в сторінку локального часу:

<BODY>

...

<SCRIPT>

d = new Date ();

document.write ('Момент завантаження сторінки:'

+ d.getHours () + ':'

+ d.getMinutes ( ) + ':'

+ d.getSeconds ());

</ SCRIPT>

...

</ BODY>

Приклад 1.3. Точний час завантаження сторінки

Коментарі в HTML і JavaScript

Кілька слів про різні види коментарів. У програмі JavaScript можна залишати коментарі, які ігноруються JavaScript-інтерпретатором і служать як пояснення для розробників. Однорядкові коментарі починаються з символів / /. Текст починаючи з цих символів і до кінця рядка вважається коментарем. Багаторядковий коментар укладається між символами / * і * / і може розповсюджуватися на кілька рядків.

<SCRIPT>

 

a = 5; / / однорядковий коментар

 

/ * Багаторядковий

  коментар * /

 

</ SCRIPT>

Щоб приховати JavaScript-коду від інтерпретації старими браузерами, що не підтримують JavaScript (у високого начальства ще зустрічаються), весь JavaScript-код між тегами <SCRIPT> і </ SCRIPT> доводиться укладати в HTML-коментарі <! - І ->. Можна припустити, що ці комбінації символів, не будучи повноцінними операторами JavaScript, можуть бути невірно зрозуміли JavaScript-інтерпретатором і породжувати помилки. Однак цього не відбувається, так як розробники мови ввели угоду: комбінація символів <! - Вважається початком однорядкового комментария (поряд з / /). З другої комбінацією (-->) такий трюк неможливий (тому що подвійний мінус має спеціальне значення в JavaScript), і її доводиться коментувати символами / /, що ілюструє наступний приклад.

<SCRIPT>

<! - Приховуємо JavaScript-код від старих браузерів

 

a = 5;

 

/ / ->

</ SCRIPT>

Проте в даному курсі ми не будемо захаращувати приклади такого роду HTML-коментарями, переклавши цей обов'язок на користувача. До того ж, усе рідше можна зустріти браузери, які замість виконання JavaScript-коду видають його текст у вікно браузера.

Вказівка мови сценарію

Контейнер <SCRIPT> має необов'язковий атрибут LANGUAGE, який вказує мова, на якому написаний міститься всередині контейнера скрипт. Значення атрибута не чутливе до регістру. Якщо цей атрибут опущений, то його значенням за замовчуванням вважається "JavaScript". Тому всі наші приклади можна записувати в такий спосіб:

<SCRIPT LANGUAGE="JavaScript">

...

</ SCRIPT>

Як альтернатива атрибут LANGUAGE може приймати значення "JScript" (згадувана вище різновид мови JavaScript, розроблена компанією Microsoft), "VBScript" або "VBS" (обидва вказують на мову програмування VBScript, заснований на Visual Basic і теж є дітищем Microsoft; підтримується переважно браузером Internet Explorer) та інші. Крім того, для JavaScript буває необхідно вказати версію мови, наприклад, LANGUAGE = "JavaScript1.2". Потреба в цьому може виникнути, якщо потрібно написати різні ділянки коду для браузерів, що підтримують різні версії мови.

Слід також мати на увазі, що в цій версії мови HTML (тобто 4.0 і вище) атрибут LANGUAGE контейнера <SCRIPT> вважається застарілим і нерекомендуемим до використання (deprecated). Замість нього в контейнері <SCRIPT> рекомендується використовувати атрибут TYPE. Його значеннями, також не чутливими до регістру, можуть бути "text / javascript" (значення за замовчуванням), "text / vbscript" та інші. Наприклад, всі наші приклади можна оформляти так:

<SCRIPT TYPE="text/javascript">

...

</ SCRIPT>

Деякі старі браузери не розуміють атрибут TYPE, тому можна ставити обидва атрибуту одночасно - LANGUAGE і TYPE. Атрибут TYPE має вищий пріоритет, тобто якщо браузер розпізнає значення TYPE, то значення LANGUAGE ігнорується.

Оскільки в будь-якому випадку значення за замовчуванням відповідає мові JavaScript, в наших прикладах ці атрибути будуть опускатися.

Регістр символів

Як Ви, напевно, знаєте, мову HTML є регістрозалежному незалежним. Внаслідок цього, контейнер <SCRIPT> можна писати як <script>, його атрибути - як Type, LANGuage і src, значення атрибутів, що вказують мову, - як "JavaSCRIPT" і "TEXT / JavaScript". Зрозуміло, значення атрибуту SRC, тобто ім'я файлу, слід писати так, як файл названо в операційній системі.

Навпаки, мова ж JavaScript - регістрозалежному залежний. Це означає, що всі змінні, функції, ключові слова і т.п. повинні набиратися в тому ж регістрі, в якому вони задані в мові або в програмі користувача. Наприклад, якщо Ви оголосили змінну var myText = 'Привіт', то надалі її можна використовувати тільки як myText, але не MyText. У цьому криється часта помилка, яку допускають програмісти на JavaScript. Вона посилюється ще й тим, що JavaScript не вимагає явно декларувати змінні, і зустрівши MyText, інтерпретатор може вирішити, що це нова (але не оголошена) змінна.

Це стосується і всіх вбудованих об'єктів, властивостей і методів мови. Наприклад, об'єктом є document. Виклик document.write () не можна записати як Document.write () або document.Write (). До властивості об'єкта document, що задає колір фону Web-сторінки, можна звернутися тільки як document.bgColor, а метод цього ж об'єкта, що видає елемент із заданим ідентифікатором "id5", можна викликати тільки як document.getElementById ("id5").

Назви подій , такі як Click (клацання мишею), DblClick (подвійне клацання мишею), Load (закінчення завантаження документа) і т.п. самі по собі не є елементами синтаксису. Обробники ж відповідних подій можуть з'являтися в двох контекстах:

• усередині коду JavaScript - в цьому випадку регістр має значення. Наприклад, щоб при виникненні події Load викликалася функція myFunction, ми повинні написати: window.onload = myFunction. Назви обробників подій onload, onmouseover і т.п. в такому контексті мають бути написані маленькими літерами;

• як атрибут будь-якого HTML-контейнера - у цьому випадку регістр не важливий. Наприклад, щоб обробник події onLoad викликав функцію myFunction, ми можемо написати в HTML-ісходнике: <BODY onLoad="myFunction()"> або <BODY ONLOAD="myFunction()">.

Лекція 13.

Елементи мови JavaScript. Типи даних і оператори.

Розглядаються основи синтаксису мови JavaScript: літерали, змінні, масиви, умовні оператори, оператори циклів.

• Типи даних мови JavaScript

  • Літерали

  • Змінні

• Масиви

  • Метод join ()

  • Метод reverse ()

  • Метод sort ()

• Оператори мови

  • If ... else ...

  • ()?:

  • while

  • for

  • Break

  • continue

  • Return

Типи даних мови JavaScript

Як і будь-який інший мова програмування, JavaScript підтримує вбудовані структури і типи даних. Всі їх різноманіття підрозділяється на:

літерали;

1. змінні;

2. масиви;

3. функції;

4. об'єкти.

При цьому всі вони діляться на вбудовані і які визначаються програмістом. Функції та об'єкти будуть розглянуті в наступній лекції.

Літерали

літералом називають дані, які використовуються в програмі безпосередньо. При цьому під даними розуміються числа або рядка тексту. Всі вони розглядаються в JavaScript як елементарні типи даних. Наведемо приклади літералів:

числовий літерал: 10

числовий літерал: 2.310

числової літерал: 2.3e +2

строковий літерал: 'Це строковий літерал'

строковий літерал: "Це строковий літерал"

Літерали використовуються в операціях присвоювання значень змінним або в операціях порівняння:

var a = 10;

var str = 'Рядок';

if (x == 'test') alert (x);

Оператор присвоювання (змінна = вираз) повертає результат обчислення виразу, тому ніщо не заважає отримане значення привласнити ще й інший змінної. Таким чином, послідовність операторів присвоювання виконується справа наліво:

result = x = 5 +7;

Два варіанти строкових літералів необхідні для того, щоб використовувати вкладені рядкові літерали. Якщо в строковому літералі потрібно використовувати одинарні лапки, то сам літерал можна укласти в подвійні лапки: "It's cool!". Вірно і зворотне. Але якщо є необхідність використовувати в строковому літералі обидва види лапок, то найпростіше всіх їх "екранувати" символом зворотної косої риси \, при цьому саму рядок можна укласти в будь-яку пару лапок. Наприклад: команда:

document.write ("It \ 's good to say \" Hello \ "to someone!");

Видасть:

It's good to say "Hello" to someone!

Крім строкових літералів (послідовностей символів, укладених в лапки) є ще строкові об'єкти; вони створюються конструктором: var s = new String (). У цього об'єкта існує багато методів (про об'єкти і методи піде мова в наступній лекції). Слід розуміти, що строковий літерал і рядковий об'єкт - далеко не одне і те ж. Але часто ми цього не помічаємо, тому що при застосуванні до рядкових літералом методів рядкових об'єктів відбувається перетворення перших в останні.

Наприклад, можна надати спершу var s = 'abra-kadabra', а потім застосувати метод: var m = s.split ('b'), який неявно перетворить строковий літерал s у послідовну об'єкт і потім розбиває рядок у тих місцях, де зустрічається підрядок 'b', повертаючи масив рядків-шматків: масив m буде складатися з рядків 'a', 'ra-kada' і 'ra' (масиви розглядаються нижче).

Змінні

Змінна - це область пам'яті, що має своє ім'я і зберігає деякі дані. Змінні в JavaScript оголошуються за допомогою оператора var, при цьому можна давати або не давати їм початкові значення:

var k;

var h = 'Привіт!';

Можна повідомляти відразу кілька змінних в одному операторі var (тим самим зменшуючи розмір коду), але тоді їх треба писати через кому. При цьому теж можна давати чи не давати початкові значення:

var k, h = 'Привіт!';

Var t = 37, e = 2.71828;

Тип змінної визначається по наданим їй значенням. Мова JavaScript - слабо типізував: у різних частинах програми можна присвоювати однієї і тієї ж змінної значення різних типів, і інтерпретатор буде "на льоту" міняти тип змінної. Дізнатися тип змінної можна за допомогою оператора typeof ():

var i = 5; alert (typeof (i));

i = new Array (); alert (typeof (i));

i = 3.14; alert (typeof (i)) ;

i = 'Привіт!'; alert (typeof (i));

i = window.open (); alert (typeof (i));

Змінна, оголошена оператором var поза функцій, є глобальною - вона "видно" усюди в скрипті . Змінна, оголошена оператором var всередині якої-небудь функції, є локальною - вона "видно" тільки в межах цієї функції. Детальніше про функції буде розказано в наступному розділі цієї лекції.

Наприклад, в наступному фрагменті нічого не буде виведено на екран, не дивлячись на те, що ми звертаємося до змінної k після опису функції, і навіть після її виклику:

function f (){

var k = 5;

}

f();

alert (k);

Причина в тому, що змінна k є локальною, і вона існує тільки в процесі роботи функції f (), а після закінчення її роботи знищується.

Якщо є глобальна змінна k, а всередині функції оголошується локальна змінна з тим же ім'ям (оператором var k), то це буде інша змінна, і зміна її значення усередині функції ніяк не вплине на значення глобальної змінної з тим же ім'ям. Наприклад, цей скрипт видасть 7, оскільки виклик функції f () не торкнеться значення глобальної змінної k:

var k = 7;

function f (){

var k = 5;

}

f();

alert (k);

Те ж стосується і аргументів при описі функцій (з тією лише різницею, що перед ними не потрібно ставити var): якщо є глобальна змінна k, і ми опишемо функцію function f (k) {.. .}, то змінна k всередині {...} ніяк не пов'язана з однойменної глобальної змінної. У цьому плані JavaScript не відрізняється від інших мов програмування.

Примітка. Повідомляти змінні можна і без оператора var, просто привласнюючи змінної початкове значення. Так часто роблять зі змінними циклів. У наступному прикладі, навіть якщо змінна i не була оголошена раніше, все буде працювати коректно:

for (i = 0; i <8; i + +) {... }

Однак опускати var не рекомендується. По-перше, це порушує ясність коду: якщо написано i = 5, то незрозуміло, вводиться чи тут нова змінна чи змінюється значення старої. По-друге, і це головне, потрібно пам'ятати такий момент, часто призводить до неправильної роботи програми.

Поза функцій оголошення змінної без оператора var рівносильно оголошенню з оператором var - в обох випадках змінна буде глобальною. Усередині ж функції оголошення перемінної без оператора var робить змінну глобальної (а не локальної, як можна було б припустити), і значить, її значення можуть "бачити" і змінювати інші функції або оператори поза цієї функції. При цьому така мінлива стає глобальною не після опису, а після виклику цієї функції. Приклад:

function f (){

var i = 5;

k = 7;

}

f();

alert (k);

У наведеному прикладі після i = 5 стоїть крапка з комою (а не кома). Значить, k = 7 - це окреме оголошення змінної, вже без оператора var. Тому мінлива k "видно" зовні і її значення (7) буде виведено оператором alert (k). Щоб приховати змінну k, потрібно було після i = 5 поставити кому.

Розглянемо інший приклад, який показує, до яких несподіваних наслідків може призвести відсутність var при описі змінної:

function f(i) {

k = 7; 

if (i == 3) k = 5;  

else {f (3); alert (k);}

}

f(0);

Ми викликаємо f (0), змінної присвоюється значення k = 7, далі виконання функції йде по гілці else - і оператор alert (k) видає 5 замість очікуваного 7. Причина в тому, що виклик f (3) в якості "побічного ефекту" змінив значення k. Щоб такого не сталося, потрібно перед k = 7 поставити var. Тоді мінлива k буде локальної та виклик f (3) не зможе її змінити, тому що при виконанні функції створюються нові копії всіх її локальних змінних.

При написанні великих програм подібні помилки важко відстежити, тому настійно рекомендується всі змінні оголошувати з оператором var, особливо всередині функцій.

Масиви

Масиви діляться на вбудовані (document.links [], document.images [] тощо - їх ще називають колекціями) і визначені користувачем (автором документа). Колекції будуть обговорюватися в наступній лекції. Тут же ми докладно зупинимося на масивах, що визначаються користувачем. Для масивів визначено декілька методів: join (), reverse (), sort () та інші, а також властивість length, яке дозволяє отримати число елементів масиву.

Для визначення масиву користувача існує спеціальний конструктор Array. Якщо йому передається єдиний аргумент, причому ціле невід'ємне число, то створюється незаповнений масив відповідної довжини. Якщо ж передається один аргумент, який не є числом, або більше одного аргументу, то створюється масив, заповнений цими елементами:

a = new Array ();

// порожній масив (довжини 0)

b = new Array (10);

// масив довжини 10

c = new Array (10, 'Привіт');

// масив з двох елементів: числа і рядки

d = [5, 'Тест', 2.71828, 'Кількість e'];

// короткий спосіб створити масив з 4 елементів

Елементи масиву нумеруються з нуля. Тому в останньому прикладі значення d [0] дорівнює 5, а значення d [1] одно 'Тест'. Як бачимо, масив може складатися з різнорідних елементів. Масиви не можуть бути багатовимірними, проте ніщо не заважає завести масив, елементами якого будуть теж масиви.