Презентация, доклад по МДК.01.04 Web-программирование на тему Объекты и DOM в JavaScript

Содержание

«Давайте вспомним»this.src='box_opened.gif'Задание 2. Вашей группе дан код следующей программы. Вам необходимо ответить на два вопроса:1. Какая конструкция JavaScript используется в данной программе?2. Что выведется на веб-страницу в результате запуска данной программы?Группа 1Группа 2Группа 3Группа 4

Слайд 1«Давайте вспомним»


this.src='box_opened.gif'
Запустить
Задание 1. Отгадать кроссворд по теме «Определения HTML и CSS»

«Давайте вспомним»this.src='box_opened.gif'ЗапуститьЗадание 1. Отгадать кроссворд по теме «Определения HTML и CSS»

Слайд 2«Давайте вспомним»

this.src='box_opened.gif'
Задание 2. Вашей группе дан код следующей программы. Вам необходимо

ответить на два вопроса:
1. Какая конструкция JavaScript используется в данной программе?
2. Что выведется на веб-страницу в результате запуска данной программы?


Группа 1


Группа 2


Группа 3


Группа 4

«Давайте вспомним»this.src='box_opened.gif'Задание 2. Вашей группе дан код следующей программы. Вам необходимо ответить на два вопроса:1.	Какая конструкция JavaScript

Слайд 3«Живой» рисунок


this.src='box_open.png'
свойство src этого объекта
вложенные

кавычки



обработчик события (Javascript)



this.src='box_opened.gif'

Запустить

«Живой» рисунокthis.src='box_open.png'свойство src этого объектавложенные кавычкиобработчик события (Javascript)this.src='box_opened.gif'Запустить

Слайд 4Объекты и DOM

Объекты и DOM

Слайд 5Что такое DHTML?
Динамический HTML (DHTML) – это технология создания интерактивных сайтов,

использующая HTML, CSS, язык программирования (чаще всего JavaScript) и объектную модель документа (англ. DOM = Document Object Model).



Что такое DHTML?Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая HTML, CSS, язык программирования (чаще

Слайд 6Скрытый блок



Детали — это гайка, шайба, болт, винт, шуруп,

гвоздь и др.

.hidden {
display:none;
}

не показывать

block – во всю ширину
inline – в тексте


Скрытый блокДетали — это гайка, шайба, болт, винт, шуруп, гвоздь и др..hidden { display:none;}не показыватьblock – во

Слайд 7Если узел имеет уникальный идентификатор (атрибут id), то узел можно найти

с помощью метода document.getElementById(id)
Можно найти массив элементов с заданными тегами с помощью метода document.getElementsByTagName(tag)
Метод document.getElementsByName(name) возвращает все элементы, у которых имена (атрибут name) равны заданному значению
Метод getElementsByClassName() используется для поиска элементов по классу
Если узел имеет уникальный идентификатор (атрибут id), то узел можно найти с помощью метода document.getElementById(id)Можно найти массив

Слайд 8Javascript-файл
Файл test.js

function show ( name )
{
var elem = document.getElementById(name);


if ( elem )
elem.style.display = "block";
}


найти элемент по id

функция

имя функции

переменная

если нашли

изменить свойство display

Что может быть вместо display?

Javascript-файлФайл test.js function show ( name ){ var elem = document.getElementById(name);  if ( elem )

Слайд 9Для обращения к правилам CSS в коде JavaScript используется свойство style Правила

CSS записываются слитно: fontSize (вместо font-size ) textAlign (вместо text-align) backgroundColor (вместо background-color )
Для обращения к правилам CSS в коде JavaScript используется свойство style Правила CSS записываются слитно: fontSize (вместо

Слайд 10Подключение Javascript-файла




...

имя файла

Подключение Javascript-файла  ...имя файла

Слайд 11Вызов функции



Показать детали

ссылка на эту страницу
дальнейшая

обработка (переход по ссылке) не нужна

по щелчку вызвать функцию

Вызов функцииПоказать деталиссылка на эту страницудальнейшая обработка (переход по ссылке) не нужнапо щелчку вызвать функцию

Слайд 12HTML-файл



Скрытый блок




return false;">
Показать детали








HTML-файл Скрытый блок    Показать детали Детали — это гайка, шайба, болт, винт, шуруп, гвоздь

Слайд 13Формы



value="Готово"
onClick="check();">

форма – набор элементов диалога

поле ввода

кнопка

текст на кнопке

что делать при щелчке





Формы  форма – набор элементов диалогаполе вводакнопкатекст на кнопкечто делать при щелчке

Слайд 14Формы


value="Готово"
onClick="check();">


function check()
{
if ( calc.answer.value == "4" )
alert("Правильно!");
else alert("Неправильно!");
}

Обработка события «щелчок мышью»:

В файл
calc.js

введённый текст

Формы  function check(){if ( calc.answer.value ==

Слайд 15Практическое приминение
Задача: вычислить периметр и площадь треугольника по введенным значениям сторон



Задача



Вычисление площади и периметра треугольника



сторона a:

сторона b:

сторона c:






Как реализовать???

Практическое приминениеЗадача: вычислить периметр и площадь треугольника по введенным значениям сторон	 Задача 	   Вычисление площади

Слайд 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);
}

Как реализовать???

Практическое применениеЗадача: вычислить периметр и площадь треугольника по введенным значениям сторонfunction pp (obj) {var a=Number(obj.st1.value);var b=Number(obj.st2.value);var c=Number(obj.st3.value);var s;

Слайд 17Проверь себя

this.src='box_opened.gif'

Задание 1

Задание 2

Проверь себяthis.src='box_opened.gif'Задание 1Задание 2

Слайд 18Лабораторная работа


this.src='box_opened.gif'
Методический портфель

Лабораторная работаthis.src='box_opened.gif'Методический портфель

Слайд 19Рефлексия

this.src='box_opened.gif'
Какая была цель?
Достигли ее?
Что получилось?
Что не получилось, почему?
Как исправить?
Что понравилось на

уроке?
Что не понравилось на уроке?

Рефлексияthis.src='box_opened.gif'Какая была цель?Достигли ее?Что получилось?Что не получилось, почему?Как исправить?Что понравилось на уроке?Что не понравилось на уроке?

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

Это сайт презентаций, где можно хранить и обмениваться своими презентациями, докладами, проектами, шаблонами в формате PowerPoint с другими пользователями. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами.


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

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

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

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