• Новые сообщения · Участники · Правила форума · Поиск · RSS
    • Страница 1 из 1
    • 1
    Модератор форума: STALKER  
    Форум » О веб-дизайне » JavaScript » Hello World на JavaScript
    Hello World на JavaScript
    STALKERДата: Суббота, 17.12.2011, 20:08 | Сообщение # 1
    Генералиссимус
    Группа: Администраторы
    Сообщений: 139
    Статус: :-(
    Hello World на JavaScript


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

    В качестве вступления хочу сказать, что JavaScript - это язык сценариев со слабой типизацией, синтаксис которого унаследован от языка Java. Из этой фразы самое приятное для вас это то, что JavaScript со слабой типизацией. Это значит, что вам не нужно заботится об определении типов переменных и выделении памяти для них. За дополнительной порцией лирики идем в поисковик.

    Как разместить скрипт на странице?
    Способов разместить скрипт на сайте есть два, но я расскажу только про один — непосредственное размещение скрипта в HTML коде. Для этого вам нужен один HTML тег плюс сам скрипт. Выглядит это следующим образом:

    Code
    <script type="text/javascript">  
      // здесь ваш скрипт  
      </script>


    Что написать между тегами script?
    Естественно, для полного счастья нам еще не хватает самого скрипта.
    Но сначала маленькое отступление. Две косые черты (//) это специальный оператор JavaScript, который используется для комментирования кода, то есть все что стоит после этого оператора не обрабатывается как код. Это просто комментарий для человека, а не компьютера. Обратите внимание, что действие этого оператора распространяется до конца строки. Если вы хотите закомментировать часть строки или несколько строк используйте оператор /* здесь комментарий */ (примеры использования увидите ниже в статье). Комментарии это очень нужная штука, с помощью них вы сможете напомнить себе, что делает определенный кусок кода. Это очень полезно, особенно если вы давно не лазили в ваш скрипт и уже забыли как он функционирует, а если этот скрипт писали не вы, то это для вас в двойне хорошо. Вообще комментарии в коде это признак хорошего тона среди программистов. Только не нужно демонстрировать этот тон, описывая что делает каждая строка кода, комментариев должно быть в меру.

    Итак, теперь наверное приступим к Hello World. В этой статье я собираюсь рассказать о нескольких способах сделать это. Первый из них это использование метода document.write(). Что бы написать нашу любимую фразу на странице сайта, нам нужно просто поместить ее между скобок.

    Code
    <script type="text/javascript">  
      // Здороваемся с миром  
      document.write('Hello World!')  
      /* В дальнейшем  
      здесь будет какой-то более срьезный код */  
      </script>


    Вот и все. Обратите внимание на то, что строка Hello World находится в кавычках. Это очень важно. Все строки, то есть обычные слова, не переменные, не числа, не функции должны быть заключены в кавычки. Причем можно использовать как одинарные так и двойные кавычки.

    Второй вариант вывода нашего "девиза" - использование функции alert(). Принцип использования такой же как и в предыдущем варианте. Только результат отличается. В случае использования alert наша строка вылетит в окошке с кнопочкой "ок".

    Code
    <script type="text/javascript">  
      // Вторая попытка поздороваться  
      alert('Hello World!')  
      </script>


    Первое знакомство с переменными
    Прежде чем поговорить о третьем способе, хочу немного познакомить вас с переменными.

    Функция переменной - хранение присвоенной ей информации. В JavaScript даже ребенок справится с созданием и присваиванием значения переменной. Для этого достаточно выдумать для нее имя, которое может состоять из латинских букв, цифр и знаков "_", "$". Это имя не должно начинаться с цифры.

    Чтобы объявить переменную, нужно перед ее именем написать "var". Хоть это в принципе и не обязательно, но я советую все же делать это.

    Для присвоение значения переменной нужно использовать оператор "=".

    Все. Все что надо было узнать про переменные, вы теперь знаете. Попробуем теперь использовать полученные знания на практике, сохранив нашу фразу-лозунг в переменной:

    Code
    <script type="text/javascript">  
      var losung = 'Hello World!'; // Строка, которую напишет скрипт  
      alert(losung);  
      </script>


    Как видите, результат остался прежним. Обратите внимание, что имена переменных не заключаются в кавычки.

    Так же, наверное, вы уже успели заметить символ ";" в конце строки. Этот символ обозначает конец команды. В JavaScript этот символ не обязателен. Так как JavaScript считает каждую строку отдельной командой. Этот символ нужно обязательно использовать только в том случае, если вам нужно записать несколько команд в одну строку. Я его использую в каждой строке в основном чисто из эстетических соображений и плюс к этому поддерживаю привычку ставить ';' в других языках, где это необходимо (к примеру php).

    Ладно, не будем на долго отвлекаться от основной темы, а то статья выходит слишком длинной. Я вам обещал рассказать о третьем способе поздороваться с миром. Третий он потому, что самый важный. Первый рассмотренный в этой статье способ на практике имеет маленькое значение, так как его действие мало чем отличается от простого текста написанного в HTML. Второй уже лучше, но опять же, применяется крайне редко. А вот третий даст вам возможность динамически менять содержимое страницы.

    Пишем Hello World динамически

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

    У этой задачи есть несколько решений, но самый частоиспользуемый, это получение доступа к тегу по его id. Для этого нам нужен метод element.getElementById(), где element - ссылка на объект элемента в котором необходимо произвести поиск (если вы хотите искать по всей странице, то нужно использовать document в качестве элемента в котором искать). Примеры использования будут ниже.

    Второй метод, который нам понадобится это element.innerHTML(), где element - ссылка на объект элемента, содержимое которого, мы собираемся менять. Этот метод позволит нам поменять содержимое внутри тега.

    Так же хочу обратить ваше внимание, что имена в JavaScript чувствительны к регистру, потому если в названии метода, переменной, функции и т.д. есть большие буквы, а в вашем коде вы напишите этот метод с маленькой, то ваш код будет некорректно работать. innerHTML и innerhtml два разных имени.

    Итак, вот наш код:

    Code
    <div id="dynamic"></div>  
      А здесь, между прочим, другой текст или код!  
      <script type="text/javascript">  
      var d = document;  
      var div = d.getElementById('dynamic');  
      div.innerHTML = 'Hello World!';  
      </script>


    Как это работает?
    Первая строка в принципе не обязательна, она для нашего удобства. Я присвоил переменной d объект document. Теперь я могу писать вместо document просто букву d.

    В следующую переменную мы записываем объект-указатель на тег с id="dynamic". Опять же, я мог этого не делать, но так удобнее читать код.

    И наконец в третьей строке я поменял содержимое тега, изменив свойство innerHTML.

    В принципе, весь этот код можно записать в одну строку, без использования переменных:

    Code
    document.getElementById('dynamic').innerHTML = 'Hello World!';


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

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

    Авторские права принадлежат http://udf.su/ . При копировании ссылка на источник обязательна.


     
    Форум » О веб-дизайне » JavaScript » Hello World на JavaScript
    • Страница 1 из 1
    • 1
    Поиск: