Javascript

Javascript - інтерпретована мова програмування, інтерпретатор

вбудований безпосередньо в браузер.

JavaScript - ця мова використовується всюди. Її підтримують

браузери Chrome, Firefox і Internet Explorer. Можливості JavaScript
дозволяють програмістам робити зі звичайних веб-сторінок
повноцінні інтерактивні додатка і відеоігри. Але це ще не все:
JavaScript також працює на інтернет-серверах і навіть може
використовуватися для керування роботами і іншими пристроями.

Такі сайти, як Gmail, Facebook і Twitter, використовують JavaScript для

полегшення роботи з поштою, залишати відгуки або поліпшення навігації.
Наприклад, коли ви, читаючи в Twitter повідомлення від @nostarch,
промотуєте сторінку вниз і бачите все більше і більше повідомлень, це
відбувається завдяки JavaScript.
Щоб зрозуміти, чим же такий хороший JavaScript, досить відвідати
кілька сайтів:

https://www.patatap.com/
Зайшовши на сторінку Patatap,
натискайте на різні клавіші, щоб почути
різні звуки!

https://www.cubeslam.com/
Гра CubeSlam написана цілком на
JavaScript!

http://www.jeanhelfenstein.com/
Жан Хальфстейн - веб-дизайнер. У його
портфоліо найбільше привертає увагу головна
сторінка - і анімація на ній.
Мов програмування дуже багато, рахунок йде на сотні, однак є
чимало причин обрати саме JavaScript.
Найвагоміша причина така: щоб писати і виконувати JavaScript-
програми, достатньо лише інтернет-браузера - такого, як Internet
Explorer, Mozilla Firefox або Google Chrome.
У кожен з цих браузерів вбудований інтерпретатор JavaScript, який
зможе виконувати JavaScript-програми. І ніякого спеціального
програмного забезпечення вам не знадобиться. Написавши
програму на JavaScript, відправте посилання на неї іншим людям, і
вони теж зможуть її запустити - у себе на комп'ютері, в браузері.
 Алгоритм створення програми:

Варіант 1
1. Відкрити Google Chrome
2. У адресному рядку набрати
about:blank
3. Натиснути комбінацію CTRL +
SHIFT +J
4. Перехід на новий рядок –
SHIFT+ENTER
5. Запуск сценарію на виконання
ENTER

Варіант 2
Створити html-сторінку
Запишіть сценарій
використовуючі дискрептор:
<script>...</script>
Збережіть сторінку з
розширенням Html.
 Алгоритм створення програми:

Варіант 3
Створіть дві сторінки: lab1.html і myscript.js.
Розмістіть обидві сторінки в одному каталозі.
В html-документі розмістіть код:

При прикріпленні зовнішнього файлу зі скриптом тег script слід

розміщувати в області head.
У файлі з розширенням js (в даному конкретному прикладі - myscript.js)
знаходиться єдиний рядок - код для виведення повідомлення:

document.write("Тескст записаний через JavaScript")

При прикріпленні js-файлу слід мати на увазі, що в html-файлі треба

вказувати відносний шлях до файлу зі скриптом.
Так, якщо файл зі скриптом знаходиться в каталозі jscripts, то код буде:
sсript src = "jscripts / myscript.js".
 Основні поняття
JavaScript - мова інтерпретується (простими словами:
інтерпретована - виповнюється послідовно команда за
командою).

Сценарій - текст, що складається з:

1. операторів,
2. блоків, т. е. взаємопов'язаних наборів операторів,
3. коментарів.

Оператори можуть містити:

4. змінні - можуть змінювати своє значення в програмі,
5. константи - не змінюють своє значення,
6. вирази.

Згадаймо, що змінна - це область пам'яті для зберігання значень; для

звернення до змінної використовується її ім'я (ідентифікатор). Крім того, у
змінної є тип даних - це тип значення, яке приймає змінна.

Ідентифікатори (identifiers) - імена змінних, методів та об'єктів:

7. складаються з комбінації букв і цифр;
8. повинні починатися або з літери, або з символу підкреслення;
9. не повинні містити пробілів.
 Основні поняття
Важливо: Мова JavaScript чутливий до
регістру! Наприклад, в даному сценарії це
будуть різні змінні!
counter=1
Counter=1
Є певні установлені серед програмістів правила для ідентифікаторів (імен)
змінних, функцій, масивів і класів. Розглянемо їх:

num_docs - знак підкреслення між словами - добре, але є спосіб краще

numDocs - ось такий «верблюжий» стиль чудово підходить для
іменування змінних:

1. всі імена малими літерами

2. на стику слів - велика буква
3. змінні і властивості - називаємо
іменниками
4. масиви і - називаємо іменниками у
множені
5. функції і методи - називаємо дієсловами
6. назва класів - з великої літери.
 Основні поняття

Ключові слова (keywords) - попередньо визначені ідентифікатори, що

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

Літерали (literals) - це постійні значення JavaScript. Це значення, які не

змінюються під час виконання сценарію (цілочисельні літерали, літерали з
плаваючою точкою, логічні літерали (true і false), строковий літерал - це нуль і
більше символів, взятих в подвійні ( "") або поодинокі (‘ ’) лапки) .
 Основні поняття
Змінна (variable) - це ім'я, що привласнюється комірці
пам'яті комп'ютера, яка зберігає певні дані.

JavaScript - нетипізована мова. Це означає, що змінні

приймають той тип даних, значення якого в них
присвоюється. Безпосередньо задавати тип змінної не треба.

Оголошення змінної відбувається за

допомогою службового слова javascript
var: Оголошення змінної за
допомогою службового слова
Приклади оголошення змінної: var можна опускати
Var I;
Var i=0;
Var Stroka;
Var Stroka=“Привіт”;
Var x=3.14;
Var y=-567;
Var z = 5e3; // 5000
Var m = 5e-3; // 0.005
 Лінійні алгоритми
Введення. Діалогові вікна

Функція document.write () використовується для виведення інформації на

екран.
Тоді як document.writeln () - використовується для переходу на новий рядок,
якщо використовується тег форматування pre.
alert () - це метод для виведення діалогового вікна з повідомленням .

Var myVal; // оголошуємо змінну

myVal = “Hello?"; / * Присвоюємо деяке значення * /
alert (myVal); // виводимо значення

confirm("Роботу завершено?") prompt("Як Вас звуть?", "Введіть ім'я...");

Важливо: Для вирішення завдань слід мати на увазі, що функція prompt () повертає
строкове значення, тобто якщо потрібно проводити подальші обчислення з
введенням значень, то необхідно перетворити на числовий тип даних .
Правила оформлення скрипта JavaScript
1. Кожен оператор JavaScript краще починати з нового рядка;
2. Кожен оператор закінчується крапкою з комою;
3. Сьогодні крапка з комою в кінці оператора не обов'язкова,
але якщо написати в рядок кілька операторів (це теж
дозволяється), то необхідно їх розділити через ';'

a=5 document.write(a)

// спосіб 1 В JavaScript допустимі два види

a=5 операторів коментаря:
document.write(a)
// - один рядок символів, розташована
// спосіб 2: праворуч від цього оператора, вважається
a=5; document.write(a); коментарем;
/*...*/ - все, що укладено між / * і * /,
// спосіб 3: вважається коментарем; за допомогою
a=5; цього оператора можна виділити кілька
document.write(a); рядків в якості коментаря.
 Лінійні алгоритми

Оператори присвоювання

= Звичайна операція присвоювання:

у = 5; alert (y); // вивід 5

+ =, - = присвоювання зі складанням або відніманням:

у = 5; alert (y- = 2); // вивід 3

* =, / = Присвоювання з множенням або діленням:

у = 5; alert (y * = 2); // вивід 10

 Арифметичні операції: Лінійні алгоритми

Додавання в javascript:
x+y; Віднімання в javascript: -
у = 5; Добуток в javascript: *
х = у + 3; // результат 8 Частка в javascript: /

Піднесення до степеня в javascript:

x = 8; y = 2; z=x ** y; // результат64

Залишок від ділення:

X = 8; Y = 5; z=X% Y; // результат 3

Збільшення на 1:
Х = 8; Х ++; // Результат 9

Зменшення на 1:
Y = 9; Y--; // Результат 8
 Лінійні алгоритми
Перетворення типів даних

Звичайні перетворення:
Number (x) - до числового типу
String (x) - до рядкового/строкового типу
Boolean(x) – до логічного типу
 Арифметичні операції: Лінійні алгоритми

Нагадуємо, що опис величин не є обов’язковим, тому javascript може змінювати

типи величин в залежності від арифметичного знаку.
Наприклад:
var str = "20"; var a = 5;
document.write(str + a + "<br>");
document.write(str - a + "<br>");
document.write(str * "2" + "<br>");
document.write(str / 2 + "<br>");

Функія перетворення рядку у ціле число parseInt:

NaN - коли
parseInt("3.14") // результат = 3
значення не є
parseInt("-7.875") // результат = -7
числом (а
parseInt("435") // результат = 435
очікується число)
parseInt("Вася") /* результат = NaN, тому що не є числом*/

Функія перетворення рядку у дійсне число parseFloat :

parseFloat("3.14") // результат = 3.14
parseFloat ("435") // результат = 435
parseFloat ("Вася") /* результат = NaN, тому що не є числом*/

Значення змінної може бути undefined - не визначене. Таке трапляється, коли

змінна створена, але значення їй не присвоєно:
var b; document.write (b); // Результат b = undefined
 Математичні функції: Лінійні алгоритми

Math.abs(x) Повертає Math.sin(x) Повертає Math.cos(x) Повертає

абсолютне значення значення синуса косинус числа.
(модуль) числа. аргументу.

Math.sqrt(x) Повертає
Math.PI Значення Math.tan(x) Повертає
додатне значення
наближено дорівнює значення тангенса
квадратного кореня від
3.14159 аргументу.
аргументу.

Math.pow(x, y)
Повертає результат Math.trunc(x) Повертає цілу
піднесення до степеня частину аргументу, відкидаючи
xy. всю дробову частину.

Math.sqrt(x) Повертає
Та інші:
додатне значення
https://developer.mozilla.org/uk/docs/Web/
квадратного кореня від
JavaScript/Reference/Global_Objects/Math
аргументу.
 Приклади Лінійні алгоритми

Задача 1. Ввести у вікні ім’я користувача. Вивести у тексті сторінки привітання.

<html>

<body>
<font color=red size=5>Задача 1</font>
<br>
<script>
var name=prompt("Як Вас звуть?");
document.write("<font color=blue>","Доброго дня,", name,"!");
</script>

</body></html>
 Приклади Лінійні алгоритми

Задача 2. Задано сторони прямокутника. Обрахувати його площу.

<html>

<body>
<font color=red size=5> <center>Задача 2</font>
<br>
<script>
var a=parseInt(prompt("Ввести першу сторону:"));
b=parseInt(prompt("Ввести другу сторону:"));

S=a*b;
document.write("<p align=Left>","Площа=",S);
</script>

</body></html>
 Приклади Лінійні алгоритми

Задача 3. Обрахувати значення виразу

<html>

<body>
<font color=red size=5> <center>Задача 3</font>
<br>
Табульоване
<script> виведення 2
var x=parseInt(prompt("Ввести число x:")); знаки після коми

Viraz=(x**2+7*x+10)/(x**2-8*x+12);
document.write("<p align=Left>","Вираз=", Viraz.toFixed(2));
</script>

</body></html>