Szybka porada: jak zmusić Internet Explorer 8 i Firefox 2 do obsługi HTML 5? (#1)

Autor wpisu: m1chu, dodany: 24.08.2010 22:38, tagi: css, javascript

Jak zmusić Internet Explorer 8 do obsługi HTML 5?

Sieć została ogarnięta szałem najnowszej, piątej wersji języka HTML. Jak to zazwyczaj bywa słabo z jej obsługą radzi sobie Internet Explorer. We wszystkich wydanych wersjach pojawia się problem z parsowaniem elementów języka HTML 5, a co za tym idzie nie ma domyślnie możliwości ich poprawnego ostylowania. Podobny problem w przeszłości występował w Firefoksie 2.

Zarys problemu

Załóżmy więc, że tworzymy nowy projekt i jesteśmy na etapie dodawania nagłówka oraz stopki dokumentu.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Obsługa HTML 5 z CSS</title>
    <style>
    body { text-align: center; margin: 0; padding: 0; font-family: Tahoma, Verdana, Arial; font-size: 11px; }
    header { font-style: italic; width: 770px; height: 70px; padding: 15px; margin: 5px auto; background-color: #FC0; text-align: left; }
    footer { font-weight: bold; clear: both; width: 770px; height: 15px; padding: 15px; margin: 5px auto; background-color: #FC0; text-align: left; }
    </style>
</head>
<body>
    <header>Nagłówek</header>
    <footer>Stopka</footer>
</body>
</html>

Nadaliśmy powyżej kilka atrybutów stylów pozycjonujących elementy oraz nadających im odpowiedni wygląd. Po przetestowaniu w Internet Explorerze i alternatywnych przeglądarkach zobaczymy jednak różne wyniki.

Wynik w Firefoksie 4.

Wynik w Internet Explorerze 8.

Internet Explorer – rozwiązanie pierwsze

Aby pozbyć się tego problemu należy do sekcji head wstawić:

<script>
document.createElement('header');
document.createElement('footer');
</script>

Internet Explorer – rozwiązanie drugie

Dla każdej wersji Internet Explorera można także dodać do dokumentu HTML (w sekcję head) zewnętrzny kod JavaScript, dzięki któremu osiągniemy wyżej opisany skutek.

<!--[if IE lt 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Firefox 2

Niespełna jeden procent internautów nadal używa drugiej odsłony popularnego lisa. Zarówno on, jak i wszystkie przeglądarki oparte na silniku Gecko pre 1.9b5 (np. Camino 1.x) posiadają błąd parsowania dzięki któremu w przypadku otwarcia nowego znacznika każdy nieznany, wcześniej otwarty zostanie automatycznie zamknięty.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Windows 7 i gadżety pulpitu – praktyczny przewodnik cz.2

Autor wpisu: batman, dodany: 24.08.2010 08:00, tagi: javascript

W poprzedniej części przewodnika opisałem najważniejsze zagadnienia związane z gadżetami pulpitu dostępnymi w systemach operacyjnych Windows Vista oraz Windows 7. W dzisiejszym oraz kilku następnych wpisach skupię się na poszczególnych elementach tej technologii. Zacznę od okien Settings oraz Flyouts. Struktura aplikacji Zanim przejdziemy dalej, należy wspomnieć nieco o strukturze aplikacji. Nie różni sie ona zbytno od struktury aplikacji internetowej. Mamy dokument główny, dokumenty dodatkowe oraz zasoby (CSS, Javascript oraz obrazki). Proponowany przeze mnie układ katalogów wygląda następująco. struktura-katalogow

Katalogi raczej nie wymagają wyjaśnienia – są przeznaczone do przechowywania obrazków, skryptów Javascript oraz plików CSS. Z kolei pliki to manifest (gadget.xml), główny dokument gadżetu (Main.html – nazwa definiowana w manifeście) oraz pozostałe dokumenty .W tym przypadku jest to tylko Settings.html, ale nic nie stoi na przeszkodzie, aby tych dokumentów było więcej. W dalszej części dzisiejszego przewodnika dojdzie jeszcze jeden plik – Flyout.html W przykładach wykorzystałem bibliotekę jQuery, dzięki której wiele czynności zostało uproszczonych, przez co kod jest bardziej czytelny. Nie jest to wymóg. Jeśli nie znacie/nie lubicie jQuery możecie skorzystać z innej biblioteki lub nie korzystać wcale. Settings Settings to nic innego jak okno ustawień. Jest ono reprezentowane przez osobny dokukent HTML, w którym powinny znaleźć się elementy formularza (pola tekstowe, checkboxy, radiobuttony itp). Nie ma konieczności stosowania przycisków, ponieważ są one dodawane automatycznie. Jeśli chcemy wykorzystać okno ustawień wystarczy, że do właściwości settingsUI obiektu System.Gadget przypisana zostanie ścieska wskazująca na plik HTML. Ścieżka może być relatywna lub bezwzględna. Przypisanie powinno nastąpić w głównym dokumencie.

System.Gadget.settingsUI = "/Settings.html";

Dodanie powyższego kodu do gadżetu spowoduje pojawienie się ikonki klucza (wyróżniona na czerwono),

kliknięcie której spowoduje otwarcie dokumentu wskazanego we właściwości settingsUI. Dokument ten zostanie zamieszczony w specjalnym oknie, zawierającym nagłówek oraz niezbędne przyciski.

W prawym górnym roku tego okna pojawi się podgląd gadżetu. Ponieważ dzisiejszy wpis poświęcony jest jedynie oknom Settings oraz Flyout, gadżet nie będzie zawierał żadnych elementów graficznych. Stąd ten biały pionowy pasek na powyższym screenie. Jak już wspomniałem, okno ustawień to nic innego jak najzwyklejszy formularz HTML. W naszym przykładzie formularz będzie zawierał jedynie jedno pole.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link type="text/css" rel="stylesheet" href="/styles/reset.css" />
  <link type="text/css" rel="stylesheet" href="/styles/global.css" />
  <script type="text/javascript" src="/scripts/jquery-1.4.2.min.js"></script>
 </head>
    <body class="settings">
  <label>Your name:</label>
  <input type="text" name="your-name" id="your-name" />
    </body>
</html>

Samo dodanie formularza oraz wskazanie go jako okno ustawień na nic się zda, jeśli chcemy przechowywać i odczytywać wprowadzone przez użytkownika dane. Na szzęście mamy do dyspozycji obiekt System.Gadget.Settings, który pozwala na zapisywanie i odczytywanie ustawień. Służą do tego cztery metody, przez ten obiekt udostępnione. Są to:

write
writeString
read
readString

Metody z przyrostkiem String służą odpowiednio do zapisania i odczytania danych tekstowych. Pozostałe typy danych powinny być zapisywane i odczytywane przez metody write oraz read. Jest to podyktowane względami wydajnościowymi. Warto mieć również na uwadze limity, które ograniczają ilość przechowywanych w ten sposób informacji. Klucze mogą mieć jedynie 1024 znaki, a przypisane im wartości 2048 znaki. W przypadku przekroczenia tych limitów, dane zostaną skrócone do maksymalnych wartości. Dane zapisywane w oknie ustawień można przechwycić w zdarzeniu onSettingsClosing obiektu System.Gadget. Przechwycenie tego zdarzenie musi nastąpić w pliku okna ustawień. W przeciwnym razie dane nie będą dostępne.

// przechwycenie zdarzenia zamykania okna ustawień
System.Gadget.onSettingsClosing = SettingsClosing;

// obsługa zdarzenia
function SettingsClosing(event)
{
 // czy zamknięcie nastąpiło na skutek kliknięcia w przycisk "OK"
 if(event.closeAction == event.Action.commit) {
  // zapisanie wprowadzonych danych
  System.Gadget.Settings.writeString("name", $("#your-name").val());
 }
}

Jeśli chcemy od razu po zamknięciu okna ustawień mieć dostęp do danych, musimy obsłużyć kolejne zdarzenie związane z ustawieniami – onSettingsClosed. Przy czym należy pamiętać, że obsługa tego zdarzenia musi – w przeciwieństwie do zdarzenia onSettingsClosing – odbyć się w głównym oknie gadżetu.

// przechwycenie zdarzenia zamknięcia okna ostawień
System.Gadget.onSettingsClosed = SettingsClosed;

// obsługa zdarzenia
function SettingsClosed(event)
{
 // odczytanie wprowadzonych danych
 var name = System.Gadget.Settings.readString("name");
 $("#entered-name").text(name);
}

Flyout Flyout jest specjalnym typem okna, które stosuje się do zaprezentowania dodatkowych informacji. Podobnie jak w przypadku okna ustawień, Flyout ma swój własny dokument HTML. Flyout jest wyświetlany w momencie ustawienia właściwości show obiektu System.Gadget.Flyout na true, a ukrywany po ustawieniu jej wartości na false.

// wskazanie pliku Flyout
System.Gadget.Flyout.file = "/Flyout.html";

$(document).ready(function() {
 $("#show-flyout a").click(function() {
  // wyświetlenie Flyout
  System.Gadget.Flyout.show = true;
  return false;
 });
});

Zamknięcie flyout odbywa się na tej samej zasadzie, przy czym kod odpowiedzialny za zamknięcie musi się znaleźć w pliku z flyout.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Glimmer – narzędzie do tworzenia animacji jQuery

Autor wpisu: batman, dodany: 22.08.2010 17:35, tagi: javascript, jquery

Jakiś czas temu na blogu MIX Online pojawił się wpis na temat narzędzia pozwalającego tworzyć animacje jQuery. Podobnie jak wy teraz, podszedłem do tematu dosyć sceptycznie i odłożyłem jego zgłębianie na później. Dzisiaj zainstalowałem to narzędzie i przeprowadziłem kilka prostych testów. Ich wynik przeszedł moje najśmielsze oczekiwania. Okazuje się, że Glimmer został dokładnie przemyślany i oprócz przyjaznego interfejsu oferuje bardzo dobre narzędzia do tworzenia animacji. Wystarczy wspomnieć o wizadrach, dzięki którym w kilka chwil można stworzyć rozwijane menu lub tooltip. Oczywiście obok gotowych animacji mamy do dyspozycji edytor, który pozwoli zaprojektować animację od początku do końca. Po zainstalowaniu i uruchomieniu Glimmera, ujrzymy ekran powitalny, z poziomu którego można stworzyć własną animację, wybrać jedną z dostępnych lub przejść do strony projektu.

Nie będę opisywał gotowych szablonów, ponieważ ich zastosowanie jest intuicyjne i sprowadza się do kilku prostych kroków. Poza tym wizardy zostały tak przygotowane, że nie wymagają dodatkowego opisu. O wiele bardziej interesujące są możliwości jakie daje edytor animacji.

Wystarczy wczytać plik HTML, zawierający poprawnie sformatowany kod, a następnie wskazać źródło zdarzenia, typ zdarzenia oraz cel. Źródłem zdarzenia może być dowolny element znajdujący się we wczytanym dokumencie. Element można wskazać po tagu (np div), klasie (.jakas-klasa) lub identyfikatorze (#identyfikator). Typem zdarzenia są wszystkie przewidziane przez jQuery zdarzenia, np click, mouseover, blur, scroll, itp. new-action

Cel wybiera się w taki sam sposób jak źródło. Po określeniu celu, należy wybrać rodzaj animacji oraz ustalić jej parametry. Np dla animacji przeźroczystości należy wybrać wartość początkową oraz końcową. Oprócz samej animacji mamy możliwość ustalenia dodatkowych parametrów, takich jak czas trwania oraz efekt przejścia. Co więcej, można wskazać animację jaka ma się wykonać po zakończeniu bieżącej.

Edytor daje możliwość określenia więcej niż jednej animacji na cel oraz więcej niż jeden cel na zdarzenie. Przy odrobienie wysiłku można stworzyć skomplikowaną animację bez napisania ani jednego wiersza w Javascript. Jeśli martwicie się o jakość wygenerowanego kodu, spieszę wyjaśnić, że kod jest poprawnie wygenerowany i nie zawiera dziesiątek zbędnych zmiennych i dziwnych operacji. Jedyne co kiepsko wygląda w wygenerowanym kodzie, to komentarz zawierający informacje niezbędne dla Glimmera. Po zakończeniu pracy można ten komentarz śmiało usunąć. Oto przykładowy kod wygenerowany przez to narzędzie (nic w nim nie zmieniałem).

//Microsoft.Glimmer.OneWay
//<AnimationCollection FilePath="C:\test.html.glimmer.js" xmlns="clr-namespace:GlimmerLib;assembly=GlimmerLib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Animation Name="ActionName1" EventType="click" Trigger="#link"><Animation.Targets><Target Name="#div" Duration="1000" Easing="linear" Callback="ActionName2"><Target.Effects><ColorEffect CSSName="color" DisplayName="Color Animation" MaxValue="1" MinValue="0" From="0" To=""darkred"" IsStartValue="False" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="True" JQueryPluginURI="effects.core.js" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="ActionName2" EventType="[none]" Trigger="{x:Null}"><Animation.Targets><Target Name="#div" Duration="1000" Easing="linear" Callback="null"><Target.Effects><RemoveHTMLEffect CSSName="#link" DisplayName="Remove HTML Effect" MaxValue="0" MinValue="0" From="0" To="0" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({1}).remove();
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation></AnimationCollection>
jQuery(function($) {
var timer;
function ActionName1(event)
{
    $("#div").animate({"color":"blue"},1000, "linear", ActionName2);
}

function ActionName2(event)
{
     $("#link").remove();
}

$('#link').bind('click', ActionName1);


});

Więcej informacji na temat Glimmera oraz przykładowe animacje znajdziecie na oficjalnej stronie projektu.

jQuery na urządzenia mobilne

Autor wpisu: batman, dodany: 13.08.2010 23:11, tagi: javascript, jquery

Ekipa odpowiedzialna za jedną z najlepszych bibliotek Javascript, powiadomiła o starcie nowego projektu – jQuery Mobile. Jego celem jest przygotowanie jQuery do poprawnego działania w przeglądarkach mobilnych. Co najważniejsze projekt ten zakłada, że nie będzie wydzielana specjalna wersja biblioteki, dzięki czemu nie trzeba martwić się o dołączenie odpowiedniej biblioteki zależnej od platformy.

Równolegle do prac nad podstawową biblioteką, trwają prace na jQuery UI. Wprowadzane zmiany mają na celu umożliwienie korzystanie z jQuery UI na większości przeglądarek mobilnych. Oprócz zmian umożliwiających wykorzystanie już istniejących kontrolek, w nowej wersji biblioteki znajdą się nowe kontrolki przygotowane specjalnie z myślą o urządzeniach przenośnych.

Wraz ze zmianami w podstawowej bibliotece oraz UI, pojawią się modyfikacje w ThemeRoller, narzędziu do tworzenia dedykowanych stylów. Programiści tworzący mobilne wersje stron będą mogli w kilka chwil dopasować wygląd kontrolek do aktualnie tworzonych stron.

źródło: blog.jquery.com

Windows 7 i gadżety pulpitu – praktyczny przewodnik

Autor wpisu: batman, dodany: 06.08.2010 21:45, tagi: javascript

Wraz z nadejściem Windows Vista Microsoft udostępnił użytkownikom swojego systemu operacyjnego gadżety pulpitu. Są to niewielkie aplikacje umieszczone na pasku nazwanym Windows Sidebar. Następca Visty – Windows 7 – usunął pasek, dzięki czemu gadżety stały się czymś więcej niż ładną ikonką po prawe stronie ekranu. Jako przykładowe gadżety można wymienić kalendarz, notatnik, zegar, podręczny czytnik RSS, czy też monitor zasobów komputera. Jak widać zastosowanie tych aplikacji idealnie pasuje do ich nazwy. Niemniej czasami są bardzo pomocne, ponieważ oferują szybki dostęp do konkretnych informacji.

W jakiej technologii tworzone są gadżety?

Jeśli myślicie, że do tworzenia gadżetów będzie wam potrzebne Visual Studio oraz znajomość C#, to jesteście w błędzie. Podstawową technologią w jakiej tworzy się gadżety jest Javascript. Za wygląd odpowiada HTML oraz CSS. Gadżety renderowane są tak samo jak strony internetowe, a do renderowania wykorzystany jest silnik przeglądarki Internet Explorer. Dzięki temu mamy możliwość korzystania z ActiveX, a ponieważ gadżety nie są uruchamiane w kontekście strony internetowej, nie ma zastosowania reguła tej samej domeny podczas korzystania z AJAXa. Co więcej, w gadżetach można korzystać z popularnych bibliotek Javascript (np z jQuery) oraz z Flasha. Niestety nie miałem okazji przetestować Silverlighta. Podobnie jak ma to miejsce w Adobe AIR (dla programistów Javascript), jest tylko jedno środowisko, w którym uruchamiane są gadżety. Jest to o tyle ważne, że nie trzeba martwić się o zgodność z różnymi przeglądarkami.

Struktura gadżetu

W minimalnej wersji gadżet składa się jedynie z dwóch plików – manifestu oraz pliku HTML stanowiącego treść gadżetu. Do tego zestawu można dodać pliki CSS, Javascript, grafiki oraz kolejne pliki HTML. Nic nie stoi na przeszkodzie, aby pliki umieszczać w katalogach. Po zakończeniu prac nad gadżetem należy spakować wszystko jako archiwum zip i zmienić jego rozszeżenie na .gadget. W takiej postaci możemy upublicznić nasz gadżet.

Tworzenie gadżetu

Tworzenie gadżetu rozpoczynamy od stworzenia w folderze

C:\Users\batman\AppData\Local\Microsoft\Windows Sidebar\Gadgets,

gdzie batman będzie waszą nazwą użytkownika, katalogu o nazwie Test.gadget. Ważne jest, aby pamiętać o dodaniu przyrostka (sufiksu) .gadget.

Wewnątrz katalogu tworzymy dwa pliki: gadget.xml oraz Test.html. Plik gadget.xml jest manifestem i zawiera wszystkie niezbędne informacje o naszym gadżecie. Manifest w pełnej wersji wygląda następująco

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
	<name>Test Gadget</name>
	<namespace>my.gadgets</namespace>
	<version>1.0.0.0</version>
	<author name="Maciej batman Wilgucki">
		<info url="wilgucki.pl" text="My site" />
		<logo src="logo.png" />
	</author>
	<copyright>© wilgucki.pl</copyright>
	<description>My Test Gadget</description>
	<icons>
		<icon height="48" width="48" src="icon.png" />
	</icons>
	<hosts>
		<host name="sidebar">
			<base type="HTML" src="Test.html" />
			<permissions>Full</permissions>
			<platform minPlatformVersion="1.0" />
			<defaultImage src="icon2.png" />
			<autoscaleDPI />
		</host>
	</hosts>
</gadget>

Poszczególne węzły oznaczają:

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zrozumieć JavaScript

Autor wpisu: sokzzuka, dodany: 25.07.2010 13:49, tagi: javascript, php

Rozmawiając ze znajomymi, którzy również są webdeveloperami, zauważyłem, że JavaScript jest jednym z najbardziej znienawidzonych języków. Jest kilka tego powodów, najważniejsze z nich to brak jednolitej obsługi w w przeglądarkach internetowych oraz brak klas. Pierwszy powód jest bezdyskusyjny, chociaż można zauważyć, że z upływem czasu jest coraz lepiej i minęły już te dni gdy pisało się kod osobno dla każdego browsera. Obsługa JavaScriptu jest coraz lepsza wśród przeglądarek i nawet Microsoft wziął się na poważnie do roboty z IE9. Natomiast argument o braku klas w Javascripcie uważam za trochę chybiony i wynikający z braku wiedzy o modelu obiektowym jaki został zaimplementowany w tym języku. Javascript jest językiem obiektowo-funkcyjnym. Wszystko w Javascripcie jest obiektem łącznie z funkcjami. Fakt, że w Javascripcie nawet funkcje są obiektami czyni z niego język funkcyjny. Z elementów języka funkcyjnego posiada on również domknięcia i funkcje anonimowe co wynika bezpośrednio z tego, że funkcje są obiektami. Kilka linijek kodu by to dowieść:

 
//funkcja nazwana
 
function foo(){
    return 1;
}
 
console.log(foo);
//wyswietli 'foo()'
 
//funkcja anonimowa przypisana do stalej - stala zmienna ktorej wartosci nie mozna zmienic(immutable)
const bar = function(){
    return 1;
}
 
console.log(bar);
//zwraca 'function()'
 
const b = 1;
//zwroci exception redeclaration of const b
 
//funkcja ktora zwraca obiekt funkcji
function baz(){
    return function(){
        return 1;
    };
}

Wracając do naszych klas, należałoby się najpierw zastanowić czym jest klasa ? W językach o „tradycyjnym” modelu obiektowym (php, java, c++), klasa jest szablonem z którego tworzone są egzemplarze obiektów (instancje). Obiekty te mają ten sam sposób zachowania (współdzielą metody), różnią się jedynie wewnętrznym stanem (właściwości). Tak naprawdę są to języki zorientowane na klasy a nie na obiekty, żeby stworzyć jakikolwiek obiekt, trzeba najpierw zdeklarować klasę. W Javascripcie, dwa obiekty są tej samej klasy jeżeli mają ten sam konstruktor (prototyp).

//konstruktor klasy foo
function foo(){
    this.a = 'a'
    this.b = 'b'
}
 
var a = new foo();
var b = new foo();
console.log(a instanceof foo);
//zwroci true
console.log(b instanceof foo);
//zwroci true

Fakt ten wiążę się również z mechanizmem dziedziczenia. Jeżeli chcemy by klasa bar dziedziczyła z klasy foo to znaczy to nie mniej nie więcej tyle, że konstruktor klasy bar powinien być wywołany po konstruktorze klasy foo. Wszystko wyjaśni poniższy przykład:

//konstruktor klasy foo
            function foo(){
                this.a = 'a'
                this.b = 'b'
            }
            //konstruktor klasy bar
            function bar(){
                this.c = 'c'
                this.d = 'd'
            }
	    //konstruktor klasy baz
            function baz(){
                this.e = 'e'
                this.f = 'f'
            }
 
            //bar dziedziczy z foo
            bar.prototype = new foo();
            //baz dziedziczy z bar
            baz.prototype = new bar();
 
            x = new baz();
            console.log(x);
            console.log(x instanceof foo);

Jest to mechanizm pojedynczego dziedziczenia, jak wiadomo wielodziedziczenie jest problematyczne i w większości języków zrezygnowano z niego. Natomiast Javascript dzięki swojej funkcyjności pozwala na elastyczne komponowanie obiektów z różnych funkcji. Można np. wsiąść metodę z jednego obiektu, bądź globalnego konstekstu i przypisać ją do jakiejś klasy bądź obiektu. W Javascripcie zmienna „this” zawsze odnosi się do aktualnego kontekstu. Przykład:

//funkcja foofoo
            var foofoo =  function(){
                return this.a;
            };
            //konstruktor klasy foo
            function foo(){
                this.a = 'a'
                this.b = 'b'
 
                this.foofoo = foofoo;
            }
            //konstruktor klasy bar
            function bar(){
                this.c = 'c'
                this.d = 'd'
                this.a = 'g';
 
                this.foofoo = foofoo;
            }
            x = new bar()
            console.log(x.foofoo());
            //zwroci 'g'
            z = new foo()
            console.log(z.foofoo());
            //zwroci 'a'

Jedną z rzeczy, którą zarzuca się JavaScriptowi jest brak enkapsulacji. Jest to oczywiście nieprawda – JS posiada enkapsulacje ale realizowaną w inny sposób. Jak już wcześniej wspomniałem między wierszami, istnieje coś takiego jak kontekst wywołania funkcji. Każda funkcja anonimowa jest też domknięciem (closure) i pamięta kontekst swojego utworzenia, więc jeżeli w konstruktorze zadeklarujemy zmienną słowem kluczowym var, to metoda obiektu ją zapamięta. W ten sposób realizuje się enkapsulacje. Przykład:

//konstruktor klasy foo
            function foo(){
                this.a = 'a'
                this.b = 'b'
 
                var privVar = 'a';
 
                this.bar = function(){
                    return privVar;
                }
            }
 
            z = new foo()
            console.log(z.privVar);
            //zwroci undefined
            console.log(z.bar());
            //zwroci 'a'

Ostatnią sprawą jaką chciałbym poruszyć są Singletony. W językach zorientowanych na klasy trzeba uzywać metod statycznych i innych trików. Natomiast w JS wystarczy zadeklarować anonimowy obiekt przypisany do globalnej zmiennej:

          Singleton = {
                a: 'a',
                b: 'b',
                c: function(){
                    return this.a;
                }
            }
 
            console.log(Singleton.c());

Mam nadzieje, że ten artykuł przyczyni się chociażby w jakimś stopniu do zrozumienia JS, który jest przez wielu wyklęty tak naprawdę tylko ze względu na swoją odmienność.

Wszystkie przykłady testowałem na Firefoxie 3.6.6 + Firebug. Jak zwykle czekam na feedback i wszelkie pytania .

JavaScript, jQuery i Uploadify - odłamkowy!

Autor wpisu: eRIZ, dodany: 23.07.2010 14:02, tagi: jquery, javascript, php

Przyznam, że już dawno nie miałem takiej zagwozdki, jak ta, która spotkała mnie przez ostatnie 3 dni.

Zaczął mnie - delikatnie mówiąc - irytować fakt, iż na maila lecą czasem załączniki 40 MiB, więc postanowiłem napisać na potrzeby teamu małą aplikację, która miała:

zautoryzować użytkownika (to nie *share, że wszyscy mają mieć dostęp)
ułatwić wybór i upload
przyjąć pliki na serwerze i dać znać, komu trzeba

Coś podobnego już działa, jednak to wybitna prowizorka - najprostszy formularz i jedno pole. Ot, filozofia. Ale potrzebne jest coś, co działa trochę lepiej i nie zraża interfejsem.

Teoria fajna?

« < 24 - 25 - 26 - 27 - 28 > »

Agregowane blogi

Menu

Archiwum

Tagi

Statystyki

Szybka porada: jak zmusić Internet Explorer 8 i Firefox 2 do obsługi HTML 5? (#1)

Autor wpisu: m1chu, dodany: 24.08.2010 22:38, tagi: css, javascript

Zarys problemu

Internet Explorer – rozwiązanie pierwsze

Internet Explorer – rozwiązanie drugie

Firefox 2

Windows 7 i gadżety pulpitu – praktyczny przewodnik cz.2

Autor wpisu: batman, dodany: 24.08.2010 08:00, tagi: javascript

Glimmer – narzędzie do tworzenia animacji jQuery

Autor wpisu: batman, dodany: 22.08.2010 17:35, tagi: javascript, jquery

jQuery na urządzenia mobilne

Autor wpisu: batman, dodany: 13.08.2010 23:11, tagi: javascript, jquery

Windows 7 i gadżety pulpitu – praktyczny przewodnik

Autor wpisu: batman, dodany: 06.08.2010 21:45, tagi: javascript

Zrozumieć JavaScript

Autor wpisu: sokzzuka, dodany: 25.07.2010 13:49, tagi: javascript, php

JavaScript, jQuery i Uploadify - odłamkowy!

Autor wpisu: eRIZ, dodany: 23.07.2010 14:02, tagi: jquery, javascript, php