Нижегородский файловый портал
RSS - каналы
Главное меню
Категории каталога
Мои статьи [5]
Школа покера [5]
Софт [40]
Радиолюбителям и электрикам [8]
Интернет [167]
Система [89]
Комплектующие ПК [47]
Безопасность [56]
Программирование [18]
Веб-дизайнеру [5]
Игры [6]
Полезные советы [24]
Кулинария [1]
Телефония [10]
Мобильник [17]
Планшеты [14]
Медицина [5]
Работа [4]
Домашнему мастеру [0]
Строительство и ремонт [19]
Для сада и огорода [2]
Юмор и приколы [12]
Интересное [114]
Пластики [3]
Разное [238]
Мини-чат
Правила мини-чата



Мини-чат в окне
Погода в Нижнем
Яндекс.Погода
Главная » Статьи » Веб-дизайнеру

Уроки JavaScript (Урок 2 - Введение в типы данных)
  • типы данных number и string;
  • методы документа write() и writeln();
  • склеивание строк и переменных

Числа и строки

Давайте немножко изменим предыдущий скрипт:

<html>
<head>
    <title>Пример 2</title>
</head>
<body>
<script type="text/javascript">
<!--
    var х = "5";
    var y = х + "3";
    alert(y);
// -->
</script>
</body>
</html>

Нашли различие?

А теперь посмотрим результат

Почему это произошло? Потому что сложились не числа, а строки.

Для того, чтобы компьютер правильно интерпретировал наши данные, они подразделяются на типы.

Во всех языках программирования существуют различные типы данных. В JavaScript таких типов 6, и их классификация заметно отличается от той, что распространена в большинстве языков. Сейчас нам важны два из них: number (число) и string (строка). Number всегда обозначается просто числом. А string — любым выражением, заключённым в кавычки. Всё, что заключено в кавычки, читается как набор символов: букв, цифр или других каких значков. При сложении строк к одному набору приклеивается другой. Так, к нашей пятёрке приклеилась тройка.

Кавычки можно использовать как двойные, так и одиночные. Бывает, что одни кавычки надо вложить в другие, как в моём примере со ссылкой из прошлого урока. Напомню:

<a href="javascript: alert('Страница в разработке');">Пункт меню</a>

Здесь в двойные кавычки заключено значение атрибута href тэга <a>, а строка для вложенного в него метода alert() заключена в одиночные кавычки.

А кстати, как Вы думаете, что выскочит, если последнюю строку скрипта записать как alert("y")?

А что делать, если мы хотим отобразить кавычки в сообщении? Например: Страница "Новости" ещё не готова. Для этого перед каждой отображаемой кавычкой нужно поставить обратный слэш — «\».

<script type="text/javascript">
<!--

alert
("Страница \"Новости\" ещё не готова");
// -->


</script>

НО:

Если мы запихнём это в ссылку,

<a href="javascript: alert('Страница \"Новости\" ещё не готова');">Новости</a>

то нам выдадут ошибку, потому что HTML этих обозначений не понимает.

А можно ли что-нибудь сделать?  Можно. Обмануть HTML.  Как?

Нужно просто изменить стиль кавычек: внешние сделать одиночными, а внутренние — двойными:

<a href='javascript: alert("Страница \"Новости\" ещё не готова");'>Новости</a>

Правда, редактор HomeSite выдаст алогичную подсветку кода (как у меня в примере), но браузер всё поймёт правильно.

Но я больше люблю для таких дел использовать родные российские (хотя вообще-то «французские») кавычки («»). На клавиатуре они набираются ALT+0171 и ALT+0187. Их можно внедрить тремя способами:

  1. Просто набрать с помощью ALT:

    <a href="javascript: alert('Страница «Новости» ещё не готова');">Новости</a>

  2. Указать их как символы Unicode:

    <a href="javascript: alert('Страница &#171;Новости&#187; ещё не готова');">Новости</a>

  3. Воспользоваться спецсимволами HTML:

    <a href="javascript: alert('Страница &laquo;Новости&raquo; ещё не готова');">Новости</a>

Примечание: последний способ отображает тот стиль кавычек, который используется в национальных настройках Windows. Так что те, у кого Window английские, увидят другие кавычки.

Пишем прямо в документ

А теперь ещё изменим скрипт, а заодно познакомимся с новым(и) методом(/ами).

<script type="text/javascript">
<!--

    var х = 5;
    var y = х + 3;
    document.writeln("<h2 align='center'>" + y + "</h2>");
// -->

</script>

или

<script type="text/javascript">
<!--

    var х = "авто";
    var y = х + "ручка";
    document.write("<h2 align='center'>" + y + "</h2>");
// -->

</script>

Для наглядности использования этих методов я включил туда и тэг HTML (кстати, вот опять необходимость двух уровней разных кавычек). Да, таким образом можно загнать в скрипт целую web-страницу (только нельзя разбивать строку, то есть весь код HTML, загнанный в метод, должен быть написан одной длинной строкой). Правда, для удобства можно многократно использовать этот метод:

<script type="text/javascript">
<!--

document.writeln("[первый кусок кода HTML]")
document.writeln("[второй кусок кода HTML]")
document.writeln("[третий кусок кода HTML]")
document.writeln("[и т.д.]")
// -->

</script>

В первом и последнем случаях я использовал метод документа writeln(), а во втором — также метод документа, но write().

В чём разница?

Почти ни в чём. Долгое время я не мог понять разницы не находил ответов в руководствах (так и не нашёл). Но методом случайного тыка выяснил, что если написать:

<script type="text/javascript">
<!--

document.write("слово")
document.write("слово")
document.write("слово")
document.write("слово")
// -->

</script>

браузер выдаст:

словословословослово

А если написать:

<script type="text/javascript">
<!--

document.writeln("слово")
document.writeln("слово")
document.writeln("слово")
document.writeln("слово")
// -->

</script>

то выйдет:

слово слово слово слово

Кроме того, если первый из этих скриптов заключить в тэг <pre></pre>, то ничего не произойдёт. А со вторым сработает:

слово
слово
слово
слово

То есть получается, что метод write() просто выводит данные, содержащиеся в нём, а метод writeln() (как я понимаю, это означает «write line» — «писать строку») представляет их как строку кода HTML, что реально отражается в браузере как текст с последующим пробелом. Таким образом, в моём примере с кусками кода целесообразнее использовать writeln(): на странице это в большинстве случаев никак не отразится, но именно с такой разбивкой мы вводим HTML-код руками.

И ещё немного о сложении строк

Метод document.write() может содержать как и непосредственно строки (взятые в кавычки), так и имена переменных, содержащих строки (имена переменных вводятся в метод без кавычек). Можно комбинировать и то, и другое.

Например:

<html>
<head>
    <title>
Пример 3</title>
<script type="text/javascript">

var
a = " понедельник", b = "о вторник", c = " среду", d = " четверг", e = " пятницу", f = " субботу", g = " воскресенье", h = " узнаете свежие новости.", i = " увидите новые поступления.";
</script>

</head>
<body>

<script type="text/javascript">

<!--

document.write("Заходите к нам в" + a + ", и Вы" + h + "<br>")
document.write("Заходите к нам в" + b + ", и Вы" + i + "<br>")
document.write("Заходите к нам в" + d + ", и Вы" + h + "<br>")
document.write("Заходите к нам в" + f + ", и Вы" + i)
// -->

</script>

</body>
</html>

Обратите внимание на «химию» при написании «во вторник», которая позволяет внедрить изменённый вариант предлога, не нарушая общего алгоритма (например, если бы повторяющийся текст нам захотелось загнать в переменные).

(Все перечисленные в объявлении переменные нужно писать в одну длинную строку. Если в document.write() не ввести тэг <br>, то весь отображаемый текст будет в одну строку.)

С помощью JavaScript можно также сделать, чтобы нужные значения автоматически вставлялись и изменялись в зависимости от текущей даты или от страницы, на которой этот текст находится. Когда мы дойдём до изучения этих возможностей, то ещё вернёмся к этой болванке.

Итак, мы узнали:
что такое числовой и строковый типы данных, как использовать методы document.write() и document.writeln(), как складывать строки с переменными.

А также: как обмануть HTML, используя в тэге спецсимволы языка JavaScript.
К следующему уроку >>

Добавил: Scaner | Просмотров: 2312 | Рейтинг: 5.0/4


Обратите Ваше внимание на другие статьи:

Уважаемые пользователи, пожалуйста, оставляйте комментарии! Нам очень важно Ваше мнение!
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.

    
Меню пользователя
Аватар гостя

Приветствуем Вас, Гость

Логин:
Пароль:
Поиск по сайту
Поиск по названию
Поиск по тегам
Горячие темы форума
Зарабатываем деньги
Детская игра Подарки...
Тест скорости подклю...
кое что о Windows
Кто ты, человек?
Новая валюта портала
Все о сексе
"Что мешает нам...
Культура
Афоризмы
Лучшие 13 анекдотов ...
как защитить свой ко...
поговорим о софте
восстановление данны...
Я ненавижу Дом-2
Волга-Телеком
Кулинария "Кокт...
Стол заказов
Жалобы
С Днем Победы!!!
Прикольные картинки
С праздником Пасхи !...
Статистика
Новых за месяц: 142
Новых за неделю: 44
Новых вчера: 7
Новых сегодня: 4
Всего: 5354
Из них:
Администраторов: 3
$$$-Модераторов: 1
Модераторов: 3
Прокураторов: 3
-----------------
далее:
Проверенных: 247
Пользователей: 2884
Новичков: 1920
Заблокированных: 100
-----------------
Из всех пользователей:
Мужчин и парней: 4189
Женщин и девушек: 1164
Именинники
Поздравляем с Днем рожденья:

шурка(29), svdn(28), robert(31), LUCIFERnn(30), aktrisa(22), Xpomov(33), subota(25), nekto777(27), АРМСПОРТ(49), Shegurova0(50), basar(53), NeoLife001(39), MAXON_BY(28), STRANNIK(27), Земфира(29)
Режим ON-LINE
Онлайн всего: 4
Гостей: 4
Пользователей: 0

Сейчас на портале:
Наша кнопочка
Нижегородский файловый портал

HTML-код кнопки:
Реклама
Размещение рекламы

Яндекс.Метрика
Регистрация сайта в каталогах, раскрутка и оптимизация сайта, контекстная реклама Ремонт холодильников в Нижнем Новгороде

Copyright © BankRemStroy © 2009-2017