Написание сценариев javascript

Javascript урок для начинающих. На уроке рассмотрены варианты внедрения сценариев в HTML-код. Синтаксис языка. Понятие операторов

В сети Интернет Вы найдете большое количество информации, посвященной языку JavaScript. Цель нашего портала заключается в последовательном логичном изложении кратких теоретических сведений по теме, с обязательным закреплением материала в виде практических заданий на основе решенных примеров. Представленные на сайте labs-org.ru лабораторные задания по javaScript выстроены последовательно по мере увеличения сложности, а готовые решенные примеры позволят с легкостью пройти материал даже новичку. Сайт можно использовать в качестве вспомогательного наглядного пособия для учителей и преподавателей.

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

Javascript — скриптовый (сценарный) интерпретируемый язык программирования, интерпретатор встроен непосредственно в браузер. Поэтому обработка скрипта (или другими словами — сценария) происходит на стороне клиента без обращения к серверной стороне

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

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

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

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

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

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

Таким образом, варианты тега script:

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

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

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

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

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

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

Итак, кратко резюмируем то, что необходимо знать о javascript:

• тег 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>

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

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

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

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

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

Задание Js 1. Вывести в окно браузера следующие данные: Ваше ФИО, возраст, хобби (каждое на новой строке). Затем то же самое выведите в консоль.

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

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 + имя переменной + = + значение + ;

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

или

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

или

Объявление переменной при помощи служебного слова let можно опускать

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

✍ Решение:
 

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

Константы в javaScript

Javascript типы данных

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

Важно: Но необходимо помнить, что в 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!");

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

Операции над строками

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

Пример:

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

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

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

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

Задание Js 8. Что должно быть в ответе на следующие присваивания?
"1"+2+3= ?
1+2+"3"= ?

Зачем в строке использовать знак доллара?

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

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

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

• вычитание в javascript: -
• умножение в javascript: *
• деление в javascript: /
• возведение в степень в javascript: **

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

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

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

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

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

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

 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

<h2 onclick="myclickcode()">
Текст, реагирующий на событие
</h2>
...
<script language=javascript>
function myclickcode() {
alert('Ты щелкнул Текст!');
}
</script>

<body onmousemove="mymousemovecode()" onclick="myclickcode()>

<h2 language=jscript onclick="alert('Ты щелкнул Текст!');">
Текст, реагирующий на событие
</h2>

<h2 onclick="alert('Ты щелкнул Текст!');">
Текст, реагирующий на событие
</h2>

<h2 id=myheading>Текст, реагирующий на событие</h2>
...
<script language=javascript for=myheading event=onclick>
alert('Ты щелкнул Текст!');
</script>

<html onmousemove="mymousemovecode()"
onclick="myclickcode()">
...
</html>

<h2 id=myheading>Текст, реагирующий на событие</h2>
...
<script language=javascript>
function myheading.onclick() {
alert('Ты щелкнул Текст!');
}
</script>

<script language=javascript>
function window.onload() {
alert('Загрузка страницы завершена.');
}
</script>

<form id=myform onsubmit="return checkaddress()"
action="http://www.some-web.com/file.cgi">
<input type=text id=email>
<input type=submit>
</form>

<script language=javascript>
function checkaddress() {
straddress = document.forms["myform"].elements["email"].value;
if (straddress.indexof("@") != -1) // содержит символ "@"
return true
else
}
alert('Проверьте правильность e-mail адреса!');
return false
}
}
</script>