JS (Ява скрипт)

Здесь будут собраны статьи касающиеся кода JS (Ява скрипт). Мои познания весьма любительские, поэтому подход будет в большинстве случаев таким же, то есть более для собственных заметок о том, что освоилось. Если это кому-то еще и пригодится, то совсем хорошо!

  • Cмена картинки, ссылки при обновлении страницы на JS (код)

     Изменение информации при каждой новой загрузке страницы сайта способно не только разнообразить его внешний вид, но и просто обеспечить доступ к большему объему информации. Заключения это вполне логичные, но требующие неких потуг со стороны веб дизайнера и веб мастера. Именно о том, как же реализовать подмену информации при каждом обновлении страницы я и расскажу вот в этой вот статье.
    Надо начать с прописных истин. Подмену конечных условий на странице сайта можно реализовать как с помощью PHP кода, который я не буду разбирать, но такая возможность существует, о чем я повторюсь и с помощью Java Script. Сразу скажу, что в статье будет именно Ява скрипт и написан он мной как любителем, так что если будут замечания или предложения, то они будут восприниматься положительно, если их изложение будет по существу и в корректной форме. Итак, начну.

  • Java Script

     Как это бы не звучало странно, но интересоваться Java Script я стал исключительно ради собственного любопытства. Причем это любопытство было подкреплено, прежде всего, не изучением непосредственно языков программирования, а изучением электроники. В ней после построения неких аналоговых схем, я добрался до микроконтроллеров. И эти самые микроконтроллеры пришлось программировать, ведь без прошивки это не более чем кусочки пластика и железа. В итоге, чуть-чуть освоившись с программированием микроконтроллеров и начав кое-что осознавать, я ненароком провел некую параллель между попавшимся мне на глаза кодом для микроконтроллеров и Java Script. И тут-то и выяснилось, что изучая один из языков программирования, по сути ты познаешь логику построения и других языков.
     При этом долгое время я так и не мог решиться завести на сайте отдельную категорию под Java Script, так как не чувствовал в себе некой достаточной фундаментальности, для однозначно полезных и "сильных" статей по этой теме. Однако материал постепенно накапливался как снежный ком и хранить его размазывая по другим смежным категориям оказалось делом неблагодарным, так как там он был не в тему... В итоге так и родилась вот эта категория, которая станет для меня моим небольшим справочником в изучении Java Script, если же это кому-то пригодится еще, то будет и вовсе здорово. Осталось лишь замолвить слово о снисхождении к моему опыту, так как он изначально идет от дилетанта...

    Далее, пожалуй, текст будет всегда несколько неряшлев и постоянно в доработке, ведь в нем то и дело будут появляться новые элементы, ссылки на конкретные примеры, объяснений операторов JS, по крайней мере так, как я их понимаю. К тому же масло в огонь будут подливать и разработчики ПО, ведь и у них что-то постоянно будет меняться, что потребует корректировок, что-то я буду переосмысливать и переписывать.
     ...это более для собственного пользования, однако если вы новичок или любитель в Java Script, то даже такая кустарная информация вам может быть очень даже полезной.

    Операторы функции и их применения будут сведены в таблицу с комментариями и пояснениями, к ней и обращаемся.

    Наименование

    Пример использования или синтаксис

    Примечание

    HTML  формы для ввода

    <input   id="ida" >

    <input   id="ida" >

    Форма для ввода, рамка ida – свой уникальный id - a на страницу для элемента, для считывания переменной добавляем value 

    <input type="radio" > 

    <input type="radio" > 

     Примерно тоже самое, что и просто input, но обработка данных сложнее. (пример)

    <input type="checkbox">

    <input type="checkbox">

    Примерно тоже самое, что и radio, только можно установить несколько значений.

    onchange

    <select onchange="...">

     Позволяет выбирать значение из списка (пример)

     

     

     

    HTML  формы для вывода

    <div>

    <div id="demo1">Текст</div>

    Используется для вывода данных, с возможностью подмены их через JS

    <pre>

    <pre id="demo1"></pre>

     Можно также как и в div выводить значение, но форма отображения блока будет уже со стилями свойственными pre

     Арифметические операторы

     

    плюс 

    -

     

    минус 

    *

     

    умножить 

     **

     

    степень 

    /

     

    делить

    %

    (* -при делении на 2 можно использовать для нахождения чет, нечет)

    модуль

    ++

    (инкремент) 

    прибавить в виде приращения 

    --  (декремент)

    убавить в виде сокращения 

    Элементы активности

    <button onclick="myF()">Кнопка</button>

    <button onclick="myF()">Кнопка</button>

    Можем ссылаться как на выполнение функции myF(), так и на вывод информации сразу

    onclick

    см. выше пример для кнопки

    При кликании будет активироваться, можно добавлять к картинкам, кнопкам, ссылкам (пример)

    onmouseover 

    см. выше пример для кнопки

    активируется при наведении на элемент курсора мышки

    onmouseout

    см. выше пример для кнопки

    активируется при уводе мышки с элемента
    onkeydown см. выше пример для кнопки активируется при нажатии клавиш на клавиатуре
    onload window.onload=function(…){…} активизируется при загрузке страницы
    onkeyup
    onkeyup="function(this.value)"
    активизируется в момент отпускания нажатой клавиши

    getElementById

    document.getElementById("email") (берет значение из ID email)

    document - Обращение к файлу html
    getElementById() – получить элемент по идентификатору() (можно и при помощи других критериев)
    email - id элемента

    getElementsByClassName

    getElementsByClassName("...")[0]; Берет элементы по классу (пример)

    getElementsByTagName

    getElementsByTagName("...")[0]

    Берет элементы по названию блока div, p... (пример)

    document.body.innerHTML.

    document.body.innerHTML.replace(/8/g, '7'); (замена 8 на 7 подмена)

    document.body.innerHTML.style (меняет стиль)

    выводит значение, стиль в HTML

     document.location.href =

     document.location.href = (пример)

      перенаправляет со страницы что ввели или то, что взяли из формы (переменной)

    setInterval

    setInterval(function(){ ….},1000);

    Вызывает функцию с заданной периодичностью многократно. (пример)

    setTimeout

    см. setInterval

    Схожее с setInterval, но вызывает код один раз. (пример)

     

     

     

     

     

     

    Сервисные (исполнительные) элементы

    <script type="text/javascript">

    </script>

     

     

    Обрамляем JS

    typeof x

    document.getElementById("demo1").innerHTML = typeof x;

    Х – переменная, для которой хотим узнать тип. Его выводим для нашего случая через запрос для блока ID demo1. Блок конечно тоже должен быть в наличии, а то куда же выводить то?!

    let и var

     

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

    let x = 5;

    let x = document.getElementById("id");
    var a = document.getElementById("x").value;

    Присваиваем значение для переменной. Можно использовать присвоение через document.getElementById("id"). id - в данном случае берется скажем из формы ввода где форма расположена в document.

    if

    if (условие) {делаем}

    Условие для одного раза

    while

    Смотри if

    Тоже, что и if, только будет повторяться, пока не уйдет далее. Может зациклить машину.

    switch

    switch(i) {
      case i=0:
       ...
        break;
      case i=1:
       ...
        break;
      case i=2:
       ...
      default:
       ...
    }

    Выполняем одно из условии исходя из критерия, скажем для переменной i. Как только условие будет выполнено, то цикл перебора закончится. (пример)

    default: - если ни одно из условий не сработало.

     for

     for (let i=0; i<10; i++) {что делаем}

     Применяется, как правило, для работы с массивами, перебирая от i = 0 до i<10 с шагом i++. (пример)

  • Slideshow слайдшоу для просмотра картинок на сайте (JS) (код)

     Весьма часто используемое решение для сайта, когда надо поместить несколько картинок на одной площади, к тому же еще и добавить еще некой интерактивности, это применение слайд-шоу. То есть перелистывания картинок словно в приложении для просмотра. Однако реализуется это все в рамках открытой страницы браузера. Здесь естественно есть и плюсы и минусы, которые каждый думающий человек сразу же назовет и без нас, но дело не в этих рассуждениях, а в том, как же все это реализовать... Именно об этом и будет эта статья.

  • Блок меняющий положение JS (код) (плавающий, прилипающий при прокрутке)

     Кот тут ни при чем.... Это просто кот!
       Итак, одной из возможных задач при формировании динамичных и красочных страничек сайта может быть использование блоков, которые в состоянии менять  свое положение, форму, цвет, размер. Часто такие блоки можно встретить на "надоедливых" сайтах. Поэтому перебирать с этим не надо, но если есть такая необходимость, то можно сделать что-то похожее. Сегодня я расскажу как.
     В нашем конкретном случае блок будет менять свое положение, а еще точнее уезжать сверху вниз. 

  • Вывод данных через какое-то время JS (setInterval, setTimeout) (код)

     Уже вполне привычная, но не очень приятная практика на сайтах, когда что-нибудь вылазить во время просмотра, через какое-то время. Прямо скажу, мне это не очень нравится, но это лишь частный пример, а на самом деле все то, о чем будет рассказано в этой статье можно использовать не только для таких ситуаций, но и просто для последовательного вывода информации через какое-то определенное время.
     Ну и в самом таком неординарном применении, можно даже выводить какой-то отсчет времени, если для переменной задать период обновления и ориентироваться на него. В общем давайте-ка к материалу статьи, там сейчас сами все поймете и увидите.

  • Изменение условий JS (картинка, стиль, ссылка) через какое-то время switch (код)

     Постепенно осваивая азы и переходя к большему набору оперируемых понятий, объектов в JS, я начал понимать, что возможности реализовать одно и то же может быть решена по-разному. Эта статья как раз и явилась итогом такого понимания, когда я ознакомился с оператором switch. По своему принципу его можно ассоциировать с блоком операторов if, разве что при соблюдении какого-то определенного условия он сразу будет улетать в конец блока. Это и плюс и минус, все зависит от того, какие задачи перед вами стоят.
     Не буду подробно рассказывать о этих плюсах и минусах, а лучше расскажу еще раз о функционале оператора и приведу пример его работы. А уж выводы вы сможете сделать и без меня.

  • Как запаролить, закрыть страницу паролем JS (код)

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

  • Как оформлять JavaScript в HTML

    Для того, чтобы интегрировать сценарий в html страницу, существует тег: <script> код сценария</script>. Этот тег является контейнером и его можно помещать в любую часть кода html страницы. Обычно его помещают в заглавную часть html страниц, т.е. между тегами <head> </head> . В них вставляем теги <script language=”JavaScript” type=”text/javascript”> </script> , между которыми и помещаем нужный код javascript.

    Сам javascript желательно помещать в следующую конструкцию:

    <script language=”JavaScript” type=”text/javascript”>
    <!--
    Сценарий;
    //-->
    </script>
    Тогда все браузеры, которые по каким-то причинам не понимают этот сценарий, будут считать, что это обычный комментарий.

  • Как подключить Ява скрипт с сервера. Внешние скрипты JS на странице браузера

     Когда у вас есть контент на странице и к нему код, Ява скрипт, который призван управлять какими – либо опциями, выводить что-то, то само собой надо чтобы этот код был в странице. То есть его сценарий выполнялся на странице.  При этом возможно два варианта исполнения этого кода. Первый, когда сам Ява скрипт весь прописан тут же на страничке и тут же выполняется. Второй, когда скрипт тянется с сервера, а потом выполняется.
     Обычно javascript-скрипт вообще не пишут в HTML, а подключают отдельный файл с кодом. Видимо это связано с тем, чтобы не «напортачить» в скрипте через визуальный редактор, а также чтобы не грузить страничку кодом, который ни к чему при частых оперативных вмешательствах.  В общем, мало ли какие могут быть причины…

  • Как скрыть текст в статье JS (спойлер)

     Иногда бывает так, что при написании хороших и качественных материалов статья занимает уж очень много места. Это я сейчас, прежде всего, об объеме статьи по символам или словам. При этом многие из моментов статьи кому-то понятны и подробнее описывать их нет смысла, а кто-то может заинтересоваться и комментариями. В этом случае не обойтись без скрытия определенного текста, когда есть возможность прочитать комментарии, а есть возможность пропустить ненужное и изучить все лишь поверхностно весь материал.
     Так вот, именно о скрытии текста с помощью Java Script и пойдет речь в статье.
     

  • Код перенаправления по условию JS (document.location.href & window.onscroll) (код)

     Ну что, продолжая заниматься своими «грязными делишками», я добрался до изучения еще парочки правил Ява. Как уж они правильно называются мне невдомек, это я про то что я назвал правилами, но мне так самое главное, что все работает. Итак, весьма примитивный скриптик с простым условием и алгоритмом, суть его в следующем.

  • Модальное окно на JS (код)

     На сайтах для каких-то «особо важных» дел могут использоваться модальные окна, то есть такие окна, которые появляются обособленно поверх всего, а все остальное как раз чуть затемняется. Говорить о каких-то конкретных целях в этом случае не приходится, у каждого они будут свои, но факт применения таких форм на сайтах есть. И вот если перед вами стоит такая задача, да собственно и для моих последующих изысканий, была создана эта статья. В ней будет приведена одна из форм модального окна, работающего по принципу, который я уже озвучил.

  • Отсчет времени Java Script (до даты, пребывания на странице, обратный отсчет)

     Десять, девять,... два, один, старт! Именно так нам кажется должен осуществляться обратный отсчет, о котором я вам и расскажу сегодня. Так вот, на сайте где-нибудь, и для чего-нибудь в обязательном порядке нужен обратный отсчет, дабы информировать посетителя о каком-то событии, будь то распродажа или ее завершение. Если вам необходимо внедрить в ваш сайт такую форму отсчета, то это легко сделать с помощью небольшого Ява скрипта.

  • Печатающийся текст (бегущая строка) Java Script

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

  • Подмена значений, текста, символа в HTML с помощью Java script (оператор replace) (код)

     В одной из статей я уже как-то рассказывал о возможности скрыть текст. Опция весьма полезная, если скажем у нас есть значительный объем текста в виде справочной информации. Кто-то захочет его прочитать, кто-то не будет. Однако возможность его вывести есть и есть возможность не читать его. Все это здорово интерактивно и все в таком духе.
     На самом деле я не зря здесь провел подобную аналогию, так как в этой статье будет нечто похожее, но реализовано по-другому. Если первоначально описанный мною вариант заключался в подмене стилей, с чем Ява скрипт справляется на ура, то в этом случае будет происходит содержимого HTML прямо на странице.  В итоге, можно получить тот же самый результат, если скажем какую-то фразу, знак,символ, слово, просто подменить на целый абзац или наоборот.

  • Получение результата из формы по определенному условию JS (код)

     Название этой статьи может показаться для многих набором слов, особенно для тех, кто зашел сюда и вовсе случайно, однако по-простому, по-другому и в то же время всеобъемлюще про то, что я решил написать, не сказать. Ну и ладно, ближе к теме.
    Итак, в статье я рассмотрю пару вариантов того, как из простой формы на странице получить значение для Java Script, затем обработать его по определенному условию, и после выдать конечный логический результат.

  • Формы с вычислениями JS (код)

     Хотелось бы сделать статью заметку, которая быть может когда-то перерастет во что-то большее, но пока она лишь будет статейка о самых простых вычислительных операциях с помощью формы работающей на Java Script.
    По факту это обычный калькулятор, где можно будет ввести цифровые значения и получить вычисления. Конечно, самой большой ценностью может стать подсчет довольно сложных, но типовых формул. То есть подставляем значения и получаем желаемый результат. Как-то так. Собственно многие из вас и сами будут в состоянии развить мысли в нужно направлении.