Javascript урок 1. Внедрение сценариев в HTML

1. Добавление сценариев Javascript в HTML

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

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

<script type="text/javascript">
</script>

Или сегодня можно использовать упрощенный вариант:

<sсript>
</sсript>

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

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

1. Устаревший вариант:

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

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

2. Действующие варианты:

<script type="text/javascript">...</script>

<script type="text/javascript">...</script>

<script>...</script>

<script>...</script>

3. Вариант с прикрепленным файлом скрипта:

<script src="/jscripts/myscript.js"> </sсript>

<script src="/jscripts/myscript.js"> </sсript>

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

Добавление javascript в html

Встраивание javascript в html происходит двумя основными способами, которые рассмотрим на примере:

Пример 1: Вывести в браузере сообщение «Это JavaScript!», используя скрипт на языке JavaScript.

✍ Решение:
 

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

<script> 
  alert ("Hello?"); 	
  document.write("Hello!");
</script>

Обратите внимание, как работает javascript, помещенный в теги оформления шрифта:

<h1>
<sсript>
  alert ("Hello?"); 	
  document.write("Hello!");
</sсript>
</h1>

console.log(...);

<h1>
<sсript>
  console.log("Hello!");
</sсript>
</h1>

Задание Js 2. Написать сценарий (javascript) для вывода двух строк текста, красной и синей.

Замечание:
Теги html для оформления текста цветом:

<font color="red">Красная строка</font>

<font color="red">Красная строка</font>

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

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

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

Рассмотрим некоторые понятия, относящиеся к синтаксису языка:

Сценарий — текст, состоящий из:

• операторов,
• блоков, т. е. взаимосвязанных наборов операторов, и
• комментариев.

Операторы могут содержать:

• переменные — могут изменять свое значение в программе,
• константы — не изменяют свое значение,
• выражения.

Идентификаторы (identifiers) — имена переменных, методов и объектов:

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

//переменные различаются:
counter=1
Counter=1

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

Есть определенные устоявшиеся среди программистов правила для идентификаторов (имён) переменных, функций, массивов и классов. Рассмотрим их:

• num_docs — знак подчеркивания между словами — хорошо, но есть способ лучше
• numDocs — вот такой «верблюжий» стиль превосходно подходит для именования переменных:
• все имена строчными буквами,
• на стыке слов — большая буква,
• переменные и свойства — называем именами существительными,
• массивы и коллекции — называем существительными во множительном числе,
• функции и методы — называем глаголами,
• название классов — с заглавной буквы.

Пример:

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

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

Литералы (literals) — это постоянные значения JavaScript. Это значения, которые не изменяются во время выполнения сценария (целочисленные литералы, литералы с плавающей точкой, логические литералы (true и false), строковый литерал — это ноль и более символов, заключенных в двойные («») или одиночные (») кавычки).

Правила оформления скрипта 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);

• блок — это набор операторов (составной оператор), заключенный в фигурные скобки { }.

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

JavaScript комментарии

// проверка
 
/* здесь может быть ошибка
a=5;
document.write(a);
*/

alert("Hello World!"); / это однострочный комментарий

Объявление переменных в javaScript и оператор присваивания

Переменная (variable) — это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные.

JavaScript — нетипизированный язык. Это значит, что переменные принимают тот тип данных, значение которого в них присваивается. Напрямую задавать тип переменной не надо.

let + имя переменной + ;

let i;

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

i=0;

let + имя переменной + = + значение + ;

let i=0;

Таким образом, резюмируем. Существует три варианта объявления с присваиванием:

1. let hello = "привет";

   let hello = "привет";

или

2. let hello; hello="привет";

   let hello; hello="привет";

или

3. hello="привет";

   hello="привет";

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

✍ Решение:
 

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

Константы в javaScript

const MyX=2;

Javascript типы данных

Определение типа данных необходимо для установления операций, которые можно выполнить над переменными этого типа данных.

Интерпретатор определяет тип переменной по правой части (по присвоенному ей значению).
Объявление локальных переменных осуществляется при помощи ключевого слова let.

let x;
alert (x);

let x = 1;
x = null //пустое значение

let x=false;

let x="Привет";

let x=3.14;
let y=-567;

Логический тип (boolean)

Пример использования логического типа:

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

Javascript логические операторы:

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

Три способа создания строкового объекта:

1. имя_переменной = new String("строковое_значение");

   myString = new String ("Hello!");

   myString = new String ("Hello!");

2. имя_переменной = "строковое_значение";

   myString = "Hello!";

   myString = "Hello!";

3. let имя_переменной = "строковое_значение";

   let myString = "Hello!";

   let myString = "Hello!";

• Конкатенация объединение строк:

Пример:

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

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

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

\n — новая строка
\t — табуляция

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

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

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

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

let x = 5; // целое
let y = 5.6; // вещественное

Другие примеры:

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

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

let x = 0xFF; // 255

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

let x = 045; // 37

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

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

3. Арифметические операторы javascript

Операторы предназначены для составления выражений.

Оператор применяется к одному или двум данным, которые в этом случае называются операндами.

Например, оператор сложения применяется к двум операндам (a + b), а оператор логического отрицания — к одному операнду (¬a).

Арифметические операторы:

• сложение в javascript: +

X + Y; у = 5; х = у + 3; // равно 8

X + Y; у = 5; х = у + 3; // равно 8

• вычитание в javascript: -

X - Y;

X - Y;

• умножение в javascript: *

X * Y;

X * Y;

• деление в javascript: /

X / Y;

X / Y;

• возведение в степень в javascript: **

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

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

• javascript остаток от деления или деление по модулю: %

X = 8; Y = 5; X % Y; // 3

X = 8; Y = 5; X % Y; // 3

• javascript инкремент или увеличение на 1: ++

Х = 8; Х++; // 9   /* Префиксный инкремент выполняется перед использованием переменной, пример:*/ let number = 100; ++number; // примет значение 101   /*Постфиксный инкремент выполняется после использования переменной, пример:*/ let number = 100; number++; // примет значение 100 alert(number); // выведет число 101

Х = 8; Х++; // 9 /* Префиксный инкремент выполняется перед использованием переменной, пример:*/ let number = 100; ++number; // примет значение 101 /*Постфиксный инкремент выполняется после использования переменной, пример:*/ let number = 100; number++; // примет значение 100 alert(number); // выведет число 101

• javascript декремент или уменьшение на 1: --

Y=9; Y--; // 8

Y=9; Y--; // 8

 let str = "20";
 let a = 5;
 document.write(str + a + "<br/>");
 document.write(str - a + "<br/>");
 document.write(str * "2" + "<br/>");
 document.write(str / 2 + "<br/>");

Площадь прямоугольного треугольника со сторонами 8 и 10 = 40
Инкремент площади = 41