-Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Все на карте

 -Поиск по дневнику

Поиск сообщений в Net-man

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.04.2010
Записей: 814
Комментариев: 5985
Написано: 11575


JavaScript: Урок 2 - Введение в типы данных

Суббота, 15 Января 2011 г. 19:25 + в цитатник
  • типы данных 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. Так что те, у кого винды английские, увидят другие кавычки.

     

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

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

    <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.

    http://dikarka.ru/javascript/02.shtml
    Рубрики:  Полезное
    Уроки Javascript
    Метки:  

    gsreda   обратиться по имени Суббота, 15 Января 2011 г. 19:30 (ссылка)

    Ответить С цитатой В цитатник
    осень_осень   обратиться по имени Приятного вечера, хорошего настроения) Суббота, 15 Января 2011 г. 20:40 (ссылка)
    Ответить С цитатой В цитатник
    BARGUZIN   обратиться по имени Воскресенье, 16 Января 2011 г. 10:05 (ссылка)
    анимационные картинки Спасибо, благодарю в гостевые и блоги
    Ответить С цитатой В цитатник
    Перейти к дневнику

    Воскресенье, 16 Января 2011 г. 10:16ссылка
    BARGUZIN, привет! Славного воскресенья!
    Комментировать К дневнику Страницы: [1] [Новые]
     

    Добавить комментарий:
    Текст комментария: смайлики

    Проверка орфографии: (найти ошибки)

    Прикрепить картинку:

     Переводить URL в ссылку
     Подписаться на комментарии
     Подписать картинку