Лучший способ освоить программирование на JavaScript это начать программировать. Для этого вы можете использовать текстовый редактор, я буду работать в PHPStorm и весь код набирать в данной среде разработки.
Что бы вы мыслили не шаблонно и могли сами писать код, начнем обучение с самых низов, первые программы, которые рассмотрим, будут очень простые.
Откроем документ формата HTML5 , и перед закрывающим тегом head пропишем . Тем самым браузеру доем понять, что за данным тегом последует JavaScript .
Напишем программу, которая будет выводить сообщение на экран при помощи функции alert(‘уроки по javascript’);
alert (‘уроки по javascript’);
рис 1
Функция alert() – это команда, вызывающая окно оповещения и отображающее сообщение, находящееся в скобках. Пока не обращаем внимание на пунктуацию (скобки, кавычки, точки с запятой). Все постепенно мы с Вами это разберем, для какой цели они нужны.
Игра на JavaScript с нуля для начинающих. ОЧЕНЬ ПРОСТО!
Запускаем данную страничку в браузере, видим диалоговое окно с нашей надписью. Если окно не появилось, возможно, где то сделали опечатки или ошибку, перепроверьте весь код и повторно загрузите страницу.
Кликнем по кнопке ОК, что бы закрыть окно. Когда оно исчезнет, в браузере загрузится веб-страница.
Хотя это простая программа, она демонстрирует важную концепцию: браузер выполняет программу на JS одновременно с чтением кода. В этом примере функция alert() сработала до того, как браузер отобразил полностью страницу, поскольку код скрипта находится перед элементом body .
Подобная команда будет иметь значение, когда вы начинаете писать программы, манипулирующие HTML кодом веб-страницы.
Следующий вариант рассмотрим, как вывести напрямую сообщение на странице.
Обычно script прописывается внутри раздела заголовка, однако мы можем разместить программу в теле элемента body . Напишем какой ни будь текст, к примеру
Обучение JS
и разберем как вывести код при помощи JS.
Основы по обучению JS
Мир Ява скрипт устроен подобно нашему, в нем есть объекты, у объектов свои свойства, и есть методы, при помощи которых можем на них воздействовать. К примеру, у нас есть объект машин, у машины есть свойство скорость, и мы можем при помощи метода нажатия на педаль воздействовать на скорость машины.
В JS языке самый главный объект называется document в нем содержатся все объекты, элементы веб-страницы отображаемые на экране.
У этого объекта есть свои свойства и методы при помощи, которых мы можем воздействовать на данный объект. Первый метод который с вами разберем это метод Write . При помощи данного метода мы можем записывать на страницу новую веб-информацию.
Первая программа на JavaScript. Как выполняется код на JavaScript
document.write() – это команда JS, которая буквально отображает то, что вы помещаете между открывающей и закрывающей скобками. И тут вы должны усвоить, что символы помещаете между кавычками, интерпретатор JS будет выводить как обычный текст. Также при помощи данного метода document.write() мы можем отображать и HTML код.
До этого мы написали просто текст, заключим его в параграф и JS сделаем ссылкой. HTML код будет обработан, обновив страницу, увидим в ней изменения.
У Вас возможно появился вопрос, а как же тогда вывести текст если в нем используются вторые кавычки, ведь за кавычками интерпретатор текст не поймет и скрипт работать не будет. Тут есть несколько вариантов, мы можем указать в нутрии кавычки, кавычки двойные, или если нам нужно заменить двойные и вывести одинарные. Другой вариант, экранировать кавычки, то есть перед ними ставим флешь тем самым интерпретатору даем понять, что текст не закончен, а продолжается далее.
Этот сценарий показывает, как вы можете задействовать JS для добавления контента на веб-страницу.
Подключение JavaScript к HTML
Осваивайте профессию, начните зарабатывать, а платите через год!
Курсы Python Акция! Бесплатно!
Станьте хакером на Python за 3 дня
Веб-вёрстка. CSS, HTML и JavaScript
Курс Bootstrap 4
Станьте веб-разработчиком с нуля
В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент .
Первая программа
Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:
- поместить код непосредственно в атрибут события HTML-элемента;
- поместить код между открывающим и закрывающим тегами ;
- поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.
JavaScript в элементе script
Самый простой способ внедрения JavaScript в HTML-документ – использование тега . Теги часто помещают в элемент , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги используются как в элементе , так и в теле веб-страниц.
Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе .
Выполнить код » Скрыть результаты
Обратите внимание: мы указали атрибут language тега , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .
JavaScript в атрибутах событий HTML-элементов
Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.
В следующем примере функция JavaScript помещается в раздел HTML-документа. Вот пример HTML-элемента с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.
Выполнить код » Скрыть результаты
Внешний JavaScript
Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .
Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:
В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами и .
По аналогии с элементом атрибуту src элемента можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:
На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».
Чтобы подключить несколько скриптов, используйте несколько тегов:
Примечание: Элемент с атрибутом src не может содержать дополнительный JаvаSсriрt-код между тегами и , хотя внешний сценарий выполняется, встроенный код игнорируется.
Выполнить код » Скрыть результаты
Независимо от того, как JS-код включается в НТМL-документ, элементы интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента , затем браузер приступает ко второму элементу и т. д.
Внешние скрипты практичны, когда один и тот же код используется во многих разных веб-страницах. Браузер скачает js-файл один раз и в дальнейшем будет брать его из своего кеша, благодаря чему один и тот же скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. Кроме этого, благодаря внешним скриптам, упрощается сопровождение кода, поскольку вносить изменения или исправлять ошибки приходится только в одном месте.
Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов и .
Расположение тегов
Вы уже знаете, что браузер читает HTML-документ сверху вниз и, начинает отображать страницу, показывая часть документа до тега . Встретив тег , переключается в JavaScript-режим и выполняет сценарий. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.
Это наглядно демонстрирует следующий пример. Метод alert() выводит на экран модальное окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»:
Источник: www.wm-school.ru