Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


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

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

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

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

Презентация на тему Диалоги средствами HTML и JavaScript

Содержание

1 Кликни меняСоздаем событие выполняемое при загрузке страницыСвязываем с этим событием дествие
Диалоги средствами HTML и JavaScriptПрезентация к уроку информатики11 классАвтор: Юдин Андрей БорисовичМКОУ Плесская СОШВведение в HTML 1 2 3Проект «Сумма двух чисел» ВВеди А= Поясняющий текст4Создаем поле ввода Значение отображаемое в поле ввода при ВВеди А= Создаем кнопкуНадпись на кнопкеСвязываем с кнопкой событиеИмя функции вызываемой при щелчке мышкой по кнопке5 ВВеди А= Результат=Создадим поле ввода для вывода в него результатов вычислений6 function f() {  var a,b,s;  a=parseFloat(document.getElementById( 8СкриптСоздание интерфейса 9Проект «Калькулятор с выпадающим списком» Выбери действие: Сложить Вычесть Разделить Умножить10Тег SELECT служит для создания списка выбора function f() {  var a,b,k,s;  a=parseFloat(document.getElementById( 12СкриптСоздание интерфейса 13Проект «Калькулятор с выбором действия» Сложить  Вычесть Умножить Разделить Данные элементы используются для выбора одного function f() {  var a,b,s;  a=parseFloat(document.getElementById( 16СкриптСоздание интерфейса 17Проект «Калькулятор с выбором действия 2» СложитьВычестьУмножитьРазделить18Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Имя поля function f() {  var a,b,s;  a=parseFloat(document.getElementById( 20СкриптСоздание интерфейса 21Проект «Калькулятор с кнопками» Ячейка 1 Ячейка 4    Ячейка 24Добавляем кнопку «Выход» win = window.open(url, name, params) window.open( function f5(){var thisWindow = window.open( 27Проект «Меню с кнопками» function f1(){var newWin = window.open( 29Список используемой литературы и интернет ресурсов:http://javascript.ru/ - сайт посвященный языку Javascript https://learn.javascript.ru/
Слайды презентации

Слайд 2 1




1        Кликни меняСоздаем событие

Кликни меня



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

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


Слайд 3 2




2        Кликни меняСоздаем событие

Кликни меня



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

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

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


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

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

Слайд 5


ВВеди А=




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

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

поле ввода
Значение отображаемое в поле ввода при загрузке

страницы

Размер (длина) текстового поля в символах

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


Слайд 6


ВВеди А=

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

value="Счет" onclick="f()" >




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

функции вызываемой при щелчке мышкой по кнопке

5


Слайд 7


ВВеди А=

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

value="Счет" onclick="f()" >

Результат=



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

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

6


Слайд 8
function f()
{
var a,b,s;

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

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

s;
}

7

Объявляем переменные

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

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

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

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

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


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

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

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

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

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

Сложить

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

value="2" >Вычесть
Разделить
Умножить

10
Тег SELECT

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

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

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


Слайд 12
function f()
{
var a,b,k,s;

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

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

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

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


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

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

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

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

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


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

Вычесть


Умножить


Разделить



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

Создаем checkbox

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

Надпись checkbox

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

14


Слайд 16
function f()
{
var a,b,s;

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

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


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

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

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

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

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

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

id="r2" value="2">Вычесть

Умножить

value="4">Разделить

18

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

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

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

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

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

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


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

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

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

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

Слайд 23

Ячейка 1     Ячейка

Ячейка 1



Ячейка 2


Ячейка 3

22

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

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


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

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

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

6
Ячейка 7


Ячейка 8


23

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


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

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

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

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

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

адрес для загрузки в новое окно

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

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

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


Слайд 27 function f5()
{
var thisWindow = window.open("",'_self');
var exit = confirm("Хотите

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

закрыть страницу?");
if(exit){
thisWindow.close();
}
26
Выводит сообщение в окне с двумя кнопками: "ОК"

и "ОТМЕНА". Возвращает true/false в зависимости от того, куда нажмет пользователь.

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

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


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

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

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

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

status=yes")

newWin.focus()
}
28
Открываемая страница
Ее имя
Свойства
Переводим фокус на новое окно


  • Имя файла: dialogi-sredstvami-html-i-javascript.pptx
  • Количество просмотров: 100
  • Количество скачиваний: 0