Содержание
Мой первый скрипт "Привет, Мир!"
Локальные и глобальные переменные
Приоритет математических операций
Вычисляем длину окружности по её радиусу через константу
Калькулятор преобразования температуры по Цельсию в Фаренгейты
JavaScript - это язык программирования, используется в составе HTML-страниц. На JS можно реализовать функции, которые недоступны обычному HTML. Сценарии JS запускаются в результате какого-нибудь действия в браузере пользователя (нажатие кнопки, изменение размера окна и т.д.) Например, можно менять заголовок окна браузера или текст в строке состояния. Часто создают меню сайта на JS.
JavaScript нужен не только для программирования сайтов. Можно создавать компьютерные игры и многое другое, только запускать надо в браузере, в виде HTML-страницы. Это позволяет пользоваться нашей программой через Интернет в любой точке планеты.
Для запуска JS-программы (сценария) её надо внедрить в тело HTML-документа или связать HTML-страницу и внешний файл со скриптом. Делается это при помощи тегов <script></script> в голове документа внутри <head></head> или в теле документа между тегами <body></body>.
<script>
alert('Привет, мир!');
</script>
/* "alert" это функция, "Привет, мир! это параметр.
Параметр записывается в круглых скобках.
Несколько параметров пишутся через запятую.*/
Посмотреть выполнение скрипта (откроется в новом окне).
Листинг html-страницы полностью:
<html>
<head>
<script type="text/javascript">
alert("Привет, мир! Это моя первая программа!")
</script>
</head>
<body>
<h1>JavaScript - моя первая программа</h1>
<p>Мой первый сценарий JS.</p>
</body>
</html>
Скопируй этот листинг в программу Блокнот (а лучше в Notepad++), сохрани как любое_имя.html (расширение все файлы в Блокноте или Hyper Text Markup Language file в Notepad++). Открой этот файл в браузере и увидишь всплываюещее окно. Это и есть выполнение сценария скрипта.
Атрибутом language можно задать значение языка сценария JavaScript. Возможные ещё варианты значений языков: JScript (от Microsoft), VBScript (Visual Basic). Значение javascript задаётся по умолчанию, поэтому его можно не указывать. Атрибут language="JavaScript" не рекомендуется использовать по рекомендации спецификации HTML, т.к. его значений нет в стандартах.
Вместо language желательно применять type, который указывает MIME-тип определённого языка (type="text/javascript").
Атрибутом src="FileScript.js" мы можем подключить внешний файл со скриптом, если, к примеру, мы хотим разделить html-страницу и js-страницу с кодом скрипта для удобного раздельного редактирования.
Атрибут defer откладывает выполнение скрипта до полной загрузки HTML-документа. Так браузер быстрее отображает содержимое страницы без задержки на выполнение скрипта.
<script defer src="MyScript.js"></script>
Defer предназначен только для внешних скриптов и будет проигнорирован браузером, если не будет атрибута src.
<head> <script src="FileScript.js></script> </head>
/* Подключаем скрипт из внешнего файла. */
Подключаемся в заголовочной части страницы между тегами <head></head> или в основной части HTML-документа между тегами <body></body>:
<script src="script.js">
alert('text');
</script>
/* Пример нерабочего кода.
Надо или только писать код или только подключать файл.
Вместе код и подключаемый файл не работают. */
При обновлениях скрипта браузер может закешировать его и выдавать пользователю старую версию. Для обновления файла скрипта после имени скрипта добавляем ?v=1, где 1 это номер версии нашего файла.
<script src="script.js?v=1"></script>
/* Боремся с кешированием файла скрипта в браузере,
чтобы делать обновления. */
Строгий режим strict использует более ограниченный синтаксис языка. Это позволяет:
Включить строгий режим в JavaScript можно добавлением строки "use strict" в начало файла или функции.
первый пример
use strict;
function myFunction() {
}
/* активация строгого режима для всего скрипта */
второй пример
function myFunction () { 'use strict';
}
/* активация строгого режима внутри функции */
Диалоговые окна нужны для взаимодействия с пользователем. Такие окна выводят какие-либо информационные сообщения.
Метод alert() применяется для вывода простого окна с сообщением и одной кнопкой. Например, "ошибка пароля", "неправильный пароль" и т.д. Кроме донесения информации, в окне отсутствует взаимодействие с пользователем, не считая кнопки ОК для его закрытия.
Методу alert() передаётся только одна отображаемая строка. Чтобы вывести многострочное сообщение, применяется символ переноса строки \n.
alert("Вы ввели неправильный пароль!\nНу, сколько можно?\nКогда вы уже его запомните?");
Метод confirm() выводит окно с двумя кнопками, ОК и Cancel. Если пользователь нажимает ОК, то метод возвращает значение true, если Cancel, то возвращает false. Проанализировав возвращаемое значение мы можем выполнить какое-либо действие.
if (confirm("Нажмите ОК или Отмена")) {
alert("Вы нажали ОК");
}
else {
alert("Вы нажали Отмену");
}
/* для примера с помощью alert() мы выведем название каждой кнопки */
Метод prompt() выводит диалоговое окно с сообщением, полем ввода и двумя кнопками (ОК и Cancel) Введённое пользователем значение можно присвоить переменной. Диалог возвращает введённую пользователем строку. Если поле ввода останется пустым, диалог возвращает значение null.
Методу prompt() надо передать два параметра: строку с приглашением к вводу данных (сверху над полем ввода) и значение по умолчанию, которое будет передано в сценарий, если поле будет пустым при нажатии кнопки ОК.
var userName = prompt("Введите своё имя", "Иван Петрович НЛО"); if (userName == null) { alert("Гуд бай!"); } else { document.write( "Добро пожаловать, " + userName); }
Если пользователь нажмёт кнопку Отмена, то выйдет окно с текстом "Гуд бай". Если нажмёт ОК, то в HTML-документ будет выведена строка "Добро пожаловать, <введённый логин>.
Переменная - это область в памяти компьютера, имеет определённое имя и определённые данные.
При объявлении переменной желательно инициализировать её, т.е. указать первоначальное значение. Можно это сделать и потом, но если забыть инициализировать, то результаты вычисления м.б. неопределёнными.
let a
/* Объявляем переменную let с именем "a". */
var b
/* А это уже объявление другой переменной var (от слова variable) с именем "b". */
Когда выбрать var? Когда нужна переменная с функциональной областью видимости или глобальная переменная (хотя это не очень хорошая практика). Когда работаете с устаревшим кодом, где уже используется var.
Когда выбрать let? Когда вам нужна переменная с блочной областью видимости, которую не нужно тянуть в другие части программы. Когда вы хотите избежать неожиданного поведения, связанного с её поднятием.
В современной разработке и новых проектах разработчики предпочитают let и const из-за их предсказуемости и надёжности.
let a = 3; alert(a);
/* Объявляем переменную и присваиваем ей значение.
Выведет значение ("3"). */
или так
let = a; a = 3; alert(a);
/* Объявляем переменную.
Присвоим ей значение.
Выведем значение переменной на экран. */
Объявляем несколько переменных:
let a = 1; let b = 2; let c = 3;
или так
let a = 1, b = 2, c = 3;
/* предыдущий код можно упростить */
Ещё вариант:
let a, b, c; a = 1; b = 2; c = 3;
/* Объявляем сразу все три переменные.
Присваиваем переменным значения. */
Присваиваем несколько значий одной переменной:
let a; a = 1; alert(a); a = 2; alert(a);
/* Объявляем переменную.
Присваиваем ей значение.
Выводим на экран.
Присваиваем ей другое значение.
Выводим на экран. */
Одну и ту же переменную нельзя объявить несколько раз через let.
let a = 1; alert(a); let a = 2; alert(a);
/* выдаст ошибку */
Поэтому либо переименовываем переменную:
let a = 1; alert(a); let b = 2; alert(b);
Либо объявляем переменную "a" и дальнейшие операции проводим с ней:
let a; a = 1; alert(a); a = 2; alert(a);
При указании значения переменной без кавычек она имеет тип целый (number), а при указании в кавычках - тип строковый (string).
var a = 123; var b = "123";
/* a - целое значение
b - строковое значение */
Мы уже знаем, что данные хранятся в переменных. И эти данные могут быть разных типов. При объявлении переменных тип данных не указывается. Выделяют следующие типы:
Javascript определяет тип переменной при её инициализации во время первого присваивания значения.
Nmbr1 = 3;
/* Переменной Nmbr1 присваивается целое значение 3, тип number. */
Nmbr2 = 3.3;
/* Переменная с плавающей точкой, тип number. */
Strc1 = "Введите логин";
/* Значение "Введите логин" заключено в кавычки, присвоен тип string (строковый). */
Strc2 = "3";
/* Цифра 3 заключена в кавычки, поэтому тип переменной определяется как строковый (string). */
Strc2 = '3';
/* Можно использовать кавычки как одинарные, так и двойные, разницы нет. Просто старайтесь сохранять последовательность и использовать или те, или другие. */
Booln2 = true;
/* Значение True определяется как логическая Булевая переменная. */
Objct2 = null;
/* Переменная не содержит данных, определяется как object. */
Мы можем посмотреть, какой тип присвоен переменной, при помощи оператора typeof. Оператор typeof возвращает строку, описывающую тип переменной. Сценарий ниже объявляет переменные, инициализирует их (присваивает значения) и потом выводит тип каждой переменной.
var Nmbr1, Nmbr2, Strc1, Strc2, Booln;
Nmbr1 = 3;
Nmbr2 = 3.3;
Strc1 = "Введите логин";
Strc2 = "3";
Booln2 = true;
Objct2 = null;
alert("Функция Nmbr1, значение параметра: " + Nmbr1);
alert("Функция Nmbr2, значение параметра: " + Nmbr2);
alert("Функция Strc1, значение параметра: " + Strc1);
alert("Функция Strc2, значение параметра: " + Strc2);
alert("Функция Booln2, значение параметра: " + Booln2);
alert("Функция Objct2, значение параметра: " + Objct2);
document.write("<br>Nmbr1 - " + typeof(Nmbr1));
document.write("<br>Nmbr2 - " + typeof(Nmbr2));
document.write("<br>Strc1 - " + typeof(Strc1));
document.write("<br>Strc2 - " + typeof(Strc2));
document.write("<br>Booln2 - " + typeof(Booln2));
document.write("<br>Objct2 - " + typeof(Objct2));
Посмотреть результат выполнения скрипта в новом окне.
При вычислениях Javascript может преобразовать тип данных. Цифре 3 без кавычек присвивается тип number, а если она заключена в кавычки (одинарные или двойные), то присваивается строковый тип string, как мы уже говорили выше. Результат присваивания мы можем вывести на страницу.
var a = 5;
var b = "5";
var c = a + b;
var d = b + a;
alert("Результат " + a + " в функции a.");
alert("Результат " + b + " в функции b.");
alert("Результат " + c + " в функции c.");
alert("Результат " + d + " в функции d.");
document.write("<br>a - " + typeof(a));
document.write("<br>b - " + typeof(b));
document.write("<br>c - " + typeof(c));
document.write("<br>d - " + typeof(d));
/* Переменной a присвоено значение цифра 5, тип number.
Переменной b присвоено строковое значение 5, тип string.
При сложении (number + string) результат будет 55, string.
При сложении (string + number) результат будет 55, string. */
Посмотреть выполнение скрипта в новом окне.
Для принудительного преобразования типов есть такие функции:
Преобразуем строку в целое число, функция parseInt:
var a = 5;
var b = "5";
var c = parseInt(b);
var d1 = a + b;
var d2 = a + c;
alert("Результат " + a + " в функции a.");
alert("Результат " + b + " в функции b.");
alert("Результат " + c + " в функции c.");
alert("Результат " + d1 + " в функции d1.");
alert("Результат " + d2 + " в функции d2.");
document.write("<br>a - " + typeof(a));
document.write("<br>b - " + typeof(b));
document.write("<br>c - " + typeof(c));
document.write("<br>d1 - " + typeof(d1));
document.write("<br>d2 - " + typeof(d2));
/* Переменной a присвоено значение цифра 5, тип number.
Переменной b присвоено строковое значение в кавычках цифра 5, тип string.
Функция parseInt в переменной "с" преобразует строку со значением 5 в число 5, тип становится number.
В переменной d1 складывается число и строка, результат 55, тип string.
При сложении a + c в переменной d2 результат будет 10, тип number,
т.к. мы преобразовали строку в число. */
Посмотреть результат выполнения скрипта в новом окне.
Преобразуем строку в число с плавающей запятой, функция parseFloat:
var a = 4.5;
var b = "5.5";
var c = parseFloat(b);
var d1 = a + b;
var d2 = a + c;
alert("Результат " + a + " в функции a.");
alert("Результат " + b + " в функции b.");
alert("Результат " + c + " в функции c.");
alert("Результат " + d1 + " в функции d1.");
alert("Результат " + d2 + " в функции d2.");
document.write("<br>a - " + typeof(a));
document.write("<br>b - " + typeof(b));
document.write("<br>c - " + typeof(c));
document.write("<br>d1 - " + typeof(d1));
document.write("<br>d2 - " + typeof(d2));
/* Переменной a присвоено значение цифра 4.5, тип number.
Переменной b присвоено строковое значение в кавычках цифра 5.5, тип string.
Функция parseFloat в переменной "с" преобразует строку со значением 5.5 в число 5.5, тип становится number
При сложении строки и числа в переменной d1 результат будет 4.55.5
При сложении числа с преобразованным числом a + c в переменной d2 результат будет 10. */
Вычислим строковое значение при помощи функции eval.
var a = "2 + 2";
var b = eval(a);
alert("Результат " + a + " в функции a.");
alert("Результат " + b + " в функции b.");
document.write("<br>a - " + typeof(a));
document.write("<br>b - " + typeof(b));
/* Переменной a присвоено строковое значение 2 + 2, тип string.
Функция evai преобразует строку в числа и сразу складывает их, результат 4, тип number. */
Посмотреть результат вывода скрипта в новом окне.
Локальные и глобальные переменные есть не только в языке Javascript, но и в других языках программирования.
Глобальные переменные объявляют в начале скрипта, чтобы все фунции наследовали эти переменные и их значения.
Сложение:
let a = 1 + 2; alert(a);
/* сложение, выведет 3 */
Вычитание:
let b = 3 - 2 alert(b);
/* вычитание, выведет 1 */
Умножение:
let c = 3 * 2; alert(c);
/* умножение, выведет 6 */
Деление:
let d = 4 / 2; alert(d);
/* деление, выведет 2 */
Операции с переменными, а не с числами:
let a = 1; let b = 2; alert(a + b);
/* Можно складывать не числа, а переменные.
Выведет 3. */
Ещё вариант:
let a = 1; let b = 2; let c = a + b; alert(c);
/* Выведет 3.
Не обязательно сразу выводить результат операции, можно записать результат в другую переменную
и вывести на экран её. */
Математические операции JavaScript имеют такой же приоритет, как в обычной математике. То есть в начале выполняется умножение и деление, а потом уже сложение и вычитание.
let a = 7 + 5 * 3; alert(a);
/* 5 умножается на 3, потом прибавляется 7, выведет 22. */
Умножение и деление имеют равный приоритет и выполняются по очереди слева направо.
let a = 8 / 2 * 4; alert(a);
/* Выполняется сначала деление, потом умножение, выведет 16. */
Поменяем местами значения.
let a = 8 * 2 / 4; alert(a);
/* Сначала выполняется умножение, потом деление, выведет 4. */
let a = 16 / 2 / 2 / 2; alert(a);
/* Каждая новая операция деления применяется к предыдущей, выведет 2. */
Круглыми скобками можно задать приоритет.
let a = 2 * (2 + 3); alert(a);
/* Сначала 2 + 3 = 5, затем 5 * 2 = 10, выведет 10. */
let a = 2 * (2 + 4 * (3 + 1)); alert(a);
/* Скобок может быть любое количество, выведет 36. */
let a = (2 * 2) + 3; alert(a);
/* В скобки можно заключить приоритетные операции, это не будет ошибкой, выведет 7. */
let a = (8 / 2) * 4; alert(a);
/* Иногда скобки указывают там, где операции не так очевидны, выведет 16. */
В JavaScript можно работать с десятичными дробями. При этом целая и дробная части отделяются друг от друга точкой.
let a = 1.5 + 0.75; alert(a);
/* выведет 2.25 */
Отрицательное число задается знаком "-".
let a = -1; alert(a);
/* выведет -1 */
let a = 1; let b = -a; alert(b);
/* Записали в b содержимое а, но с обратным знаком, выведет -1. */
или так:
let a = 1; alert(-a);
/* выведет -1 */
Существует оператор %, с помощью которого можно найти остаток от деления одного числа на другое:
alert(10 % 3);
/* Выведет 1 (10 делим на 3 = 9, остаток 1). */
alert(10 % 2);
/* Выведет 0, т.к. 10 на 2 делится без остатка. */
let a = 10; let b = 3; alert(a % b);
/* Применили оператор % к переменным, выведет 1. */
Для возведения числа в степень применяется оператор **.
alert(10 ** 3);
/* 10 в третьей степени, выведет 1000. */
let a = 10; alert(a ** 3);
/* Возводим в 3-ю степень переменную, выведет 1000. */
или так:
let a = 10; let b = 3; alert(a ** b);
/* И число, и степень содержатся в переменных. Выведет 1000. */
Операция возведения в степень имеет приоритет перед умножением и делением.
alert(5 * 2 ** 3);
/* Сначала 2 возводится в 3-ю степень, это 8, потом 8 умножается на 5, ответ 40. */
let a = 1 * 2 ** 3 * 5; alert(a);
/* 2 в третьей степени это 8, умножаем на 1 это 8, умножаем на 5, это 40. */
Данные в JavaScript могут состоять не только из чисел, но и из строчек.
let str = "abc"; alert(str);
/* Строки задаются кавычками, одинарными или двойными, значения не имеет, любыми.
Выведет abc. */
let str = "abc" + "def"; alert(str);
/* Строки можно складывать.
Выведет abcdef. */
Строки могут храниться в переменных:
let str1 = "abc"; let str2 = "def"; alert(str1 + str2);
/* Объявляем строковое значение abc для переменной str1.
Объявляем строковое значение def для переменной str2.
Выведет abcdef. */
Складываем переменные и строки:
let str1 = "abc"; let str2 = "def"; alert(str1 + "!!!" + str2);
/* Можно складывать переменные и строки.
Выведет abc!!!def. */
let str = "abc" alert(str + " " + "def");
/* Вставляем пробел, выведет abc def. */
let str = "abc"; alert(str + " def";
/* Ещё вариант с пробелом, выведет abc def. */
Считаем количество символов в строке, свойство length:
let str = "abcde"; alert(str.length);
/* Подсчёт кол-ва символов в строке при помощи свойства length, выведет 5. */
alert("abcde".length);
/* Свойство length можно применять непосредственно к строке, выведет 5. */
alert("ab de".length);
/* Пробел это также символ, выведет 5. */
Есть особые одинарные кавычки ` - косые (где буква ё на клавиатуре). В косых кавычках можно вставлять переменную. Для этого имя переменной надо писать в конструкции ${}.
let str1 = "ccc";
let txt1 = `vvv ${str1} ddd`;
alert(txt1);
/* Выведет vvv ccc ddd. */
let str2 = "yyy";
let str3 = "kkk";
let txt2 = `aaa ${str2} bbb ${str3} ccc`;
alert(txt2);
/* Выведет aaa yyy bbb kkk ccc. */
Для многострочного кода перенос строки в одинарных или двойных кавычках не работает. Для этого используются косые одинарные кавычки ` (ё).
let str = 'abc def';
/* Так не будет работать, кавычки одинарные.
let str = "abc def";
/* и так не будет работать, кавычки двойные. */
let str = `abs def fed cba`; alert(str);
/* А так будет работать, кавычки косые. */
В JS, как и в других языках программирования, есть ключевые слова для некоторых специальных значений: undefined, null, true, false, NaN, Infinity, -Infinity.
Значение undefined обозначает неопределённость. Такое значение будет у переменной, если мы объявили её, но не записали значение.
let a; alert(a);
/* выведет undefined */
let a = undefined; alert(a);
/* Это значение можно присвоить переменной явно.
Выведет undefined. */
Значение null обозначает "ничего". Можно присвоить это значение переменной в знак того, что там ничего не лежит.
let a = null; alert(a);
/* Выведет null. */
Используются там, где предполагается два ответа: да или нет.
let a = true, b = false; alert(a); alert(b);
Значение NaN обозначает Не Число. Такое значение получается при попытках делать математические операции не с числами, а с чем-то другим. Например, при умножении строки на число.
let str1 = "abc" let str2 = "edf" alert(str1 * str2);
/* Выведет NaN. */
Такие значения получаются, если какое-то число поделить на ноль, то в этом случает JavaScript не выдает ошибку, как в других языках программирования, а возвращает эти значения:
alert(1 / 0); alert(-1 / 0);
/* Выдаст Infinity.
Выдаст -Infinity. */
|
abstract boolean break byte case catch char class const continue default do double else extends false final finally |
float for function goto if implements import in instanceof int interface long native new null package private |
protected public return short static super switsh sinchronized this throw throws transient true try var void while with |
Для строковых параметров можно использовать специальные символы. Например, символ \n вставит разрыв строки, что может оказаться полезным для больших сообщений.
alert("Привет, мир!\nЭто мой первый скрипт!");
Для удобства программистов в каждом браузере есть специальная панель разработчика. Чтобы открыть эту панель, вам нужно, находясь на странице сайта, кликнуть правой кнопкой мышки в любое место. В появившемся меню нужно выбрать самый нижний пункт (он будет называться "Просмотреть код", "Исследовать элемент", "Проверить", "Inspect", или "Настройки браузера > Дополнительные возможности > Инструммент разработчика" и т.п.).
В открывшейся панели вы в основном будете пользоваться двумя вкладками: Elements и Console. В первой вкладке вы можете получать информацию по тегам страницы, а во второй - отладочную информацию JavaScript.
С помощью команды console.log вы в своих скриптах можете выводить данные в консоль. Это применяется для того, чтобы заниматься отладкой программ.
console.log(123);
/* Выведет в консоли 123. */
let num1 = 123, num2 = 567, num3 = 321; console.log(num1, num2, num3);
/* Выведет в консоль 123 567 321. */
В консоли разным цветом выводятся строки и числа. Это часто помогает найти ошибки в программах.
console.log(123);
console.log("123");
/* Цвет вывода числовых и строковых данных будет отличаться. */
Когда вы в вашем коде допускаете синтаксическую ошибку, JavaScript выведет информацию об этом в консоль. Такая ошибка будет выведена красным цветом, а справа от нее будет указан номер строки, на которой случилась эта ошибка. Этот номер является ссылкой - на него можно нажать и в консоли откроется ваш код на строке с ошибкой.
Попробуем обратиться к несуществуещей переменной. В этом случае JavaScript выдаст ошибку:
let str1 = "abc"; let str2 = "edf"; alert(StrStr);
/* выведет NaN
Uncaught ReferenceError: StrStr is not defined */
Кроме переменных в JavaScript можно создавать еще и константы. В них можно записывать данные только один раз, а затем их значения нельзя изменять. Константы объявляются с помощью оператора const.
Обычно константы используются для значений, которые не должны быть случайно изменены в коде. Для примера сделаем константу, в которой будет хранится значение числа Пи:
const pi = 3.14;
Обычно константы записываются большими буквами, чтобы их можно было отличить от обычных переменных:
const PI = 3.14;
Длина окружности через радиус считается по формуле: С = 2PI * R
PI = 3.14, радиус R (например) = 20 см. 2 x 3,14 x 20 = 125,6 см
const PI = 3.14; let okr; okr = 2 * PI * 20; alert(okr);
/* Выведет 125,60000000000001. */
Посмотреть выполнение скрипта.
var tempC; var tempF = (9 / 5) * tempC + 32;
LitObr@ya.ru
2021 - 2025 гг.