Урок 1. Знакомство. Введение в JavaScript

Операторы (Присваивание, битовые, приоритет, typeof)

241.18K

Category:

programming

Модуль 1. Введение в JS

1. Урок 1. Знакомство. Введение в JavaScript

Иван Владиславович Кашко
1

2. повесточка на день

1. Знакомство
2. Поговорим про JS
3. Разбираем теоретический материал,
немного практики.
4. Много практики
5. Контрольные вопросы
6. Домашняя работа
Иван Владиславович Кашко
2

3.

Введение в JavaScript
JavaScript — это высокоуровневый язык
программирования, который делает веб-страницы
интерактивными. Он выполняется в браузере
пользователя, что позволяет динамически изменять
контент без перезагрузки страницы. Изначально
создавался для «оживления» HTML-документов, но
сейчас его возможности гораздо шире. Сегодня мы
познакомимся с его основами, историей и ключевыми
концепциями.
Иван Владиславович Кашко
3

4.

Сценарии, выполняемые на стороне клиента
Клиентские сценарии выполняются на компьютере
пользователя, а не на сервере. Это обеспечивает
мгновенную реакцию на действия пользователя, такие как
клики или нажатия клавиш. Основное преимущество —
снижение нагрузки на сервер и повышение отзывчивости
интерфейса. JavaScript является главным языком для
клиентского программирования.
Иван Владиславович Кашко
4

5.

Что такое JavaScript?
JavaScript — это мультипарадигменный язык сценариев,
поддерживающий объектно-ориентированное,
императивное и функциональное программирование. Он
является неотъемлемой частью веб-разработки, работая
вместе с HTML и CSS. HTML отвечает за структуру, CSS
— за оформление, а JavaScript — за поведение. Он
позволяет создавать сложные веб-приложения, включая
анимации и интерактивные карты.
Иван Владиславович Кашко
5

6.

История создания JavaScript
Язык был создан Бренданом Эйхом в компании Netscape в
1995 году всего за 10 дней. Первоначально он назывался
Mocha, затем LiveScript. Чтобы воспользоваться
популярностью языка Java, его переименовали в
JavaScript. Важно понимать, что, несмотря на схожесть в
названии, это два совершенно разных языка.
Иван Владиславович Кашко
6

7.

Различия между JavaScript и Java, JScript,
ECMAScript
• JavaScript vs Java: JS — интерпретируемый,
динамический язык для браузеров; Java —
компилируемый, статический язык для различных
платформ.
• JScript: Реализация JS от Microsoft для Internet
Explorer.
• ECMAScript: Спецификация (стандарт), которой
должен следовать JavaScript. JS — это самая
популярная реализация ECMAScript.
Иван Владиславович Кашко
7

8.

Версии JavaScript
Развитие JavaScript следует за стандартом ECMAScript
(ES). Ключевые версии: ES3 (1999), ES5 (2009) с
добавлением строгого режима, ES6 (2015) с классами,
стрелочными функциями. Современные браузеры
поддерживают актуальные стандарты, что позволяет
использовать новые возможности языка.
Иван Владиславович Кашко
8

9.

Понятие Document Object Model (DOM)
DOM — это программный интерфейс для HTML- и XMLдокументов, представляющий страницу в виде дерева
объектов. Каждый узел этого дерева — отдельный
элемент (тег, атрибут, текст). JavaScript может
манипулировать DOM, изменяя структуру, стиль и
содержимое страницы в реальном времени.
Иван Владиславович Кашко
9

10.

Понятие Browser Object Model (BOM)
BOM (Browser Object Model) позволяет JavaScript
взаимодействовать с браузером. Он предоставляет объекты
для работы с окном браузера, его историей, экраном и
навигацией. В отличие от DOM, BOM не стандартизирован,
но основные его объекты, такие как window,
поддерживаются повсеместно.
Иван Владиславович Кашко
10

11.

Внедрение в HTML документы.
Редакторы кода
JavaScript код можно внедрять в HTML напрямую с помощью
тега <script> в <head> или <body>, или подключать из внешних
файлов с атрибутом src. Для разработки используются
редакторы кода: Visual Studio Code, Sublime Text, WebStorm. Они
обеспечивают подсветку синтаксиса и автодополнение.
Иван Владиславович Кашко
11

12.

Тег <noscript>
Тег <noscript> используется для отображения контента
пользователям, у которых в браузере отключен JavaScript.
Содержимое этого тега будет показано только в том случае,
если скрипты не поддерживаются или отключены. Это
важный элемент обеспечения доступности вашего сайта.
Иван Владиславович Кашко
12

13.

Основы синтаксиса. Регистрозависимость. Комментарии.
Ключевые слова
JavaScript — регистрозависимый язык: myVariable и myvariable
это разные имена. Комментарии бывают однострочные (//) и
многострочные (/* ... */). Ключевые слова (например, let, if, for)
зарезервированы языком и не могут быть именами
переменных.
Иван Владиславович Кашко
13

14.

Переменные. Правила именования
Переменные — это контейнеры для хранения данных.
Объявляются с помощью let, const или устаревшего var. Имя
может содержать буквы, цифры, $, _, но не может начинаться с
цифры. Для именования используется стиль camelCase
(например, myFirstName).
Практическое задание: Объявите три переменные: ваше имя, возраст и
признак того, являетесь ли вы студентом.
Иван Владиславович Кашко
14

15.

Типы данных
JavaScript — язык с динамической типизацией. Основные
типы: number (числа), string (строки), boolean (логический),
undefined (не определен), null (пустое значение). Оператор
typeof помогает определить тип переменной.
Иван Владиславович Кашко
15

16.

Операторы (Арифметические, отношения,
логические)
Иван Владиславович Кашко
16

17. Операторы (Присваивание, битовые, приоритет, typeof)

Иван Владиславович Кашко
17

18.

Ввод/вывод данных. Диалоговые окна
Для простого взаимодействия с пользователем используются
диалоговые окна. alert() выводит сообщение, confirm() —
вопрос с ОК/Отмена, prompt() — запрашивает ввод текста. Эти
методы являются частью BOM.
Практическое задание: Напишите код, который запрашивает у
пользователя его любимый цвет и выводит его с помощью alert.
Иван Владиславович Кашко
18

19.

Условия. Что такое условие? If
Условие — это конструкция, которая выполняет блок кода
только если заданное выражение истинно (true). Это основа для
принятия решений в программе. Простейшая форма —
оператор if, который проверяет условие и выполняет код, если
условие истинно.
Иван Владиславович Кашко
19

20.

Условия. if else
Конструкция if...else позволяет задать два альтернативных пути
выполнения. Если условие истинно, выполняется один блок
кода, если ложно — другой. Это позволяет программе
реагировать на различные ситуации.
Иван Владиславович Кашко
20

21.

Задание 1: Базовый определитель возраста
Напишите программу, которая запрашивает у пользователя его возраст
через prompt() и выводит соответствующее сообщение:
Если возраст меньше 0 — «Ошибка: возраст не может быть
отрицательным!»
Если возраст от 0 до 12 — «Вы ребёнок»
Если возраст от 13 до 17 — «Вы подросток»
Если возраст от 18 до 60 — «Вы взрослый»
Если возраст больше 60 — «Вы пенсионер»
Иван Владиславович Кашко
21

22.

Задание 2: Калькулятор оценок
Напишите программу, которая запрашивает у
пользователя балл (от 0 до 100) и выводит буквенную
оценку по системе:
• 90-100 — «Отлично (A)»
• 75-89 — «Хорошо (B)»
• 60-74 — «Удовлетворительно (C)»
• 40-59 — «Неудовлетворительно (D)»
• 0-39 — «Провал (F)»
Если введённое число выходит за диапазон 0-100,
программа должна выводить: «Ошибка: введите число от
0 до 100».
Иван Владиславович Кашко
22

23.

Условия. Тернарный оператор ?: и switch
Тернарный оператор ?: — это краткая форма if...else. Оператор switch
используется для множественного выбора, сравнивая значение с
различными вариантами (case).
Иван Владиславович Кашко
23

24.

Теоретические вопросы для самопроверки:
1. В чем основное отличие клиентского JavaScript от
серверного?
2. Почему JavaScript и Java — это разные языки, несмотря
на схожесть названий?
3. Какую роль играет стандарт ECMAScript в развитии
JavaScript?
4. Объясните разницу между DOM и BOM.
Иван Владиславович Кашко
24

25. Домашняя работа

Иван Владиславович Кашко
25

26.

Заключение по первому полумодулю:
Сегодня мы заложили фундамент для изучения JavaScript
— мощного и гибкого языка веб-разработки. Вы узнали о его
истории, основных концепциях, таких как DOM и BOM, и
освоили базовые элементы синтаксиса: переменные, типы
данных, операторы и условия. Этот теоретический минимум
является критически важным для перехода к созданию понастоящему интерактивных и динамичных веб-приложений.
Иван Владиславович Кашко
26

27.

Циклы. Что такое цикл? while, do while
Цикл позволяет многократно выполнять блок кода, пока условие истинно.
Цикл while проверяет условие перед каждой итерацией. Цикл do...while
сначала выполняет код, а затем проверяет условие, гарантируя хотя бы одно
выполнение.
Практическое задание: Напишите цикл while, который выводит числа от 5 до 1.
Иван Владиславович Кашко
27

28.

Циклы. for, break, continue
Цикл for объединяет инициализацию, условие и итерацию в одной строке.
Оператор break полностью прерывает выполнение цикла. Оператор
continue пропускает текущую итерацию и переходит к следующей.
Практическое задание:
Используя цикл for, выведите
только четные числа от 0 до 10.
Используйте continue для
пропуска нечетных.
Иван Владиславович Кашко
28

English Русский Rules