Translate

Поиск по этому блогу

вторник, 22 ноября 2016 г.

Переменные и массивы.

Массивы и переменные


Переменные


Для того, чтобы лучше понять как это работает создадим на рабочем столе папку C2S2.
Далее мы создадим в ней файл index.html. Если сейчас открыть это документ в браузере, то мы увидим пустую страницу. Для того, чтобы ее заполнить, мы откроем этот документ в редакторе Notepad++ или Sublime и добавим туда обычный макет документа.
<doctype ntml>
<html>
<head>
<meta charset="utf-8">
<title>Variable & Arrays</title>
<script>
 var car = 'Honda';//объявили переменную car со значением'Honda'
car = "toyota";// переопределили переменную - теперь надпись будет toyota
var x = 5;
</script>
</head>
<body>
<script>
document.write('Anysing');//вывели на страницу надпись Anysing
 document.write(car);//значение переменной car
 document.write("I have " + x + " aples");
</script>
</body>
</html>
Важно помнить что можно получить данные из одной части скрипта в другой области. Мы создали два скрипта. Один в голове и один (чтобы его было видно) в теле документа.
Чтобы вывести переменную в строке, нам нужно сделать так как в случае с яблоками. То есть использовать конкатенацию строк

Массивы


Создали новый массив (в голове документа) var cars = new Array('Honda', 'Toyota', 'Ford');
Добавили новый элемент в массивcars[3] = "Dodge";
Вывели на экран значение элемента массиваdocument.write(cars[0]);
Узнали длину массиваdocument.write(cars.length);
Узнали место элемента в массиве document.write(cars.indexOf('Toyota'));

<html>
  <head>
    <title>Variables & Arrays</title>
    <script>
      var cars = new Array('Honda', 'Toyota', 'Ford');
       cars[3] = "Dodge";
     </script>
  </head>
  <body>
    <script>
     document.write(cars[0]);
      document.write(cars.length);
      document.write(cars.indexOf('Toyota'));
    </script>
  </body>
</html>
                                                                                                                                                             

воскресенье, 20 ноября 2016 г.

Подключение библиотеки JQuery

Основы Jquery

Подключение библиотеки

все библиотеки можно посмотреть здесь или перейдя по этой ссылке вручную. https://developers.google.com/speed/libraries/

Например вот так для работы с файлом, который вы скачали и поместили в папку вашего сайта. Этот метод более предпочтительный при работе на локальном сервере

<script type = "text/javascript" src = "jquery.js"></script>

Или вот так для любого другого сайта находящегося в интернете:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script >

Для того, чтобы код выполнялся после загрузки самого документа его надо вставить внутрь вот такой функции:

$(document).ready(function)(){
//all JQuery code goes here.
});

Выбор элементов

С помощью библиотеки можно выбрать практически любой документ DOM. Добиться этого можно при использовании селекторов. Селектор это знак $ и рядом внутри круглых скобок мы указываем какой элемент мы хотим выбрать.

  • $("div") - выбирает все divна странице.
  • $("#myDiv") - по ID
  • $("p.myClass") - выбирает все теги р с классом myClass

Это расширяет возможности использования библиотеки, потому что просто JavaScript-ом мы можем обратиться к элементу только с определенным ID - document.getElementById()

Методы и Действия JQuery

Как только объект выбран мы можем произвести над ним какие-то действия.

Например

  • $("div")addClass("myClass"); - позволяет добавить выбранным элементам класс
  • $("#myDiv").css("color","red"); - позволяет добавить css. (Метод css)
  • Var myElement=$("#myElement").html();Позволяет получить html - код выбранного элемента (Метод html). В этом случае мы создаем переменную, которая получает весь код от элемента с id. Это моэет быть слово, параграф, изображение или вся страница целиком. Далее мы можем использовать эту структуры в своих собственных целях.

События JQuery

Данная библиотека очень хорошо проявляет себя в обработке событий.Например вот функция, которая будет вызываться при клике на ссылку:

$("a").click(function(){
//здесь сама функция.
});

Можно например окрасить все ссылки в определенный цвет или сделать какое-либо другое действие.

Например:

  • Blur - размытие
  • Focus - резкость
  • Hover - наведение
  • Key Down - нажатие клавиши "стрелка вниз"
  • Load - загрузка

На сайте JQuery можно найти полный список всех событий (Events)

Показать или скрыть

  • $("#myElement").hide(function(){//here some function}); скрывает элемент с ID
  • $("#myElement").show(function(){//here some function}); показывает ID
  • $("#myElement").toggle(function(){//here some function}); переключение между "показать" и "скрыть"
  • $("#myElement").slideDown("fast",function(){//here some function});- перемещает элемент вниз со скоростью "fast" и второй параметр это функция, которая будет выполнена по завершении перемещения
  • $("#myElement").slideUp("slow",function(){//here some function}); - тоже самое "вверх"
  • $("#myElement").slideToggle(1000,function(){//here some function}); - переключение между перемещениями с числовым параметром скорости
                                                                                                                                                             

четверг, 10 ноября 2016 г.

Как изменить картинку при наведении на неё курсора

Ранее я рассказывал как можно изменять картинки при помощи JavaScript

Самый простой способ радикально изменить изображение при наведении на него курсора это разместить две картинки в один контейнер и спрятать их одну под другой с помощью css правила position: absolute:
<div class="animate2">

    <img class="first" src="img/1.jpg" />

    <img class="second" src="img/2.jpg" />

</div>

Добавляем css

.animate2{

  position:relative;

  margin:0 auto;/* устанваливаем блок div по центру страницы*/

  width:480px; /* Ширина */

  height: 360px;  /* Высота */                

}

.animate2 img {

  position:absolute; /* абсолютное позиционирование*/

  left: 0; /* выравниваем картинки по левому верхнему углу div-а*/

  top: 0; /* выравниваем картинки по левому верхнему углу div-а */  

}

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

.animate2 img.first { /* первая картинка полностью прозрачная */

  opacity:0;

  filter:alpha (opacity=0);

}

.animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */

  opacity:1;

  filter:alpha (opacity=100);

}

.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */

  opacity:0;

  filter:alpha (opacity=0);

}

Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition:

.animate2:hover img.second, .animate2 img.second:hover {
  opacity:0;
  filter:alpha (opacity=0);
  -moz-transition: all 2s ease;
  -webkit-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}
ИЛИ
.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */

  opacity:0;

  filter:alpha (opacity=0);
     -moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */

    -webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */

    -o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */

transition: all 1s ease-in-out; 
}


От себя добавлю, что вы также можете сделать плавным переход и после отведения курсора с картинки. Для этого нам нужно добавить следующий код:
.animate2:not(:hover) img.first {
  opacity: 0;
  filter: alpha (opacity=0);
  -moz-transition: all 3s ease;
  -webkit-transition:all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}
.animate2:not(:hover) img.second, .animate img.second:not(:hover) {
  opacity: 1;
  filter:alpha (opacity=100);
  -moz-transition: all 3s ease;
  -webkit-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}
                                                                                                                                                             

понедельник, 7 ноября 2016 г.

Установка wordpress на хостинг или OpenServer.

  1. Скачиваем отсюда -wordpress.org или отсюда - ru.wordpress.org


  2. Распаковываем, копируем то что внутри папки и вставляем в папку public на хостинге по FTP соединению (используем FileZila).
    Можно скопировать всю папку wordpress, в распакованном архиве, и переместить ее в папку domensна OpenServer, там ее нужно переименовать - (имя вашего сайта).
    Я предпочитаю копировать всё содержимое папки wordpress и вставлять его непосредственно в папку с названием сайта (например bootwp, которая находится в папке domains на OpenServer). Это позволяет сразу попадать на главную страницу сайта, без дополнительных изменений файла .htaccess


  3. Затем, следует переименовать файл wp-config-sample.php в wp-config.php. Открываем его и прописываем наши данные, как показано на рисунке.




  4. Теперь переходим по ссылке, которая указана в этом файле (на фото подчеркнута) -> https://api.wordpress.org/secret-key/1.1/salt/ и полученный блок кода копируем и вставляем вместо того, что есть в вашем файле.




  5. Идем в настройки OS и Apach 2,4//// php 5,6x64 MySQL 5,6x64 (в зависимости от разрядности компа)
    Создаем базу данных mySQL идем во вкладку -> "Дополнительно" и ->"PHPMyAdmin"


    Пользователь : root пароль не надо...Нажимаем далее


    Вы можете создать любой пароль или пользователя Базы Данных. Это поможет более надежно защитить ваш сайт. В примере я этого не делаю, так как это, в данном случае, не имеет значения!


    Далее переходим во вкладку БАЗА ДАННЫХ
    Название базы : как название папки сайта, кодировка - utf8_general_ci
    Нажимаем клавишу Создать.


  6. Перезапускаем Сервер.


  7. Далее идем на наш сайт. Мои сайты - и ваш сайт. Открывается окно запуска
    нажимаем вперед :




  8. Далее вводим имя базы данных (имя сайта), имя пользователя - root, пароль пустой оставляем,
    Сервер базы данных - localchost (оставляем)
    Префикс лучше изменить. Это повысит безопасность вашего сайта. Например wp533_ вместо wp_
    Запустить установку(кнопка). Далее в форме вводим имя сайта, имя лучше писать отличное от Admin
    Пароль: придумать надежный
    Ваш емайл
    И нажимаем "Установить wordpress"
    Далее нажимаем "Войти" Вводим "Имя пользователя" и "Пароль".



    Таким оразом мы установили вордпресс на опенсервер и уже можем увидеть его на локальном сервере, если перейдем по ссылке (см картинку выше). Открываем в новом окне и видим наш сайт с установленной стандартной темой.

Дальше мы приступим к созданию собственной темы на вордпресс.                                                                                                                                                              


Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.Пишите мне - kolesnikovy70 почта gmail.com