Javascript произносится как /ДжаваСкрипт/ был создан в компании Netscape еще в начале 90-х. Первоначально язык назывался Mocha, затем он был переименован в LiveScript. На синтаксис оказали влияние языки Си и Java, и, поскольку Java в то время было модным словом, 4 декабря 1995 года LiveScript переименовали в JavaScript, получив соответствующую лицензию у Sun. Название «JavaScript» является торговой маркой, зарегистрированной компанией Sun Microsystems (сейчас принадлежит Oracle), и используется для обозначения реализации языка, созданной компанией Netscape (сейчас Mozilla). Из-за юридических проблем с торговыми марками стандартизованная версия языка получила название «ECMAScript» произносится как /ЭСиЭмЭйСкрипт/, описывается стандартом ECMA-262 (в 2020 году вышла 11 версия стандарта). ECMA - Европейская Ассоциация производителей компьютеров. Из-за тех же юридических проблем версия языка от компании Microsoft получила официальное название «JScript». Однако на практике все эти реализации обычно называют JavaScript.
Примечание. В веб-программировании применялись скриптовые языки не только на базе стандарта ECMAScript, но и другие. Так, компания Microsoft, использовала скриптовый язык VBScript для браузера Internet Explorer. Однако сейчас он используется в основном для автоматизации администрирования систем Windows, как замена командных файлов .bat, .cmd.
Стандарту ECMAScript соответствует не только язык Javascript, но и другие, например, ActionScript.
Самый простой способ добавления JavaScript-кода на страницу - использовать теги <script><script>
, которые рекомендуется, но не обязательно, помещать внутри контейнера <head>
или в конце контейнера <body>
. Контейнеров <script>
в одном документе может быть сколько угодно. Атрибут «type='text/javascript'»
указывать необязательно, данное значение используется по умолчанию.
<script>
alert('Hello, World!');
</script>
Тег <script>
поддерживает атрибут src, который определяет URL-адрес файла, содержащего JavaScript-код. Используется он следующим образом:
<script src="../js/util.js"></script>
Использование тега с атрибутом src дает ряд преимуществ:
Атрибут type
указывает язык сценариев, по умолчанию получает значение text/javascript
(в этом случае его лучше не указывать), но можно задать и иной, например, если есть необходимость использовать нестандартный язык сценариев, такой как VBScript корпорации Microsoft (который поддерживается только в Internet Explorer):
<script type="text/vbscript">
</script>
В старых браузерах вместо атрибута type
использовался атрибут language
. Атрибут language
считается устаревшим и не должен более использоваться.
Примечание. Когда веб-браузер встречает элемент <script>
с атрибутом type
, значение которого он не может распознать, он пытается проанализировать элемент, но не отображает и не выполняет его содержимое. Это означает, что элемент <script>
можно использовать для встраивания в документ произвольных текстовых данных: достаточно просто указать значение атрибута type
, означающее, что данные не являются выполняемым программным кодом.
Раньше указывается необязательный атрибут charset
, используемый вместе с src
для указания используемой кодировки внешнего файла. Сейчас нормой считается использование кодировки UTF-8.
Когда поддержка JavaScript впервые появилась в веб-браузерах, не существовало никаких инструментов обхода и управления структурой содержимого документа. Единственный способ, каким JavaScript-код мог влиять на содержимое документа, – это генерировать содержимое в процессе загрузки документа. Делалось это с помощью метода document.write()
. В примере ниже показан стиль написания javascript-кода в 90-е годы.
<!DOCTYPE html>
<html lang="ru">
<head>
<style>
td{
font-size:20px;
padding:5px;
}
</style>
<meta charset="UTF-8">
<script>
document.write('<h1>Таблица умножения</h1>');
document.write('<table><tr><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>');
document.write('<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>');
for (var i=1; i<=10; i++){
document.write('<tr><td>'+i+'</td>');
for (var j=1; j<=10; j++){
document.write('<td>'+i*j+'</td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
</head>
<body>
</body>
</html>
Использование метода document.write()
более не считается хорошим стилем программирования, но его применение по-прежнему возможно. Когда механизм синтаксического анализа разметки HTML встречает элемент <script>
, он должен, по умолчанию, выполнить сценарий, прежде чем продолжить разбор и отображение документа. Это не является проблемой для встроенных сценариев, но если сценарий находится во внешнем файле, на который ссылается атрибут src
, это означает, что часть документа, следующая за сценарием, не появится в окне браузера, пока сценарий не будет загружен и выполнен.
Такой синхронный, или блокирующий, порядок выполнения действует только по умолчанию. Тег <script>
может иметь атрибуты defer
и async
, которые определяют иной порядок выполнения сценариев. Это логические атрибуты – они не имеют значения; они просто должны присутствовать в теге <script>
. Эти атрибуты принимаются во внимание, только когда используются вместе с атрибутом src
.
<script defer src="deferred.js"></script>
<script async src="async.js"></script>
Оба атрибута, сообщают браузеру, что данный сценарий не генерирует содержимое документа, и что браузер может продолжать разбор и отображение документа, пока сценарий загружается.
Атрибут defer
заставляет браузер отложить выполнение сценария до момента, когда документ будет загружен, проанализирован и станет готов к выполнению операций. Отложенные сценарии выполняются в порядке их следования в документе.
Атрибут async
заставляет браузер выполнить сценарий, как только это станет возможно, но не блокирует разбор документа на время загрузки сценария. Очерёдность выполнения скриптов не гарантируется.
Javascript-код может располагаться внутри тега, что используется для обработчика событий.
<button onclick="alert('Hello, World!');">Нажми меня!</button>
Javascript-код может указываться в URL-адресе вслед за спецификатором псевдопротокола javascript:
. Этот специальный тип протокола обозначает, что тело URL-адреса представляет собою произвольный JavaScript-код, который должен быть выполнен интерпретатором JavaScript. Он интерпретируется как единственная строка, и потому инструкции в ней должны быть отделены друг от друга точками с запятой.
<a href="javascript:alert(new Date().toLocaleTimeString());">
Сколько времени?
</a>
Комментарии в Javascript задаются обычным способом для Си-подобных языков:
// Это однострочный комментарий
alert(""); // Все, что после двух слешей является комментарием
/*
Это
многострочный
комментарий
*/
Метод alert()
выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт кнопку «ОК».
alert('Hello, World!');
Если строка, которую хотим указать очень длинная, и мы хотим сделать переход на новую строку, то нужно использовать символ '\n'.
alert('Привет студентам\n и преподавателям!');
Метод confirm()
служит для получения однозначного ответа на простой вопрос. Данный метод выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт одну из кнопок «ОК» или «ОТМЕНА». Результатом будет true
при нажатии OK и false
– при Отмена(Esc).
var result=confirm('Вы действительно хотите удалить данные?');
alert(result);
Метод prompt()
позволяет получить некую информацию от пользователя, которую он введёт в текстовое поле. Данный метод выводит модальное окно с заголовком title
, полем для ввода текста, заполненным строкой по умолчанию default
и кнопками OK/CANCEL.
Вызов prompt
возвращает то, что ввёл посетитель – строку или специальное значение null
, если ввод отменён.
var result = prompt(title, default);
Например:
var name = prompt("Как вас зовут?", "Вася");
alert(name);
Примечание. Браузер Safari при отмене ввода возвращает не null
, а пустую строку. Если нам важен этот браузер, то пустую строку нужно обрабатывать точно так же, как и null
, т.е. считать отменой ввода.
Примечание. Второй параметр может отсутствовать. Однако при этом IE вставит в диалог значение по умолчанию undefined
. Поэтому рекомендуется всегда указывать второй аргумент:
var name = prompt("Как вас зовут?", "");
Объект Сonsole
служит для доступа к средствам отладки браузера. Работа с ним отличается в разных браузерах, но основные методы и свойства по факту поддерживаются всеми браузерами.
Чаще всего Консоль используется для вывода строк текста и других типов данных. Существует четыре категории вывода, которые вы можете создавать. Метод console.log() — отличный способ вывести отладочную информацию, не мешая пользователю.
var name = "Вася";
console.log("Имя",name);
console.log(document.body);
Чтобы увидеть вывод информации нажмите клавишу F12 и в появишемся отладочном окне выбереите вкладку Console. Кроме console.log() имеется еще 3 специализированных методов вывода, а именно: console.info(), console.warn(), console.error().
console.log("Обычный вывод");
console.info("Информация");
console.warn("Предупреждение");
console.error("Ошибка");
Имеются и множество других методов Консоли, которые не всеми браузерами поддерживаются. Например, метод console.dir()
отображает список свойств указанного объекта. Вывод представлен в качестве иерархического списка с возможностью просмотра содержимого дочерних объектов.
console.dir(document.body);
Есть множество дополнительных средств для стилизации вывода:
console.log("Можно %cразнообразно стилизовать", "color: yellow; font-style: italic;
background-color: blue; padding: 2px;", "сообщения");
console.log("Или можно группировать");
console.group();
console.log("Подуровень 2");
console.group();
console.log("Подуровень 3");
console.log("Конец подуровеня 3");
console.groupEnd();
console.log("Конец подуровня 2");
console.groupEnd();
console.debug("Опять главный уровень");
Получим, что-то вроде этого:
Очень долго язык JavaScript развивался без потери совместимости, но довольно сумбурно. Начиная с 5 версии стандарта, в языке ECMAScript имеется возможность ограничить использование некоторых свойств, доступных в языке. Это может быть сделано в интересах безопасности, во избежание уязвимости для ошибок, для улучшенного контроля ошибок.
Если добавить "use strict" в начало вашего JavaScript-кода, то Strict Mode (строгий режим) будет применен для всего кода:
"use strict";
var x=014; //Восьмеричный литерал запрещен.
//Выбросит исключение SyntaxError в Strict Mode
Кроме того, строгий режим можно включить отдельно для функции:
function myfunc() {
"use strict";
a=5; //Strict Mode выбросит исключение - запрещено
//неявно создавать глобальные переменные
}
myfunc();
Если Eval-код содержит директиву "use strict" или если вызов eval осуществляется из кода в строгом режиме, то данный код также будет выполняться в строгом режиме.
Примечание. eval()
- встроенная функция, которая обрабатывает переданную ей строку как программу на JavaScript. Часто используется для обфускации кода, сохраняющего его функциональность, но затрудняющего анализ.
Современные браузеры практически полностью поддержимвают 6 редакцию стандарта языка ECMAScript и на 99-100% 8 редакцию. Однако, до сих пор встречающийся IE9 не поддерживает строгий режим, а IE8 поддерживает только третью версию стандарта.
Старые браузеры можно заставить работать в новых режимах подключив специальные библиотеки (полифилы), например HTML5 Shim.
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js">
</script>
<![endif]-->
</head>
<body>
</body>
</html>
Запросите имя пользователя и выведите его посредством внешнего скрипта.
В примере ниже подключены три скрипта small1.js, small2.js и big.js. Если предположить, что small1.js и small2.js загружаются значительно быстрее, чем big.js – в какой последовательгости они выполнятся?
а)
<script src="small1.js"></script>
<script src="big.js"></script>
<script src="small2.js"></script>
б)
<script async src="small1.js"></script>
<script async src="big.js"></script>
<script async src="small2.js"></script>
в)
<script defer src="small1.js"></script>
<script defer src="big.js"></script>
<script defer src="small2.js"></script>
Запросите имя пользователя и выведите его в консоль.
Запросите имя пользователя и выведите его в абзаце.