Основы языка JavaScript презентация

Март 2, 2023

Главная
Информатика
Основы языка JavaScript

Содержание

2. Что такое JavaScript? JavaScript – объектно-ориентированный язык программирования в основном клиентских сценариев (скриптов) Скрипты встраиваются в
3. История возникновения 1995 г. Компания Netscape предложила язык LiveScript (JavaScript) для своего браузера Netscape Navigator 2.0
4. Популярность языка 9 декабря 2022· Обновлено 29 декабря 2022 Источник - Онлайн школа Skysmart: Сейчас JavaScript
5. Преимущества и недостатки JS преимущества: Незаменимость при разработке веб сайтов и приложений. Высокая скорость работы и
6. Библиотеки и фреймворки JavaScript
7. Общая характеристика языка 1. Исходный программный код интерпретируется. 2. Операторы разделяются точкой с запятой. 3.Язык регистрозависимый.
8. Вставка сценариев в HTML Для записи JavaScript-кода в HTML-документе используется тег код сценария Сценарии можно вставить
9. Пример HTML-кода с использованием скрипта в строке: Этот текст – заголовок документа Щелкни на мне На
11. Вывод данных innerHTML, document.write(), window.alert(), console.log(). Чтобы получить доступ к элементу HTML, JavaScript может использовать этот
12. document.write() Моя первая веб страница Мой первый параграф. document.write(5 + 6);
13. window.alert() Моя первая веб страница Мой первый параграф window.alert(5 + 6);
14. console.log() console.log(5 + 6); console.log('Выводим что-либо')
15. ПЕРЕМЕННАЯ И ТИПЫ ДАННЫХ Переменной называется определенная ячейка памяти компьютера, в которой хранятся какие-либо данные. Имя
17. Примитивные типы данных
18. Объявление переменных let message; let user = 'John'; let age = 25; let message = 'Hello';
19. Составные типы данных
20. prompt prompt(текст, [нач.значен]) let test = prompt("Test", ''); показывает сообщение и запрашивает ввод текста от пользователя.
21. Confirm confirm(question) let isBoss = confirm("Ты здесь главный?"); Функция confirm отображает модальное окно с текстом вопроса
22. Вывод значений console.log('Ещё вариант', 'простого сообщения', 1, 2, 3, 4); Ещё вариант простого сообщения 1 2
23. СОБЫТИЯ Событие в HTML – это некоторое действие (щелчок кнопкой мыши, перемещение указателя, нажатие клавиши и
24. Группы обработчиков событий обработчики событий окна – выполняют какие-либо действия при открытии, закрытии, изменении размеров или
25. 1. onload –загрузка объекта окончена; onmove –окно или кадр перемещены; onresize –размер окна(кадра)изменился; onunload –посетитель закрывает
26. Объекты и методы Объект — это набор свойств, и каждое свойство состоит из имени и значения,
27. Выражения Комбинация переменных и операций, дающая одно-единственное значение, называется выражением (три типа выражений: арифметическое (вычисляемое значение
28. Арифметические операции
29. Комбинированные операции присваивания
30. Преобразование типов Неявное преобразование – это автоматическое преобразование типов интерпретатором, т. е. без участия программиста. Явное
31. Численное преобразование Численное преобразование происходит в математических функциях и выражениях. Например, когда операция деления ( /)
32. Определение типа переменной Для определения типа переменной применяется унарная операция typeof typeof(переменная) typeof переменная
33. Пример использования строчного скрипта Вычислениепремии Вычисление размера премии Введите размер дохода и нажмите кнопку Вычислить доход:
35. Функции Функция представляет собой подпрограмму, которую можно неоднократно вызывать для выполнения, обратившись к ней по имени
36. Возврат значения Функция может вернуть результат, который будет передан в вызвавший её код. Простейшим примером может
37. Встроенные функции JavaScript JavaScript поддерживает два типа функций: встроенные в язык и созданные вами. Все функции
38. ОБЪЕКТ Math И ЕГО МЕТОДЫ Одним из стандартных объектов является Math. В его свойствах хранятся основные
39. Методы объекта Math
41. Пример Для примера создадим документ, в котором располагается форма для ввода оценок, а при нажатии на
42. Возвращаемое значение функции function sumbl(){ var a1 = Number.parseInt(document.getElementById('n1').value) var a2 = Number.parseInt(document.getElementById('n2').value) var a3 =
43. Сумма баллов по результатам сессии Введите оценки и нажмите на кнопку вычислить Оценка1: Оценка2: Оценка3: Оценка4:
44. Примерный вид выполнения задания
46. Скачать презентацию

Слайд 2

Что такое JavaScript?
JavaScript – объектно-ориентированный язык программирования в основном клиентских сценариев (скриптов)
Скрипты встраиваются

в HTML-код с различными целями: обеспечение интерактивности, динамичности обновления содержимого
JavaScript – это единственная браузерная технология, сочетающая в себе три вещи:
Полная интеграция с HTML/CSS.
Простые вещи делаются просто.
Поддерживается всеми основными браузерами и включён по умолчанию.

Слайд 3

История возникновения
1995 г. Компания Netscape предложила язык LiveScript (JavaScript) для своего браузера Netscape

Navigator 2.0
Microsoft вскоре предложило свою версию JScript и тоже для своего браузера internet Explorer 3.0
Для межбраузерной совместимости JavaScript выработана стандартная спецификация ECMAScript (ECMA-262 Edition3)
Новая версия спецификации появляется каждый год. Между этими релизами, последний «черновик» спецификации доступен на https://tc39.es/ecma262/.
Чтобы почитать о самых последних возможностях, включая те, которые «почти в стандарте» (так называемые «stage 3 proposals»), посетите https://github.com/tc39/proposals.

Слайд 4

Популярность языка
9 декабря 2022· Обновлено 29 декабря 2022 Источник - Онлайн школа Skysmart:
Сейчас

JavaScript — это царь электронной коммерции, онлайн-банкинга, браузерных игр, видеостриминга, 2D- и 3D-анимации в интернете, онлайн-карт, социальных сетей и прочих сервисов, которые прочно вошли в нашу жизнь. Источник - Онлайн школа Skysmart: https://skysmart.ru/articles/programming/yazyk-programmirovaniya-javascript

Слайд 5

Преимущества и недостатки JS
преимущества:
Незаменимость при разработке веб сайтов и приложений.
Высокая скорость работы

и производительность.
Большое количество инструментов и богатая инфраструктура.
Относительная простота.
Широкие возможности для веб-страниц.
Относительная легкость изучения.
недостатки:
Отсутствует возможность загрузки и чтения файлов.
Нестрогая типизация
Уровень безопасности.

Слайд 6

Библиотеки и фреймворки JavaScript

Слайд 7

Общая характеристика языка
1. Исходный программный код интерпретируется.
2. Операторы разделяются точкой с запятой.
3.Язык

регистрозависимый.
4.Внутристрочный комментарий (не интерпретируемый, игнорируемый текст) выделяется символом «//», а многострочный – парой символов «/*» и «*/».
5.К данным применяется слабый (динамический) контроль типов.
6.Ввод-вывод данных в основном ограничен взаимодействием с документами и пользователями.

Слайд 8

Вставка сценариев в HTML
Для записи JavaScript-кода в HTML-документе используется тег Сценарии можно вставить в HTML-документ несколькими способами:
Для записи JavaScript-кода в HTML-документе используется тег , который может располагаться в любом месте документа и даже не один раз
Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл

Слайд 12

document.write()

Моя первая веб страница

Мой первый параграф.

Слайд 13

window.alert()

Моя первая веб страница

Мой первый параграф

Слайд 14

console.log()

console.log('Выводим что-либо')

Слайд 15

ПЕРЕМЕННАЯ И ТИПЫ ДАННЫХ
Переменной называется определенная ячейка памяти компьютера, в которой хранятся какие-либо

данные.
Имя переменной представляет собой последовательность букв латинского алфавита, цифр, символа подчеркивания и символа «$». Оно не должно начинаться с цифры.
myname, myName, my_Name , myNamel34, myname$

Слайд 16

Слайд 17

Примитивные типы данных

Слайд 18

Объявление переменных
let message;
let user = 'John'; let age = 25; let message

= 'Hello';
var myname;
var x, y, z;

Слайд 19

Составные типы данных

Слайд 20

prompt
prompt(текст, [нач.значен])
let test = prompt("Test", '');
показывает сообщение и запрашивает ввод текста от пользователя.

Возвращает напечатанный в поле ввода текст или null, если была нажата кнопка «Отмена» или Esc с клавиатуры.

Ввод данных

Слайд 21

Confirm
confirm(question)
let isBoss = confirm("Ты здесь главный?");
Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками:

OK и Отмена.
Результат – true, если нажата кнопка OK. В других случаях – false.

Слайд 22

Вывод значений
console.log('Ещё вариант', 'простого сообщения', 1, 2, 3, 4);
Ещё вариант простого сообщения 1

2 3 4
let man = 17;
let woman = 21;
console.log('Мужчин - %s, а женщин - %s', man, woman); // → Мужчин - 17, а женщин - 21

Слайд 23

СОБЫТИЯ
Событие в HTML – это некоторое действие (щелчок кнопкой мыши, перемещение указателя, нажатие

клавиши и т. д.), производимое пользователем на веб-странице либо выполняемое элементами самой веб-страницы. События относят только к тому тегу, которому они назначены.
Обработчик события – объект JavaScript, выполняющий определенный код, вызов которого осуществляется добавления префикса on к названию события
событие click имя обработчика - onclick

Слайд 24

Группы обработчиков событий
обработчики событий окна – выполняют какие-либо действия при открытии, закрытии, изменении

размеров или перемещении окна браузера;
обработчики событий мыши – выполняют какие-либо действия при обычном или двойном щелчке кнопкой мыши, а также при перемещениях указателя;
обработчики событий клавиатуры – выполняют какие-либо действия при нажатии клавиш клавиатуры;
обработчики событий формы – выполняют какие-либо действия при изменении состояния элементов формы, а также при сбросе формы либо отправке на сервер.

Слайд 25

1. onload –загрузка объекта окончена; onmove –окно или кадр перемещены; onresize –размер окна(кадра)изменился;

onunload –посетитель закрывает веб-страницу; onabort –загрузка объекта прервана; onblur –элемент потерял фокус; onfocus –элемент получил фокус; onerror –возникла ошибка при загрузке веб-страницы или объекта.
2. onclick –на элементе щелкнули левой кнопкой мыши; ondblclick –на элементе дважды щелкнули левой кнопкой мыши; ondragdrop –объект был перемещен в область окна; onmousedown –посетитель удерживает левую кнопку мыши над объектом; onmousemove –посетитель перемещает указатель мыши над объектом; onmouseout –указатель мыши вышел за пределы объекта; onmouseover –указатель мыши вошел в пределы объекта; onmouseup –посетитель отпустил левую кнопку мыши.
3. onkeydown –посетитель нажал любую клавишу; onkeypress –посетитель нажал и удерживает клавишу; onkeyup –посетитель отпустил нажатую ранее клавишу.
4. onsubmit –посетитель отправил форму(применяется к тегу form); onselect –в форме выбрано поле(применяется к тегам input, textarea); onreset –параметры формы были сброшены(применяется к тегу form); onchange –в форме изменились данные(применяется к тегам input, select, textarea)

Слайд 26

Объекты и методы
Объект — это набор свойств, и каждое свойство состоит из имени и

значения, ассоциированного с этим именем.
Объект.Метод("параметры метода")
Объект, представляющий свойство браузера – window (методы: alert()?, prompt(), confirm().
Объект, предоставляющий свойства документа – document (методы: write(), writeln()
Метод объекта - это действия, которые можно выполнять над объектом такого типа, или которые сам объект может выполнять. Каждый объект обладает своими свойствами.
Объект.свойство объекта= "новое значение свойства”.
document.write("Привет!")

Слайд 27

Выражения
Комбинация переменных и операций, дающая одно-единственное значение, называется выражением (три типа выражений: арифметическое

(вычисляемое значение – число), строковое (вычисляемое значение – строка) и логическое (вычисляемое значение – true или false)).
Выражения используют арифметические операции вычисляются они слева направо с учетом общепринятого математического старшинства, порядок выполнения можно изменить скобками.

Слайд 28

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

Слайд 29

Комбинированные операции присваивания

Слайд 30

Преобразование типов
Неявное преобразование – это автоматическое преобразование типов интерпретатором, т. е. без участия программиста.
Явное

преобразование – это преобразование, выполняемое самим программистом. Явное преобразование иначе называют приведением типов.
Строковое преобразование
Строковое преобразование происходит, когда требуется представление чего-либо в виде строки.
Например, alert(value) преобразует значение к строке.
Также мы можем использовать функцию String(value), чтобы преобразовать значение к строке.

Слайд 31

Численное преобразование
Численное преобразование происходит в математических функциях и выражениях.
Например, когда операция деления ( /)

применяется не к числу. Мы можем использовать функцию Number(value), чтобы явно преобразовать value к числу. Явноe преобразование часто применяется, когда мы ожидаем получить число из строковых источников, вроде форм текстового ввода. Если строка не может быть явно приведена к числу, то результатом преобразования будет NaN
Логическое преобразование
Логическое преобразование самое простое. Происходит в логических операторах, но также может быть выполнено явно с помощью функции Boolean(value).
Правило преобразования: Значения, которые интуитивно «пустые», вроде 0, пустой строки, null, undefined, и NaN, становятся false. Все остальные значения становятся true.

Слайд 32

Определение типа переменной
Для определения типа переменной применяется унарная операция typeof
typeof(переменная)
typeof переменная

Слайд 33

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

Вычислениепремии

Вычисление размера премии

Введите размер дохода

и нажмите кнопку Вычислить

доход:

Премия:

Слайд 34

Слайд 35

Функции
Функция представляет собой подпрограмму, которую можно неоднократно вызывать для выполнения, обратившись к ней

по имени function имя_функции (параметры) {код}
function F (аl, а2,..., аn) {код}
Тогда ее вызов должен иметь вид
F (вl, в2,..., вn)
а1,а2,аn – формальные параметры
в1,в2,вn – фактические параметры
Если параметры в функции отсутствуют, она задается следующим образом:
function F (){код}

Слайд 36

Возврат значения
Функция может вернуть результат, который будет передан в вызвавший её код.
Простейшим примером

может служить функция сложения двух чисел:
function sum(a, b)
{ return a + b; }
let result = sum(1, 2);
alert( result ); // 3

Слайд 37

Встроенные функции JavaScript
JavaScript поддерживает два типа функций: встроенные в язык и созданные вами.
Все

функции JavaScript рекомендуется помещать в контейнер .... Тем самым вы обеспечите их гарантированную доступность при обработке HTML-документа.
В JavaScript имеется несколько встроенных функций.
parseInt (строка | число, основание) – преобразует указанную строку или число в целое число.
Второй параметр указывает основание системы счисления (2, 8, 10 или 16), в которой представлено число в строке. Если основание не задано, то предполагается 10, т.е. десятичная система счисления.

Слайд 38

ОБЪЕКТ Math И ЕГО МЕТОДЫ
Одним из стандартных объектов является Math. В его свойствах

хранятся основные математические константы (табл. 4.8), а его мето-ды можно использовать для вызова базовых математических функций

Слайд 39

Методы объекта Math

Слайд 40

Слайд 41

Пример
Для примера создадим документ, в котором располагается форма для ввода оценок, а при

нажатии на соответствующую кнопку вычисляется сумма баллов

Слайд 42

Возвращаемое значение функции

Слайд 43

Сумма баллов по результатам сессии

Введите оценки и нажмите

на кнопку вычислить
Оценка1:
Оценка2:
Оценка3:
Оценка4:

суммабаллов:

Основы языка JavaScript презентация

Содержание

Что такое JavaScript? JavaScript – объектно-ориентированный язык программирования в основном клиентских сценариев (скриптов)Скрипты встраиваются

История возникновения1995 г. Компания Netscape предложила язык LiveScript (JavaScript) для своего браузера Netscape

Популярность языка9 декабря 2022· Обновлено 29 декабря 2022 Источник - Онлайн школа Skysmart:Сейчас

Преимущества и недостатки JSпреимущества:Незаменимость при разработке веб сайтов и приложений. Высокая скорость работы

Библиотеки и фреймворки JavaScript

Общая характеристика языка1. Исходный программный код интерпретируется.2. Операторы разделяются точкой с запятой. 3.Язык

document.write() Моя первая веб страница Мой первый параграф. document.write(5 + 6);

Моя первая веб страница

window.alert() Моя первая веб страница Мой первый параграф window.alert(5 + 6);

Моя первая веб страница

console.log() console.log(5 + 6); console.log('Выводим что-либо')

ПЕРЕМЕННАЯ И ТИПЫ ДАННЫХПеременной называется определенная ячейка памяти компьютера, в которой хранятся какие-либо

Примитивные типы данных

Объявление переменных let message;let user = 'John'; let age = 25; let message

Составные типы данных

promptprompt(текст, [нач.значен])let test = prompt("Test", '');показывает сообщение и запрашивает ввод текста от пользователя.

Confirmconfirm(question)let isBoss = confirm("Ты здесь главный?");Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками:

Вывод значенийconsole.log('Ещё вариант', 'простого сообщения', 1, 2, 3, 4);Ещё вариант простого сообщения 1

СОБЫТИЯСобытие в HTML – это некоторое действие (щелчок кнопкой мыши, перемещение указателя, нажатие

Группы обработчиков событий обработчики событий окна – выполняют какие-либо действия при открытии, закрытии, изменении

1. onload –загрузка объекта окончена; onmove –окно или кадр перемещены; onresize –размер окна(кадра)изменился;

Объекты и методыОбъект — это набор свойств, и каждое свойство состоит из имени и

ВыраженияКомбинация переменных и операций, дающая одно-единственное значение, называется выражением (три типа выражений: арифметическое