Web Мастерская | Блог :: Страница: 36

Моя первая страница на PHP (С чего начать?)

Мне часто приходят письма с вопросами, с чего начать изучение, как устроен PHP и какую книгу я бы рекомендовал для изучение? Сразу скажу, что я изучал язык PHP (и продолжаю изучать) не по какому то учебнику, у меня не было какой то конкретной книги, по которой бы я занимался. Во всех книгах, что я видел, я прочитал первые две страницы, там где рассказывают, как вывести на экран надпись: Привет, Мир!, ну или, что то в этом духе. Конечно это делается так:

<?php 
echo 'Привет, Мир!';

И это я знал ещё до того, как решил, что я должен понимать код написанный на PHP, но этого знания очень и очень мало. Мне надо понимать почему выводится именно этот фрагмент, а не другой и при каких условиях. Интерес читать книги у меня "улетел" из головы и я больше не искал светлого пути в каких то книгах, так что рекомендовать, какую книгу выбрать и какого автора, я не буду. Могу лишь сказать если будите изучать PHP по книге, выбирайте книгу посвежее, те книги, что написанные более года назад уже...

Жалоба

Определить страну и город на JS + API Яндекс

JavaScript

Для того, что бы определить страну и город на JS + API Яндекс, подключаем между тегами <head> и </head> jQuery и API Яндекс, например так:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>

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

<script type="text/javascript">
    $(document).ready(function() {
        ymaps.ready(function() {
            var country = ymaps.geolocation.country;
            var city = ymaps.geolocation.city;
            
            $('#country').html('Выша страна ' + country);            
            $('#city').html('Выша город ' + city);
        });
    });
</script>

Теперь в нужной части страницы вставляем:

<!-- Для вывода страны -->
<div id="country"></div>

<!-- Для вывода города

...

Жалоба

Как подключить highlight.js (Подсветка синтаксиса)

CSS JavaScript

Подключить highlight.js на сайте довольно просто, для этого переходим на сайт: https://highlightjs.org/ выбираем все языки, которые необходимо посветить на вашем сайте и скачиваем архив (https://highlightjs.org/download/).
Распаковываем архим, файл highlight.pack.js и один из файлов стиля (css) помещаем на вашем сайте, далее между тегами <head> и </head> подключаем файл highlight.pack.js, прописывая:

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

И файл стиля, например vs.css:

<link rel="stylesheet" href="css/vs.css" />

Еще один код, который надо вставить между тегами <head> и </head>:

<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>

Теперь тот код, что надо подсветить помещаем между тегами:

<pre><code>
    <!-- Тут код, который необходимо подсветить -->
</code></pre>

Вот и всё!

Спасибо за внимание!...

Жалоба

Индикатор выполнения AJAX запроса (jQuery)

Библиотека JS

Как говорится "Краткость - сестра таланта", я конечно не брат краткости и вообще, ее родственником не являюсь, но буду краток! Сразу к делу.

Допустим, у нас есть код обработки формы (форма #form), в которую вводим, какие то данные, жмем кнопку и через ajax выводим результат на экран (блок #display):

    $.ajax({ 
        url: 'ajax.php',
        type: 'POST',
        data: $('#form').serialize(),  
        success: function(data) {
            $('#display').html(data);        
        }
    });

Стоит задача - имитировать процесс выполнения обработки данных. В качестве индикатора можно использовать картинку анимацию (формат .gif). Анимированная картинка должна появится сразу после нажатия кнопки и исчезнуть перед тем, как будет выведен результат.

Приступаем, создаем класс, задаем размеры картинки и прописываем полный путь до нее:

.processing {
    width: 25px;
    height: 10px;
    background: url("loading.gif");
}

Теперь в ajax запрос добавляем две функции: addClass() и remove...

Жалоба

Анимированное появление и исчезновение HTML элементов на JavaScript | jQuery

Библиотека JS

Для появлении и исчезновении элементов, будем использовать библиотеку jQuery (Как подключить библиотеку jQuery).

И без лишних слов, сразу к делу. Я написал вот такой код:

<button id="button">Показать</button>
<div style="display: none;">Скрытый текст</div>
<script>
$('#button').click(function() {
    $('div').show(1000);

    setTimeout(function() {
        $('div').hide(1000);
    }, 2000);
}); 
</script>

Данный код, после нажатия кнопки "Показать" разворачивает в течении одной секунды строчку "Скрытый текст", и ровно через две секунды (с момента нажатия кнопки) сворачивает текст обратно. Сворачивается строчка, так же одну секунду. Из-за того, что на появление и исчезновение заданно время, появление текста стало анимированным.

Постараюсь подробно объяснить, что происходит в нашем примере, так сказать, разберу код по отдельности. Первые две строчки:

<button id="button">Показать</button>
<div style="display: none;">Скрытый текст</div>

Это кнопка, с идентификатором button, после...

Жалоба

Web Мастерская»Блог