Лекція 4 JavaScript. Intro

План

1. Про JavaScript. Історія. Особливості

2. Запуск JS. Вирази. Змінні. Типи даних.

3. Типи даних.

4. Оператори. Цикли.

5. Функції.

2

Що таке JavaScript

JavaScript – мова для «оживлення» веб-сторінок

JavaScript != Java

Brendan Eich

(Брендон Айк)

Технічний директор Mozilla Corporation

Автор JavaScript

Історія

• 1995 рік - створення для Netscape Navigator. Перші назви: Mocha і пізніше LiveScript.

• На випуску 1.1 назва була змінена на JavaScript.

• У 1997 році був представлений стандарт ECMAScript.

JavaScript може виконуватися не тільки в браузері, а де завгодно,

потрібна лише спеціальна програма - інтерпретатор. Процес виконання

скрипта називають «інтерпретацією».

Що вміє JavaScript

• Створювати нові HTML-теги, видаляти існуючі, змінювати стилі елементів, ховати, показувати елементи і т.п.

• Реагувати на дії відвідувача, обробляти кліки миші, переміщення курсору, натискання на клавіатуру і т.п.

• Посилати запити на сервер і завантажувати дані без перезавантаження сторінки (ця технологія називається “AJAX”).

• Отримувати і встановлювати куки, запитувати дані, виводити повідомлення ...

• ... І багато, багато іншого!

Що не вміє JavaScript

• JavaScript не може читати / записувати довільні файли на жорсткий диск, копіювати їх або викликати програми. Він не має прямого доступу до операційної системи.

• JavaScript, що працює в одній вкладці, не може спілкуватися з іншими вкладками і вікнами, за винятком випадку, коли він сам відкрив це вікно або декілька вкладок з одного джерела (однаковий домен, порт, протокол).

Особливості JavaScript:

• Повна інтеграція з HTML / CSS.

• Прості речі робляться просто.

• Підтримується всіма поширеними браузерами і включений за замовчуванням.

Діалекти JavaScript

• Язык CoffeeScript – это «синтаксический сахар» поверх JavaScript.

• Язык TypeScript сосредоточен на добавлении строгой типизации данных.

• Язык Dart интересен тем, что он не только транслируется в JavaScript, как и другие языки, но и имеет свою независимую среду выполнения, которая даёт ему ряд возможностей и доступна для встраивания в приложения (вне браузера).

Консоль розробника

• Для розробки рекомендується використовувати Chrome або Firefox.

• Для того, щоб відкрити панель розробника треба натиснути клавішу F12 (Windows) або “Cmd+Opt+J”(Mac).

Три шари вебу

HTML для змісту <p class=“warning”>There is no <em>download link</em> on this page.</p>

CSS для представлення(дизайну)

.warning { color: red; }

JavaScript для поведінки <script type=“text/javascript”> window.alert(document.getElementsByClassName(“warning”)[0].innerHTML);

</script>

Бібліотеки та фреймворки Існує велика кількість JavaScript бібліотек та фреймворків.

Деякі з них: ˗ Prototype

˗ Dojo

˗ jQuery

˗ Knockout

˗ Backbone

˗ React.js

˗ AngularJS

Запуск JS Два способи запуску скриптів: <script type=“text/javascript”>

window.alert(“JavaScript”);

</script>

<script type=“text/javascript” src=“myScript.js”></script>

<script type=“text/javascript” src=“myScript.js” defer></script>

Вирази, коментарі Вирази: Можуть бути розділені новим рядком або крапкою з комою.

alert(‘Привіт');

alert(‘Світ');

Коментарі: 2 типи.

Однорядкові: // Автор: AndersenLab

Багаторядкові: /* Опис функцій або щось

на кшталт цього */

Змінні Оголошення змінних var message;

message = 'Hello!';

message = 'World!'; // заменили значение

alert( message );

Назви(імена) змінних • Ім'я може складатися з: букв, цифр, символів $ і _

• Перший символ не повинен бути цифрою.

var myName;

var test123;

Регістр має значення

Змінні apple і AppLE - дві різні змінні.

Правила оголошення змінних

1. Ніякого трансліта. Тільки англійська. var moiTovari; var myGoods;

var cena; var price;

var ssilka; var link;

2. Використовувати короткі імена тільки для змінних «місцевого значення». 3. Змінні з декількох слів пишуться разомОсьТак. (camelCase) var borderLeftWidth;

4. Ім'я змінної має максимально чітко відповідати збереженим в ній даним.

Типи даних

˗ Число «number» var n = 123;

n = 12.345;

˗ Рядок «string» var str = "Реве та стогне Дніпр широкий";

str = ‘Одинарні лапки рівноцінні двійним';

˗ Булевий(логічний) «boolean» var checked = true; // поле формы помечено

галочкой

checked = false; // поле формы не содержит

галочки

Типи даних ˗ Спеціальне значення «null» var age = null;

˗ Спеціальне значення «undefind» var x;

alert( x ); // видасть "undefined«

˗ Об’єкти «object» var user = { name: "Вася" };

typeof Результатом typeof є рядок, що

містить тип змінної:

typeof undefined // "undefined"

typeof 0 // "number"

typeof true // "boolean"

typeof "foo" // "string"

typeof {} // "object"

Терміни

˗ Операнд – те, до чого застосовують оператори

˗ Унарний оператор

˗ Бінарний оператор

var x = 1; x = -x; alert( x ); // -1, застосували унарний мінус

var x = 1, y = 3; alert( y - x ); // 2, бінарний мінус

Арифметичні оператори

var a = "мій" + "рядок"; alert( a ); // мійрядок

alert( '1' + 2 ); // "12"

alert( 2 + '1' ); // "21"

alert( 2 - '1' ); // 1 alert( 6 / '2' ); // 3

var apples = "2"; var oranges = "3"; alert( apples + oranges ); // "23", тому що бінарний оператор додавання додає рядки

var apples = "2"; var oranges = "3"; alert( +apples + +oranges ); // 5, обидва операнди попередньо перетворені в числа

Пріоритетність. Витяг з таблиці.

Пріоритет Назва Значення

… … …

15 унарний плюс +

15 унарний мінус -

14 добуток *

14 ділення /

13 додавання +

13 віднімання -

… … …

3 присвоєння =

… … …

Оператор присвоєння var x = 2 * 2 + 1; alert( x ); // 5

var a, b, c; a = b = c = 2 + 2; alert( a ); // 4 alert( b ); // 4 alert( c ); // 4

var a = 1; var b = 2; var c = 3 - (a = b + 1); alert( a ); // 3 alert( c ); // 0

Залишок від ділення alert( 5 % 2 ); // 1, залишок від ділення 5 на 2 alert( 8 % 3 ); // 2, залишок від ділення 8 на 3 alert( 6 % 3 ); // 0, залишок від ділення 6 на 3

Інкремент/Декримент Інкремент ++ збільшує на 1:

var i = 2; i++; // более короткая запись для i = i + 1. alert(i); // 3

Декримент -- зменшує на 1:

var i = 2; i--; // более короткая запись для i = i - 1. alert(i); // 1

var i = 1; var a = ++i; // (*) alert(a); // 2

var i = 1; var a = i++; // (*) alert(a); // 1

Постфіксна форма Префіксна форма

Побітові оператори

AND(и) ( & )

OR(или) ( | )

XOR(побитовое исключающее или) ( ^ )

NOT(не) ( ~ )

LEFT SHIFT(левый сдвиг) ( << )

RIGHT SHIFT(правый сдвиг) ( >> )

ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( >>> )

Скорочена арифметика

var n = 2; n = n + 5; n = n * 2;

var n = 2; n += 5; // n=7 (аналог n = n + 5) n *= 2; // n=14 (аналог n = n * 2)

var n = 2; n *= 3 + 5; alert( n ); // 16 (n = 2 * 8)

Оператори порівняння та логічні значення

Більше / менше: a> b, a <b.

Більше / менше або дорівнює: a> = b, a <= b.

Так само a == b. Для порівняння використовується два символу рівності "=".

"Не дорівнює". У математиці він пишеться як ≠, в JavaScript - знак рівності зі знаком оклику перед ним !=.

Логічні значення

alert( 2 > 1 ); // true, вірно alert( 2 == 1 ); // false, невірно alert( 2 != 1 ); // true

alert( 0 == false ); // true

alert( 0 === false ); // false, т.к. різні типи

Суворе та не суворе порівняння

Взаємодія з користувачем

alert Синтаксис: alert(сообщение)

Приклад: alert( "Привет" );

prompt Функція prompt приймає два аргумента: result = prompt(title, default);

var years = prompt(Скільки вам років?', 100); alert('Вам ' + years + ' років!')

Взаємодія з користувачем

confirm Синтаксис:

result = confirm(question);

var isAdmin = confirm("Ви - адмін?"); alert( isAdmin );

Умовні оператори (if then else)

var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', ''); if (year != 2011) alert( 'А вот и неправильно!' );

if (year != 2011) { alert( 'А вот..' ); alert( '..и неправильно!' ); }

var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', ''); if (year < 2011) { alert( 'Это слишком рано..' ); } else if (year > 2011) { alert( 'Это поздновато..' ); } else { alert( 'Да, точно в этом году!' ); }

Оператор ?

var age = prompt('возраст?', 18); var message = (age < 3) ? 'Здравствуй, малыш!' : (age < 18) ? 'Привет!' : (age < 100) ? 'Здравствуйте!' : 'Какой необычный возраст!'; alert( message );

Цикли

var i = 0; while (i < 3) { alert( i ); i++; }

While var i = 0; do { alert( i ); i++; } while (i < 3);

do..while

var i; for (i = 0; i < 3; i++) { alert( i ); }

for

Конструкція switch var a = 2 + 2; switch (a) { case 3: alert( 'Мало' ); break; case 4: alert( 'Вірно!' ); break; case 5: alert( 'Забагато' ); break; default: alert( 'Я таких значень не знаю.' ); }

Команда break Перериває цикл

Функції function showMessage() { alert( 'Привет всем присутствующим!' ); } showMessage(); showMessage();

function showMessage() { var message = 'Привіт, я - Вася!'; // локальна змінна alert( message ); } showMessage(); // Привіт, я - Вася!' alert( message ); // помилка, бо змінна локальна

Область видимості. Локальні змінні.

Глобальні змінні.

var userName = 'Вася'; function showMessage() { userName = 'Пєтя'; // (1) присвоєння зовнішній змінній var message = Привіт, я ' + userName; alert( message ); } showMessage(); alert( userName ); // Пєтя, значення глобальної змінної змінено в функціїї

function showMessage() { message = 'Привет'; // без var! } showMessage(); alert( message ); // Привет

Неявне оголошення глобальних змінних.

Параметри функцій.

function showMessage(from, text) { // параметры from, text from = "** " + from + " **"; // тут може бути код оформлення alert(from + ': ' + text); } showMessage('Маша', 'Привіт!'); // ** Маша **: Привіт! showMessage('Маша', 'Як справи?');

function showMessage(from, text) { if (text === undefined) { text = 'текст не передан'; } alert( from + ": " + text ); } showMessage("Маша", "Привіт!"); // Маша: Привіт! showMessage("Маша"); // Маша: текст не передан

Значення за замовчуванням

return

function calcD(a, b, c) { return b*b - 4*a*c; } var test = calcD(-4, 2, 1); alert(test); // 20

return використовується для припинення виконання функції та повернення нею значення.

Вибір імені функції

showMessage(..) // префикс show, "показати" повідомлення

getAge(..) // get, "отримує" вік calcD(..) // calc, "обраховує" дискрімінант createForm(..) // create, "створює" форму checkPermission(..) // check, "перевіряє" дозвіл, повертає true/false

Завдання #3

Створити графічний інтерфейс який буде шукати набір слів,

використовуючи HTML/CSS/JS

(матеріали додаються)

або

Реалізувати будь-яку іншу аналогічну «фічу» в своєму проекті.

Посилання Підручник російською мовою:

• https://learn.javascript.ru

Довідники по JavaScript англійською:

• Mozilla Developer Network (MDN)

• MSDN – довідник від Microsoft. Там много информации, в том числе и по JavaScript (они называют его «JScript»).

• Safari Developer Library

Додаткові довідники:

• http://help.dottoro.com – довідник по HTML/CSS/JavaScript.

• http://javascript.ru/manual –довідник російською

• https://github.com/bebraw/jswiki/wiki - сборник JS библиотек

Дякую за увагу!

44