1 of 30

Сценарии в HTML�язык JavaScript�

2 of 30

Сценарии в HTML, язык JavaScript

  • Внедрение сценариев в HTML документ
  • Введение в JavaScript
  • Синтаксис языка
  • Переменные и типы данных
  • Управляющие конструкции языка

3 of 30

Внедрение сценариев в HTML документ

  • http://www.w3.org/TR/html4/interact/scripts.html#h-18.3.1

<!--

Старый стиль - использование атрибута LANGUAGE

В текущей версии HTML считается нежелательным

-->

<script language="javascript">

// Так писать не надо!

</script>

<script type="text/javascript">

<!-- для старых браузеров

function square(i)

{

return i * i;

}

document.write(square(5));

// -->

</script>

<noscript>

Ваш браузер не поддерживает сценарии

</noscript>

4 of 30

Введение в JavaScript

  • Интерпретируемый язык, основан на синтаксисе языка Java
  • Регистро-чувствительные конструкции и операторы
  • Концом оператора служит символ «;»
  • Комментарии
    • Строчный� var i = 0; // Счетчик цикла
    • Блочный� /* Здесь и далее� обработка ввода */

​

5 of 30

Нотация – устоявшиеся правила записи

  • «Верблюжья нотация» записи
    • Все имена – маленькими буквами
    • На стыке слов – буква Большая
    • Переменные и свойства – существительные
    • Массивы и коллекции – существительные во множественном числе
    • Функции и методы – глаголы
    • Названия классов – с Большой буквы

var myCounter = 1;

var userPreferedColors = new Array();

var xmlDOM = new MyDOM();

function getUserCounter(userID) { . . . }

6 of 30

Переменные

  • Переменные объявляются ключевым словом var
  • Переменные принимают тот тип данных, который в них присваивается

var myCounter = 1;

myCounter = false;

myCounter = "Строка";

7 of 30

Типы данных

  • Undefined Type
  • Null Type
  • Boolean Type
  • String Type
  • Number Type
  • Object Type

​

8 of 30

Undefined Type и Null Type

  • Undefined Type – неопределенный тип, любая необъявленная переменная имеет такой тип

​

  • Null Type – отсутствие значения, значение null

var myCounter = 1;

. . .

myCounter = null;

9 of 30

Boolean Type – Логический тип данных

  • Значения true и false
  • Определены следующие операторы:
    • Логическое И: &&
    • Логическое ИЛИ: ||
    • Логическое НЕ: !

var a = true;

var b = false;

c = a && b; // результат false

c = a || b; // результат true

c = !a; // результат false

10 of 30

String Type – Строковый тип

  • Строка – набор символов, обрамляется «"» или «’»
  • Операции над строками:
    • Конкатенация – объединение строк: a + b
    • Вставка специальных символов

​

var str1 = "Строка текста ";

var str2 = 'Еще одна строка текста';

var str3 = "1 \t 2 \n Строка";

​

11 of 30

Number Type – Числовой тип

  • Целые числа
  • Числа с плавающей запятой
  • Специальные значения: NaN, +Infinity, -Infinity
  • Допустимые операции
    • + сложение
    • - вычитание
    • / деление
    • * умножение
    • % остаток от деления

12 of 30

Object Type – объектный тип

  • Объекты
    • Свойства
    • Методы
  • Создание объектов

var obj = new MyObject();

obj.name = "Имя пользователя";

obj.sayHello();

13 of 30

Лабораторная работа

  • Написание сценария. Работа с переменными�20 мин.�

​

​

​

​

​

​

​

​

  • Совет. Для вывода значений воспользуйтесь функцией alert()

Создайте файл lab-1-1.html

1

Создайте переменные: строка 1 и строка 2, объедините строки

2

Создайте переменные 3.14 и FF Перемножьте их

3

14 of 30

Операторы и управляющие конструкции

  • Условный оператор
  • Оператор переключения
  • Циклы
  • Функции
  • Оператор обработки исключений

15 of 30

Условный оператор if

  • if (bool) operator;

​

  • if (bool)�{� operator1;� operator2;�}

16 of 30

Условный оператор if-else

  • if (bool)�{� // Если ИСТИНА� operator1;� operator2;�}�else�{� // Если ЛОЖНО� operator3;� operator4;��}

17 of 30

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

  • == Равно
  • === Равно с учетом типа
  • != Равно
  • > Больше
  • < Меньше
  • >= Больше-Равно
  • <= Меньше-Равно

18 of 30

Условное присвоение

var a = 10;

var b = (a > 1) ? 100 : 200;

alert(b);

19 of 30

Оператор переключения

var a = 2;

switch (a)

{

case 0:

case 1:

alert("Один");

break;

case 2:

alert("Два");

break;

default:

alert("Много");

}

20 of 30

Демонстрация

  • Условные операторы

Оператор if

1

Условное присваивание

2

Оператор переключения

3

21 of 30

Циклы

  • Цикл перечисления for
  • Цикл «для каждого» for in
  • Цикл с предусловием while
  • Цикл с постусловием do . . . while

22 of 30

Цикл перечисления for

for (var i = 0; i < 10; i++)

{

if (i == 4) continue;

// ...

document.write(i + "<br>");

// ...

if (i == 8) break;

}

23 of 30

Цикл «для каждого» for in

  • Предназначен для прохода по массивам, коллекциям и объектам

​

for (var prop in navigator)

{

document.write(prop + "<br>");

}

24 of 30

Цикл с предусловием while

  • Выполняется пока условие истинно
  • Условие проверяется ПЕРЕД очередным проходом
  • Если условие ложно – не выполняется ни разу

var a = 1;

while (a < 1000)

{

a *= 2;

if (a == 32) continue;

document.write(a + "<br>");

if (a == 256) break;

}

25 of 30

Цикл с постусловием do . . . while

  • Выполняется пока условие истинно
  • Условие проверяется ПОСЛЕ очередным проходом
  • Если условие ложно – выполнится хотя бы один раз

var a = 1;

do

{

a *= 2;

if (a == 32) continue;

document.write(a + "<br>");

if (a == 256) break;

} while (a < 1000);

26 of 30

Демонстрация

  • Операторы цикла

Цикл for

1

Цикл while

2

Цикл do . . . while

3

27 of 30

Оператор обработки исключений

try

{

// Блок кода

badOperator;

}

catch (e)

{

alert("Ошибка: " + e.message);

}

28 of 30

Оператор обработки исключений – финализация

try

{

// Блок кода

badOperator;

}

catch (e)

{

alert("Ошибка: " + e.message);

}

finally

{

alert("Завершающие действия");

}

29 of 30

Лабораторная работа

  • Использование операторов языка�30 мин

​

​

​

​

​

​

​

​

​

  • Совет. В качестве примера используйте файл for-2.html

С помощью циклов сформируйте таблицу 9 х 9

1

В ячейки таблицы выведите результат умножения i * j

2

Первый ряд и первую колонку выведите с красным фоном

3

30 of 30

Итоги

  • Внедрение сценариев в HTML документ
  • Переменные
  • Типы данных
  • Условные операторы
  • Операторы циклов
  • Оператор обработки исключений