Событие в JavaScript
Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером.
Например:
События мыши:
- click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
- contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
- mouseover / mouseout – когда мышь наводится на / покидает элемент.
- mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
- mousemove – при движении мыши.
События на элементах управления:
- submit – пользователь отправил форму
- focus – пользователь фокусируется на элементе, например нажимает на <input type="text" />.
Подробнее... Добавить комментарий
JavaScript - основы (ES6)
ECMAScript 6 (или ES6) - это новая версия JavaScript 2015г, в которую добавлен новый функционал, которая на сегодня поддерживается всеми современными браузерами.
Переменные и комментарии
JavaScript - не строго типизированный язык. Переменные обозначаются так:
let name='Геннадий'//Строка console.log(name) //Геннадий - отображается в консоли var age=40 //Число(без кавычек) VAR (глобальная) - устарело, не использовать! console.log(age)//40 - отображается в консоли const prof="Программист"//Это константа console.log(prof)//Программист - отображается в консоли // - это однострочный комментарий /* тут многострочные комментарии */
Всплывающее модальное окно на jQuery
Необходимо создать три файла или скачть modal-window-js.rar архив примера.
И так создаем HTML-файл - index.html
Пишем слайдер на JavaScript
В этой статье мы напишим работающий слайдер на чистом JavaScript без использования библиотек, только JS, HTML и CSS -поехали!
Подготовьте подходящие картинки в папке img, под статьёй есть slider-na_js.rar архив примера, его можно скачать и использовать.
Изменение ширины блока по клику
Изменяем, увеличиваем ширину блока по клику на этот блок.
<!DOCTYPE HTML><html dir="ltr" lang="ru-ru"><head>
<meta charset="utf-8">
<title>Урок jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="/images/st2.css" type="text/css" />
<style>
.rombs div {border:1px solid #000; width:100px; height:50px; margin:6px; cursor:pointer;}
.rombs div:nth-child(1) {background:red;}
.rombs div:nth-child(2) {background:green;}
.rombs div:nth-child(3) {background:blue;}
</style>
<script>
function smena(event) {
//alert($(this).width());
//alert($(this).css("background-color"));
var wid=$(this).width(); // Получаем ширину
$(this).width(wid+100); // Изменяем ширину
}
$('document').ready(function(){
$('.rombs div').on('click', smena);
});
</script>
</head>
<body>
<div class="rombs">
<div></div>
<div></div>
<div></div>
</div>
</body></html>
jQuery: исчезновение и появление дочернего блока при клике
<!DOCTYPE HTML><html dir="ltr" lang="ru-ru">
<head>
<meta charset="utf-8">
<title>Урок cript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready( function(){
$(".da-ne").on("click", function() {
$(this).find('*').toggle('slow');
});
/*
$(".da-ne").on("click", function() {
$(this).children('*').toggle('slow');
});
//Показывать скрывать соседа
$('.div_1').click(function(){
$(this).parent().next('.div_2').animate({opacity: 'toggle', height: 'toggle'}, 500);
});
*/
});
</script>
</head>
<body>
<ul>
<li class="da-ne">Верхний уровень
<ul>
<li>Нижний уровень</li>
<li>Нижний уровень</li>
</ul>
</li>
<li class="da-ne">Верхний уровень
<ul>
<li>Нижний уровень</li>
<li>Нижний уровень</li>
</ul>
</li>
</ul>
</body></html>
Основы javaScript
javaScript - регистрзависимый язык, большие и маленькие буквы важны!
Создаем переменные с помощь команды var
<script>
var a, b=2, c;
a=3;
alert(a*b);
</script>
Вставляем код javaScript на HTML страницу
Существует 4 способа вставки javaScript кода в HTML страницу
- Вставка кода <script> /*код javaScript*/ </script> - чаще в <head>, но можно и в <body>
- Подключение внешнего js-файла <script src="/my.js"></script> - подключение внешнего файла
- Через события: onclick, onmouseover, onload и др.
- Через ссылку <a href="javaScript:alert('Я JavaScript-3');">
<!DOCTYPE HTML><html dir="ltr" lang="ru-ru">
<head>
<meta charset="utf-8">
<title>Уроки javaScript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/my.js"></script>
<script>
alert('Я javaScript-1');
</script>
</head>
<body>
<p onclick="alert('Я javaScript-2');">Уроки JavaScript</p>
<p><a href="javaScript:alert('Я javaScript-3');">Ссылка</a></p>
</body></html>
