Что такое javascript: назначение, особенности и сферы применения языка
Содержание:
- 9) onReady()
- Возврат значения
- prompt()
- Добавление/удаление элементов
- Даты, Intl.DateTimeFormat
- Советы по эфективному изучению JavaScript
- innerHTML: содержимое элемента
- outerHTML: HTML элемента целиком
- 3, 2 и 1) getCookie(), setCookie(), deleteCookie()
- Чем хорош JavaScript
- Таблицы совместимости
- Как JavaScript отличается от других языков программирования?
- Справочники
- Локаль
- Javascript: примеры кода
- Чего НЕ может JavaScript в браузере?
- Заключение
9) onReady()
Для инициализации страницы исторически использовалось событие window.onload, которое срабатывает после полной загрузки страницы и всех объектов на ней: счетчиков, картинок и т.п.
Событие — гораздо лучший выбор в 99% случаев. Это событие срабатывает, как только готов DOM документ, до загрузки картинок и других не влияющих на структуру документа объектов.
Это очень удобно, т.к. картинки могут загружаться долго, а обработчик может произвести необходимые изменения на странице и инициализацию интерфейсов тут же, не дожидаясь загрузки всего.
Для добавления обработчика можно использовать следующий кроссбраузерный код:
function bindReady(handler){
var called = false
function ready() { // (1)
if (called) return
called = true
handler()
}
if ( document.addEventListener ) { // (2)
document.addEventListener( "DOMContentLoaded", function(){
ready()
}, false )
} else if ( document.attachEvent ) { // (3)
// (3.1)
if ( document.documentElement.doScroll && window == window.top ) {
function tryScroll(){
if (called) return
if (!document.body) return
try {
document.documentElement.doScroll("left")
ready()
} catch(e) {
setTimeout(tryScroll, 0)
}
}
tryScroll()
}
// (3.2)
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
ready()
}
})
}
// (4)
if (window.addEventListener)
window.addEventListener('load', ready, false)
else if (window.attachEvent)
window.attachEvent('onload', ready)
/* else // (4.1)
window.onload=ready
*/
}
readyList = []
function onReady(handler) {
if (!readyList.length) {
bindReady(function() {
for(var i=0; i<readyList.length; i++) {
readyList()
}
})
}
readyList.push(handler)
}
Использование:
onReady(function() {
// ...
})
Подробное описание функций , и принципы их работы вы можете почерпнуть в статье Кроссбраузерное событие onDOMContentLoaded.
Возврат значения
Функция может вернуть результат, который будет передан в вызвавший её код.
Простейшим примером может служить функция сложения двух чисел:
Директива может находиться в любом месте тела функции. Как только выполнение доходит до этого места, функция останавливается, и значение возвращается в вызвавший её код (присваивается переменной выше).
Вызовов может быть несколько, например:
Возможно использовать и без значения. Это приведёт к немедленному выходу из функции.
Например:
В коде выше, если вернёт , не выполнит .
Результат функции с пустым или без него –
Если функция не возвращает значения, это всё равно, как если бы она возвращала :
Пустой аналогичен :
Никогда не добавляйте перевод строки между и его значением
Для длинного выражения в может быть заманчиво разместить его на нескольких отдельных строках, например так:
Код не выполнится, потому что интерпретатор JavaScript подставит точку с запятой после . Для него это будет выглядеть так:
Таким образом, это фактически стало пустым .
Если мы хотим, чтобы возвращаемое выражение занимало несколько строк, нужно начать его на той же строке, что и . Или, хотя бы, поставить там открывающую скобку, вот так:
И тогда всё сработает, как задумано.
prompt()
Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false.
Синтаксис здесь такой:
prompt (сообщение, значение_поля_ввода_данных)
Значение поля ввода необязательно. Туда можно вписать текст, который изначально введен в поле для удобства пользователя.
Код:
<html> <script> prompt(«Передай привет Skillbox», «Привет») </script> </html>
Результат:
Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы (Технология AJAX), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML-элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.
Добавление/удаление элементов
Мы уже знаем методы, которые добавляют и удаляют элементы из начала или конца:
- – добавляет элементы в конец,
- – извлекает элемент из конца,
- – извлекает элемент из начала,
- – добавляет элементы в начало.
Есть и другие.
Как удалить элемент из массива?
Так как массивы – это объекты, то можно попробовать :
Вроде бы, элемент и был удалён, но при проверке оказывается, что массив всё ещё имеет 3 элемента .
Это нормально, потому что всё, что делает – это удаляет значение с данным ключом . Это нормально для объектов, но для массивов мы обычно хотим, чтобы оставшиеся элементы сдвинулись и заняли освободившееся место. Мы ждём, что массив станет короче.
Поэтому для этого нужно использовать специальные методы.
Метод arr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.
Его синтаксис:
Он начинает с позиции , удаляет элементов и вставляет на их место. Возвращает массив из удалённых элементов.
Этот метод проще всего понять, рассмотрев примеры.
Начнём с удаления:
Легко, правда? Начиная с позиции , он убрал элемент.
В следующем примере мы удалим 3 элемента и заменим их двумя другими.
Здесь видно, что возвращает массив из удалённых элементов:
Метод также может вставлять элементы без удаления, для этого достаточно установить в :
Отрицательные индексы разрешены
В этом и в других методах массива допускается использование отрицательного индекса. Он позволяет начать отсчёт элементов с конца, как тут:
Метод arr.slice намного проще, чем похожий на него .
Его синтаксис:
Он возвращает новый массив, в который копирует элементы, начиная с индекса и до (не включая ). Оба индекса и могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.
Это похоже на строковый метод , но вместо подстрок возвращает подмассивы.
Например:
Можно вызвать и вообще без аргументов: создаёт копию массива . Это часто используют, чтобы создать копию массива для дальнейших преобразований, которые не должны менять исходный массив.
Метод arr.concat создаёт новый массив, в который копирует данные из других массивов и дополнительные значения.
Его синтаксис:
Он принимает любое количество аргументов, которые могут быть как массивами, так и простыми значениями.
В результате мы получаем новый массив, включающий в себя элементы из , а также , и так далее…
Если аргумент – массив, то все его элементы копируются. Иначе скопируется сам аргумент.
Например:
Обычно он просто копирует элементы из массивов. Другие объекты, даже если они выглядят как массивы, добавляются как есть:
…Но если объект имеет специальное свойство , то он обрабатывается как массив: вместо него добавляются его числовые свойства.
Для корректной обработки в объекте должны быть числовые свойства и :
Даты, Intl.DateTimeFormat
Синтаксис:
Первый аргумент – такой же, как и в , а в объекте мы можем определить, какие именно части даты показывать (часы, месяц, год…) и в каком формате.
Полный список свойств :
| Свойство | Описание | Возможные значения | По умолчанию |
|---|---|---|---|
| Алгоритм подбора локали | , | ||
| Алгоритм подбора формата | , | ||
| Включать ли время в 12-часовом формате | — 12-часовой формат, — 24-часовой | ||
| Временная зона | Временная зона, например | ||
| День недели | , , | ||
| Эра | , , | ||
| Год | , | или | |
| Месяц | , , , , | или | |
| День | , | или | |
| Час | , | ||
| Минуты | , | ||
| second | Секунды | , | |
| Название таймзоны (нет в IE11) | , |
Все локали обязаны поддерживать следующие наборы настроек:
- weekday, year, month, day, hour, minute, second
- weekday, year, month, day
- year, month, day
- year, month
- month, day
- hour, minute, second
Если указанный формат не поддерживается, то настройка задаёт алгоритм подбора наиболее близкого формата: – по и – по умолчанию, на усмотрение окружения (браузера).
Использование:
Например:
Длинная дата, с настройками:
Только время:
Советы по эфективному изучению JavaScript
Изучение JavaScript, как и других языков программирования – непростое дело, но оно безусловно стоит потраченных сил и времени. Обучение эффективно, когда дается не просто так, а с усилием. Вы должны прилагать сознательные усилия для того, чтобы усваивать новые навыки и умения. Знания, полученные без усилий, подобны кругам на воде – очень скоро от них не останется и следа.
Электронные книги, бесплатные онлайн-курсы и интернет-платформы для обучения с помощью задач – выбор вариантов источников качественных знаний сегодня почти безграничен. Но как мотивировать себя к самостоятельному обучению, как научиться учиться самостоятельно?
Попробуйте следовать нескольким простым, но проверенным на практике советам.
Учиться нужно понемногу, но регулярно. Регулярность – залог успеха в обучении. Спланируйте свои будни так, чтобы вы могли каждый день уделять на изучение JavaScript не менее одного часа. Не пытайтесь за короткий промежуток времени выучить всё и сразу. Разбивка процесса самообразования на небольшие учебные сессии создает ощущение быстрых успехов и мотивирует вернуться к обучению уже на следующий день.
Наихудшее время для обучения – когда вы чувствуете усталость. В такие моменты, главное не заставлять себя – вы не получите ожидаемого результата. Человеческий мозг не может учить что-то бесконечно долго – ему нужно давать перерывы. Занимайтесь по принципу 25\5. Попробуйте на себе практику учить 25 минут и отдыхать 5 минут. Ваш мозг привыкнет к таким равномерным нагрузкам и будет работать максимально продуктивно.
Применяйте практики вспоминания – основу обучения. Чем чаще мы вспоминаем информацию, тем дольше она будет храниться в нашей памяти.
Эффективная техника вспоминания – это отложенное вспоминание: на карточке с одной стороны напишите вопрос, который относится к изученному материалу, а с другой – ответ на него. Выучите содержание карточки, а затем, через день, попытайтесь вспомнить ответ. Если вы дали правильный ответ – карточку можно отложить на неделю до следующего повторения. Если ошиблись – необходимо повторить вопрос уже на следующий день. Чем длиннее у вас будет цепочка успешных оветов, тем больший интервал должен быть перед следующим повторением.
Параллельно с теоретическими занятиями постоянно практикуйтесь. Для приобретения практического опыта достаточно просто много писать и разбирать примеры хорошего кода. Работая с примерами внимательно пройдите по всем строчкам кода – вы должны убедиться, что понимаете, как работает каждая строчка. Не бойтесь экспериментировать. Учитесь выводить в окне браузера какие-то данные и анализировать их. Например, что и после чего выводится на экран, получили ли вы то, что хотели, и если нет – то почему.
Какой бы способ обучения вы не выбрали, не забывайте, что он должен быть интересным для вас и подкрепляться практическими занятиями – примеры лучше тысячи слов. Примеры часто легче понять, чем многостраничную теорию. Поэтому будьте смелее! Надеюсь, что этот учебник станет хорошим подспорьем в ваших начинаниях.
← предыдущая
следующая →
innerHTML: содержимое элемента
Свойство позволяет получить HTML-содержимое элемента в виде строки.
Мы также можем изменять его. Это один из самых мощных способов менять содержимое на странице.
Пример ниже показывает содержимое , а затем полностью заменяет его:
Мы можем попробовать вставить некорректный HTML, браузер исправит наши ошибки:
Скрипты не выполнятся
Если вставляет в документ тег – он становится частью HTML, но не запускается.
Мы можем добавить HTML к элементу, используя .
Вот так:
На практике этим следует пользоваться с большой осторожностью, так как фактически происходит не добавление, а перезапись. Технически эти две строки делают одно и то же:
Технически эти две строки делают одно и то же:
Другими словами, делает следующее:
- Старое содержимое удаляется.
- На его место становится новое значение (с добавленной строкой).
Так как содержимое «обнуляется» и переписывается заново, все изображения и другие ресурсы будут перезагружены.
В примере выше строка заново создаёт содержимое HTML и перезагружает (надеемся, картинка закеширована). Если в много текста и изображений, то эта перезагрузка будет очень заметна.
Есть и другие побочные эффекты. Например, если существующий текст выделен мышкой, то при переписывании большинство браузеров снимут выделение. А если это поле ввода с текстом, введённым пользователем, то текст будет удалён. И т.д.
К счастью, есть и другие способы добавить содержимое, не использующие , которые мы изучим позже.
outerHTML: HTML элемента целиком
Свойство содержит HTML элемента целиком. Это как плюс сам элемент.
Посмотрим на пример:
Будьте осторожны: в отличие от , запись в не изменяет элемент. Вместо этого элемент заменяется целиком во внешнем контексте.
Да, звучит странно, и это действительно необычно, поэтому здесь мы и отмечаем это особо.
Рассмотрим пример:
Какая-то магия, да?
В строке мы заменили на . Во внешнем документе мы видим новое содержимое вместо . Но, как видно в строке (), старая переменная осталась прежней!
Это потому, что использование не изменяет DOM-элемент, а удаляет его из внешнего контекста и вставляет вместо него новый HTML-код.
То есть, при произошло следующее:
- был удалён из документа.
- Вместо него был вставлен другой HTML .
- В осталось старое значение. Новый HTML не сохранён ни в какой переменной.
Здесь легко сделать ошибку: заменить , а потом продолжить работать с , как будто там новое содержимое. Но это не так. Подобное верно для , но не для .
Мы можем писать в , но надо иметь в виду, что это не меняет элемент, в который мы пишем. Вместо этого создаётся новый HTML на его месте. Мы можем получить ссылки на новые элементы, обратившись к DOM.
3, 2 и 1) getCookie(), setCookie(), deleteCookie()
В javascript нет способа нормально работать с cookie без дополнительных функций. Не знаю, кто проектировал , но сделано на редкость убого.
Поэтому следующие функции или их аналоги просто необходимы.
// возвращает cookie если есть или undefined
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/(\\\/\+^])/g, '\\$1') + "=(*)"
))
return matches ? decodeURIComponent(matches) : undefined
}
// уcтанавливает cookie
function setCookie(name, value, props) {
props = props || {}
var exp = props.expires
if (typeof exp == "number" && exp) {
var d = new Date()
d.setTime(d.getTime() + exp*1000)
exp = props.expires = d
}
if(exp && exp.toUTCString) { props.expires = exp.toUTCString() }
value = encodeURIComponent(value)
var updatedCookie = name + "=" + value
for(var propName in props){
updatedCookie += "; " + propName
var propValue = props
if(propValue !== true){ updatedCookie += "=" + propValue }
}
document.cookie = updatedCookie
}
// удаляет cookie
function deleteCookie(name) {
setCookie(name, null, { expires: -1 })
}
Аргументы:
- name
- название cookie
- value
- значение cookie (строка)
- props
-
Объект с дополнительными свойствами для установки cookie:
- expires
- Время истечения cookie. Интерпретируется по-разному, в зависимости от типа:
- Если число — количество секунд до истечения.
- Если объект типа Date — точная дата истечения.
- Если expires в прошлом, то cookie будет удалено.
- Если expires отсутствует или равно 0, то cookie будет установлено как сессионное и исчезнет при закрытии браузера.
- path
- Путь для cookie.
- domain
- Домен для cookie.
- secure
- Пересылать cookie только по защищенному соединению.
Чем хорош JavaScript
JavaScript полностью интегрирован с HTML, он способен как угодно менять веб-страницу. В ответ на событие программист может:
- на лету вставить в HTML-код любые теги;
- задать внешний вид элементов через класс и атрибуты HTML;
- переместить любой элемент;
- запросить у пользователя данные;
- отправить запрос на сервер (технология AJAX).
Чтобы сделать такую игру на JavaScript, нужно 30 (!!) строк кода. Автор игры написал про нее небольшую заметку на Хабрахабре
Это только то, что сразу пришло в голову. JavaScript может намного больше, в пределах своей страницы он Бог.
JavaScript — подходящий язык для изучения программирования. Он достаточно прост, но содержит все фундаментальные вещи: алгоритмы, объектно-ориентированную модель, структуры данных. Если традиционные языки для обучения — Pascal и Basic — несут мало практической пользы, то JavaScript — рабочая лошадка.
Начинать с JavaScript хорошо и потому, что синтаксически он похож на великий и ужасный язык С. Изучив JavaScript, получишь базовое представление обо всех «сиобразных» языках: С++, C#, Java, PHP
Они задают тренд в своих областях и весьма популярны, поэтому для новичка важно познакомиться с синтаксисом С
Программа на JavaScript — это простой текст. Писать на JavaScript можно в любом текстовом редакторе.
В пределах своей страницы JavaScript — Бог
Таблицы совместимости
JavaScript – это развивающийся язык, в который постоянно добавляется что-то новое.
Посмотреть, какие возможности поддерживаются в разных браузерах и других движках, можно в следующих источниках:
- http://caniuse.com – таблицы с информацией о поддержке по каждой возможности языка. Например, чтобы узнать, какие движки поддерживают современные криптографические функции, посетите: .
- https://kangax.github.io/compat-table – таблица с возможностями языка и движками, которые их поддерживают и не поддерживают.
Все эти ресурсы полезны в ежедневной работе программиста, так как они содержат ценную информацию о возможностях использования языка, их поддержке и так далее.
Пожалуйста, запомните эти ссылки (или ссылку на эту страницу) на случай, когда вам понадобится подробная информация о какой-нибудь конкретной возможности JavaScript.
Как JavaScript отличается от других языков программирования?
Причина, по которой JavaScript является одним из самых популярных языков программирования, его универсальность. К слову, много разработчиков обращаются к языку программирования JavaScript как к основному, а к другим языкам только, если им потребуется что-то более специфическое.
Давайте посмотрим на несколько популярных языков программирования:
| JavaScript | JavaScript или сокращённо JS создан для добавления интерактивности на сайте. Скрипты запускаются в браузере пользователя, а не на сервере и обычно обращаются к библиотекам третьей стороны для обеспечения более расширенных функций без надобности каждый раз писать этот код разработчикам. |
| HTML | Сокращённо от «Hypertext Markup Language», HTML — это основной язык программирования для веб, формирующий строительные блоки веб-страницы. Пример: HTML тэги, включая <p> для параграфа и <img> для изображений. |
| PHP | PHP — язык стороны сервера в отличие от JavaScript, который запускается на компьютере клиента. Его можно чаще всего встретить в системах управления контентом основанных на PHP как, например, WordPress, но он также широко используется для создания бэкенда, так как предоставляет удобные способы передачи информации в и из базы данных. |
| CSS | CSS — сокращение от «Cascading Style Sheets» и позволяет веб-мастерам задать стили и определить как отображается различный тип контента. Вы можете делать это вручную для каждого элемента HTML, но с применением CSS вы убережёте себя от необходимости повторять способ отрисовки элементов каждый раз при их появлении. |
Если мы сравним программирование со строительством дома, то HTML будет задавать структуру дома и где будут расположены стены и двери, в то время как CSS будет отвечать для обои и отделку, которые украшают дом, чтобы сделать его более привлекательным. JavaScript добавляет удобство и означает, что вы можете включить свет и открыть двери. Вы можете обойтись и без этого, но есть риск того, что ваш сайт будет выглядеть и вести себя как «привет из» 1995 года.
Справочники
-
MDN (Mozilla) JavaScript Reference – это справочник с примерами и другой информацией. Хороший источник для получения подробных сведений о функциях языка, методах встроенных объектов и так далее.
Располагается по адресу https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference.
Хотя зачастую вместо их сайта удобнее использовать какой-нибудь интернет-поисковик, вводя там запрос «MDN », например https://google.com/search?q=MDN+parseInt для поиска информации о функции .
-
MSDN – справочник от Microsoft, содержащий много информации, в том числе по JavaScript (который там часто обозначается как JScript). Если вам нужно найти что-то специфическое по браузеру Internet Explorer, лучше искать там: http://msdn.microsoft.com/.
Так же, как и в предыдущем случае, можно использовать интернет-поиск, набирая фразы типа «RegExp MSDN» или «RegExp MSDN jscript».
Локаль
Локаль – первый и самый важный аргумент всех методов, связанных с интернационализацией.
Локаль описывается строкой из трёх компонентов, которые разделяются дефисом:
- Код языка.
- Код способа записи.
- Код страны.
На практике не всегда указаны три, обычно меньше:
- – русский язык, без уточнений.
- – английский язык, используемый в Англии ().
- – английский язык, используемый в США ().
- – китайский язык (), записываемый упрощённой иероглифической письменностью (), используемый в Китае.
Также через суффикс можно указать расширения локалей, например – тайский язык (), используемый в Таиланде (), с записью чисел тайскими буквами (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) .
Стандарт, который описывает локали – RFC 5464, языки описаны в IANA language registry.
Все методы принимают локаль в виде строки или массива, содержащего несколько локалей в порядке предпочтения.
Если локаль не указана или – берётся локаль по умолчанию, установленная в окружении (браузере).
– вспомогательная настройка, которую тоже можно везде указать, она определяет способ подбора локали, если желаемая недоступна.
У него два значения:
- – означает простейший порядок поиска путём обрезания суффикса, например → → → локаль по умолчанию.
- – использует встроенные алгоритмы и предпочтения браузера (или другого окружения) для выбора подходящей локали.
По умолчанию стоит .
Если локалей несколько, например то пытается подобрать наиболее подходящую локаль для первой из списка (китайская), если не получается – переходит ко второй (русской) и так далее. Если ни одной не нашёл, например на компьютере не совсем поддерживается ни китайский ни русский, то используется локаль по умолчанию.
Как правило, является здесь наилучшим выбором.
Javascript: примеры кода
Начнем с простого, вывод надписи в документе. Перед написанием обязательно добавьте специальные теги.
Между ними написать код. Для записи текста и последующего показа используем write. Полностью будет выглядеть вот так.
Глобальное свойство document ссылается на структуру портала. Он способствует взаимодействию с тегами и атрибутами, внутри всего документа. В нашем случае вызывая write, мы записываем в теги body сообщение “Hello World!”. Чтобы вызвать конкретный тег, назначьте атрибуту id название, например, mess.
Используйте getElementById(id) – вместо id указывают имя атрибута. Потом через точку запишите innerHTML и присвойте ему, знак равно, сообщение Hello World!
Заменив строчку из предыдущего скрипта на эту document.getElementById(“mess”).innerHTML=”Hello world!”;, появится ошибка в консоли
Всё дело в том, что сначала грузится js-сценарии, а потом остальной документ. Для избежания подобных проблем, следует обернуть в скобки вывод сообщения в window.onload, тем самым назначив приоритеты, для загрузки полностью страницы, а уже потом то что находится в фигурных скобках onload.
javascript примеры кода.
Переменные являются обязательными при написании серьезных приложений, они могут хранить временные значения: цифры, символы, название и т.д. Обозначаются переменные словом var или let, дальше следует название переменной и значение.
Вот как это выглядит:
let a = 5;
Типы переменных, которые чаще всего используются:
- целые
- числа с плавающей точкой
- строка
- логическое выражение.
Дальше образец всех четырёх типов:
Нередко бывают ситуации, когда необходимо выполнить сценарий, при определённых условиях. Например, сравнить вводимую информацию пользователя и если строка пустая, вывести сообщения. За это отвечает условный оператор if else.
Когда требуется проверить сразу несколько условий, конечно можно воспользоваться if else. но рекомендуется switch case.
Объект math вызывается для выполнения математических операций. Например, чтобы узнать число Pi, достаточно записать вот так Math.PI. Для выполнения остальных решений используются:
Разумеется, это не весь список, но этого достаточно, для решения практически любых задач.
Dom запросы осуществляют поиск по html документу и возвращают первый похожий тег, обозначенный в скобках querySelector. После получения над ним можно применить действие. Например, сменить цвет, как показано на рисунке.
Первая строка закрашивает блок в красный цвет, селектор делает запрос по классу. Во втором случае перекрасится контейнер номер два. Третий выбор сразу по двум параметрам .block3 и .three и четвёртый изменение цвета последнего контейнера.
При разработке, довольно часто приходится сталкиваться с ситуациями, когда активация определённых элементов ресурса должно происходить с помощью клавиатуры или мышки. Для этих целей используются слушатели событий addEventListener. На него можно повесить функцию, которая сработает при нажатии кнопки на клавиатуре или мыши. Для наглядности показано на рисунке.
На блоге иногда необходимо при нажатии кнопки, создать новый тег и внести туда информацию. Для этих целей предусмотрено createElement и addChild, отвечающие за создание и добавление. Другая команда removeChild удаляет dom-узел.
Получив ссылку на дочерний элемент, можно удалить тег по идентификатору elem.children.remove, где n номер тега который нужно удалить. Помимо, добавления dom-узлов, есть похожие функции для создание текстов createTextNode. Весь список, показан на скриншоте ниже.
Чего НЕ может JavaScript в браузере?
Возможности JavaScript в браузере ограничены ради безопасности пользователя. Цель заключается в предотвращении доступа недобросовестной веб-страницы к личной информации или нанесения ущерба данным пользователя.
Примеры таких ограничений включают в себя:
-
JavaScript на веб-странице не может читать/записывать произвольные файлы на жёстком диске, копировать их или запускать программы. Он не имеет прямого доступа к системным функциям ОС.
Современные браузеры позволяют ему работать с файлами, но с ограниченным доступом, и предоставляют его, только если пользователь выполняет определённые действия, такие как «перетаскивание» файла в окно браузера или его выбор с помощью тега .
Существуют способы взаимодействия с камерой/микрофоном и другими устройствами, но они требуют явного разрешения пользователя. Таким образом, страница с поддержкой JavaScript не может незаметно включить веб-камеру, наблюдать за происходящим и отправлять информацию в ФСБ.
-
Различные окна/вкладки не знают друг о друге. Иногда одно окно, используя JavaScript, открывает другое окно. Но даже в этом случае JavaScript с одной страницы не имеет доступа к другой, если они пришли с разных сайтов (с другого домена, протокола или порта).
Это называется «Политика одинакового источника» (Same Origin Policy). Чтобы обойти это ограничение, обе страницы должны согласиться с этим и содержать JavaScript-код, который специальным образом обменивается данными.
Это ограничение необходимо, опять же, для безопасности пользователя. Страница , которую открыл пользователь, не должна иметь доступ к другой вкладке браузера с URL и воровать информацию оттуда.
-
JavaScript может легко взаимодействовать с сервером, с которого пришла текущая страница. Но его способность получать данные с других сайтов/доменов ограничена. Хотя это возможно в принципе, для чего требуется явное согласие (выраженное в заголовках HTTP) с удалённой стороной. Опять же, это ограничение безопасности.
Подобные ограничения не действуют, если JavaScript используется вне браузера, например — на сервере. Современные браузеры предоставляют плагины/расширения, с помощью которых можно запрашивать дополнительные разрешения.
Заключение
Инструкторы на курсе «JavaScript с нуля» посоветуют лучшие инструменты и помогут разобраться с любыми вопросами. Это практический 4-месячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтенд для интерактивного веб-проекта и положить кейс к себе в портфолио.
Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования. Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.
Курс «JavaScript с нуля»
Практический 4-х месячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтэнд для интерактивного веб-проекта и положить кейс к себе в портфолио.
- Живая обратная связь с преподавателями
- Неограниченный доступ к материалам курса
- Стажировка в компаниях-партнёрах
- Дипломный проект от реального заказчика
- Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы
