6 янв. 2015 г.

Данные: практика


До этого мы вводили команды в консоль браузера. Теперь пришло время соединить JS и HTML. У нас должен быть файл test.html (в папке Javascript). Скопируйте его и вставьте рядом в этой же папке. Название новому файлу дайте 2x2button.html. Затем откройте файл в текстовом редакторе (правой кнопкой мыши - “Открыть с помощью...”), удалите содержимое и впишите следующий код:

<button onclick="alert( 2 + 2 );"> 2 + 2 = ? </button>
<!-- после клика по элементу выплывает сообщение -->

Пояснение к коду:

 <button> — это тег для создания кнопки;
</button> — закрывающий тег кнопки;
onclick="..." — выполняет кусочек программы, если на элемент кто-то кликнет. Текст, заключенный в  <!-- ... --> — это комментарий HTML-кода. Он игнорируются компьютером. Напомню, что программах JavaScript комментарии делают по-другому:  //...

После изменения файла сохраните его (Файл - “Сохранить”) и затем откройте в браузере (двойнок клик по файлу). В браузере должна отобразиться почти пустая страница с одной кнопкой. Клик по кнопке выводит предупредительное сообщение “4”.

Если не получилось, проверьте все шаги и добейтесь правильного результата.

В этом практическом задании мы учимся понимать где HTML, а где Javascript. Если написать только зеленый код, появится просто кнопка. На нее можно будет сколько угодно нажимать, но ничего не произойдет. Действие появится только если добавить кусочек программы (красный код), который выводит сообщение с вычислением 2 + 2.

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

Следующий урок >>

6 комментариев:

  1. Ответы
    1. а как сделать вторую кнопку,чтобы появился тоже ответ?
      у меня почему-то не получилось у второй кнопки ответ получить..

      Удалить
  2. Ну тут конечно понятно что программирование на JS неотрывно от HTML и если уж взялся на нем обучать то придется обучить и HTML коду. Почитаем дальше и посмотрим будет ли так.

    ОтветитьУдалить
  3. В программе Сублайм текст нельзя изменять языки программирования.

    ОтветитьУдалить
  4. Поясните правильней, как соединить языки в одной программе
    :.(.........

    ОтветитьУдалить
  5. Здорово, спасибо! Подскажите,а зачем после ввода команды на js еще записывать 2+2=? Спасибо!

    ОтветитьУдалить