Разделы презентаций

Диалоги средствами HTML и JavaScript

Содержание

1 Кликни меняСоздаем событие выполняемое при загрузке страницыСвязываем с этим событием дествие

Слайды и текст этой презентации

Слайд 1Диалоги средствами HTML и JavaScript
Презентация к уроку информатики
11 класс
Автор: Юдин

Андрей Борисович
МКОУ Плесская СОШ
Введение в HTML

Диалоги средствами HTML и JavaScriptПрезентация к уроку информатики11 классАвтор: Юдин Андрей БорисовичМКОУ Плесская СОШВведение в HTML

Слайд 21




Кликни меня



Создаем событие выполняемое при загрузке страницы

Связываем с этим событием дествие

1 Кликни

Слайд 32




Кликни меня



Создаем событие выполняемое при щелчке мышкой

Связываем с этим событием действие

Указываем объект по которому надо щелкать мышкой

2 Кликни

Слайд 43
Проект «Сумма двух чисел»

3Проект «Сумма двух чисел»

Слайд 5


ВВеди А=




Поясняющий текст
4
Создаем поле ввода


Значение отображаемое в поле ввода при загрузке страницы
Размер (длина) текстового

поля в символах

Идентификатор поля ввода

ВВеди А= Поясняющий текст4Создаем поле ввода Значение отображаемое в поле ввода при загрузке страницыРазмер (длина) текстового поля

Слайд 6


ВВеди А=

>




Создаем кнопку
Надпись на кнопке
Связываем с кнопкой событие
Имя функции вызываемой при

щелчке мышкой по кнопке

5

ВВеди А= Создаем кнопкуНадпись на кнопкеСвязываем с кнопкой событиеИмя функции вызываемой при щелчке мышкой по кнопке5

Слайд 7


ВВеди А=

>

Результат=



Создадим поле ввода для вывода в

него результатов вычислений

6

ВВеди А= Результат=Создадим поле ввода для вывода в него результатов вычислений6

Слайд 8
function f()
{
var a,b,s;
a=parseFloat(document.getElementById("input1").value);

b=parseFloat(document.getElementById("input2").value);
s=a+b;
document.getElementById("output1").value = s;
}

7
Объявляем

переменные

Преобразуем строку в число

Значение, записанное в первом окне ввода

document.getElementById - метод объекта document. Он возвращает ссылку на узел документа, которую можно использовать для изменения свойств и обращения к методам узла.

Находим сумму

Значение суммы помещаем в третье окно вывода

function f() { var a,b,s; a=parseFloat(document.getElementById(

Слайд 98
Скрипт
Создание интерфейса

8СкриптСоздание интерфейса

Слайд 109
Проект «Калькулятор с выпадающим списком»

9Проект «Калькулятор с выпадающим списком»

Слайд 11Выбери действие:

Сложить
Вычесть

Разделить
Умножить

10
Тег SELECT служит для создания

списка выбора (раскрывающегося списка), а также списка с одним или множественным выбором.

Идентификатор раскрывающегося списка

Значение каждой строки списка

Выбери действие: Сложить Вычесть Разделить Умножить10Тег SELECT служит для создания списка выбора (раскрывающегося списка), а также списка

Слайд 12
function f()
{
var a,b,k,s;
a=parseFloat(document.getElementById("input1").value);

b=parseFloat(document.getElementById("input2").value);
k=parseFloat(document.getElementById("menu").value);
if (k==1) s=a+b;
if

(k==2) s=a-b;
if (k==3) s=a/b;
if (k==4) s=a*b;
document.getElementById("output1").value = s;
}

11

Определяем какую строку списка выбрал пользователь

В зависимости от номера строки выполняем действие

function f() { var a,b,k,s; a=parseFloat(document.getElementById(

Слайд 1312
Скрипт
Создание интерфейса

12СкриптСоздание интерфейса

Слайд 1413
Проект «Калькулятор с выбором действия»

13Проект «Калькулятор с выбором действия»

Слайд 15 Сложить


Вычесть


type="checkbox" id="checkbox3"/> Умножить


Разделить

Данные элементы используются

для выбора одного или нескольких значений, отметив их флажками (галочками).

Создаем checkbox

Идентификатор checkbox

Надпись checkbox

Следующий checkbox с новой строки

14

Сложить Вычесть Умножить Разделить Данные элементы используются для выбора одного или нескольких значений, отметив их

Слайд 16
function f()
{
var a,b,s;
a=parseFloat(document.getElementById("input1").value);

b=parseFloat(document.getElementById("input2").value);
if (document.getElementById('checkbox1').checked) s=a+b;
if (document.getElementById('checkbox2').checked) s=a-b;

if (document.getElementById('checkbox3').checked) s=a*b;
if (document.getElementById('checkbox4').checked) s=a/b
document.getElementById("output1").value = s;
}


Если в checkbox поставлена галочка

15

function f() { var a,b,s; a=parseFloat(document.getElementById(

Слайд 1716
Скрипт
Создание интерфейса

16СкриптСоздание интерфейса

Слайд 1817
Проект «Калькулятор с выбором действия 2»

17Проект «Калькулятор с выбором действия 2»

Слайд 19Сложить

Вычесть

type="radio" name="rad1" id="r3" value="3">Умножить

Разделить
18
Переключатели используют, когда

необходимо выбрать один единственный вариант из предложенных. Имя поля (параметр name) для всех элементов группы должно быть одинаковым.

Создаем переключатель

Имя для всех одно

Идентификатор переключателя

Установить точку при создании

Надпись за переключателем

СложитьВычестьУмножитьРазделить18Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Имя поля (параметр name) для всех элементов группы

Слайд 20
function f()
{
var a,b,s;
a=parseFloat(document.getElementById("input1").value);

b=parseFloat(document.getElementById("input2").value);
var rad1 = document.all.rad1;
if (rad1[0].checked) s=a+b;

if (rad1[1].checked) s=a-b;
if (rad1[2].checked) s=a*b;
if (rad1[3].checked) s=a/b;
document.getElementById("output1").value = s;
}

19

Коллекция all представляет все элементы Web-страницы без исключений, в том числе и изображения. К элементам этой коллекции можно обращаться по номеру (нумеруются они в порядке появления в HTML-коде) или по имени.

Создаем массив переключателей

Проверяем какой переключатель включен

Слайд 2120
Скрипт
Создание интерфейса

20СкриптСоздание интерфейса

Слайд 2221
Проект «Калькулятор с кнопками»

21Проект «Калькулятор с кнопками»

Слайд 23

Ячейка 1


Ячейка 2


Ячейка 3

22

Объединим 4 ячейки в первой строке

Начало таблицы:

Ячейка 1

Слайд 24
Ячейка 4

Ячейка 5
Ячейка 6

Ячейка 7


Ячейка 8


23

Окончание таблицы:

Ячейка 4 Ячейка 5 Ячейка

Слайд 2524
Добавляем кнопку «Выход»

24Добавляем кнопку «Выход»

Слайд 26win = window.open(url, name, params)
window.open("http://ya.ru"); -при запуске откроется новое

окно с указанным URL
.
25
Полный синтаксис:
url - адрес для загрузки

в новое окно

name - имя нового окна

params - cтрока с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно

Метод window.open() возвращает ссылку на вновь открытое окно, т.е. объект класса Window. Его можно присвоить переменной, с тем чтобы потом можно было управлять открытым окном (писать в него, читать из него, передавать и убирать фокус, закрывать).

win = window.open(url, name, params) window.open(

Слайд 27function f5()
{
var thisWindow = window.open("",'_self');
var exit = confirm("Хотите закрыть страницу?");
if(exit){
thisWindow.close();
}
26
Выводит

сообщение в окне с двумя кнопками: "ОК" и "ОТМЕНА". Возвращает true/false в

зависимости от того, куда нажмет пользователь.

Получаем доступ к свойствам текущего окна

Закрываем текущее окно

function f5(){var thisWindow = window.open(

Слайд 2827
Проект «Меню с кнопками»

27Проект «Меню с кнопками»

Слайд 29function f1()
{
var newWin =
window.open("primer1.html",
"Site1","width=420,height=230,
resizable=yes,scrollbars=yes,
status=yes")

newWin.focus()
}
28
Открываемая страница
Ее

имя
Свойства
Переводим фокус на новое окно

function f1(){var newWin = window.open(

Слайд 3029
Список используемой литературы и интернет ресурсов:
http://javascript.ru/ - сайт посвященный языку

Javascript
https://learn.javascript.ru/ - современный учебник по Javascript
http://myrusakov.ru/ создание и раскрутка

сайта от А до Я
Алгоритмизация и основы объектно-ориентированного программирования на JavaScript (Информатика и ИКТ профильный уровень). Мартынов Н.Н. ООО «Бином-Пресс», 2010.
29Список используемой литературы и интернет ресурсов:http://javascript.ru/ - сайт посвященный языку Javascript https://learn.javascript.ru/ - современный учебник по Javascripthttp://myrusakov.ru/

Похожие презентации

Программа в среде ЛогоМиры Программа в среде ЛогоМиры 393
Информация и ее свойства (7 класс) Информация и ее свойства (7 класс) 507
Услуги сети Интернет: виды сайтов 10 класс Услуги сети Интернет: виды сайтов 10 класс 279
Оформление текста в WORD. Оформление текста в WORD. 292
Применение анимации при создании презентации Применение анимации при создании презентации "Простоквашино" 292
Қарапайым графикалық редакторы. Суретті ашу, сақтау. Графикалық редактордың сурет салу құралдары Қарапайым графикалық редакторы. Суретті ашу, сақтау. Графикалық редактордың сурет салу құралдары 327
Роль и значение информационных революций Роль и значение информационных революций 819
Биты и байты Биты и байты 415
Язык программирования Си. Строковые литералы, ввод-вывод, ветвления Язык программирования Си. Строковые литералы, ввод-вывод, ветвления 316
Объекты Базы Данных Запросы Объекты Базы Данных Запросы 286
Графический интерфейс операционных систем и приложений Графический интерфейс операционных систем и приложений 337
Условная функция и логические выражения Условная функция и логические выражения 403
Scratсh - визуальная учебная среда для обучения школьников программированию 1-4 класс Scratсh - визуальная учебная среда для обучения школьников программированию 1-4 класс 366
Передача информации. Локальные сети Передача информации. Локальные сети 386
Уроки с использованием компьютерных технологий в учебном процессе Уроки с использованием компьютерных технологий в учебном процессе 389
Конструирование из мозаики. Работа с меню готовых форм 5 класс Конструирование из мозаики. Работа с меню готовых форм 5 класс 304
Технология FLASH в современном Интернете Технология FLASH в современном Интернете 351
Фотография в рамке Фотография в рамке 420
Решение логических задач Решение логических задач 394
В интернете обо всем на свете В интернете обо всем на свете 258

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.

Для правообладателей

Яндекс.Метрика