JavaScript

Optymalizowanie ilości Http requestów

Jednym ze sposobów na optymalizacje ilości requestów do strony, oraz zmniejszenie ilości przesyłanych danych z serwera jest łączenie i kompresowanie plików ze skryptami java script. Jest to możliwe gdy przeglądarka obsługuje taki format skompresowanych plików js.

› Continue reading

Tags: , ,

czwartek, Luty 24th, 2011 Apache, JavaScript, Optymalizacja, Webdevelopment 2 komentarzy

Javascript: Walidator Numeru Rachunku Bankowego (NRB)

Opis Formatu NRB

Format NRB jest to 26 cyfr zapisanych w formacie:

CC AAAA AAAA BBBB BBBB BBBB BBBB

Gdzie:

  • CC to suma kontrolna (2 cyfry),
  • AAAAAAAA to numer rozliczeniowy jednostki organizacyjnej banku (8 cyfr),
  • BBBBBBBBBBBBBBBB to numer rachunku klienta w banku (16 cyfr).

Więcej na ten temat powie nam wikipedia.

Algorytm Walidacji:

  1. Wytnij znaki nie numeryczne z ciągu wejściowego i przejdź do kroku 2.
  2. Jeżeli długość ciągu znaków wynosi 26 to przejdź do kroku 3 w przeciwnym wypadku zwróć false.
  3. Do ciągu znaków dopisz kod kraju 2521, który odpowiada kodowi literowemu PL (P - 25, L - 21).
  4. Dwa pierwsze elementy ciągu zawierającego numeru konta przenieś na koniec tego ciągu(które zawierają sumę kontrolną).
  5. Przeglądaj numer konta od końca mnożąc kolejno: ostanią cyfrę numeru konta z pierwszą wagą  zawartą w tablicy wag. Sumując wynik powyższego mnożenia.
  6. Jeżeli wynik  reszty z dzielenia przez 97  jest równy jeden to zwróć true w przeciwnym wypadku zwróć false

Implementacja funkcji sprawdzającej poprawność NRB

function NRBvalidatior(nrb)
  {
    nrb = nrb.replace(/[^0-9]+/g,'');
    var Wagi = new Array(1,10,3,30,9,90,27,76,81,34,49,5,50,15,53,45,62,38,89,17,
            73,51,25,56,75,71,31,19,93,57);
 
    if(nrb.length == 26) {
      nrb = nrb + "2521";
      nrb = nrb.substr(2) + nrb.substr(0,2);
      var Z =0;
      for (var i=0;i<30;i++) {
        Z += nrb[29-i] * Wagi[i];
      }
      if (Z % 97 == 1) {
        return true;
      }else{
        return false;
      }
 
    }else{
      return false;
    }
  }

Wywoływanie sprawdzania przy edycji pola lub wysłaniu formularza

$('form').submit(function(){
  if(NRBvalidatior($('input#nrb').val()))
  {
    return true;
  }
  else
  {
    return false;
  }
});

Tags: , , ,

wtorek, Listopad 16th, 2010 AJAX, JavaScript, jQuery Brak komentarzy

GoogleMaps + WordPress Szybki Kurs

  1. Wstęp

    Dawno nic o google maps nie pisałem zatem przedstawie wam kurs jak do statycznej strony np z kontaktem dodać mapę googla z kilkoma efektami. Ktoś pewnie zapyta: „po co? Przecież jest dokumentacja na googlemaps.com” Ja pokażę krok po kroku co i jak. Nie obraźcie się jeśli ten tutorial będzie wyglądał jak artykuł z „Komputer świata”.

  2. Pobieramy GoogleMaps API key

    1. Rozpoczynamy pracę od wejścia na stronę: http://code.google.com/apis/maps/
    2. Zgadzamy się z warunkami umowy licencyjnej i podajemy adres naszej strony:
    3. Gdy strona jest już zarejestrowana mamy dostęp do API key’a oraz do przykładowego skryptu.

  3. Piszemy Skrypt

    1. Tworzymy dwie rzeczy najpierw katalog js/ w katalogu wp-content/themes/nasztheme/ plik gmaps.js
    2. Kodujemy zdarzenie document.ready by załadować mapę.
      window.onload = function() {
      if (GBrowserIsCompatible()) {
      //Inicjalizacja mapy poprzez tworzenie obiektu
      var map = new GMap2(document.getElementById("map"));
      }else{
      alert("sorry but your browser sux hard. update it and come again!");
      }
      });
    3. Ustawiamy środek mapy i zoom
      map.setCenter(new GLatLng(35.083956, 103.710938), 4);
    4. Dodajemy kontrolki do mapy:
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
    5. Dodajemy punkt na mapie
      var lat = 0;
      var lng = 0;
      var point = new GLatLng(lat, lng);
      var marker = new GMarker(point);
      map.addOverlay(marker);
    6. Możemy jeszcze dodać dymek z opisem punktu lub adresem
      map.openInfoWindow(point, 'To jest nasz punkt!');
    7. Czyszczenie mapy z wszystkich markerów i InfoWindow odbywa się za pomocą polecenia:
      map.clearOverlays();

  4. Modyfikujemy Template

    Modyfikacja template polega na edycji pliku header.php plus ewentualnie można dodać kilka linii css w style.css
    Najpierw zostawmy wszystkie style i temu podobne
    Musimy w sekcji head dwie linie:

    <head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=TUTAJ_WSTAWIAMY_API_KEY" type="text/javascript"></script>
 <script src="<?php bloginfo('template_directory'); ?>/js/gmaps.js.php" type="text/javascript">
</script>
</head>

  5. Umieszczamy Mapkę w kontakcie

    Sprawa prosta. Publikujemy nową stronę. Nazywamy ją kontakt.

    I dodajemy do niej naszą mapkę:
    <div id="map"></div>
    Można przy okazji ją również ostylować.
    <div id="map" style="width: 100%; height: 400px;"></div>

  6. First Run

    Nim odpalimy po raz pierwszy naszą mapkę. To najpierw pamiętajmy o wrzuceniu na serwer wszystkich plików. Nie wiem czy zbyt wiele wymagam ale biorę za pewnik to że potraficie obsługiwać jakiegokolwiek klienta FTP.
    Zatem wrzucamy pliki:
    wp-content/themes/nasztheme/js/gmaps.js
    wp-content/themes/nasztheme/header.php

  7. Efekty

    Wszyscy doskonale zdają sobie z tego sprawę że strona musi być efektowna. Można też użyć cytatu:

    - Aplikacja?
    - Ma być droga i robić biiip

    No to sprawa prosta żeby zadbać o tzw. „Wow Effect” (nie mylić z Word Of Warcraft) możemy zastosować małą animację. Dla dużego odsetka klientów ten cytat jest

    Np. Jeżeli Firma ma trzy oddziały w mieście to możemy zrobić takie coś:

    1. Na starcie ładujemy logo firmy
    2. Pokazujemy siedzibę główną, wyświetlamy dymek
    3. Pokazujemy pozostałe siedziby w odstępach czasowych i wyświetlamy dymek z adresem i telefonem

    By zaimplementować taki skrypt nie potrzebujemy dużo dodatkowej wiedzy z dziedziny javascript’u. Po pierwsze musimy wiedzieć jak używać funkcji:

    window.setInterval(function() {
    //tutaj implementujemy swoją funkcje bądź wywołujemy już wcześniej zaimplementowaną
    }, 4000);
    //4000 to czas w milisekundach czyli w tym wypadku 4 sekundy.

    Za animację naszej mapy będzie odpowiadać:

    //dodajemy marker
    var marker = new GMarker(point);
    map.addOverlay(marker);
    //wyświetlamy dymek
    map.openInfoWindow(point, 'tekst o odzdziale');
    //przesuwamy mapę
    map.panTo(point);

    Gdzie point to element z tablicy gdzie zdefiniowaliśmy oddziały firmy.

    Po wyświetleniu trzeba wyczyścić mapę za pomocą:

    map.clearOverlays();

  8. Podsumowanie

    W sumie zastanawiam się czemu piszę taki tutorial, ponieważ jest gotowy plugin do wordpress’a który rozwiązuje problemy z googlemaps. Konfigurowalny z wp-admin z ładnego formularza.

    Może tylko po to by nauczyć się korzystać z narzędzi, które ułatwią nam pracę i nauczą pisać dobre javascripty. Zachęcam do prób z kodowaniem map by Googlemaps. I zapewniam że GoogleMaps API nie gryzie :)

Tags: , , , ,

piątek, Lipiec 11th, 2008 GoogleMaps, JavaScript, WordPress 5 komentarzy

Search

 

Archiwa