Содержание

Element.innerHTML — Интерфейсы веб API

Свойство интерфейса Element innerHTML устанавливает или получает HTML или XML разметку дочерних элементов.

Примечание: Если узлы <div>, <span>, или <noembed> имеют дочерние текстовые узлы, содержащие символы (&), (<), или (>), innerHTML вернет эти символы как &amp, &lt и &gt соответсвенно. Используйте Node.textContent для получения правильной копии содержимого этих текстовых узлов. 

 Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте insertAdjacentHTML().

const content = element.innerHTML;

element.innerHTML = htmlString;

Value

Строка DOMString, которая содержит части HTML разметки. Установка значения innerHTML удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке htmlString.

Исключения

SyntaxError
Возникает при попытке установить значение innerHTML строкой, в которой содержится неправильно сформированный HTML.
NoModificationAllowedError
Возникает при попытке вставить HTML в узел, у которого родителем является Document.

Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:

document.body.innerHTML = "";  

Свойство innerHTML многих типов элементов, включая <body> или <html>, могут быть возвращены или перемещены. Это может так же быть использовано для просмотра кода страницы, которая была изменена динамически:


javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";

Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введен текст в поле ввода <input>, IE меняет значение атрибута <input> свойства innerHTML, но браузеры Gecko не делают этого.

Соображения безопасности

Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.

const name = "John";

el.innerHTML = name; 



name = "<script>alert('Я Джон в раздражающем alert!')</script>";
el.innerHTML = name; 

Хотя это может выглядеть как атака cross-site scripting, результат безопасный. HTML5 указывает на тег

<script> вставленный через InnerHTM должен не выполнится.

Однако, есть способы запустить JavaScript без использования элементов <script>, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; 

По этой причине,  рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте node.textContent. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. 

Этот пример использует innerHTML для создания механизма логгирования сообщений внутри элемента на странице.

JavaScript

function log(msg) {
  var logElem = document.querySelector(".log");

  var time = new Date();
  var timeStr = time.toLocaleTimeString();
  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
}

log("Регистрация событий мыши внутри этого контейнера...");

Функция log() создаёт сообщение получая текущее время из объекта Date, используя toLocaleTimeString(), и соединяя стороку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом "log".

Мы добавляем второй метод, который логгирует информацию о событиях на основе MouseEvent (например, mousedown, click, и mouseenter):

function logEvent(event) {
  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
            event.clientX + ", " + event.clientY + "</em>";
  log(msg);
}

Затем мы используем этот обработчик событий на элементе, который содержит наше логгирование, для каждого события мыши:

var boxElem = document.querySelector(".box");

boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);

HTML

HTML довольно простой для нашего примера.

<div>
  <div><strong>Log:</strong></div>
  <div></div>
</div>

<div> c классом "box" – просто контейнер для, который даст содержимому пространство вокруг себя. <div> с классом "log" является контейнером для логгирования текста внутри себя.

CSS

Для нашего примера используем следующие CSS стили.

.box {
  width: 600px;
  height: 300px;
  border: 1px solid black;
  padding: 2px 4px;
  overflow-y: scroll;
  overflow-x: auto;
}

.log {
  margin-top: 8px;
  font-family: monospace;
}

Результат

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

  • innerDOM — Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определенное как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.
  • Element.insertAdjacentHTML — Альтернатива для innerHTML, позволяющая добавлять новый HTML.
  • jssaxparser —  Более надежным (хотя и более тяжелым) решением, чем innerDOM (поддерживает парсинг с пространствами имен, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку значительно проще).
  • Эффективность соображений: quirksmode.

JavaScript HTML уроки для начинающих академия



JavaScript делает HTML-страницы более динамичными и интерактивными.

Пример

Мой первый JavaScript

Щелкните меня, чтобы отобразить дату и время

Тег HTML < script >

Тег <script> используется для определения сценария на стороне клиента (JavaScript).

Элемент <script> либо содержит скриптовые операторы, либо указывает на внешний файл сценария через атрибут

src .

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

Чтобы выбрать элемент HTML, JavaScript очень часто использует document.getElementById() метод.

Этот пример JavaScript пишет «Hello JavaScript!» в HTML-элемент с:

Пример

<script>
document.getElementById(«demo»).innerHTML = «Hello JavaScript!»;
</script>

Совет: Вы можете узнать больше о JavaScript в нашем справочнике по JavaScript.


Примеры JavaScript

Вот несколько примеров того, что может сделать JavaScript:

JavaScript can change HTML content

document.getElementById(«demo»).innerHTML = «Hello JavaScript!»;

JavaScript может изменить стили HTML

document.getElementById(«demo»).style.fontSize = «25px»;
document.getElementById(«demo»).style.color = «red»;
document.getElementById(«demo»).style.backgroundColor = «yellow»;

JavaScript может изменять атрибуты HTML

document.getElementById(«image»).src = «picture.gif»;



Тег HTML <noscript>

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

Пример


document.getElementById(«demo»).innerHTML = «Hello JavaScript!»;

<noscript>Sorry, your browser does not support JavaScript!</noscript>


Теги HTML-скриптов

Тег Описание
<script> Определяет сценарий на стороне клиента
<noscript> Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента


JavaScript Учебник. Установка. Уроки для начинающих. W3Schools на русском


Как подключить JavaScript? Тег <script>

На HTML-странице JavaScript код должен быть вставлен между тегами <script> и </script>.

Старые примеры JavaScript могут использовать атрибут type с таким написанием: <script type=»text/javascript»>.
Согласно спецификации HTML5 для подключения JavaScript атрибут

type — не обязателен. JavaScript является скриптовым языком в HTML по умолчанию.


Функции и события JavaScript

JavaScript function — это блок кода JavaScript, который может быть выполнен при «вызове».

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

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


JavaScript в <head> или <body>?

Вы можете разместить любое количество скриптов в HTML-документе.

Скрипты могут быть размещены в разделах <body>

или в <head> HTML страницы, или в обеих разделах.


JavaScript в <head>

В этом примере JavaScript function размещается в разделе <head> HTML страницы.

Функция вызывается при нажатии кнопки:

Пример

<head>
<script>
function myFunction() {
  document.getElementById(«demo»).innerHTML = «Параграф изменён.»;
}
</script>
</head>
<body>

<h2>Веб-страница</h2>
<p>Параграф</p>
<button type=»button»>Попробуй это</button>

</body>
</html>

Попробуйте сами »

JavaScript в <body>

В этом примере JavaScript function размещается в разделе <body> HTML страницы.

Функция вызывается при нажатии кнопки:

Пример


<h2>Веб-страница</h2>
<p>Параграф</p>
<button type=»button»>Попробуйте это</button>

<script>
function myFunction() {
 document.getElementById(«demo»).innerHTML = «Параграф изменён.»;
}
</script>

</body>
</html>

Попробуйте сами »

Размещение скриптов в нижней части элемента <body> улучшает скорость отображения, поскольку интерпретация скриптов замедляет отображение веб-страницы. По возможности старайтесь размещать JavaScript-код именно в конце HTML-страницы.


Внешний JavaScript

Скрипты также могут быть размещены во внешних файлах:

Внешний файл: myScript.js

function myFunction() {
 document.getElementById(«demo»).innerHTML = «Параграф изменён.»;
}

Внешние скрипты удобны, когда один и тот же JavaScrip-код используется на разных веб-страницах (по аналогии с внешними файлами .css).

Файлы JavaScript имеют расширение .js.

Чтобы использовать внешний скрипт, укажите имя файла скрипта в атрибуте src (сокращенно от source) тега <script>:

Можно разместить внешнюю ссылку на скрипт в <head> или <body> — как вам нравится.

Скрипт будет вести себя так, как если бы он был расположен именно там, где находится тег <script>.

Внешние скрипты не могут содержать теги <script>. В них содержится непосредственно сам JavaScript-код.


Преимущества использования внешних файлов JavaScript

Размещение скриптов во внешних файлах имеет ряд преимуществ:

  • Разделяются HTML-код и JavaScript-код
  • Это облегчает чтение и поддержку отдельно HTML и JavaScript
  • Кэшированные файлы JavaScript могут ускорить загрузку страниц

Чтобы добавить несколько файлов скриптов на одну страницу — используйте несколько тегов <script>:

Пример

<script src=»myScript1.js»></script>
<script src=»myScript2.js»></script>


Внешние ссылки

На внешние скрипты можно ссылаться с помощью полного URL-адреса или пути относительно текущей веб-страницы.

В этом примере используется полный URL-адрес для ссылки на скрипт:

В этом примере используется скрипт, расположенный в указанной папке на текущем веб-сайте:

Этот пример ссылается на скрипт, расположенный в той же папке, что и текущая страница:

Вы можете прочитать больше о путях к файлам в главе HTML Пути к файлам на нашем сайте W3Schools на русском.

Для написания скриптов на языке JavaScript используются точно такие же редакторы кода, как и для написания обычного HTML-кода. О том, какие можно использовать редакторы кода, вы можете прочитать в разделе HTML Редакторы на нашем сайте W3Schools на русском.


Знакомство с JSX – React

Рассмотрим объявление переменной:

const element = <h2>Привет, мир!</h2>;

Этот странный тег — ни строка, ни фрагмент HTML.

Это JSX — расширение языка JavaScript. Мы рекомендуем использовать его, когда требуется объяснить React, как должен выглядеть UI. JSX напоминает язык шаблонов, наделённый силой JavaScript.

JSX производит «элементы» React. То, как элементы рендерятся в DOM, мы изучим в следующей главе, а ниже мы рассмотрим основы JSX, которые нужно знать начинающему.

Что такое JSX?

React исходит из принципа, что логика рендеринга неразрывно связана с прочей логикой UI: с тем, как обрабатываются события, как состояние изменяется во времени и как данные готовятся к отображению.

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

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

С этим разобрались. Поехали дальше!

Встраивание выражений в JSX

В следующем примере мы объявляем переменную name и затем используем её внутри JSX, обрамляя фигурными скобками:

const name = 'Иван-Царевич';const element = <h2>Здравствуй, {name}!</h2>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX допускает использование любых корректных JavaScript-выражений внутри фигурных скобок. Например, 2 + 2, user.firstName и formatName(user) являются допустимыми выражениями.

В примере ниже мы встраиваем результат вызова JavaScript-функции formatName(user) в элемент <h2>:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Марья',
  lastName: 'Моревна'
};

const element = (
  <h2>
    Здравствуй, {formatName(user)}!  </h2>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Посмотреть на CodePen

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

JSX это тоже выражение

После компиляции каждое JSX-выражение становится обычным вызовом JavaScript-функции, результат которого — объект JavaScript.

Из этого следует, что JSX можно использовать внутри выражений if и циклов for, присваивать переменным, передавать функции в качестве аргумента и возвращать из функции.

function getGreeting(user) {
  if (user) {
    return <h2>Здравствуй, {formatName(user)}!</h2>;  }
  return <h2>Здравствуй, незнакомец.</h2>;}

Использование атрибутов JSX

Чтобы использовать строковый литерал в качестве значения атрибута, используются кавычки:

const element = <div tabIndex="0"></div>;

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

const element = <img src={user.avatarUrl}></img>;

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

Предупреждение:

Поскольку JSX ближе к JavaScript чем к HTML, React DOM использует стиль именования camelCase для свойств вместо обычных имён HTML-атрибутов.

Например, class становится className в JSX, а tabindex становится tabIndex.

Использование дочерних элементов в JSX

Если тег пуст, то его можно сразу же закрыть с помощью /> точно так же, как и в XML:

const element = <img src={user.avatarUrl} />;

Но JSX-теги могут и содержать дочерние элементы:

const element = (
  <div>
    <h2>Здравствуйте!</h2>
    <h3>Рады вас видеть.</h3>
  </div>
);

JSX предотвращает атаки, основанные на инъекции кода

Данные, введённые пользователем, можно безопасно использовать в JSX:

const title = response.potentiallyMaliciousInput;

const element = <h2>{title}</h2>;

По умолчанию React DOM экранирует все значения, включённые в JSX перед тем как отрендерить их. Это гарантирует, что вы никогда не внедрите чего-либо, что не было явно написано в вашем приложении. Всё преобразуется в строчки, перед тем как быть отрендеренным. Это помогает предотвращать атаки межсайтовым скриптингом (XSS).

JSX представляет собой объекты

Babel компилирует JSX в вызовы React.createElement().

Следующие два примера кода эквивалентны между собой:

const element = (
  <h2 className="greeting">
    Привет, мир!
  </h2>
);
const element = React.createElement(
  'h2',
  {className: 'greeting'},
  'Привет, мир!'
);

React.createElement() проводит некоторые проверки с целью выявить баги в коде, но главное — создаёт объект похожий на такой:


const element = {
  type: 'h2',
  props: {
    className: 'greeting',
    children: 'Привет, мир!'
  }
};

Эти объекты называются React-элементами. Можно сказать, что они описывают результат, который мы хотим увидеть на экране. React читает эти объекты и использует их, чтобы конструировать и поддерживать DOM.

В следующей главе мы углубимся в то, как React элементы рендерятся в DOM.

Совет:

Мы рекомендуем настроить ваш любимый редактор кода использовать Babel чтобы и ES6, и JSX код были подсвечены должным образом.

Что такое HTML, CSS, PHP и JS? / WAYUP

Общая информация

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

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

Что такое HTML?

HTML (Hypertext Markup Language) — это язык гипертекствой разметки. Не совсем понятно, верно? Упростив определение, можно сказать, что HTML — это «скелет» любой страницы.

Примером может послужить следующий участок выдуманной нами странички:

<h2>Заголовок страницы</h2>

<p>Это текст, параграф, заключенный в теги <p></p>. Как правило, HTML состоит из тегов, которые открываются и закрываются, обрамляя те или иные элементы. Вот и сейчас абзац текста закончится и мы поставим.</p>

<p>А сейчас мы разместим ссылку:</p>

<a href="http://адрес-сайта.ru">видимая часть ссылки(анкор)</a>

Это текст, параграф, заключенный в теги <p></p>. Как правило, HTML состоит из тегов, которые открываются и закрываются, обрамляя те или иные элементы. Вот и сейчас абзац текста закончится и мы поставим.

А сейчас мы разместим ссылку:

видимая часть ссылки(анкор)

Почему «скелет»? Если Вы присмотритесь, то интерпретированный код совсем никак не оформлен. Не заданы ни цвета, ни размеры, ни позиционирование.

Мы можем сделать вывод, что HTML — это набор тегов, которые составляют основу любой страницы в Интернете. С их помощью мы объявляем заголовки, параграфы, ссылки, картинки и другие элементы.

Что такое CSS?

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — это и есть та «волшебная магия», которая делает HTML-разметку приятной глазу. При помощи CSS мы имеем возможность оформлять как угодно любой элемент, прописанный в разметке.

Думаю, лучше всего показать пример:

<h2>Зебры</h2>

<p>Зе́бры (лат. Hippotigris) — подрод рода лошади, включающий виды бурчеллова зебра (Equus quagga), зебра Греви (Equus grevyi) и горная зебра (Equus zebra). Гибридные формы между зебрами и домашними лошадьми называют зеброидами, между зебрами и ослами — зебрулами. Зебры живут маленькими группами, состоящими из самок с детёнышами и одного жеребца.</p>

<h5>Окраска</h5>

<p>По поводу фоновой окраски зебры часто встречаются две взаимоисключающие позиции: белая либо чёрная. Куратор отдела крупных млекопитающих зоопарка Атланты Лиза Смит (Lisa Smith) утверждает, что специалисты чаще всего описывают зебру как чёрную лошадь в белую полоску[1]</p>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/L15zebras.jpg/265px-L15zebras.jpg">
<a href="http://ru.wikipedia.org/wiki/%D0%97%D0%B5%D0%B1%D1%80%D1%8B">Узнать больше о зебрах!</a>

  • Без использования CSS
  • С использованием CSS

Зе́бры (лат. Hippotigris) — подрод рода лошади, включающий виды бурчеллова зебра (Equus quagga), зебра Греви (Equus grevyi) и горная зебра (Equus zebra). Гибридные формы между зебрами и домашними лошадьми называют зеброидами, между зебрами и ослами — зебрулами. Зебры живут маленькими группами, состоящими из самок с детёнышами и одного жеребца.

Окраска

По поводу фоновой окраски зебры часто встречаются две взаимоисключающие позиции: белая либо чёрная. Куратор отдела крупных млекопитающих зоопарка Атланты Лиза Смит (Lisa Smith) утверждает, что специалисты чаще всего описывают зебру как чёрную лошадь в белую полоску[1]

Узнать больше о зебрах!

Зе́бры (лат. Hippotigris) — подрод рода лошади, включающий виды бурчеллова зебра (Equus quagga), зебра Греви (Equus grevyi) и горная зебра (Equus zebra). Гибридные формы между зебрами и домашними лошадьми называют зеброидами, между зебрами и ослами — зебрулами. Зебры живут маленькими группами, состоящими из самок с детёнышами и одного жеребца.

Окраска

По поводу фоновой окраски зебры часто встречаются две взаимоисключающие позиции: белая либо чёрная. Куратор отдела крупных млекопитающих зоопарка Атланты Лиза Смит (Lisa Smith) утверждает, что специалисты чаще всего описывают зебру как чёрную лошадь в белую полоску[1]

Узнать больше о зебрах!

Не трудно заметить, что использование CSS — это неотъемлемая и весомая часть процесса разработки страниц, так как именно таблицы стилей позволяют программно реализовать всю ту красоту, что нарисовал прежде дизайнер.

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

Что такое PHP?

PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor) — это распространенный язык программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения Web-разработок и его код может внедряться непосредственно в HTML.

Что это означает для нас? Давайте посмотрим пример использования PHP:

<?php
echo "Привет, мир! Я - скрипт PHP.";
?>

Привет, мир! Я — скрипт PHP.

Характерной отличительной чертой данного языка является то, что результатом его обработки могут являться обычные HTML-теги (HTML-код). Именно поэтому он активно используется в среде веб-программирования. Также стоит отметить, что, в отличие от HTML, PHP умеет общаться с сервером, а также просматривать базы данных, «вытаскивать» нужную информацию и выводить на страницу.

Код PHP отделяется специальными начальным и конечным тегами <?php и ?>, которые позволяют «переключаться» в «PHP-режим» и выходить из него, находясь внутри HTML-разметки. PHP-скрипты могут располагаться и в отдельных файлах от разметки, если их задача является массивной и требует большого количества кода.

Именно благодаря языкам программирования, подобным PHP (и самому PHP), стало возможным создание CMS (Content Management System, «си эм эс») или Систем Управления Контентом.

Что нам сейчас стоит уяснить? PHP-скрипты — это своеобразный «клей-конструктор», который позволяет программировать вывод различной информации на экран пользователя. Для создания обычной статичной страницы в Интернете достаточно использования HTML в паре с CSS. Но если эта страница (к примеру, новость) является частью какого-либо динамического сайта, то скорее всего ее появление — это результат выполнения PHP-скрипта.

Что такое JS?

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

Для начала предлагаю рассмотреть небольшой пример того, что можно сделать с помощью JS:

<div>
<table>
<tr><td><form>

<input type="button" value="красный">
<input type="button" value="желтый">
<input type="button" value="синий">
<input type="button" value="коралловый">

</form></td></tr>
</table>
</div>

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

Данный язык программирвования считается одним из самых легких к изучению, поэтому он так широко применяется front-end-разработчиками сайтов, которые далеко не всегда являются программистами.

Вся «магия» JS завязана на событиях. Скрипты начинаются с того, что определяется событие, которое должен совершить посетитель. Как только событие совершено, начинается выполнение программного кода.

В нашем примере было установлено событие onclick («по нажатию») для кнопок <input type=»button»>. Следовательно, по нажатию на кнопку происходит выполнение кода:

getElementById(‘changer’).style.backgroundColor=’#ff0000′.

Дословно это выражение читается, как «получить элемент, с id равным changer, и применить атрибут style со значением фонового цвета #ff0000».

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

Можно сделать вывод, что JavaScript является незаменимым инструментом для того, чтобы создавать анимационные эффекты на сайте. При этом, переходя к изучению JS, необходимо хорошо разобраться в HTML и CSS, так как большинство программного кода будет «взывать» к их синтаксису.

Хочу отметить, что новички очень часто путают JS и PHP. Даже вопросы задаются на форумах, в духе: «можно ли заменить PHP на JS и наооборот?». Ответ — нет, так как это совсем разные языки программирования. PHP — серверный, он общается с сервером. JS — клиентский, работает с клиентом.

Резюмируем

Мы с вами разобрались в том, что же такое HTML, CSS, PHP и JS, а также рассмотрели яркие примеры их использования и результаты, которые они демонстрируют.

Хороший front-end-разработчик обязан разбираться в каждом из этих языков, хотя PHP в большей степени используется для back-end.

Знание и постоянное совершенствование в каждом из данных языков позволит вам быть востребованным специалистом, способным решать любые задачи.

Наш курс «Веб-Верстальщик: Код Фрилансера» ставит своей задачей обучить каждого студента основам работы с HTML, CSS, основам JS и базе PHP, а также дать необходимые знания и умения для дальнейшего развития.

У вас все получится!

Что такое JavaScript? — Изучите веб-разработку

Добро пожаловать на курс JavaScript для начинающих MDN! В этой статье мы рассмотрим JavaScript с высокого уровня, ответив на такие вопросы, как «Что это такое?». и «Что вы можете с этим сделать?» и убедитесь, что вам понятна цель JavaScript.

Предварительные требования: Базовая компьютерная грамотность, базовое понимание HTML и CSS.
Цель: Чтобы познакомиться с тем, что такое JavaScript, что он может делать и как он вписывается в веб-сайт.

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

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

Три слоя красиво накладываются друг на друга. В качестве примера возьмем простую текстовую метку. Мы можем разметить его с помощью HTML, чтобы придать ему структуру и цель:

  

Игрок 1: Крис

Затем мы можем добавить немного CSS в микс, чтобы он выглядел красиво:

  p {
  семейство шрифтов: 'helvetica neue', helvetica, sans-serif;
  межбуквенный интервал: 1 пиксель;
  текст-преобразование: прописные буквы;
  выравнивание текста: центр;
  граница: 2px сплошной rgba (0,0,200,0.6);
  фон: rgba (0,0,200,0.3);
  цвет: rgba (0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba (0,0,200,0.4);
  радиус границы: 10 пикселей;
  отступ: 3px 10px;
  дисплей: встроенный блок;
  курсор: указатель;
}  

И, наконец, мы можем добавить JavaScript для реализации динамического поведения:

  const para = document.querySelector ('p');

para.addEventListener ('щелкните', updateName);

function updateName () {
  let name = prompt ('Введите новое имя');
  para.textContent = 'Игрок 1:' + имя;
}
  

Попробуйте щелкнуть эту последнюю версию текстовой метки, чтобы увидеть, что происходит (обратите внимание, что вы можете найти эту демонстрацию на GitHub — посмотрите исходный код или запустите его вживую)!

JavaScript может гораздо больше — давайте рассмотрим, что именно.

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

  • Хранить полезные значения внутри переменных. Например, в приведенном выше примере мы просим ввести новое имя, а затем сохраняем это имя в переменной с именем name .
  • Операции с фрагментами текста (в программировании известные как «строки»). В приведенном выше примере мы берем строку «Player 1:» и присоединяем ее к переменной name , чтобы создать полную текстовую метку, например.грамм. «Игрок 1: Крис».
  • Запуск кода в ответ на определенные события, происходящие на веб-странице. В нашем примере выше мы использовали событие click , чтобы определить, когда была нажата кнопка, а затем запустить код, обновляющий текстовую метку.
  • И многое другое!

Что еще более интересно, так это функциональность, построенная на основе клиентского языка JavaScript. Так называемые интерфейсы прикладного программирования ( API ) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.

API

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

Обычно они делятся на две категории.

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

  • API DOM (объектная модель документа) позволяет вам управлять HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. Д. Каждый раз, когда вы видите всплывающее окно, появляющееся на странице, или отображается некоторый новый контент (как мы видели выше в нашей простой демонстрации), например, это DOM в действии.
  • API геолокации извлекает географическую информацию. Таким образом Google Maps может определять ваше местоположение и наносить его на карту.
  • API Canvas и WebGL позволяют создавать анимированную 2D- и 3D-графику. С помощью этих веб-технологий люди делают удивительные вещи — см. Эксперименты Chrome и примеры webgls.
  • API-интерфейсы аудио и видео
  • , такие как HTMLMediaElement и WebRTC , позволяют делать действительно интересные вещи с мультимедиа, например воспроизводить аудио и видео прямо на веб-странице или захватывать видео с веб-камеры и отображать его на чужом компьютере ( попробуйте нашу простую демонстрацию Snapshot, чтобы понять это).

Примечание : Многие из вышеперечисленных демонстраций не будут работать в более старых версиях браузера — при экспериментировании рекомендуется использовать современный браузер, такой как Firefox, Chrome, Edge или Opera, для запуска вашего кода. Вам необходимо учитывать кроссбраузерное тестирование более подробно, когда вы приблизитесь к доставке производственного кода (т.е. реального кода, который будут использовать реальные клиенты).

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

Примечание : Эти API являются расширенными, и мы не будем рассматривать их в этом модуле. Вы можете узнать больше об этом в нашем модуле клиентских веб-API.

Доступно еще много всего! Однако пока не стоит слишком сильно волноваться. Вы не сможете создать следующий Facebook, Google Maps или Instagram после изучения JavaScript в течение 24 часов — сначала нужно изучить множество основ. И поэтому вы здесь — идем дальше!

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

Давайте вкратце напомним историю того, что происходит, когда вы загружаете веб-страницу в браузере (о чем впервые говорилось в нашей статье «Как работает CSS»). Когда вы загружаете веб-страницу в свой браузер, вы запускаете свой код (HTML, CSS и JavaScript) внутри среды выполнения (вкладка браузера). Это похоже на фабрику, которая принимает сырье (код) и выпускает продукт (веб-страницу).

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

Безопасность браузера

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

Примечание : Существуют способы безопасной отправки кода и данных между разными веб-сайтами / вкладками, но это продвинутые методы, которые мы не будем рассматривать в этом курсе.

Порядок выполнения JavaScript

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

  const para = document.querySelector ('p');

para.addEventListener ('щелкните', updateName);

function updateName () {
  let name = prompt ('Введите новое имя');
  para.textContent = 'Игрок 1:' + имя;
}  

Здесь мы выбираем текстовый абзац (строка 1), затем присоединяем к нему прослушиватель событий (строка 3), чтобы при щелчке на абзаце запускался блок кода updateName () (строки 5–8).Кодовый блок updateName () (эти типы повторно используемых кодовых блоков называются «функциями») запрашивает у пользователя новое имя, а затем вставляет это имя в абзац, чтобы обновить отображение.

Если вы поменяли местами первые две строки кода, он больше не будет работать — вместо этого вы получите сообщение об ошибке в консоли разработчика браузера — TypeError: para is undefined . Это означает, что объект para еще не существует, поэтому мы не можем добавить к нему прослушиватель событий.

Примечание : Это очень распространенная ошибка — вы должны быть осторожны, чтобы объекты, на которые есть ссылки в вашем коде, существовали, прежде чем пытаться что-то с ними сделать.

Интерпретируемый и скомпилированный код

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

С другой стороны, скомпилированные языки преобразуются (компилируются) в другую форму перед запуском на компьютере. Например, C / C ++ компилируются в машинный код, который затем запускается на компьютере. Программа выполняется из двоичного формата, который был сгенерирован из исходного исходного кода программы.

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

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

Сравнение кода на стороне сервера и на стороне клиента

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

Серверный код, с другой стороны, запускается на сервере, затем его результаты загружаются и отображаются в браузере.Примеры популярных серверных веб-языков включают PHP, Python, Ruby, ASP.NET и … JavaScript! JavaScript также может использоваться в качестве серверного языка, например, в популярной среде Node.js. Вы можете узнать больше о серверном JavaScript в разделе «Динамические веб-сайты — серверное программирование».

Сравнение динамического и статического кода

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

Веб-страница без динамически обновляемого содержимого называется статической — она ​​просто показывает одно и то же содержимое все время.

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