Переменные, типы, операции. JavaScript

Сентябрь 7, 2022

Главная
Алгебра
Переменные, типы, операции. JavaScript

Содержание

2. JavaScript – язык программирования
3. JavaScript – язык программирования 1. Компьютеры не понимают русский язык (пока), они понимают языки программирования; 2.
4. JavaScript – язык программирования JavaScript предназначен, чтобы уговорить компьютер что-то сделать на стороне пользователя (на вашем
5. Основы программирования на базе JavaScript
6. Переменные / Типы / Операции Ветвления (условные операторы) Циклы / Массивы (структуры данных) Функции Объекты JavaScript
7. 1. Интерпретируемый. JavaScript 2. Чувствительный к регистру. GETELEMENTBYID(); GetElementById(); getElementById(); getelementbyid();
8. JavaScript варианты подключения HTML5 HTML HTML Тег может присутствовать в любом месте документа. Но чаще всего
9. Однако JavaScript код можно писать и в атрибутах тегов Но это привод к «распылению» кода по
10. «Допустимый» синтаксис В процессе обучения мы можем ограничиваться только тегами для написания кода, и опускать полную
11. Алгоритм
12. Алгоритмы Задача: Написать скрипт, который рассчитает сколько гривен в день приносит депозит размещенный на полтора года
13. Задача: Написать скрипт, который рассчитает сколько гривен в день приносит депозит размещенный на полтора года под
14. Переменные, типы, операции
15. Вне зависимости от того, для чего делается скрипт, понадобится работать с информацией Для хранения информации, используются
16. Переменные Для хранения информации, используются переменные. Перед использованием переменной мы должны попросить выделить под неё место
17. Оператор присвоения Чтобы сказать компьютеру, что именно нужно записать в перемененную используется оператор присвоения = Оператор
18. Операторы, операнды и операции… Унарный оператор – тот который взаимодействует только с одной переменной (операндом). Бинарный
19. Операторы, операнды и операции… Унарный оператор – тот который взаимодействует только с одной переменной (операндом). Бинарный
20. Операторы, операнды и операции… Что получится? ?!?
21. Выражения По правую сторону от оператора присвоения может быть как конкретное значение (5 или 9 или
22. Операторы и операции (их приоритеты) https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
23. «Скобками программу не испортишь» (с) У операторов есть приоритеты, уровней приоритета полтора десятка и помнить затруднительно.
24. Задача: Написать скрипт, который рассчитает сколько гривен в день приносит депозит размещенный на полтора года под
25. Операторы, операнды и операции и… ?!?
26. Тип данных – пометка для компьютера как относиться к тем или иным данным (переменным) и какие
27. Тип переменной В JavaScript отсутствует жёсткая типизация данных, при которой тип переменной определяется при её объявлении.
28. Типы/ types Тип данных – пометка для компьютера как относиться к тем или иным данным и
29. Тип переменной В JavaScript отсутствует жёсткая типизация данных, при которой тип переменной определяется при её объявлении.
30. Преобразование типов в JavaScript Подробнее: https://learn.javascript.ru/types-conversion
31. Преобразование типов в JavaScript Подробнее: https://learn.javascript.ru/types-conversion
32. Преобразование типов в JavaScript Подробнее: https://learn.javascript.ru/types-conversion Где зарыта собака?
33. Преобразование строк в числа Добавив унарный оператор + мы заставляем систему неявно преобразовать значение в числовое.
34. Операции и типы
35. Ход выполнения программы Выполнение программы подобно сборке автомобиля на конвеере, каждое выражение (каждый оператор) вносит свои
36. Немного практики
37. Немного практики №1 Недостаток информации; Избыточная информация; Косвенно влияющие аспекты. Задача: Написать скрипт для сети пунктов
38. Немного практики №2 Пользователь вводит количество секунд, определить сколько часов минут секунд в указанном количестве секунд.
39. Нововведения
40. Директива “use strict” Директива “use strict” говорит браузеру, что следует относиться к JavaScript коду строго по
41. let и область видимости (ECMAScript-2015) Оператор let объявляет переменную, но такие переменные существуют только в той
42. Если нельзя, но очень хочется ECMAScript-2015 Babel.JS – это транспайлер, переписывающий код на ES-2015 в код
43. Babel.js – ECMASCript-2015 повсюду Babel.JS – это транспайлер, переписывающий код на ES-2015 в код на ES5.
44. Babel.js – ECMASCript-2015 повсюду Babel.JS можно использовать по другому – включить специальный скрипт, который перепишет весь
45. Домашнее задание
46. Задача: Разработать скрипт который на основе роста и веса пользователя рассчитывает его индекс массы тела (для
47. Задача: Необходимо написать скрипт который получает температуру в градусах по Цельсию, а выводит её эквивалент в
48. «Задача банкомата» Написать скрипт, который спрашивает у пользователя сумму, а в ответ сообщает купюры каких номинала,
49. W3Schools.com Удобный «тренажер» по JavaScript http://www.w3schools.com/js/
51. Скачать презентацию

Слайд 2

JavaScript – язык программирования

Слайд 3

JavaScript – язык программирования
1. Компьютеры не понимают русский язык (пока), они

понимают языки программирования;

2. Чтобы компьютер (и браузер как его часть) что-то сделал нужно ему сказать что нужно делать (описать последовательность действий) на языке программирования;

3. Как правило, задача любой программы заключается в манипулировании информацией (данными), например: текстом и картинками;

4. JavaScript тоже занимается манипуляцией данными (тегами и их содержимым). При помощи JS мы можем манипулировать HTML-документом: изменять теги, добавлять и удалять их.

Слайд 4

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

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

Слайд 5

Основы программирования на базе JavaScript

Слайд 6

Переменные / Типы / Операции
Ветвления (условные операторы)
Циклы / Массивы (структуры данных)
Функции
Объекты
JavaScript

как язык программирования

его концепции

Слайд 7

1. Интерпретируемый.
JavaScript
2. Чувствительный к регистру.
GETELEMENTBYID(); GetElementById();
getElementById(); getelementbyid();

Слайд 8

JavaScript варианты подключения
HTML5
HTML < 5
HTML < 5, внешний файл сценария.
Тег для

написания кода, и опускать полную разметку документа.

Слайд 11

Алгоритм

Слайд 12

Алгоритмы
Задача: Написать скрипт, который рассчитает сколько гривен в день приносит депозит

размещенный на полтора года под 22% годовых?

Проблемы:

Дан недостаточный объём данных или часть данных задана неявно, нужно уточнять;
Часть данных избыточна (но отвлекает);
Есть сторонние факторы, не известные заранее, влияющие на результат.

Слайд 13

Задача: Написать скрипт, который рассчитает сколько гривен в день приносит депозит

размещенный на полтора года под 22% годовых?

Алгоритм:

1. Уточняем сумму депозита.

2. Рассчитываем сколько будет дохода за целый год:
Доход = Cумма*(22%/100);

3. Считаем доход за 1 день:
Доход_день = Доход / Количество_дней_в_году;

5. Учитываем налог:
Доход_день_после_налога = Доход_день – Сумма налога;

6. Выводим результаты.

4. Расчитываем налоги:
Сумма_налога = Доход_день*((18% + 1,5%)/100);

Алгоритмы

Слайд 14

Переменные, типы, операции

Слайд 15

Вне зависимости от того, для чего делается скрипт, понадобится работать с

информацией

Для хранения информации, используются переменные.

Irina

Ivan

Слайд 16

Переменные
Для хранения информации, используются переменные.
Перед использованием переменной мы должны попросить выделить под

неё место с памяти. Для этого используется ключевое слово var. С его помощью происходит т.н. определение переменной. Определение переменной нужно делать только одни раз. В дальнейшем можно использовать переменную по имени, без слова var.

В ECMAScript-2015 добавилось ключевое слово let, основное отличие в области видимости переменной обвяленной с его помощью, и const - позволяющий объявлять константы.

Слайд 17

Оператор присвоения
Чтобы сказать компьютеру, что именно нужно записать в перемененную используется

оператор присвоения =

Оператор присвоения берёт то что справа от него и записывает в переменную имя которой расположено слева от него.

Слайд 18

Операторы, операнды и операции…
Унарный оператор – тот который взаимодействует только с

одной переменной (операндом).

Бинарный оператор – тот который взаимодействует с двумя переменными (операндами).

«Скобками программу не испортишь» (с)

У операторов есть приоритеты, какой приоритет выше, какой ниже запомнить непросто. Поэтому в случае сомнений какая операция будет первой а какая второй – смело используйте скобки. Принцип их применения такой же как и в математике – скобки повышают приоритет операции в них записанной.

Для выполнения действий (операций) над переменными (или значениями) используются операторы, операторов существует много. С некоторыми из них все знакомы, например с арифметические операторами.

Слайд 19

Операторы, операнды и операции…
Унарный оператор – тот который взаимодействует только с

одной переменной (операндом).

Бинарный оператор – тот который взаимодействует с двумя переменными (операндами).

[6, 6]

[5, 6]

Слайд 20

Операторы, операнды и операции…
Что получится?
?!?

Слайд 21

Выражения
По правую сторону от оператора присвоения может быть как конкретное значение

(5 или 9 или “Ivan”), а также может быть выражение – формула рассчитав которую компьютер получит результат который будет записан в переменную имя которой стоит слева от знака присвоения. В выражении могут участвовать как и конкретные значения так и другие переменные.

Слайд 22

Операторы и операции (их приоритеты)
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Слайд 23

«Скобками программу не испортишь» (с)
У операторов есть приоритеты, уровней приоритета полтора

десятка и помнить затруднительно. Поэтому в случае сомнений какая операция будет первой а какая второй – смело используйте скобки. Принцип их применения такой же как и в математике – скобки повышают приоритет операции в них записанной.

Слайд 24

Задача: Написать скрипт, который рассчитает сколько гривен в день приносит депозит

размещенный на полтора года под 22% годовых?

Алгоритмы

Пора писать код….

Слайд 25

Операторы, операнды и операции и…
?!?

Слайд 26

Тип данных – пометка для компьютера как относиться к тем или

иным данным (переменным) и какие операции с ними возможно проводить.
Тип определяет возможные значения и их смысл, а также операции которое возможны над этим типом данных.

Разные типы требуют разного подхода.

Типы данных (переменных)

Слайд 27

Тип переменной
В JavaScript отсутствует жёсткая типизация данных, при которой тип переменной

определяется при её объявлении. В JavaScript тип переменной определяется при присвоении ей значения. И может меняться при каждом новом присвоении. Мы можем узнать тип переменной воспользовавшись функцией typeof.

Слайд 28

Типы/ types
Тип данных – пометка для компьютера как относиться к тем

или иным данным и какие операции с ними возможно проводить.
Тип определяет возможные значения и их смысл, а также операции которое возможны над этим типом данных.

Javascript не типизированный язык. Тип переменной не указывается при объявлении и может меняться по ходу выполнения программы.

5 типов: number, string, boolean, function, object.

1 «служебный» тип: undefined.

Pascal/Delphi

C/C++/C#/Java

JavaScript

+1 тип добавлен в ECMAScript-2015: symbol.

Слайд 29

Тип переменной
В JavaScript отсутствует жёсткая типизация данных, при которой тип переменной

определяется при её объявлении. В JavaScript тип переменной определяется при присвоении ей значения. И может меняться при каждом новом присвоении.

Слайд 30

Преобразование типов в JavaScript
Подробнее: https://learn.javascript.ru/types-conversion

Слайд 31

Преобразование типов в JavaScript
Подробнее: https://learn.javascript.ru/types-conversion

Слайд 32

Преобразование типов в JavaScript
Подробнее: https://learn.javascript.ru/types-conversion
Где зарыта собака?

Слайд 33

Преобразование строк в числа
Добавив унарный оператор + мы заставляем систему неявно

преобразовать значение в числовое.

Используя функцию Number() мы явно указываем системе, что хотим преобразовать значение к числовому типу.

Функция parseInt () – позволяет преобразовать строку в число, при этом спокойно относиться к «лишним» символам в строке.

Слайд 34

Операции и типы

Слайд 35

Ход выполнения программы
Выполнение программы подобно сборке автомобиля на конвеере, каждое выражение

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

Слайд 36

Немного практики

Слайд 37

Немного практики №1
Недостаток информации;
Избыточная информация;
Косвенно влияющие аспекты.
Задача: Написать скрипт для сети

пунктов обмена валют. Скрипт должен сообщать сколько гривен нужно для совершения покупки той или иной суммы долларов.

Слайд 38

Немного практики №2
Пользователь вводит количество секунд, определить сколько часов минут секунд

в указанном количестве секунд.

Слайд 39

Нововведения

Слайд 40

Директива “use strict”
Директива “use strict” говорит браузеру, что следует относиться к

JavaScript коду строго по стандарту ECMAScript 5. Все «попустительства» поддерживаемые для совместимости со старыми стандартами перестают действовать.

Что перестанет работать: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Strict_mode

Слайд 41

let и область видимости (ECMAScript-2015)
Оператор let объявляет переменную, но такие переменные

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

?!?

Слайд 42

Если нельзя, но очень хочется ECMAScript-2015
Babel.JS – это транспайлер, переписывающий код

на ES-2015 в код на предыдущем стандарте ES5. Не забываем использовать “use strict”.

http://babeljs.io/

Слайд 43

Babel.js – ECMASCript-2015 повсюду
Babel.JS – это транспайлер, переписывающий код на ES-2015

в код на ES5. Не забываем использовать “use strict”.

Слайд 44

Babel.js – ECMASCript-2015 повсюду
Babel.JS можно использовать по другому – включить специальный

скрипт, который перепишет весь ES-2015 код в ECMAScript 5. Подробности: http://babeljs.io/docs/setup/#installation

Слайд 45

Домашнее задание

Слайд 46

Задача: Разработать скрипт который на основе роста и веса пользователя рассчитывает

его индекс массы тела (для ввода использовать функцию prompt(), для вывода – alert()).

Домашнее задание №1

Слайд 47

Задача: Необходимо написать скрипт который получает температуру в градусах по Цельсию,

а выводит её эквивалент в градусах по Фаренгейту и по Кельвину.

Домашнее задание №2

Слайд 48

«Задача банкомата» Написать скрипт, который спрашивает у пользователя сумму, а в

ответ сообщает купюры каких номинала, и в каком количестве необходимо выдать, а также суммарное количество купюр. При этом суммарное количество купюр было минимально возможным. Помните, что у нас в стране купюры номинала 1, 2, 5, 10, 20, 50, 100, 200, 500 гривен.

Домашнее задание №3

Слайд 49

Переменные, типы, операции. JavaScript

Содержание

JavaScript – язык программирования

JavaScript – язык программирования1. Компьютеры не понимают русский язык (пока), они

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

Основы программирования на базе JavaScript

Переменные / Типы / ОперацииВетвления (условные операторы)Циклы / Массивы (структуры данных)ФункцииОбъектыJavaScript

1. Интерпретируемый.JavaScript2. Чувствительный к регистру.GETELEMENTBYID(); GetElementById(); getElementById(); getelementbyid();

Алгоритм

АлгоритмыЗадача: Написать скрипт, который рассчитает сколько гривен в день приносит депозит

Задача: Написать скрипт, который рассчитает сколько гривен в день приносит депозит

Переменные, типы, операции

Вне зависимости от того, для чего делается скрипт, понадобится работать с

ПеременныеДля хранения информации, используются переменные.Перед использованием переменной мы должны попросить выделить под

Оператор присвоенияЧтобы сказать компьютеру, что именно нужно записать в перемененную используется

Операторы, операнды и операции…Унарный оператор – тот который взаимодействует только с

Операторы, операнды и операции…Унарный оператор – тот который взаимодействует только с

Операторы, операнды и операции…Что получится??!?

ВыраженияПо правую сторону от оператора присвоения может быть как конкретное значение

Операторы и операции (их приоритеты)https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

«Скобками программу не испортишь» (с)У операторов есть приоритеты, уровней приоритета полтора

Задача: Написать скрипт, который рассчитает сколько гривен в день приносит депозит

Операторы, операнды и операции и…?!?

Тип данных – пометка для компьютера как относиться к тем или

Тип переменнойВ JavaScript отсутствует жёсткая типизация данных, при которой тип переменной

Типы/ typesТип данных – пометка для компьютера как относиться к тем

Тип переменнойВ JavaScript отсутствует жёсткая типизация данных, при которой тип переменной

Преобразование типов в JavaScriptПодробнее: https://learn.javascript.ru/types-conversion

Преобразование типов в JavaScriptПодробнее: https://learn.javascript.ru/types-conversion

Преобразование типов в JavaScriptПодробнее: https://learn.javascript.ru/types-conversionГде зарыта собака?

Преобразование строк в числаДобавив унарный оператор + мы заставляем систему неявно

Операции и типы

Ход выполнения программыВыполнение программы подобно сборке автомобиля на конвеере, каждое выражение

Немного практики

Немного практики №1Недостаток информации;Избыточная информация;Косвенно влияющие аспекты.Задача: Написать скрипт для сети

Немного практики №2Пользователь вводит количество секунд, определить сколько часов минут секунд

Нововведения

Директива “use strict”Директива “use strict” говорит браузеру, что следует относиться к

let и область видимости (ECMAScript-2015)Оператор let объявляет переменную, но такие переменные

Если нельзя, но очень хочется ECMAScript-2015Babel.JS – это транспайлер, переписывающий код

Babel.js – ECMASCript-2015 повсюдуBabel.JS – это транспайлер, переписывающий код на ES-2015

Babel.js – ECMASCript-2015 повсюдуBabel.JS можно использовать по другому – включить специальный

Домашнее задание

Задача: Разработать скрипт который на основе роста и веса пользователя рассчитывает

Задача: Необходимо написать скрипт который получает температуру в градусах по Цельсию,

«Задача банкомата» Написать скрипт, который спрашивает у пользователя сумму, а в

W3Schools.comУдобный «тренажер» по JavaScript http://www.w3schools.com/js/

Похожие презентации

JavaScript – язык программирования
1. Компьютеры не понимают русский язык (пока), они

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

Переменные / Типы / Операции
Ветвления (условные операторы)
Циклы / Массивы (структуры данных)
Функции
Объекты
JavaScript

1. Интерпретируемый.
JavaScript
2. Чувствительный к регистру.
GETELEMENTBYID(); GetElementById();
getElementById(); getelementbyid();

Алгоритмы
Задача: Написать скрипт, который рассчитает сколько гривен в день приносит депозит

Переменные
Для хранения информации, используются переменные.
Перед использованием переменной мы должны попросить выделить под

Оператор присвоения
Чтобы сказать компьютеру, что именно нужно записать в перемененную используется

Операторы, операнды и операции…
Унарный оператор – тот который взаимодействует только с

Операторы, операнды и операции…
Унарный оператор – тот который взаимодействует только с

Операторы, операнды и операции…
Что получится?
?!?

Выражения
По правую сторону от оператора присвоения может быть как конкретное значение

Операторы и операции (их приоритеты)
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

«Скобками программу не испортишь» (с)
У операторов есть приоритеты, уровней приоритета полтора

Операторы, операнды и операции и…
?!?

Тип переменной
В JavaScript отсутствует жёсткая типизация данных, при которой тип переменной

Типы/ types
Тип данных – пометка для компьютера как относиться к тем

Тип переменной
В JavaScript отсутствует жёсткая типизация данных, при которой тип переменной

Преобразование типов в JavaScript
Подробнее: https://learn.javascript.ru/types-conversion

Преобразование типов в JavaScript
Подробнее: https://learn.javascript.ru/types-conversion

Преобразование типов в JavaScript
Подробнее: https://learn.javascript.ru/types-conversion
Где зарыта собака?

Преобразование строк в числа
Добавив унарный оператор + мы заставляем систему неявно

Ход выполнения программы
Выполнение программы подобно сборке автомобиля на конвеере, каждое выражение

Немного практики №1
Недостаток информации;
Избыточная информация;
Косвенно влияющие аспекты.
Задача: Написать скрипт для сети

Немного практики №2
Пользователь вводит количество секунд, определить сколько часов минут секунд

Директива “use strict”
Директива “use strict” говорит браузеру, что следует относиться к

let и область видимости (ECMAScript-2015)
Оператор let объявляет переменную, но такие переменные

Если нельзя, но очень хочется ECMAScript-2015
Babel.JS – это транспайлер, переписывающий код

Babel.js – ECMASCript-2015 повсюду
Babel.JS – это транспайлер, переписывающий код на ES-2015

Babel.js – ECMASCript-2015 повсюду
Babel.JS можно использовать по другому – включить специальный

W3Schools.com
Удобный «тренажер» по JavaScript
http://www.w3schools.com/js/