СВОЙСТВА и МЕТОДЫ Length свойство, устанавливает или возвращает количество элементов в массиве Нестандартное свойство innerText. Всеми браузерами, кроме Firefox 44- (согласно CanIUse.Com), поддерживается нестандартное свойство innerText. У него, в некотором роде, преимущество перед textContent в том, что оно по названию напоминает innerHTML, его проще запомнить. Однако, свойство innerText не следует использовать, так как оно не… Читать далее »
AJAX выполняет обновление части веб-страницы, без перезагрузки всей страницы. AJAX — метод для создания быстрых и динамических веб-страниц. AJAX позволяет создание веб-страниц, которые будут обновляться асинхронно путем обмена небольшими объемами данных с сервером за кулисами. Это означает, что можно обновлять части веб-страницы, без перезагрузки всей страницы. Классические веб-страниц, (которые не используют AJAX), перезагружают всю страницу, если содержание должно… Читать далее »
АЛГОРИТМ — клеточки змейки помечаются классом «s» а еда классом «f», по наличию этих классов и определяется коллизия со змеей или с едой — каждая новая клетка змеи помечается атрибутом «data-n» который равен number++ (постоянно увеличивается) — ищем div’ы с классом «s» (клетки змеи) и находим клетку с минимальным значением data-n и делаем ее обычной… Читать далее »
Светофор МЕТОДЫ, АТРИБУТЫ и СОБЫТИЯ preventDefault() метод, отменяет это событие, если оно отменяемое, а это означает, что действие по умолчанию, которое принадлежит к событию, не произойдет. Например, это может быть полезно, когда: При нажатии на кнопку «Отправить», не допустить его отправки формы При нажатии на ссылку, предотвратить ссылку от следования URL dataTransfer.setData () Метод, задает… Читать далее »
Пример №1 Скрипт меняющий строчные буквы на заглавные СОБЫТИЯ и МЕТОДЫ OnKeyUp Событие, происходит, когда пользователь отпускает клавишу (на клавиатуре). toUpperCase () Метод, преобразует строку заглавными буквами. КОД <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> </head> <body> <p>Функция запускается, когда пользователь отпускает клавишу в поле ввода, меняет буквы срочные на заглавные </p> Введите текст: <input type=»text»… Читать далее »
Задание Создать раскрывающееся меню при клике Сделайте так, чтобы при прокрутке ниже элемента #avatar (картинка с Винни-Пухом) – он продолжал показываться в левом-верхнем углу. При прокрутке вверх – должен возвращаться на обычное место. Решение 1. <!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <style> .menu ul { margin: 0; list-style: none; padding-left: 20px; display: none; } .menu .title… Читать далее »
Лампочка СОБЫТИЯ OnClick событие, выполнение JavaScript при щелчке по кнопке КОД <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> </head> <body> <h1>ЛАМПОЧКА</h1> <button onclick=»document.getElementById(‘myImage’).src=’pic_bulbon.gif'»>включить</button> <img id=»myImage» src=»pic_bulboff.gif» style=»width:100px»> <button onclick=»document.getElementById(‘myImage’).src=’pic_bulboff.gif'»>выключить</button> </body> </html> КАРТИНКИ ДЛЯ ПРОГРАММЫ Кнопка вверх для сайта Можно сделать плавающую кнопку «наверх» на чистом javascript без использования сторонних библиотек. Отличие в том, что… Читать далее »
<head> <meta charset=’utf-8′> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js»></script> <style> .red{ background:red; } .green{ background:green; } *{border:1px solid black;} .blue{ background:blue; } .main { color:white; float:left; padding:20px; } </style> </head> <body> <div class=’red main’>div Red</div> <div class=’green main’>div Green</div> <div class=’blue main’>div Blue</div> <p class=’red main’>pRed</p> <p class=’green main’>pGreen</p> <p class=’blue main’>pBlue</p> <!— $(«*») — Выбрать все элементы —>… Читать далее »
Подключаем библиотеку Jquery <head> <meta charset=’utf-8′> <script src= «https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js» ></script> </head> <body> <div id=’d1′> <div id=’mydiv’ style=’height:200px;border:1px solid black;’>Привет мир</div> <button id=’b1′>Спрятать надпись «Привет мир»</button> <button id=’b2′>Показать надпись «Привет мир»</button> <button id=’b3′>Переключить «Привет мир»</button> </div> <div id=’d2′ style=’width:100px;height:100px;background:red;’> </div> <script> //$(«.myclass»); //$(«div»); $(document).ready(function(){ $(«#d2»).hide(); $(«#b1»).click(function(){ $(«#mydiv»).slideUp(1000); }); $(«#b2»).click(function(){ $(«#mydiv»).slideDown(1000); }); $(«#b3»).click(function(){ $(«#d1»).toggle(1000); $(«#d2»).toggle(1000); }); $(«#d2»).click(function(){… Читать далее »
<script> function myFunction(id) { dd=document.getElementById(id); dd.style.border=»1px solid green»; } function blurFunction(id) { dd=document.getElementById(id); dd.style.border=»1px solid red»; } function mykeyup() { inp3=document.getElementById(‘test2’); dd=document.getElementById(‘dd’); len=20-inp3.value.length; dd.innerHTML=»Осталось ввести «+len+» символов»; } </script> <input onfocus=»myFunction(‘test’)» onblur=»blurFunction(‘test’)» id=’test’> <input onfocus=»myFunction(‘test1’)» onblur=»blurFunction(‘test1′)» id=’test1′> <input id=’test2′ onkeyup=’mykeyup()’> <div id=’dd’>Вам нужно ввести 20 символов.</div> Урок-4. Шаблон для подсказок