Типы данных, простейшие операторы языка JavaScript. Математические константы и функции объекта Math.

Тема: Типы данных, простейшие операторы. Математические константы и функции объекта Math. Цель: закрепить отличительные особенности языка JS, способы встраивания скриптов в HTML­код, рассмотреть простые типы данных, типы и синтаксис комментариев, арифметические и логические операции,   операции   присваивания,   функции   и   константы   объекта  Math;   способствовать   развитию памяти, внимания, устной связной речи; воспитывать информационную культуру. Оборудование: материал (карточки­задания).  ПЭВМ,   медиапроектор,   наглядный   материал   (презентация),   дидактический I. Организационное начало. II. Повторительно – обучающая работа. 1. Индивидуальная работа по карточкам (на местах). Ход урока 1. Укажите отличительные характеристики языка JavaScript. 2. Запишите тег  и атрибуты тега для добавления сценария в HTML­код  документа. 3. Укажите 4 способа вставки сценария в HTML­код  документа. 4. Раскройте назначение и характеристику методов alert, confirm, prompt, document.write. 2. Подведение итогов этапа. III. Работа по осмыслению и усвоению нового материала. 1. Сообщение темы и цели урока. 2. Первичное восприятие нового материала. Синтаксис языка программирования ­ набор правил написания кода программы. Любой   программный   код   состоит   из   частей,   как   дом   из   кирпичиков.   Эти   части   программы Синтаксис JavaScript называются инструкциями.  Инструкция ­ в программировании, команда языка программирования, которой устанавливается только   один   определенный   шаг   процесса   выполнения   программы.   После   каждой   инструкции   в JavaScript желательно использование точки с запятой.  Комментарии в JavaScript Комментарии ­ это пояснения в программному коду, записанные непосредственно в нём. Комментарии   очень   полезны   при   написании   скриптов,   они   позволяют   делать   заметки, объясняющие   логику   и   смысл   сценария.   Для   объяснения   логики   алгоритма   удобно   писать комментарии к каждой строке. Комментарии к коду JavaScript безценны в процессе обучения. Иногда в процессе написания сценария возникает необходимость сделать часть кода временно не работающей, для этого её помещают внутрь комментария. В   чужом   скрипте   очень   просто   разобраться,   если   он   насыщен   грамотными   комментариями, подробно объясняющими алгоритм сценария. Минусом комментариев можно назвать то, что они увеличивают размер файла, что замедляет загрузку.   Так   что   перед   размещением   на   сервере   их   часто   удаляют   из   кода,   оставляя закомментированную копию у себя. Типы и синтаксис комментариев JavaScript однострочные : Пара прямых слэшей // сообщает обработчику JavaScript о том, что текст следующий за ними до  знака переноса строки ­ это комментарий. Многострочные: Для создания многострочного комментария, как и в CSS, применяется консрукция /* ... */. Всё  что находится между /* и */ будет проигнорировано обработчиком JavaScript. 1 Как и в CSS, в JavaScript запрещены вложенные комментарии.  Типы переменных  В JavaScript переменные классифицируются на несколько типов.  Список простых типов:  number — числовая переменная.   string — строковая переменная.   boolean ­ булева переменная.   null ­ специальное значение «значение не известно» или ничто.   undefined ­ тип «значение не присвоено».  var $price = null; // это значит что цена не известна. Список  составного типа object (объект):  встроенные объекты, объекты браузера (интерпретирующей системы), объекты документа и объекты пользователя (программиста). Синтаксис доступа к объектам точечный. В JavaScript можно узнать тип переменных при помощи инструкции typeof (параметр); или  typeof параметр;. typeof 1 //'number' typeof 'str' //'string' typeof true //'boolean' typeof undefined //'undefined' typeof {} //'object' typeof null //'object' typeof function() {} //'function'  Для создания имён переменных в JavaScript установлены правила синтаксиса:  Для   имён   переменных   используются   символы:  a­z,  A­Z,   цифры,   символ   $,   символ   знак Синтаксис переменных подчёркивания (_).   Имя переменной не может начинаться с цифры.   Имена переменных регистрозависимы (itcounter и itCounter ­ это разные переменные).   JavaScript нет ограничений на длину имени переменной.  Способы обьявления переменых 1. var имя_переменной имя переменной = значение 2. var имя_переменной = значение 2 3. имя переменной = значение // описание  var можно опускать. Чтобы записать в переменную строку нужно её значение заключить в кавычки, двойные или  одинарные. var $stroka_1 = "Привет!"; document.write("
"); document.write($stroka_2); Чтобы вывести кавычку того же типа, её нужно экранировать символом обратного слэша. Всё  просто: var $stroka_1 = "\"Привет!\" ­ это приветствие."; document.write($stroka_1); Значения переменных можно присваивать другим переменным: var $stroka_1 = "\"Привет!\" ­ это приветствие."; var $stroka_2 = '\'Осторожно!\' ­ это предупреждение.'; $stroka_2 = $stroka_1; document.write($stroka_2); В этом примере мы сначала в переменную $stroka_2 присвоили одно строковое значение, но  потом присвоили ей значение переменной $stroka_1. const  имя константы  =  значение; ­ данные, присвоенные константе, в течение программы не Константы в javascript меняются! Объединение строк Очень часто нужно объединить несколько строк в одну. Например, наш последний пример  слишком громоздкий. Конкатенация ­ объединение строк в JavaScript осуществляется с помощью знака +. Желательно объединять переменные одного типа. Для вывода на экран 2 строковых переменных разделённых тегом 
 переменных можно  использовать одну команду document.write(). var $stroka_1 = '"Привет!" ­ это приветствие.'; var $stroka_2 = '"Осторожно!" ­ это предупреждение.'; document.write($stroka_1 + "
" + $stroka_2); Оператор конкатенации + также можно использовать в переменных: var $stroka_1 = '"Привет!" ­ это приветствие.'; var $stroka_2 = '"Осторожно!" ­ это предупреждение.'; var $stroka_3 = $stroka_1 + "
" + $stroka_2; document.write($stroka_3); Логические (булевы) переменные Содержат два значения: истина и ложь, то есть  true  (истина) и  false  (ложь). Этот тип данных используется в операциях сравнения. Операции сравнения используются при организации условного оператора.  var $count = 2 < 3; document.write($count); Операторы JavaScript В языке JavaScript есть инструкции и выражения. Инструкции не возвращают значений. Выражения всегда возвращают какие­то значения. Когда интерпрeтатор видит выражение, он вычисляет его значение и заменяет выражение его значением. Выражения бывают простыми и составными. Простые выражения не включают в себя другие выражения. К простым выражениям относятся: 1. Идентификаторы: someVar (имя переменной);  2. Литералы: "строка" или 675 (число, или числовой литерал);  3. Некоторые ключевые слова, например this;  3 Когда парсер обнаруживает идентификатор, ему сначала нужно вычислить его значение, то есть,  (Parser —   объектно­ориентированный например,   заменить   имя   переменной   её   значением. скриптовый язык программирования, созданный для генерации HTML­страниц на веб­сервере с поддержкой CGI. Разработан Студией Артемия Лебедева и выпущен под лицензией, сходной с GNU GPL.) Значение литерала будет таким, каким оно прописано в коде скрипта. Чтобы объединить несколько простых выражений в одно сложное используется операторы. Операторы бывают:  Унарные (один операнд).   Бинарные (два операнда).   Тернарный оператор ? в JavaScript (три операнда, есть только один тернарный оператор).  Операнд — это простое выражение, к которому применяется оператор. Например   арифметический   оператор   сложения   '+'   является   бинарным   оператором.   Он суммирует левый и правый операнд и возвращает сумму. var digit = 4 + 7; Кстати,   присваивание   происходит   при   помощи   оператора   присваивания   '='.   Этот   оператор вычисляет значение правого операнда и присваивает его левому операнду. В  JavaScript  есть унарный плюс, у него существует  только один операнд. Унарный плюс не является арифметическим оператором, он преобразует операнд в число. var myVar = "7"; document.write(typeof(myVar) + "
"); // Напечатает в документе string myVar = +myVar; document.write(typeof(myVar) + "
"); // Напечатает в документе number Сначала переменная myVar содержала строку "7", это литерал строкового типа (string), а не  числового (number). При помощи оператора унарный плюс мы преобразовали строковой литерал в  числовой. Операции присваивания Наиболее очевидным примером операции присваивания является простое присваивание (=). Этот оператор (=) используется для присваивания значения переменной. Но есть ещё ряд операций присваивания, которые являются сокращениями. Табл. Операции присваивания. Сокращённый оператор x += y x ­= y x *= y x /= y x %= y Значение x = x + y x = x ­ y x = x * y x = x / y x = x % y Арифметические операции ­ это всем известные математические действия. Арифметические операции Табл. Арифметические операции. Оператор + ­ / * % Операция Сложение. Вычитание. Деление. Умножение. Остаток от деления. Пример 1 + 4 = 5 7 ­ 4 = 3 9 / 3 = 3 7 * 4 = 28 9 % 5 = 4 4 Операции   сравнения   используются   для   сопоставления   выражений.   Выражение   с   условным оператором возвращает булево значение ­ истина или ложь (true / false). Табл. Операции сравнения. Операции сравнения Оператор < <= > >= == != Операция Меньше. Меньше или равно. Больше. Больше или равно. Равно. Не равно. Логические операции Пример 5 < 7 5 <= 7 или 5 <= 5 7 > 5 7 >= 5 или 7 >= 5 5 == 5 5 != 7 Логические операции часто используются с конструкцией if     else    в     JS. Именно на примерах этой конструкции будет продемонстрирована их работа. Но сначала список логических операторов. Табл. Логические операции. Оператор Операция && || ! Логическое И. Логическое ИЛИ. Логическое НЕ. Пример 5 > 3 && 7 < 9 5 > 3 || 7 < 9 !false Теперь простые примеры: if (true && true) document.write("Это работает!
"); if (true || false) document.write("Это работает!
"); if (!false) document.write("Это работает!
"); Разберём эти примеры: Оператор логическое И (&&) вернёт истину, если оба операнда истины.  Оператор логическое ИЛИ (||) вернёт истину, если хоть один операнд является истиной. Оператор логическое НЕ (!) принимает один операнд и изменяет значение истина/ложь на  обратное. Унарные операторы Унарные операторы ­ это операторы с одним операндом. Вот несколько таких операторов:  ++ ­ возрастание на 1 (increment). Может быть префиксное и постфиксное, об этом ниже.   ­­ ­ уменьшение на 1 (decrement). Может быть префиксное и постфиксное, об этом тоже ниже.   + ­ унарный плюс.   ­ ­ унарный минус.  Унарный минус Унарный минус изменяет знак выражения на противоположный. Например, когда вы пишите в  программе ­100, вы просто применяете к числовому литералу 100 унарный минус. Нужно точно понимать как работает унарный минус ­ он возвращает значение операнда с  противоположным знаком. Вот пример как правильно использовать унарный минус: var myVar = ­100; document.write(­myVar + " ­ унарный минус сработал, но переменная также = " + myVar +  ".
"); myVar = ­myVar; document.write("Теперь переменная = " + myVar + ".
"); Приведём бессмысленный пример двойного унарного минуса.  5 var myVar = ­100; document.write(­­myVar + " ­ это инкремент, а не двойной унарный минус.
"); document.write("Теперь переменная = " + myVar + ".
"); document.write(­(­myVar) + " а это двойное применение унарного минуса.
"); Унарный плюс Унарный плюс не совершает никаких математических действий. Он приводит литерал к  числовому типу. var myVar = "78687"; document.write(typeof(myVar) + ".
"); myVar = +myVar; document.write(typeof(myVar) + ".
"); Инкремент и декремент В программировании часто нужно увеличивать или уменьшать значение переменной на единицу.  Для этого есть унарные операторы:  ++ ­ возрастание на 1 (increment).   ­­ ­ уменьшение на 1 (decrement).  В отличии от унарного плюса и минуса инкремент и декремент меняет значение переменной при  вызове. var myVar = 10; document.write(++myVar + ".
"); document.write(myVar + ".
"); Декремент (­­) действует аналогично. Теперь рассмотрим префиксное и постфиксное использование этих операторов.  ++myVar ­ префиксное возрастание на 1.   myVar++ ­ постфиксное возрастание на 1.  Разница такая:  Префиксное использование этих операторов сначала вычисляет значение унарного оператора,  а потом использует результат в выражении.   Постфиксное использование сначала вычисляет выражение, а потом выполняет унарный  оператор (++ или ­­).  В этом вам поможет разобраться простой пример: var myVar = 10; document.write((++myVar + 5) + ".
"); document.write("Переменная = " + myVar + ".
"); var myVar = 10; document.write((myVar++ + 5) + ".
"); document.write("Переменная = " + myVar + ".
"); Инкремент и декремент допускается использовать только с переменными, применять их к  числовым литералам нельзя. Проще говоря код ++7 даст ошибку в сценарии. Другие операторы В языке JavaScript есть другие операторы:  Тернарный (с тремя операндами) оператор ? в     JavaScript. Оператор '?' используется кода в  зависимости от условия нужно выбрать одно из двух значений.     JavaScript. В языке JavaScript запятая является бинарным оператором.  Оператор запятая в  Синтаксис: выражение 1, выражение 2. Оператор вычисляет значение левого операнда (выражение 1), затем вычисляет значение правого  операнда (выражение 2) и возвращает значение правого операнда. var msg = (11, 25); alert(msg); // вернёт 25. // var msg = (11­3), (10+2); // так не работает. 6 var msg = ((11­3), (10+2)); alert(msg); // вернёт 12. Конечно, этот полностью абстрактные примеры. Скобки (...) обязательны, поскольку иначе запятая станет частью инструкции объявления var. Функции для работы с типами данных parseInt(строка); ­ преобразует указанную в параметре строку в целое число.  parseInt(строка, основание); - преобразует   указанную   в   параметре   строку   в   целое   число, система счисления — преобразование происходит по указанному основанию системы счисления (8, 10 или 16). parseFloat   (строка);   ­ преобразует   указанную   строку   в   число   с   плавающей   разделительной (десятичной, основание) точкой. (пример: parseFloat("3.14") // результат = 3.14) parseFloat ("Вася") /* результат = NaN, то есть не является числом */ ) isNaN(значение);   ­  функция  проверяет,   является   ли   переданный   параметр   числом   или   нет, вернет true, если параметр не является числом и false, если является. Принцип работы: переданный параметр преобразуется к числу. Если это не число (строка, массив и т.п.), то он преобразуется в NaN (Not­a­Number, «не число»). Затем isNaN проверяет ­ NaN у нас получился после преобразования или нет. Учтите, что, к примеру true преобразуется не к NaN, а к числу 1.  Пример: var num = 13; document.write(isNaN(num)); //выведет false Math.abs(число); ­ функция возвращает модуль числа, то есть из отрицательного числа делает Математические константы и функции объекта Math. положительное. Пример: document.write(Math.abs(-3)); //выведет 3 Math.round(число); ­ функция выполняет округление до ближайшего целого числа по правилам математического округления.  Пример:  округлим до целых 6.4  document.write(Math.round(6.4)); //выведет 6. Math.ceil(число); ­ функция производит округление числа до целых всегда в большую сторону. Пример: Округлим число 3.00001 в большую сторону: document.write(Math.ceil(3.00001)); //выведет 4. Math.floor(число); ­ функция производит округление числа до целых всегда в меньшую сторону. Пример: Округлим число 2.9999 в меньшую сторону: document.write(Math.floor(2.9999)); //выведет 2. Math.min(число, число, число...); ­ функция  возвращает  минимальное число из группы чисел, переданных   в   функцию,   если   в   функцию   ничего   не   передано,   то   будет   возращено Infinity (бесконечность). Пример: В данном примере будет выведено минимальное число из группы чисел 40, 20, 42, 100, 67: document.write(Math.min(40, 20, 42, 100, 67)); //выведет 20 Math.min.apply(null,   arr),   где   arr   ­   произвольный   массив   –   функция   находит   минимальное значение массива. Пример: var arr = [40, 20, 42, 100, 67]; document.write(Math.min.apply(null, arr)); //выведет 20. Math.max(число, число, число...); ­ функция возвращает максимальное число из группы чисел, если в функцию ничего не передано, то будет возращено ­Infinity. Пример: document.write(Math.max(1, 5, 10, 34, 100)); //выведет 100. Math.max.apply(null, arr), где arr ­ произвольный массив – функция находит максимальное значение массива. Пример: var arr = [1, 5, 10, 34, 100]; document.write(Math.max.apply(null, arr)); //выведет 100. Math.sqrt(положительное число); ­ функция возвращает квадратный корень числа. Пример: document.write(Math.sqrt(4)); //выведет 2. Math.pow(число, степень); ­ функция возводит число в заданную степень. Пример: document.write(Math.pow(3, 4)); //выведет 84 (т.е. 34). Math.random(); ­ функция возвращает случайное дробное число от 0 до 1. Чтобы получить случайно число в определенном промежутке (дробное или целое) следует и пользоваться специальными приемами: Случайное дробное число между min и max: 7 function getRandomArbitary(min, max) { return Math.random() * (max - min) + min; } Случайное целое число между min и max: //Использование Math.round() даст неравномерное распределение! function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } Пример: В данном примере будет выведено случайное целое число от 10 до 100: function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } ... document.write(getRandomInt(10, 100)); //выведет 12 ­   функция  возвращает   значение натурального логарифма   (ln  x=logex) Math.sin(число); ­ синус числа (это число должно быть углом в радианах). Math.cos(число); ­ косинус числа. Math.tan(число); ­ тангенс числа. Math.exp(степень); ­ возвращает число e (экспоненту, ее значение около 2.7) в степени x. Пример: document.write(Math.exp(3)); //е3 выведет 20.085536923187668 Math.log(число);  переданного числа. Пример: document.write(Math.log(35)); //выведет 3.5553480614894135 Math.sqrt (число); ­ квадратный корень числа. Math.PI ­ свойство возвращает число Пи с 15­ю знаками после запятой. Math.E – свойство содержит экспоненту с точностью до определенного знака после запятой (е­ Число Эйлера, снование натурального логарифма) Math.LN2 – свойство содержит значение натурального логарифма числа 2.(ln 2 ) Math.LN10 – свойство содержит значение натурального логарифма числа 10. Math.LOG2E ­ свойство возвращает значение логарифма от e (экспоненты) по основанию 2. (log2 e) Math.LOG10E  ­ свойство возвращает значение логарифма  от e (экспоненты) по основанию 10. (log10 e) Math.SQRT1_2 ­  свойство возвращает квадратный корень из 1/2. Math.SQRT2 ­  свойство возвращает квадратный корень из 2. 3. Обобщение. IV. Итог урока. 1. Фронтальная (обобщающая ) беседа. ­ Какие типы данных имеются в языке Js? ­ Назовите правила синтаксиса для переменных. ­ Какие арифметические операции и операции сравнения  имеются в языке Js? ­ Перечислите математические функции языка Js. V. Задавание на дом. Дунаев, с.361 –388, 434­441 (выборочно), опорный конспект 8