Змінні. Математичні операції.

Фронтенд розробка JavaScript. -> Ввід данних. Арифметика.

Змінні. Математичні операції.

Програма Hello World.

Створюємо html сторінку index.html у новій папці.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Заголовок</title>
</head>

<body>

    <script>

       alert('Hello world!')

    </script>
</body>
</html>

Запускаємо у браузері.

start page

Приймаємо дані від користувача, привласнюємо їх змінною та виводимо на екран.

    var something = prompt('Вводи щось')

    alert(something)

Присвоєння.

x=y=z=1

start page

При ланцюжковому привласнення спочатку присвоюється z = 1 і потім значення 1 виштовхується вліво і присвоюється змінною y далі по ланцюжку.

Оператори та операнди.

Оператор - спеціальний символ, що означає те чи інше обчислення. Ця конструкція мови не має значення, що повертається.

Операнд - над чим працює оператор (значення)

Операція - це те, що має значення, що повертається.

Таким чином, привласнення це і оператор і операція одночасно!

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

Додавання x+y

Віднімання x – y

Розмноження x * y

Поділ x/y

Залишок від поділу x%y

Зведення до ступеня x**y

Інверсія (зміна знака) -x

Інкремент (збільшення на 1) x++ або ++x

Декремент (зменшення на 1) x– або –x

При операціях враховується пріоритет та працюють дужки.

Операції відносин (порівняння).

Не суворе одно ==

Суворе дорівнює ===

При суворому порівнянні враховується і тип змінної.

Тому при порівнянні рядка та числа наприклад

2 === '2'

Повернутися false, хоча за не суворого порівняння 

2 == '2'

Поверне true

Більше >

Менше <

Більше або дорівнює >=

Менше чи дорівнює <=

Логічні оператори.

Застосовуються переважно комбінування кількох умов.

Логічне І

age > 10 && age < 30
login=="user" && password=="MySecret"

Логічне АБО

age == 10 || age == 12

Комбінація.

(login=="user" || email=="user@itstep.org") && password=="MySecret"

Логічна інверсія

Оператор “!”

Змінює результат операнда на протилежний.

!(profession == ‘banker’)

Інверсія - це найпростіший вид бітових операцій, повний їх перелік вивчає розділ дискретної математики.

При інверсії тупо змінюються всі біти (0 або 1) протилежні.

Бітові операції/оператори.

Застосовуються вкрай рідко задля економії пам’яті, підвищення швидкодії та криптографії.

Бітове та - &

Бітове виключне АБО - ^

Бітове АБО - |

Оператор typeof

Визначає тип змінної.

"typeof 2" дасть результат "number"

Назва типу є рядковою величиною та її можна порівнювати.

typeof 2 === "number"

Будь-яка невизначена змінна має тип «undefined» та звернення до будь-якого імені не повинно призводити до помилки, навіть якщо це ім’я ніде раніше не визначалося

console.log(typeof s); // поверне undefined

Саме тому не виникає помилок у момент присвоєння змінних т.к. змінна буде автоматично створена

Однак це викликає помилку

console.log(s);

Тому що помилці наводить звернення до значення невизначеної змінної - так звана спроба читання (операцією console.log(x);).

Діалогові вікна

alert - Окно сообщений.

prompt -Вікно повідомлень.

prompt – Вікно введення повідомлення. Повертає значення, яке вводить користувач.

confirm – Вікно підтвердження дії. Повертає true чи false

Усі ці вікна модальні, тобто. Поки користувач не відреагує, браузер блокує сторінку.

Примітка. Вікно alert повертає значення undefined. Тому ми його і бачимо у консолі

Унарний опрератор + часто використовується до приведення типу до числового.

цей оператор може працюваті як бінарний (с двома операндами) так і унарний - з одним

x = +prompt("Input x=")

він не змінюе чісло але перетворює строку в число

Концепція програмного об’єкта.

Об’єкт - це програмна суть (істота), яка має властивості та методи.

Отримання якості.

object.prpperty_name

ВВиклик методу.

object.do_something(with_something)

Модуль Math

Math - це вбудований в мову об’єкт зі своїми властивостями та методами.

Основні властивості.

Math.PI -число Пі.

Math.E – основа натуральних логорифмів.

Основні методи.

Тригонометричні функції sin(), cos(), tan(), asin(), acos(), atan(), atan2()

Math.abs(x) - модуль числа

Math.floor(x) - округляє x до цілого більшого.

Math.ceil(x), Math.round(x) - округляє x до цілого більшого.

Math.pow(x, y) - зводить у ступінь.

Math.random() - довільне число від 0 до 1.

Повний список

Фронтенд розробка JavaScript. -> Домашнє завдання. Рішення.

Домашнє завдання. Рішення.

  1. Запитайте у користувача його ім’я та виведіть у відповідь: “Привіт, його ім’я!”.

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

<script>
    const Year  = prompt('input the year of your Birth Date')

    alert(2020-Year)

</script>

  1. Запитайте у користувача довжину сторони квадрата та виведіть периметр такого квадрата.

  2. Запросіть у користувача радіус кола та виведіть площа такого кола.

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

6.Реалізуйте конвертор валют. Користувач вводить дол- ри, програма переводить у євро. Курс валюти зберігайте у константі.

<script>
    const kurs = 0.84

    var Dollars =prompt('input summ in dollars')

    alert((Dollars*kurs).toFixed(2) +' Euro')

</script>

7.Користувач вказує обсяг флешки у Гб. Програма повинна порахувати скільки файлів розміром 820 Мб по- міститься на флешку.

<script>

   var Vol=prompt('input volume')

   var numb = Math.floor((Vol*1024)/820)

   alert(numb)

</script>

8.Користувач вводить суму грошей у гаманці та ціну однієї шоколадки. Програма виводить скільки шоколадок може купити користувач і скільки решти у нього залишиться. Для вирішення завдання вам знадобиться оператор % (залишок від поділу).

<script>

    var pocket=prompt('input amount of money in your pocket')

    var choc=prompt('input price of the chocolate')

    var buyAble=(pocket/choc)-(pocket/choc)%1

    var left =pocket-buyAble*choc

    alert('number of chocolates:'+buyAble)

    alert('left in pocket:'+left)       
</script>

  1. Запитайте у користувача тризначне число та виведіть його задом наперед.

    number.split(“”).reverse().join(“”);

    a = number % 10 // 6 b = Math.floor( ( number % 100 ) / 10 ); //5 c = Math.floor( ( number % 1000 ) / 100 ); // 4 alert( ${a}${b}${c} );

Фронтенд розробка JavaScript. -> Домашнє завдання.

Домашнє завдання.

Завдання 1:

Запросити користувача ввести суму покупки та зберегти її у змінній x.

Якщо вона перевищує 1000, зменшити її на знижку 10%.

Результат вивести на екран.

Завдання 2.

У змінній «х» зберігається кілька. Необхідно перевірити його парність та результат зберегти у змінній «parity».

Завдання 3.

Вивести випадково кількість від 1 до 10.

Завдання 4.

Сформувати рядок, починаючи з введеного користувачем значення змінної «х» і закінчуючи значенням “5”. Але значення, яке вводиться користувачем, має бути в діапазоні 1 - 5.