|
Września 2009
|
Wpisał %s Patryk yarpo Jar
|
wtorek, 22 września 2009 19:03
Java Script
/ Artykuły JS
|
|
Stos jest strukturą danych („Ostatni wchodzi, pierwszy wychodzi: Last In First Out” - LIFO), która polega na tym, że nowe dane odkładane są na wierzchołek, i tylko stamtąd można je zebrać. Można to porównać ze stosem talerzy – gdy chcesz odłożyć tam nowy talerz kładziesz go na „górę” (tu nazywa się wierzchołkiem), gdy chcesz zjąć talerz to zdejmujesz go z góry (zakładamy, że kombinujesz).
W JS stos można tworzyć abstrakcyjnie – robimy zwykłą tablicę i zmienną która wskazuje na wierzchołek. Ale... po co, skoro JS dostarcza nam gotowca :).
{codecitation}<html>
<head>
<script type="text/javascript">
function dzialanie_stosu()
{
var stos = new Array(); // stos jest zwykłą tablicą
stos.push('Ania');
stos.push('Justyna');
stos.push('Kasia');
stos.push('Elsa');
/*
aktualnie na stosie jest tak:
Elsa - to jest wierzchołek
Kasia
Justyna
Ania - to jest sam spód stosu
*/
alert(stos.toString()); // wyswietlmy sobie stos
stos.pop() // zrzucenie wierzchołka "Elsa" ze stosu
alert(stos.toString()); // Elsy nie ma :(
stos.push('Marta');
alert(stos.toString()); // na wierzchołku jest Marta
}
</script>
</head>
<body onload='dzialanie_stosu()'> </body>
</html>{/codecitation}
I wszystko ładnie działa :). Bardzo przydatne przy wielu algorytmach. Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
wtorek, 22 września 2009 19:02
Java Script
/ Artykuły JS
|
|
Kolejka jest przydatną strukturą danych (First In First Out). Polega ona na tym, że dane dodawane są na koniec, a pobierane z początku – jak kolejka w sklepie. Każdy staje na końcu, a pierwszy jest zawsze obsługiwany.
{codecitation} <html>
<head>
<script type="text/javascript">
function dzialanie_kolejki()
{
var kolejka = new Array(); // kolejka jest zwykłą tablicą
kolejka.push('Ania');
kolejka.push('Justyna');
kolejka.push('Kasia');
kolejka.push('Elsa');
/*
aktualnie w kolejce jest tak:
Elsa - to jest ostatnia pozycja w kolejce
Kasia
Justyna
Ania - to jest pierwsza pozycja w kolejce
*/
var osoba = kolejka.shift();
alert(osoba); // wyswietlmy sobę, która była pierwsza w kolejce
alert(kolejka .toString()); // Elsy nie ma :(
kolejka.push('Marta');
alert(kolejka .toString()); // Marta jest na końcu
}
</script>
</head>
<body onload='dzialanie_kolejki()'> </body>
</html>{/codecitation}
I wszystko ładnie działa :). Bardzo przydatne przy wielu algorytmach. Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
wtorek, 22 września 2009 18:37
Java Script
/ Artykuły JS
|
|
Tablice w Javascript można stworzyć na kilka sposobów:
{codecitation}var tab1 = new Array(); // wielkość liter ma znaczenie - musi być dokładnie `Array`{/codecitation}
W ten sposób stworzyliśmy nowy obiekt Array. Można podać atrybut będący rozmiarem tablicy, jednak w razie potrzeby i tak zostanie to zignorowane i będzie można dodać więcej pozycji do tablicy, niż to wstępnie zadeklarowaliśmy. Umieśćmy jakieś dane w tym naszej tablicy:
{codecitation}tab1[0] = "To jest mój napis";
tab1[1] = 2;{/codecitation}
Jeśli wcześniej programowałeś w językach takich jak C, czy Java to zdziwi cię, że w jednej tablicy można przetrzymywać zarówno ciąg znaków jak i liczby. W JS jest to jednak całkowicie normalne.
Można także umieścić te dane zaraz przy tworzeniu tablicy:
{codecitation}var ta1 = new Array("To jest mój napis", 2);{/codecitation}
Wynik będzie identyczny.
Drugi sposób na stworzenie tablicy zaczerpnięty jest z JSON-a:
{codecitation}var tab2 = [];{/codecitation}
Aby umieścić w nim nowe dane postępujemy identycznie jak w 1 kodzie.
Możemy też od razu umieścić jakieś dane podczas tworzenia tablicy:
{codecitation}var tab2 = ["To jest mój napis", 2];{/codecitation}
Oba zapisy są równoważne. Zapis drugi wg mnie jest lepszy, gdyż z moich testów wynika, że jest nieznacznie szybszy. Read more
|
|
Zmieniony ( wtorek, 22 września 2009 19:01 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
wtorek, 22 września 2009 18:22
Java Script
/ Artykuły JS
|
|
javascript jest niezwykle ekspresyjnym językiem. Istnieje w niej wiele ciekawych rozwiązań pozwalających tworszyć krótszy lub bardzeij czytelny kod. W tej poradzie pokażę dwa różne podejścia do tworzenia funkcji / metod.
Sposób 1 - tradycyjny:
{codecitation}function nazwa_funkcji_1() {
alert("nazwa_funkcji_1: Ja istnieje!");
}{/codecitation}
Jeśli kiedykolwiek tworzyłeś swoje funkcje, to z pewnością zapis ten jest ci dobrze znany. Zapis ten jest używany także w PHP. Po słowie kluczoowym function należy podać ciąg znaków spełniający odpowiednie warunki (nie może zaczynać się od liczby, nie może mieć spacji itp, i td.) po czym należy podać parę nawiasów. W nawiasach można podać argumenty, ale nie trzeba.
Drugio sposób (funkcja anonimowa) - przypisanie referencji do zmiennej:
{codecitation}var nazwa_funkcji_2 = function() {
alert("nazwa_funkcji_2: Ja istnieje!");
}{/codecitation}
Tworzymy zmienną do której przypisujemy funkcję. Ważne: funkcję, a nie wynik funkcji! Czyli za każdym razem, kiedy napiszemy nazwę zmiennej i dodamy nawiasy, zostanie wywołana funkcja, którą przypisaliśmy do zmiennej.
Obie funkcje wywołuje się tak samo:
{codecitation}nazwa_funkcji_1();
nazwa_funkcji_2(){/codecitation}
Oczywiście funkcja anonimowa może także przyjmować argumenty:
{codecitation}var nazwa_funkcji_2 = function(a, b, c) {
alert("a: " + a + "\nb: " + b + "\nc: " + c);
}{/codecitation}
Obie notacje są równoważne. Co więcej można zrobić tak:
{codecitation}function suma(a, b) {
return a+b;
}
var przyklad_referencja = suma;
var przyklad_wynik = suma(2, 2);
alert(przyklad_referencja);
alert(przyklad_wynik);{/codecitation}
Pierwszy alert wyświetli nam ciało funkcji, drugi wynik działania funkcji.
Istnieje co prawda jeszcze jeden sposób na tworzsenie funkcji - new Function(), jednak jest to sposób rzadko używany i odradzany.
Read more
|
|
Zmieniony ( piątek, 25 września 2009 23:40 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
wtorek, 22 września 2009 18:04
Java Script
/ Artykuły JS
|
|
W poradzie dotyczącej dodawania nowych metod do istniejących obiektów wspomniałęm, że da się dodawać metody do wszystkich obiektów - nie tylko do tego jednego wybranego.
Przykładowy kod:
{codecitation} String.prototype.letterSpacing = function() {
var n = this.length;
var str_result = '';
for(var i=0; i<n; i++) {
str_result += this.charAt(i) + ' ';
}
return str_result;
} {/codecitation}
W powyższym kodzie dodaliśmy nową metodą do wszystkich obiektów tworzonych według prototypu obiektu String. Dzięki temu, każdy obiekt String będzie posiadał tę metodę:
{codecitation}var oNapis1 = new String("Mój pierwszy napis");
var oNapis2 = new String("Kolejny tekst");
alert(oNapis1.letterSpacing());
alert(oNapis2.letterSpacing());{/codecitation}
Gdyby teraz do jednemu z tyhc obiektów nadpisać metodę letterSpacing:
{codecitation}oNapis1.letterSpacing = function() {
return this.toLowerCase(); // zwraca wszystko małymi literami
}
alert(oNapis1.letterSpacing());
alert(oNapis2.letterSpacing());{/codecitation}
Pierwszy alert da w wyniku to, co zakodowaliśmy w definicji letterSpacing przypisanej do prototypu obiektu String. Drugi alert wyświetli wynik działania metody nadpisanej (czyli toLowerCase()).
Zrozumienie tego początkowo nie jest łatwe, ale można się w końcu przyzwyczaić. Read more
|
|
Zmieniony ( wtorek, 22 września 2009 18:15 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
wtorek, 22 września 2009 17:44
Java Script
/ Artykuły JS
|
|
Stwórzmy sobie obiekt [String]:
{codecitation}var txt = new String('To jest mój napis');{/codecitation}
Obiekt ten posiada kilka metod (funkcji), choćby:
{codecitation}alert(txt.toLowerCase()); // małymi literami{/codecitation}
Dodajmy do niego dodatkową metodę:
{codecitation}txt.letterSpacing = function() {
var n = this.length;
var str_result = '';
for(var i=0; i<n; i++) {
str_result += this.charAt(i) + ' ';
}
return str_result;
}{/codecitation}
Oraz jej wywolanie:
{codecitation} alert(txt.letterSpacing()); {/codecitation}
Zauważ, że jeśli zaraz za tym wyświetlisz ponownie
{codecitation} alert(txt); {/codecitation}
Nadal litery są razem. Dzieje się tak dlatego, że nie zmienialiśmy this, a jedynie przysywaliśmy wszystko do str_result a potem to zwróciliśmy.
Wartym zauważenia jest też to, że jeśli dodasz teraz nowy obiekt String, to nie posiada on tej metody:
{codecitation}var nowy_txt = new String('Poszła baba na targ');
alert(nowy_txt.letterSpacing());{/codecitation}
Taki kod wywoła błąd:
{codecitation}Błąd: nowy_txt.letterSpacing is not a function{/codecitation}
Dlaczego? Dodaliśmy tę metodę dokładnie do tego jednego obiektu, nie do wszystkich obiektów String. To tak jakbyśmy nauczyli czegoś jednego człowieka. Nie możemy później wymagać, aby każdy to potrafił.
Jest jednak i na to sposób, choć o tym w innej poradzie. Read more
|
|
Zmieniony ( wtorek, 22 września 2009 18:04 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
wtorek, 22 września 2009 17:39
Java Script
/ Artykuły JS
|
|
W JS operatorem łączącym dwa stringi [ciągi znaków] jest '+'. W prostych wygląda to tak:
{codecitation} <script type="text/javascript">
var string_1 = "To jest";
var string_2 = "tekst";
alert(string_1 + ' ' + string_2);
// można oczywiście połączyć to też tak:
// alert(string_1 + string_2);
</script> {/codecitation}
W wyniku tego kodu otrzymamy alert wyświetlający: „To jest tekst”. Ktoś mógłby zapytać, po co więc ta porada? Otóż, czasem zdarza się, że nie jest tak fajnie, że łączymy tylko dwa stringi, ale chcemy także wpleść w to jaką liczbę. Niestety, jako, że w JS typ danych nie jest na sztywno przypisany do zmiennej [tak, jak np. w C czy Pascalu], to się okazuje, że często dwie liczby zamiast dodać, zostaną połączone, np:
{codecitation} <script type="text/javascript">
var liczba_1 = 5;
var liczba_2 = 2;
alert('Jacek ma ' + liczba_1 + ' jablek,\n' +
'a Agatka ma ' + liczba_2 + ' gruszki.\n' +
'Razem mają więc ' + liczba_1+liczba_2 + ' owoców!');
</script> {/codecitation}
Wynikiem działania tego skryptu będzie: „Jacek ma 5 jabłek, a Agatka ma 2 gruszki. Razem mają 52 owoce!”. Jak widać, niestety zamiast dodać skrypt je złączył – tak jakby operował na tekście. Jest kilka rozwiązań, np objęcie działań nawiasami. {codecitation} alert('Razem mają więc ' + (liczba_1+liczba_2) + ' owoców!'); {/codecitation} Innymi spotykanymi rozwiązaniami jest wprowadzenie dodatkowego działania, które nie zmienia jednak wartości. Np '*1'. Jakakolwiek liczba pomnożona razy 1, da samą siebie.
Jednak moim zdaniem najlepszym rozwiązaniem jest:
{codecitation}var suma = liczba_1+liczba_2;
var ciag_znakow = 'Jacek ma ' + liczba_1 + ' jablek,\n' +
'a Agatka ma ' + liczba_2 + ' gruszki.\n' +
'Razem mają więc ' + suma + ' owoców!';
alert(ciag_znakow);{/codecitation}
Problem wydaje się banalny, ale w wielu przypadkach może naprawdę sporo zepsuć. Nie zawsze warto skracać kod za wszelką cenę. Czasem dłuższy kod jest czytelniejszy = lepszy. Read more
|
|
Zmieniony ( środa, 12 stycznia 2011 14:21 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
wtorek, 22 września 2009 17:36
Java Script
/ Artykuły JS
|
|
Coraz większa popularnością na stronach www cieszą się rozwiązania pozwalające zmieniać jeden atrybut CSS, np. powiększanie samego tekstu na stronach informacyjnych. Zobaczmy, jak można to zrobić.
{codecitation} <a href="javascript:void(powieksz_tekst())">Większy tekst</a> {/codecitation}
A teraz kod funkcji:
{codecitation} function powieksz_tekst() {
var e = document.getElementsByTagName("p");
for (i=0; i<e.length; i++) {
e[i].style.fontSize = "1.2em";
}
} {/codecitation}
Aha, oczywiście kod, owego napisu musi wyglądać podobnie do tego:
{codecitation} <p id="napis" class="stara">Lorem ipsum dolor sit amet, consectetuer adipiscing elit(...)</p> {/codecitation}
I załóżmy, że oto kod CSS:
{codecitation} p {
font-size: 0.8em;
} {/codecitation}
Oczywiście równie dobrze, można przekazywać jako parametr nowy rozmiar tekstu, lub zrobić powiększanie/pomniejszanie wielokrotne poprzez odpowiednie z sparametryzowanie funkcji oraz zamianę '=' na '+=' [czyli operator dopisania]. Ale niech już to będzie zadanie domowe dla chętnych. Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
wtorek, 22 września 2009 17:19
Java Script
/ Artykuły JS
|
|
Zdarza się, że chcemy przebudować wygląd jakiegoś elementu na stronie w odpowiedzi na pewne działania usera. Można wtedy zmieniać pojedyncze atrybuty CSS, jednak czy nie lepiej jest przypisać całą klasę?
Oto kod w "czystej" Javie Script:
{codecitation} function zmien_klase_CSS(nazwa_nowej_klasy, element) {
var el = document.getElementById(element);
el.className = nazwa_nowej_klasy;
} {/codecitation}
A w kodzie HTML należy to wywołać mniej - więcej tak:
{codecitation}
<p>To jest przykładowy napis</p>
<p><a href="javascript:zmien_klase_CSS('nowa','napis')">Zmień klasę</a></p> {/codecitation}
Przydałby się jeszcze przykładowy kod CSS:
{codecitation} .stara {
font: normal 1em arial, sans-serif;
}
.nowa {
font: bold 2em verdana, sans-serif;
} {/codecitation}
Po złożeniu tego w jedną stronę, wszystko powinno działać jak należy. Read more
|
|
Zmieniony ( wtorek, 22 września 2009 17:35 )
|
|
|
Wpisał %s Jan Jackowicz-Korczyński
|
wtorek, 22 września 2009 07:20
Blog
/ wpisy
|
|
Przeglądarka Firefox zaimplementowała obsługe standardu WebGL.
WebGL to bazujące na JavaScripcie połączenie z API OpenGL ES 2.0 (Open Graphics Library for Embedded Systems), dzięki któremu przeglądarka może wyświetlać grafikę 3D bez konieczności instalacji specjalnych wtyczek.
Na etapie testowym pzregłądarce tzreba samemu włączyć obsługę tego mechanizmu.
Należy uaktywnić tryb konfiguracyjny przeglądarki, wpisując w pole adresu
about:config,
następnie w linii webgl.enabled_for_all_sites ustawić wartość true.
Zobacz poniżej zrzuty ekranu demonstrujące możliowści WebGL. Opublikwane yostaz na Youtube przez WolfireGames.
{youtubejw width="640" height="480"}2rpKpj6ZO9w{/youtubejw}
Read more
|
|
Zmieniony ( wtorek, 22 września 2009 07:25 )
|
|
Strona 4 z 13
<< Początek < Poprzednia 1 2 3 4 5 6 7 8 9 10 Następna > Ostatnie >>
|
English
Arabic
Bulgarian
Croatian
Czech
Danish
Dutch
Finnish
French
German
Greek
Hindi
Italian
Japanese
Korean
Norwegian
Polish
Portuguese
Romanian
Russian
Spanish
Swedish
Catalan
Filipino
Hebrew
Indonesian
Latvian
Lithuanian
Serbian
Slovak
Slovenian
Ukrainian
Vietnamese
Albanian
Estonian
Galician
Hungarian
Maltese
Thai
Turkish
Persian
Afrikaans
Malay
Swahili
Irish
Welsh
Belarusian
Icelandic
Macedonian
Yiddish
Armenian
Azerbaijani
Basque
Georgian
Haitian Creole
Urdu
Chinese (S)
Chinese (T)
