[An error occurred while processing this directive]
- робимо текст невидимим;
- вчимося записувати функцію;
- оператор if. else;
- анатомія функції і нові об'єкти
трохи CSS
Пам'ятайте захований текст в першому уроці - пояснення для тих, хто не знає, що таке змінна?
Сьогодні ми навчимося робити такі штуки, а заодно напишемо простеньку функцію.
Урок буде виключно практичний, ми галопом пронесемо по незвіданих земель, які не вдаючись поки в подробиці. Але дуже скоро (а може бути, і в наступному уроці) настане час «збирати каміння». Морально готуйтеся: це буде дуже занудно.
А сьогодні - велика і, сподіваюся, змістовна екскурсія.
Спершу звернемося до CSS. Сподіваюся, що основами цієї мови Ви володієте. Якщо немає - раджу на тиждень (а може, тільки на пару годин - це залежить не стільки від здібностей, скільки від «ступеня фанатизму») відкласти наші заняття і побіжно ознайомитися з CSS.
Отже, серед властивостей CSS є властивість display. У нього є купа значень:- none
- block
- inline-block
- inline
- table-header-group
- table-footer-group
- list-item
Зізнаюся чесно, далеко не всі з них мені доводилося використовувати, а з чим їдять list-item або table-чогось-там-group. поки не знаю взагалі (хоча і здогадуюся).
Але сьогодні нам потрібні два: none і block.
Ви, напевно, вже здогадалися, що «display: none;" означає "приховати", а "display: block;» - «показати», так би мовити, в звичайному вигляді.
Ось як виглядає той шматок першого уроку в коді:
Стоп! А чи знаєте Ви, що таке змінна?
Якщо немає, то натисніть цю ссилочку і прочитайте пояснення.
Як працює комп'ютер? Всі дані зберігаються на диску, і місце, де вони лежать, має бути позначено, щоб було ясно, де що шукати. Будь-яка програма (а скрипт - це не що інше, як маленька програма) працює з якимись даними. Тому зручно відразу «забити місце» для них. Ось цим місцем, цим поміченим ділянкою пам'яті і стає ясно. Чому «змінна»? Тому що ця ділянка може заповнюватися різними значеннями. Наприклад, коли ми працюємо з калькулятором, то числа і дії з ними, які ми вводимо, записуються програмою в відповідні змінні. А при натисканні кнопки виконання вступає в дію алгоритм, який використовує ті значення, які ми ввели.
приховані
-абзаци сховані в
У коді посилань фігурує знайоме "var". тобто «власна назва» нашого div 'а. А ось displ () - це ім'я функції, яка поміщена між
і .Вчимося писати функції
Це дуже простенька функція. Ось як вона виглядає:
function імя_функциі (аргумент1, аргумент2) <код в теле функции>
function імя_функциі (аргумент1, аргумент2) <код в теле функции>
function імя_функциі (аргумент1, аргумент2)
function імя_функциі (аргумент1, аргумент2)
Тобто примусового розриву або, навпаки, «нерозривний» рядки між дужками і іншими елементами не потрібно. Але обидві дужки повинні бути.
Я спеціально так багато занудство навколо цього. Синтаксис будь-якої мови програмування треба зарубати собі на носі, особливо HTML 'щикам, так як HTML допускає деякі варіанти і, так би мовити, «потурання». Справжній мову програмування - НІ.
Отже, наша функція displ (nnn) має аргумент nnn. який, як видно з фрагмента коду HTML, наведеного вище, бере на себе id (ідентифікатор, унікальне ім'я) того елемента (тега), який ми хочемо показати або заховати.
Оператор if. else
Як правило, програми пишуть для того, щоб вони, ці програми, полегшували нашу працю і робили замість нас якісь дії. Для виконання цих дій, або, іншими словами, операцій, мови програмування напхані всілякими операторами. Найпростіший і уживаний оператор - if. else.
«Якщо (if) магазин відкритий, я піду в магазин. В іншому випадку (else) я піду пити пиво. »
«Магазин відкритий» є умовою. при якому виконується дію 1 ( «я піду в магазин»).
При відсутності цієї умови (else) виконується дію 2 ( «я піду пити пиво»).
Напишемо цю маячню по-яваскріптскі:
І знову звертаємо увагу на синтаксис.
Умова - в круглих дужках.
Дії - в фігурних дужках.
Є ще й більш короткий запис: без ключових слів if і else. а за допомогою спеціальних символів. Але на ранніх етапах не рекомендую цим захоплюватися. Спробуйте розібратися в цій маленькій головоломці самі:
магазин відкритий? я піду в магазин: я піду пити пиво
Об'єкти, об'єкти, об'єкти.
Подивимося «іф» з нашої функції.
Його умова - document.getElementById (nnn) .style.display == 'none'
Що б це значило?
Ми вже зустрічали такий об'єкт document з методом write (). Пам'ятайте - document.write ( "всякий там різний текст").
Знайдений цим методом елемент - теж об'єкт, тільки рангом нижче, ніж document. І у нього є свої методи і властивості. Деякі з них відповідають атрибутам тегів HTML. ось як, наприклад, властивість style.
Яке теж, в свою чергу, об'єкт зі своїми властивостями, серед яких і display.
Тобто всі об'єкти, які є методами і властивостями інших об'єктів, нанизуються через точку по низхідній ієрархії.
Що ж вийшло? По-російськи кажучи, «якщо в документі є елемент на ім'я такої-то, і він невидимий» - ось воно, наша умова.
А тепер все дуже просто. Якщо цей самий елемент невидимий, то він повинен стати видимим. Тобто в фігурні дужки дії скопіюємо те ж саме, але замість none поставимо block.
В іншому ж випадку (а «противний випадок» настає, коли наш елемент відображається) він знову повинен стати невидимкою. Значить в дію для else просто копіюємо те, що було в умови.
Тепер подивіться: замість ідентифікатора елемента ми вписали ім'я аргументу функції. Тепер, якщо ми викличемо цю функцію з коду HTML. поставивши в якості аргументу реально існуючий ідентифікатор, то функція звернеться саме до нього.
І така ось підставі. Ви звернули увагу на одиничні лапки? Чому вони тут, коли начебто нічого не заважає їм бути подвійними?
У документі HTML функція виконується всередині атрибута href. в якому вона вже взяв у лапки. І з подвійними лапками вона не виконається. Це перевірено методом тику () на власній шкурі і даху і безсонні ночі.
як будується функція, як працює цикл if. else, а також трохи про об'єкти і їх ієрархії.
А також навчилися:
приховувати і показувати текст, натискаючи на посилання.