Лекция 1 Введение в JavaScript. Пример простейшего XHTML- документа JavaScript Hello World Пepвoe знакомство с JavaScript document.write("Всем привет. - презентация

1 Лекция 1 Введение в JavaScript

2 Пример простейшего XHTML- документа JavaScript Hello World Пepвoe знакомство с JavaScript document.write("Всем привет от JavaScript!");

3 Вывод текста с разметкой Неправильно: document.write("Всем привет от JavaScript!"); Правильно: document.write(' Всем привет от JavaScript! '); Правильно: document.write(' Всем привет от JavaScript! ');

4 Способы внедрения JS в (X)HTML в окружении элемента ; в виде ссылки на файл с помощью атрибута src элемента (как в предыдущем примере); в рамках атрибута программы обработки событий XHTML, такого как onclick или onmouseover; в рамках синтаксиса псевдо-URL javascript:, используемого ссылкой.

5 Тег Использование атрибута language: Использование атрибута type:

6 Несколько скриптов в одном документе Использование тега script Начало document.write("Информация от первого скрипта"); Продолжаем работать... document.write("Информация от второго скрипта"); Конец

7 Скрипт в дескрипторе function alertTest() { alert("Функция JavaScript в дескрипторе head"); } Функция в теге head alertTest();

8 Маскировка сценариев HTML-маскировка XHTML/XML-маскировка

9 Дескриптор использование тега noscript Ваш браузер не поддерживает JavaScript или поддержка JavaScript отключена. Ваш браузер не поддерживает JavaScript или поддержка JavaScript отключена.">

10 Перенаправление в теге использование тега noscript alert("Ваш JavaScript включен!");

11 Обработчики событий Часто используемые обработчики: onclick ondblclick onkeydown onkeypress onkeyup onmousemove onmouseover onmouseout Пример использования: Можете щелкнуть здесь?

12 Внешние сценарии Внешний сценарий...

13 Содержимое myjs.js function alertTest() { alert("Я же просил!"); }

14 Псевдо-URL javascript: Пример: javascript:alert('Привет!'); Использование в гиперссылках: Нажмите здесь для вызова Нажмите здесь Отображение информации о невозможности использования JavaScript: Нажмите здесь для вызова

15 Основные термины, ч. 1 Лексема Все идентификаторы и ключевые слова, а также литералы типа 3.14 и "Это строка символов" Литерал 3.14 "Это строка символов" [2, 4, 6] Идентификатор X myValue username

16 Основные термины, ч. 2 Знак операции + - = Выражение 2.0 "Это строка символов" (х + 2) * 4 Оператор х = х + 2; return(true); if (х) alert("Это х"); function myFunc(){ alert("Всем привет"); }

17 Основные термины, ч. 3 Ключевое слово while do function var Зарезервированное слово class public

18 Чувствительность к регистру Эквивалентная запись Неэквивалентная запись

19 Символы пустого пространства Эквивалентные операторы: х = х + 1; Здесь пробелы сохранятся: var s = "Такие пробелы сохраняются.";

20 Операторы Пример оператора х = у + 10; Помещение нескольких операторов в одну строку х = х + 1; у = у+1; z = 0; х = х + 1; ;; if (х > 10) { х = 0; }; у = у – 1; Неявная точка с запятой х = х + 1 у = у - 1

21 Фигурные скобки Пример использования скобок {} if (х > 10) { х = 0; У = 10; }

22 Переменные Объявление переменных var х; Инициализация переменных var х = 2; Объединение нескольких объявлений и инициализаций var х, у = 2, z; Присваивание x=5; Присваивание по цепочке: x=y=z=5;

23 Базовые типы данных Пример: var stringData = "JavaScript использует строки.\n Это правда."; var numericData = 3.14; var booleanData = true;

24 Массивы Объявление и инициализация массивов var myArray = [1,5,68,3]; var myArray = ["Thomas", true, 3, , "x"]; var myArray = new Array(); var myArray = new Array(4); var myArray = new Array(1, 5, "Thomas", true); Обращение к элементам массивов var x = myArray[2]; var у = myArray[0]; myArray[1] = 5;

25 Объекты Доступ к свойствам объектов: имя Объекта.имя Свойства Доступ в стиле ассоциативных массивов: document["lastModified"] эквивалентно document.lastModified Методы: document.write("Всем привет от JavaScript!"); Оператор with with (объект) { оператор(ы); } Пример использования: with (document){ write("использовать with - проще, "); write("чем выписывать "); write("полный путь"); }

26 Операции Операция присваивания: = Арифметические операции: + (сложение) - (вычитание или унарная смена знака) * (умножение) / (деление) % (остаток от деления) Пример: var х=3, у=6; х = -х; х = у + 2; х = у - 1; х = у * у; х = у / х; х = у % 4;

27 Битовые целочисленные операции Операции & (И) | (ИЛИ) ~ (НЕ) ^ (исключающее ИЛИ) << (сдвиг влево) >> (сдвиг вправо) >>> (сдвиг вправо с заполнением нулями) Таблица истинности для битов Бит первого операнда Бит второго операнда Результат &Результат |Результат ^

28 Комбинированные операции присваивания += -= *= /= %= >= >>>= &= |= ^=

29 Операции сравнения Описание и примеры Операция ЗначениеПример Результат < Меньше 4 < 84 < 8true <= Меньше или равно 6 <= 5false > Больше 4 > 34 > 3true >= Больше или равно 5 >= 5true != Не равно 6 != 5true == Равно 6 == 5false === Равно (и того же типа) 5 === '5'false !== Не равно (или другого типа) 5 !== '5'true

30 Логические операции Операции: && (И) || (ИЛИ) ! (НЕ) Пример: var a = 10, c; var d = (a>20) && ((c=50)>0); alert("d = "+d+"; c = "+c)

31 Другие операции Тернарный оператор ветвления (?:) var x=10, y=10; var z = x>y? x : y; Инкремент (++) и декремент (--) var x=10, y=10; alert("x++ = "+ (x++)+ "; ++y = "+ (++y)); Оператор запятая (,) var x=1,y=2,z; z=(x=2,3,y=4); // z=4

32 Операторы ветвления Оператор if if (выражение) оператор; Оператор if-else if (выражение) оператор 1 else оператор 2 Пример: if(x > 10){ x = 0; } else { x = x + 1; } Оператор switch switch (выражение) { case значение_1: оператор(ы) case значение_2: оператор(ы) … case значение_N: оператор(ы) default: оператор(ы) }

33 Пример оператора switch Пример: var a = 5, s = ""; switch(a){ case 6: s +=a; case 5: s +=a; case 4: s +=a; case 3: s+=a; default: s+=" s= "+a; } alert(s); Пример с оператором break: var a = 5, s = ""; switch(a){ case 6: s +=a; break; case 5: s +=a; break; case 4: s +=a; break; case 3: s+=a; break; default: s+=" s= "+a; } alert(s);

34 Цикл while Общая запись while (выражение) оператор Пример var x=0; while(x < 10) { document.write(x); document.write(" "); x++; }

35 Цикл do-while Общая запись: do оператор; while (выражение); Пример: var x=0; do { document.write(x); document.write(" "); x++; } while(x < 10) document.write("Готово");

36 Цикл for Общая запись for (инициализация; условие; обновление_переменной) оператор Пример for(x=0; x<10; x++){ document.write(x); document.write(" "); } document.write("Готово");

37 Объектный цикл for-in Общая запись for (имя_переменной in объект) Пример: var aProperty; for (aProperty in window) { document.write(aProperty) document.write(" "); }

38 Операторы break и continue Пример: var x=0; while(true){ x++; if(x >= 10) break; if(x == 5) continue; document.write(x); document.write(" "); }

39 Break и continue с метками Пример: outerloop: for (var i = 0; i < 3; i++) { document.write("Внешний цикл: "+i+" "); for (var j = 0; j < 5; j++) { if (j == 3) break outerloop; document.write("Внутренний цикл: "+j+" "); } document.write("Все циклы завершены"+" ");

40 Функции Пример определения функции function add(x, y){ var sum = x + y; return sum; } Пример вызова функции и возврата значения var result = add(2, 3); var a=3, b=5; result = add(a,b);

41 Ввод-вывод данных в JavaScript Функция alert() alert("Это очень важное сообщение!"); Функция confirm() confirm("Будем учить JavaScript?"); Функция prompt() var answer = prompt(" Какой цвет вам нравится больше всего?","");

42 Комментарии Однострочные комментарии var count =10; // число заказанных единиц товара Многострочные комментарии /* Функция возведения в квадрат имеет аргумент числового типа и возвращает значение, равное его квадрату. Например, чтобы возвести в квадрат значение 10 и поместить его в переменную у, используйте функцию так: var у = square(10); Эта функция должна вызываться только с данными числового типа! */ function square(х){ return х*х; // умножить х на х и вернуть значение }