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

Содержание

• 
  Слайд 1

  Основы JavaScript

  JavaScript

• 
  Слайд 2
  

  Структура кода Переменные и типы Взаимодействие с посетителем Особенности операторов Логические операторы Циклы Конструкция switch Функции Методы и свойства

• 
  Слайд 3

  Структура кода

  Операторы разделяются точкой с запятой:     1 alert('Привет'); alert('Мир'); Перевод строки тоже подразумевает точку с запятой:     1 alert('Привет'); 2 alert('Мир'); Поддерживаются однострочные комментарии // ... и многострочные /* ... */

• 
  Слайд 4

  Переменные и типы

  Объявляются директивой var. Могут хранить любое значение: var  x = 5; x = "Петя";

• 
  Слайд 5
  

  Есть 5 «примитивных» типов и объекты: 1 x = 1;         // число 2 x = "Тест"; // строка, кавычки могут быть одинарные или двойные 3 x = true;    // булево значение true/false 4 x = null;    // «ссылкой на нулевой адрес/объект» 5 x = undefined;    //  «переменная не присвоена»

• 
  Слайд 6
  

  Также есть специальные числовые значения Infinity (бесконечность) и NaN. Значение NaN обозначает ошибку и является результатом числовой операции, если она некорректна. В имени переменной могут быть использованы любые буквы или цифры, но цифра не может быть первой. Символы доллар $ и _ подчёркивание   допускаются наравне с буквами.

• 
  Слайд 7

  Взаимодействие с посетителем

  Простейшие функции для взаимодействия с посетителем в браузере: prompt(вопрос[, по_умолчанию]) Задать вопрос и возвратить введённую строку, либо null, если посетитель нажал «Отмена». confirm(вопрос) Задать вопрос и предложить кнопки «Ок», «Отмена». Возвращает, соответственно, true/false . alert(сообщение) Вывести сообщение на экран.

• 
  Слайд 8
  

  Все эти функции являются модальными, т.е. не позволяют посетителю взаимодействовать со страницей до ответа. Например:     1 var userName = prompt("Введите имя?", "Василий"); 2 var smokes = confirm("Вы хотите чаю?"); 3  4 alert( "Посетитель: " + userName); 5 alert( "Чай: " + smokes);

• 
  Слайд 9

  Операторы JavaScript

  Для сложения строк используется оператор +.Если хоть один аргумент — строка, то другой тоже приводится к строке:     1alert( 1 + 2 );   // 3, число 2alert( '1' + 2 ); // '12', строка 3alert( 1 + '2' ); // '12', строка

• 
  Слайд 10
  

  Сравнение === проверяет точное равенство, включая одинаковый тип.  Это самый очевидный и надёжный способ сравнения. Остальные сравнения  == >= осуществляют числовое приведение типа:     1alert( 0 == false ); // true 2alert( true > 0 );   // true Исключение — сравнение двух строк 

• 
  Слайд 11
  

  Сравнение строк — лексикографическое, символы сравниваются по своим unicode-кодам. Поэтому получается, что строчные буквы всегда больше, чем прописные:     1alert('а' > 'Я'); // true

• 
  Слайд 12
  

  Исключение: значения null и undefined ведут себя в сравнениях не как ноль. Они равны null == undefined друг другу и не равны ничему ещё. В частности, не равны нулю. В других сравнениях (кроме ===) значение null преобразуется к нулю, а undefined — становится NaN («ошибка»).

• 
  Слайд 13
  

  Такое поведение может привести к неочевидным результатам, поэтому лучше всего использовать для сравнения с ними ===. Оператор == тоже можно, если не хотите отличатьnull от undefined. Например, забавное следствие этих правил для null:     1alert( null > 0 );  // false, т.к. null преобразовано к 0 2alert( null >= 0 ); // true, т.к. null преобразовано к 0 3alert( null == 0 ); // false, в стандарте явно указано, что null равен лишь undefined С точки зрения здравого смысла такое не возможно. Значение null не равно нулю и не больше, но при этом null >= 0 возвращает true!

• 
  Слайд 14

  Логические операторыJavaScript

  В JavaScript есть логические операторы: И (обозначается &&), ИЛИ (обозначается ||) и НЕ (обозначается !). Они интерпретируют любое значение как логическое. Результатом логического оператора служит последнее значение в коротком цикле вычислений.

• 
  Слайд 15

  ОператорыЦикла JavaScript

  Поддерживаются три вида циклов: 01// 1 02while (условие) {  03  ... 04} 05  06// 2 07do {  08  ... 09} while(условие); 10  11// 3 12for (var i = 0; i

• 
  Слайд 16
  

  Поддерживаются три вида циклов: Переменную можно объявлять прямо в цикле, но видна она будет и за его пределами. Поддерживаютсядирективы  break/continue для выхода из цикла/перехода на следующую итерацию.

• 
  Слайд 17
  

  Для выхода одновременно из нескольких уровней цикла можно задать метку. Синтаксис: «имя_метки:», ставится она только перед циклами и блоками, например: 1 outer: 2 for(;;) { 3     ... 4   for(;;) { 5     ... 6     break outer; 7    } 8 } Переход на метку возможен только изнутри цикла, и только на внешний блок по отношению к данному циклу. В произвольное место программы перейти нельзя.

• 
  Слайд 18

  Операторы JavaScript

  Конструкция switch Конструкция switch заменяет собой сразу несколько if. Это — более наглядный способ сравнить выражение сразу с несколькими вариантами.

• 
  Слайд 19
  

  Конструкция switch 01switch(x) { 02  case 'value1':  // if (x === 'value1') 03    ... 04    [break] 05  06  case 'value2':  // if (x === 'value2') 07    ... 08    [break] 09  10  default: 11    ... 12    [break] 13} Переменная x проверяется на строгое равенство первому значению value1, затем второму value2 и так далее. Если соответствие установлено — switch начинает выполняться от соответствующей директивы caseи далее, до ближайшего break (или до конца switch).При этом case называют вариантами switch. Если ни один case не совпал — выполняетcя (если есть) вариант default.

• 
  Слайд 20

  ФункцииJavaScript

  Синтаксис функций в JavaScript: 1 // function имя(список параметров) { тело } 2 function sum(a, b) { 3   var result = a + b; 4  5   return result; 6 } sum — имя функции, ограничения на имя функции — те же, что и на имя переменной. Переменные, объявленные через var внутри функции, видны везде внутри этой функции, блоки if, for и т.п. на видимость не влияют.

• 
  Слайд 21
  

  Параметры передаются «по значению», т.е. копируются в локальные переменные a, b, за исключением объектов, которые передаются «по ссылке», их мы подробно обсудим в главе Объекты как ассоциативные массивы. Функция без return считается возвращающей undefined. Вызов return без значения также возвращает undefined:     1 function f() { } 2 alert( f() ); // undefined

• 
  Слайд 22

  Методы и свойстваJavaScript

  Все значения в JavaScript, за исключением null и undefined, содержат набор вспомогательных функций и значений, доступных «через точку». Такие функции называют «методами», а значения — «свойствами».

• 
  Слайд 23
  

  Например:     1 alert( "Привет, мир!".length ); // 12 Еще у строк есть метод toUpperCase(), который возвращает строку в верхнем регистре:     1 var hello = "Привет, мир!"; 2  3 alert( hello.toUpperCase() ); //"ПРИВЕТ, МИР!"