Публикация вашего веб-сайта — Изучение веб-разработки

• Назад
• Обзор: Getting started with the web
• Далее

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

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

Получение хостинга и доменного имени

Чтобы иметь больший контроль над контентом и внешним видом веб-сайта, большинство людей предпочитают покупать веб-хостинг и доменное имя:

• Хостинг — арендованное файловое пространство на веб-сервере хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдаёт контент для веб-пользователей, которые запрашивают его.
• Доменное имя — уникальный адрес по которому люди могут найти ваш веб-сайт, например http://www.mozilla.org или http://www.bbc.co.uk. Вы можете арендовать доменное имя на столько лет, сколько захотите (минимум на 1 год) у регистратора доменов.

Множество профессиональных веб-сайтов располагается в Интернете именно таким образом.

Кроме того, вам потребуется File Transfer Protocol (FTP)-клиент (более подробно см. Сколько это стоит: программное обеспечение), чтобы передать файлы веб-сайта на сервер. Существует множество FTP-клиентов, но, как правило, вам нужно войти на веб-сервер, используя данные, предоставленные вашей хостинговой компанией (например: имя пользователя (логин), пароль, имя хоста). Затем FTP-клиент отобразит файлы на вашем компьютере в одной половине окна и файлы на хостинговом сервере в другой половине, так вы сможете перетаскивая копировать файлы с вашего компьютера на сервер и обратно.

Советы по поиску хостингов и доменов

• Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имён, просто поищите «веб-хостинг» и «доменные имена». Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его.
• Ваш домашний или рабочий Интернет-провайдер может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов — свяжитесь с ними и узнайте!
• Также есть несколько бесплатных сервисов, таких как Neocities, Blogspot, и WordPress. Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов — вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.
• Иногда компании предлагают одновременно и хостинг и домен.

Использование онлайн инструментов, таких как GitHub или Google App Engine

Некоторые сервисы позволяют вам опубликовать сайт:

• GitHub — это «социальная сеть программистов». С помощью неё можно загружать репозитории с вашими разработками для хранения в Git — систему контроля версий. По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому — участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная система контроля версий — большинство компаний сейчас использует её для работы. GitHub имеет очень полезную функцию GitHub pages, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете.
• Google App Engine — это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google — нужно ли вам создать многоуровневое веб-приложение с нуля или разместить статический веб-сайт. Смотрите как разместить ваш веб-сайт на Google App Engine чтобы узнать больше информации.

В отличие от других хостингов, эти услуги обычно бесплатны, но взамен вы получите ограниченный набор инструментов.

Использование облачных IDE, таких как CodePen

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

Попробуйте один из этих и посмотрите, какой из них вам больше нравится:

• JSFiddle
• Thimble
• JSBin
• CodePen

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

Основная настройка

1. Прежде всего, установите Git на ваш компьютер. Это основная версия системы управления версий, поддерживающая GitHub.
2. Далее, создайте аккаунт в GitHub. Это просто и легко.
3. После того как вы зарегистрировались, войдите в github.com используя ваш логин и пароль.
4. Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмите Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите New repository.

На этой странице, в поле Repository name, введите username.github.io, где username это ваше имя пользователя. Так, например, наш друг valerii15298 введёт valerii15298.github.io.

Нажмите Create repository и вы окажетесь на следующей странице:

Загрузка ваших файлов на GitHub

Здесь у нас будет использоваться командная строка чтобы отправить наш репозиторий на GitHub. Командная строка — это окно где вы вводите команды для быстрого выполнения таких вещей, как создание файла или запуск программы, без использования пользовательского интерфейса. Командная строка выглядит примерно так:

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

У всех операционных систем есть командная строка:

• Windows: Командная строка. Чтобы открыть её нажмите клавишу Windows, затем введите Командная строка в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
• OS X: Terminal можно найти в Приложения > Утилиты.
• Linux: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите Терминал в панели приложений или меню.

Сначала это может показаться немного страшным, но не волнуйтесь — вы скоро освоите основы. Вы говорите компьютеру сделать что-то в терминале, введя команду и нажав Enter.

1. Укажите в командной строке каталог test-site (или другое название каталога, содержащего ваш сайт). Для этого используйте команду cd (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием test-site на рабочем столе:

   cd Desktop/test-site
   

2. Когда командная строка указывает внутрь вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту git, чтобы он превратил каталог в репозиторий git:

   git init
   

3. Далее вернёмся к сайту GitHub. На текущей странице вас интересует раздел «…or push an existing repository from the command line». Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:

   git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
   

4. Далее введите следующие две команды, нажимая Enter после каждой. Это подготовит код к загрузке на GitHub, и укажет Git управлять этими файлами.

   git add --all
   git commit -m 'adding my files to my repository'
   

5. Наконец, загрузите код на GitHub — вернитесь на веб-страницу GitHub, на которой вы находились, и введите в терминал команду:

   git push -u origin master
   

6. Теперь, когда вы перейдёте по веб-адресу, созданному в GitHub, в новом окне браузера (username.github.io), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.

Примечание: Если вы застряли, GitHub Pages homepage будет очень полезна для вас.

Дальнейшее изучение GitHub

Если вы хотите сделать больше изменений на своём тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:

git add --all
git commit -m 'another commit'
git push

Вы можете заменить another commit более подходящим сообщением, описывающим какие изменения вы только что сделали.

Мы едва затронули Git. Чтобы узнать больше, начните с GitHub Help site.

К этому моменту, у вас должен быть собственный пример веб-сайта, доступный по уникальному веб-адресу. Отлично!

Дальнейшее чтение

• Что такое веб-сервер?
• Что такое доменные имена?
• Сколько стоит сделать что-то в Интернете?
• Развёртывание сайта: хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.
• Cheap or Free Static Website Hosting, статья написанная Скоттом Мюрреем содержит некоторые полезные идеи о доступных сервисах.

• Назад
• Обзор: Getting started with the web
• Далее

• Установка базового программного обеспечения
• Каким должен быть ваш веб-сайт?
• Работа с файлами
• Основы HTML
• Основы CSS
• Основы JavaScript
• Публикация вашего веб-сайта
• Как работает Веб

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 15 дек. 2022 г. by MDN contributors.

Язык 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? (Учебное пособие и примеры 2023 г.

)

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

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

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

Использование JavaScript

Учитывая, насколько популярным и вездесущим стал JavaScript, иногда кажется, что это ответ на вопрос «Для чего используется JavaScript?» это все.»

Вот несколько примеров использования JavaScript:

Создание интерактивных веб-страниц

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

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

Вот лишь несколько примеров использования JavaScript в веб-разработке:

• Создание кнопок, которые реагируют на наведение курсора мыши. Это может включать изменение цвета или отображение или скрытие дополнительной информации
• Встраивание окон поиска Google, видео YouTube или прокрутка мультимедийных списков воспроизведения
• Предоставление пользователям возможности увеличивать или уменьшать изображения или другой контент на странице
• Загрузка документов для пользователя без перезагрузки всей веб-страницы
• Создание различные интерактивные меню, в том числе раскрывающиеся списки, гамбургер-меню и т. д.
• Отображение анимации на веб-странице
• Проверка данных, введенных на веб-сайтах, для регистрационных форм

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

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

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

Популярные фреймворки JavaScript включают React, React Native, Angular и Vue. Возможно, вы слышали о Node.js в контексте фреймворков JavaScript, но на самом деле он не считается фреймворком. Фактически это среда выполнения JavaScript, представляющая собой набор компонентов, используемых для создания и запуска приложения JavaScript.

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

Как правило, существует два типа API-интерфейсов:

• API-интерфейсы браузера

API-интерфейсы браузера встроены в веб-браузеры и могут выполнять сложные действия (например, обработку звука и эффекты) с данными из браузера и окружающей компьютерной среды. .

• Сторонние API

Сторонние API, напротив, не встроены в браузер, и вы должны получать их информацию от третьей стороны в Интернете. Например, у большинства платформ социальных сетей будет свой собственный API, позволяющий отображать такие вещи, как сообщения и твиты, на веб-страницах.

Создание веб-серверов

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

Создание игр

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

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

Что делает JavaScript?

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

Что делает JavaScript в браузере?

Как клиентский язык программирования, JavaScript позволяет разработчикам выполнять в браузере следующие действия:

Автоматизировать простые задачи

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

Мгновенное внесение изменений

В отличие от некоторых других языков программирования, Javascript «управляется событиями», что позволяет ему реагировать на такие события, как ввод с клавиатуры или ввод с веб-страницы. Он также имеет доступ к объектной модели документа (DOM), что дает ему доступ к изменению шрифтов, изображений, текста, полей формы и других элементов веб-страницы. Эти две функции позволяют разработчикам выполнять ряд задач, включая реализацию интерактивных функций, таких как слайдеры изображений и игры.

Связь с сервером

Используя Ajax, Javascript может получить доступ к вычислительной мощности и ресурсам, которые были бы невозможны через чисто клиентское приложение. Это значительно повышает его гибкость для веб-разработки и мобильных приложений, предоставляя разработчикам инструменты для создания мощных веб-приложений.

Что делает JavaScript вне браузера?

JavaScript также может работать вне браузера с использованием таких сред выполнения, как node.js, deno или bun. Это означает, что разработчики могут использовать JavaScript в качестве языка программирования общего назначения для создания таких вещей, как инструменты CLI, веб-серверы, приложения для анализа данных, сценарии автоматизации, приложения для тестирования, а также с использованием таких фреймворков, как Electron или React Native. JavaScript можно даже использовать для создания перекрестных -платформенные настольные приложения и нативные мобильные приложения.

Как использовать JavaScript

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

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

Является ли JavaScript языком программирования?

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

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

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

Как создавать интерактивные веб-сайты с помощью JavaScript | by Kathryn Hodge

Узнайте, как с помощью JS сделать статические веб-сайты интерактивными

Прочтите статью или посмотрите видео!

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

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

Смотрим на страницу, а там наша кнопка.

Затем мы создадим папку js и поместим в нее файл с именем script.js — это имя является условным. Затем мы свяжем этот JS-файл с нашим кодом так же, как мы делали это для нашего CSS и фреймворка начальной загрузки в предыдущих руководствах. Он будет находиться внутри нашего тега head.

Теперь у нас есть JavaScript! Пока ничего не изменится, но мы настроены и готовы к кодированию. Теперь предположим, что мы хотели удивить нашего друга скрытым сообщением. Когда они впервые загрузят экран, появится только кнопка «Нажмите здесь», но если они нажмут кнопку, скрытое сообщение откроется. Итак, сначала давайте сделаем это скрытое сообщение и добавим немного CSS, чтобы оно сначала было скрыто…

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

Все, что нам нужно сделать, это написать JavaScript, чтобы при нажатии кнопки отображалось сообщение, поэтому мы перейдем к нашему script.js и напишем функцию. Чтобы создать функцию, мы напишем ключевое слово function , а затем имя функции — здесь это раскрыть сообщение. Если бы нам нужно было добавить параметры в функцию, то мы поместим их в скобки, но нам не нужно беспокоиться об этом прямо сейчас, поэтому мы не будем ничего помещать внутрь. Затем мы можем добавить тело нашей функции — что она на самом деле будет делать, когда будет вызвана функция rejectMessage(). Внутри нашей функции мы получим доступ к документу переменной (он же наш HTML-документ), а затем получим элемент с идентификатором hiddenMessage (наш абзац, который мы создали ранее). Далее мы получим доступ к этому элементу стиль , другими словами, это CSS, и установите для его свойства отображения значение «блок» .

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

Обновление страницы, давайте проверим это. Когда мы нажимаем кнопку, отображается сообщение.

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

Хотя это может показаться крутым, манипуляции с CSS — не единственное, на что способен JavaScript. Мы также могли бы добавить к этому отпуску обратный отсчет, чтобы каждый раз, когда пользователь нажимал кнопку обратного отсчета, дата отпуска приближалась. Возвращаясь к коду, мы добавим кнопку с цифрой 9.0060 id countDownButton и действие onclick countDown() .

Далее мы создадим div и поместим эти атрибуты style и id из абзаца в div, чтобы сообщение и обратный отсчет были скрыты.

Переходя к JavaScript, чтобы заставить обратный отсчет работать, мы напишем нашу ключевую функцию и назовем функцию countDown . Опять же, мы не будем задавать ему никаких параметров и перейдем к реализации нашего метода. Мы создадим переменную с ключевое слово var и назовите его currentVal . Его значением будет текст элемента с id countDownButton, который можно получить с помощью свойства innerHTML . Затем у нас будет другая переменная с именем newVal , и мы присвоим ей значение currentVal минус 1 — вот как мы начинаем обратный отсчет! Затем мы установим текст countDownButton в новое значение, захватив его с помощью функции getElementById и установив для свойства innerHTML значение newVal.

Это даст нам обратный отсчет и обновление страницы… У нас есть кнопка обратного отсчета!

Однако вы могли заметить, что иногда наш отсчет идет ниже нуля. Чтобы предотвратить это, мы можем добавить что-то, называемое if-statement . В основном мы скажем, что по умолчанию новое значение для кнопки равно нулю, но если текущее значение кнопки равно 1 или выше, то мы вычтем (обратный отсчет) один и пусть это будет новое значение для кнопки . В противном случае значение кнопки будет равно нулю, что является значением по умолчанию.

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

Это введение в JavaScript и то, как он может сделать ваши веб-сайты интерактивными . Здесь мы написали vanilla JavaScript , что означает, что мы не использовали никаких дополнительных библиотек в нашем коде. На следующей неделе мы узнаем о библиотеке JavaScript под названием jQuery и о том, как она может нам немного упростить работу.

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