Posted:
Янв 8, 2023
Comments:
0 Comments

Использование языка сценариев javascript при создании web сайта: Основы JavaScript — Изучение веб-разработки

Язык JavaScript | Примеры Web-сценариев

Язык Javascript — язык web-программирования, необходимый для создания поведения web-страниц.

Поведение — правила, определяющие, реагирование web-страниц на работу пользователя. Его можна создать при помощи web-сценария — программы, записанной непосредственно в html-код страниц или, что еще лучше, в выделенный файл. Вот как раз эти программы и пишутся на языке JavaScript. Web-браузер, соответственно, выполняет прописанные в Script-коде выражения, проделывая действия над web-страницей.


Примеры Web-сценариев

 

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

Пропишем в нашем html-коде, внутри тега <BODY>, такой скрипт (это и есть web-сценарий):

Проверим результат нашей работы в браузере. На странице увидим абзац, с датой, написанной в «международном» формате.

Немного подправим наш script-код, для вывода даты в привычном нам формате <число>. <месяц>.<год>. Скрипт примет такой вид:

Теперь мы видим дату в понятном нам формате.


Более сложный Web-сценарий

 

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

Вначале внесем исправления в нашей таблице стилей как показано ниже:

— Для пунктов полосы навигации мы прописали изменение курсора, при наведении, на вид «указательного пальца», что подсказывает о реакции элемента на клик.

— Сделали для пунктов вложенного списка сплошную рамку цвета фона страницы (невидимая для пользователя).

Впишем в таблицу стилей такой стиль:

.hovered { border-color: #3B4043 !important }

При добавлении стилевого класса, задающего цвет рамки, сделаем атрибут стиля, задающий цвет рамки, важным. ( Важные атрибуты — глава 7.)

При привязывании этого стиля к пунктам любых списков, формирующих полосы навигации, он указывает новый цвет рамки. Рамка пункта «внешнего» списка становится темнее, а рамка пункта списка вложенного, которая была невидима, становится видимой.

Далее по этому адресу http://www.extjs.com/products/ core/download.php?dl=extcore31 скачаем библиотеку Ext Core, облегчающую работу со сложными сценариями. Из распакованного архива в корневую папку нашего сайта скинем файл ext-core.js. Там же должны находиться файлы index.htm и main.css. Библиотека готова к применению.

Откроем наш файл index.htm и впишем в тег <head> следующий тег:

<SCRIPT SRC=»ext-core.js»></SCRIPT>

А перед закрывающим тегом </BODY> пропишем этот тег:

<SCRIPT SRC=»main. js»></SCRIPT>

В завершение в корневой папке создадим файл main.js и пропишем в нем следующее:

Это наш новый web-сценарий, но размещенный в отдельном файле main.js. Осталось протестировать результат нашей работы в браузере.


Как Web-сценарии помещаются в Web-страницу

Как мы только что убедились, Web-сценарии, формирующие поведение Web-страницы, можно поместить как в саму Web-страницу, так и в отдельный файл. Рассмотрим подробнее, как это делается.

Для вставки Web-сценария в HTML-код в любом случае применяется парный тег <SCRIPT>. Встретив его, Web-обозреватель поймет, что здесь присутствует Web-сценарий, который следует выполнить, а не выводить на экран.

Мы можем поместить код Web-сценария прямо в тег <SCRIPT>, создав внутренний Web-сценарий (листинг 14.5). Собственно, мы уже сделали это, когда создавали наш первый Web-сценарий.

Внутренние Web-сценарии имеют одно неоспоримое преимущество. Поскольку они записаны прямо в коде Web-страницы, то являются ее неотъемлемой частью, и их невозможно «потерять». Однако внутренние Web-сценарии не соответствуют концепции Web 2.0, требующей, чтобы содержимое, представление и поведение Web-страницы были разделены. Поэтому сейчас их применяют довольно редко, практически только при экспериментах (как и внутренние таблицы стилей; подробнее — в главе 7).

Мы можем поместить Web-сценарий и в отдельный файл — файл Web-сценария, — создав внешний Web-сценарий. (Наш второй Web-сценарий именно таков.) Файлы Web-сценария представляют собой обычные текстовые файлы, содержат только код Web-сценария без всяких тегов HTML и имеют расширение js.

Для вставки в Web-страницу Web-сценария, хранящегося в отдельном файле, применяется тег <SCRIPT> такого вида:

<SCRIPT SRC=»<интернет-адрес файла Web-сценария>»></SCRIPT>

Тег <SCRIPT> оставляют пустым, и в него помещают обязательный в данном случае атрибут SRC, в качестве значения которого указывают интернет-адрес нужного файла Web-сценария:

<SCRIPT SRC=»main. js»></SCRIPT>

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

В нашем втором Web-сценарии мы использовали библиотеку Ext Core, значительно облегчающую труд Web-программиста. Во всех языках программирования библиотекой называется набор готовых языковых конструкций (функций и объектов, о которых речь пойдет потом), написанных сторонними программистами, чтобы облегчить труд их коллег. Так вот, все библиотеки для языка JavaScript, в том числе и Ext Core, реализованы в виде внешних Web-сценариев.

И еще. Web-сценарий всегда выполняется в том месте HTML-кода Web-страницы, где присутствует. При этом не имеет значения, помещен он прямо в HTML-код или находится в отдельном файле.

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

 


 

Язык программирования JavaScript


Давайте рассмотрим пример еще одного Web-сценария, совсем небольшого:

x = 4;
y = 5;
z = x * y;

Больше похоже на набор каких-то формул. Но это не формулы, а выражения языка JavaScript; каждое выражение представляет собой описание одного законченного действия, выполняемого Web-сценарием.

Разберем приведенный Web-сценарий по выражениям. Вот первое из них:

x = 4;

Здесь мы видим число 4. В языке JavaScript такие числа, а также строки и прочие величины, значения которых никогда не изменяются, называются константами. В самом деле, значение числа 4 всегда равно четырем!

Еще мы видим здесь латинскую букву x. А она что означает?

О, это весьма примечательная вещь! Это переменная, которую можно описать как участок памяти компьютера, имеющий уникальное имя и предназначенный для хранения какой-либо величины — константы или результата вычисления. Наша переменная имеет имя x.

Осталось выяснить, что делает символ равенства (=), поставленный между переменной и константой. А он здесь стоит не просто так! (Вообще, в коде любой программы, в том числе и Web-сценария, каждый символ что-то да значит.) Это оператор — команда, выполняющая определенные действия над данными Web-сценария. А если точнее, то символом = обозначается оператор присваивания. Он помещает значение, расположенное справа (операнд), в переменную, расположенную слева, в нашем случае — значение 4 в переменную x. Если же такой переменной еще нет, она будет создана.

Каждое выражение языка JavaScript должно оканчиваться символом точки с запятой (;), обозначающим конец выражения; его отсутствие вызывает ошибку обработки Web-сценария.

Рассмотрим следующее выражение:

y = 5;

Оно аналогично первому и присваивает переменной y константу 5. Подобные выражения часто называют математическими.

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

z = x * y;

Здесь мы видим все тот же оператор присваивания, присваивающий что-то переменной z. Но что? Результат вычисления произведения значений, хранящихся в переменных x и y. Вычисление произведения выполняет оператор умножения, который в языке JavaScript (и во многих других языках программирования) обозначается символом звездочки (*). Это арифметический оператор.

В результате выполнения приведенного ранее Web-сценария в переменной z окажется произведение значений 4 и 5 — 20.

Вот еще один пример математического выражения, на этот раз более сложного:

y = y1 * y2 + x1 * x2;

Оно вычисляется в следующем порядке:

1. Значение переменной y1 умножается на значение переменной y2.

2. Перемножаются значения переменных x1 и x2.

3. Полученные на шагах 1 и 2 произведения складываются (оператор сложения обозначается привычным нам знаком +).

4. Полученная сумма присваивается переменной y.

Но почему на шаге 2 выполняется умножение x1 на x2, а не сложение произведения y1 и y2 с x1. Дело в том, что каждый оператор имеет приоритет — своего рода номер в очереди их выполнения. Так вот, оператор умножения имеет более высокий приоритет, чем оператор сложения, поэтому умножение всегда выполняется перед сложением.

А вот еще одно выражение:

x = x + 3;

Оно абсолютно правильно с точки зрения языка JavaScript, хоть и выглядит нелепым. В нем сначала выполняется сложение значения переменной x и числа 3, после чего результат сложения снова присваивается переменной x. Такие выражения встречаются в Web-сценариях довольно часто.


Введение в JavaScript

Давайте посмотрим, что такого особенного в JavaScript, чего можно достичь с его помощью и какие другие технологии хорошо с ним работают.

Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».

Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.

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

Это отличает JavaScript от другого языка – Java.

Когда JavaScript создавался, у него было другое имя – «LiveScript». Однако, язык Java был очень популярен в то время, и было решено, что позиционирование JavaScript как «младшего брата» Java будет полезно.

Со временем JavaScript стал полностью независимым языком со своей собственной спецификацией, называющейся ECMAScript, и сейчас не имеет никакого отношения к Java.

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

У браузера есть собственный движок, который иногда называют «виртуальная машина JavaScript».

Разные движки имеют разные «кодовые имена». Например:

  • V8 – в Chrome, Opera и Edge.
  • SpiderMonkey – в Firefox.
  • …Ещё есть «Chakra» для IE, «JavaScriptCore», «Nitro» и «SquirrelFish» для Safari и т.д.

Эти названия полезно знать, так как они часто используются в статьях для разработчиков. Мы тоже будем их использовать. Например, если «функциональность X поддерживается V8», тогда «Х», скорее всего, работает в Chrome, Opera и Edge.

Движки сложны. Но основы понять легко.

  1. Движок (встроенный, если это браузер) читает («парсит») текст скрипта.
  2. Затем он преобразует («компилирует») скрипт в машинный язык.
  3. После этого машинный код запускается и работает достаточно быстро.

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

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

Возможности JavaScript сильно зависят от окружения, в котором он работает. Например, Node.JS поддерживает функции чтения/записи произвольных файлов, выполнения сетевых запросов и т.д.

В браузере для JavaScript доступно всё, что связано с манипулированием веб-страницами, взаимодействием с пользователем и веб-сервером.

Например, в браузере JavaScript может:

  • Добавлять новый HTML-код на страницу, изменять существующее содержимое, модифицировать стили.
  • Реагировать на действия пользователя, щелчки мыши, перемещения указателя, нажатия клавиш.
  • Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы (технологии AJAX и COMET).
  • Получать и устанавливать куки, задавать вопросы посетителю, показывать сообщения.
  • Запоминать данные на стороне клиента («local storage»).

Возможности JavaScript в браузере ограничены ради безопасности пользователя. Цель заключается в предотвращении доступа недобросовестной веб-страницы к личной информации или нанесения ущерба данным пользователя.

Примеры таких ограничений включают в себя:

  • JavaScript на веб-странице не может читать/записывать произвольные файлы на жёстком диске, копировать их или запускать программы. Он не имеет прямого доступа к системным функциям ОС.

    Современные браузеры позволяют ему работать с файлами, но с ограниченным доступом, и предоставляют его, только если пользователь выполняет определённые действия, такие как «перетаскивание» файла в окно браузера или его выбор с помощью тега <input>.

    Существуют способы взаимодействия с камерой/микрофоном и другими устройствами, но они требуют явного разрешения пользователя. Таким образом, страница с поддержкой JavaScript не может незаметно включить веб-камеру, наблюдать за происходящим и отправлять информацию в ФСБ.

  • Различные окна/вкладки не знают друг о друге. Иногда одно окно, используя JavaScript, открывает другое окно. Но даже в этом случае JavaScript с одной страницы не имеет доступа к другой, если они пришли с разных сайтов (с другого домена, протокола или порта).

    Это называется «Политика одинакового источника» (Same Origin Policy). Чтобы обойти это ограничение, обе страницы должны согласиться с этим и содержать JavaScript-код, который специальным образом обменивается данными.

    Это ограничение необходимо, опять же, для безопасности пользователя. Страница https://anysite.com, которую открыл пользователь, не должна иметь доступ к другой вкладке браузера с URL https://gmail.com и воровать информацию оттуда.

  • JavaScript может легко взаимодействовать с сервером, с которого пришла текущая страница. Но его способность получать данные с других сайтов/доменов ограничена. Хотя это возможно в принципе, для чего требуется явное согласие (выраженное в заголовках HTTP) с удалённой стороной. Опять же, это ограничение безопасности.

Подобные ограничения не действуют, если JavaScript используется вне браузера, например — на сервере. Современные браузеры предоставляют плагины/расширения, с помощью которых можно запрашивать дополнительные разрешения.

Как минимум, три сильные стороны JavaScript:

JavaScript – это единственная браузерная технология, сочетающая в себе все эти три вещи.

Вот что делает JavaScript особенным. Вот почему это самый распространённый инструмент для создания интерфейсов в браузере.

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

Синтаксис JavaScript подходит не под все нужды. Разные люди хотят иметь разные возможности.

Это естественно, потому что проекты разные и требования к ним тоже разные.

Так, в последнее время появилось много новых языков, которые транспилируются (конвертируются) в JavaScript, прежде чем запустятся в браузере.

Современные инструменты делают транспиляцию очень быстрой и прозрачной, фактически позволяя разработчикам писать код на другом языке, автоматически преобразуя его в JavaScript «под капотом».

Примеры таких языков:

  • CoffeeScript добавляет «синтаксический сахар» для JavaScript. Он вводит более короткий синтаксис, который позволяет писать чистый и лаконичный код. Обычно такое нравится Ruby-программистам.
  • TypeScript концентрируется на добавлении «строгой типизации» для упрощения разработки и поддержки больших и сложных систем. Разработан Microsoft.
  • Flow тоже добавляет типизацию, но иначе. Разработан Facebook.
  • Dart стоит особняком, потому что имеет собственный движок, работающий вне браузера (например, в мобильных приложениях). Первоначально был предложен Google, как замена JavaScript, но на данный момент необходима его транспиляция для запуска так же, как для вышеперечисленных языков.
  • Brython транспилирует Python в JavaScript, что позволяет писать приложения на чистом Python без JavaScript.

Есть и другие. Но даже если мы используем один из этих языков, мы должны знать JavaScript, чтобы действительно понимать, что мы делаем.

  • JavaScript изначально создавался только для браузера, но сейчас используется на многих других платформах.
  • Сегодня JavaScript занимает уникальную позицию в качестве самого распространённого языка для браузера, обладающего полной интеграцией с HTML/CSS.
  • Многие языки могут быть «транспилированы» в JavaScript для предоставления дополнительных функций. Рекомендуется хотя бы кратко рассмотреть их после освоения JavaScript.

Какой язык программирования в основном используется в Интернете? | Малый бизнес

Джон Митчелл

Наиболее распространенные языки программирования в Интернете включают язык гипертекстовой разметки, JavaScript, каскадные таблицы стилей и PHP: препроцессор гипертекста. Некоторые из них используются в сочетании друг с другом, а некоторые могут использоваться почти полностью отдельно от других языков для создания интерактивного или статического веб-сайта. Хотя вы можете найти и другие языки, это основные языки, используемые для доставки содержимого через веб-браузер.

HTML

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

    , с которого начинается новый абзац.

CSS

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

JavaScript

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

PHP

  1. PHP — препроцессорный гипертекстовый серверный язык. Серверный язык означает, что вся обработка выполняется на сервере, а не внутри браузера. Сервер обрабатывает веб-страницу перед ее отображением пользователю. PHP-код можно встроить в обычный HTML-документ или использовать как отдельный файл. Оба экземпляра требуют, чтобы на сервере была установлена ​​одна из последних платформ PHP.

Ссылки

  • W3Schools. com: Учебник HTML
  • W3Schools.com: Учебник CSS
  • W3Schools.com: Учебник JavaScript
  • PHP: Что такое PHP?

Писатель Биография

Джон Митчелл — эксперт во всех областях технологий, включая социальные сети и смартфоны. Он новостной ниндзя Qwiki, сообщающий последние новости интерактивной платформы. Митчелл окончил Университет Седоны со степенью магистра психологии пастырского консультирования и написал книгу «Больше никаких налогов».

Для чего используется JavaScript?

Задумывались ли вы когда-нибудь, для чего используется JavaScript? Вы не одиноки. Hack Reactor рассказывает, что такое JavaScript, для чего используется JavaScript и почему мы используем JavaScript в качестве языка программирования.

 

Что такое JavaScript?

JavaScript — это текстовый язык программирования, используемый как на стороне клиента, так и на стороне сервера, который позволяет делать веб-страницы интерактивными. В то время как HTML и CSS — это языки, которые определяют структуру и стиль веб-страниц, JavaScript предоставляет веб-страницам интерактивные элементы, привлекающие пользователя. Типичные примеры JavaScript, которые вы можете использовать каждый день, включают окно поиска на Amazon, видео с обзором новостей, встроенное в The New York Times, или обновление вашей ленты в Twitter.

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

 

Для чего используется JavaScript?

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

 

1.     Добавление интерактивного поведения к веб-страницам

JavaScript позволяет пользователям взаимодействовать с веб-страницами. Практически нет ограничений на то, что вы можете делать с помощью JavaScript на веб-странице — вот лишь несколько примеров:

  • Показать или скрыть дополнительную информацию одним нажатием кнопки

  • Изменить цвет кнопки при наведении на него курсора мыши

  • Пролистывание карусели изображений на главной странице

  • Увеличение или увеличение масштабирования на изображении

  • с отображением таймера или отсчета на веб-сайте

  • Играть в аудио и видео на веб-странице

  • Дисбровая анимация

  • . -down гамбургер-меню

 

2.     Создание веб-приложений и мобильных приложений

Разработчики могут использовать различные среды JavaScript для разработки и создания веб-приложений и мобильных приложений. Фреймворки JavaScript — это наборы библиотек кода JavaScript, которые предоставляют разработчикам предварительно написанный код для использования в рутинных функциях и задачах программирования — буквально каркас для создания веб-сайтов или веб-приложений.

Популярные интерфейсные платформы JavaScript включают React, React Native, Angular и Vue. Многие компании используют Node.js, среду выполнения JavaScript, построенную на движке Google Chrome JavaScript V8. Несколько известных примеров включают Paypal, LinkedIn, Netflix и Uber!

 

3.     Создание веб-серверов и разработка серверных приложений

Помимо веб-сайтов и приложений, разработчики также могут использовать JavaScript для создания простых веб-серверов и разработки внутренней инфраструктуры с помощью Node.

This entry was posted in Популярное