< > ↑ Вгору

1. Додавання сценаріїв Javascript в HTML

Javascript - скриптова (сценарний) інтерпретована мова програмування, інтерпретатор вбудований безпосередньо в браузер. Тому обробка скрипта (або іншими словами - сценарію ) відбувається на стороні клієнта без звернення до серверної сторони.

Скрипти використовуються в html-сторінках для збільшення функціональності і можливостей взаємодії з відвідувачами сайту.

Для додавання сценарію на сторінку HTML використовується дескриптор:

Або сьогодні можна використовувати спрощений варіант:

<sсript>
</sсript>

Атрибути дескриптора:

type - атрибут, що прийшов на заміну language ; він повідомляє браузеру, яка мова використовується всередині дескрипторів;
src - атрибут визначає URL зовнішнього вихідного JavaScript-файлу, сценарій якого прикріплюється до html-сторінці.

Таким чином, варіанти тега script:

Застарілий варіант:

<sсript language = "javascript" >... </script>
Діючі варіанти:

<script type = "text/javascript" >... </script>
<script>... </script>
Варіант з прикріпленим файлом скрипта:

<script src = "/jscripts/myscript.js">
</script>

Отже, коротко резюмуємо те, що необхідно знати про javascript:

тег script зазвичай поміщається в html-сторінку в область head або body ;
цей тег вказує на те, що всередині знаходиться сценарій - виконуваний код, в нашому випадку скрипт на мові javascript;
коли html-парсер браузера, відображаючи послідовно структуру html, доходить до тега script , то він передає ініціативу інтерпретатора javascript ;
інтерпретатор, в свою чергу, виконує вміст коду до закриває тега script , а потім знову передає управління html-парсеру.

ДОДАВАННЯ JAVASCRIPT В HTML

Вбудовування javascript в html відбувається двома основними способами, які розглянемо на прикладі:

Приклад 1:Вивести в браузері повідомлення «Це JavaScript!» , Використовуючи скрипт на мові JavaScript.

Рішення:

Вбудовування JavaScript безпосередньо в HTML-сторінку:
- Створіть html-сторінку з наступним кодом:
  
  <html> <head> </head>
  <body>
  
  <script type = "text / javascript">
  document.write ("Це JavaScript!");
  </script>
  
  <hr>
  Це звичайний HTML документ.
  </body> </html>
  
  Пояснення: В даному прикладі дескриптор script може перебувати як в тілі документа, тобто тезі body (як у прикладі), так і в області head
- Відкрийте сторінку в браузері і подивіться на результат. Все, що знаходиться до горизонтальної лінії - це результат роботи скрипта; після чого йде текст в розмітці html.
Розміщення сценарію в зовнішньому файлі:
- Створіть дві сторінки: lab1.html і myscript.js. Розмістіть обидві сторінки в одному каталозі.
- В html-документі розмістіть код:
  
  <html>
  <head>
  
  <script src = "myscript.js" ></script>
  </head>
  <body>
  ...
  </body> </html>
  
  Пояснення: При прикріпленні зовнішнього файлу зі скриптом тег script слід розміщувати в області head .
- У файлі з розширенням js (в даному конкретному прикладі - myscript.js ) знаходиться єдиний рядок - код для виведення повідомлення:
  
  document.write ("Це JavaScript!")
- Відкрийте сторінку lab1.html в браузері і подивіться результат.
  
  Пояснення: При прикріпленні js-файлу слід мати на увазі, що в html-файлі треба вказувати відносний шлях до файлу зі скриптом. Так, якщо файл зі скриптом знаходиться в каталозі jscripts , то код буде: sсript src="jscripts/myscript.js" .

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

Виконайте наступний приклад, щоб побачити особливості роботи методу alert() :

Приклад 2: Поміняйте місцями alert і document.write . Подивіться на результат в браузері.

Важливо: особливість модального вікна alert() полягає в тому, що користувач не може продовжити роботу, поки не клацне по кнопці вікна.

Зверніть увагу, як працює javascript, поміщений в теги оформлення шрифту:

Приклад 3: Перенесіть скрипт в BODY після тега H1 . Подивіться на результат.

<h1>
<script type = "text/javascript" >
alert ("Hello?");
document.write ("Hello!");
</script>
</h1>

Важливо: Приклад показує, що при використанні методу write () на сторінці виводиться не просто текст, а html-код. Тобто даний код може містити теги html, які будуть перетворені в відповідне форматування тексту.

Завдання Js 1. Вивести в вікно браузера наступні дані: Ваше ПІБ, вік, хобі (кожне на новому рядку)

Завдання Js 2. Написати сценарій (javascript) для виведення двох рядків тексту, червоного і синього кольору.
Зауваження:
Теги html для оформлення тексту кольором:

<font color = "red"> Червоний рядок </font>

Завдання Js 3. Знайдіть і виправте помилки у фрагментах коду:

document.write("Проблеми?");
alert(Hello);

Питання для самоконтролю:

Що таке сценарій (скрипт)?
Сформулюйте основні завдання, які вирішуються за допомогою скриптів javaScript.
Опишіть основні правила підключення сценаріїв на сторінку html.
Який метод javaScript використовується для виведення тексту (html-коду) на сторінку?

2. Синтаксис javaScript, основні поняття

JavaScript - мова інтерпретується (простими словами: інтерпретована - виповнюється послідовно команда за командою), але також оснащений JIT-компіляції.

JIT або компіляція «на льоту» (Just-in-time compilation) - технологія збільшення швидкості роботи програмних систем, що використовують байт-код, шляхом компіляції байт-коду в машинний код безпосередньо під час роботи програми.

Розглянемо деякі поняття, які стосуються синтаксису мови:

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

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

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

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

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

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

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

Важливо: Мова JavaScript чутливa до регістру:

// змінні розрізняються:
counter = 1
Counter = 1

«Верблюжа нотація» в запису ідентифікаторів:

Є певні усталені серед програмістів правила для ідентифікаторів (імен) змінних, функцій, масивів і класів. Розглянемо їх:

num_docs - знак підкреслення між словами - добре, але є спосіб краще
numDocs - ось такий «верблюжий» стиль чудово підходить для іменування змінних:
- всі імена малими літерами,
- на стику слів - велика буква,
- змінні і властивості - називаємо іменниками,
- масиви і колекції - називаємо іменниками у розмножувальної числі,
- функції і методи - називаємо дієсловами,
- назва класів - з великої літери.

Приклад:

var myCounter = 1; // просто змінна
var userNames = new Array( ); // масив
function getUserCounter( ){ } // функція

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

Літерали (literals) - це постійні значення JavaScript. Це значення, які не змінюються під час виконання сценарію (цілочисельні літерали, літерали з плаваючою точкою, логічні літерали (true і false), строковий літерал - це нуль і більше символів, взятих в подвійні ( "") або поодинокі ( ») лапки) .

ПРАВИЛА ОФОРМЛЕННЯ СКРИПТА JAVASCRIPT

кожен оператор JavaScript краще починати з нового рядка;
кожен оператор закінчується крапкою з комою;

Пояснення: сьогодні крапка з комою в кінці оператора не обов'язкова, але якщо написати в рядок кілька операторів (це теж дозволяється), то необхідно їх розділити через ' ; '

Такий код не працює :

a=5 document.write(a)

Код працює вірно:

// спосiб 1:
a = 5
document.write(a)

// спосiб 2:
a = 5; document.write(a);

// спосiб 3:
a = 5;
document.write(a);
блок - це набір операторів (складовою оператор), укладений у фігурні дужки { } .

{
document.write(a);
alert(b);
}

JavaScript коментарі

В JavaScript допустимі два види операторів коментаря:

// - один рядок символів, розташована праворуч від цього оператора, вважається коментарем;
/*...*/ - все, що укладено між /* і */ , вважається коментарем; за допомогою цього оператора можна виділити кілька рядків в якості коментаря.

// перевірка

/ * Тут може бути помилка
a = 5;
document.write (a);
* /

Пояснення: Другий спосіб коментування зазвичай використовується при пошуку помилок: той блок сценарію, в якому може перебувати потенційна помилка, коментується.

Завдання Js 4. Виправте помилки у фрагменті коду:

alert("Hello World!"); / Це однорядковий коментар

ОГОЛОШЕННЯ ЗМІННИХ В JAVASCRIPT І ОПЕРАТОР ПРИСВОЮВАННЯ

Змінна (variable) - це ім'я, що привласнюється комірці пам'яті комп'ютера, яка зберігає певні дані.

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

Оголошення змінної відбувається за допомогою службового слова javascript var :

var + ім'я змінної + ;

Приклад оголошення змінної:

var i;

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

i = 0;

Оголошення змінної можна об'єднати з приcвoювaнням:

var + ім'я змінної + = + значення + ;

Змінна завжди зліва, справа - літерал (значення змінної).
Приклад:

var i = 0;

Таким чином, резюмуємо. Існує три варіанти оголошення з привласненням:

var hello = "привіт";
var hello;
hello = "привіт";
hello = "привіт";

Оголошення змінної за допомогою службового слова var можна опускати.

Приклад 4: Створити змінну з ідентифікатором myVal зі строковим значенням «Pi» . Вивести значення змінної, використовуючи модальне вікно (метод alert() ).

Рішення:

Створіть html-сторінку з тегом script , призначеним для розміщення подальшого коду:

<html>
<head> </head>
<body>
<script type = "text/javascript">
// майбутній код javascript
</script>
</body>
</html>
Додайте код для оголошення, ініціалізації змінної і виведення її значення в призначене для цього місце:

var myVal; // оголошуємо змінну myVal
myVal = "Pi"; / * Присвоюємо myVal деяке значення * /
alert(myVal); // виводимо значення
Можливий також приклад з неоголошеною змінною:

myVal = "Pi"; / * Присвоюємо myVal деяке значення * /
alert(myVal); // виводимо значення
Запустіть сторінку в браузері і подивіться на результат.

Завдання Js 5. Оголосіть дві змінні різними способами і надайте їм значення. Виведіть на екран значення змінних за допомогою методу alert()

Завдання Js 6. Виправте помилки в правильності оголошення локальних змінних у фрагменті коду:

String s = "String";
int a = 10;
long b = 25;

Константи в javaScript

Оголошення константи:

const + ім'я константи + = + значення + ;

const MyX = 2;

Дані, присвоєні константі, протягом програми не змінюються!

JAVASCRIPT ТИПИ ДАНИХ

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

Важливо: Але необхідно пам'ятати, що в javascript типи змінних явно не вказуються, тому що це динамічно типізованa, а не строго типізованa мовa програмування.

Інтерпретатор визначає тип змінної по правій частині (по наданим їй значенням).
Оголошення локальних змінних здійснюється за допомогою ключового слова var .

Тип даних	приклад / пояснення
javascript undefined type	var x; alert(x); значення, яке використовується для змінних або властивостей об'єкта, значення для яких не існує або воно не присвоєно
Null type	var x = 1; x = null; // порожнє значення значення, яке вказує на відсутність об'єкта
Boolean type логічний (true або false)	var x = false;
String type строковий	var x = "Привіт";
Number type числовий	var x = 3.14; var y = -567;
RegExp регулярні вирази
Object type	Програмний об'єкт, який визначається своїми властивостями

Логічний тип (boolean)

Приклад використання логічного типу:

var a = true;
var b = false;
c = a && b; // результат false
c = a || b; // результат true
с = !a; // результат false

Javascript логічні оператори:

Oператор	Назва	Приклад
!	Заперечення (логічне НЕ)	!Х
&&	логічне І	X && Y
\|\|	логічне АБО	X\|\|Y

Завдання Js 7.

Виконайте завдання по кроках:

Створіть 3 змінні з використанням ключового слова var з ідентифікаторами: a , b , c .
Змінної a надайте значення false .
Змінної b надайте значення null .
Змінна c повинна приймати значення undefined .
Відкрийте значення 3-х змінних послідовно в модальних вікнах (тобто за допомогою методу alert() ).

Строковий тип (string)

Рядок - набір символів, оточеного або в "" , або в ''

Три способи створення строкового об'єкта:

ім'я_змінної = new String ("строковое_значення");

myString = new String("Hello!");
ім'я_змінної = "строковое_значення";

myString = "Hello!";
var ім'я_змінної = "строковое_значення";

var myString = "Hello!";

Операції над рядками

Конкатенація об'єднання рядків:

Приклад:

var x = "При";
var y = "вiт";
var s = x +y; //"Привiт"
Спеціальні символи:
\n - новий рядок

\t - табуляція

Приклад 5: Реалізуйте наведений нижче код, щоб подивитися, як працюють спеціальні символи в javascript. Запустіть сторінку в браузері:

alert("мама мила раму");
alert("мама \n мила \n раму");

Завдання Js 8. Що повинно бути у відповіді на наступні присвоювання?
"1"+2+3= ?
1+2+"3"= ?

Завдання Js 9. Вивести в вікно браузера за допомогою методу alert() наступні дані: Ваше ПІБ, вік, хобі (кожне на новому рядку: використовувати спеціальні символи)

Завдання Js 10. За допомогою javascript методу document.write() вивести у вікно браузера рядок: Хто ти такий? (з пробілами між словами).

Послідовно виконайте:

Створити 4 змінні з використанням ключового слова var з іменами str1 , str2 , str3 , concatenation .
Змінній str1 привласнити фразу 'Хто' , str2 - 'ти' , str3 - 'такий?'
Локальій змінній concatenation привласнити результат конкатенації 3-х рядків: str1 , str2 , str3 .
Вивести в документ вміст змінної concatenation .

Числовий тип (number)

В JavaScript існують такі числові типи:

int - цілий,
long - довгий цілий,
float - речовий.

Але явна вказівка типів в коді при оголошенні змінної не потрібнa!

Використовується неявне оголошення, без вказівки конкретного типу даних:

var x = 5; // цілий
var y = 5.6; // речовий

Інші приклади:

var x = 5e3; // 5000
var y = 5e-3; // 0.005

Префікс 16-кової системи в javascript 0x :

var x = 0xFF; // 255

Префікс 8-кової системи в javascript 0 :

var x = 045; // 37

var x = 0/0; // NaN - не число (not a number)
var x = 1/0; // Infinity (нескінченність)

Завдання Js 11. Виправте помилки при оголошенні локальних змінних у фрагментах коду:

String s = "String";
int a = 10;
long b = 25;
var name = "Мене звуть Вася";
var 2b = 10;
Var _@c = 15;
alert(Name);

Питання для самоконтролю:

В якому місці html-документа знаходиться стандартне розташування скрипта JavaScript?
За допомогою якого методу здійснюється вивід діалогового вікна?
Що таке типи даних? Які типи підтримує JavaScript?
За допомогою яких операторів створюються коментарі?

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

Оператори призначені для складання виразів.

Оператор застосовується до одного або двох даними, які в цьому випадку називаються операндами.

Наприклад, оператор додавання застосовується до двох операндам ( a + b ), а оператор логічного заперечення - до одного операнду ( ¬a ).

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

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

у = 5;
alert(y); // вивід 5
+= , –= присвоювання зі складанням або вирахуванням;

у = 5;
alert(y-=2); // вивід 3
*= , /= присвоювання з множенням або діленням.

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

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

складання в javascript: +

X + Y;
у = 5;
х = у +3; // дорівнює 8
віднімання в javascript: -

X - Y;
множення в javascript: *

X * Y;
ділення в javascript: /

X / Y;
javascript залишок від ділення або ділення по модулю: %

X = 8;
Y = 5;
X % Y; // 3
javascript інкремент або збільшення на 1: ++

Х = 8;
Х++; // 9

/* Префіксний інкремент виконується перед використанням змінної, приклад: */
var number = 100;
++number; // прийме значення 101

/* Постфіксний інкремент виконується після використання змінної, приклад: */
var number = 100;
number++; // прийме значення 100
alert(number); // виведе число 101
javascript декремент або зменшення на 1: --

Y = 9;
Y--; // 8

Завдання Js 12. Які значення виведе у вікно браузера наступний фрагмент коду?

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/>");

Завдання Js 13. Необхідно написати сценарій, який визначає площу прямокутного трикутника по заданим катетам (S = ab / 2). Сценарій розмістити в розділі body документа. За допомогою скрипта вивести у вікно браузера інкремент площі.

Алгоритм рішення задачі на javascript:

Ініціалізація двох змінних.
Обчислення площі.
Висновок инкремента з використанням методу write().

Питання для самоконтролю:

Що виконують арифметичні операції інкремент і декремент?
Яка різниця виконання инкремента ?:

S++

++S
Як позначається операція залишок від ділення?