Задачи на основы работы с DOM в JavaScript

Задачи на основы работы с DOM в JavaScript

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Задачи на основы работы с DOM в JavaScript

Задачи на основы работы с DOM в JavaScript

www.homa.xp3.biz 

Практика

Примеры решения задач

Задача 1. Алерт по нажатию на кнопку

Повторите поведение кнопки по нажатию на нее:

Решение:

<button onclick=alert('Привет')>Нажми</button>

Задача 2. Изменение текста в инпуте

Повторите поведение кнопки по нажатию на нее (она меняет текст в инпуте):

Решение:

<button onclick=e2buttonClick()>Нажми</button>

<input type=text id=e2input value=v2>

<script>function e2buttonClick(){input=document.getElementById('e2input');input.value='q2'}</script>

Задача 3. Вывод содержимого инпута

Повторите поведение кнопки по нажатию на нее (она выводит алертом содержимое инпута):

Решение:

<button onclick=e3buttonClick()>Нажми</button>

<input type=text id=e3input value=v3>

<script>function buttonClick(){input=document.getElementById('e3input');alert(input.value)}</script>

Задача 4. Квадрат содержимого инпута

Повторите поведение кнопки по нажатию на нее (она выводит алертом содержимое инпута, возведенное в квадрат):

Решение:

<input type=text id=e4input placeholder='Введите число'> <button onclick=e4buttonClick()>Нажми</button><script>function e4buttonClick(){input=document.getElementById('e4input');number=Number(input.value);square=number*number;alert(square)}</script>

Задача 5. Обмен содержимым между инпутами

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

Решение:

<button onclick=e5buttonClick()>Нажми</button> <input type=text id=e5input1 value=!!!> <input type=text id=e5input2 value=???> <script>function e5buttonClick(){input1=document.getElementById('e5input1'); input2=document.getElementById('e5input2'); input1Value=input1.value; input2Value=input2.value;input1.value=input2Value; input2.value=input1Value}</script>

Задача 6. По нажатию на кнопку меняется ее текст

Повторите поведение кнопки по нажатию на нее (поменяется ее текст):

Решение:

<input type=button onclick=e6buttonClick(this) value=Нажми><script>function e6buttonClick(elem){elem.value='Новый текст кнопки'}</script>

Задача 7. Работа с CSS

Повторите поведение кнопки по нажатию на нее (она меняет цвет текста в инпуте):

Решение:

<button onclick=e7buttonClick()>Нажми</button> <input type=text id=e7input value=текст><script>function e7buttonClick(){input=document.getElementById('e7input');input.style.color='red'}</script>

Можно не вводить промежуточную переменную input, а сразу поменять цвет:

<script>function e7buttonClick(){document.getElementById('e7input').style.color='red'}</script>

Задача 8. Блокирование полей ввода

Повторите поведение кнопок по нажатию на них (1 из них блокирует инпут с помощью атрибута disabled, а другая разблокирует):

Решение:

<button onclick=e8button1Click()>Заблокировать</button>

<button onclick=e8button2Click()>Отблокировать</button>

<input type=text id=e8input value=текст>

//Заблокирует элемент

function button1Click(){input=document.getElementById('e8input');input.disabled=true}

//Отблокирует элемент

function button2Click(){input=document.getElementById('e8input');input.disabled=false}

Задачи для решения

События через атрибуты

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Метод getElementById и работа с атрибутами

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Работа с this

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Работа с CSS

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Задачи

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Закрепление пройденного

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Отвечу на любые вопросы. С уважением, Дмитрий Владимирович: 8-965-148-98-02, diplom07@mail.ru.
Печатать страницу: Задачи на основы работы с DOM в JavaScript

Новое на сайте: О переделке сайта Консультации по сайту trim (функция обрезки пробелов в конце и начале переменной Передача переменных из JavaScript в PHP и наоборот Многоразмерные числа (BigInt) на JavaScript Генератор многоразрядных кодов Необходимость применения тяжелых CMS 16-ные числа Дробная часть числа и ее отделение Адрес страницы и условие для переменной Всплывающий текст с затемнением Использование памяти браузерами Расширения Chrome Короткие и ламповые цвета Всплывающее окно Рисунок, всплывающий по клику Принудительное открытие документа в новом окне

Сделать заказ сайта или продвижения сайта (Задачи на основы работы с DOM в JavaScript)
×

Ваше письмо