Ученики на Учителя.com


Презентация "Введение в HTML. Диалоги средствами HTML и JavaScript" 11 класс

Скачать материал
Подписи к слайдам:

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

Презентация к уроку информатики

11 класс

Автор: Юдин Андрей Борисович

МКОУ Плесская СОШ

Введение в HTML

1

<html>

<body onload="alert('Страница загрузилась!!!')">

<h3 onclick="alert('Ты меня кликнул!!!')">

Кликни меня</h3>

</body>

</html>

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

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

2

<html>

<body onload="alert('Страница загрузилась!!!')">

<h3 onclick="alert('Ты меня кликнул!!!')">

Кликни меня</h3>

</body>

</html>

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

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

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

3

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

<html>

<body>

ВВеди А=<input type="text" value="1" size="20" id="input1">

</body>

</html>

Поясняющий текст

4

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

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

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

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

<html>

<body>

ВВеди А=<input type="text" value="1" size="20" id="input1">

<input type="button" value="Счет" onclick="f()" >

</body>

</html>

Создаем кнопку

Надпись на кнопке

Связываем с кнопкой событие

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

5

<html>

<body>

ВВеди А=<input type="text" value="1" size="20" id="input1">

<input type="button" value="Счет" onclick="f()" >

Результат=<input type="text" value="2" size="20" id="output1">

</body>

</html>

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

6

<script>

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;

}

</script>

7

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

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

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

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

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

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

8

Скрипт

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

9

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

Выбери действие:

<select id="menu" >

<option value="1" >Сложить</option>

<option value="2" >Вычесть</option>

<option value="3" >Разделить</option>

<option value="4" >Умножить</option>

</select>

10

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

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

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

<script>

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;

}

</script>

11

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

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

12

Скрипт

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

13

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

<input type="checkbox" id="checkbox1"/> Сложить <br/>

<input type="checkbox" id="checkbox2"/> Вычесть <br/>

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

<input type="checkbox" id="checkbox4"/> Разделить <br/>

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

Создаем checkbox

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

Надпись checkbox

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

14

<script>

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;

}

</script>

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

15

16

Скрипт

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

17

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

<input type="radio" name="rad1" id="r1" CHECKED >Сложить

<input type="radio" name="rad1" id="r2" value="2">Вычесть

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

<input type="radio" name="rad1" id="r4" value="4">Разделить

18

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

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

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

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

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

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

<script>

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;

}

</script>

19

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

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

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

20

Скрипт

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

21

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

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Ячейка 6

Ячейка 7

Ячейка 8

<table BORDER="3"

ALIGN="center">

<tr>

<td colspan="4"> Ячейка 1 </td>

</tr>

<tr>

<td colspan="4"> Ячейка 2 </td>

</tr>

<tr>

<td colspan="4"> Ячейка 3 </td>

</tr>

22

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

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

<tr>

<td>Ячейка 4</td>

<td>Ячейка 5</td>

<td>Ячейка 6</td>

<td>Ячейка 7</td>

</tr>

<tr>

<td colspan="4">Ячейка 8</td>

</tr>

</table>

23

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

24

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

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

window.open("http://ya.ru"); -при запуске откроется новое окно с указанным URL

.

25

Полный синтаксис:

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

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

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

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

function f5()

{

var thisWindow = window.open("",'_self');

var exit = confirm("Хотите закрыть страницу?");

if(exit){

thisWindow.close();

}

26

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

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

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

27

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

function f1()

{

var newWin =

window.open("primer1.html",

"Site1","width=420,height=230,

resizable=yes,scrollbars=yes,

status=yes")

newWin.focus()

}

28

Открываемая страница

Ее имя

Свойства

Переводим фокус на новое окно

29

Список используемой литературы и интернет ресурсов:

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

Информатика - еще материалы к урокам: