Рабочие листы
к вашим урокам
Скачать
1 слайд
«Давайте вспомним»
1
this.src='box_opened.gif'
Запустить
Задание 1. Отгадать кроссворд по теме «Определения HTML и CSS»
2 слайд
«Давайте вспомним»
2
this.src='box_opened.gif'
Задание 2. Вашей группе дан код следующей программы. Вам необходимо ответить на два вопроса:
1.Какая конструкция JavaScript используется в данной программе?
2.Что выведется на веб-страницу в результате запуска данной программы?
Группа 1
Группа 2
Группа 3
Группа 4
3 слайд
«Живой» рисунок
3
<img src="box_close.png"
onMouseOver="this.src='box_open.png'"
onMouseOut="this.src='box_close.png'">
this.src='box_open.png'
свойство src этого объекта
вложенные кавычки
обработчик события (Javascript)
this.src='box_opened.gif'
Запустить
4 слайд
Объекты и DOM
4
5 слайд
Что такое DHTML?
5
Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая HTML, CSS, язык программирования (чаще всего JavaScript) и объектную модель документа (англ. DOM = Document Object Model).
6 слайд
Скрытый блок
6
<div id="details" class="hidden">
Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др.
</div>
.hidden {
display:none;
}
не показывать
Зачем нужен id?
?
block – во всю ширину
inline – в тексте
7 слайд
Если узел имеет уникальный идентификатор (атрибут id), то узел можно найти с помощью метода document.getElementById(id)
Можно найти массив элементов с заданными тегами с помощью метода document.getElementsByTagName(tag)
Метод document.getElementsByName(name) возвращает все элементы, у которых имена (атрибут name) равны заданному значению
Метод getElementsByClassName() используется для поиска элементов по классу
8 слайд
Javascript-файл
8
Файл test.js
function show ( name )
{
var elem = document.getElementById(name);
if ( elem )
elem.style.display = "block";
}
найти элемент по id
функция
имя функции
переменная
если нашли
изменить свойство display
Что может быть вместо display?
9 слайд
Для обращения к правилам CSS в коде JavaScript используется свойство style
Правила CSS записываются слитно:
fontSize (вместо font-size )
textAlign (вместо text-align)
backgroundColor (вместо background-color )
10 слайд
Подключение Javascript-файла
10
<head>
<script src="test.js"></script>
...
</head>
имя файла
11 слайд
Вызов функции
11
<a href="#"
onClick="show('details');return false;">
Показать детали
</a>
ссылка на эту страницу
дальнейшая обработка (переход по ссылке) не нужна
по щелчку вызвать функцию
12 слайд
HTML-файл
12
<html>
<head>
<title>Скрытый блок</title>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<a href=# onClick="show('details'); return false;">
Показать детали</a>
</body>
</html>
<div id="details" class="hidden">
Детали — это гайка, шайба, болт, винт,
шуруп, гвоздь и др.
</div>
Запустить
13 слайд
Формы
13
<form name="calc">
<input name="answer">
<input type="button"
value="Готово"
onClick="check();">
</form>
форма – набор элементов диалога
поле ввода
кнопка
текст на кнопке
что делать при щелчке
![Формы14
function check()
{
if ( calc.answer.value == "4" )
alert("...](https://documents.infourok.ru/bc13812f-bd1a-4935-a340-886e24af9f18/0/slide_14.jpg "Формы14
function check()
{
if ( calc.answer.value == "4" )
alert("...")
14 слайд
Формы
14
<form name="calc">
<input name="answer">
<input type="button"
value="Готово"
onClick="check();">
</form>
function check()
{
if ( calc.answer.value == "4" )
alert("Правильно!");
else alert("Неправильно!");
}
Обработка события «щелчок мышью»:
В файл
calc.js
введённый текст
15 слайд
Практическое приминение
15
Задача: вычислить периметр и площадь треугольника по введенным значениям сторон
<html>
<head>
<title> Задача </title>
<script src="test2.js"> </script>
</head>
<body>
<h1>Вычисление площади и периметра треугольника</h1>
<form name="form1">
сторона a: <input type="text" name="st1">
сторона b: <input type="text" name="st2">
сторона c: <input type="text" name="st3">
<input type="button" value="вычислить" onclick="pp(form1)">
</form>
</body>
</html>
Как реализовать???
16 слайд
Практическое применение
16
Задача: вычислить периметр и площадь треугольника по введенным значениям сторон
function pp (obj) {
var a=Number(obj.st1.value);
var b=Number(obj.st2.value);
var c=Number(obj.st3.value);
var s;
p=a+b+c;
document.writeln("Периметр треугольника равен ",p,"
");
p=p/2;
s=Math.sqrt(p*(p-a)*(p-b)*(p-c));
document.write("Площадь треугольника равна ",s);
}
Как реализовать???
Запустить
17 слайд
Проверь себя
17
this.src='box_opened.gif'
Задание 1
Задание 2
18 слайд
Лабораторная работа
18
this.src='box_opened.gif'
Методический портфель
19 слайд
Рефлексия
19
this.src='box_opened.gif'
Какая была цель?
Достигли ее?
Что получилось?
Что не получилось, почему?
Как исправить?
Что понравилось на уроке?
Что не понравилось на уроке?
Рабочие листы
к вашим урокам
Скачать
6 665 942 материала в базе
«Информатика. Углубленный уровень (в2 частях)», Поляков К.Ю., Еремин Е.А.
Глава 4. Создание веб-сайтов
Больше материалов по этой теме
Настоящий материал опубликован пользователем Тихонова Алина Александровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
36 ч. — 180 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.