Синтаксис javascript, урок для початківців з прикладами скриптів

1. Додавання сценаріїв Javascript в HTML
Додавання javascript в html
2. Синтаксис javaScript, основні поняття
Правила оформлення скрипта JavaScript
JavaScript коментарі
Оголошення змінних в javaScript і оператор присвоювання
Константи в javaScript
Javascript типи даних
Логічний тип (boolean)
Строковий тип (string)
Числовий тип (number)
3. Арифметичні оператори javascript

Наша взаимовыгодная связь https://banwar.org/

Javascript урок для початківців. На уроці розглянуті варіанти впровадження сценаріїв в HTML-код. Синтаксис мови. поняття операторів

В мережі Інтернет Ви знайдете велику кількість інформації, присвяченій мови JavaScript. Мета нашого порталу полягає в послідовному логічному викладі коротких теоретичних відомостей по темі, з обов'язковим закріпленням матеріалу у вигляді практичних завдань на основі вирішених прикладів. Представлені на сайті labs-org.ru лабораторні завдання по javaScript збудовані послідовно в міру збільшення складності, а готові вирішені приклади дозволять з легкістю пройти матеріал навіть новачкові. Сайт можна використовувати в якості допоміжного наочного посібника для вчителів і викладачів.

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

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

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

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

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

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

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

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

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

<Sсript language = "javascript"> ... </ sсript>

Діючі варіанти:

Варіант з прикріпленим файлом скрипта:

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

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

Додавання javascript в html

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

✍ Рішення:

1. Вбудовування JavaScript безпосередньо в HTML-сторінку:

Створіть html-сторінку з наступним кодом:

<Script type = "text / javascript"> document. write ( "Це JavaScript!"); </ Script>

<Script type = "text / javascript"> document.write ( "Це JavaScript!"); </ Script>

<! - Кінець сценарію -> <hr> Це звичайний HTML документ. </ Body> </ html>

В даному прикладі дескриптор script може перебувати як в тілі документа, тобто тезі body (як в прикладі), так і в області head.

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

2. Розміщення сценарію в зовнішньому файлі:

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

</ 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. Подивіться на результат в браузері. <Script type = "text / javascript"> alert ( "Hello?"); document. write ( "Hello!"); </ Script>

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

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

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

Приклад 3:

Перенесіть скрипт в BODY після тега H1. Подивіться на результат. <H1> <sсript type = "text / javascript"> alert ( "Hello?"); document. write ( "Hello!"); </ Sсript> </ h1>

<H1> <sсript type = "text / javascript"> alert ( "Hello?"); document.write ( "Hello!"); </ Sсript> </ h1>

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

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

Завдання Js 2.

Написати сценарій (javascript) для виведення двох рядків тексту, червоною і синьою.

зауваження:
Теги html для оформлення тексту кольором: <font color = "red"> Новий рядок </ font>

<Font color = "red"> Новий рядок </ font>

Завдання Js 3.

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

document. whrit ( "Проблеми?");
document.whrit ( "Проблеми?");

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

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

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

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

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

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

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

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

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

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

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

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

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

Важливо:

Мова JavaScript чутливий до регістру: // змінні розрізняються: counter = 1 Counter = 1

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

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

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

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

приклад:
приклад:

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

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

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

Правила оформлення скрипта JavaScript

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

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

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

a = 5 document.write (a)

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

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

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

блок - це набір операторів (складовою оператор), укладений у фігурні дужки {}.

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

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

JavaScript коментарі

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

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

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

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

Завдання Js 4.

Виправте помилки у фрагменті коду: alert ( "Hello World!"); / Це однорядковий коментар

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

Оголошення змінних в javaScript і оператор присвоювання

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

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

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

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

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

Оголошення змінної можна об'єднати з привласненням: var + ім'я змінної + = + значення +;

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

приклад:

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

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

або

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

або

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

✍ Рішення:

Створіть 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;

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

Константи в javaScript

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

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

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

Javascript типи даних

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

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

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

Тип даних приклад / пояснення javascript undefined type

значення, яке використовується для змінних або властивостей об'єкта, значення для яких не існує або воно не присвоєно

Null type var x = 1; x = null // порожнє значення

var x = 1; x = null // порожнє значення

значення, яке вказує на відсутність об'єкта

Boolean type
логічний (true або false) String type
строковий Number type
числовий RegExp
регулярні вирази Object type Програмний об'єкт, який визначається своїми властивостями

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

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

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

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

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

Оператор Назва Приклад! Заперечення (логічне НЕ)! Х && логічне І 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 = new String ( "Hello!");
ім'я_змінної = "строковое_значеніе";
var ім'я_змінної = "строковое_значеніе";

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

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

приклад:

var x = "При"; var y = "вет"; var s = x + y; //"Привіт"

Спеціальні символи:

\ N - новий рядок
\ T - табуляція

Приклад 5:

Реалізуйте наведений нижче код, щоб подивитися, як працюють спеціальні символи в javascript. Запустіть сторінку в браузері: alert ( "мама мила раму"); alert ( "мама \ n мила \ n раму");

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.

Навіщо в рядку використовувати знак долара?

Знак долара $ всередині рядка використовується для перекладу строкового значення в число і обчислення виразів. Для використання знака необхідно рядок поміщати в одинарні зворотні лапки `...`, а числове вираз - в фігурні дужки {}:

Приклад 1: `2 + 3 = $ {2 + 3}` // результат: '2 + 3 = 5'

`2 + 3 = $ {2 + 3}` // результат: '2 + 3 = 5'

Тобто вираз після знака $, поміщене в фігурні дужки, буде обчислюватися і приклеюватися до рядка зліва.

Приклад 2:

var s = `a = $ {a}, b = $ {b}`; // var s = 'a =' + a + ', b =' + b;

Ось так виглядає гарний висновок результату для рядка s.

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

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

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

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

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

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

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

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

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

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

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

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

Як змінити тип змінної?

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

Компактні перетворення: + x // до числа x + '' // до рядка !! x // до булеву типу

+ X // до числа x + '' // до рядка !! x // до булеву типу

Завдання Js 11.

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

String s = "String"; int a = 10; long b = 25;
String s = "String"; int a = 10; long b = 25;
var name = "Мене звуть Вася"; var 2b = 10; Var _ @c = 15; alert (Name);
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: -
множення в javascript: *
розподіл в javascript: /
піднесення до степеня в javascript: **

X = 8; Y = 2; X ** Y; // 64

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: -

Завдання 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/>");

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

Майте на увазі, так як змінна str є строковим типом, то змінна a типу Number неявно перетвориться в рядок і далі проводиться операція конкатенації. Але якщо операція складання для строкового значення існує, то операції ділення і віднімання для рядків відсутні, відповідно, дії будуть відбуватися з числами.

Js 13.

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

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

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

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

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

S ++
++ S

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

Hello?
Hello?
Hello?
Hello?
Проблеми?
Який метод javaScript використовується для виведення тексту (html-коду) на сторінку?
Навіщо в рядку використовувати знак долара?
За допомогою якого методу здійснюється висновок діалогового вікна?
Що таке типи даних?
Які типи підтримує JavaScript?

Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Синтаксис javascript, урок для початківців з прикладами скриптів

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

Додавання javascript в html

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

Правила оформлення скрипта JavaScript

JavaScript коментарі

Оголошення змінних в javaScript і оператор присвоювання

Константи в javaScript

Javascript типи даних

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

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

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

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