javascript

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

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

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

http://www.w3.org/TR/html4/interact/scripts.html#h-18.3.1
 return i * i;
<script }
language="javascript"> document.write(square(5));
// Так писать не надо! // -->
</script> </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

Создайте переменные: строка 1 и
2 строка 2, объедините строки
Создайте переменные 3.14 и FF
3 Перемножьте их

Совет. Для вывода значений воспользуйтесь функцией
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

Итоги

Переменные
Типы данных
Условные операторы
Операторы циклов

javascript

More Related Content

What's hot

Viewers also liked

Similar to javascript

Recently uploaded

javascript