Сценарии в HTML язык JavaScript Сценарии в HTML, язык JavaScript Внедрение сценариев в HTML документ Введение в JavaScript Синтаксис языка Переменные и типы данных Управляющие конструкции языка Внедрение сценариев в HTML документ http://www.w3.org/TR/html4/interact/scripts.html#h-18.3.1 <!-Старый стиль использование атрибута LANGUAGE В текущей версии HTML считается нежелательным <script type="text/javascript"> <!-- для старых браузеров function square(i) { return i * i; --> <script language="javascript"> // Так писать не надо! </script> } document.write(square(5)); // --> </script> <noscript> Ваш браузер не поддерживает сценарии </noscript> Введение в JavaScript Интерпретируемый язык, основан на синтаксисе языка Java Регистро-чувствительные конструкции и операторы Концом оператора служит символ «;» Комментарии Строчный var i = 0; // Счетчик цикла Блочный /* Здесь и далее обработка ввода */ Нотация – устоявшиеся правила записи «Верблюжья нотация» записи Все имена – маленькими буквами На стыке слов – буква Большая Переменные и свойства – существительные Массивы и коллекции – существительные во множественном числе Функции и методы – глаголы Названия классов – с Большой буквы var myCounter = 1; var userPreferedColors = new Array(); var xmlDOM = new MyDOM(); function getUserCounter(userID) { . . . } Переменные Переменные объявляются ключевым словом var Переменные принимают тот тип данных, который в них присваивается var myCounter = 1; myCounter = false; myCounter = "Строка"; Типы данных Undefined Type Null Type Boolean Type String Type Number Type Object Type Undefined Type и Null Type Undefined Type – неопределенный тип, любая необъявленная переменная имеет такой тип Null Type – отсутствие значения, значение null var myCounter = 1; . . . myCounter = null; Boolean Type – Логический тип данных Значения true и false Определены следующие операторы: Логическое И: && Логическое ИЛИ: || Логическое НЕ: ! var a = true; var b = false; c = a && b; // результат false c = a || b; // результат true c = !a; // результат false String Type – Строковый тип Строка – набор символов, обрамляется «"» или «’» Операции над строками: Конкатенация – объединение строк: a + b Вставка специальных символов var str1 = "Строка текста "; var str2 = 'Еще одна строка текста'; var str3 = "1 \t 2 \n Строка"; Number Type – Числовой тип Целые числа Числа с плавающей запятой Специальные значения: NaN, +Infinity, -Infinity Допустимые операции + сложение - вычитание / деление * умножение % остаток от деления Object Type – объектный тип Объекты Свойства Методы Создание объектов var obj = new MyObject(); obj.name = "Имя пользователя"; obj.sayHello(); Лабораторная работа Написание сценария. Работа с переменными 20 мин. 1 Создайте файл lab-1-1.html 2 Создайте переменные: строка 1 и строка 2, объедините строки 3 Создайте переменные 3.14 и FF Перемножьте их Совет. Для вывода значений воспользуйтесь функцией alert() Операторы и управляющие конструкции Условный оператор Оператор переключения Циклы Функции Оператор обработки исключений Условный оператор if if (bool) operator; if (bool) { operator1; operator2; } Условный оператор if-else if (bool) { // Если ИСТИНА operator1; operator2; } else { // Если ЛОЖНО operator3; operator4; } Операции сравнения == Равно === Равно с учетом типа != Равно > Больше < Меньше >= Больше-Равно <= Меньше-Равно Условное присвоение var a = 10; var b = (a > 1) ? 100 : 200; alert(b); Оператор переключения var a = 2; switch (a) { case 0: case 1: alert("Один"); break; case 2: alert("Два"); break; default: alert("Много"); } Демонстрация Условные операторы 1 Оператор if 2 Условное присваивание 3 Оператор переключения Циклы Цикл перечисления for Цикл «для каждого» for in Цикл с предусловием while Цикл с постусловием do . . . while Цикл перечисления for for (var i = 0; i < 10; i++) { if (i == 4) continue; // ... document.write(i + "<br>"); // ... if (i == 8) break; } Цикл «для каждого» for in Предназначен для прохода по массивам, коллекциям и объектам for (var prop in navigator) { document.write(prop + "<br>"); } Цикл с предусловием while Выполняется пока условие истинно Условие проверяется ПЕРЕД очередным проходом Если условие ложно – не выполняется ни разу var a = 1; while (a < 1000) { a *= 2; if (a == 32) continue; document.write(a + "<br>"); if (a == 256) break; } Цикл с постусловием do . . . while Выполняется пока условие истинно Условие проверяется ПОСЛЕ очередным проходом Если условие ложно – выполнится хотя бы один раз var a = 1; do { a *= 2; if (a == 32) continue; document.write(a + "<br>"); if (a == 256) break; } while (a < 1000); Демонстрация Операторы цикла 1 Цикл for 2 Цикл while 3 Цикл do . . . while Оператор обработки исключений try { // Блок кода badOperator; } catch (e) { alert("Ошибка: " + e.message); } Оператор обработки исключений – финализация try { // Блок кода badOperator; } catch (e) { alert("Ошибка: " + e.message); } finally { alert("Завершающие действия"); } Лабораторная работа Использование операторов языка 30 мин 1 С помощью циклов сформируйте таблицу 9 х 9 2 В ячейки таблицы выведите результат умножения i * j 3 Первый ряд и первую колонку выведите с красным фоном Совет. В качестве примера используйте файл for-2.html Итоги Внедрение сценариев в HTML документ Переменные Типы данных Условные операторы Операторы циклов Оператор обработки исключений