Знакомимся с программированием в Интернет Или Зачем нужен JavaScript. - презентация

1 Знакомимся с программированием в Интернет Или Зачем нужен JavaScript

2 Как писать на JavaScript JavaScript это не HTML! JavaScript располагается внутри документа HTML. JavaScript сохраняется в виде текста вместе с документом HTML. У JavaScript четкая форма. И пренебрегать ею нельзя. Первая строка скрипта: ……. - это последняя строка скрипта. JavaScript – это объектно-ориентированный язык. Первый объект – это наш документ. document.write(" Я изучаю JavaScript ") объект метод

3 Первая программа на JavaScript Пусть браузер покажет несколько окон с приветствиями. Вы можете пользоваться такими окнами для вывода особо важных сообщений. В примере используем единственную команду alert для вывода сообщения на экран. Однако пример содержит два сценария. Первый вставлен в раздел заголовка.., второй - в тело документа... Первый сценарий будет загружен и выполнен раньше, чем браузер распечатает сам документ. Второй сценарий будет выполнен в процессе вывода на экран тела документа.

4 Оператор ввода и вывода информации Оператор ввода имеет следующий формат: Prompt(, ); Пример: ima=prompt("Как тебя зовут?", "введи сюда свое имя"); Переменная ima приобретает тип строковый, т.к. с помощью оператора prompt получаем строку. ===================================== Оператор вывода устроен несколько проще: В скобках содержится строка или выражение, значение которого и выводится в окно. При этом знак «+» означает операцию конкатенации, т.е. слияния двух строк Пример: alert(Привет! + ima);

5 Задания 1. Оформите на HTML –страничке дружественный диалог с посетителем Вашего сайта. 2. Проверьте, что будет выведено в окно в случае выполнения следующего оператора: alert (22+3); alert(22 + 3= + 25) объясните получившийся результат

6 Работа над ошибками !!! Обратите внимание, что в используются кавычки. Вероятно, что в процессе исполнения сценария браузер выдал ошибку. Причины могут быть следующими: 1. JavaScript чувствителен к регистрам символов. Большая часть команд, ключевых слов, названий объектов пишется с маленькой буквы. Давая имена своим переменным, старайтесь также следить за регистром. 2. Команды JavaScript разделяются точкой с запятой. Часто именно отсутствие знака « ;» приводит к ошибке. Об ошибках браузеры сигнализируют по-разному. Internet Explorer, например, может вывести сообщение: А может просто "промолчать". При этом в нижнем углу строки состояния появляется мелкий значок с желтым треугольником и знаком восклицания. Если по нему щелкнуть два раза, раскроется окно с расшифровкой ошибки.

7 Задание Вариант 1 Напишите программу на HTML-страничке, которая запрашивает значение температуры в градусах Цельсия и переводит его в градусы Фаренгейта по следующей формуле: Градусы Фаренгейта=1.8 * градусы Цельсия + 32 Измените программу так, чтобы она переводила еще и градусы Фаренгейта в градусы Цельсия перевод градусов из Цельсия в шкалу Фаренгейта и обратно grad=prompt("перевод температуры","задай град по Цельсию"); alert(grad+"градусов по Цельсию равно" + (1.8*grad+32) + "градусов по Фаренгейту");

8 Подпрограммы на языке JavaScript Однако, полезно и удобно размещать программы на языке JavaScript в отдельном файле. Для этого: 1. Создайте текстовый файл, назовите его например prim2. js и поместите в него следующую подпрограмму: function far() { Grad=prompt(перевод температуры, введи градусы по Цельсию); Alert(grad+градусов по Цельсию = + (1.8*grad+32) + градусов по Фаренгейту); } А в HTML- программе в разделе HEAD пишем:

9 Варианты решения Вариант 2 (разместим функции в отдельном файле и в основной странице создадим кнопки для вызова) Вариант 2 перевод градусов из Цельсия в шкалу Фаренгейта и обратно ==================== Файл к Варианту 2 (Prim2.js) function far() { grad=prompt("перевод температуры","задай град по Цельсию"); alert(grad + "градусов по Цельсию равно " + (1.8*grad+32) + " градусов по Фаренгейту"); } !!! Не забывайте добавлять перевод градусов из шкалы по Фаренгейту в шкалу по Цельсию

10 Варианты решений (Вариант 3) (выведем результат расчета прямо на кнопку) Перевод градусов перевод градусов из Цельсия в шкалу Фаренгейта и обратно ====================== Файл prim3. js (к Варианту 3) function far() { grad=prompt("перевод температуры","задай град по Цельсию"); f1.knopka1.value=grad+"градусов по Цельсию равно " + (1.8*grad+32) + " градусов по Фаренгейту"; } !!! Не забывайте добавлять перевод градусов из шкалы по Фаренгейту в шкалу по Цельсию

11 Подпрограммы на языке JavaScript (САМОСТОЯТЕЛЬНАЯ РАБОТА) В технике скорость вращения колеса измеряют количеством оборотов в минуту. Физики скорость вращения меряют в метрах в секунду. Создайте на Вашей странице скрипт для перевода значений скорости об/мин (W) в скорость м/с (V) и обратно. Используйте формулу: V = W*3,14 / 30 ВАРИАНТ 1 Ввод и вывод данных осуществить с помощью окон, вызываемых командой PROMPT () и ALERT(). ВАРИАНТ 2 разместим функции в отдельном файле и в основной странице создадим кнопки для вызова. ВАРИАНТ 3 выведем результат расчета прямо на кнопку

12 Переменные и присваивание значений Имена переменных строятся по тем же правилам, что и в большинстве других языков программирования. Например: а, min, clock …. Для присваивания значений используйте знак =. Новые переменные объявляются в теле программы с помощью ключевого слова var. Вот пример, где некоторая информация запоминается в переменные и выводится на экран

13 Задание Наберите этот пример и сделайте следующие эксперименты: 1. Попробуйте объявить переменную a второй раз с помощью var. Произойдет ли ошибка? 2. Попробуйте вообще убрать все ключевые слова var. Будет ли работать программа? 3. Сделайте так, чтобы в конце программы компьютер присвоил переменной c результат сложения строковой и числовой переменной, например, var a="слово"; var b=1; var c=a+b; alert(c); Что получится? Рассмотрим пример: var a=30; var b=22; var c="слово"; alert(a+b+c); В этом примере мы получим ответ "52 слово".

14 Усложним диалог с посетителем сайта Задаем вопрос и пишем реакцию на ответ. Если ответ «хорошо» или «отлично», мы ответим «Ok», в противном случае ответим «не грусти»

15 Текст программы диалог function ansv() {var d=document if ((d.form1.n1.value=="отлично") || (d.form1.n1.value=="хорошо")) {d.form1.n1.value="OK"} else {d.form1.n1.value="не грусти"} } Как твои дела?

16 Объект HTML – изображение тэг Разместите на Вашей страничке изображение. Давайте с помощью подпрограммы на языке JavaScript снабдим его «зум-эффектом», т.е. пусть при наведении мышки его размер увеличивается, скажем, в 2 раза. Сначала приведем таблицу основных событий, на которые реагирует объект Событие Возникает onclick При щелчке мышкой на изображении onmouseover При наведении мышки на изображение onmouseout При выходе курсора мышки из области над изображением ondblclick При двойном щелчке на изображении oncopy При копировании изображения onmouseup При отпускании левой клавиши мышки над изображением

17 Объект HTML – изображение тэг Добавить в вашу страничку Добавить в файл prim3. js function zoom() { ris1.height=600; } Добавим в тэг идентификатор для нашего рисунка

18 Вопросы и задания Определите для объекта реакцию еще на пару событий и обеспечьте: 1. Возвращение исходного размера картинки после того, как мышка будет убрана из ее области; 2. Изменение картинки в случае щелчка по изображению Естественно, что для каждого такого события должна быть написана соответствующая подпрограмма.

19 Калькулятор Давайте создадим свой простенький калькулятор. Пусть он будет выглядеть так… Для красоты разместим его элементы в таблице, воспользовавшись ее параметром border.

20 Калькулятор calculator Это HTML-файл Для операндов создали два поля: OP1 и OP2, а для результата поле REZ.

21 Калькулятор function plus() { rez.value=op1.value-(-1)*op2.value; } function minus() { rez.value=op1. value - op2.value; } Это файл kalkul.js ЗАДАНИЯ: 1. Допишите две подпрограммы, необходимые для работы калькулятора. 2. В правой нижней части калькулятора осталось свободное место для дополнительных кнопок. Создайте, например, кнопку для очистки текстовых полей и пусть эта кнопка занимает обе свободные ячейки (см рисунок калькулятора).

22 Самостоятельная работа Создайте в HTML-странице скрипт для расчета суммарного и среднего балла учащегося(см образец)

23 Арифметические и логические вычисления в JavaScript В арифметических действиях используйте следующие операции : Операция Название + Сложение - вычитание * умножение / деление % Остаток от деления Для выполнения логических операций используйте константы true и false, а также операторы: Операция Название && Логическое И Логическое ИЛИ ! Логическое отрицание

24 Вычисления на странице сайта Задача: вычислим площадь круга, радиус зададим с помощью окна ввода Var r=prompt ("введи радиус", "0"); результат функции prompt имеет строковый тип. Значит, необходимо преобразовать символ в число. Воспользуйтесь функцией parseInt(строка) или parseFloat(строка) для преобразования введенной строки в целое число или число с плавающей точкой. Например: var r=parseInt(prompt("Введите радиус","0")); или var r=parseFloat(prompt("Введите радиус","0"));

25 Вот пример простейшей программы для расчета площади круга по формуле S= r2: Alert("расчет площади круга"); Var r = parseFloat(prompt("Введите радиус", "1")); Var s= * r * r; Alert("площадь круга" + s);

26 Задание для самостоятельной работы На своей новой страничке школьник Петя предусмотрел гостевую книгу. В ней запрашивались фамилия, имя посетителя и телефон. Некоторые посетители вводили номер без тире, например, вместо они набрали Такой набор цифр Петя пожелал сразу преобразовывать в удобный для запоминания вид. Он составил простую программу на JavaScript, которая проверяла поле формы на наличие тире. Если они отсутствовали, компьютер форматировал номер и в базу сервера номер попадал в нужном виде. См далее

27 Задание для самостоятельной работы Будем считать, что номер всегда вводится шестизначным числом, в котором отсутствуют тире. Программа должна запрашивать номер с помощью функции prompt, а результат демонстрировать командой alert. Нельзя пользоваться ветвлениями, циклами и методами для работы со строками. В вашем распоряжении одни арифметические операции и механизм автоматического преобразования типов языка JavaScript. Результат можно получить с помощью простого линейного алгоритма. Вам будут нужны несколько дополнительных переменных, операция % и механизм конкатенации строк. Маленькая подсказка: Пусть а= Пусть а 1=а % 10; a=(а – а 1) / 10; В результате: а 1=6, а=12345

28 Объект JavaScript – DATE Объекты JavaScript служат для хранения и обработки разнородных данных. Функции обработки называются в JavaScript «методами». Объект Date используется для работы с календарными данными. Например: d=new Date(); В переменной d содержится информация о текущей дате: о времени, о годе, номере месяца, о дне недели и еще много о чем. !!! Обратите внимание на прописные и строчные буквы. Это важно. И еще!!! Если вы хотите, чтобы ваша функция выполнялась сразу при загрузке страницы, добавьте в тэг body загрузку этой функции: См далее

29 Чтобы воспользоваться этой информацией, служат методы. Объект JavaScript – DATE методыназначение getYear () Год getMonth () Номер месяца. Январь 0 getDate () число getDay () Номер дня недели. Воскресенье 0 getHours () часы getMinutes () минуты getSeconds () секунды

30 //Скрипт отмечает точную дату и время вашего прибытия на страницу Now = new Date(); document.write("Сегодня " + Now.getDate()+ "-" + Now.getMonth() + "-" + Now.getFullYear() + ". Вы зашли на мою страницу ровно в: " + Now.getHours() + ":" + Now.getMinutes() + " и " + Now.getSeconds() + " секунд."); строка document.write не должна прерываться. Она разбита для удобства чтения. // - означает комментарий. Now = это созданный объект, к которому применены методы: getDate(), getMonth() и др.

31 Самостоятельная работа Создайте на своей страничке сценарий, в котором сообщается посетителю о том, сколько дней осталось, например, до Нового года. Кроме того, на странице должна появиться текущая дата в российском стандарте в виде: Сегодня – , сейчас – 23:18

32 Время на странице пошло function digitalWatch() { var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); if (hours < 10) hours = "0" + hours; if (minutes < 10) minutes = "0" + minutes; if (seconds < 10) seconds = "0" + seconds; document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds; setTimeout("digitalWatch()", 1000); }

33 С л а й д – ш о у Проблема: пусть картинка, находящаяся на Вашей страничке, автоматически меняется, скажем, каждые пять секунд. Для этого нам потребуется переменная, начальное значение которой присваивается вне вызываемой функции. Эта JavaScript – программа будет выглядеть следующим образом: X=0; Function slide() { Pictures=new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); Period=1000; setTimeout("slide() ",period); ris1.src=pictures[x]; x=x+1; If (x>=pictures.length) (x=0); } Здесь переменная Pictures является массивом из 5-ти элементов (картинок). Переменная Х является индексом (порядковым номером) элементов массива. Оператор SetTimeout обеспечивает выполнение подпрограммы, написанной внутри скобок (в нашем случае - slide() ), каждую секунду. =pictures.length) (x=0); } Здесь переменная Pictures является массивом из 5-ти элементов (картинок). Переменная Х является индексом (порядковым номером) элементов массива. Оператор SetTimeout обеспечивает выполнение подпрограммы, написанной внутри скобок (в нашем случае - slide() ), каждую секунду.">

34 З а д а н и е 1. Организуйте на новой страничке слайд-шоу 2. Добавьте ниже иллюстрации пару – другую кнопок, позволяющую ускорять, замедлять и практически остановить показ картинок. 3. Вы можете использовать слайд – шоу для создания мультимедийной презентации по какому-нибудь учебному предмету.

35 ИНТЕРНЕТ- МАГАЗИНЧИК Организуем продажу товара через Интернет. Конечно, это довольно сложный программный комплекс, его не сделать за урок. Мы попробуем рассчитать стоимость выбранных товаров.

36 ИНТЕРНЕТ- МАГАЗИНЧИК ИНТЕРНЕТ - МАГАЗИН выбирайте нужный товар Монитор lg руб. Винчестер 60 гб руб. Принтер canon i руб. Видеокарта 8500 pro руб. Сканер Mustek 12SP руб.

37 ИНТЕРНЕТ- МАГАЗИНЧИК Объект типа СheckBox имеет два важных свойства: Value – это его значение, которое будет обрабатывать программа; Checked – имеет логическое значение True, если внутри объекта стоит галочка выбора, и значение False в противном случае. Назовем функцию, которая вычислит общую стоимость выбранных товаров, count1(). function count1() { f1.itog.value=0; if (f1.tov1.checked) (f1.itog.value=Number(f1.itog.value)+ Number(f1.tov1.value)); } !!! Функция Number() преобразует строковые значения в числовые. Задание: 1. Допишите подпрограмму count1(). 2. Поменяйте картинки на подходящие для интернет – магазина.