Презентация на тему "Основы языка JavaScript"

Описание презентации по отдельным слайдам:

• 

  1 слайд

  Основы языка JavaScript
  Преподаватель:
  Егорова Наталья Александровна
  

• 

  2 слайд

  JavaScript появился благодаря усилиям двух компаний – Netscape (Mozilla) и Sun Microsystems (Oracle).
  JavaScript позволяет создавать приложения, выполняемые как на стороне клиента, т.е. эти приложения выполняются браузером на компьютере пользователя, так и на стороне сервера.
  

• 

  3 слайд

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

• 

  4 слайд

  Способы размещения JavaScript кода
  включение кодов JavaScript между тэгами <script> и </script>;
  подключение внешнего файла с кодами JavaScript с помощью тэга <script>;
  использование кодов JavaScript непосредственно в тэгах HTML при задании обработчиков событий.
  

• 

  5 слайд

  1. Включение JavaScript между тэгами <script> и </script>
  Для включения фрагментов программы на JavaScript или другом скрипте (объявлений переменных, описаний функций, операторов, вызовов функций и др.) обычно используется следующий шаблон:
  <script [language="Язык программирования, на котором написан скрипт"] [src="Адрес файла со скриптом"]>
  программный код JavaScript
  </script>
  Если при разработке сценария используется язык JavaScript, то параметр language можно не указывать.
  

• 

  6 слайд

  2. Подключения внешнего файла с JavaScript
  Для подключения внешнего файла с JavaScript-кодами используются те же самые тэги <script> и </script>, но в отличие от внутреннего встраивания тэг содержит параметр src, который задает URL-адрес внешнего файла с фрагментами JavaScript. <script src=“Myscript.js” >
  </script>
  js – стандартное расширение для JavaScript-файлов.
  

• 

  7 слайд

  Нельзя совместить в одном тэге-контейнере <script> и </script> внутреннее и внешнее подключение кодов JavaScript.
  Теги <script> могут использоваться в любом разделе HTML-документа и в любом количестве.
  

• 

  8 слайд

  3. Использование событий
  Для HTML-тега назначается событие, при выполнении которого выполняется JavaScript код.
  Пример
  <input type=button value="Кнопка" onMouseOver="window.alert(‘Добрый день’);">
  

• 

  9 слайд

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

• 

  10 слайд

  1. Объявление переменных выполняется с помощью ключевого слова var:
  var i;
  var sum;
  2. Один раз использовав ключевое слово var, можно объявить несколько переменных, перечислив их через запятую:
  var i, sum;
  

• 

  11 слайд

  3. Присвоить какое-либо значение переменной можно с помощью оператора присваивания, который обозначется символом (=)
  var num, msg;
  num = 10;
  msg = "Hello";
  

• 

  12 слайд

  4. Объявление переменных можно совмещать с их инициализацией.
  Инициализация – это одновременное выполнение двух действий: объявление переменной и присвоение ей начального значения:
  var num = 10;
  var str = "hello";
  var i = 0, j = 1, m = 'a';
  

• 

  13 слайд

  5. Переменные в JavaScript не имеют типа, ей может быть присвоено значение любого типа и позднее этой же переменной может быть присвоено значение другого типа.
  var x = 10;
  x = "текст";
  6. Если при объявлении переменной ей не было присвоено никакое значение (не была инициализирована), она будет содержать значение undefined (в переводе с англ. неопределённое), пока ей не будет присвоено другое значение.
  

• 

  14 слайд

  Имена переменных. Идентификаторы
  Идентификатор – последовательность букв, цифр, а также специальных символов.
  Идентификаторы выступают в качестве имен переменных, функций, свойств объекта, и т.д.
  При выборе идентификатора необходимо учитывать:
  1. Идентификаторы не могут совпадать ни с одним из ключевых (зарезервированных) слов JavaScript. Для интерпретатора они имеют специальное значение, т.к. являются частью синтаксиса языка.
  2. Идентификаторы могут состоять из одного и более символов.
  

• 

  15 слайд

  3. JavaScript чувствителен к регистру символов, следует учитывать регистр при обращении к переменным, функциям и т.д.
  4. Идентификаторы могут начинаться с буквы, символа подчеркивания (_) или знака доллара ($). Далее могут следовать любые буквы, цифры, знаки доллара, или символы подчеркивания.
  

• 

  16 слайд

  Примеры допустимых идентификаторов
  x
  my_var
  _myCar2
  $cash
  

• 

  17 слайд

  Зарезервированные слова
  JavaScript резервирует ряд идентификаторов, которые играют роль ключевых слов самого языка.
  

• 

  18 слайд

  Инструкции
  1. Любая программа состоит из последовательности инструкций. Инструкция является указанием на совершение какого-либо действия. Окончание инструкции обозначается символом "точка с запятой" (;).
  var myNumber = 12;
  

• 

  19 слайд

  2. Использование точки с запятой для указания конца инструкции не является обязательным условием. В JavaScript между инструкциями можно не ставить точку с запятой, если они находятся на разных строках.
  первая инструкция
  вторая инструкция
  3. При размещении инструкций на одной строке, их надо обязательно разделять с помощью точки с запятой, тем самым сообщая интерпретатору, где заканчивается первая инструкция и начинается следующая.
  первая инструкция; вторая инструкция;
  

• 

  20 слайд

  4. Хорошей практикой в программировании является использование точки с запятой всегда, даже если инструкции расположены на разных строках.
  Это поможет сделать ваш код более читабельным и возможно избежать в дальнейшем непредвиденных ошибок во время исполнения программы.
  

• 

  21 слайд

  Чувствительность к регистру
  Язык JavaScript чувствителен к регистру символов.
  Например: ключевое слово switch должно быть написано как switch, а не Switch или SWITCH, так же и имена переменных myVar, MYVAR или MyVar - будут считаться, как имена трех различных переменных.
  

• 

  22 слайд

  Комментарии
  Комментарии – пояснения к исходному коду программы, оформленные по правилам, определённым языком программирования.
  Функции комментариев:
  помогают правильно понять текст программы;
  временное исключение части кода программы.
  Виды комментариев:
  однострочный;
  // это однострочный комментарий
  многострочный.
  /* Это многострочный комментарий. Он расположен на нескольких строках */
  

• 

  23 слайд

  Литералы
  Литерал (константа) – запись в исходном коде программы, представляющая собой обычное фиксированное значение.
  Литералы представляют собой константы, непосредственно включаемые в текст программы, в отличие от прочих данных - констант и переменных, обращение к которым осуществляется посредством ссылок. Литералы не могут быть изменены в тексте программы.
  var num = 14;
  var fish = "Кит";
  14 и "Кит" - литералы,
  num и fish - переменные
  

• 

  24 слайд

  Типы данных JavaScript
  Типы данных в JavaScript делятся на две категории:
  простые (примитивные) типы;
  составные (объекты).
  К категории простых типов относятся:
  String - текстовые строки (строки)
  Number - числа
  Boolean - логические (булевы) значения
  null
  undefined
  

• 

  25 слайд

  К составным типам данных относятся:
  Function - функции
  Array - массивы
  Object - объекты
  

• 

  26 слайд

  Числа
  Для представления чисел в JavaScript используется 64-битный формат, определяемый стандартом IEEE 754. Этот формат способен представлять числа в диапазоне от 5e-324 до 1.7976931348623157e+308.
  Все числа в JavaScript представляются вещественными значениями (с плавающей точкой), т.е. нет различий между целыми и вещественными значениями.
  var bigNumber = 3.52e5;
  Любому числовому литералу может предшествовать знак минус (-), делающий число отрицательным.
  

• 

  27 слайд

  Специальные числовые значения
  В JavaScript имеются предопределённые глобальные переменные Infinity и NaN.
  Переменная Infinity хранит специальное значение обозначающее бесконечность, переменная NaN также хранит специальное значение NaN (NaN сокращение от англ. Not a Number - не число).
  Значение бесконечности можно получить в результате деления числа на 0:
  alert(123 / 0); // Infinity
  

• 

  28 слайд

  Строки
  В JavaScript строка - это неизменяемая, упорядоченная последовательность 16-битных значений, каждое из которых представляет символ Юникода. Строки состоят из нуля и более символов. Символы включают в себя буквы, цифры, знаки пунктуации, специальные символы и пробелы. Строки должны быть заключены в кавычки. Использовать можно одиночные кавычки (апострофы) или двойные кавычки.
  var myColor = "red";
  var myColor = 'red';
  

• 

  29 слайд

  Строки заключённые в двойные кавычки могут содержать символы одиночных кавычек и наоборот.
  "одинарные 'кавычки' внутри двойных"
  'здесь "наоборот" '
  

• 

  30 слайд

  Выражения
  Любая комбинация переменных и операций, которая может быть вычислена интерпретатором для получения значения, называется выражением. Примеры
  alpha + 19
  (alpha - 37)*beta/2
  
  Результатом выполнения всех операций, входящих в состав выражения, является значение.
  

• 

  31 слайд

  Выражения и операторы - это не одно и то же. Операторы являются указанием совершить какое-либо действие и завершаются точкой с запятой. Выражения же определяют некоторую совокупность вычислений.
  В одном операторе могут присутствовать несколько выражений.
  

• 

  32 слайд

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

• 

  33 слайд

  Присваивание
  Операция присваивания выглядит как знак равенства =, она присваивает значение, стоящее с правой стороны от нее, переменной, стоящей с левой стороны.
  Пример:
  var x = 20;
  var y = x + 32;
  

• 

  34 слайд

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

• 

  35 слайд

  Инкремент и декремент
  var count = count + 1;
  или
  count += 1;
  или
  ++count;
  Операция ++ инкрементирует - увеличивает на единицу.
  
  

• 

  36 слайд

  Знак операции инкремента бывает:
  в префиксной форме, когда он расположен перед своим операндом,
  в постфиксной форме, когда операнд записан перед знаком ++.
  
  totalWeight = avg * ++count;
  totalWeight = avg *count ++;
  
  

• 

  37 слайд

  Составные операции присваивания
  var x = 5;
  x = x + 30;
  x += 30;
  Составные операции присваивания записываются более кратко, чем их несоставные эквиваленты.
  

• 

  38 слайд

  Операции сравнения
  

• 

  39 слайд

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

• 

  40 слайд

• 

  41 слайд

  Оператор if (если)
  Оператор if позволяет интерпретатору JavaScript выполнять те или иные действия в зависимости от условия.
  

• 

  42 слайд

  В операторе if сначала вычисляется выражение. Если полученный результат условия равен true или может быть преобразован в true, то оператор, расположенный в теле if, выполняется.
  Если результат условия равен false или преобразуется в false, то оператор не выполнится. Круглые скобки вокруг выражения являются обязательной частью синтаксиса оператора if.
  

• 

  43 слайд

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

• 

  44 слайд

  Пример
  var num = prompt("Введите любое число","");
  if(num > 5){
  document.write("Число: ", num, " больше 5");
  }
  

• 

  45 слайд

  Оператор if else
  Используется, если необходимо совершить одно действие в случае выполнения условия и другое действие в случае невыполнения этого условия.
  

• 

  46 слайд

• 

  47 слайд

  Пример
  var num = prompt("Введите любое число","");
  if(num >= 10){
  document.write("Число: ", num, " больше или равно 10");
  }
  else {
  document.write("Число: ", num, " меньше 10");
  }
  

• 

  48 слайд

  Вложенный оператор if
  Оператор if является вложенным, если он находится внутри другого оператора if или else.
  if(i)
  {
  if(a) оператор 1;
  if(b) оператор 2;
  else оператор 3; //этот else ассоциирован с if(b)
  }
  else оператор 4; //этот else ассоциирован с if(i)
  Последний оператор else не относится к if(a) потому, что он находится не во внутреннем блоке, этот else ассоциирован с if(i). Внутренний else ассоциирован с if(b), потому что этот if — ближайший к нему.
  

• 

  49 слайд

  Конструкция if-else-if
  Используется при необходимости проверки несколько условий и выборе правильного.
  if(условие){
  оператор;
  } else if(условие){
  оператор;
  } else if(условие){
  оператор;
  }
  else
  оператор;
  

• 

  50 слайд

  Условные выражения в такой конструкции вычисляются сверху вниз. Как только обнаружится истинное условие, выполняется связанный с ним оператор, а все остальные операторы в многоступенчатой конструкции игнорируются.
  Если ни одно из условий не является истинным, то выполняется последний оператор else, который зачастую служит в качестве условия, устанавливаемого по умолчанию. Когда же последний оператор else отсутствует, а все остальные проверки по условию дают ложный результат, то никаких действий вообще не выполняется.
  

• 

  51 слайд

  Домашнее задание 1:
  1. Возьмите две переменные с числовыми значениями, например: a = 2 и b = 10 (числа могут быть любые). Напишите код, который выводит на экран одну из строк: если истинно условие (a > b) строку "a больше b", если (a < b) тогда строку "a меньше b", если (a == b) тогда строку "а равно b". Для вывода на экран можете использовать document.write() или alert().
  

• 

  52 слайд

  Условный оператор
  if (a < b)
  x = a;
  else
  x = b;
  Тернарный оператор
  Тернарный оператор – это оператор, использующий более двух операндов.
  С помощью условного оператора предыдущий код можно записать следующим образом:
  x = (a < b) ? a : b;
  

• 

  53 слайд

  Пример
  <html>
  <body>
  <script>
  var x;
  var a = 10;
  var b = 15;
  x = (a < b) ? a : b;
  document.write(x);
  </script>
  </body>
  </html>
  

• 

  54 слайд

  Оператор switch
  Используется, если в программе присутствует большое дерево ветвлений и все ветвления зависят от значения какой-либо одной переменной.
  Оператор switch сравнивает значение переменной с различными вариантами. При сравнении используется операция строгого равенства "===".
  

• 

  55 слайд

  Пример
  var x = 3;
  switch(x){
  case 1: //if(x === 1)
  document.write("x равен 1");
  break;
  case 2: //if(x === 2)
  document.write("x равен 2");
  break;
  case 3: //if(x === 3)
  document.write("x равен 3");
  break;
  }
  

• 

  56 слайд

  Программа выводит одно из трех сообщений в зависимости от того, какое из чисел находится в переменной x.
  Оператор break
  Завершает выполнение ветвления switch. Управление в этом случае передается первому оператору, следующему за конструкцией switch.
  Если значение переменной в операторе switch не совпадает ни с одним из значений констант, указанных внутри ветвления, то управление будет передано в конец switch без выполнения каких-либо других действий.
  

• 

  57 слайд

  Пример (без использования оператора break)
  var x = 1+1;
  switch(x){
  case 1:
  document.write("x равен 1");
  case 2:
  document.write("x равен 2");
  case 3:
  document.write("x равен 3");
  }
  

• 

  58 слайд

  Ключевое слово default
  Предназначено для того, чтобы программа могла выполнить некоторую последовательность действий в том случае, если ни одно из значений констант не совпало со значением переменной в операторе switch.
  

• 

  59 слайд

  Пример
  var x = 3+3;
  switch(x){
  case 1:
  document.write("x равен 1");
  break;
  case 2:
  document.write("x равен 2");
  break;
  case 3:
  document.write("x равен 3");
  break;
  default:
  document.write("С такими значениями не работаю");
  }
  

• 

  60 слайд

  Циклы
  Действие циклов заключается в последовательном повторении определенной части вашей программы некоторое количество раз.
  Повторение продолжается до тех пор, пока выполняется соответствующее условие.
  Когда значение выражения, задающего условие, становится ложным, выполнение цикла прекращается, а управление передается оператору, следующему непосредственно за циклом.
  

• 

  61 слайд

  Виды циклов:
  for,
  while;
  do while.
  

• 

  62 слайд

  Цикл for
  Цикл for организует выполнение фрагмента программы фиксированное число раз. Как правило (хотя и не всегда), этот тип цикла используется, когда известно заранее, сколько раз должно повториться исполнение кода.
  

• 

  63 слайд

  Пример
  На экран выводятся квадраты целых чисел от 0 до 14: var i;
  for(i = 0; i < 15; i++){
  document.write("квадрат числа " + i + " = " + (i * i) + "
  ");
  }
  

• 

  64 слайд

• 

  65 слайд

  Инициализирующее выражение - представляет из себя оператор присваивания, задающий первоначальное значение переменной, которая выполняет роль счетчика и управляет циклом. Условие выполнения - это логическое выражение, определяющее необходимость повторения цикла.
  Итерация - выражение, определяющее величину, на которую должно изменяться значение переменной, управляющей циклом, при каждом повторе цикла.
  Выполнение цикла for будет продолжаться до тех пор, пока проверка условия дает истинный результат. Как только эта проверка даст ложный результат, цикл завершится, а выполнение программы будет продолжено с оператора, расположенного за циклом.
  

• 

  66 слайд

  Цикл while
  Содержит условие выполнения цикла, но не содержит ни инициализирующих, ни инкрементирующих выражений.
  while(условие){
  //оператор(ы)
  }
  В случае невыполнения условия при первой проверке тело цикла вообще не исполнялось.
  

• 

  67 слайд

  Пример
  var n = 0;
  while(n != 5){
  document.write(n + " ");
  n++; //если из кода убрать эту строку, то цикл будет бесконечным
  }
  

• 

  68 слайд

  Цикл do while
  Условие выполнения цикла располагается не перед, а после тела цикла.
  Пример
  var n = 0;
  do{
  document.write(n + " ");
  n++;
  }while(n != 5);
  Используется ,когда необходимо выполнить тело цикла хотя бы один раз вне зависимости от истинности проверяемого условия.
  

• 

  69 слайд

  Домашнее задание:
  1. Что делает следующий цикл for? Каково финальное значение переменной sum?
  var sum = 0;
  for(var i = -100; i <= 100; i++){
  sum += i;
  }
  2. Напишите программу, которая использует цикл for для суммирования чисел от 50 до 100. Затем перепишите программу с использованием цикла while.
  3. Напишите программу, которая используя цикл while отображает на экране числа от 10 до 0. Затем перепишите программу с использованием цикла for.
  

• 

  70 слайд

  Операторы break и continue
  Оператор break производит выход из цикла.
  Следующим оператором, исполняемым после break, будет являться первый оператор, находящийся вне данного цикла.
  Пример
  for(var i = -10; i <= 10; i++){
  if(i > 0) break; //завершить цикл, как только значение
  //переменной i станет положительным
  document.write(i + " ");
  }
  document.write("Готово!");
  

• 

  71 слайд

  С помощью оператора continue можно организовать преждевременное завершение шага итерации цикла. Оператор continue осуществляет принудительный переход к следующему шагу цикла, пропуская любой код, оставшийся невыполненым.
  Пример
  for(var i = 0; i <= 100; i++){
  if((i % 2) != 0) continue; //перейти к следующему шагу итерации
  document.write(i + " ");
  }
  

• 

  72 слайд

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

• 

  73 слайд

  Определение и вызов функций
  Функция определяется с помощью ключевого слова function, за которым следуют:
  Имя функции
  Круглые скобки, которые могут содержать список имен параметров, разделенных запятыми
  Выполняемые действия, которые составляют тело функции, заключенные в фигурные скобки
  Для вызова функции используется оператор вызова, представляющий из себя пару круглых скобок.
  

• 

  74 слайд

  Пример
  //определение функции
  function starline() {
  for(var i = 0; i < 45; i++){
  document.write("*");
  }
  document.write("
  ");
  }
  starline(); //вызов функции
  document.write("<p>это абзац</p>");
  starline();
  Функция starline() вызывается дважды.
  

• 

  75 слайд

  Область видимости глобальных и локальных переменных
  Область видимости переменной – это та часть программы, для которой эта переменная определена. Глобальная переменная имеет глобальную область видимости – она определена для всей JavaScript программы.
  Переменные, объявленные внутри функции называются локальными и имеют локальную область видимости т.е. они видны только в теле функции. Параметры функции также являются ее локальными переменными и видны только в ее теле.
  

• 

  76 слайд

  Внутри тела функции локальная переменная имеет преимущество перед глобальной переменной с тем же именем. Если объявить локальную переменную или параметр функции с тем же именем, что у глобальной переменной, то фактически глобальная переменная будет скрыта:
  

• 

  77 слайд

  Пример
  var x = "глобальная";
  function checkscope() {
  var x = "локальная";
  document.write(x);
  }
  checkscope();
  

• 

  78 слайд

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

• 

  79 слайд

  Пример
  function getstr(car, place) {
  document.write('Моя машина - ' + car + ' и я еду на ней ' + place);
  }
  function showbook(title) {
  str = '<p>книга называется: "' + title + '"</p>';
  document.write(str);
  }
  var house = "на дачу";
  getstr('BMW', house);
  showbook('Машина времени');
  

• 

  80 слайд

  В JavaScript при установке параметров для функции не указывается ключевое слово var. JavaScript объявляет переменные автоматически, когда они устанавливаются в качестве параметров функции, поэтому ключевое слово var здесь не используется.
  
  Параметры можно использовать как и все другие переменные.
  

• 

  81 слайд

  У функции может быть сколько угодно параметров. При назначении функции нескольких параметров не обязательно использовать все параметры, можно воспользоваться только одним или не использовать их вообще.
  Когда функция вызывается с меньшим количеством используемых параметров, чем описывается в определении, недостающие параметры получают значение undefined.
  

• 

  82 слайд

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

• 

  83 слайд

  Пример
  return имя_переменной;
  return "строка1 " + "строка 2";
  return true;
  return null;
  return a + (b - 31) * 2;
  

• 

  84 слайд

  Оператор return может использоваться без значения, чтобы прекратить выполнение и выйти из функции:
  function calc(a) {
  if(!a) return;
  
  document.write(a);
  }
  

• 

  85 слайд

  В функции может использоваться не один, а несколько операторов return:
  function check(a, b) {
  if(a > b) {
  return a;
  } else {
  return b;
  }
  }
  

• 

  86 слайд

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

• 

  87 слайд

  Диалоговые окна
  alert("Текст сообщения");
  Выводит диалоговое окно с заданным сообщением и кнопкой ОК.
  confirm("Текст сообщения");
  Выводит диалоговое окно с заданным сообщением и кнопками ОК и ОТМЕНА.
  prompt("Текст сообщения", ["текст по умолчанию в поле ввода"]);
  Все три типа окна являются модальными.
  Также могут использоваться для вывода результатов.