Наверное каждый из нас когда-нибудь сталкивался с вопросом - как скачать фото формата WEBP из Гугл+.
Бывает, что выложил свои фото в соц.сети, и удалил с компа безвозвратно, а обратно скачать - никак. Много таких вопросов приходит и от блогеров, которые используют изображения из этой соц.сети у себя в блогах.
Поиск в гугле, нужных результатов не дал. На первых позициях онлайн конвертеры и программы для конвертации webp в jpg файлы.
Пожалуй, что это удобно, если этим пользоваться не часто, но я решил пойти другим путем и расскажу вам о самом простом способе скачать WEBP фото в jpg формате сразу на свой компьютер.
Для справки. Вот что нам говорит Википедия о данном WEBP формате.
WebP (произносится как англ. weppy[4]) — формат сжатия изображений с потерями и без потерь качества, предложенный компанией Google Inc. в 2010 году. Основан на алгоритме сжатия неподвижных изображений (ключевых кадров) из видеокодека VP8. Использует контейнер RIFF.
Для работы с данным форматом существуют открытые библиотека (libvpx) и конвертер (webpconv).
В общем - спасибо Гугл, ты, как всегда, меня порадовал своими обновлениями и улучшениями. :-)
На первых позициях поиска - онлайн конвертеры и программы для конвертацииwebp в jpg файлы.
Пожалуй, что это удобно, если этим пользоваться не часто, но я решил пойти другим путем и расскажу вам о самом простом способе скачать WEBP фото в jpg формате сразу на свой компьютер.
Не могу сейчас сказать точно, но на Mozila Firefox достаточно просто правой кнопкой мыши нажать на изображение и выбрать в меню пункт "Открыть изображение". После этого его можно скачать в приемлемом формате.
Самый простой способ
Для Google Chrome
Выбираем в ленте нужное фото, нажимаем на него правой кнопкой мыши и выбираем в выпадающем меню -"Открыть изображение в новой вкладке".
На фото ниже я это сделал и попробовал сохранить изображение. Не смотря на то, что в адресной строке браузера был указан путь к изображению и даже стояло расширение .jpg в конце строки, скачать его в формате jpg не удалось.
См фото ниже.
Нажимаем кнопку F12 (или открываем панель разработчика ->"Исследовать элемент" правой кнопкой мыши.
В открывшейся панели выбираем "Консоль" и вставляем в нее вот этот код:
function googlePlus(){
var url = document.querySelector('img').src;
var fL = url.indexOf("\/w");
var lL = url.indexOf("w\/");
var c = url.substring(lL+1);
var a = url.substring(0,fL);
location.href = a + c;
}
googlePlus();
Важно!!!
Если вы видите, что фото пытается сохраниться только как html страница ( расширение .html ), то код вот такой:
function googlePlus(){
var src = document.querySelector('img').src;
var firstLetter = src.indexOf("=");
var a = src.substring(0,firstLetter);
location.href = a;
}
googlePlus();;
Даже если вы попробуете первый вариант и ничего не получилось, то можете просто обновить страницу и смело запустить второй вариант кода. Код сохраняется только в открытой вкладке вашего браузера до обновления страницы.
Нажимаем Enter
Код в консоле может исчезнуть введенный вами код или там может появиться предупреждение( например такое - Resource interpreted as Document but transferred with MIME type image/jpeg ), в этом нет ничего страшного, просто это потому, что в этом окне загрузится выбранное вами изображение, но уже не в WEBP, а в jpg формате
Теперь просто кликаем по картинке правой кнопкой мышки и скачиваем ее в формате jpg
Если не получилось ни в одном из вариантов. то посмотрите внизу поста, под заголовком UPDATE.↓
Второй способ
Я не буду подробно на нем останавливаться. потому что вы и без меня его наверняка знаете.
Выбираем изображение и правым кликом в выпадающем меню, выбираем "Копировать картинку"
Открываем на компьютере любой удобный редактор изображений, мне для таких целей хватает и PowerPoint, можно GIMP или Photoshop
Сочетанием клавиш Ctrl + V вставляем изображение из браузера в пустой документ.
Обрезаем по формату и сохраняем, как обычное изображение, уже в любом доступном формате
Для ленивых!
Открываете фото в новой вкладке -> "Правая кнопка мыши" -> "Открыть фото в новой вкладке"
Вставить код и нажать Enter
function googlePlus(){
var src = document.querySelector('img').src;
var firstLetter = src.indexOf("/w530-");
var a = src.substring(0,firstLetter);
var b = src.substring(firstLetter + 15 );
var url = a + b;
var link = document.createElement( 'a');
link.target = "_blank";
link.download = "img.jpg";
link.href = url;
link.click ();
}
googlePlus();
Появится всплывающее окно загрузки, где вам предложат выбрать место сохранения и имя файла.
Если вы не знаете, как просто и легко скачать без дополнительных программ и расширений фото и видео из других сетей, то вы можете посмотреть их в моем блоге по этим ссылкам:
Как скачать видео с сайта Твиттер вы можете посмотреть в моем посте про blod-видео
UPDATE
В последнее время Google часто меняет свои алгоритмы и если не получилось скачать фото предложенным способом, то можно попробовать ввести в консоль вот такой код:
function googlePlusOdd(){
var src=document.querySelector('content .ZRciZe img').src;
var lastL = src.length - 13;
var a = src.substring(0, lastL );
location.href = a;
};
googlePlusOdd();
По нечетным дням он срабатывает :-)
Друзья, мне очень важно знать, получается ли у вас все так как у меня и есть ли какие-либо предложения, замечания, пожелания? Есть ли потребность в написании расширения для браузера? Загрузчики фото или видео и для каких сетей вы бы хотели иметь?
Чтобы позволить пользователю менять размер шрифта на вашем сайте или в блоге, можно воспользоваться вот таким простым,учебным кодом.
Главное, что стоит учесть это то, что размеры шрифта на вашем сайте должны быть заданы в относительных величинах (em, % ).
Здесь все очень просто. Код понятен, но постараюсь дать комментарии в тексте.
Каждая ссылка нашего блока имеет уникальный id, например - id="size-12". При клике на нее возниакет событие onclick, которое мы отслеживаем - document.getElementById('size-12').onclick = size12;
И так как функция присвоена переменной var size12 = makeSizer(12);, то мы запускаем функцию, передавая в нее уникальную переменную. В данном случае - 12.
Сама функция makeSizer(size) очень проста. Она возвратит document.body.style.fontSize = size + 'px';, в нашем случае - document.body.style.fontSize = '12px';, тем самым изменив размер шрифта всего документа. И коль скоро, у нас размеры заданы в относительных величинах, то пропорционально изменятся и заголовки документа.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
<a href="#" id="size-18">18</a>
<a href="#" id="size-20">20</a>
<a href="#" id="size-22">22</a>
<a href="#" id="size-24">24</a>
<a href="#" id="size-26">26</a>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iure aliquid perferendis assumenda necessitatibus dolorem aperiam inventore, est, consectetur ex? Quia, omnis illo dignissimos quas iusto cumque, culpa laboriosam laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio maxime consequatur necessitatibus, impedit sint repellendus esse? Architecto facere quibusdam nobis repellendus est a corrupti explicabo nemo. Nostrum architecto ullam maxime.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus velit eligendi quisquam harum ut perspiciatis illum quae vero, modi magni esse non vitae, quibusdam laudantium, a repellat adipisci sed </p>
</div>
<script>
window.onload=function (){
(function (){
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
};
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
var size18 = makeSizer(18);
var size20 = makeSizer(20);
var size22 = makeSizer(22);
var size24 = makeSizer(24);
var size26 = makeSizer(26);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
document.getElementById('size-18').onclick = size18;
document.getElementById('size-20').onclick = size20;
document.getElementById('size-22').onclick = size22;
document.getElementById('size-24').onclick = size24;
document.getElementById('size-26').onclick = size26;
})();
};
</script>
</body>
</html>
Давно собирался написать простой код для изменения цвета текста и фона страницы по желанию пользователя.
Несмотря на то, что в инете есть масса плагинов, расширений для браузеров, но не все пользователи готовы нагружать свои устройства, а у меня есть очень много знакомых, которые воспринимают текст только полностью инвертированный ( черный фон - светлый текст)
Когда-то давно мне попадался такой плагин, который позволял изменить цвет фона и текста на сайте. Для этого посетитель нажимал на соответствующую кнопку и в сплывающем окне выбирал понравившийся цвет из палитры.
Таким образом можно было выбрать цвет фона страницы и цвет текста.
В настоящее время, прогуглив достаточно много времени я его не нашел, а учитывая то, что эту задачу так или иначе приходится решать, то решил быстро написать что-то сам.
То что у меня получилось, вы можете посмотреть на сайте Codepen.
Если коротко, то у нас есть какой то текст на странице, размещенный в параграфах <p>.
Мы создали два блока с радио-кнопками, которые будут менять цвет фона ( группа кнопок с id = "bgColor") и группа меняющая цвет текста (id="textColor"). Для того, чтобы получить значение value выбранного элемента я использовал jQuery.
В коде подключение jQuery выше скрипта, который в самом низу страницы.
Вы можете сами добавить абсолютно любое количество кнопок, главное прописать значение цвета в их значение value.
Функция запускается при нажатии на кнопку и позволяет создавать самые разные комбинации цвета.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>Change Back Ground Color</h2>
<div id="bgColor">
<label><input type="radio" name="radio" value="white">White</label>
<label><input type="radio" name="radio" value="yellow">Yellow</label>
<label><input type="radio" name="radio" value="red">Red</label>
<label><input type="radio" name="radio" value="green">Green</label>
<label><input type="radio" name="radio" value="lightgreen">Light Green</label>
<label><input type="radio" name="radio" value="blue">Blue</label>
<label><input type="radio" name="radio" value="gray">Gray</label>
<label><input type="radio" name="radio" value="black">Black</label>
</div>
<hr>
<h2>Change Text Color</h2>
<div id="textColor">
<label><input type="radio" name="txc" value="white">White</label>
<label><input type="radio" name="txc" value="yellow">Yellow</label>
<label><input type="radio" name="txc" value="red">Red</label>
<label><input type="radio" name="txc" value="green">Green</label>
<label><input type="radio" name="txc" value="lightgreen">Light Green</label>
<label><input type="radio" name="txc" value="blue">Blue</label>
<label><input type="radio" name="txc" value="gray">Gray</label>
<label><input type="radio" name="txc" value="black">Black</label>
<br />
<button type="button" onclick="changeColor()">Change Color </button>
<h1>Header h1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia minima illum quam eveniet facilis ab aliquam. At enim sint, a nihil quidem sunt, atque, nesciunt voluptatibus laborum ipsum neque natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eveniet voluptas, dignissimos alias deserunt et assumenda aliquam quod fugit soluta facere consequuntur velit eligendi quis dolor dolore. Ipsum, iusto aspernatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore rem commodi, eaque adipisci voluptatum nemo totam architecto! Maxime error dolore repudiandae optio in reiciendis, pariatur sapiente, amet. Sint, sit.</p>
<h2>Header2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia minima illum quam eveniet facilis ab aliquam. At enim sint, a nihil quidem sunt, atque, nesciunt voluptatibus laborum ipsum neque natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eveniet voluptas, dignissimos alias deserunt et assumenda aliquam quod fugit soluta facere consequuntur velit eligendi quis dolor dolore. Ipsum, iusto aspernatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore rem commodi, eaque adipisci voluptatum nemo totam architecto! Maxime error dolore repudiandae optio in reiciendis, pariatur sapiente, amet. Sint, sit.</p>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script>
function changeColor(){
var bgColor = document.getElementsByName('radio');
var txColor = document.getElementsByName('txc');
for(var i = 0; i < bgColor.length; i++){
if(bgColor[i].checked){
var bgcolor = $('input[name=radio]:checked').val();
}
}
for(var j = 0; j < txColor.length; j++){
if(txColor[j].checked){
var txcolor = $('input[name=txc]:checked').val();
}
}
document.querySelector('body').style.backgroundColor = bgcolor;
document.querySelector('body').style.color = txcolor;
};
</script>
</body>
</html>
Если вы знаете верстку и умеете пользоваться инструментами разработчика, то вам не составит труда найти те элементы, у которых вы хотите изменить свойства и подставить их в две последние строчки кода:
document.querySelector('Класс или имя селектора ФОН').style.backgroundColor = bgcolor;
document.querySelector('Класс или имя селектора ТЕКСТ').style.color = txcolor;
Так вы сможете позволить пользователю изменять цвет текста и фона даже в своем блоге.
Маленькие хитрости.
Такое изменение цвета фона и текста будет действовать (сохраняться) до перезагрузки браузером страницы, или пока пользователь не закроет вкладку. При повторном открытии вашего сайта, ему придется все действия по индивидуальной настройке выполнить снова.
Мы можем решить эту проблему с помощью localStorage. Мы сможем позволить браузеру пользователя сохранить выбранные настройки для нашего сайта и применить их сразу же, как только пользователь вновь вернется на наш сайт.
Для этого в приведенный выше код, я добавил несколько строк для сохранения данных и проверки их при повторном посещении сайта.
Я выделили их в коде, просто для наглядности.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>Change Back Ground Color</h2>
<div id="bgColor">
<label><input type="radio" name="radio" value="white">White</label>
<label><input type="radio" name="radio" value="yellow">Yellow</label>
<label><input type="radio" name="radio" value="red">Red</label>
<label><input type="radio" name="radio" value="green">Green</label>
<label><input type="radio" name="radio" value="lightgreen">Light Green</label>
<label><input type="radio" name="radio" value="blue">Blue</label>
<label><input type="radio" name="radio" value="gray">Gray</label>
<label><input type="radio" name="radio" value="black">Black</label>
</div>
<hr>
<h2>Change Text Color</h2>
<div id="textColor">
<label><input type="radio" name="txc" value="white">White</label>
<label><input type="radio" name="txc" value="yellow">Yellow</label>
<label><input type="radio" name="txc" value="red">Red</label>
<label><input type="radio" name="txc" value="green">Green</label>
<label><input type="radio" name="txc" value="lightgreen">Light Green</label>
<label><input type="radio" name="txc" value="blue">Blue</label>
<label><input type="radio" name="txc" value="gray">Gray</label>
<label><input type="radio" name="txc" value="black">Black</label>
<br />
<button type="button" onclick="changeColor()">Change Color </button>
<h1>Header h1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia minima illum quam eveniet facilis ab aliquam. At enim sint, a nihil quidem sunt, atque, nesciunt voluptatibus laborum ipsum neque natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eveniet voluptas, dignissimos alias deserunt et assumenda aliquam quod fugit soluta facere consequuntur velit eligendi quis dolor dolore. Ipsum, iusto aspernatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore rem commodi, eaque adipisci voluptatum nemo totam architecto! Maxime error dolore repudiandae optio in reiciendis, pariatur sapiente, amet. Sint, sit.</p>
<h2>Header2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia minima illum quam eveniet facilis ab aliquam. At enim sint, a nihil quidem sunt, atque, nesciunt voluptatibus laborum ipsum neque natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eveniet voluptas, dignissimos alias deserunt et assumenda aliquam quod fugit soluta facere consequuntur velit eligendi quis dolor dolore. Ipsum, iusto aspernatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore rem commodi, eaque adipisci voluptatum nemo totam architecto! Maxime error dolore repudiandae optio in reiciendis, pariatur sapiente, amet. Sint, sit.</p>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script>
if(localStorage.getItem('bgcolor') != null){
var fon = localStorage.getItem('bgcolor');
document.querySelector('body').style.backgroundColor = fon;
}
if(localStorage.getItem('txcolor') != null){
var txt = localStorage.getItem('txcolor');
document.querySelector('body').style.color = txt;
}
function changeColor(){
var bgColor = document.getElementsByName('radio');
var txColor = document.getElementsByName('txc');
for(var i = 0; i < bgColor.length; i++){
if(bgColor[i].checked){
var bgcolor = $('input[name=radio]:checked').val();
}
}
for(var j = 0; j < txColor.length; j++){
if(txColor[j].checked){
var txcolor = $('input[name=txc]:checked').val();
}
}
document.querySelector('body').style.backgroundColor = bgcolor;
localStorage.setItem('bgcolor',bgcolor);
document.querySelector('body').style.color = txcolor;
localStorage.setItem('txcolor',txcolor);
};
</script>
</body>
</html>
Я, ради эксперимента, поставил на пробном сайте - traningforblog.blogspot.com. Здесь вы можете посмотреть пройдя по ссылке. Вы можете изменить цвет любых элементов, причем в любом количестве, если выберете их и добавите в код (как последние две строчки - примере). А чтобы добавить в блог в виде гаджета, то здесь все просто.
Для этого вам просто нужно перейти во вкладку - "Шаблоны" -> "Добавить гаджет" -> "Добавить HTML&JavaScript"
Наиболее частый вопрос с которым сталкиваются начинающие программисты, студенты и просто блогеры - как сделать заглавной первую букву в каждом слове текста с помощью java script.
Вопрос простой, но часто вызывает затруднения. В интернете много ответов - как сделать заглавной первую букву в слове, но не каждую первую в предложении. Поэтому я решил специально написать один пост, для того, чтобы раз и навсегда решить этот вопрос.
Пишу два метода. Первый - чистый JavaScript (без jQuery) и второй метод с jQuery.
Очень часто бывают такие вопросы от блогеров, на собеседованиях и вообще, знать это полезно.
Без долгих вступлений.
Вариант 1 - на чистом JavaScript
<body>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iure aliquid perferendis assumenda necessitatibus dolorem aperiam inventore, est, consectetur ex? Quia, omnis illo dignissimos quas iusto cumque, culpa laboriosam laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio maxime consequatur necessitatibus, impedit sint repellendus esse? Architecto facere quibusdam nobis repellendus est a corrupti explicabo nemo. Nostrum architecto ullam maxime.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus velit eligendi quisquam harum ut perspiciatis illum quae vero, modi magni esse non vitae, quibusdam laudantium, a repellat adipisci sed dicta.</p>
<button type="button" onclick=" UpperFirstLetter()">Click Me</button>
</div>
<script>
function UpperFirstLetter(){
var textArray = (document.getElementById('text').innerHTML).split(' ');
var UpperText = [];
for(var i = 0; i < textArray.length; i++){
var word = textArray[i][0].toUpperCase() + textArray[i].slice(1);
UpperText.push(word);
}
document.getElementById('text').innerHTML = UpperText.join(" ");
}
// UpperFirstLetter();
</script>
</body>
В этом примере мы обращаемся к части текста, которая заключена в блок сid = "text". Вы можете изменить это по собственному усмотрению, изменив первую строку скрипта var textArray = (document.getElementById('text').innerHTML).split(' ');
на другой "выборщик" - например на querySelector('здесь ваш класс или тэг').
Можете убрать кнопку. Сделать так, что функция будет запускаться сразу после загрузки документа и менять буквы.
Для этого вам стоит только добавитьUpperFirstLetter(); перед закрывающим тегом </script>(в коде выше - закомментировано // UpperFirstLetter();) и конечно же удалить кнопку button из html кода.
Без jQuery
Здесь код функции
window.onload = function () {
Здесь "запуск"
Например UpperFirstLetter();
};
Или так:
window.onload=function (){
(function (){
Здесь "Весь ваш код"
})();
};
Второй случай предпочтительнее, потому что полностью изолирует ваш код от исходного кода страницы. Не будет путаницы с именами переменных и функций.
В случае с jQuery код нужно поместить внутрь функции:
$(document).ready(function() {
Здесь ваш код с "запуском"
});
В этом примере первая функция будет делать заглавной только первую букву, а вторая, первую букву в каждом слове
<body>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. odio maxime consequatur necessitatibus, impedit sint repellendus esse? architecto facere quibusdam nobis repellendus est a corrupti explicabo nemo. nostrum architecto ullam maxime.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus velit eligendi quisquam harum ut perspiciatis illum quae vero, modi magni esse non vitae, quibusdam laudantium, a repellat adipisci sed dicta.</p>
<button type="button" class="first">First Word Upper</button>
<button type="button" class="second">Each Word Upper</button>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// Выводит первую заглавную букву
$("button.first").on("click", function(){
var firstLetter = $("p").text()[0].toUpperCase();
$("p").html(firstLetter + $("p").text().slice(1));
});
// Выводит заглавную букву у каждого слова
$("button.second").on("click", function(){
var names = $("p").text();
var arr = names.split(' '); //получаем массив из строки.
var result = []; // +
$.each(arr, function(i){
// добавляем заглавную букву каждому слову в массиве
var text = arr[i][0].toUpperCase()+arr[i].slice(1);
result.push(text); // +
});
$("p").html(result.join(" ")); // +
});
</script>
</body>
Внутри кода даны исчерпывающие комментарии. Вы так же можете изменить и этот вариант кода, как и первый, только не забывайте о том, что теперь вы можете сделать выборку с помощью jQuery. Например - $("button.second") - обращение к кнопке button с классом - second.
Скрипт можно разместить в отдельном файле, но подключить его в документе нужно ниже подключения jQuery.
Иногда владельцы блогов хотят добавить некоторую интерактивность своим сайтам и сделать появляющиеся картинки, когда посетитель покидает сайт.
В некоторых случаях это бывает полезно, чтобы обратить внимание на какой-то раздел сайта, или даже напомнить ему о возможности подписаться в соц.сети, или на обновления сайта.
Я взял простой пример, с всплывающей картинкой, которая будет показываться только тогда, когда курсор пользователя будет покидать окно страницы.
Код очень простой и работает в chrome, firefox, opera.
Вам только остается загрузить свою картинку в ваш блог, получить её адрес и поменять его вот в этой строке:
То, что внутри одинарных кавычек - там должен быть url вашей картинки.
Теперь, идем в Шаблоны ->Добавить гаджет -> HTML & JavaScript
Смотрите на картинке:
Не забудьте поместить скопированный код внутрь тегов <script></script> !!!
Это важно!!!
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window,"load",function(e) {
addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
var block=document.createElement('div');
block.id='popup';
var image=document.createElement('img');
image.src='http://www.beautifulady.it/wp-content/uploads/2017/10/2bl.jpg';
block.appendChild(image);
var obj=document.querySelector('body');
obj.appendChild(block);
document.getElementById('popup').style.display="block";
setTimeout(function() {
document.getElementById('popup').style.display="none";
}, 2000);
}
});
});
Я сделал так, чтобы картинка показывалась только на короткое время - 2 сек. Вы можете изменить это по своему желанию, или отменить совсем. Для этого вам нужно изменить вот этот участок кода:
Можно, или убрать функцию setTimeout совсем (оставив только среднюю строку), или изменив время (2000 миллисекунд = 2 сек), на более подходящее.
Теперь, осталось только добавить код CSS в ваш шаблон. Его вы можете изменить по собственному желанию таким образом, чтобы ваша картинка была оформлена соответствующим образом.
Для того, чтобы представлять, как и что вам оформлять, вам стоит понимать, что JS-кодом выше, мы создаем внутри документа новый div с id="popup" и внутри него тег img c url вашей картинки.
Все!
Таким образом вы получите всплывающую картинку перед уходом пользователя с сайта.
Работающий пример можно посмотреть здесь:
для блога Тренировка
Иногда бывает нужно остановить исчезновение картинки по клику.
Код ниже остановит исчезновение картинки, ровно до того момента пока курсор не покинет вновь поле документа.
Красным отметил изменения от вышеприведенного кода.
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window,"load",function(e) {
addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if ( !from || from.nodeName == "HTML" ) {
var block=document.createElement('div');
block.id='popup';
var image=document.createElement('img');
image.src='http://www.beautifulady.it/wp-content/uploads/2017/10/2bl.jpg';
block.appendChild(image);
// var obj=document.getElementById('img_container');
var obj=document.querySelector('body');
obj.appendChild(block);
document.getElementById('popup').style.display="block";
Предупреждение перед выходом веб-страницы с помощью JavaScript - jQuery
Во-первых, я хотел бы сказать, что во многих случаях выясняется, что пользователи по ошибке нажимают ссылку на веб-страницу или закрывают текущую вкладку по ошибке. Здесь я покажу вам, как предотвратить эту ошибку, добавив предупреждающее сообщение или предупреждающее сообщение с использованием JavaScript или jQuery.
Предупреждение перед выходом страницы в JavaScript - jQuery
Более ранние версии браузеров позволяли вам установить настраиваемые сообщения в диалоговом окне оповещения, но теперь это невозможно.
Для того, чтобы их установить нам требуется подключить библиотеку jQuery
По CDN -
Крауд-ссылки - виды, способы размещения Обучающий курс для начинающих сотрудников компании Link-Stream
Виды ссылок активная анкорная неактивная безанкорная ссылка, при нажатии на которую вы переходите на другой сайт ссылка, при нажатии на которую вы не переходите на другой сайт; ссылку нужно скопировать в строку браузера и только тогда вы попадаете на сайт ссылка, закрытая другой ссылкой или словом ссылка ничем не закрыта сверху посетите сайт https://links-stream.ru/ посетите сайт https://links-stream.ru/ посетите сайт Линк-Стрим посетите сайт https://links-stream.ru/
Параметры ссылок nofollow dofollow noindex редирект передают «вес» от форума сайту нашего клиента не передают «вес» от форума сайту нашего клиента не попадают в индекс поисковых систем промежуточная страница, которая забирает «вес» себе span
Что такое редирект и как его определить? пост со ссылкой на форуме промежуточная страница (редирект) сайт клиента Виды редиректа скрытый простой двойной тройной зашифрованный реферральный redirect redir go to forum/sitesite/forum
Как разместить ссылку ссылка-картинка безанкорная ссылка через ahref безанкорная ссылка через url анкорная ссылка через url анкорная ссылка через ahref [url=https://odmdetka.ru/]детские товары[/url] <a href=«https://odmdetka.ru/»>детские товары</a> [url=https://odmdetka.ru/][/url] <a href=«https://odmdetka.ru/»></a> [url=URL СТРАНИЦЫ][img]URL КАРТИНКИ[/img][/url] <a href=«URL СТРАНИЦЫ» ><img src=«URL картинки» ></a>
Как поставить ссылку через код сайта?
• находим любой пост любого пользователя с активной ссылкой на сайт
• наводим курсор на ссылку и нажимаем правой кнопкой, выбираем Посмотреть код
• копируем код ссылки, заменяем на свою ссылку и вставляем в свой комментарий
Как поставить ссылку на форуме, в котором отключены ВВ-коды?
• пробуем прокачать аккаунт
• отправляем сначала без ссылки, затем редактируем
• отправляем ссылку в подпись аккаунта
Модерация vs бан есть надежда нет надежды аккаунт сохраняется аккаунт блокируется сообщение может быть опубликовано сообщение может быть опубликовано ссылка может быть удалена ссылка чаще всего удаляется
Словарь терминов
• Ссылка -
1) так мы называем комментарий с активной ссылкой на сайт клиента;
2) уникальный адрес страницы сайта, при нажатии на который происходит переход на эту страницу
• Активная ссылка - ссылка, при нажатии на которую происходит переход на сайт
• Неактивная ссылка - ссылка, при нажатии на которую переход на сайт не произойдет (необходимо сначала скопировать ссылку в адресную строку браузера)
• Анкорная ссылка - ссылка, адрес которой закрывает другое слово
• Безанкорная ссылка - ссылка, адрес которой сверху ничего не перекрывает
• Атрибут ссылки - это ее параметры для поисковых систем
• Сайт-донор - сайт, на котором вы ставите ссылку (форум, блог и т.д), который передает вес другим сайтам
• Сайт-акцептор - сайт вашего заказчика, который получает «вес» донора
Словарь терминов
• Внешние (исходящие) ссылки - ссылки на форумах, которые ведут на сайт нашего клиента
• Внутренние (входящие) ссылки - ссылки на сайте нашего клиента, которые ведут на любые другие сайты (или на другие страницы)
• Редирект - промежуточная страница между форумом и сайтом клиента
• ВВ-коды - коды, которые используются а форуме для установления правил разметки, включения ссылок, добавления картинок/аудио/видео и т.п.
• Ссылка-картинка - картинка, при нажатии на которую вы попадете на сайт клиента
• Модерация - рассмотрение администрацией сайта вашего сообщения и принятие решения, размещать его на форуме или нет
• Бан - блокирование доступа аккаунта к форуму по причине нарушения его правил (например, размещение рекламных комментариев)
Допустим, что у нас есть папка проекта на нашем компьютере, в которой находятся файлы html, css, js и прочие. наша задача сделать некоторые изменения в наших файлах, сохранит их и разместить наш проект на GitHub
Переходим к папке проекта и нажимаем на нее правой кнопкой мыши. Вызываем Git Bash
В нем делаем инициализацию репозитория - git init
Добавляем наш проект в этот репозиторий (пока что все в Git)git add .
Делаем первый коммит git commit -m"Первый коммит"
Смотрим статус нашего проектаgit status
Все изменения на панели - здесь :
Теперь делаем изменения в нашем проекте. Например, мы добавим что-то в файл index.html
Проверяем статус нашего проекта git status Видим, что изменения есть в файле index.html (отмечены красным).
Делаем добавление наших файлов git add .
Делаем второй коммит git commit -m"Второй коммит"
Проверяем статус проекта git status - показывает что все чисто - см фото ниже :
Теперь что -то удалим из файла и что-то добавим. Это важно сделать, для того, чтобы потом можно было увидеть разницу в изменениях (удаление, добавление), когда мы выложим проект на GitHub
.
Повторяем все снова -пункты 7, 8, 9.
Теперь создаем пустой репозиторий на GitHub. Называем его - все равно как. Нас интересуют только две ссылки На фото ниже они отмечены красными стрелками. Они для каждого проекта свои и их нужно взять при создании репозитория.
Добавляем их по очереди нажимая клавишу Enter
Пришло время перейти в репозиторий и убедиться что все файлы добавлены. Там же мы можем увидеть и наши коммиты. Нажав на них мы сможем посмотреть, как изменялись наши файлы. Добавления - (+)выделены зеленым, а удаления красным (-)
Материалы по Git, которые могут быть вам интересны:
Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.Пишите мне - kolesnikovy70 почта gmail.com
Удачного кодирования!
Телеграм канал - Full Stack JavaScript Developer
Помочь проекту (любая валюта).
DONATE
Работать с MySQL можно тремя основными способами: используя командную строку, применяя веб-интерфейс наподобие phpMyAdmin и задействуя такой язык программирования, как PHP.
Для быстрой навигации по этому посту, воспользуйтесь кнопкой MENU слева
Чтобы войти в интерфейс командной строки MySQL, следует выбрать команду Пуск-> Выполнить и в окне запуска ввести команду CMD, после чего нажать клавишу Enter. В результате будет вызвано командное окно Windows. Находясь
в этом окне, нужно ввести следующую команду (внося в нее соответствующие
коррективы):
У меня для доступа к DB OpenServer было, например так:
Эта команда предписывает MySQL зарегистрировать вас как пользователя root
без пароля. Теперь вы должны оказаться в среде MySQL и сможете приступить
к вводу команд. Чтобы убедиться в том, что все работает должным образом, введи-
те следующую команду, результат выполнения которой должен быть похож на
показанный на картинку выше: SHOW databases;
Я подключался к уже существующей базе, но у вас не должно быть трудностей, если вы пользуетесь OpenServer или Zend Server Free Edition WAMP
Отмена команды
Если, набрав часть команды, вы решили, что ее вообще не следует выполнять, то
ни в коем случае не пользуйтесь сочетанием Ctr+C ! Оно закроет программу. Вместо
нее можно ввести символы \c и нажать клавишу Enter. Порядок использования этой
пары символов показан в примере
Отмена ввода строки
бессмысленная для mysql строка \c
Ниже привел неполный список часто встречающихся команд:
Команды MySQL
Команды и ключевые слова SQL нечувствительны к регистру. Все три коман
ды — CREATE, create и CrEaTe — абсолютно идентичны по смыслу. Но чтобы
было понятнее, для команд рекомендуется использовать буквы верхнего ре-
гистра.
Имена таблиц нечувствительны к регистру в Windows, но чувствительны к ре
гистру в Linux и Mac OS X. Поэтому из соображений переносимости нужно
всегда выбирать буквы одного из регистров и пользоваться только ими. Для имен
таблиц рекомендуется использовать буквы нижнего регистра или комбинацию
из букв верхнего и нижнего регистра
Создание базы данных
Для создания новой базы данных по имени
publications:
CREATE DATABASE publications;
При успешном выполнении команды будет выведено сообщение, пока не
имеющее для нас особого смысла, — Query OK, 1 row affected (0.38 sec) (Запрос
выполнен, обработана 1 строка за 0,38 с), но вскоре все станет на свои места.
После создания базы данных с ней нужно будет работать, поэтому даем следующую
команду:
USE publications;
Теперь должно быть выведено сообщение об изменении текущей базы данных
(Database changed), и после этого база будет готова к продолжению работы со сле
дующими примерами.
Организация доступа пользователей
Cоздадим пользователя, который получит доступ только к новой базе
данных publications и ко всем ее объектам, и введем для этого следующую команду
(заменив в ней имя пользователя jim и пароль mypasswd выбранными вами именем
и паролем):
GRANT ALL ON publications.* TO 'jim'@'localhost'
IDENTIFIED BY 'mypasswd';
Эта команда предоставляет пользователю jim@localhost полный доступ к базе
данных publications при использовании пароля mypasswd. Работоспособность этой
установки можно проверить, если ввести команду quit для выхода из системы,
а затем перезапустить MySQL, воспользовавшись прежним способом запуска, но
вместо -u root -p набрав -u jim -p или применив в этой строке созданное вами имя
пользователя.
Создание таблицы
В данный момент вы должны находиться в системе MySQL, обладать всеми (ALL)
правами.
Осталось включить базу данных в работу, набрав следующую команду (и заменив publications именем своей базы данных, если оно у нее другое):
USE publications;
Теперь набираем построчно команды:
CREATE TABLE classics (
author VARCHAR(128),
title VARCHAR(128),
type VARCHAR(16),
year CHAR(4)) ENGINE MyISAM;
Чтобы проверить факт создания новой таблицы, наберите команду:
DESCRIBE classics;
Данные будут отображаться в виде таблицы.
Я не буду останавливаться на типах данных. О них много написано и вы всегда можете посмотреть их в справочниках или книгах. Замечу, что использование типов данных будет влиять на производительность и возможности поиска. Поэтому, лучше все спланировать заранее.
Остановлюсь только на очень важном - AUTO_INCREMENT
Тип данных AUTO_INCREMENT
Иногда нужно обеспечить уникальность каждой строки, имеющейся в базе данных.
В вашей программе это можно сделать за счет тщательной проверки вводимых дан-
ных и обеспечения их различия хотя бы в одном из значений в любых двух строках.
Но такой подход не защищен от ошибок и работает только в конкретных обстоятельствах. Например, в таблице один и тот же автор может появляться несколько раз. Точно так же, скорее всего, будет повторяться год издания и т. д. В таком случае
гарантировать отсутствие продублированных строк будет довольно трудно.
В общем виде эта проблема решается за счет специально выделенного для этой
цели дополнительного столбца.
Cначала нужно представить вам тип данных с автоприращением — AUTO_INCREMENT.
В соответствии с названием столбца, которому назначен этот тип данных, его
содержимому будет устанавливаться значение на единицу большее, чем значение
записи в этом же столбце в предыдущей вставленной строке.
Можно добавлять новый столбец по имени id к таблице classics и придавать ему свойства автоприращения. Добавление столбца id с автоприращением
ALTER TABLE classics ADD id INT UNSIGNED NOT NULL AUTO_INCREMENT KEY;
В нашем примере добавляется столбец по имени id, имеющий следующие характеристики.
INT UNSIGNED — делает столбец способным принять целое число, достаточно большое для того, чтобы в таблице могло храниться более 4 млрд записей.
NOT NULL — обеспечивает наличие значения в каждой записи столбца. Многие
программисты используют его в поле NULL, чтобы показать отсутствие в нем
какого-либо значения. Но тогда могут появляться дубликаты, противоречащие
самому смыслу существования этого столбца. Поэтому появление в нем значения NULL запрещено.
AUTO_INCREMENT — заставляет MySQL установить для этого столбца уникальное
значение в каждой строке, как было описано ранее. Фактически мы не управляем
значением, которое будет появляться в каждой строке этого столбца, но это и не
нужно: все, о чем мы беспокоимся, — гарантия уникальности этого значения.
KEY — столбец с автоприращением полезно использовать в качестве ключа, поскольку вы будете стремиться искать строки на основе значений этого столбца.
Теперь каждая запись будет иметь уникальное число в столбце id, для первой записи это будет начальное число 1, а счет других записей будет вестись по нарастающей. Как только будет вставлена новая строка, в ее столбец id будет автоматически записано следующее по порядку число.
Этот столбец можно не добавлять после создания таблицы, а сразу включить
в нее, слегка изменив формат команды CREATE
CREATE TABLE classics (
author VARCHAR(128),
title VARCHAR(128),
type VARCHAR(16),
year CHAR(4),
id INT UNSIGNED NOT NULL AUTO_INCREMENT KEY) ENGINE MyISAM;
Если хочется проверить, был ли добавлен столбец, нужно посмотреть имеющиеся в таблице столбцы и типы данных, воспользовавшись следующей командой:
DESCRIBE classics;
Для удаление столбца id:
ALTER TABLE classics DROP id;
Добавление данных к таблице
Многократно используя
одну и ту же форму команды INSERT. Заполнение таблицы classics
INSERT INTO classics(author, title, type, year)
VALUES('Mark Twain','The Adventures of Tom Sawyer','Fiction','1876');
INSERT INTO classics(author, title, type, year)
VALUES('Jane Austen','Pride and Prejudice','Fiction','1811');
INSERT INTO classics(author, title, type, year)
VALUES('Charles Darwin','The Origin of Species','Non-Fiction','1856');
INSERT INTO classics(author, title, type, year)
VALUES('Charles Dickens','The Old Curiosity Shop','Fiction','1841');
INSERT INTO classics(author, title, type, year)
VALUES('William Shakespeare','Romeo and Juliet','Play','1594');
После каждой второй строки вы должны увидеть сообщение об успешной обработке запроса — Query OK. Как только будут введены все строки, наберите следующую команду, которая отобразит содержимое таблицы:
SELECT * FROM classics;
Результат должен быть похож на этот:
Переименование таблиц
Переименование таблиц, как и любые другие изменения ее структуры или метаданных, осуществляются посредством команды ALTER. Поэтому, чтобы, к примеру, изменить имя таблицы classics на pre1900, воспользуйтесь следующей командой:
ALTER TABLE classics RENAME pre1900;
Для того, чтобы вернуть таблице ее прежнее имя, нужно будет ввести следующую команду:
ALTER TABLE pre1900 RENAME classics;
Изменение типа данных столбца
Для изменения типа данных столбца также используется команда ALTER, но в этом
случае вместе с ней применяется ключевое слово MODIFY. Поэтому для изменения
типа данных столбца year с CHAR(4) на SMALLINT (для которого потребуется только
2 байта памяти, что способствует экономии дискового пространства) нужно ввести
следующую команду:
ALTER TABLE classics MODIFY year SMALLINT;
После этого, если для MySQL есть смысл конвертировать тип данных, система
автоматически изменит данные, сохраняя их значение. В данном случае она заменит каждое строковое значение сопоставимым с ним целым числом, пока строку
можно будет распознать как отображение целого числа
Добавление нового столбца
Предположим, что таблица создана и заполнена большим объемом данных и тут
выяснилось, что нужен еще один столбец. Не стоит расстраиваться. Посмотрите,
как можно добавить к таблице новый столбец pages, который будет использоваться
для хранения количества страниц, имеющихся в книге:
ALTER TABLE classics ADD pages SMALLINT UNSIGNED;
Эта команда добавляет новый столбец по имени pages, в котором используется тип данных UNSIGNED SMALLINT, подходящий для хранения значений вплоть
до 65 535. Этого наверняка более чем достаточно для любой когда-либо изданной
книги!
И если запросить у MySQL описание обновленной таблицы, воспользовавшись
показанной далее командой DESCRIBE, то можно будет увидеть внесенные в нее изменения:
DESCRIBE classics;
Переименование столбца
Посмотрев еще раз на рис. 8.5, можно заметить, что наличие в таблице столбца
type может привести к путанице, поскольку такое же имя используется MySQL
для идентификации типа данных. Но это не проблема — изменим имя этого столбца на category:
ALTER TABLE classics CHANGE type category VARCHAR(16);
Обратите внимание на добавление VARCHAR(16) в конце этой команды. Это связано с тем, что ключевое слово CHANGE требует указания типа данных даже в том случае, если вы не собираетесь его изменять, и VARCHAR(16) — тот самый тип данных,
который был указан при создании столбца type.
Удаление столбца
Поразмыслив, можно прийти к выводу, что столбец pages, в котором хранится количество страниц, не представляет для этой базы данных особой ценности, поэтому его можно удалить, используя ключевое слово DROP:
ALTER TABLE classics DROP pages;
Удаление таблицы
Удалить таблицу очень просто. Достаточно ввести такой код: DROP TABLE имя таблицы;
Для тренировки, вы можете создать новую таблицу, посмотреть ее и удалить следующей последовательностью строк кода в КС:
CREATE TABLE disposable(trash INT);
DESCRIBE disposable;
DROP TABLE disposable;
SHOW tables;
Индексы
По мере роста таблицы, поиск в базе данных будет все более затрудняться. Для этого есть смысл создать "картотеку".
Создание индекса
Добавление индексов к таблице classics
ALTER TABLE classics ADD INDEX(author(20));
ALTER TABLE classics ADD INDEX(title(20));
ALTER TABLE classics ADD INDEX(category(4));
ALTER TABLE classics ADD INDEX(year);
DESCRIBE classics;
Использование команды CREATE INDEX
Индекс можно добавить не только командой ALTER TABLE, но и командой CREATE INDEX.
Эти две команды являются равнозначными, за исключением того, что CREATE INDEX не может использоваться для создания индекса типа первичного ключа — PRIMARY KEY Эти две команды эквивалентны
ALTER TABLE classics ADD INDEX(author(20));
CREATE INDEX author ON classics (author(20));
Добавление индексов при создании таблиц
Чтобы добавить индекс, не нужно выжидать какое-то время после создания таблицы. Это может отнять много времени, поскольку добавление индекса к большой таблице — длительный процесс. Поэтому рассмотрим команду, создающую таблицу classics с уже имеющимися индексами.
Создание таблицы classics с индексами
CREATE TABLE classics (
author VARCHAR(128),
title VARCHAR(128),
category VARCHAR(16),
year SMALLINT,
INDEX(author(20)),
INDEX(title(20)),
INDEX(category(4)),
INDEX(year)) ENGINE MyISAM;
Первичные ключи
Здесь стоит вспомнить о AUTO_INCREMENT где рассматривался создаваемый столбец id с автоприращением, он может быть использован в качестве первичного ключа для этой таблицы.
Но мы решили пойти другим путем.
B этом наборе данных каждый год
имеет уникальное значение, поэтому для идентификации каждой обновляемой
строки можно воспользоваться столбцом year.
Заполнение столбца isbn данными и использование первичного ключа
ALTER TABLE classics ADD isbn CHAR(13);
UPDATE classics SET isbn='9781598184891' WHERE year='1876';
UPDATE classics SET isbn='9780582506206' WHERE year='1811';
UPDATE classics SET isbn='9780517123201' WHERE year='1856';
UPDATE classics SET isbn='9780099533474' WHERE year='1841';
UPDATE classics SET isbn='9780192814968' WHERE year='1594';
ALTER TABLE classics ADD PRIMARY KEY(isbn);
DESCRIBE classics;
Чтобы создать первичный ключ при создании таблицы classics, можно воспользоваться командой И в этом случае, если вы хотите
испробовать эту команду в работе, нужно заменить имя classics в строке 1 каким-нибудь другим, а затем удалить проверочную таблицу. Создание таблицы classics с первичным ключом
CREATE TABLE classics (
author VARCHAR(128),
title VARCHAR(128),
category VARCHAR(16),
year SMALLINT,
isbn CHAR(13),
INDEX(author(20)),
INDEX(title(20)),
INDEX(category(4)),
INDEX(year),
PRIMARY KEY (isbn)) ENGINE MyISAM;
Создание индекса FULLTEXT
В отличие от обычного индекса, имеющийся в MySQL индекс FULLTEXT позволяет осуществлять сверхбыстрый поиск целых столбцов текста. Он сохраняет каждое слово каждой строки данных в специальном индексе, в котором можно вести поиск, используя «естественный язык» наподобие того, что применяется в поисковом механизме.
Рассмотрим некоторые особенности индексов FULLTEXT, о которых нужно знать.
Индексы FULLTEXT могут применяться только с таблицами типа MyISAM, использующими исходное ядро (механизм хранения) MySQL (MySQL поддерживает
как минимум десять различных ядер). Если нужно привести таблицу к типу
MyISAM, можно применить команду MySQL:
ALTER TABLE tablename ENGINE = MyISAM;
Индексы FULLTEXT могут создаваться только для столбцов с типами данных CHAR,
VARCHAR и TEXT.
Определение индекса FULLTEXT может быть дано в инструкции CREATE TABLE при
создании таблицы или добавлено позже с использованием инструкции ALTER
TABLE (или CREATE INDEX).
Намного быстрее будет загрузить большие наборы данных в таблицу, не имеющую индекса FULLTEXT, а затем создать индекс, чем загружать их в таблицу, у которой уже имеется индекс FULLTEXT.
Чтобы создать индекс FULLTEXT, примените его к одной или нескольким записям, в котором индекс FULLTEXT добавляется к двум столбцам — author
и title, принадлежащим таблице classics (этот индекс является дополнением к тем,
что уже были созданы, и не влияет на их работу).
Добавление индекса FULLTEXT к таблице classics
ALTER TABLE classics ADD FULLTEXT(author,title);
Теперь в этой паре столбцов можно вести поиск с использованием индекса
FULLTEXT. Такая возможность могла бы проявиться в полную силу, если бы вы
могли теперь ввести весь текст этих книг в базу данных (учитывая, что они не
защищены авторскими правами), тогда они были бы полностью доступны для
поиска.
Создание запросов к базе данных MySQL
Итак, мы создали базу данных MySQL и таблицы, заполнили их данными и добавили к ним индексы, чтобы ускорить поиск. Теперь настало время посмотреть, как именно ведется этот поиск и какие для этого имеются команды и спецификаторы.
SELECT
Oсновной синтаксис имеет следующий вид:
SELECT что-нибудь FROM имя_таблицы;
Этим что-нибудь, как вы уже видели, может быть символ звездочки (*), означающий
«каждый столбец», вместо него можно указать какие-нибудь конкретные столбцы.
В примере 8.16 показано, как выбрать только автора и название (author и title) и только название и ISBN. Две разные инструкции SELECT
SELECT author,title FROM classics;
SELECT title,isbn FROM classics;
SELECT COUNT
Другой заменой параметра что-нибудь является функция COUNT, которая может быть
использована множеством способов. В примере 8.17 она отображает количество
строк в таблице за счет передачи ей в качестве параметра символа звездочки (*),
означающего «все строки». В соответствии с вашими ожиданиями будет возвращено число 5, поскольку в таблицу внесены сведения о пяти книгах.
Подсчет количества строк
SELECT COUNT(*) FROM classics;
SELECT DISTINCT
Этот спецификатор (и его синоним DISTINCTROW) позволяет исключать множество
записей, имеющих одинаковые данные.Например авторов.
Давайте создадим запись с таким же автором, а потом отсортируем
Дублирование данных
INSERT INTO classics(author, title, category, year, isbn)
VALUES('Charles Dickens','Little Dorrit','Fiction','1857','9780141439969');
Команда SELECT со спецификатором DISTINCT и без него
SELECT author FROM classics;
SELECT DISTINCT author FROM classics;
DELETE
Когда нужно удалить строку из таблицы, применяется команда DELETE. Ее синтаксис
похож на синтаксис команды SELECT, он позволяет сузить диапазон удаляемой информации до конкретной строки или строк путем использования таких спецификаторов, как WHERE и LIMIT.
Теперь, если вы вводили команду, и изучали работу спецификатора DISTINCT, нужно удалить Little Dorrit путем ввода команды,
Удаление новой записи
DELETE FROM classics WHERE title='Little Dorrit';
WHERE
Ключевое слово WHERE позволяет сузить диапазон действия запроса, возвращая толь-
ко те данные, в отношении которых конкретное выражение возвращает истинное
значение.
Использование ключевого слова WHERE
SELECT author,title FROM classics WHERE author="Mark Twain";
SELECT author,title FROM classics WHERE isbn="9781598184891 ";
При проведении поисковых операций можно также осуществлять проверку на
соответствие шаблону, для чего применяется спецификатор LIKE, позволяющий
вести поиск в разных частях строк. Этот спецификатор должен использоваться
с символом % до или после некоторого текста. Если его поместить до текста, это
будет означать «что-нибудь до», а если после текста — «что-нибудь после».
Использование спецификатора LIKE
SELECT author,title FROM classics WHERE author LIKE "Charles%";
SELECT author,title FROM classics WHERE title LIKE "%Species";
SELECT author,title FROM classics WHERE title LIKE "%and%";
Символ % будет также соответствовать пустому месту в той позиции, которую
он занимает. Иными словами, он может соответствовать пустой строке.
LIMIT
Ограничение диапазона выводимых строк
Спецификатор LIMIT позволяет выбрать количество выводимых в запросе строк
и место, с которого таблица начнет их возвращать. Когда передается один параметр,
он указывает MySQL начать действие спецификатора с верхней части результатов
и вернуть только то количество строк, которое задано этим параметром. Если передать спецификатору два параметра, то первый укажет смещение относительно
начала результатов, которое MySQL должна учесть при их отображении, а второй
укажет, сколько строк нужно вывести. Можно представить, что первый параметр
сообщает: «Нужно пропустить это количество результатов, ведя счет сверху».
Ограничение количества возвращаемых результатов
SELECT author,title FROM classics LIMIT 3;
SELECT author,title FROM classics LIMIT 1,2;
SELECT author,title FROM classics LIMIT 3,1;
MATCH...AGAINST
Конструкция MATCH...AGAINST может быть применена к столбцу, для которого был
создан индекс FULLTEXT (см. выше пункт «Создание индекса FULLTEXT»). Используя эту конструкцию, можно вести поиск, применяя в качестве критерия
элементы обычного языка, как при работе с поисковыми механизмами Интернета. В отличие от конструкций WHERE...= или WHERE...LIKE, конструкция MATCH...AGAINST позволяет вводить в поисковый запрос несколько слов и проверять на их
наличие все слова в столбцах, имеющих индекс FULLTEXT. Индексы FULLTEXT нечувствительны к регистру букв, поэтому неважно, какой именно регистр используется в ваших запросах.
Использование конструкции MATCH...AGAINST с индексами FULLTEXT
SELECT author,title FROM classics
WHERE MATCH(author,title) AGAINST('and');
SELECT author,title FROM classics
WHERE MATCH(author,title) AGAINST('old shop');
SELECT author,title FROM classics
WHERE MATCH(author,title) AGAINST('tom sawyer');
MATCH...AGAINST...IN BOOLEAN MODE
При желании придать своим запросам с конструкцией MATCH...AGAINST более широкие
возможности нужно воспользоваться булевым режимом. Это изменение выражается в том, что стандартный запрос по индексу FULLTEXT ведет поиск любой комбинации
искомых слов, не требуя наличия всех этих слов в тексте. Наличие отдельного слова
в столбце приводит к тому, что поисковая операция возвращает строку.
Булев режим позволяет также ставить впереди искомых слов знак + или –, чтобы показать, что они должны быть включены или исключены. Если обычный булев
режим требует «искать присутствие любого из этих слов», то знак «плюс» означает, что «это слово обязательно должно присутствовать, иначе строку возвращать
не нужно». Знак «минус» означает, что «этого слова быть не должно, а если оно
присутствует, то строку возвращать не нужно».
Использование MATCH...AGAINST...IN BOOLEAN MODE
SELECT author,title FROM classics
WHERE MATCH(author,title)
AGAINST('+charles -species' IN BOOLEAN MODE);
SELECT author,title FROM classics
WHERE MATCH(author,title)
AGAINST('"origin of"' IN BOOLEAN MODE);
Как, наверное, и ожидалось, первый запрос вернет только запись о книге The
Old Curiosity Shop Чарльза Диккенса. Запись о книге Чарльза Дарвина игнорируется, поскольку из результата должна быть исключена любая строка, содержащая
слово species.
UPDATE...SET
Эта конструкция позволяет обновлять содержимое поля. Если нужно изменить содержимое одного или нескольких полей, сначала следует сузить область действия
запроса до того поля или полей, которые будут подвергаться изменениям, практически тем же способом, который применялся в команде SELECT.
Использование UPDATE...SET
UPDATE classics SET author='Mark Twain (Samuel Langhorne Clemens)'
WHERE author='Mark Twain';
UPDATE classics SET category='Classic Fiction'
WHERE category='Fiction';
В первом запросе, действие которого затрагивает только одну строку, к литературному псевдониму Mark Twain добавляется настоящее имя писателя — Samuel
Langhorne Clemens, заключенное в скобки. А вот второй запрос воздействует на три
столбца, поскольку он заменяет все появления слова Fiction в столбце category
термином Classic Fiction.
ORDER BY
Спецификатор ORDER BY позволяет отсортировать возвращаемые результаты по одному
или нескольким столбцам в возрастающем или в убывающем порядке.
Использование ORDER BY
SELECT author,title FROM classics ORDER BY author;
SELECT author,title FROM classics ORDER BY title DESC;
Первый запрос возвращает издания, отсортированные по авторам в возрастающем алфавитном порядке (этот режим используется по умолчанию), а второй
возвращает их отсортированными по названию в убывающем порядке.
Если нужно отсортировать все столбцы по авторам, а затем в убывающем порядке по году издания (чтобы сначала стояли самые последние), нужно ввести
следующий запрос:
SELECT author,title,year FROM classics ORDER BY author,year DESC;
Можно также указать порядок сор-
тировки этого столбца по возрастанию и в явном виде, в результате будут получены аналогичные результаты:
SELECT author,title,year FROM classics ORDER BY author ASC,year DESC;
GROUP BY
Точно так же, как и при использовании ORDER BY, можно сгруппировать результаты,
возвращаемые запросом, с помощью спецификатора GROUP BY, который больше всего подходит для извлечения информации о группе данных. Например, если нужно
узнать, сколько изданий каждой категории присутствует в таблице classics, можно ввести запрос
SELECT category,COUNT(author) FROM classics GROUP BY category;
Объединение таблиц
Управление несколькими таблицами, содержащими различные виды информации в одной базе данных, считается вполне обычным делом. Рассмотрим, к при-
меру, таблицу клиентов — customers, для которой нужно обеспечить возможность
использования перекрестных ссылок с приобретенными ими книгами из таблицы
classics. Чтобы создать эту новую таблицу и поместить в нее информацию о трех
клиентах и их покупках, введите команды :
Создание и заполнение таблицы customers
CREATE TABLE customers (
name VARCHAR(128),
isbn VARCHAR(13),
PRIMARY KEY (isbn)) ENGINE MyISAM;
Глава 8. Введение в MySQL
225
INSERT INTO customers(name,isbn)
VALUES('Joe Bloggs','9780099533474');
INSERT INTO customers(name,isbn)
VALUES('Mary Smith','9780582506206');
INSERT INTO customers(name,isbn)
VALUES('Jack Wilson','9780517123201');
SELECT * FROM customers;
Существует также быстрый способ для вставки сразу нескольких строк данных, позволяющий заменить три отдельных запроса INSERT INTO одним, в котором
перечисляются вставляемые данные, отделенные друг от друга запятыми: INSERT INTO customers(name,isbn) VALUES
('Joe Bloggs','9780099533474'),
('Mary Smith','9780582506206'),
('Jack Wilson','9780517123201');
Разумеется, в настоящей таблице, содержащей сведения о покупателях, будут
присутствовать также адреса, номера телефонов, адреса электронной почты и т. д.,
но на данном этапе изучения они для нас не представляют интереса.
При создании новой таблицы следует обратить внимание на то, что у нее есть
кое-что общее с таблицей classics: столбец под названием isbn. Поскольку его
предназначение в обеих таблицах совпадает (ISBN всегда является ссылкой на одну
и ту же книгу), этот столбец можно использовать для связывания двух таблиц
вместе в едином запросе. Объединение двух таблиц в одном запросе SELECT
SELECT name,author,title from customers,classics
WHERE customers.isbn=classics.isbn;
Видите, как этот запрос искусно связал вместе обе таблицы, чтобы продемонстрировать книги из таблицы classics, приобретенные покупателями из таблицы customers?
NATURAL JOIN
Используя NATURAL JOIN, можно сократить количество вводимого текста и сделать запросы немного более понятными. В этом виде объединения участвуют две таблицы,
в которых автоматически объединяются столбцы с одинаковыми именами. Для получения тех же результатов, можно ввести следующий запрос:
SELECT name,author,title FROM customers NATURAL JOIN classics;
JOIN...ON
Если нужно указать столбец, по которому следует объединить две таблицы, используется конструкция JOIN...ON, благодаря которой можно получить те же результаты:
SELECT name,author,title FROM customers
JOIN classics ON customers.isbn=classics.isbn;
Использование ключевого слова AS
Можно сократить количество вводимого текста и улучшить читаемость запроса за
счет создания псевдонимов с помощью ключевого слова AS. После имени таблицы
нужно поставить AS, а затем используемый псевдоним. Следующий код идентичен
по своей работе коду, приведенному выше:
SELECT name,author,title from
customers AS cust, classics AS class WHERE cust.isbn=class.isbn;
Использование логических операторов
Для дальнейшего сужения пространства выбора в запросах MySQL, использующих
ключевое слово WHERE, можно также задействовать логические операторы AND, OR
и NOT. В примере ниже, показаны варианты применения каждого из них, но их можно
использовать в любых сочетаниях.
Использование логических операторов
SELECT author,title FROM classics WHERE
author LIKE "Charles%" AND author LIKE "%Darwin";
SELECT author,title FROM classics WHERE
author LIKE "%Mark Twain%" OR author LIKE "%Samuel Langhorne Clemens%";
SELECT author,title FROM classics WHERE
author LIKE "Charles%" AND author NOT LIKE "%Darwin";
Первый запрос выбран потому, что Чарльз Дарвин может фигурировать в некоторых строках под своим полным именем — Чарльз Роберт Дарвин. А запрос
возвращает сведения о книгах, для которых значение столбца author начинается
с Charles и заканчивается Darwin. Второй запрос ищет книги, принадлежащие перу
Марка Твена, используя для этого либо литературный псевдоним — Mark Twain,
либо настоящее имя писателя — Samuel Langhorne Clemens. Третий запрос возвращает книги с авторами, чье имя Charles, а фамилия не Darwin.
Функции MySQL
Стремление применять функции MySQL при таком обилии достаточно мощных
функций PHP может вызвать недоумение. Ответ предельно прост: функции MySQL
работают с данными непосредственно в самой базе. А при использовании PHP приходится сначала извлекать строку данных из MySQL, выполнять обработку, а затем
выдавать первоначально задуманный запрос к базе данных.
Применение встроенных функций MySQL не только существенно сокращает
время обработки сложных запросов, но и упрощает сами запросы. При желании
подробные сведения обо всех доступных строковых функциях и функциях даты
и времени можно найти по следующим адресам:
Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.Пишите мне - kolesnikovy70 почта gmail.com
