Введение в программирование на Javascript

Введение

История

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 дает ряд преимуществ:

  • Код HTML становится проще и можно отделить содержимое от поведения;
  • Не нужно поддерживать один и тот же код для разных страниц;
  • При использовании кода несколькими страницами он кешируется браузером и его не требуется повторно скачивать.
  • Можно использовать код со сторонних сервисов, например, библиотеки.
Необязательные атрибуты элемента script

Атрибут 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:. Этот специальный тип протокола обозначает, что тело URL-адреса представляет собою произвольный JavaScript-код, который должен быть выполнен интерпретатором JavaScript. Он интерпретируется как единственная строка, и потому инструкции в ней должны быть отделены друг от друга точками с запятой.

<a href="javascript:alert(new Date().toLocaleTimeString());">
Сколько времени?
</a>

Комментарии

Комментарии в Javascript задаются обычным способом для Си-подобных языков:

// Это однострочный комментарий 
alert(""); // Все, что после двух слешей является комментарием

/*
   Это
   многострочный
   комментарий
*/

Взаимодействие с пользователем

alert

Метод alert() выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт кнопку «ОК».

alert('Hello, World!');

Если строка, которую хотим указать очень длинная, и мы хотим сделать переход на новую строку, то нужно использовать символ '\n'.

alert('Привет студентам\n и преподавателям!');

confirm

Метод confirm() служит для получения однозначного ответа на простой вопрос. Данный метод выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт одну из кнопок «ОК» или «ОТМЕНА». Результатом будет true при нажатии OK и false – при Отмена(Esc).

var result=confirm('Вы действительно хотите удалить данные?');
alert(result);

prompt

Метод 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>

Задачи

Задача 1

Запросите имя пользователя и выведите его посредством внешнего скрипта.

Задача 2

В примере ниже подключены три скрипта 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>

Задача 3

Запросите имя пользователя и выведите его в консоль.

Задача 4

Запросите имя пользователя и выведите его в абзаце.

Ответы