Главная
База знаний "Allbest"
Программирование, компьютеры и кибернетика
Програмування Конвертера валют
Програмування Конвертера валют
Проект сторінки з розміщенням конвертора валют на мові програмування HTML та JavaScript. Розмітка гіпертекстових документів HTML, основні функції, властивості і параметри; структурне форматування. Технології CSS, JavaScript, ефективність використання.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | украинский |
| Дата добавления | 30.01.2012 |
| Размер файла | 1,8 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
конвертер валюта мова програмування
Приклади
|
Цей фон задається командою: <BODY background=./pic/fon1.jpg> Подивитись на повному екрані |
Картинка, яка використовується як фонова плиточка: |
|
Цей фон задається командою: <BODY background=./pic/fon2.jpg> Подивитись на повному екрані |
Картинка, яка використовується як фонова плиточка: |
|
Цей фон задається командою: <BODY background=./pic/fon3.jpg> Подивитись на повному екрані |
Картинка, яка використовується як фонова плиточка: |
|
Цей фон задається командою: <BODY background=./pic/fon4.gif> Подивитись на повному екрані |
Картинка, яка використовується як фонова плиточка: |
Антиприклади
|
Цей фон задається командою: <BODY background=./pic/bfon1.jpg> Подивитись на повному екрані Погана стиковка плиточок |
Картинка, яка використовується як фонова плиточка: |
|
Цей фон задається командою: <BODY background=./pic/bfon2.gif> Подивитись на повному екрані Дуже погана стиковка |
Картинка, яка використовується як фонова плиточка: |
|
Цей фон задається командою: <BODY background=./pic/bfon3.jpg> Подивитись на повному екрані Бережіть очі! |
Картинка, яка використовується як фонова плиточка: |
|
Цей фон задається командою: <BODY background=./pic/bfon4.jpg> Подивитись на повному екрані |
Картинка, яка використовується як фонова плиточка: |
Як бачите, з фоновими картинками потрібно звертатися дуже обережно. Якщо немає упевненості, що паркет покращує сприйняття документа, краще використовувати одноколірну заливку: на гладкому фоні текст завжди читається краще.
Графіка
Ілюстрації в тексті радують око і роблять документ привабливішим. Пора і нам записати в свій актив виведення картинок засобами HTML.
Браузери "розуміють" два графічні формати GIF і JPG.
Формат GIF
Картинки в цьому форматі підтримують 256 квітів. В більшості випадків цього цілком достатньо для отримання якісних ілюстрацій, але до фотографічної якості, звичайно, далеко.
GIF-формат має три приємні додаткові можливості:
· Мультиплікація. Використовуючи анімаційний GIF-редактор, легко зібрати простій мультик: намалювати окремих кадрів, набудувати час затримки в послідовності показу, "зациклити кіно" або показувати кадрів тільки один раз. Коли анімація готова, вона записується на диск як звичайний GIF-файл. Хоча в цьому файлі не одна, а ціла серія GIF-картинок і різна настроювальна інформація.
У HTML немає відмінності між завданням виводу на екран простого GIF або анімованого. Про те, що картинка "жива" - браузер дізнається у момент завантаження GIF-файла (з диска або мережі) і поступає відповідно. Звичайні картинки він просто розміщує на екрані і "забуває" про них. Анімовані йому доводиться опікати постійно, міняючи кадрів на екрані відповідно до програми, закладеної в самому GIF.
· Прозора графіка. У GIF-формате один колір можна оголосити прозорим. Це дозволяє позбавитися від строго прямокутних ілюстрацій і вписувати малюнок в документ привабливішим чином. Прозорий колір задається в редакторові при записі GIF-файла на диск. Звичайний GIF легко зробити прозорим. Потрібно просто завантажити його GIF-редактор або PhotoShop і знову записати на диск, вказавши прозорий колір.
· Черезрядкова розгортка. Застосовується для великих GIF. Ілюстрація розділяється на чотири частини, розміром з оригінальну картинку. Перша частина містить 1, 5, 9... рядки початкового зображення. Друга - 2, 6, 10... Третя - 3, 7, 11... Четверта - 4, 8, 12...
Браузер будує на екрані спочатку першу частину картинки, потім другу, потім третю і четвертую. Виходить ефект поступового прояву зображення. На повільних лініях Інтернету цей метод дозволяє користувачеві ще до завантаження всіх частин отримати уявлення про зображення -- адже частини будуються браузером у міру їх надходження на комп'ютер. Якщо картинка завантажується не по мережі, то відмінності виведення звичайного GIF і чересстрочного на швидких комп'ютерах практично непомітні.
Формат JPG
Цей формат був розроблений спеціально для передачі фотографій. Він підтримує мільйони кольорів і дозволяє отримувати зображення дуже високої якості.
Звичайно, висока якість відбивається на розмірах файлу. Але формат JPG має одну особливість: у JPG-редакторі, при записі на диск, можна вказати той ступінь якості, який потрібний і, тим самим, балансуючи на планці "якість-розмір файлу", досягти потрібного компромісу. Насправді, якщо з мільйона кольорів відсканованої фотографії залишити тільки 10 000, замінивши решту кольорів на близьких - на око таку підміну буде виявити практично неможливо, а розмір файлу істотно скоротиться.
JPG-формат підтримує режим, схожий на черезрядкову розгортку GIF. Але на відміну від GIF, ділення на частини відбувається не по рядках, а по алгоритму виділення з картинки повноформатних частин. При цьому кожна наступна частина за якістю вище попередньою. JPG в такому режимі називається прогресивним.
Як програмувати картинки
Картинка в тексті
Картинку можна поміщати в документ майже так само, як текстовий символ. Для вставки цього незвичайного знаку потрібно скористатися командою <>. Команда не має парного закриваючого тега, але має багато атрибутів.
Атрибут src = ім'я файлу
Найголовнішим атрибутом команди є атрибут src, за допомогою якого можна задати ім'я файлу з картинкою. Наприклад, команда <IMG src=img.gif> змусить браузер відобразити на екрані графічний файл img.gif з поточного каталога.
Зазвичай графічні файли не змішують з HTML-текстами, а поміщають в окремий каталог pic, який є підкаталогом для каталога з програмами (html-файлами). Тоді команда виведення графіки матиме вигляд:
<IMG src=./pic/img.gif>
Атрибут alt = "текст напису"
Якщо браузер не знаходить картинки у вказаному місці на диску, він замість неї малює на екрані маленький прямокутник і вписує в нього напис, який заданий атрибутом alt:
<IMG src=monstr.jpg alt="Страшный звір">
Атрибут alt рекомендується використовувати завжди. Навіть якщо картинка знайдена браузером, завдання напису не буде зайвим: варто користувачеві зупинити курсор на картинці, як напис з'явиться в маленькому віконці і повідомить додаткову інформацію. Перевірте це на наступній картинці:
<IMG src=./pic07/cat7.gif alt="А нас і тут непогано годують!">
Атрибути width = n і height = m
Ці атрибути задають ширину і висоту (у пикселах) прямокутника, в який виводиться картинка.
Якщо атрибути не задані, картинка малюється в природних розмірах.
Коли розміри прямокутника не співпадають з розмірами картинки, браузер проводить масштабування картинки, підганяючи її під вказані величини.
Рекомендується завжди записувати ці атрибути і указувати в них природні розміри картинки. Якщо розміри указуються невірно -- картинка виводиться браузером із спотворенням. Якщо вказівка розмірів зовсім опущена - на екрані відбувається маленький землетрус у момент приходу картинки з мережі. Адже, не знаючи розмірів картинки, браузер залишає під неї на екрані стандартний прямокутник, продовжуючи будувати решту елементів. Коли картинка завантажена, браузеру доводиться повністю перемальовувати екран.
Атрибут border = n
Атрибут дозволяє задати рамку ілюстрації товщиною n пікселів.
За відсутності атрибуту, або при значенні n=0 рамка не малюється.
Нижче розташовані посилання на випробувальні стенди. На них можна перевірити роботу атрибутів src, alt, width, height, border, як окремо, так і в сукупності.
Атрибут align
Цей атрибут дозволяє визначати положення ілюстрації по відношенню до сусідніх елементів документа. Можна використовувати наступні значення атрибуту:
|
align=top |
вертикальне вирівнювання по верхньому краю |
|
|
align=middle |
вертикальне вирівнювання по центру |
|
|
align=bottom |
вертикальне вирівнювання по нижньому краю |
|
|
align=left |
горизонтальне вирівнювання по лівому краю |
|
|
align=right |
горизонтальне вирівнювання по правому краю |
Давайте задамо невеликий текстовий абзац і розмістимо усередині нього картинку:
<P>Подивиться на картинку<IMG src=./pic/4.jpg align=middle>Красива пташка!</P> |
Тепер можна заглянути у випробувальний куточок і подивитися, що відбувається із зображенням при різних значеннях атрибуту align.
Картинка як посилання
Дуже легко змусити працювати картинку як гіперпосилання. Досить вкласти команду IMG всередину команди A:
<A href=переход><IMG src=файл></A>
Картинка поводиться так само, як текст. Курсор при попаданні на картинку-посилання міняє свою форму. Мишаче клацання по картинці примушує браузер виконувати перехід. Відмінність тільки в тому, що картинка-посилання не підкреслюється, як текст, і не виділяється кольором, а обрамляється в рамочку. Нижче приведений приклад графічного посилання. Клацніть по ній мишкою і побачите команду, яка це посилання задає.
Для картинки з годинником не заданий атрибут border. Проте, ми бачимо рамку. Ця рамка з'являється тому, що картинка є гіперпосиланням.
Часто рамка навколо картинки небажана, навіть коли вона означає посилання. Адже про посилання однозначно говорить зміна форми курсора, а якщо картинка - прозорий GIF - рамка виглядає непривабливо. Позбавитися від рамки, навіть коли картинка - посилання, можна явним завданням border=0.
Ці посилання задані так:
<A href=05ex0401.htm><IMG src=./pic/auto.gif border=0
width=200 height=68
alt="Попробуй, наздожени!"></A>
<A href=05ex0401.htm><IMG src=./pic/auto.gif
width=200 height=68
alt="Эх, не наздогнати... Посадили в клітку!"></A>
Побудова таблиць
У практичному HTML-программировании таблиці абсолютно незамінні для створення лівих і правих полів сторінки, вирівнювання елементів на екрані, багатоколонної верстки, накладення картинок один на одного. І, нарешті, для відображення на екрані табличного матеріалу, але це -- в останню чергу. У 90% випадках таблиці використовуються, як не парадоксально це звучить, не для відображення таблиць.
Але про все по порядку.
Що таке таблиця
Всім добре відома таблиця множення. Вона є прямокутником, розкресленим на клітки. Вертикальні ряди кліток утворюють стовпці, горизонтальні - рядки. Кожен рядок і стовпець в таблиці може мати свій заголовок. Заголовки записуються в першому рядку і першому стовпці.
Заголовками рядків і стовпців в таблиці множення служать цифри від одного до дев'яти. Користуватися таблицею дуже просто. Якщо потрібно дізнатися, наприклад, результат множення числа 6 на число 8, то потрібно прочитати відповідь в клітці на перетині стовпця із заголовком "6" і рядки із заголовком "8". Або в клітці на перетині рядка із заголовком "6" і стовпця із заголовком "8". Це все одно, тому що 6·8 = 8·6. У обох цих клітках написано число 48.
У загальному випадку таблиці використовують для зберігання інформації з двома характерними ознаками. Значення однієї ознаки розписано в заголовках рядків, іншого - у заголовках стовпців. А в кожну клітку таблиці заносять значення, що одночасно володіє ознакою рядка і стовпця, на перетині яких вона розташована.
Для таблиці множення ознаками служать значення співмножників. Перша ознака - це значення першого співмножника, другий - значення другого.
Як задати таблицю
Таблиця задається командою <TABLE> ... </TABLE>.
Усередині цих тегів задаються рядки командами <TR> ... </TR>.
Нарешті, усередині рядків задаються клітки (осередки) командами <TD> ... </TD>.
Таким чином, по рядках, описується вся структура таблиці.
Розглянемо наступний приклад
|
Програма |
Таблиця на екрані |
|
<TABLE border=1><TR> <!-- Перший рядок --><TD>(1,1) </TD> <!-- Перший осередок --><TD>(1,2) </TD> <!-- Другий осередок --></TR><TR> <!-- Другий рядок --><TD>(2,1) </TD> <!-- Перший осередок --><TD>(2,2) </TD> <!-- Другий осередок --></TR><TR> <!-- Третій рядок --><TD>(3,1) </TD> <!-- Перший осередок --><TD>(3,2) </TD> <!-- Другий осередок --></TR></TABLE> |
(1,1)(1,2)(2,1)(2,2)(3,1)(3,2) |
Атрибути команди TABLE
|
Атрибут |
Значення |
Опис |
|
|
align |
left, right |
Вирівнювання по горизонталі |
|
|
width |
число або відсоток |
Ширина таблиці |
|
|
cellpadding |
число |
Відстань між вмістом осередку і рамкою |
|
|
cellspacing |
число |
Відстань між осередками таблиці |
|
|
bgcolor |
колір |
Колір фону таблиці |
|
|
background |
файл |
Фонова картинка |
|
|
border |
число |
Ширина ліній рамки |
|
|
bordercolor |
колір |
Колір ліній рамки |
|
|
bordercolordark |
колір |
Колір рамки (знизу і справа) |
|
|
bordercolorlight |
колір |
Світлий колір рамки (зверху і зліва) |
У приведених нижче випробувачах приводиться докладніший опис дій атрибутів, а головне, на стендах можна поклацувати перемикачами, посмикати за "вірьовки" і відразу побачити, що з цього вийшло.
Атрибути команди TR
HTML-таблица складається з рядків, кожна з яких задається командою
<TR>описання осередків табличного рядка </TR>
Варіюючи атрибутами команди TR, можна встановити ті або інші властивості одночасно для всіх осередків рядка.
|
Атрибут |
Значення |
Опис |
|
|
align |
left, center, right |
Вирівнювання по горизонталі |
|
|
valign |
top, center,bottom, baseline |
Вирівнювання по вертикалі |
|
|
bgcolor |
колір |
Колір фону |
|
|
bordercolor |
колір |
Колір ліній рамки |
|
|
bordercolordark |
колір |
Колір рамки (знизу і справа) |
|
|
bordercolorlight |
колір |
Світлий колір рамки (зверху і зліва) |
Атрибути команди TD (TH)
Кожен табличний рядок складається з осередків, які послідовно описуються командами TD (звичайний осередок) і (або) TH (осередок-заголовок):
<TH>описание вмісту ячейки</TH>
<TD>описання вмісту ячейки</TD>
Вміст звичайного осередку за умовчанням горизонтально вирівнюється по лівому краю, а осередку-заголовка - по центру. Крім того, текст в осередку-заголовку виділяється напівжирним шрифтом.
Команди TD і TH мають наступні атрибути:
|
Атрибут |
Значення |
Опис |
|
|
align |
left, center, right |
Вирівнювання по горизонталі |
|
|
valign |
top, center, bottom, baseline |
Вирівнювання по вертикалі |
|
|
width |
число або відсоток |
Ширина осередку |
|
|
bgcolor |
колір |
Колір фону |
|
|
background |
файл |
Фонова картинка |
|
|
bordercolor |
колір |
Колір ліній рамки |
|
|
bordercolordark |
колір |
Колір рамки (знизу і справа) |
|
|
bordercolorlight |
колір |
Світлий колір рамки (зверху і зліва) |
|
|
nowrap |
Виключення автоматичного розриву рядків |
||
|
colspan |
число |
Ширина великого осередку (у стовпцях) |
|
|
rowspan |
число |
Висота великого осередку (у рядках) |
Багатоликі таблиці
Як вже мовилося, використання таблиць в практиці HTML-программирования дуже несподіване. Ймовірно, автори мови і не припускали, що таблиці використовуватимуться проектувальниками гіпертекстових сторінок як елемент дизайну.
Сторінкові відступи
У звичайних книгах текст не починається з самого краю -- сторінкові поля виділяють інформаційні блоки і, отже, допомагають очам комфортніше сприймати матеріал.
У гіпертекстовому документі можна створити поля, якщо розміщувати інформацію усередині таблиці, що складається всього з однієї клітки з невидимими межами. При зміні значення атрибуту cellpadding, міняється ширина полів.
|
Звичайне розміщення |
Розміщення в таблиці |
|
Малятка сина - баю-бай!- Притисни міцніше до серця І ніколи не забувай Задати дитині перцю! "Аліса в країні Чудес" |
Малятка сина - баю-бай! - Притисни міцніше до серцяІ ніколи не забувайЗадати дитині перцю! "Аліса в країні Чудес |
Можна задати поля і за допомогою порожніх стовпців:
|
Розміщення в таблиці |
Тут border=1 |
|
|
Колиши сина свого Хорошою дубиною -Побачиш, буде у нього Характер голубиний! "Аліса в країні Чудес" |
Колиши сина свого Хорошою дубиною - Побачиш, буде у нього Характер голубиний! "Аліса в країні Чудес" |
Звичайною практикою є комбінування цих двох способів:
|
Розміщення в таблиці |
Тут border=1 |
|
|
Колиши сина свого Хорошою дубиною - Побачиш, буде у нього Характер голубиний! "Аліса в країні Чудес" |
Колиши сина свого Хорошою дубиною - Побачиш, буде у нього Характер голубиний! "Аліса в країні Чудес" |
Один з прикладів табличних відступів ви бачите зараз на екрані. Як сторінковий фон використана картинка з вертикальним написом "Robotland" по лівому краю. Для того, щоб елементи сторінки не налізали на цей "корінець", всі вони виводяться на екран усередині таблиці так, як це показано в наступному прикладі.
|
Крокодили мої Квіточки річкові! Що дивитеся на мене Прямо як рідні? Це ким хрустите ви В день веселий травня, Серед нез'їденої трави Головою гойдаючи? "Аліса в країні Чудес" |
Зауваження
Не рекомендується моделювати сторінковий відступ за допомогою таблиць для великих документів. По-перше, промальовування документа, "зануреного" в таблицю починається тільки після його повного завантаження. Пауза перед чистим екраном діє на користувача самим негативним чином. По-друге, браузеры Netscape на таких табличних сторінках "втрачають орієнтацію" при поверненні з гіперпосилання. Користувач клацає на посиланні, браузер показує новий документ, а точність повернення до старого місця вже проблематична.
Багатоколонна верстка
Використовуючи таблиці, можна виводити на екран інформацію в декілька колонок:
При світлі паскудного гасового ліхтаря Остап прочитав з путівника: |
Размещено на http://www.allbest.ru/
"На правому високому березі - місто Васюки. Звідси відправляються лісові матеріали, смола, лико, рогожі, а сюди привозяться предмети широкого споживання для краю, віддаленого на 50 кілометрів від залізниці.У місті 8000 жителів, державна картонна фабрика з 320 робочими, маленький чавуноливарний, пивоварний і шкіряний заводи. З учбових закладів, окрім загальноосвітніх, лісовий технікум." |
Накладення картинок
Ще одна незвичайна практика використання таблиць: побудова колажів.
Постановка завдання. Є дві картинки:
Як їх накласти один на одного? Як помістити тварину на екран телевізора?
Загальна ідея: першу картинку зробити фоном для таблиці, а другу розмістити усередині.
Побудуємо таблицю, що складається з однієї клітки. Вкажемо для цієї клітки ширину, рівну ширині малюнка, який використовуватимемо як фон:
Так... Вийшло не дуже добре. Для завдання висоти осередку (і таблиці) творці HTML не придумали атрибуту. Ми бачимо тільки верхній шматочок фонової картинки.
Ідея: використовувати ще одну допоміжну картинку. По висоті вона повинна дорівнювати фоновою, а по ширині повинна бути такій, щоб закривати частину телевізора. Тоді лось, розташований услід за допоміжною картинкою потрапить в центр екрану.
Намалювати допоміжну картинку дуже просто -- це повинен бути одноколірний GIF, в якому єдиний колір оголошений прозорим. Тоді користувач на екрані цю картинку і не побачить:
Зауваження
Насправді малювати невидимий GIF можна будь-якої величини. Оптимальною є картинка в один піксел. Адже ми завжди можемо вказати екранні розміри в команді IMG, і наша допоміжна картинка розтягуватиметься до потрібного розміру. Спотворень можна не побоюватися -- їх не буде, а крім того, цю картинку не можна побачити на екрані ні в яку лупу!
Для того, щоб використання невидимої картинки empty.gif (з каталога pic) було зрозумілішим, нижче вона замінена на таку ж однопикселную картинку empty1.gif, але без режиму "прозорості", а картинка з лосем показана з рамкою:
Таблиці стилів
Рівні CSS
Вперше каскадні таблиці стилів CSS були реалізовані в браузере Internet Explorer 3.0. Проте у той час розвиток CSS знаходився в зачатковому стані, тому правила складання стильових шаблонів були вельми розрізненими.
З моменту свого виникнення структура CSS була кілька разів переглянута, в неї були додані нові елементи і прибрані (видозмінені) старі. Існують три рівні CSS, визначуваних наявністю завершеної редакції структури. Це: CSS 1 (перший рівень структури стильових шаблонів, остаточно затверджений 11 січня 1999 року), CSS 2 (другий рівень стильових конструкцій, початок обговорення якого датується травнем 1998 року) і CSS 3 (третій рівень стильового оформлення електронних документів, прийнятий до обговорення 23 травня 2001 року, на момент написання книги знаходився у стадії опрацьовування).
На завершення розмови про рівні CSS слід додати, що перехід від одного рівня до іншого, в основному, супроводжувався деякими видозмінами в структурі і в правилах стильового оформлення, технологічними доповненнями, а також спробами систематизувати застосування CSS.
Саме третій рівень (CSS 3) позиціонується розробниками як якась єдина система представлення стилів в електронному документі, заснованою на використанні спеціальних модулів.
Способи визначення таблиць стилів
Як вже було сказано, будь-яка таблиця стилів CSS повинна бути інтерпретована браузером для того, щоб правила CSS, позначені для конкретних елементів електронного документа, набули чинності.
Визначення таблиці стилів (стильового шаблону) можливе чотирма способами:
посилання на зовнішній файл. Якщо всі стильові шаблони для конкретного HTML-документа розмістити в одному текстовому файлі (з розширенням ess), то за допомогою спеціального тега <link> з поточного документа можна зробити посилання на зовнішній CSS-файл стильових шаблонів, наприклад:
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
Браузер, аналізуючи HTML-код, звернеться по вказаному шляху і, виявивши вказаний файл стильового оформлення, відобразить елементи сторінки відповідно до певних правил CSS.
Слід пам'ятати, що конструкція вказівки шляху до зовнішнього CSS-файлу повинна знаходитися в межах розділу head HTML-документа;
впровадження в документ. Під впровадженням в документ мається на увазі завдання стильовій конструкції усередині самої HTML-сторінокы, наприклад:
<STYLE TYPE="text/CS3">
<! --
BODY { font-family: Arial, Helvetica; }
INPUT { background-color: ICECECE; }
-- >
</STYLE>
Дана конструкція також повинна бути присутньою в розділі head. Для браузерів, не підтримуючих CSS взагалі або що підтримують лише окремі правила стильового оформлення, опис шаблонів полягає між символами коментарів (за відсутності підтримки CSS браузер пропустить зміст стильових шаблонів, якщо ж підтримка є, то браузер інтерпретує правила CSS); включення в тегові конструкції. Будь-який окремий HTML-элемент може бути підданий форматуванню засобами CSS. Для цього необхідно задати певне правило реалізації того або іншого тега, наприклад:
<Р ALIGN="justify" STYLE="color: 1000000; font-family: Verdana;">
Текст параграфа...
В цьому випадку задано окреме правило для конкретного параграфа. Також можна привласнювати окремому HTML-элементу певний клас стильового шаблону:
<TABLE>
<TR>
<TD CLASS="header"X/TD>
<TD CLASS="text"X/TD>
</TR>
</TABLE>
Опис класів повинен будуватися наступним способом (на прикладі впровадження стильового шаблону в документ):
<STYLE TYPE="text/css">
<! --
.header { font-weight: bold; color: gray; }
.text { color: black; font-size: llpx; }
-->
</STYLE>
В даному випадку текст табличного осередку класу .header відображатиметься жирним зображенням і сірим кольором, а осередки класу . text -обычным зображенням, чорним кольором і розміром шрифту 11 пікселів;
імпортування. Імпортування стильового шаблону CSS, по суті, аналогічно вказівці посилання на зовнішній файл:
<STYLE TYPE-"text/css">
<! --
@import: url(style.ess);
-->
</STYLE>
Всі чотири способи визначення стильового шаблону CSS можна використовувати одночасно в межах одного HTML-документа (лістинг 9.1). Така можливість дозволяє задавати основне правило CSS, наприклад, у вигляді зовнішнього файлу шаблонів, а для виняткових або рідкісних HTML-элементов -- окремі конструкції або в теге <style>, або в кодових конструкціях самих тегів.
Лістинг. Поєднання різних способів визначення стильового шаблону CSS
<HTML> <HEAD>
<Т1тье>совмещеніє різних способів визначення CSS</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style . css"> <STYLE
TYPE="text/css"> <! --
P { text-align: justify; color: green; }
.title { color: blue; font-weight: bold; font-size: 16px; } -- >
</STYLE> </HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="|OOFFOO"
ALINK="IOOFFOO" VLINK="blue">
<FONT CLASS="title">Cnoco6bi визначення шаблонів CSS</FONT>
Нижче перераховані існуючі способи визначення стильових шаблонів CSS, даны характеристики кожного способу, приведені приклади їх використання.
<UL>
<И>ссилка на зовнішній файл
<И>внедреніє в документ
<И>включеніє в теговые конструкції
<И>імпортірованіє
</UL>
</BODY>
</HTML>
Також слід сказати, що використання кожного способу визначення стильових шаблонів CSS може бути пов'язане з деякими мінусами.
У разі помилки інтерпретації HTML-кода браузером, поганому зв'язку з сервером і ін. зовнішній файл CSS може не завантажитися, унаслідок чого стиль для потрібних елементів HTML не буде перевизначений.
Якщо зовнішній файл CSS включає дуже велика кількість стильових шаблонів (що відбивається на кінцевому розмірі файлу), то існує вірогідність того, що браузер не зуміє повністю інтерпретувати файл CSS або взагалі вичерпає ліміт часу по завантаженню даних. У першому випадку стилі для частини елементів не будуть перевизначені (браузер встигне "виявити" тільки ті правила, які розміщені у верхній частині CSS-файла). У другому випадку всі елементи сторінки залишаться без зміни, завантажившись за умовчанням.
При використанні способу включення стилю в сам документ наявність дуже великої кількості шаблонів CSS помітно збільшить кінцевий розмір HTML-сторінок, що позначиться на часі завантаження документа в браузере.
CSS і Dynamic HTML -- просто і привабливо!187
При поєднанні різних способів визначення стильових шаблонів слід враховувати особливості браузеров. Наприклад, Netscape "погано відноситься" до використання символу нижнього підкреслення ( _ ) у вказівці класів для елементів HTML (.news_titie, ._about і т. д.). Також ряд браузеров (і Netscape зокрема) не підключає стильовий шаблон класу, привласненого елементу таблиці <то>/<тн>: конструкція <те CLASS="text">TeKCT</TD> виведе текст за умовчанням, а <Tdxfont CLASS="text">TeKCT</FONT></TD> відобразить текст заданим стилем.
Запис шаблону CSS_. Угрупування і спадкоємство
Будь-яке правило таблиці стилів CSS складається з селектора і визначення шаблону.
Селектор виступає в ролі покажчика стильового правила для певного HTML-элемента або внутрішнього класу (ідентифікатора). Визначення шаблону -- це опис стильових правил для позначених елементів HTML. Правила чергуються через крапку з комою і полягають у фігурні дужки.
НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }
У даному прикладі селектором є елемент заголовка нз, для шаблону якого слідує таке визначення: колір -- синій, шрифт -- Tahoma, або Verdana, або Arial.
Як видно з прикладу, для одного селектора приведений опис, що містить два правила, -- за кольором заголовка і найменуванню гарнітури. Це говорить про те, що CSS дозволяє групувати декілька стильових правил для одного селектора в рамках єдиного опису шаблону.
Порівнявши запис вигляду:
НЗ { color: blue; }
НЗ { font-family: Tahoma, Verdana, Arial; }
І
НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }
можна зробити вивід про те, що угрупування правив по селектору дозволяє, по-перше, економити розмір CSS-файла, по-друге -- систематизувати структуру опису шаблону.
Іншою особливістю таблиць стилів CSS є властивість спадкоємства стильових правил для декількох селекторів одночасно, наприклад:
TD, ТН, Р, DIV { text-align: justify; color: gray: font-size: Юрх; }
Такий запис призначає єдиний стиль відображення текстової інформації для елементів елементу таблиці (<то>, <тн>), а також параграфів (<р>) і блоків (<div>), а саме: тивыравнивания -- по ширині, колір -- сірий, розмір шрифту -- 10 пікселів.
Селектори
Як селектор CSS можуть виступати:
Об елементи HTML. Перевизначення стилю для конкретного елементу сторінки:
BODY { color: orange; }
В цьому випадку весь текст в межах розділу body буде оранжевим. При додаванні, наприклад, таблиці призначення стильового шаблону пропаде для тексту усередині осередків; класи.
Використання класів дозволяє перевизначати стиль як для конкретного елементу, так і для будь-якого елементу, якому привласнений даний клас. Найменування класу починається з крапки і зазвичай пишеться рядковими буквами (допускається використання латинських букв і цифр, але наявність спеціальних символів, нижніх підкреслень і інших нестандартних елементів не рекомендується).
.red { color: red; }
В цьому випадку будь-який елемент HTML, що дозволяє міняти колір, відображатиметься червоним, якщо йому привласнити клас . red:
<FONT CLASS="red">TeKCT червоним цветом</ГОЫТ>
АБО <HR CLASS="red">
Якщо ми доповнимо селектор класу найменуванням конкретного HTML-элемента, то дія стильового правила розповсюджуватиметься тільки на даний елемент:
HR.red { color: red; }
При вказівці класів стильового шаблону слід уважно стежити за тим, чи підтримує HTML-элемент присваемый типереопределения стилю. Наприклад, запис вигляду:
HR { text-align: justify; }
буде безглуздою, оскільки горизонтальний роздільник відноситься до області структурного форматування і не може містити текст, який, згідно стильовому правилу, слід розтягнути по ширині;
ідентифікатори. Запис ідентифікатора починається з символу # (дієз) і закінчується найменуванням:
fblack { background-color: black; }
Наприклад, привласнивши даний ідентифікатор тегу те, ми отримаємо елемент таблиці, залитий чорним кольором:
<TD 1П="Ыас1<">Ячейка чорного цвета</ТО>
Порівнявши функції селектора класу і ідентифікатора, можна задатися цілком закономірним питанням -- чим же відрізняються ці селекторы? Дійсно, формат визначення селектора обох типів аналогічний по структурі і привласненню HTML-элементам. Проте селектор ідентифікатора часто застосовується для завдання унікального імені елементу, який задіяний в програмному сценарії (скрипті). На відміну від нього, селектор класу обмежується, в основному, застосуванням в стильових шаблонах.
На закінчення необхідного звернути особливу увагу на неможливість поєднання селекторів різних типів. Не можна одночасно перевизначити стиль для стандартного елементу HTML і для нього ж, але по конкретному класу/ідентифікатору.
Псевдокласи
Псевдокласами називають певні умови форматування HTML-элемента, відповідно до яких браузер підставляє необхідні стильові правила відображення даних. При цьому в початковій структурі електронного документа такі класи не присутні, вони створюються в процесі інтерпретації HTML-кода браузером.
В основному, псевдокласи призначені для завдання різних типів форматування по декількох різновидах елементів. Розглянемо функціональність псевдокласів на прикладі гіперпосилань.
Згідно специфікації HTML і стандарту CSS, гіперпосилання може приймати чотири стани: невідвідане посилання (link), відвідане посилання (visited), активне посилання (active) і посилання при наведенні курсора миші (hover). Перші три СТАНИ (link, visited, active) звичайні прописуються в тезі <body> HTML-документа (рівень CSS 1). Четвертий стан (hover) відноситься до рівня CSS 2 і має на увазі зміну кольору посилання при наведенні на неї курсора миші користувача (подія працює в браузерах Internet Explorer 4 і вище, Opera 5 і вище, Netscape 6 і вище, Mozilla 1.0; браузеры раніших версій, а також деякі не особливо поширені браузеры не підтримують стан hover).
Ці стани і будуть псевдокласами при записі правил відображення гіперпосилань в стильовому шаблоні:
A:link { color: blue; }
A:active { text-decoration: underline; }
A:visited { color: gray; }
A:hover { color: orange; }
В даному випадку всі присутні в електронному документі гіперпосилання відображатимуться відповідно до заданого стильового правила. Проте часто виникає необхідність візуально виділити одні посилання щодо інших. Для цього разом з псевдокласами використовуються звичайні селекторы класів:
A:active.red { color: red; } A:hover.red { color: blue; } A:active.white {
color: white; } A:hover.white { color: black; }
Застосування таблиць стилів CSS
Перш за все слід зазначити, що при визначенні стильових таблиць далеко не завжди властивості стандартного HTML-элемента відповідають опису шаблону стилю. Наприклад, в HTML для жирного зображення використовується тег-контейнер <в> (<strong>), а в CSS -- конструкція font-weight: bold; (для елементу або селектора). Для виділення тексту підкресленням в HTML передбачений тег <и>, а в CSS використовується запис вигляду
text-decoration: underline; І Т. Д.
В рамках даної книги, присвяченої застосуванню мови розмітки HTML, складно розповісти про всі властивості перевизначення стилю за допомогою CSS. Тому ми зупинимося лише на деяких аспектах використання каскадних таблиць стилів, а саме: на форматуванні тексту, структурному форматуванні і організації призначених для користувача форм.
CSS у форматуванні тексту
CSS надає розробникові електронних документів набагато ширший набір можливостей роботи з текстовою інформацією, ніж стандартний HTML. Крім способів виділення тексту (підкреслення, курсив, жирне зображення, вибір гарнітури і розмір шрифту), за допомогою засобів CSS можливо змінювати такі параметри, як міжбуквенний і міжрядковий інтервал, тирегістру (рядкові і прописні букви) і багато що інше.
Одиниці вимірювання в таблицях стилів
Всі одиниці вимірювання властивостей елементів в CSS можна розділити на абсолютних і відносних (табл. 9.1).
Абсолютні одиниці вимірювання використовуються у разі, коли відомі характеристики того пристрою, який відображає інформацію.
Відносні одиниці вимірювання визначають масштаб елементу, що форматується, щодо інших елементів, що дозволяє зберегти перво-зданность документа при виводі на передавальний пристрій, характеристики якого заздалегідь не відомі.
Одиниці вимірювання CSS
Абсолютні
Відносні
in (дюйм ~ 2,5 см)
mm (міліметр)
cm (сантиметр)
pt (пункт ~ 1/7 дюйма)
рс (спис =12 пунктів)
em (висота шрифту елементу)
ех (висота букви х)
рх (піксел)
% (процентне співвідношення)
Властивості форматування тексту в CSS
Властивість
font-family
font-size
font-style
font-weight
font-variant
text-decoration text-align text-transform letter-spacing
line-height Color Background-color
Формат запису
font-family: Tahoma, Arial;
font-size: llpx; font-style: italic; font-weight: bold;
font-variant: small-caps;
text-decoration: underline;
text-align: right;
text-transform: uppercase;
letter-spacing: lem;
line-height: 5mm; color: tFFFFFF;
background-color: white;
Функція
Вибір гарнітури для відображення (допускається перерахування декількох назв через кому)
Розмір шрифту
Вибір нахилу тексту (курсив)
Наявність/відсутність жирного зображення
Перетворення рядкових букв в прописних із зміною пропорцій
Підкреслення тексту
Визначення типу вирівнювання тексту
Вибір регістра букв Міжбуквенний інтервал
Міжрядковий інтервал Колір тексту Колір фону тексту
<FONT CLASS="text">
CSS надає розробникові електронних документів набагато ширший набір можливостей роботи з текстовою інформацією, ніж стандартний HTML. Крім способів виділення тексту
<FONT STYLE="text-decoration: underline;">
подчеркивание</ГОМТ>,
<FONT ID="kursiv">
KypCMB</FONT>
<FONT STYLE="font-weight: bold;">
жирное начертание </ГОЫТ>,
<FONT STYLE= "font-family: Times New Roman;">
выбор гарнитуры </ГОЫТ> і <SPAN CLASS="font">
paзмep шрифта</ЗРШ>),
За допомогою засобів CSS можливо
<FONT С1азз="со1ог">
змінювати такі параметри
</ГОЫТ>, як <FONT STYLE= "letter-spacing: Зрх;">
Міжбуквенний </РОМТ>
і міжрядковий інтервал, <FONT STYLE="text-transform: uppercase;">
тирегистра</ЕОМТ> (рядкові і прописні букви) і багато що інше.
</FONT> </BODY> </HTML>
Структурне форматування
Також каскадні таблиці стилів CSS привнесли багато нового і помітно розширили функціональність форматування структурних елементів електронного документа: р, div і ін.
У табл. 9.3 приведені найбільш поширені властивості структурного форматування в CSS.
Властивості структурного форматування в CSS
Властивість
border-width border-style border-color list-style-type
Формат запису
list-style-image
list-style-image:
url(«bullet.gif");
border-width: 20px;
border-style: solid;
border-color: gray; margin
list-style-type: square;
margin: Ipx 2px 3px 4px;
Функція
Ширина межі структурного елементу
Ті декоративного відображення межі елементу
Колір межі структурного елементу
Нумерованного або маркірованого списку
Вказівка шляху до графічного маркера
Визначення розміру поля щодо верхнього, правого, нижнього
JavaScript
JavaScript - мова підготовки сценаріїв, що дозволяє зробити Web-сторінокы більш інтерактивними і функціональними. Після його вивчення ви зможете займатися розробкою Web-приложений на якісно новому рівні. Для написання сценаріїв JavaScript обов'язково потрібне знання мови HTML. У цьому розділі ви отримаєте перше уявлення про JavaScript ще до того, як почнете створювати свій перший сценарій.
Тут приводиться наступна інформація:
Q важливість вивчення JavaScript; а історія JavaScript;
а деякі відмінності між мовами підготовки сценаріїв і мовами програмування; а інструменти, необхідні для написання сценаріїв JavaScript.
Використання JavaScript
Придивитеся до сайтів, які ви відвідуєте. На кожній сторінці міститься текст і деяка кількість картинок. Мабуть, є годинник, що показує час, або текст, що біжить, в рядку стану браузера. Можливо, на сайті є форма, яку потрібно заповнити. Якщо пропустити яку-небудь графу анкети, то з'явиться повідомлення про помилку. На деяких сторінках зустрічаються рухомі по екрану зображення або текст, що змінюється при клацанні миші.
Таким чином, ви можете спостерігати JavaScript у дії, а створити подібні ефекти може будь-яка людина, що знає цю мову. Причому без особливих зусиль.
Рекомендація Слід постежити за тим, що створюють за допомогою JavaScript інші розробники. Це відмінний спосіб знайти свіже рішення.
Прочитавши цю книгу, ви не тільки освоїте JavaScript (замість того, щоб просто копіювати і вставляти в Web-сторіноку готові сценарії), але і дізнаєтеся безліч цікавих ідей, реалізувати які ви зможете самі - за допомогою JavaScript.
Важливість вивчення JavaScript
Корисно вивчити JavaScript хоч би із-за його широкого розповсюдження в мережі. Величезна кількість Web-сторінок зроблена з використанням сценаріїв (по самих різних причинах), і сайти без них здаються бляклими і нудними. Яким би интересным не був зміст сайту, деякі відвідувачі відразу захочуть піти. Звичайно, немає сенсу оспорювати важливість текстового змісту для будь-якої Web-сторінокы, проте використання JavaScript не тільки поліпшить подачу матеріалу, але і зробить вашу сторінку тієї, що більш запам'ятовується.
Рекомендація Запам'ятаєте: єдине, що відрізняє сайти, що користуються успіхом, від невдалих, - їх зовнішній вигляд. Чим цікавіше оформлений сайт, тим він популярнее.
Попередження Остерігайтеся використання знайдених в мережі сценаріїв, призначених для копіювання і вставки. Як правило, вони не відрізняються хорошою якістю і, що найгірше, дублюються на тисячах сайтів. Вивчення JavaScript позбавить вас від такої практики і дозволить створювати оригінальні Web-сторінок, що запам'ятовуються.
Можна знайти ще безліч причин для вивчення і використання JavaScript. Сценарій всього в декілька рядків допомагає відвідувачам сайту відшукати сторінку, відповідну їх браузеру і установкам, або автоматично підрахувати суму колонок у формі замовлення. Подібні «дрібниці» не розраховані на зовнішній ефект, але вони свідчать про високий рівень професіоналізму розробника і знання ним етики ділових відносин.
JavaScript у дії
Ознайомившись з цим розділом, ви зможете нарешті створити свій перший сценарій. Ви почнете освоювати ази JavaScript на конкретних прикладах. На ваш розгляд пропонується наступне:
а основні поняття JavaScript, такі як синтаксис, розмітка, коментарі і др.; а деякі терміни мови JavaScript і причини, по яких він відноситься
до об'єктно-орієнтованих мов програмування; Q створення і читання сценарію JavaScript; а використання JavaScript для виводу і введення інформації.
Введення/вивід інформації за допомогою JavaScript
У цьому розділі приводяться зразки сценаріїв JavaScript. Ретельно пропрацюйте кожен з них, вводячи код з клавіатури. Слід потренуватися на елементарних прикладах, перш ніж переходити до складнішим.
Дослідження можливостей введення і виведення інформації - це не тільки чудовий привід навчитися створювати сценарії JavaScript, що забезпечують двосторонній зв'язок з користувачем, але і прекрасний початок вашого професійного шляху.
У обчислювальній техніці все засновано на введенні і виведенні даних. Без цього нічого не відбувається. Текстовий процесор не виконує ніяких дій, поки користувач не введе яку-небудь інформацію (символи, що набирають на клавіатурі), і лише потім ця інформація відображається на екрані, роздруковується або зберігається на жорсткому диску.
Тепер ви навчитеся як вводити інформацію за допомогою JavaScript, так і виводити її у вигляді різноманітних вікон повідомлень. (Якщо вам доводилося блукати по мережі довше за декілька хвилин, то вам вони вже зустрічалися.)
На мал. 3.1, 3.3 і 3.5 показані вікна повідомлень трьох типів в браузере Internet Explorer, а на мал. 3.2, 3.4 і 3.6 - в браузере Netscape Navigator.
Всі ці вікна створені на мові JavaScript:
а Alert (Попередження) - служить для виведення інформації;
а Confirm (Підтвердження) - призначено для виведення інформації і дозволяє користувачеві зробити вибір у формі відповіді Да/нет на питання;
а Prompt (Запит) - служить для виведення інформації і дозволяє користувачеві ввести відповідь з клавіатури.
Об'єкти, методи і властивості
Ви, ймовірно, чули про те, що JavaScript - об'єктно-орієнтована мова. Але що це означає? Щоб це зрозуміти, вам слід ознайомитися з трьома термінами:
Q об'єкти;
а методи;
а властивості.
Спочатку розглянемо їх у загальних рисах. Чим далі ви просунетеся у вивченні JavaScript, тим частіше вам доведеться ними користуватися, так що ближче знайомство залишимо на майбутнє.
Об'єкти
Кажучи звичною мовою, об'єкт (object) - це який-небудь предмет. Подібно до того, як на реальному світі всі одушевлені і неживі предмети є об'єктами (машини, собаки і ін.), об'єктами вважаються і складові комп'ютерного миру.
Що стосується JavaScript, його об'єкти знаходяться усередині браузера. Це, зокрема, вікно браузера, форми і їх частини, наприклад кнопки і текстові вікна. У JavaScript також є власна група вбудованих об'єктів, до яких відносяться масиви, дані і так далі Зараз вам не обов'язково фіксувати на цьому увагу, оскільки всі ці об'єкти будуть розглянуті пізніше. Поки ви повинні засвоїти лише необхідні визначення.
Саме завдяки наявності об'єктів мова JavaScript вважається об'єктно-орієнтованою. Мова організована навколо об'єктів, а не дій, або, інакше кажучи, орієнтований на дані, а не на логіку. При об'єктно-орієнтованому програмуванні першочергова увага приділяється об'єктам, з якими проводяться деякі маніпуляції, а не логічним правилам, необхідним для таких маніпуляцій. Перевагою такого підходу є не тільки полегшення програмування (або написання сценарію), але і в те, що кожну дію можна виконати різними способами.
Методи
Метод (method) - це дії, які може виконувати об'єкт. На реальному світі у об'єктів теж є які-небудь методи. Машини їздять, собаки гавкають, долар купується і так далі У нашому випадку alert () є методом об'єкту Window, тобто об'єкт Window може видавати користувачеві яке-небудь попередження у вікні повідомлень. Прикладами інших методів є відкриття і закриття вікон, натиснення кнопок. Тут мова йде про трьох методах: open (), close () і click (). Звернете увагу на круглі дужки. Вони означають, що методи, на відміну від властивостей, використовуються.
Властивості
У всіх об'єктів є властивості (properties). Якщо ви і далі слідуватимете аналогії з об'єктами реального миру, то виявите, що всі предмети володіють якимись властивостями: у машин є колеса, а у собаки - шерсть. Що стосується JavaScript, то у такого об'єкту, як браузер, є назва і номер версії.
Управління даними за допомогою змінних
У попередньому розділі ви навчилися використовувати JavaScript для відображення на екрані вікон повідомлень трьох типів, службовців для введення-виводу інформації. Проте приклади сценаріїв, які ви бачили, не відрізнялися гнучкістю. Ви всього лише доповнювали сценарій повідомленнями, які хотіли вивести на екран. Будь-який текст, поміщений у вікні запитів, зникав після клацання по кнопці вибору. У даному розділі ви дізнаєтеся, як змінити цю ситуацію. Тут розглянуто використання значень і змінних в JavaScript.
Значення в мові JavaScript
Найцінніше на нашому світі -- це інформація. Кожен фрагмент інформації в JavaScript розглядається як значення (value). Оскільки інформація може бути дуже різноманітною, є різні категорії значень. Прості типи даних в JavaScript прийнято називати основними типами (primitive types).
Три основні типи даних:
а рядок (string); а число (number); а булевий вираз (boolean).
Рядки
Можливо, найпоширенішим типом даних є рядок. Рядок -связанный набір символів, що включає букви, розділовий і цифровий знаки. У JavaScript рядка найчастіше є яким-небудь текстом:
Здрастуйте і ласкаво просимо!
Хто ви?
Моє зростання - шість футів.
Рядки, що вставляються в сценарій JavaScript, полягають в подвійні або одинарні лапки, наприклад:
"Здрастуйте і ласкаво просимо!"
Причина використання двох типів лапок полягає в тому, що подвійні лапки (") можуть міститися усередині рядка, увязненої в одинарні лапки ('), і навпаки. Наприклад:
"J'm 6 feet tall"
'"Хто ви?" - запитав він.'
Рядок може і зовсім не містити символів. В цьому випадку вона називається порожнім рядком і позначається порожніми лапками:
Числа
JavaScript сприймає два типи чисел. Це цілі числа (integer) і числа з плаваючою крапкою (floating-point number).
Цілі числа
Включають позитивні цілі числа, наприклад 1,2,3, негативні цілі числа, наприклад -1, -2, -3 і нуль - 0.
Хоча більшість чисел, використовуваних в JavaScript, записуються в десятеричной системі числення, можуть застосовуватися також вісімкова і шестнадца-теричная системи.
Примітка В книзі використовується тільки десятеричная система числення.
Числа з плаваючою крапкою
Числа з плаваючою крапкою є числами з дробовою десятковою частиною:
3.1415926535897932384626433832795
Або це числа, виражені в експоненціальному вигляді:
3.76е2
Примітка При експоненціальному записі числа символ <se» у верхньому або нижньому регістрі означає «10 в степени»-.
Число, що починається з нуля і містить десяткову крапку, вважається числом з плаваючою крапкою.
Попередження Число, що починається з декількох нулів і містить десяткову крапку (наприклад, 005.5) сприймається як помилка.
У табл. 4.1 наводяться приклади чисел, що використовуються в JavaScript, щоб вам простіше було освоїтися з ними.
Великі і маленькі числа
Таблиця 4.1
Приклади чисел, що використовуються в JavaScript
|
Число |
Опис |
Десятковий еквівалент |
|
|
91 |
Ціле число |
91 |
|
|
4.56е2 |
Число з плаваючою крапкою |
456 |
|
|
0.001 |
Число з плаваючою крапкою |
0.001 |
|
|
00.001 |
Помилка |
||
|
0.001 |
Чотири рівні числа |
0.001 |
|
|
.001 |
з плаваючою крапкою |
||
|
1е-3 |
|||
|
1.0е-3 |
Числа, використовувані в JavaScript, можуть бути як дуже великими, так і дуже маленькими. Під дуже великими маються на увазі величини до 10308 (одиниця з трьомастами вісьма нулями), а під дуже маленькими - Ю~308 (нуль цілих з трьомастами сім'ю нулями і одиницею після коми).
Булеві вирази
Булеві вирази відрізняються від рядків і чисел тим, що можуть приймати лише два значення: true (істина) і false (брехня).
Булевими ці вирази названі на честь англійського математика Джорджа Буля (1815-1864).
Нижче поміщені приклади булевих виразів:
Собака гавкає = true
У собаки п'ять ніг = false
До булевих виразів повернемося в розділі 6, де розглядатимуться вирази і умови. Поки вам потрібно просто знати, що такий тип даних існує і може використовуватися в JavaScript.
Особливі типи даних: числа, невизначені і невизначувані вирази
Крім розглянутих типів даних, зустрічаються ще декілька основних, менш очевидних типів. Далі приводяться чотири числові значення:
а позитивна нескінченність;
Про негативна нескінченність;
а позитивний і негативний нуль;
а неіснуюче число (not а number - NAN) .
Є ще два спеціальні типи даних:
а невизначений (null);
а невизначуваний (undefined).
Що стосується перших чотирьох типів, то вам не доведеться працювати з ними (не будете ж ви вводити в програму нескінченне число). Під неіснуючим числом розуміється результат безглуздої математичної операції (наприклад, ділення на нуль). Нескінченністю вважається значення, що перевищує 10308 (наприклад, результат зведення 10300 в квадрат), і воно також не має для вас особливого значення (якщо тільки не свідчить про помилку).
Невизначений тип може мати тільки одне значення - null. В даному випадку це свідчить про повну відсутність корисної інформації або яких-небудь даних.
Зрозуміти, що таке невизначуваний тип даних, дещо складніше. Тут теж можливе тільки одне значення (undefined), що є найчастіше тим же, що і null. У найбільш екстремальних випадках undefined стає поганою ознакою (особливо якщо видається у вигляді результату відвідувачеві сторінки) і свідчить про недоліки вашого сценарію.
Змінні в мові JavaScript
Подобные документы
Основи Web-програмування. Використання мови HTML. Базові елементи HTML. Форматування тексту. Вирівнювання тексту та горизонтальна лінія. Значення RGB- коду. Таблиці та списки, посилання та робота з ними. Створення посилань на документи і файли.
курсовая работа [40,9 K], добавлен 12.02.2009Javascript як мова програмування, заснована на об'єктах: і мовні засоби, і можливості середовища представляються об'єктами. Структура програм на мові Javascript. Декларація змінних та сфер їх впливу. Типи даних та їх використання. Пріоритети операцій.
курсовая работа [51,4 K], добавлен 12.12.2010Дослідження та аналіз об’єкту програмування. Основні архітектурні риси JavaScript. Переваги CSS розмітки. Структура HTML-документа. Вимоги до апаратного та програмного забезпечення. Опис програми та її алгоритмів. Оцінка вартості програмного продукту.
дипломная работа [1,0 M], добавлен 01.09.2016Історія розвитку та теорія Web-дизайну. Ефективність програмно-апаратних засобів. Створення Web-сторінки за допомогою мови HTML. Розробка концептуальної моделі підручника. Структура HTML документу, його інформаційних потоків. Форматування тексту, фрейми.
курсовая работа [1,3 M], добавлен 29.05.2012История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Назначение и применение JavaScript, общие сведения. Понятие объектной модели применительно к JavaScript. Размещение кода на HTML-странице. URL-схема. Вставка (контейнер SCRIPT, принудительный вызов интерпретатора). Программирование свойств окна браузера.
лекция [517,1 K], добавлен 09.03.2009Особливості експлуатації протоколу HTML (гіпертексту). Засоби обміну інформацією у ньому і підготовка даних у форматі HTML з використанням розширених засобів форматування даних. Основи використання таблиць каскадних стилів і активних елементів JavaScript.
реферат [32,4 K], добавлен 26.04.2011Опис мови програмування PHP. Стратегія Open Source. Мова розмітки гіпертекстових документів HTML. Бази даних MySQL. Обґрунтування потреби віддаленого доступу до БД. Веб-сервер Apache. Реалізація системи. Інструкція користувача і введення в експлуатацію.
курсовая работа [42,9 K], добавлен 21.12.2012Примеры динамического построения html-страницы при помощи JavaScript. Использование цикла For, когда заранее известно, сколько раз должны повториться циклические действия. Выполнение циклических операторов входа и выхода, прерывание текущей итерации.
лабораторная работа [52,4 K], добавлен 19.09.2019Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.
курсовая работа [26,9 K], добавлен 05.07.2009
