В вашем веб-браузере включен JavaScript. Поздравления; вы на шаг ближе к увлекательному и полнофункциональному онлайн-опыту.
Вы используете Chrome, поэтому вам, вероятно, нужно сразу перейти к руководству по Chrome.
Помните, что JavaScript является настройкой "для каждого браузера"; если вы включили его в Chrome, вы также можете отключить его в Firefox на том же компьютере.
Многие веб-сайты используют Javascript как часть своей основной функциональности, и если вы просматриваете Интернет без включенного JavaScript, вы, вероятно, не будете пользоваться всеми функциями, которые обычно имели бы. Некоторые веб-сайты могут работать некорректно, другие могут не работать вообще.
Давайте рассмотрим основы того, что такое JavaScript и чем он может вам помочь.
JavaScript – это многоцелевой язык программирования. Есть много, много вещей, для которых он может быть использован. Вообще говоря, он используется, чтобы позволить разработчикам веб-сайтов создавать веб-страницы со встроенными интеллектуальными функциями. Вместо того, чтобы веб-страница была простой страницей без интерактивности, JavaScript может позволить веб-страницам адаптироваться к тому, что вы делаете на странице, загружать новую информацию, принимать решения и реагировать на события.
Например, JavaScript можно использовать для проверки формы подписки на список рассылки. Таким образом, когда вы пытаетесь отправить форму, код запускается и просматривает каждое поле в форме. Если код заметит, что вы что-то забыли ввести в одно из полей (например, ваш адрес электронной почты), он выведет предупреждение и не позволит вам отправить форму, пока она не будет заполнена. Как только это поле будет исправлено, форма будет разрешена для отправки.
JavaScript также можно использовать для динамического обновления части страницы без перезагрузки всей страницы. Так, например, когда вы используете Facebook и видите новое уведомление; вы можете знать, что для этого использовался JavaScript!
На самом деле для определения JavaScript на этой странице использовался JavaScript! Если JavaScript включен, он заменяет ответ «Нет» по умолчанию ответом «Да»! (так что, если JavaScript не включен, ответом по умолчанию остается «Нет»). Он также используется для обнаружения файлов cookie, определения версии Flash, определения версии Java и т. д.
Как и у большинства вещей, у JavaScript есть и обратная сторона. Растет число способов злонамеренного использования JavaScript. Атаки на основе JavaScript, такие как межсайтовый скриптинг и Click Jacking, основаны на JavaScript и могут поставить под угрозу вашу безопасность. Растет число людей, заботящихся о безопасности, которые не просто позволяют запускать JavaScript на каждой странице, которую они посещают, чтобы уменьшить вероятность этих атак. Существуют расширения браузера для Chrome и Firefox, которые могут отключать JavaScript по умолчанию, но позволяют легко включать его только для надежных веб-сайтов. Веб-пользователю, заботящемуся о безопасности, не мешало бы проверить эти расширения.
У нас есть ряд руководств, которые помогут вам включить JavaScript в веб-браузере.
После включения Javascript посетите домашнюю страницу, чтобы убедиться, что ваш веб-браузер обновлен, и получить полную информацию о возможностях вашего веб-браузера.
Если у вас есть еще вопросы о JavaScript и о том, что он может делать, воспользуйтесь контактной формой, и мы ответим на него и добавим ваш вопрос сюда.
Добро пожаловать на курс MDN по JavaScript для начинающих! В этой статье мы рассмотрим JavaScript с высокого уровня, отвечая на такие вопросы, как «Что это такое?» и "Что вы можете с этим сделать?", а также убедиться, что вы согласны с назначением JavaScript.
| Требования: | Базовая компьютерная грамотность, базовое понимание HTML и CSS. |
|---|
< th scope="row">Цель: | Познакомиться с тем, что такое JavaScript, что он может делать и как он вписывается в веб-сайт. |
Общее определение
JavaScript – это язык сценариев или программирования, который позволяет вам реализовывать сложные функции на веб-страницах. Каждый раз, когда веб-страница делает больше, чем просто сидит и отображает статическую информацию, которую вы можете посмотреть, – отображает своевременные обновления контента, интерактивные карты, анимированная 2D/3D-графика, прокручиваемые видео-музыкальные автоматы и т. д. — можете поспорить, что JavaScript, вероятно, задействован. Это третий слой слоеного пирога стандартных веб-технологий, два из которых (HTML и CSS) мы рассмотрели более подробно в других частях Области обучения.
— это язык разметки, который мы используем для структурирования и придания смысла нашему веб-контенту, например, определяя абзацы, заголовки и таблицы данных или встраивая изображения и видео на страницу. — это язык правил стиля, который мы используем для применения стилей к нашему HTML-контенту, например, для установки фоновых цветов и шрифтов, а также для размещения нашего контента в нескольких столбцах. — это язык сценариев, который позволяет вам создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и многое другое. (Хорошо, не все, но удивительно, чего можно добиться с помощью нескольких строк кода JavaScript.)
Эти три слоя хорошо накладываются друг на друга. В качестве примера возьмем простую текстовую метку. Мы можем разметить его с помощью HTML, чтобы придать ему структуру и назначение:
Затем мы можем добавить немного CSS, чтобы все выглядело красиво:
И, наконец, мы можем добавить JavaScript для реализации динамического поведения:
Попробуйте нажать на эту последнюю версию текстовой метки, чтобы увидеть, что произойдет (обратите внимание, что вы можете найти эту демонстрацию на GitHub — посмотрите исходный код или запустите ее вживую)!
JavaScript может гораздо больше — давайте рассмотрим, что подробнее.
Так что же он на самом деле может сделать?
Основной клиентский язык JavaScript состоит из некоторых общих функций программирования, которые позволяют вам делать такие вещи, как:
- Сохраняйте полезные значения внутри переменных. Например, в приведенном выше примере мы просим ввести новое имя, а затем сохранить это имя в переменной с именем name .
- Операции с фрагментами текста (известными в программировании как "строки"). В приведенном выше примере мы берем строку «Игрок 1:» и присоединяем ее к переменной имени, чтобы создать полную текстовую метку, например. «Игрок 1: Крис».
- Выполнение кода в ответ на определенные события, происходящие на веб-странице. Мы использовали событие щелчка в нашем примере выше, чтобы определить, когда нажата кнопка, а затем запустить код, который обновляет текстовую метку.
- И многое другое!
Однако еще более интересна функциональность, созданная на основе клиентского языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют дополнительные возможности для использования в коде JavaScript.
API – это готовые наборы строительных блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы сложно или невозможно реализовать. Они делают для программирования то же самое, что и готовые мебельные комплекты для домостроения — гораздо проще взять готовые панели и скрутить их вместе, чтобы сделать книжную полку, чем самому разрабатывать дизайн, идти и искать подберите древесину, обрежьте все панели до нужного размера и формы, найдите винты нужного размера и затем соедините их вместе, чтобы сделать книжную полку.
Обычно они делятся на две категории.
Браузерные API встроены в ваш веб-браузер и могут предоставлять данные из окружающей компьютерной среды или выполнять полезные сложные действия. Например:
- API DOM (Document Object Model) позволяет управлять HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к странице и т. д. Каждый раз, когда вы видите всплывающее окно на странице или отображается новый контент (как мы видели выше в нашей простой демонстрации), например, это DOM в действии.
- API геолокации извлекает географическую информацию. Именно так Google Карты могут определить ваше местоположение и нанести его на карту.
- API Canvas и WebGL позволяют создавать анимированную 2D- и 3D-графику. Люди делают удивительные вещи, используя эти веб-технологии — см. Chrome Experiments и webglsamples. такие как HTMLMediaElement и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, например воспроизводить аудио и видео прямо на веб-странице или захватывать видео с веб-камеры и отображать его на чужом компьютере (попробуйте нашу простую демонстрацию Snapshot, чтобы получить представление ).
Примечание. Многие из приведенных выше демонстраций не будут работать в старых браузерах. При экспериментировании рекомендуется использовать для запуска кода современный браузер, такой как Firefox, Chrome, Edge или Opera. более подробно о кросс-браузерном тестировании, когда вы приблизитесь к созданию производственного кода (т. е. реального кода, который будут использовать реальные клиенты).
Сторонние API по умолчанию не встроены в браузер, и вам, как правило, приходится брать их код и информацию из Интернета. Например:
- API Twitter позволяет вам делать такие вещи, как отображение ваших последних твитов на вашем веб-сайте.
- API Карт Google и API OpenStreetMap позволяют встраивать пользовательские карты на веб-сайт и выполнять другие подобные функции.
Примечание. Эти API являются расширенными, и мы не будем рассматривать ни один из них в этом модуле. Вы можете узнать больше об этом в нашем модуле клиентских веб-API.
Есть и многое другое! Однако пока не переусердствуйте. Вы не сможете создать следующий Facebook, Google Maps или Instagram после изучения JavaScript в течение 24 часов — сначала нужно изучить много основ. И именно поэтому вы здесь — давайте двигаться дальше!
Что делает JavaScript на вашей странице?
Здесь мы фактически начнем рассматривать некоторый код, и при этом исследуем, что на самом деле происходит, когда вы запускаете JavaScript на своей странице.
Давайте кратко повторим историю того, что происходит, когда вы загружаете веб-страницу в браузере (впервые об этом говорилось в нашей статье «Как работает CSS»). Когда вы загружаете веб-страницу в свой браузер, вы запускаете свой код (HTML, CSS и JavaScript) внутри среды выполнения (вкладка браузера). Это похоже на фабрику, которая получает сырье (код) и выпускает продукт (веб-страницу).
Очень часто JavaScript используется для динамического изменения HTML и CSS для обновления пользовательского интерфейса с помощью API объектной модели документа (как упоминалось выше). Обратите внимание, что код в ваших веб-документах обычно загружается и выполняется в том порядке, в котором он появляется на странице. Ошибки могут возникнуть, если JavaScript загружается и запускается до HTML и CSS, которые он предназначен для изменения. Вы узнаете, как обойти это позже в статье, в разделе Стратегии загрузки скриптов.
Безопасность браузера
Каждая вкладка браузера имеет свою отдельную корзину для запуска кода (в техническом плане эти области называются «средами выполнения») — это означает, что в большинстве случаев код на каждой вкладке запускается совершенно отдельно, а код в одной tab не может напрямую влиять на код другой вкладки или на другом веб-сайте. Это хорошая мера безопасности — если бы это было не так, пираты могли бы начать писать код для кражи информации с других веб-сайтов и других подобных вещей.
Примечание. Существуют способы безопасной отправки кода и данных между разными веб-сайтами/вкладками, но это расширенные методы, которые мы не будем рассматривать в этом курсе.
Порядок выполнения JavaScript
Когда браузер встречает блок JavaScript, он обычно запускает его по порядку, сверху вниз. Это означает, что вам нужно быть осторожным в том, в каком порядке вы размещаете элементы. Например, давайте вернемся к блоку JavaScript, который мы видели в нашем первом примере:
Здесь мы выбираем текстовый абзац (строка 1), а затем присоединяем к нему прослушиватель событий (строка 3), чтобы при нажатии на абзац запускался блок кода updateName() (строки 5–8). Блок кода updateName() (эти типы повторно используемых блоков кода называются «функциями») запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.
Если вы поменяете порядок первых двух строк кода, он больше не будет работать — вместо этого вы получите сообщение об ошибке в консоли разработчика браузера — TypeError: para is undefined . Это означает, что объект para еще не существует, поэтому мы не можем добавить к нему прослушиватель событий.
Примечание. Это очень распространенная ошибка — вам нужно убедиться, что объекты, на которые есть ссылки в вашем коде, существуют, прежде чем вы попытаетесь что-то с ними сделать.
Интерпретируемый и скомпилированный код
Возможно, вы слышали, что термины интерпретируются и компилируются в контексте программирования. В интерпретируемых языках код выполняется сверху вниз, и результат выполнения кода возвращается немедленно. Вам не нужно преобразовывать код в другую форму, прежде чем браузер запустит его. Код принимается в удобном для программиста текстовом виде и обрабатывается непосредственно из него.
С другой стороны, скомпилированные языки преобразуются (компилируются) в другую форму до того, как они будут запущены компьютером. Например, C/C++ компилируются в машинный код, который затем запускается компьютером. Программа выполняется из двоичного формата, который был сгенерирован из исходного кода исходной программы.
JavaScript – это облегченный интерпретируемый язык программирования. Веб-браузер получает код JavaScript в его исходной текстовой форме и запускает сценарий из него. С технической точки зрения, большинство современных интерпретаторов JavaScript фактически используют технику, называемую своевременной компиляцией, для повышения производительности; исходный код JavaScript компилируется в более быстрый двоичный формат во время использования скрипта, чтобы его можно было запустить как можно быстрее.Однако JavaScript по-прежнему считается интерпретируемым языком, поскольку компиляция выполняется во время выполнения, а не заранее.
У обоих типов языка есть преимущества, но мы не будем их сейчас обсуждать.
Код на стороне сервера и код на стороне клиента
Вы также можете слышать термины "код на стороне сервера" и "код на стороне клиента", особенно в контексте веб-разработки. Код на стороне клиента — это код, который запускается на компьютере пользователя — при просмотре веб-страницы код на стороне клиента загружается, затем запускается и отображается в браузере. В этом модуле мы явно говорим о клиентском JavaScript.
Динамический и статический код
Слово "динамический" используется для описания как клиентского JavaScript, так и серверного языка. Оно означает возможность обновлять отображение веб-страницы/приложения, чтобы отображать разные элементы в различных обстоятельствах, генерируя новый контент по мере необходимости. . Серверный код динамически генерирует новый контент на сервере, например. извлечение данных из базы данных, тогда как клиентский JavaScript динамически генерирует новый контент внутри браузера на клиенте, например. создание новой таблицы HTML, заполнение ее данными, запрошенными с сервера, а затем отображение таблицы на веб-странице, показанной пользователю. Значение немного отличается в двух контекстах, но связано, и оба подхода (на стороне сервера и на стороне клиента) обычно работают вместе.
Веб-страница без динамически обновляемого содержимого называется статической — на ней постоянно отображается одно и то же содержимое.
В этой книге обычно опускают теги , , и в примерах, чтобы они были краткими и не загромождались. Но я буду закрывать теги и заключать атрибуты в кавычки.
Я также обычно опускаю объявление doctype и charset. Это не следует воспринимать как поощрение к удалению их из HTML-документов. Браузеры часто делают нелепые вещи, когда вы их забываете. Следует учитывать, что метаданные типа документа и набора символов неявно присутствуют в примерах, даже если они фактически не показаны в тексте.
HTML и JavaScript
В контексте этой книги наиболее важным HTML-тегом является , даже если он ссылается на файл сценария и не содержит никакого кода. Если вы забудете об этом, остальная часть страницы будет интерпретирована как часть скрипта.
Вы можете загружать модули ES (см. главу 10) в браузере, присвоив тегу скрипта атрибут type="module". Такие модули могут зависеть от других модулей, используя относительные URL-адреса в качестве имен модулей в объявлениях импорта.
Некоторые атрибуты также могут содержать программу JavaScript. Показанный далее тег (который отображается как кнопка) имеет атрибут onclick. Значение атрибута будет выполняться при каждом нажатии кнопки.
Обратите внимание, что мне пришлось использовать одинарные кавычки для строки в атрибуте onclick, поскольку двойные кавычки уже используются для цитирования всего атрибута. Я мог бы также использовать " .
В песочнице
Запуск программ, загруженных из Интернета, потенциально опасен. Вы мало что знаете о людях, стоящих за большинством сайтов, которые вы посещаете, и они не обязательно имеют хорошие намерения. Запуск программ людьми, которые не желают добра, приводит к заражению вашего компьютера вирусами, краже ваших данных и взлому ваших учетных записей.
Тем не менее привлекательность Интернета заключается в том, что вы можете просматривать его, не обязательно доверяя всем страницам, которые вы посещаете. Вот почему браузеры строго ограничивают возможности программы JavaScript: она не может просматривать файлы на вашем компьютере или изменять что-либо, не связанное с веб-страницей, в которую она встроена.
Изоляция среды программирования таким образом называется песочницей. Идея заключается в том, что программа безвредно играет в песочнице. Но вы должны представить этот особый вид песочницы как клетку из толстых стальных прутьев, чтобы программы, играющие в ней, не могли выбраться наружу.
Сложная часть изолированной программной среды заключается в том, чтобы дать программам достаточно места, чтобы они могли быть полезными, и в то же время ограничить их выполнение каких-либо опасных действий. Множество полезных функций, таких как связь с другими серверами или чтение содержимого буфера обмена для копирования и вставки, также можно использовать для решения проблемных задач, нарушающих конфиденциальность.
Время от времени кто-то придумывает новый способ обойти ограничения браузера и сделать что-то вредное, начиная от утечки незначительной личной информации и заканчивая захватом всей машины, на которой работает браузер. Разработчики браузера в ответ устраняют дыру, и все снова в порядке, пока следующая проблема не будет обнаружена и, надеюсь, доведена до сведения общественности, а не будет тайно использована каким-либо государственным учреждением или мафией.
Совместимость и войны браузеров
На ранних стадиях развития Интернета на рынке доминировал браузер под названием Mosaic. Через несколько лет баланс сместился в пользу Netscape, который, в свою очередь, был в значительной степени вытеснен Microsoft Internet Explorer.В любой момент, когда какой-то один браузер доминирует, производитель этого браузера будет чувствовать себя вправе в одностороннем порядке изобретать новые функции для Интернета. Поскольку большинство пользователей использовали самый популярный браузер, веб-сайты просто начали использовать эти функции, не говоря уже о других браузерах.
Это был темный век совместимости, который часто называли войнами браузеров. Веб-разработчики остались не с одной единой сетью, а с двумя или тремя несовместимыми платформами. Что еще хуже, все браузеры, использовавшиеся примерно в 2003 году, были полны ошибок, и, конечно же, ошибки были разными для каждого браузера. Жизнь была тяжелой для людей, пишущих веб-страницы.
Mozilla Firefox, некоммерческое ответвление Netscape, бросило вызов Internet Explorer в конце 2000-х годов. Поскольку в то время Microsoft не была особенно заинтересована в сохранении конкурентоспособности, Firefox отобрал у нее значительную долю рынка. Примерно в то же время Google представила свой браузер Chrome, а браузер Safari от Apple приобрел популярность, что привело к ситуации, когда было четыре основных игрока, а не один.
Новые игроки более серьезно относились к стандартам и лучшим инженерным практикам, что давало нам меньше несовместимости и меньше ошибок. Microsoft, увидев, что ее доля на рынке рушится, приняла этот подход в своем браузере Edge, который пришел на смену Internet Explorer. Если вы начинаете изучать веб-разработку сегодня, считайте, что вам повезло. Последние версии основных браузеров ведут себя одинаково и содержат относительно мало ошибок.
Многие веб-сайты в Интернете содержат JavaScript, язык программирования сценариев, который запускается в веб-браузере и обеспечивает функционирование определенных функций на веб-странице. Если в вашем браузере отключен JavaScript, содержание или функциональность веб-страницы могут быть ограничены или недоступны. В этой статье описываются шаги по включению JavaScript в веб-браузерах.
Дополнительная информация
Интернет-обозреватель
Чтобы разрешить всем веб-сайтам в зоне Интернета выполнять сценарии в Internet Explorer:
В меню веб-браузера нажмите "Инструменты" или значок "Инструменты" (в виде шестеренки) и выберите "Свойства обозревателя".
Когда откроется окно "Свойства обозревателя", выберите вкладку "Безопасность".
На вкладке "Безопасность" убедитесь, что выбрана зона Интернета, а затем нажмите кнопку "Пользовательский уровень".
В диалоговом окне «Параметры безопасности — Интернет-зона» нажмите «Включить активные сценарии» в разделе «Сценарии».
При появлении сообщения "Внимание!" открывается окно с вопросом: «Вы уверены, что хотите изменить настройки для этой зоны?» выберите Да.
Нажмите "ОК" в нижней части окна "Свойства обозревателя", чтобы закрыть диалоговое окно.
Нажмите кнопку "Обновить", чтобы обновить страницу и запустить сценарии.
Чтобы разрешить выполнение сценариев на определенном веб-сайте, оставив выполнение сценариев отключенным в зоне Интернета, добавьте этот веб-сайт в зону надежных узлов:
Когда откроется окно "Свойства обозревателя", выберите вкладку "Безопасность".
На вкладке "Безопасность" выберите зону "Надежные сайты" и нажмите кнопку "Сайты".
Для веб-сайтов, для которых вы хотите разрешить выполнение сценариев, введите адрес в текстовое поле Добавить этот веб-сайт в зону и нажмите Добавить. Примечание. Если адрес не начинается с «https:», вам может потребоваться снять флажок «Требовать проверку сервера (https:) для всех сайтов в этой зоне».
Нажмите «Закрыть», а затем нажмите «ОК» в нижней части окна «Свойства обозревателя», чтобы закрыть диалоговое окно.
Нажмите кнопку "Обновить", чтобы обновить страницу и запустить сценарии.
Google Chrome
Чтобы включить JavaScript в Google Chrome, прочтите и следуйте инструкциям в разделе Включите JavaScript в браузере, чтобы показывать рекламу на своем сайте.
Firefox корпорации Mozilla
Чтобы включить JavaScript в Firefox, прочтите и следуйте инструкциям в настройках JavaScript для интерактивных веб-страниц.
Читайте также:
