Блог счастливого веб-разработчика Голосов: 1 Адрес блога: http://ridler-fun.livejournal.com/ Добавлен: 2010-12-26 16:27:55

Использование переменных.(Оператор присваивания)

2010-12-26 19:07:36 (читать в оригинале)

 Когда переменная создана, мы можем хранить в ней данные любого типа по своему усмотрению. Для того чтобы это сделать, нужно использовать знак =. Например, чтобы сохранить значение 2 в переменной score, нужно напечатать такой код:

var score;
score = 0;

В первой строке кода мы создаем переменную, а во второй - сохраняем в ней значение 0. Знак равенства называется оператором присваивания, так как он используется, чтобы присвоить переменной какое-либо значение. Мы также можем создать переменную и сохранить в ней значение с помощью единственного утверждения JavaScript, например:

var score = 0;

Мы также можем сохранять в переменной строки и булевы значения:

var firstName = 'Tema';
var lastName = 'Ivanov';
var age = 22;
var isManyMaker = true;

Важно!____________________________________________________________________________________________________
Чтобы сэкономить время, лучше всего декларировать(присваивать) несколько переменных одним ключевым словом var, например так:

var x, y, z

Одним утверждением JavaScrip можно декларировать и сохранять значения в нескольких переменных:

var isManyMaker=true, isStudent=false;
___________________________________________________________________________________________________________

После того как мы сохранили в переменной значение, мы можем получить доступ к этому значению, просто используя имя переменной. Например, чтобы открыть диалоговое окно предупреждения и отобразить значение, сохраненное в переменной score, давайте напечатаем:

alert (score);

Также давайте обратим внимание, что в переменных не используются кавычки, даже в случае со строками, поэтому в коде alert ('score') будет отображаться слово score, а не значение, сохраненное в переменной score. Теперь можно понять, почему строки следует заключать в кавычки: интерпретатор JavaScript воспринимает слова без кавычек либо как специальные объекты (например, alert()), либо как имена переменных.

Кстати, ключевое слово var должно использоваться только один раз: когда мы создаем переменную. Далее мы можем присваивать ей новые значения, не используя var.

---

Использование маркированных списков.

2010-12-20 13:33:14 (читать в оригинале)

 По сути, панель навигации - не что иное, как набор ссылок, а точнее, она представляет собой список разделов сайта. Из этого следует что? правильно, из этого следует что мы всегда должны использовать теги в соответствии с их функциональным назначением, чтобы они соответствовали заключенному в них содержимому. Например, для списка элементов это должен быть тег <ul>, или тег неупорядоченного, маркированного списка. Не имеет значения, будет ли список вообще без маркеров или будет располагаться горизонтально вдоль верхнего края веб-страницы: всё форматирование тега <ul> обеспечено средствами языка CSS.





Применение HTML для создания панели навигации - это и есть использование языка разметки по самому её прямому назначению ;) В каждом элементе списка имеется по одной ссылке. Кроме того, нам всего лишь нуобходимо стилизовать этот маркированный список (не нужно, чтобы его пункты составляли панель навигации). Правильным подходом и методом будет применение стилевого класса или стиля с идентификатором (ID - стиля) к тегу <ul>:

<ul class="navigation">
       <li><a href="index.php">Главная</a></li>
       <li><a href="news.html">Новости</a></li>
       <li><a href="aboutme">О нас</a></li>
</ul>

Css код немного различается в зависимости от того, нужна нам горизонтальная панель навигации или же она будет виртикальной. В любом случае мы должны выполнить два шага.

1. Удалить маркеры. Чтобы панель навигации не была похожа на маркированный список, удаляем маркеры, установив для свойства list-style-type значение none: ul .navigation { list-style-type: none; }
2. Убрать отступы и поля. Так как браузеры сами делают отступы для элементов списка, то мы также избавляемся от них. Однако одни браузеры используют для этих целей свойство padding, а другие - margin, поэтому нам нужно установить для обоих свойств значение 0:

             ul .navigation
             {
                list-style-type: none;
                padding-left: 0;
                margin-left: 0;
             }

Эти два шага обеспечивают всем элементам списка простой вид, как у обычного блочного фрагмента текста - абзаца или заголовка (с одним исключением: браузер не добавляет полей между элементами списка). С этого момента мы можем начинать стилизацию.                    

---

Создание панелей навигации

2010-12-20 12:55:19 (читать в оригинале)

 Каждому сайту требуется хорошая управляющая панель с элементами навигации: во-первых она нужна для того, чтобы привести посетителей к нужной им информации, во-вторых, чтобы им понравилось управление сайтом и они возвращались на гео еще и еще. Содержимое большинства сайтов организованно в виде разделов. Например, каталог продукции, контакты, отзывы, о нас и т.д. Такая организация позволяет посетителям хорошо ориентироваться в содержимом сайта, и они точно будут знать, что и где они смогут найти. В большинстве случаев ссылки на основные разделы сайта можно найти на панели навигации. CSS облегчает создание красивых, функциональных и качественных панелей, эффектов ролловеров и т.д.

---

Ссылки. Использование изображений

2010-12-20 07:53:27 (читать в оригинале)

 Добавление для ссылок изображений - это легкий и эффективный способ улучшить внешний вид элементов навигации сайта. Существует много методик и вариантов дизайна, но при этом следует заметить, что ни в одном их хороших, грамотных методов не применяется HTML тег <img>. Вместо него используется свойство background-image, с помощью которого можно добавить красоты и привлекательности любой ссылке. Вот несколько правил, которые нужно учитывать при использовании изображений со ссылками:

• Не забывать про значение no-repeat. 
• Усправлять позиционированием с помощью свойства background-position. Чтобы точно разместить фоновое изображение, используем свойство background-position. Если необходимо позиционировать изображение по левому краю ссылки, и  при этом еще центрировать его вертикально на строке, то CSS код будет выглядеть так: background-position: left center.
• Добавлять отступы с помощью свойства padding. Не забываем добавлять отступы с помощью этого свойства с той стороны, где рисунок примыкает к тексту.
• Использовать псевдоклассы. Не забываем о псевдоклассах :hover и :visited. Они помогут создать для ссылок красивые динамические эффекты и обеспечат полезную обратную связь с посетителями сайта.

---

Зарезервированные слова.

2010-12-19 15:06:57 (читать в оригинале)

Некоторые слова, зарезервированные для использования в JavaScript и браузере. Избегайте их в качестве имен переменных.

Ключевые слова JavaScript	Слова, зарезервированные для использования в будущем	Слова, зарезервированные для браузера
break case catch continue default delete do else finally for function if in instanced new return switch this throw try typeof var void while with	abstract boolean byte char class conts debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile	alert blur closed document focus frames history innerHeight innerWidth length location navigator open outerHeight outerWidth parent screen screenX screenY statusbar window