Вступ до JavaScript

Сценарії, які виконуються на стороні клієнта.........................................................................................2

Що таке JavaScript......................................................................................................................................2
Історія створення JavaScript......................................................................................................................3
Можливості JavaScript...............................................................................................................................4
Тег noscript..................................................................................................................................................6
Підключення в HTML-документи.............................................................................................................7
Основи синтаксису.....................................................................................................................................7
Реєстрозалежність.................................................................................................................................8
Коментарі...............................................................................................................................................8
Ключові та зарезервовані слова...........................................................................................................9
Змінні........................................................................................................................................................10
З а в д а н н я ........................................................................................................................................10
Константи..................................................................................................................................................13
Літерали....................................................................................................................................................14
Типи даних................................................................................................................................................14
Діалогові вікна.........................................................................................................................................16
alert........................................................................................................................................................16
confirm...................................................................................................................................................16
prompt...................................................................................................................................................18
З а в д а н н я ........................................................................................................................................20
Сучасний стандарт, "use strict"...............................................................................................................20
Директива use strict.............................................................................................................................21
Домашнє завдання..................................................................................................................................21
Сценарії, які виконуються на стороні
клієнта

Що таке JavaScript
Большинство рядовых пользователей столкнулись с WWW в середине 90-х годов.
Прошло еще совсем немного времени, и многие из них осознали тот,
несомненно, приятный факт, что они могут создавать web-страницы
самостоятельно!

Что же приятного в этой возможности? Давайте трезво взглянем на вещи. Для

того, чтобы заявить о себе если не всему миру (будем скромнее), то
определенному широкому кругу людей, можно воспользоваться либо радио, либо
телевидением, либо прессой. В любом из вышеперечисленных случаев
необходимо привлечь к решению задачи группу специалистов, обладающих
необходимыми знаниями в выбранной области. Можно, конечно, обойтись и без
специалистов, если вы сами специалист. Но есть и еще ряд "проблем":
оборудование и система распространения. Сделаем один простой вывод: для
создания и распространения информации с помощью вышеперечисленных
средств необходимо как минимум очень много денег.

C внедрением www "в массы" ситуация на этом фронте кардинально изменилась.

Изучение языка разметки, при помощи которого создавались web-страницы -
HTML, оказалось по силам практически каждому. HTML поддерживается
мощнейшей системой распространения - Internet. А для размещения страницы
(сайта) в Internet в наше время денег или совсем не требуется, или их нужно
сравнительно немного (в последнем случае возможности по созданию и
обслуживанию web-страницы значительно расширяются).
Спустя еще некоторое время жестокая реальность расставила "все точки над ё".
Оказалось, что для создания действительно привлекательного и часто
посещаемого web-узла одних знаний HTML просто недостаточно. Кроме
интересного, полезного содержания, узел должен обладать приятным
оформлением, а для этого необходим неплохой художественный вкус, если не
соответствующее образование. Но, как показывает практика, и этого
недостаточно. Вам, наверняка, известен тот прискорбный факт, что одна и та
же web-страница может по разному выглядеть в браузерах различных
производителей и даже в различных версиях браузера одного и того же
производителя. Таким образом, для создания полноценной страницы и
обеспечения межбраузерной совместимости недостает еще одного звена. Именно
этим звеном и является JavaScript.

JavaScript является языком создания клиентских сценариев (или скриптов). Это

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

Історія створення JavaScript

Прообраз JavaScript - LiveScript был разработан компанией Netscape.
Ожидалось, что LiveScript существенно расширит возможности HTML и станет
частичной альтернативой CGI-сценариям ( CGI - Common Gateway Interface -
технология, позволяющая выполняемому на сервере программному модулю
генерировать web-страницы, используя при этом внешние хранилища
информации, например - базы данных или файлы). В дальнейшем компания
Netscape начала работать с компанией Sun - создателем Java - над созданием
нового языка сценариев, по синтаксису и семантике тесно связанным с Java.
Отсюда и новое название - JavaScript.

С момента своего появления (декабрь 1995 г.) язык JavaScript имел

существенную поддержку в лице ведущих производителей, в числе которых
Apple, Borland, Sybase, Informix, Oracle. Digital, HP и IBM. JavaScript продолжает
развиваться, внедряясь не только в современные браузеры, но и в приложения,
созданные различными компаниями.

Немного позже, понимая всю важность создания Web-сценариев, Microsoft

решила поддержать JavaScript. Однако компания Netscape предпочла передать
Microsoft лишь только лицензию на право использования технологии. На основе
общедоступной документации в Microsoft был создан "перепроектированый"
JavaScript - JScript, поддерживаемый Internet Explorer 3.0 и выше. JScript 1.0
плохо совместим с JavaScript 1.1, используемым Netscape Navigator 3.0 и более
поздними браузерами. В конечном итоге множество версий и различных
хитростей, характерных для того или иного браузера, стали причиной головной
боли для разработчиков Web-сайтов, использующих JavaScript.

К счастью, огорченные разработчики сценариев смогли вздохнуть свободно.

Компании Netscape, Microsoft и другие производители решили подогнать язык
под стандарты ЕСМА (European Computer Manufactureres Association). В тот
период ЕСМА составила спецификацию языка - ECMAScript, что поддержали все
производители. Хотя стандарты ЕСМА оказывают существенную помощь, все же
компании Netscape и Microsoft продолжают развивать языки JavaScript и JScript,
выходя при этом за пределы стандартов.

Помимо JScript, еще одним конкурентом JavaScript является VBScript, созданный

с целью упрощения Web-разработок на Visual Basic (VB). VBScript является
подмножеством языка Visual Basic. Из-за отсутствия поддержки со стороны
Netscape, VBScript используется для интрасетей. Он пользуется большой
популярностью у пользователей Microsoft Internet Explorer.

Несмотря на появление VBScript, JavaScript стал стандартным языком сценариев

для Web (и не только клиентских).

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

Итак, что происходит, когда браузер загружает HTML страницу? В самом

простом случае происходит простой процесс - построчное считывание файла,
н а ч и н а я с т э г а <html> ( о б ы ч н о ) в н а ч а л е и з а к а н ч и в а я </html> в к о н ц е . О д н а к о
браузер может прервать этот процесс, в зависимости от содержания страницы. К
п р и м е р у , е с л и в т е л е с т р а н и ц ы б у д е т в с т р е ч е н э л е м е н т <img src="..." />,
браузер отправит к серверу запрос на получение изображения, адрес которого
у к а з а н а т р и б у т о м src.

Приблизительно то же самое происходит и в тех случаях, когда браузер

сталкивается с командами клиентского сценария. JavaScript, как и все
клиентские сценарии является интерпретируемым языком программирования.
В отличии от C++, средствами которого можно написать программу,
компилируемую в исполняемый файл, команды интерпретируемого языка
выполняются другой программой (в нашем случае браузером). Текст сценария
записывается непосредственно в HTML странице и отправляется вместе с ней на
компьютер пользователя. При разборе страницы, браузер, встречая команды
сценария, просто выполняет их. Этот принцип имеет множество достоинств и
ряд ограничений, которые рассматриваются ниже.
Примечание: текст программы, написанный на любом компилируемом языке проходит два
основных этапа - компиляцию и связывание, в результате чего образуется исполняемый модуль.
В интерпретируемых языках эти этапы отсутствуют. Текст программы просто выполняется. Оба
подхода имеют ряд достоинств и недостатков. Так, например, скрипты выполняются
значительно медленнее скомпилированных и загруженных в память компьютера машинных
команд.

Итак, какие основные цели преследует любой создатель web-страницы, внедряя

в нее сценарии:

 добавление "интеллекта" в страницу (определение типа и версии

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

При помощи JavaScript нельзя:

 вызывать функции программного интерфейса приложений операционной

системы - API;
 управлять распределением оперативной памяти;
 получать доступ к файлам и др. системным ресурсам сервера;
 получать доступ к файлам (кроме файлов предпочтений - cookie, которые
рассматриваются в курсе позже) и др. системным ресурсам клиента;
 работать с базой данных;
Если трезво взглянуть на вещи, то некоторые ограничения JavaScript можно
считать его достоинствами. К примеру, возьмем вопрос получения доступа к
файлам и др. системным ресурсам клиента. Чувствовали бы вы себя уютно,
понимая, что чуть ли не любая интернет-страница может "покопаться" у вас на
жестком диске или в реестре? Не думаю... Так что ограничения описанные выше
являются вполне обоснованными.

Многие из перечисленных выше ограничений можно преодолеть при помощи

JavaScript с использованием технологии создания серверных сценариев ASP или
[Link], однако данный вопрос выходит за рамки нашего курса и нами
рассмотрен не будет. Мы сосредоточим все свое внимание на создании и
использовании клиентских сценариев, а это, поверьте, достаточно объемный и
иногда даже сложный материал, несмотря на простоту и доступность JavaScript.

Тег noscript
Контейнер <noscript> показывает свое содержимое, если браузер не
поддерживает работу со скриптами или их поддержка отключена пользователем. В
остальных случаях браузер игнорирует этот тег и все, что располагается внутри него.
<html>
<head>
<title>Тег NOSCRIPT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
alert("Hello, world!");
</script>
</head>
<body>
<noscript><p>Ваш браузер не поддерживает скрипты!</p></noscript>
</body>
</html>
Підключення в HTML-документи
Підключення скріпта
Вставити js в html сторінку можна двома способами:
1. підключити зовнішній файл;
2. вставити код всередині html сторінки.
<html>
<head>
<script type="text/javascript" src="js/[Link]"></script>

</head>
<body>
<script type="text/javascript">
текст сценария
</script>
...
</body>
</html>

type="text/javascript" – тепер необов’язково писати

Основи синтаксису
Реєстрозалежність

Коментарі
//это комментарий. То, что видите вы, но "не видит" скрипт

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

То, что видите вы, но "не видит" скрипт*/
Ключові та зарезервовані слова
Змінні
З мінна – ділян ка опе р ат ив н ої па м’ят і, в як ій мож у ть з бе р ігат ис я з на ч е нн я.

Ідентифікатор - ім’я змінної, функції, константи.

Завдання
1. Сума, Різниця, Добуток, Частка
Змінна 1 =
Змінна 2 =
Сума:
Різниця:
Добуток:
Частка:
2. Середнє арифметичне двох чисел.

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

Чтобы создать переменную надо написать

var name;

где var - обязательное слово, которое говорит о том, что перед нами переменная;
name - имя переменной. Имя переменной может быть каким угодно, т.е. любое слово. Если
слов не достаточно, то к ним можно дописывать цифры. Например,

var name1;

var x23;

var Name1;

Но стоит помнить о том, что:

• имя не может начинаться с цифры,

• одинаковые имена, записанные с большой и малой букв, - это имена разных
переменных.
В js четыре типа данных:
• числа;
• строки;
• логический тип (принимает значения "true/false" - истина/ложь);
• объекты (о них поговорим чуть позже).

Тип определяется, когда мы говорим, чему равна переменная. Например,

name1 = "Hello"; //строковый тип

x23 = 5;//числовой тип

Name1 = true;//логический тип
Константи
Константа – область оперативної пам’яті, де зберігається інформація, що не підлягає зміні.

const myBirthday = '18.04.1982';

Визначити скільки секунд в високосному році.

Константы в верхнем регистре

Например, сделаем константы для различных цветов в «шестнадцатеричном формате»:

const COLOR_RED = "#F00";

const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...когда нам нужно выбрать цвет

let color = COLOR_ORANGE;
alert(color); // #FF7F00
Літерали
Літерали – фіксовані значення, які програма не може змінити.
5 – числовий літерал

2.2 – літерал з плаваючою точкою

‘d’ – символьний літерал

“Hello” – стрічковий літерал

true – логічний літерал

Типи даних
Діалогові вікна
alert
Если нам надо что-то сообщить пользователю, то можно воспользоваться такой записью

аlert (“ Сообщение пользователю”);

Об этом уже было сказано на первом занятии.

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

confirm
Если у нас есть вопрос к пользователю и нас устроит ответ «да/нет», то можно писать так

confirm(“Вопрос?”);

Результатом такого вывода будет окно, представленное ниже

Нажатие кнопки «ОК» значит, что пользователь отвечает «Да», «Отмена» –

«Нет». Ответ пользователя можно сохранить в переменную логического типа.
Например, так

var res;
res = confirm("Вопрос?");

Далее модно обработать ответ. Делается это с помощью ветвления

if (res == true) {

//что делать, если пользователь сказал «Да»

}
else {
//что делать, если пользователь сказал «Нет»
}

Рассмотрим задачу
Вывести на экран сообщение с вопросом типа «Рим – столица Италии?». В
зависимости от ответа пользователя, вывести на экран «Вы правы/неправы».
Пишем код
var res; //переменная для хранения ответа

res = confirm("Рим столица Италии?");//задаем вопрос и сохраняем ответ

if (res == true) {//пользователь ответил "Да"

alert("Вы правы");

else {//иначе - пользователь ответил "Нет"

alert("Вы ошибаетесь");

Открываем нашу страницу в браузере. Результат работы скрипта - на рисунке ниже

Рассмотрим более сложную задачу

Создать тест с вопросами типа «Рим – столица Италии?». Посчитать количество
правильных ответов, вывести сообщения с результатами теста.
Пишем код
var mark = 0;//количество правильных ответов - оценка за тест

var res; //ответ на вопрос

res = confirm("Рим в Италии?")//задаем вопрос

if (res)//если пользователь ответил "Да"

{ mark++; } //это правильный ответ - плюсуем баллы

res = confirm("Фильм о Гарри Поттере состоит из 8 частей?")

 if (res)

{ mark++; }

res = confirm("В радуге 8 цветов?")

if (!res)//пользователь ответил "Нет"

{ mark++; } //это правильный ответ - плюсуем баллы

res = confirm("Вход в Нарнию возможен через шкаф?")

if (res)

{ mark++; }

res = confirm("HTML - это язык программирования?");

if (!res)

{ mark++; }

alert("Тест окончен. Всего вопросов - 5. Правильных ответов - " +

mark);//выводим результат - количество правильных ответов

Обратите внимание на запись условия в ветвлении. Так как наша переменная принимает
значение истина или ложь, то можно ее значение не сравнивать с true/false. То есть в
данном случае
if (res) это то же самое, что и if (res==true);

if (!res) это то же самое, что и if (res!=true) или if (res==false)

prompt
Когда надо получить от пользователя какие-то данные, а не просто «да/нет»,
можно использовать такую запись
var x = 0;

prompt("Сообщение с вопросом", x);

где x – значение по умолчанию, которое будет введено, если пользователь сам не

написал ответ. На экране это выглядит так

Значение по умолчанию может быть задано не только как переменная, но и в явном виде.
Например, так
prompt("Сообщение с вопросом", 2013);

или так
prompt("Сообщение с вопросом", "ответ");
или вообще не задано
prompt("Сообщение с вопросом");

В последнем случаи окно будет выглядеть так

Чтобы сохранить ответ, надо записать так

var x = 0;

var res;

res = prompt("Сообщение с вопросом", x);

Если пользователь нажмет «ОК», в переменной res будет ответ пользователя (или
значение по умолчанию). Если нажмет «Отмена», то в переменную запишется null – это
можно понимать как «ничего», «пусто». Дальше полученный ответ можно обработать или
просто вывести на экран

alert("Ваш ответ " +res);

Чтобы понять, как можно обработать ответ, разберем такую задачу.

С помощью prompt узнать возраст пользователя. В зависимости от ответа, вывести
сообщение о совершеннолетии.
Для решения сразу оговорим, что обрабатывать будем ветвлением, так как нужно
сравнить ответ с «18».
Пишем код
var age;//возраст пользователя

age = prompt("Сколько Вам лет?", 13);//задаем вопрос и ожидаем ответ

if (age >= 18) {//если пользователю 18+

alert("Вы совершеннолетний");

else {//если пользователю меньше 18

alert("Вы несовершеннолетний");
}

Открываем нашу страницу в браузере. Результат работы скрипта - на рисунке ниже

 --------------------Сума двох чисел
//+ переконвертовує стрічку в число

var num1 = +prompt("Enter first number");

var num2 = +prompt("Enter second number");

var sum = num1 + num2;

alert(sum);

Завдання
1. Вводим 3 числа, визачити суму і добуток чисел.
2. Написати програму, яка переводить гривні в долари, євро, польські злоті(вводим курс).
3. Вводим ціну товару, вводим знижку, виводить ціну товару зі знижкою.

Сучасний стандарт, "use strict"

Очень долго язык JavaScript развивался без потери совместимости. Новые возможности
добавлялись в язык, но старые – никогда не менялись, чтобы не «сломать» уже существующие
HTML/JS-страницы с их использованием.

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

Так было до появления стандарта ECMAScript 5 (ES5), который одновременно добавил новые
возможности и внёс в язык ряд исправлений, которые могут привести к тому, что старый код,
который был написан до его появления, перестанет работать.
Чтобы этого не случилось, решили, что по умолчанию эти опасные изменения будут выключены,
и код будет работать по-старому. А для того, чтобы перевести код в режим полного соответствия
современному стандарту, нужно указать специальную директиву use strict.

Эта директива не поддерживается IE9-.

Директива use strict

Директива выглядит как строка "use strict"; или 'use strict'; и ставится в начале
скрипта.

Например:

"use strict";

// этот код будет работать по современному стандарту ES5

...
Отменить действие use strict никак нельзя

Не существует директивы no use strict или подобной, которая возвращает в старый режим.

Если уж вошли в современный режим, то это дорога в один конец.

use strict для функций

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

Домашнє завдання
1. Знайти периметр і площу прямокутника, якщо сторона a = 4, b = 5.
2. Знайти середнє арифметичне 3 чисел, a = 10, b = 15, c = 20.
3. Знайти суму і добуток 3 довільних чисел.
4. Знайти і вивести квадрат(число в 2 степені) будь-якого числа.
5. Користувач вводить, скільки Мегабайт(МБ) займає 1 фільм. Програма виводить,
скільки дискет треба для запису 3 фільмів(в одну дискету можна записати 1.44 МБ).