Печатать книгуПечатать книгу

§ 22. Основы языка JavaScript

Сайт: Профильное обучение
Курс: Информатика. 11 класс (Повышенный уровень)
Книга: § 22. Основы языка JavaScript
Напечатано:: Гость
Дата: Четверг, 3 Июль 2025, 14:31

Оглавление

22.1. Общие сведения

JavaScript (JS) — высокоуровневый, мультипарадигменный язык программирования. То есть, JS поддерживает как объектно-ориентированное программирование, так и функциональное программирование.

Состоит JavaScript из трёх частей:

1. Ядро (ECMAScript) — базовая функциональность JavaScript.

2. Объектная модель документа (Document Object Model, DOM) — средства для работы с содержимым веб-страниц.

3. Объектная модель браузера (Browser Object Model, BOM) — средства для взаимодействия с браузером.

Сценарии JavaScript позволяют:

  1. Добавлять html-код на страницу, изменять существующее содержимое, модифицировать стили.
  2. Создавать различные визуальные эффекты (слайдеры, галереи картинок, динамический текст и т. д.).
  3. Реагировать на действия пользователя, щелчки мыши, перемещения указателя, нажатие клавиш.
  4. Выводить информацию в новых окнах.
  5. Задавать вопросы посетителю, показывать сообщения.
  6. Запоминать данные на стороне клиента.

Скрипт может быть вставлен в любое место html-документа с помощью тега <script> (пример 22.1).

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

Скрипт можно поместить в отдельный файл с расширением .js. Файл со скриптом может быть создан в любом редакторе кода, так же как html-файлы и css-файлы.

Как правило, только простейшие скрипты помещаются в html-документ. Более сложные выделяются в отдельные файлы. Файл скрипта можно подключить к html-документу с помощью атрибута src (пример 22.2).

В одном теге <script> нельзя использовать одновременно атрибут src и код внутри (пример 22.3).

Синтаксис JavaScript сходен с синтаксисом языка C++ . Так же как и в С++, код JavaScript содержит синтаксические конструкции и команды, которые соответствуют определенным действиям — инструкции. Разделяются инструкции точкой с запятой.

В JavaScript можно воспользоваться стандартными методами работы с диалоговыми окнами для ввода-вывода данных (пример 22.4):

1) alert() — позволяет выводить диалоговое окно с заданным сообщением и кнопкой OK. Методу передается только одна строка. Чтобы отобразить многострочное сообщение, в месте разделения строки нужно добавить \n.

2) confirm() — позволяет вывести диалоговое окно с сообщением и двумя кнопками — OK и Отмена. Метод возвращает логическую величину, значение которой зависит от того, какой выбор сделал пользователь.

3) prompt() — выводит на экран диалоговое окно, которое запрашивает у пользователя информацию. Кроме кнопок OK и Отмена в окне есть текстовое поле для ввода данных. Метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле по умолчанию. Возвращает значение, введенное в текстовом поле, если выбрать OK. Если выбирается Отмена или окно закрывается иным образом, то возвращается null.

На время показа диалогового окна выполнение кода приостанавливается и возобновляется после его закрытия.

Язык JavaScript интерпретируемый, а это означает, что если в скрипте есть ошибка, то браузер просто проигнорирует ошибочный код. Выполнить отладку скрипта можно, используя специальные возможности браузера — инструменты разработки. Точный внешний вид инструментов разработки зависит от используемого браузера и его версии.

В примере 22.5 рассматривается использование инструментов разработчика одного из популярных браузеров.

Язык JavaScript вместе с HTML и CSS входит в базовый набор инструментов веб-разработчика. На JavaScript создаются приложения, которые исполняются в браузере на стороне клиента и обеспечивают интерактивность сайтов.

Ограничения возможностей языка JavaScript предотвращают доступ к личной информации и препятствуют нанесению ущерба данным пользователя.

Примеры ограничений JavaScript:

  • Нельзя читать/записывать произвольные файлы на жёстком диске, копировать их или запускать программы. Прямой доступ к системным функциям ОС отсутствует.
  • Скрипт с одной страницы не имеет доступа к другой, если они пришли с разных сайтов.
  • Ограничена способность получать данные с других сайтов/доменов.

Пример 22.1. JavaScript  в HTML-документе.

1) Размещение скрипта (метод alert() позволяет вывести какой-либо текст в диалоговом окне браузера):

<html>

 <body>

   <p>Начало...</p>

     <script>

       alert('Привет мир!')

     </script>

   <p>...Конец</p>

 </body>

 </html>

2) Диалоговое окно:

3) Веб-страница после подтверждения действия в диалоговом окне:

Пример 22.2. Подключение js-файла.

<script src = "/js/my.js">

 </script>

Пример 22.3. Использование тега <script> и атрибута src.

Содержимое тега игнорируется при одновременном использовании тега и атрибута:

<script src = "my.js">

    alert('Проверка');

 </script>

Можно разделить на два тега:

<script src = "my.js">

 </script>

 <script>

    alert('Проверка');

 </script>

Если скрипт находится в отдельном js-файле, браузер загрузит скрипт отдельно и сможет хранить его в кэше (специальном месте на жестком диске компьютера, куда сохраняются ранее посещенные страницы).

При этом файл будет загружаться с сервера только один раз, что экономит трафик и ускоряет загрузку страниц.

Пример 22.4. Ввод-вывод данных в диалоговые окна.

<script>

  alert ('Начнем работу?')

  var rez =

  prompt('Ваше имя?', '_');

  var ans =

  confirm ('Ввод верен?');

</script>

1) alert()

2)  prompt()

3) confirm()

Пример 22.5. Использование консоли разработчика Google Chrome.

Порядок работы:

1) Открыть веб-страницу в браузере.

2) Нажать клавишу F12. Откроется вкладка:

3) В консоли сообщение об ошибке выделяется красным цветом (в нашем примере это «Ошибка_здесь») и указывается номер строки кода с ошибкой.

Под сообщением об ошибке находится символ . Он обозначает командную строку, в которой можно редактировать и запускать инструкции JavaScript. Для их запуска нужно нажать Enter, а для перехода на новую строку — Shift + Enter.

22.2. Типы данных

В языке JavaScript определены простые и ссылочные типы данных (пример 22.6). Все ссылочные данные относятся к типу данных объект (object).

Переменные в JavaScript объявляет оператор var, инициализируя их при необходимости (пример 22.7). Имена переменных в JavaScript чувствительны к регистру. Необъявленные переменные не существуют до тех пор, пока к ним не выполнено присваивание. Рекомендовано всегда объявлять переменные, вне зависимости находятся они внутри функции или в глобальном контексте. Использование необъявленных переменных непредсказуемо.

Рассмотрим некоторые концепции использования простых типов данных в языке JavaScript:

  1. В JavaScript все типы данных являются динамическими. Это означает, что одна и та же переменная может использоваться для хранения разных типов данных и не нужно явно указывать тип переменных или тип возвращаемых функций (пример 22.8).
  2. Числовой тип данных number используется для работы с целыми и  вещественными числами в диапазоне от -253 до 253 (пример 22.9).
  3. Целые числа можно задавать не только в десятичной системе счисления, но и в двоичной (0b), восьмеричной (0) или шестнадцатеричной системе счисления (0x) с использованием префиксов, указанных в круглых скобках (пример 22.10).
  4. Для записи строк могут использоваться как одинарные, так и двойные кавычки (пример 22.11).
  5. Использование обратных (косых) кавычек позволяет встраивать в строку выражения, заключая их в ${…} (пример 22.12).
  6. Нулевой тип (null) содержит единственное специальное значение — null. Обычно оно используется для инициализации переменной, которой впоследствии будет присвоено значение.
  7. Переменные, объявленные без значения, имеют значение и тип undefined.
  8. Чтобы определить тип данных переменной, используется оператор typeof (пример 22.13). Это используется, когда нужно обрабатывать значения различных типов по-разному или просто сделать проверку.
  9. Чтобы создать значение типа bigint, необходимо добавить n в конец записи числа (пример 22.14).

JavaScript автоматически осуществляет преобразование типов при необходимости (неявно).

Неявное преобразование простых типов данных:

  1. Строковое преобразование. Для явного преобразования применяется оператор "+", у которого один из аргументов строка (пример 22.15).
  2. Численное преобразование. Происходит в математических функциях и выражениях, а также при сравнении данных различных типов (пример 22.16).
  3. Преобразование к логическому значению. Преобразование к true/false происходит в записи условия в управляющих конструкциях и при применении логических операторов (пример 22.17).

При сравнении значений разных типов каждое из значений приводится к числу (пример 22.18).

В подавляющем большинстве случаев неявное преобразование типов в JavaScript лучше избегать и при необходимости преобразования типа использовать функции преобразования (пример 22.19).

Пример 22.6. Типы данных в JavaScript.

Пример 22.7. Объявление переменных.

var n;

//объявление переменной

      

 var n1, n2, n_end;

//объявление группы переменных

      

 var n = 10;

/* объявление  и инициализация переменной */

Пример 22.8. Динамичность типов данных в JavaScript.

 var x;

// x имеет тип undefined

 

     x = 10;

// теперь x — число

 

     x = "Десять";

// теперь x - строка

Пример 22.9. Объявление чисел.

var x1 = 34.00;
var x2 = 34;

Пример 22.10. Использование в JavaScript чисел систем счисления, отличных от десятичной.

 alert(0b1111); //15

 alert(0xff);   //255

 alert(010);    //8

Пример 22.11. Объявление строк.

 var str = "Привет мир!";

 var str = 'Привет мир';

Пример 22.12. Встраивание выражения в строку.

var name = "Кастусь";

 alert

  (`Добрай ранiцы, ${name}!`);

// Добрай ранiцы, Кастусь!

Пример 22.13. Определение типа данных.

typeof ""   // "string"

 

 typeof "Сусвет" //"string"

 

 typeof 121    //"number"

 

 typeof 3.14    //"number"

 

 typeof (5 + 0.5) //"number"

 

 typeof true    //"boolean"

Пример 22.14. Использование типа bigInt.

const big_n = 10257816842624n;

Пример 22.15. Строковое преобразование.

alert(true + "_string");

// "true_string"

  alert("123 + " + 123);

// "123 + 123"

  alert(3 + "5");  // "35"

Пример 22.16. Численное преобразование.

var a = +"123";   // 123

 

alert(3 * "5");  // 15

 

alert(+true);    // 1

 

alert(+false);    // 0

Пример 22.17. Преобразование к логическому значению.

Значение

Преобразование

undefined, null

false

Числа

true
(кроме 0, NaN —false)

Строки

true
(кроме пустой строки "" — false)

Объекты

true

 Пример 22.18. Сравнение значений разных типов.

alert('2' > 1);    // true

alert('01' == 1); // true

Пример 22.19. Функции преобразования типов и их использование.

1) В строку (String):

String(123)        // '123'

 

String(-12.3)     // '-12.3'

 

String(null)    // 'null'

2) В число (Number, BigInt):

var a = Number("123");  //123

 

const big_n = BigInt(1025781);

//то же, что и 1025781n

const

n = BigInt("102578143555533");
//102578143555533

3) В логическое значение (Boolean):

Boolean('');         // false

Boolean(1);          // true

Boolean(-0);         // false

Boolean(undefined);  // false

22.3. Объекты. Методы работы с объектами

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

Объявление объекта в JavaScript:

var <имя объекта> = {
    <свойство_1>:<значение>,
    …
    <свойство_n>:<значение> };

Рассмотрите пример 22.20.

Каждый раз, когда скрипт пытается обратиться к свойству или методу значения простого типа, интерпретатор временно преобразует его в объект соответствующего типа. Временные объекты, в которые преобразуются значения примитивного типа, называют объектами обёртками. Сразу после обращения к свойству или методу объект обёртка уничтожается. Объекты обертки создаются только для значений типа number, string и boolean.

Объект String будет иметь тип данных object, если он создан с помощью оператора new (пример 22.21). Описание и примеры использования некоторых стандартных методов работы с объектом String приведены в Приложении.

В JavaScript для хранения упорядоченных данных используется  структура данных массив — Array. Элементы массива нумеруются, начиная с нуля. Существует несколько способов объявления массива (пример 22.22).

Размер массива может увеличиваться и уменьшаться в любое время. Атрибут массива length определяет общее число элементов массива. В массиве могут храниться элементы любого типа (пример 22.23).

Массивы расширяют объекты, так как предусматривают специальные методы для работы с упорядоченными структурами данных. Описание и примеры использования некоторых стандартных методов работы с объектом Array приведены в Приложении.

Для хранения математических констант и функции в JavaScript предназначен объект Math. Методы, с которыми работает этот объект аналогичны математическим функциям используемым в языке С++ (пример 22.24). Этот объект не работает с числами типа BigInt.

Для работы с датой и временем в JavaScript используются объекты Date. Такие объекты могут быть созданы только путём вызова функции Date с использованием оператора new. Некоторые свойства объекта Date:

  • Содержат дату в виде числа миллисекунд, прошедших с 01.01.1970.
  • Нумерация месяцев начинается с 0.
  • Если передано два аргумента, отсутствующие аргументы устанавливаются в стартовые значения.
  • Вызов функции Date без оператора new вернет строку с текущий датой и временем.
В примерах 22.25 и 22.26 рассмотрены случаи использования объекта Date и методы работы с объектами такого типа.

Пример 22.20. Создание объекта.

var

person = {firstName: "Ян",

         lastName: "Тур",

         age: 20,

         eyeColor: "серые"};

Пример 22.21. Объект String.

var
str = "Это простая строка";

 

var
s_O = new String("Объект String");

 

typeof strLit   //string

 

typeof s_O      //object

Пример 22.22. Способы объявления массива.

var holidays =

["1 мая","7 июня","3 июля"];

 

var holidays = new Array

("1 мая", "7 июня", "3 июля");

 

var holidays = new Array(3);

  holidays[0] = "1 мая";

  holidays[1] = "7 июня";

  holidays[2] = "3 июля";

Пример 22.23. Массив элементов с различным типом данных. Определение количества элементов.

 var a = [23, "Ян", true,

  function() {alert("мир");}];

 

 alert(a[1]);      // Ян

 

 alert(a.length);  // 4

Пример 22.24. Использование методов объекта Math.

var x = Math.PI;

 

 var y = Math.sqrt(16);

 

 var z = Math.round(4.7);

Тригонометрические функции  принимают в параметрах или возвращают углы в радианах. Для преобразования радианов в градусы, нужно поделить их на величину Math.PI/180. Для преобразования в обратном направлении, нужно умножить градусы на эту же величину.

Пример 22.25. Создание объекта Date.

 new Date();

// текущая дата и время

 

 new Date(0);

/* количество миллисекунд, прошедших с 01.01.1970 */

 

 new Date(1982, 8, 19);

// 1982-09-19

 

 new Date("January 1, 2022");

// 2022-01-01

 

 new Date(2020, 13, 1);

 new Date(2021, 1, 1);

/* обе функции будут содержать

дату 2021-02-01 */

 

 new Date(2021, 0, 1, 2, 3, 4);

// 2021-01-01 02:03:04

Пример 22.26. Методы объекта Date.

Методы

Описание

getFullYear()

Получить год
(из 4 цифр)

getMonth()

Получить месяц
(от 0 до 11)

getDate()

Получить число месяца (от 1 до 31)

getHours() getMinutes() getSeconds()

Получить соответствующие компоненты времени

getDay()

Получить день недели

 

var d = new Date(2021, 1, 28);

 

  d.setDate(d.getDate() + 2);

  alert(d); // 2 марта, 2021

 

var d = new Date;

 

  d.setDate(-1);

  alert(d);

/* предпоследнее число

предыдущего месяца */

Вопросы к параграфу

1. Какое динамическое поведение веб-страницы реализуют с помощью языка JavaScript?

2. С синтаксисом какого языка программирования сходен синтаксис языка JavaScript?

3. Каким образом можно внедрить скрипт в html-документ?

4. В чем разница между скриптом, размещенным в заголовке html-документа, и скриптом, размещенным в теле html-документа?

5. Какие методы используются для организации ввода-вывода в диалоговые окна? В чем их различие?

6. Какое расширение имеют файлы, содержащие скрипты?

7. Какие возможности отладки скриптов имеют браузеры?

8. Какие типы данных определены в языке JavaScript?

9. Как объявляются переменные в языке JavaScript?

10. В чем заключается динамичность типов данных в языке JavaScript?

11. Какие типы данных используются для хранения чисел, строк? В чем особенности их использование?

12. В чем заключается явное и неявное преобразование типов данных?

13. Какие типы данных являются объектами в языке JavaScript?

14. К каким типам данных могут быть созданы объекты обертки? 

Упражнения

 

1. Напишите скрипт, который отображает диалоговое окно с сообщением: "Привет, javascript!". Слова "Привет" и "javascript!" должны отображаться на разных строках диалогового окна.

2. Напишите скрипт, после запуска которого, появится запрос: "Ваше имя?", а затем, после ввода имени и щелчка на кнопке OK, в диалоговом окне браузера методом alert() должно быть выведено имя.

3. Создайте страницу, которая сначала выводит окно с запросом: "Введите свое имя". После ввода пользователем имени на странице должно появиться окно с запросом подтверждения: "Подтвердите правильность ввода". После нажатия OK должно появиться окно приветствия: "Здравствуйте, <введенное_имя>".

4. Определите переменные s, n, f и t со значениями "Привет", 123, true, "true". При помощи оператора определения типа убедитесь, что переменные принадлежат типам: string, number, boolean. Для вывода результатов используйте функцию alert().

5. Найдите значения выражений: 5 + 3; 5 — 3; 5 * 3; 5 / 3; 5 % 3; 3 % 5; 5 + '3'; '5' — 3; 75 + 'кг'. Для вывода результатов используйте функцию alert().

6. Определите тип результата выражений. Результат запишите в таблицу:

Выражение

9 / "3"

"number"+1+3

1+3+"number"

"4px"-3

null+1

Тип результата

 

 

 

 

 

 7. Имеется три переменные var a = 1, b = 3, c = " стульев". Сложите переменные так, чтобы в результате получилось выражение: "12 стульев". Для вывода результатов используйте функцию alert().

8. Дано:
var x = 15 * 4 + 25 - 55;

Выведите значение этого выражения в диалоговое окно. Измените выражение, расставив приоритетные скобки так, чтобы получить число -390.

9. Дано число n = 12345. Запишите каждую цифру этого числа в отдельный элемент массива a. Выведите результат.

10. Напишите функцию, которая принимает в качестве аргумента строку и удаляет из строки последовательности любых пробельных символов. Организуйте ввод и вывод.

11. Напишите функцию, которая преобразует первую букву каждого слова строки s в верхний регистр. Организуйте ввод и вывод.

12. Дана строка s. Реализуйте обрезание строки по следующему принципу: если количество символов в строке больше заданного d, то в переменную rez запишите первые d символов строки s и добавьте в конец троеточие '...'. Если количество символов в строке меньше или равно d, в переменную rez запишите содержимое переменной s без изменений.

13. Найдите гипотенузу c прямоугольного треугольника по теореме Пифагора.

Для задания величин катетов a и b используйте функцию:

Math.random() * (max - min) + min;

Для форматирования вывода используйте метод .toFixed()

Образец вывода:

14. Даны три массива цифр: [34,67,0] [14,5,36] [71,58,9]. Напишите код, объединяющий эти массивы и располагающий цифры в итоговом массиве в порядке убывания их значений через пробел.

15. Напишите скрип, который выведет в диалоговое окно день недели вашего дня рождения.

16. Напишите скрип, который выведет в диалоговое окно количество дней, оставшихся до какой-либо даты.