Lect_1_JS (1)

Февраль 23, 2021

Содержание

2. Клієнтський JavaScript Інтерпретатор JavaScript, яким оснащені браузери, дозволяє виконувати клієнтські сценарії завантажені разом з розміткою сторінки.
3. Роль клієнтського JavaScript Користувацький інтерфейс Створення візуальних ефектів (анімація). Виконання нескладних обчислень. Перевірка даних введених користувачем.
4. Приклад клієнтського JavaScript Клієнтський JavaScript for(var i = 1; i document.write(i + " "); }; JavaScript
5. Lexical structure Лексична структура мови програмування – це набір елементарних правил, що визначають, як пишуться програми
6. Comments // Вы можете залишати як однорядковий коментар alert("Hello world!"); /* Так і багаторядковий коментар */
7. Зарезервовані слова break case catch continue default delete do else false finally for function if in
8. Створення змінних Змінна – це символ або слово, що означає деяке значення. JavaScript – динамічно типізована,
9. Правила іменування змінних При іменуванні часто використовуються правила camelCase або PascalCase Ідентифікатор повинен бути одним словом:
10. Data Types Елементарні типи •Числа (Number) •Рядки (String) •Логічні значення (Boolean) Тривіальні типи •null – відсутність
11. Літерали Літерали – це найпростіші дані з якими може працювати програма. Літерали цілого типу – цілі
12. Data Types var a = 10; // тип Number var b = 0.8; // тип Number
13. Змінні Наприклад: var test; var _test; var _my_test1; Наприклад: var a=15; var b=23.15; var c=‘виконано’; var
14. Вирази
15. Вирази
16. Присвоєння з операцією
17. Порівняння двох значень Результатом порівняння може бути тільки логічне значення: true або false:
18. Логічні операції: && - логічне І (AND), || - логічне АБО (OR), ! - логічне НЕ
19. Конкатенація рядків var st1="Вітаю "; var st2="студент"; var st3=st1+st2; В результаті в змінній st3 буде значення
20. Оператор рівності та ідентичності Рівність (==) (1==1) = true ('text'=='text') = true (null==undefined) = true (1=='1')
21. Таблиця пріоритетів операцій в порядку їх спадання
22. Javascript-код на сторінці Заголовок документа
23. Javascript-код у зовнішньому файлі Заголовок документа
24. Наша перша програма Заголовок документа document.write("Мій перший Javascript-код.");
25. Обробка подій Де Click – подія (клікання по div-у), onClick – обробник події, addText() – і’мя
26. Обробка подій
27. Обробка подій
28. Функції для роботи з діалоговими вікнами: alert() – Виводить модальне вікно з повідомленням. Відвідувач не зможе
29. Створення JavaScript-функцій Функція – це іменована послідовність операторів (інструкцій). Будь-яка функція має наступний синтаксис: function і’мя
30. Приклад JavaScript-функцій Заголовок документа Push me В script.js: function showMessage(){ alert ("Ви клікнули по div-у"); }
31. Розрахувати площу прямокутника Розрахунок площі прямокутника Довжина Ширина Площа прямокутника дорівнює
32. Розрахувати площу прямокутника ....... ....... Написання самої функції "areaRectangle" function areaRectangle(){ } Тепер треба написати тіло
33. Розрахувати площу прямокутника Значення (value) a має братися з поточної сторінки (document), з форми з ім'ям
34. Розрахувати площу прямокутника function areaRectangle(){ var a=document.forma1.t1.value; var b=document.forma1.t2.value; var s=a*b; document.forma1.res.value=s; }
36. Скачать презентацию

Клієнтський JavaScript
Інтерпретатор JavaScript, яким оснащені браузери, дозволяє виконувати клієнтські сценарії завантажені разом

з розміткою сторінки.

Роль клієнтського JavaScript
Користувацький інтерфейс
Створення візуальних ефектів (анімація).
Виконання нескладних обчислень.
Перевірка даних введених користувачем.
Маніпуляція

даними введеними користувачем у форми.
Пошук по даним, вбудованим в завантажену сторінку.
Збереження даних в cookies.
Динамічна зміна вмісту сторінки (DHTML).
Пряма взаємодія з сервером без перезавантаження всієї сторінки (AJAX).

Слайд 4

Приклад клієнтського JavaScript

Клієнтський JavaScript

JavaScript код виконується на стороні клієнта Web-браузером.

Слайд 5

Lexical structure
Лексична структура мови програмування – це набір елементарних правил, що визначають,

як пишуться програми на мові.
Лексична структура JavaScript:
Чутлива до регістру.
Інструкції повинні закінчуватися крапкою з комою або починатися з нового рядка.
Ігнорує пробіли і табуляції.

Слайд 6

Comments

Слайд 7

Зарезервовані слова
break
case
catch
continue
default
delete
do
else
false
finally
for
function
if
in
instanceof
new
null
return
switch
this
throw
true
try
typeof
var
void
while
with

Слайд 8

Створення змінних
Змінна – це символ або слово, що означає деяке значення.
JavaScript –

динамічно типізована, а не строго типізована мова програмування.

Слайд 9

Правила іменування змінних
При іменуванні часто використовуються правила camelCase або PascalCase
Ідентифікатор повинен бути

одним словом:

Ім’я не може починатися з цифри:

Першим символом імені може бути символ «$» або «_»:

Слайд 10

Data Types
Елементарні типи
•Числа (Number)
•Рядки (String)
•Логічні значення (Boolean)
Тривіальні типи
•null – відсутність значення
•undefined –

невизначене значення
Складені типи
•Об’єкт (Object)
•Масив (Array)
Спеціальный тип
•Функція (function)

Слайд 11

Літерали
Літерали – це найпростіші дані з якими може працювати програма.
Літерали цілого типу

– цілі числа в поданні:
десятковому, наприклад: 15, +5, -174.
шістнадцятирічному, наприклад: 0х25, 0хff. Шістнадцятиричні числа включають цифри 0 - 9 і букви a, b, c, d, e, f. Записуються вони з символами 0х перед числом.
вісімковому, наприклад: 011, 0543. Вісімкові числа включають тільки цифри 0 - 7.
Речові літерали – дробові числа. Ціла частина відділяється від дробової крапкою, наприклад: 99.15, -32.45. Можлива експоненціальна форма запису, наприклад: 2.73e-7. У звичному вигляді це 2.73Х10-7, але в javascript знак множення і 10 замінюються символом -e-.
Логічні значення – є два: істина (true) і брехня (false).
Рядкові літерали – послідовність символів, укладена в одинарні або подвійні лапки. Наприклад: "ваше ім'я", "ваше ім'я".

Слайд 12

Data Types
var a = 10; // тип Number
var b = 0.8;

// тип Number
var c = "string"; // тип String
var d = 'string'; // тип String
var e = true; // тип Boolean
var f = false; // тип Boolean
var g = null; // тип null
var h = undefined; // тип undefined
var i = newDate() ; // тип Object
var j = newObject(); // тип Object
var k = [1,2,3]; // Масив
var l = Array(); // Масив
var m = function() { }; // Функція

Слайд 13

Змінні
Наприклад:
var test;
var _test;
var _my_test1;
Наприклад:
var a=15;
var b=23.15;
var c=‘виконано’;
var s=true;
Кожна змінна має тип,

який визначається значенням змінної. Так в нашому прикладі: змінні a і b мають тип number, змінна c має тип string, а змінна s – логічний тип.

Слайд 14

Вирази

Слайд 15

Вирази

Слайд 16

Присвоєння з операцією

Слайд 17

Порівняння двох значень
Результатом порівняння може бути тільки логічне значення: true або false:

Слайд 18

Логічні операції:
&& - логічне І (AND),
|| - логічне АБО (OR),
! - логічне

НЕ (NOT).

Слайд 19

Конкатенація рядків
var st1="Вітаю ";
var st2="студент";
var st3=st1+st2;
В результаті в змінній st3 буде

значення "Вітаю студент".

Слайд 20

Оператор рівності та ідентичності
Рівність (==)
(1==1) = true
('text'=='text') = true
(null==undefined) = true
(1=='1') =

true
(1==true) = true
(0==false) = true

Ідентичність (===)
(1===1) = true
('text'==='text') = true
(null===undefined) = false
(1==='1') = false
(1===true) = false
(0===false) = false

Слайд 21

Таблиця пріоритетів операцій в порядку їх спадання

Слайд 22

Javascript-код на сторінці

Заголовок документа

Слайд 23

Javascript-код у зовнішньому файлі

Заголовок документа

Слайд 24

Наша перша програма

Заголовок документа

Слайд 25

Обробка подій

Де Click – подія (клікання по div-у), onClick – обробник

події, addText() – і’мя функції, яка спрацьовує при виникненні цієї події (кліканні по div-у).

Слайд 26

Обробка подій

Слайд 27

Обробка подій

Слайд 28

Функції для роботи з діалоговими вікнами:
alert() – Виводить модальне вікно з повідомленням.
Відвідувач

не зможе продовжити роботу, поки не натисне на кнопку "ОК" в модальному вікні.
Приклад: alert('Добрий день');
prompt() – Виводить повідомлення у вікні з текстовим полем і двома кнопками: "ОК" і "СКАСУВАННЯ".
Повертає введене значення або null, якщо відвідувач натиснув на кнопку "СКАСУВАННЯ".
Як і в alert(), вікно – модальне, тобто відвідувач не може робити нічого іншого, поки не вибере одну з кнопок.
Приклад: result = prompt( "text", "value");
confirm() – виводить вікно з питанням question з двома кнопками: "ОК" і "СКАСУВАННЯ"
Приклад: var a = confirm("Ви – адміністратор?");

Слайд 29

Створення JavaScript-функцій
Функція – це іменована послідовність операторів (інструкцій). Будь-яка функція має наступний

синтаксис:
function і’мя (){ оператор; ....... оператор; }

Слайд 30

Приклад JavaScript-функцій

Заголовок документа

onClick="showMessage();">Push me

В script.js:
function showMessage(){
alert ("Ви клікнули по div-у");
}

Слайд 31

Розрахувати площу прямокутника

Розрахунок площі прямокутника

Слайд 32

Розрахувати площу прямокутника
.......

.......
Написання самої функції "areaRectangle"
function areaRectangle(){

}
Тепер треба написати тіло функції. Для початку оголосимо три змінні: a – значення довжини прямокутника, b – значення ширини прямокутника, s – площа прямокутника:
function areaRectangle(){
var a;
var b;
var s;
}

Слайд 33

Розрахувати площу прямокутника
Значення (value) a має братися з поточної сторінки (document), з

форми з ім'ям "forma1", з текстового поля з ім'ям "t1". Так це і записується document.forma1.t1.value, тобто перераховуються через крапку імена об'єктів від батьківського до потрібного. Останнім вказується необхідна властивість об'єкта (value).
function areaRectangle(){
var a=document.forma1.t1.value;
var b=document.forma1.t2.value;
var s=a*b;
}

Слайд 34

Розрахувати площу прямокутника
function areaRectangle(){
var a=document.forma1.t1.value;
var b=document.forma1.t2.value;
var s=a*b;

document.forma1.res.value=s;
}

Lect_1_JS (1)

Содержание

Клієнтський JavaScriptІнтерпретатор JavaScript, яким оснащені браузери, дозволяє виконувати клієнтські сценарії завантажені разом

Lexical structureЛексична структура мови програмування – це набір елементарних правил, що визначають,

Зарезервовані словаbreakcasecatchcontinuedefaultdeletedoelsefalsefinallyforfunctionifininstanceofnewnullreturnswitchthisthrowtruetrytypeofvarvoidwhilewith

Створення зміннихЗмінна – це символ або слово, що означає деяке значення.JavaScript –

Правила іменування зміннихПри іменуванні часто використовуються правила camelCase або PascalCaseІдентифікатор повинен бути

Data TypesЕлементарні типи •Числа (Number) •Рядки (String) •Логічні значення (Boolean)Тривіальні типи •null – відсутність значення •undefined –

ЛітералиЛітерали – це найпростіші дані з якими може працювати програма.Літерали цілого типу

Data Typesvar a = 10; // тип Number var b = 0.8;

ЗмінніНаприклад:var test;var _test; var _my_test1;Наприклад:var a=15;var b=23.15;var c=‘виконано’;var s=true;Кожна змінна має тип,

Вирази

Вирази

Присвоєння з операцією

Порівняння двох значеньРезультатом порівняння може бути тільки логічне значення: true або false:

Логічні операції:&& - логічне І (AND),|| - логічне АБО (OR),! - логічне

Конкатенація рядківvar st1="Вітаю ";var st2="студент";var st3=st1+st2; В результаті в змінній st3 буде

Оператор рівності та ідентичностіРівність (==)(1==1) = true('text'=='text') = true(null==undefined) = true(1=='1') =

Таблиця пріоритетів операцій в порядку їх спадання

Javascript-код на сторінці Заголовок документа <br>

Javascript-код у зовнішньому файлі Заголовок документа

Обробка подійДе Click – подія (клікання по div-у), onClick – обробник

Обробка подій

Обробка подій

Функції для роботи з діалоговими вікнами:alert() – Виводить модальне вікно з повідомленням. Відвідувач

Створення JavaScript-функційФункція – це іменована послідовність операторів (інструкцій). Будь-яка функція має наступний

Приклад JavaScript-функцій Заголовок документа

Розрахувати площу прямокутника Розрахунок площі прямокутника

Розрахувати площу прямокутника....... .......Написання самої функції "areaRectangle"function areaRectangle(){

Розрахувати площу прямокутникаЗначення (value) a має братися з поточної сторінки (document), з

Розрахувати площу прямокутникаfunction areaRectangle(){ var a=document.forma1.t1.value; var b=document.forma1.t2.value; var s=a*b;

Похожие презентации

Клієнтський JavaScript
Інтерпретатор JavaScript, яким оснащені браузери, дозволяє виконувати клієнтські сценарії завантажені разом

Lexical structure
Лексична структура мови програмування – це набір елементарних правил, що визначають,

Зарезервовані слова
break
case
catch
continue
default
delete
do
else
false
finally
for
function
if
in
instanceof
new
null
return
switch
this
throw
true
try
typeof
var
void
while
with

Створення змінних
Змінна – це символ або слово, що означає деяке значення.
JavaScript –

Правила іменування змінних
При іменуванні часто використовуються правила camelCase або PascalCase
Ідентифікатор повинен бути

Data Types
Елементарні типи
•Числа (Number)
•Рядки (String)
•Логічні значення (Boolean)
Тривіальні типи
•null – відсутність значення
•undefined –

Літерали
Літерали – це найпростіші дані з якими може працювати програма.
Літерали цілого типу

Data Types
var a = 10; // тип Number
var b = 0.8;

Змінні
Наприклад:
var test;
var _test;
var _my_test1;
Наприклад:
var a=15;
var b=23.15;
var c=‘виконано’;
var s=true;
Кожна змінна має тип,

Порівняння двох значень
Результатом порівняння може бути тільки логічне значення: true або false:

Логічні операції:
&& - логічне І (AND),
|| - логічне АБО (OR),
! - логічне

Конкатенація рядків
var st1="Вітаю ";
var st2="студент";
var st3=st1+st2;
В результаті в змінній st3 буде

Оператор рівності та ідентичності
Рівність (==)
(1==1) = true
('text'=='text') = true
(null==undefined) = true
(1=='1') =

Javascript-код на сторінці

Заголовок документа

Javascript-код у зовнішньому файлі

Заголовок документа

Обробка подій

Де Click – подія (клікання по div-у), onClick – обробник

Функції для роботи з діалоговими вікнами:
alert() – Виводить модальне вікно з повідомленням.
Відвідувач

Створення JavaScript-функцій
Функція – це іменована послідовність операторів (інструкцій). Будь-яка функція має наступний

Приклад JavaScript-функцій

Заголовок документа

Розрахувати площу прямокутника

Розрахунок площі прямокутника

Розрахувати площу прямокутника
.......

.......
Написання самої функції "areaRectangle"
function areaRectangle(){

Розрахувати площу прямокутника
Значення (value) a має братися з поточної сторінки (document), з

Розрахувати площу прямокутника
function areaRectangle(){
var a=document.forma1.t1.value;
var b=document.forma1.t2.value;
var s=a*b;