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: - если ни одно из условий не сработало.

 

 

 

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

 jQuery был создан в 2006 году Джоном Резигом. Он был разработан для поддержки несовместимости браузеров и упрощения манипулирования DOM в HTML, обработки событий, анимации и Ajax. Уже более 10 лет jQuery является самой популярной библиотекой JavaScript в мире. Однако после JavaScript 5 версии (2009 год) большинство утилит jQuery могут быть заменены на нескольких строк стандартного JavaScript.

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

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

  Еще одна прикладная и кроме того даже развивающая статья - игра. Скрипт был написан для одного из обучающих сайтов, но на его основе вполне можно сделать что-то еще. Поэтому дабы он был прибран, на всякий случай он и был размещен здесь. Сейчас более подробно расскажу что к чему и как это реализовано.
 Начать надо наверное с правил игры, а потом перейти к описанию алгоритма реализации. Здесь все просто и понятно. Это отраженно в одной строчке в самой игре, однако я чуть подробнее...

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

 Одна из возможностей обрабатывать вводимые данные из форм HTML (PHP) это получение данных из них. Смысла работать без данных нет, а существование формы без ее обработчика тоже не не очень как-то...
 Так вот, чтобы все "срослось" необходимо, как я уже видимо повторюсь, не просто вводить данные, но и их получать, забирать, ну какие там еще умные и понятные слова по этому поводу... Так вот, что относительно типа данных, то для Ява вроде как их 6, там всякие булевы, строки, символы, само собой числа, отсутствие значения (null или def) и еще какая-то там мишура. Меня будет интересовать пока числовые значения и строчные.

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

 Все что касалось изменения контента на сайте до этой статьи происходило по факту методом "бегства к лучшему" или "вытаскиванием кролика из шляпы", то есть страница просто менялась на другую, мы переходили на новую страничку вот и все... с помощью оператора document.location.href
 Или визуализацией в виде вывода текста из скрытых источников, то есть подменяли стиль на видимый (style.display = "none" заменить на style.display = "block"), также с помощью оператора задержки по времени setInterval , да мало ли еще что? Тут главное, что текст уже был на странице!
 Так вот, работа с AJAX дает новые возможности, в виде организации дополнительного запроса к серверу, потом проверки есть ли тот самый контент, что мы ищем. Если да, то получение информации от сервера и вывод контента на страницу. При этом страница остается та же, а контент расширяется за счет динамического блока, который и выводит контент на эту же страницу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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