Скачать презентацию Знакомимся с программированием в Интернет Или Зачем нужен Скачать презентацию Знакомимся с программированием в Интернет Или Зачем нужен

c124c429d8a2906b298170cc1f329794.ppt

  • Количество слайдов: 37

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

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

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

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

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

используются кавычки. Вероятно," src="http://present5.com/presentation/c124c429d8a2906b298170cc1f329794/image-6.jpg" alt="Работа над ошибками !!! Обратите внимание, что в

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

Варианты решения Вариант 2 (разместим функции в отдельном файле и в основной странице создадим Варианты решения Вариант 2 (разместим функции в отдельном файле и в основной странице создадим кнопки для вызова) Вариант 2 перевод градусов из Цельсия в шкалу Фаренгейта и обратно

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

Варианты решений (Вариант 3) (выведем результат расчета прямо на кнопку) <HTML> <HEAD> <TITLE> Перевод Варианты решений (Вариант 3) (выведем результат расчета прямо на кнопку) Перевод градусов перевод градусов из Цельсия в шкалу Фаренгейта и обратно

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

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

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

Задание Наберите этот пример и сделайте следующие эксперименты: 1. Попробуйте объявить переменную a второй Задание Наберите этот пример и сделайте следующие эксперименты: 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 слово".

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

function ansv() {var d=document if" src="http://present5.com/presentation/c124c429d8a2906b298170cc1f329794/image-15.jpg" alt="Текст программы диалог Как твои дела?

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

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

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

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

Калькулятор <html> <head> <title> calculator </title> <script src=kalkul. js> </script> Это HTML-файл </head> <body> Калькулятор calculator Это HTML-файл

Для операндов создали два поля: OP 1 и OP 2, а для результата поле REZ.

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

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

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

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

Вот пример простейшей программы для расчета площади круга по формуле S= r 2: <html> Вот пример простейшей программы для расчета площади круга по формуле S= r 2:

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

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

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

Чтобы воспользоваться этой информацией, служат методы. Объект Java. Script – DATE методы назначение get. Чтобы воспользоваться этой информацией, служат методы. Объект Java. Script – DATE методы назначение get. Year () Год get. Month () Номер месяца. Январь № 0 get. Date () число get. Day () Номер дня недели. Воскресенье № 0 get. Hours () часы get. Minutes () минуты get. Seconds () секунды

//Скрипт отмечает точную дату" src="http://present5.com/presentation/c124c429d8a2906b298170cc1f329794/image-30.jpg" alt="Как напечатать в документе дату и время строка document. write не должна прерываться. Она разбита для удобства чтения. // - означает комментарий. Now = это созданный объект, к которому применены методы: get. Date(), get. Month() и др.

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

function digital. Watch() { var date = new" src="http://present5.com/presentation/c124c429d8a2906b298170cc1f329794/image-32.jpg" alt="Время на странице пошло

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

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

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

ИНТЕРНЕТМАГАЗИНЧИК <h 1><center>ИНТЕРНЕТ - МАГАЗИН</h 1> <p align=left><font size=5 color=green>выбирайте нужный товар</p> <p align=left><font ИНТЕРНЕТМАГАЗИНЧИК

ИНТЕРНЕТ - МАГАЗИН

выбирайте нужный товар

Монитор lg 795 - 7345 руб. Винчестер 60 гб - 3220 руб. Принтер canon i 550 - 4750 руб. Видеокарта 8500 pro - 2160 руб. Сканер Mustek 12 SP- 2300 руб.

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