[UPGRADE][Blogger] Robimy system kategorii cz.1 - kategorie i podkategorie

Jak widać na przykładzie tego bloga, istnieje tutaj system kategorii i podkategorii.
Blogger domyślnie nie oferuje niczego takiego, więc musiałem wymyślić taki system po swojemu i posłużyć się do tego kilkoma trickami. W tutorialu tym opiszę krok po kroku jak tego dokonałem. Wiedza zdobyta tutaj pozwoli Wam na przygotowanie własnego systemu kategorii i podkategorii na stronie Bloggera. Opiszę dokładnie cały kod jaki napisałem na potrzeby tej strony i pokażę jak wykorzystać to w praktyce. Do całości wykorzystamy tutaj javascriptową bibliotekę jQuery oraz kanały RSS jakie Blogger generuje dla swoich postów. Oczywiście nasze posty oznaczać będziemy odpowiednimi etykietami, tak aby trafiały do odpowiednich kategorii.
Zaczynamy

Na samym początku zdefiniujmy kilka zmiennych i tablic.

var counter = []; // tablica zawierająca ilość postów w podkategorii
 
var counterCats = [];  // tablica zawierająca ilość postów w kategorii
 
var counterIndex = 0;  // index aktualnie przetwarzanej podkategorii
 
var counterCatIndex = 0;  // index aktualnie przetwarzanej kategorii
 
var subcategories = [];  // tablica z listą podkategorii
 
var categories = [];  // tablica z listą kategorii nadrzędnyh
 
var global_label = 'start';  // globalna zmienna przechowywująca aktualną kategorię
 
var global_sublabel = 'start';  // globalna zmienna przechowywująca aktualną podkategorię
 
var menuRendered = false;  // zmienna pomocnicza do renderowania menu
 

Będziemy musieli ręcznie zdefiniować listę wszystkich kategorii i podkategorii. Wykorzystamy do tego tablice w Javascripcie.
Naszą strukturę podzielimy na kategorie nadrzędne - categories[] - oraz podkategorie się w nich zawierające - subcategories[].

Na pierwszy ogień zdefiniujemy tablicę z kategoriami - co musi się w nich zawierać?
Przede wszystkim tytuł kategorii oraz pole przechowywujące ilość postów w danej kategorii i jej podkategoriach. Kluczem/indexem tablicy będzie natomiast NAZWA ETYKIETY postu. Muszę tutaj zaznaczyć, że w tutorialu tym będę używał przemieniennie zwrotów ETYKIETA oraz KATEGORIA i PODKATEGORIA, gdyż nasze kategorie to tak naprawdę etykiety.
Naszą tablicę zdefiniować powinniśmy w kolejności takiej w jakiej elementy pojawią się w menu - tutorial o tym jak stworzyć dynamiczne menu i podczepić je pod kod z kategoriami znajduje się w następnym artykule.

Tworzymy strukturę tablic

Tablicę tworzymy wg następującego schematu:

categories[NAZWA_ETYKIETY] = new Array(TYTUŁ_ETYKIETY, ŁĄCZNA ILOŚĆ POSTÓW) 

Dla ułatwienia sobie sprawy po komentarzu dajemy tutaj numer elementu począwszy od 0 - przyda to się nam na później, gdyż jak widać klucze tablicy to nazwy etykiet, a w kilku miejscach potrzebować będziemy ich wartości liczbowych jako indeksu elementów w tablicy. Zdefiniujmy zatem naszą tablicę z kategoriami:

categories['PHP'] = new Array('PHP5', 0); //0
 
categories['HTML5_CSS3'] = new Array('HTML5/CSS3', 0); //1
 
categories['JAVASCRIPT'] = new Array('Javascript', 0); //2
 
categories['APACHE2'] = new Array('Apache 2', 0); //3
 
categories['SQL'] = new Array('SQL', 0); //4
 
categories['XML_JSON_SOAP'] = new Array('XML/JSON/SOAP', 0); //5
 
categories['GIT_SVN'] = new Array('Git/SVN', 0); //6
 
categories['API'] = new Array('API', 0); //7
 
categories['UPGRADE'] = new Array('Upgrade', 0); //8
 
categories['OTHER'] = new Array('Różności', 0); //9

Kategorie główne już mamy, teraz czas na podkategorie, ponownie jak w poprzednim wypadku, tutaj też utworzymy tablicę, z kluczem jako NAZWA ETYKIETY, ale o trochę innej strukturze:

subcategories[NAZWA_ETYKIETY] = new Array(INDEX_NUMERYCZNY, INDEX_ETYKIETY_NADRZĘDNEJ, TYTUŁ_ETYKIETY);

gdzie:

• NAZWA_ETYKIETY, to etykieta tak jak widzi ją Blogger,
• INDEX_NUMERYCZNY - index elementu tablicy, który przyda nam się później, warto zauważyć, iż przy każdym dodaniu nowego elementu musimy zwiększyć nasz indeks o 1,
• TYTUŁ ETYKIETY - tytuł etykiety do wyświetlenia na stronie

subcategories['PHP_podstawy'] = new Array(0, 0, 'Podstawy');
 
subcategories['PHP_zaawansowane'] = new Array(1, 0, 'Zaawansowane');
 
subcategories['PHP_OOP'] = new Array(2, 0, 'Programowanie obiektowe');
 
subcategories['PDO'] = new Array(3, 0, 'PDO i bazy danych');
 
subcategories['PHP_wyrazenia_regularne'] = new Array(4, 0, 'Wyrażenia regularne');
 
subcategories['PHP_bezpieczenstwo'] = new Array(5, 0, 'Bezpieczeństwo');
 
subcategories['Smarty'] = new Array(6, 0, 'Smarty');
 
subcategories['ZendFramework'] = new Array(7, 0, 'Zend Framework');
 
subcategories['Symfony2'] = new Array(8, 0, 'Symfony2 Framework');
 
subcategories['Composer'] = new Array(9, 0, 'Composer');
 
subcategories['Propel'] = new Array(10, 0, 'Propel');
 
subcategories['Doctrine'] = new Array(11, 0, 'Doctrine');
 
subcategories['cURL'] = new Array(12, 0, 'cURL');
 
subcategories['GD2'] = new Array(13, 0, 'GD2');
 
subcategories['PHP_wzorce_projektowe'] = new Array(14, 0, 'Wzorce projektowe');
 
subcategories['PHP_pozostale'] = new Array(15, 0, 'Pozostałe');
 
 
 
subcategories['HTML5'] = new Array(16, 1, 'HTML5');
 
subcategories['CSS3'] = new Array(17, 1, 'CSS3');
 
 
 
subcategories['jQuery'] = new Array(18, 2, 'jQuery');
 
subcategories['Prototype'] = new Array(19, 2, 'Prototype');
 
subcategories['AJAX'] = new Array(20, 2, 'AJAX');
 
 
 
subcategories['APACHE2_httpd'] = new Array(21, 3, 'Konfiguracja - httpd.conf');
 
subcategories['APACHE2_htaccess'] = new Array(22, 3, 'Pliki .htaccess');
 
subcategories['APACHE2_rewrite'] = new Array(23, 3, 'Moduł RewriteEngine');
 
subcategories['APACHE2_vhosts'] = new Array(24, 3, 'Wirtualne hosty - vhosts.conf');
 
subcategories['APACHE2_auth'] = new Array(25, 3, 'Uwierzytelnianie / SSL');
 
 
 
subcategories['MySQL'] = new Array(26, 4, 'MySQL');
 
subcategories['SQL_zaawansowane'] = new Array(27, 4, 'Złożone zapytania');
 
 
 
subcategories['XML'] = new Array(28, 5, 'XML');
 
subcategories['JSON'] = new Array(29, 5, 'JSON');
 
subcategories['SOAP'] = new Array(30, 5, 'SOAP');
 
 
 
subcategories['GIT'] = new Array(31, 6, 'Git');
 
subcategories['SVN'] = new Array(32, 6, 'Subversion');
 
 
 
subcategories['API_Facebook'] = new Array(33, 7, 'Facebook API');
 
subcategories['API_Google'] = new Array(34, 7, 'Google API');
 
subcategories['API_Allegro'] = new Array(35, 7, 'Allegro API');
 
 
 
subcategories['Blogger'] = new Array(36, 8, 'Blogger');
 
subcategories['OTHERS'] = new Array(37, 9, 'Różności');
 
 
 
subcategories['QUICKTIPS'] = new Array(38, 9, 'QuickTips');
 
 
 
subcategories['QUICKLINKS'] = new Array(39, 9, 'QuickLinks');

Mając już zdefiniowane obie tablice przystępujemy do napisania kodu, który je obsłuży.
Na początek przygotujmy kilka funkcji, a następnie na samym końcu wykorzystajmy je w bloku $(document).ready() biblioteki jQuery.

Stwórzmy kilka funkcji

Pierwsza z naszych funkcji odpowiadać będzie za pobieranie NAZWY ETYKIETY kategorii za pomocą indeksu w tablicy. Jako argument przyjmować będzie liczbowy indeks.

function getCatLabel(catIndex)
 
{
 
 var cIndex = 0;
 
   for(cKey in categories)
 
   {
 
    if(catIndex == cIndex) return cKey;
 
    cIndex ++;
 
   }
 
}

Kolejna to odwrotność powyższej - odpowiadać będzie a pobieranie indeksu kategorii w tablicy za pomocą NAZWY ETYKIETY. Jako argument przyjmować będzie nazwę etykiety.

function getCatIndex(catKey)
 
{
 
 var cIndex = 0; a
 
   for(cKey in categories)
 
   {
 
    if(cKey == catKey) return cIndex;
 
    cIndex ++;
 
   }
 
}

Przygotowanie indeksu dla tablicy

Poniższa funkcja niejako odwraca tablicę asocjacyjną z etykietami, jednocześnie ją indeksując i pobierając klucz starej tablicy jako wartość, Działać to będzie na zasadzie:

nowa_tablica[j] = KLUCZ     ===     stara_tablica['KLUCZ'] = WARTOŚĆ, gdzie j = 0,1,2,3....

function arrayInverse(obj) {
 
 
 
  var new_obj = [];
 
  var j = 0;
 
  for(i in obj)
 
  {
 
   new_obj[j] = i;
 
   j++;
 
  }
 
  return new_obj;
 
}

Przygotujmy teraz specjalną tablicę, za pomocą funkcji opisanej powyżej,
w przypadku, np. etykiety PHP_wzorce_projektowe otrzymamy:

subcategories['PHP_wzorce_projektowe'] = new Array(14, 0, 'Wzorce projektowe');
 
counterNames[14] = 'PHP_wzorce_projektowe'

Odwracamy:

var counterNames = arrayInverse(subcategories);

Funkcja writeCount(label) pobierać będzie z tablicy liczbę postów z etykietą label.
Wyświetli ilość postów w nawiasie bezpośrednio w miejscu jej wywołania.
Ilość postów pobierana jest z tablicy counter[index].
Indeks etykiety przechowywany jest w tablicy subcategories[NAZWA_ETYKIETY][0], np.

subcategories['API_Facebook'] = new Array(33, 7, 'Facebook API'); 

gdzie w tym przypadku:

• API_Facebook - KLUCZ/NAZWA_ETYKIETY
• 33 - index etykiety
• Facebook API - tytuł etykiety
• 7 - index kategorii nadrzędnej, w tym przypadku:

categories['API'] = new Array('API', 0);

function writeCount(label)
 
{
 
 var sKey = parseInt(subcategories[label][0]);
 
 document.write(' (' + counter[sKey]  + ')');
 
}

Jedziemy dalej:
Funkcja, która pobiera z tablicy liczbę postów z etykietą label.
Nie wyświetla, a jedynie zwraca ilość postów.

function getCount(label)
 
{
 
 var sKey = parseInt(subcategories[label][0]);
 
 return counter[sKey];
 
}

Poniższa funkcja zostanie opisana za chwilę:

function countPosts(json) {
 
 counter[counterIndex] = json.feed.openSearch$totalResults.$t;
 
 var sLabel = counterNames[counterIndex]; // subcat label
 
 var pIndex = parseInt(subcategories[sLabel][1]); // parent index
 
 var pLabel = getCatLabel(pIndex); // parent label
 
 categories[pLabel][1] = categories[pLabel][1] + parseInt(counter[counterIndex]); 
 
 counterIndex++;
 
}

Bazowe funkcje już mamy (potem będzie ich więcej).
Na początek policzymy posty w zadanych kategoriach (oznaczonych danymi etykietami). Wykorzystamy do tego kanał RSS bloga pobierając z niego informacje o ilości postów.
Po pierwsze musimy wywołać odpowiedni kanał za pomocą specjalnego linka, zrobimy to za pomocą następującego schematu:

<script src="http://NAZWA_BLOGA.blogspot.com/feeds/posts/summary/-/NAZWA_ETYKIETY?alt=json-in-script&callback=FUNKCJA_ZWROTNA"></script>

gdzie jako NAZWA_ETYKIETY podajemy nazwę etykiety/kategorii, a jako FUNKCJA_ZWROTNA nazwę funkcji javascriptowej, która obsłuży odebrane dane.
W naszym przypadku funkcją tą jest countPosts(). Niestety napotykamy na pewne ograniczenie - nie możemy podać do nazwy funkcji żadnego swojego argumentu, a więc w jakiś sposób musimy poinformować ową funkcję z jakiej obecnie etykiety posty liczymy. Zrobimy to następującym sposobem - wykonamy pobieranie feeda ODPOWIEDNIO PO KOLEJI - tak jak nazwy etykiet występują w tablicy. Może być to niewygodne, ale jeśli wszystko wykonamy w odpowiedniej kolejności - całość zadziała poprawnie.

Przeanalizujmy co się dzieje w momencie pobrania danego feeda:
1) Wywoływana jest funkcja zwrotna countPosts():

function countPosts(json) {
 
 counter[counterIndex] = json.feed.openSearch$totalResults.$t; //a
 
 var sLabel = counterNames[counterIndex]; // b
 
 var pIndex = parseInt(subcategories[sLabel][1]); // c // parent index
 
 var pLabel = getCatLabel(pIndex); // parent label // d
 
 categories[pLabel][1] = categories[pLabel][1] + parseInt(counter[counterIndex]); // e
 
 counterIndex++; //f
 
}

a) zmienna counterIndex to index naszej tablicy z naszymi etykietami.
Rozpoczynamy od 0, a w każdym kolejnym wywołaniu tej funkcji wartość jest inkrementowana o 1 (punkt 'f')
Indeks odpowiada indeksowi tablicy z kategoriami, a więc w tym przypadku:

• counter[0] - PHP_podstawy
• counter[1] - PHP_zaawansowane
• counter[2] - PHP_OOP
• [...]

Dlatego ważne jest wywołanie feedów w odpowiedniej kolejności, tak jak etykiety występują w tablicy.

b) Do zmiennej sLabel pobierana jest nazwa (nazwa, nie pełny tutuł) etykiety podkategorii o indeksie counterIndex.
Nazwy są przechowywane w odwróconej tablicy counterNames[]:
np.

subcategories['API_Facebook'] = new Array(33, 7, 'Facebook API');

po odwróceniu:

counterNames[33] = 'API_Facebook';

c) do zmiennej pIndex pobierany jest index rodzica podkategorii, a więc indeks kategorii nadrzędnej.
Indeks rodzica podawaliśmy w tablicy:

subcategories['API_Facebook'] = new Array(33, 7, 'Facebook API');

gdzie drugi element tablicy, czyli - 7, to indeks kategorii nadrzędnej, w tym przypadku:

categories['API'] = new Array('API', 0); //7

d) do zmiennej pLabel pobierana jest nazwa etykiety kategorii nadrzędnej, za pomocą funkcji getCatLabel():

function getCatLabel(catIndex)
 
{
 
 var cIndex = 0;
 
   for(cKey in categories)
 
   {
 
    if(catIndex == cIndex) return cKey;
 
    cIndex ++;
 
   }
 
}

Powyższa funkcja pobierze nam z tablicy categories nazwę klucza, który jest wartością nazwy etykiety, tutaj categories[7] = 'API'

e) Na koniec:
 

categories[pLabel][1] = categories[pLabel][1] + parseInt(counter[counterIndex]);

 do tablicy kategorii dodajemy liczbę postów z obecnie badanej podkategorii

Pobranie ilości postów za pomocą feeda

Musimy teraz pobrać ilość postów w danych kategoriach/etykietach za pomocą generowanego przez silnik Bloggera feeda. Zrobimy to tak:

<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_podstawy?alt=json-in-script&callback=countPosts">//0</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_zaawansowane?alt=json-in-script&callback=countPosts">//1</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_OOP?alt=json-in-script&callback=countPosts">//2</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PDO?alt=json-in-script&callback=countPosts">//3</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_wyrazenia_regularne?alt=json-in-script&callback=countPosts">//4</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_bezpieczenstwo?alt=json-in-script&callback=countPosts">//5</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Smarty?alt=json-in-script&callback=countPosts">//6</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/ZendFramework?alt=json-in-script&callback=countPosts">//7</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Symfony2?alt=json-in-script&callback=countPosts">//8</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Composer?alt=json-in-script&callback=countPosts">//9</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Propel?alt=json-in-script&callback=countPosts">//10</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Doctrine?alt=json-in-script&callback=countPosts">//11</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/cURL?alt=json-in-script&callback=countPosts">//12</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/GD2?alt=json-in-script&callback=countPosts">//13</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_wzorce_projektowe?alt=json-in-script&callback=countPosts">//14</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_pozostale?alt=json-in-script&callback=countPosts">//15</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/HTML5?alt=json-in-script&callback=countPosts">//16</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/CSS3?alt=json-in-script&callback=countPosts">//17</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/jQuery?alt=json-in-script&callback=countPosts">//18</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Prototype?alt=json-in-script&callback=countPosts">//19</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/AJAX?alt=json-in-script&callback=countPosts">//20</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Konfiguracja?alt=json-in-script&callback=countPosts">//21</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/APACHE2_htaccess?alt=json-in-script&callback=countPosts">//22</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/APACHE2_rewrite?alt=json-in-script&callback=countPosts">//23</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/APACHE2_vhosts?alt=json-in-script&callback=countPosts">//24</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/APACHE2_auth?alt=json-in-script&callback=countPosts">//25</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/MySQL?alt=json-in-script&callback=countPosts">//26</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/SQL_zaawansowane?alt=json-in-script&callback=countPosts">//27</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/XML?alt=json-in-script&callback=countPosts">//28</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/JSON?alt=json-in-script&callback=countPosts">//29</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/SOAP?alt=json-in-script&callback=countPosts">//30</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/GIT?alt=json-in-script&callback=countPosts">//31</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/SVN?alt=json-in-script&callback=countPosts">//32</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/API_Facebook?alt=json-in-script&callback=countPosts">//33</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/API_Google?alt=json-in-script&callback=countPosts">//34</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/API_Allegro?alt=json-in-script&callback=countPosts">//35</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Blogger?alt=json-in-script&callback=countPosts">//36</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/OTHER?alt=json-in-script&callback=countPosts">//37</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/QUICKTIPS?alt=json-in-script&callback=countPosts">//38</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/QUICKLINKS?alt=json-in-script&callback=countPosts">//39</script>

Po pobraniu wszystkich feedów mamy już informacje o ilości postów w kategoriach i podkategoriach.

Liczbę postów w kategoriach zapisaną mamy w tablicy:

categories['NAZWA_ETYKIETY'] = new Array('TYTUŁ_ETYKIETY', ŁĄCZNIE POSTÓW); //7

Liczbę postów w podkategoriach w tablicy:

counter[INDEX_ETYKIETY];

gdzie INDEX_ETYKIETY = liczba porządkowa w tablicy, liczona od 0, np. subcategories['HTML5'] posiada INDEX = 16.
Dla poglądu wartości indexu dla danej etykiety podane są powyzej w komentarzu przez znacznikiem </script>.

Następna funkcja - addActive() dopisuje do znacznika <ul> w menu klasę wyróżniającą aktywny element. Jako parametr przyjmuje NAZWĘ_ETYKIETY, następnie porównuje, czy zmienna globalna actualLabel równa się obecnie wyświetlanej.

function addActive(labelId)
 
{
 
 var activeClass = 'active';
 
 var actuaLabel = 'PHP';
 
 
 
 if(labelId == actualLabel)
 
 {
 
  document.write(' class=' + activeClass);
 
 }
 
}

Dodatkowe funkcje

Poniżej deklaracje funkcji, które pomogą nam w pracy, w większości są to odpowiedniki tych samych funkcji dostępnych w PHP:

Rozbudowa funkcji replace() - za parametry przyjmuje tablicę:

String.prototype.replaceArray = function(find, replace) {
 
  var replaceString = this;
 
  for (var i = 0; i < find.length; i++) {
 
    replaceString = replaceString.replace(find[i], replace[i]);
 
  }
 
  return replaceString;
 
};

Rozbudowa funkcji replace() - za parametry przyjmuje tablicę - wersja oparta na wyrażeniach regularnych:

String.prototype.replaceArrayReg = function(find, replace) {
 
  var replaceString = this;
 
  var regex;
 
  for (var i = 0; i < find.length; i++) {
 
    regex = new RegExp(find[i]);
 
    replaceString = replaceString.replace(regex, replace[i]);
 
  }
 
  return replaceString;
 
};

Rozbudowa funkcji replace() - za parametry przyjmuje tablicę:

String.prototype.replaceAll = function( token, newToken, ignoreCase ) {
 
    var _token;
 
    var str = this + "";
 
    var i = -1;
 
 
 
    if ( typeof token === "string" ) {
 
 
 
        if ( ignoreCase ) {
 
 
 
            _token = token.toLowerCase();
 
 
 
            while( (
 
                i = str.toLowerCase().indexOf(
 
                    token, i >= 0 ? i + newToken.length : 0
 
                ) ) !== -1
 
            ) {
 
                str = str.substring( 0, i ) +
 
                    newToken +
 
                    str.substring( i + token.length );
 
            }
 
 
 
        } else {
 
            return this.split( token ).join( newToken );
 
        }
 
 
 
    }
 
 return str;
 
};

Poniższa funkcja usuwa tagi HTML z ciągu:

function strip_tags(input, allowed) {
 
  allowed = (((allowed || '') + '')
 
    .toLowerCase()
 
    .match(/<[a-z][a-z0-9]*>/g) || [])
 
    .join('');
 
  var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
 
    commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
 
  return input.replace(commentsAndPhpTags, '')
 
    .replace(tags, function($0, $1) {
 
      return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
 
    });
 
}

Poniższa funkcja zamienia znaczniki <br /> na znak nowej linii \r:

function br2nl(t) {
 
 return t.replace(/<br \/>/g, "\r");
 
}

Poniższa funkcja zwracająca losową liczbę INT z przedziału <min, max>:

function getRandomArbitary (min, max) {
 
    return Math.floor(Math.random() * (max - min + 1)) + min;
 
}

Poniższa funkcja sprawdza, czy dany ciąg (needle) jest częścią innego ciągu (haystack):

function strstr(haystack, needle, bool) {
 
    var pos = 0;
 
    haystack += "";
 
    pos = haystack.indexOf(needle); if (pos == -1) {
 
        return false;
 
    } else {
 
        if (bool) {
 
            return haystack.substr(0, pos);
 
        } else {
 
            return haystack.slice(pos);
 
        }
 
    }
 
}

Część 2: dynamicznie generowane menu >>