spangeBob's clock
Presentation
•
Education
•
Professional Development
•
Hard
Edukoht Edukohter
Used 8+ times
FREE Resource
41 Slides • 31 Questions
1
spangeBob's clock
Сегодня мы будем делать интерактивные часы :)
2
Для начала поработает с HTML
3
Multiple Choice
А где же мы будем писать весь кодик для часиков?
<body>
<head>
<korobka>
<meta>
4
Multiple Choice
Первым делом мы должны задать название для наших часов. Какой тег мы можем с вами для этого использовать?
<h1>
<div>
<heading>
<Arkadiy pomogi>
5
Сделай сам!
Добавь тег «h1» в элемент «body».
6
7
Multiple Choice
Но куда же мы будем выводить наше время? Для этого нам понадобится какой-нибудь текстовый тег. Какой же тег нам поможет...
<img>
border
<h2>
<ul>
8
Сделай сам!
Добавь тег «h2». Укажите у него атрибут «class» с значением «time»
9
10
Multiple Select
Ура, теперь у нас есть место, куда мы сможем выводить время. Но сейчас наши часы будут выглядеть слишком скучно. Предлагаю добавить туда какую-нибудь картинку ;) Какой тег и атрибут помогут нам просто вставить картинку?
scr
img put
src
<img>
source
11
Сделай сам!
Добавь тег «img» c атрибутом «src». Не забудь указать ссылку на картинку
12
13
Multiple Choice
Ну что же дальше? Мне кажется нам не хватает нашей любимой кнопочки! Каким образом мы можем добавить кнопочку к нам на сайт, чтобы она отображалась в любом браузере?
<murMay>
<batton>
<BUTTON>
<button>
14
Сделай сам!
Добавь кнопку на свою страницу и укажи ей название: покажи время
15
16
Multiple Choice
Ой, что же случилось с нашим великолепным дизайном? Почему кнопочка находится вместе с фотографией на одной строчке? Нам нужно немедленно это исправить! При помощи какого тега мы можем переместить кнопочку на новую строчку?
<break line>
<br>
<delet>
<li>
17
Сделай сам!
Добавь тег «br» перед кнопочкой.
18
19
Отлично, мы разобрались со структурой наших часов. Но что же там с дизайном...
20
Multiple Choice
Какую технологию мы можем использовать для стилизации наших часов?
HTML
CSS
JS
Python
C++
21
Multiple Select
Супер, теперь мы можем использовать CSS-свойства для украшения наших часов! Какое свойство и значениe мы можем использовать, чтобы сделать наш текст в центрике?
text-align
center
margin-top
<div>
centrelize
22
Fill in the Blanks
Type answer...
23
Сделай сам!
Добавь элементу «body» свойство «text-align: center»
24
25
Multiple Select
Отлично текст теперь по центру. Но что происходит с нашей картинкой? Почему она все еще такая большая? Какому элементу мы должны сказать, чтобы он стал поменьше и какие свойства мы можем для этого использовать? PS: здесь должно быть выбрано три ответа.
img
border
opacity
width
height
26
Сделай сам!
Задай картинки какие-нибудь размеры
27
28
Fill in the Blanks
Type answer...
29
Сделай сам!
Задай кнопке какие-нибудь размеры.
30
31
Multiple Choice
Хорошо, а можно ли как-то избавиться от этой надоедливой рамочки? Какое значение мы можем указать для border, чтобы она пропала?
4px solid
none
10px dashed yellow
deleted
32
Multiple Choice
Ооо, это уже покрасивее. А может добавим кнопочке еще закругление. При помощи какого свойства, ты можешь сделать свою кнопочку закругленной?
background-raound
background-image
border-radius
border-definder
33
Сделай сам!
Добавь кнопке свойство «border: none». Так же сделай кнопочку закругленной.
34
35
Multiple Select
Отлично, теперь добавим нашим кнопочкам немного цвета! Какие два свойства помогут нам задать цвет букв и цвет заднего фона?
border
background-color
color
text-transform
transition
36
Multiple Choice
А чего такие буковки маленькие? Надо нам это исправлять! При помощи какого свойства мы можем изменить размер нашего текста?
font-size
text-size
text-smaller
text-differ
text-transform
37
Multiple Choice
Здорово, было бы еще круто вспомнить, при помощи какого свойства мы можем подвинуть нашу кнопку от других элементов?
resizer
padding
space
magic
margin
38
Сделай сам!
Измени задний цвет фона у кнопки, размер шрифта, цвет букв. Сделай отступ сверху от других элементов. Не забудь использовать для этого свойство «margin-top»
39
40
Теперь нужно добавить нашему сайту действия. Здесь на поможет JS.
41
Multiple Select
Для начала нам нужно создать переменную «Time» и присвоить ей найденный элемент «h2». Какая конструкция делает это?
let time = document.h2
let time = document
let time = document.querySelector("")
let time = document.querySelector("h2");
42
Fill in the Blanks
Type answer...
43
Fill in the Blanks
Type answer...
44
Сделай сам!
Создай переменные: time, img, button. Присвой этим переменным выбраные элементы: .time, img, button.
45
Multiple Choice
Давайте теперь попробуем создать функцию «getTime». Какая конструкция поможет нам это реализовать?
function getTime
function getTime{}
function getTime(){}
function(){}
46
Multiple Choice
После этого давайте создадим переменную «fullTime» и присвоим ей новый объект класса «Date». Да, звучит очень сложно, но на самом деле все просто. Попробуй предположить, какая конструкция могла бы помочь нам это сделать?
let = new Date();
let fullTime = new Date();
let fullTime new Date();
let babaZina = new Date();
47
Multiple Choice
Теперь нам нужно создать переменную «hours» и присвоить ей значение часов. Для этого мы должны воспользоваться методом «getHours» объекта Date. Как ты думаешь, какая конструкция нам в этом поможет?
fullTime.getNothing()
fullTime.getSeconds()
fullTime.getMinutes()
fullTime.getHours()
48
Fill in the Blanks
Type answer...
49
Fill in the Blanks
Type answer...
50
Сделай сам!
Посмотри на следующий слайд и перепиши код.
51
52
Multiple Choice
Здорово, теперь нам нужно вспомнить, какая штука поможет нам изменять текст тега, используя JS.
innerColor
innerText
text
innerMedia
53
Круто, теперь мы должны создать строчку со временем.
.Здесь нам поможет операция «concatenation». Давайте посмотрим один пример, чтобы разобраться с этим приемом. Если мы сложим "Name" и "mentor", то получим "Namementor". Если мы сложим 5 и 5, то получим 10. Если мы сложим "time: " и 5, то получим "time: 5".
54
Multiple Choice
Используя знания с предыдущего слайда, попробуй выбрать правильную строчку в формате hours:minutes:seconds
hours+minutes+seconds
hours+":"+minutes+":"+seconds
hours":"minutes":"seconds
55
Multiple Choice
Воу это было сложно. Также функция может возвращать значения, когда мы ее вызываем. Чтобы наша функция вернула какое-то значение, нужно использовать специальное слово «return». В нашей задачи мы должны вернуть значение переменной hours. Попробуй выбрать конструкцию, которая решит нашу проблему.
return seconds
return hours
something return
56
Сделай сам!
Посмотри на следующий слайд и перепиши код.
57
58
Fill in the Blanks
Type answer...
59
Немного о странных скобочках
Также в функцию мы можем передавать какие-то параметры. В нашем случае, мы будем передавать туда нашу переменную «hours». То-есть наша функция будет выглядеть воть так: function getImage(hours){}
60
Multiple Choice
Было бы круто, если наши часы могли работать как будильник. Для этого нам нужно вспомнить, каким образом у нас задаются условия в программировании.
if else
for
try catch
while
61
Multiple Choice
Давайте попробуем менять картинку в зависимости от времени. Какая команда нам в этом поможет?
setInterval()
setAttribute()
62
Сделай сам!
Посмотри на следующий слайд и перепиши код. PS: только не переписывай, пожалуйста, ту большую ссылку. Найди свою фотографию и вставь ее как второй параметр в метод «setAttribute»
63
64
Сделай сам!
Посмотри на следующий слайд и перепиши код. PS: только не переписывай, пожалуйста, ту большую ссылку. Найди свою фотографию и вставь ее как второй параметр в метод «setAttribute»
65
66
Multiple Choice
Теперь давайте подумаем. При помощи какой конструкции мы можем задать нашей кнопочки действие «click»? Посмотрите на варианты и выберите правильный ответ.
button.addEventListener("click"}
button.addEventListener("click", function(){}
button.addEventListener()
button
67
Сделай сам!
Добавь элементу «button» действие «click».
68
69
Сделай сам!
Добавь элементу в функцию метода «addEventListener» конструкцию «setInterval» c параметрами: getTime, 10
70
71
Сделай сам!
Добавь элементу в функцию метода «addEventListener» еще одну конструкцию «setInterval» c параметрами: getImage(getTime()) , 5000
72
spangeBob's clock
Сегодня мы будем делать интерактивные часы :)
Show answer
Auto Play
Slide 1 / 72
SLIDE
Similar Resources on Wayground
67 questions
Презентация без названия
Presentation
•
KG - University
65 questions
Лекция 7. Распознавание цифр. Некоторые вопросы обучения НС
Presentation
•
University
59 questions
Юридические факты торгового права. Торговый договор
Presentation
•
University
77 questions
Повторение
Presentation
•
University
59 questions
Advertising texts
Presentation
•
University
58 questions
Биологические средства очистки сточных вод промышленных предприятий
Presentation
•
University
58 questions
Создание чертежей в AUTOCAD
Presentation
•
University
71 questions
Учет прав участников. Переходы акций и долей
Presentation
•
KG - University
Popular Resources on Wayground
20 questions
STAAR Review Quiz #3
Quiz
•
8th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
6 questions
Marshmallow Farm Quiz
Quiz
•
2nd - 5th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
20 questions
Context Clues
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
19 questions
Classifying Quadrilaterals
Quiz
•
3rd Grade
12 questions
What makes Nebraska's government unique?
Quiz
•
4th - 5th Grade