wejścieProjektowanie stron internetowych z javascriptem. Samouczek wideo: Nauka JavaScript
V nowoczesne projektowanie stron internetowych JavaScript to tylko niezbędny składnik. Oprócz swojej funkcjonalności JavaScript może znacznie poprawić ogólne wrażenia użytkownika, tworząc różne efekty przejścia, takie jak płynne przejścia i animacje slajdów. Dzięki otwartej architekturze Javascript nie musimy już pisać osobnych skryptów od zera. Oto 47 wtyczek JavaScript, których możesz użyć, aby poprawić komfort użytkowania i funkcjonalność witryny. Koniecznie sprawdź przykładowe witryny, które pokazują, jak korzystać z tych wtyczek.
Dwie najpopularniejsze frameworki JavaScript
Dwa najczęściej używane obecnie frameworki JavaScript to jQuery i MooTools. Spójrz na poniższą ankietę:
Wyskakujące obrazy i powiększanie
Prawdopodobnie znasz Lightbox — prosty JavaScript używany do nakładania obrazów na bieżącą stronę. Oryginalny Lightbox został wydany w 2005 roku. Od tego czasu wydano wiele skryptów o podobnej funkcjonalności, ale przy użyciu różnych podejść i bibliotek JavaScript.
Ta wtyczka jest podobna do Lightbox JS, tylko napisana w bibliotece jQuery.
Grube pudełko jest Wtyczka jQuery który jest bardzo podobny do Lightbox, z wyjątkiem większej liczby funkcji. Umożliwia wyświetlanie: jednego lub wielu obrazów, treści w tekście, treści w pływającej ramce lub treści przesyłanych przez AJAX w modelu hybrydowym.
Uwaga: Ściana Web Designer używa Thickbox do wyświetlania galerii obrazów i samouczków demonstracyjnych.
Highslide JS spełnia tę samą funkcję co Thickbox, ale posiada również efekt powiększenia, który umożliwia przeciąganie nakładki obrazu.
FancyBox to wtyczka jQuery, która została zaprojektowana w celu zastąpienia nadużywanego Lightboxu. Ma podobne funkcje, ale ładniejsze efekty przejścia (projekt w stylu Mac).
jQZoom umożliwia wyświetlanie powiększonych miniaturek. Ta technika jest powszechnie stosowana na stronach internetowych. e-commerce(patrz przykład na stronie Gap).
Galerie i pokaz slajdów
Pokaz slajdów 2! To jest klasa javascript dla Mootools 1.2 do animowania prezentacji obrazów w Twojej witrynie.
Używając mootools v1.11, ten system pokazów slajdów i galerii JavaScript pozwala tworzyć proste i płynne (technika płynnego przejścia) galerie zdjęć, pokazy slajdów, plakaty i wiele innych fajnych gadżetów na Twoją stronę internetową.
Galleria to galeria obrazów javascript napisana w jQuery. Ładuje obrazy jeden po drugim z nieposortowanej listy i wyświetla miniatury po załadowaniu każdego obrazu. Może tworzyć różne ikony, jeśli wybierzesz, przeskalujesz lub nie przeskalujesz, wyśrodkujesz lub przytniesz, aby dopasować się do marginesu ikony zdefiniowanego w CSS.
NoobSlide to klasa MooTools, która pozwala tworzyć pokazy slajdów i slidery zsynchronizowane z zegarem. Sprawdź tę stronę na demo.
Oto demo widżetu suwaka z biblioteki jQuery UI używanego do tworzenia suwaka produktu, takiego jak ten na stronie Apple - Mac.
Karuzela
jCarousel to wtyczka jQuery, która pozwala kontrolować listę elementów w poziomie lub w pionie. Elementy, które mogą być statyczną zawartością w HTML lub ładowane za pomocą (lub bez) AJAX, można przewijać do przodu i do tyłu (z animacją lub bez).
Komponent odwracania zarządza listą zawartości ( elementy HTML LI wewnątrz znacznika UL), które mogą być wyświetlane w pionie lub poziomie. Treść można przewijać w górę iw dół z animacją lub bez niej. Treść może odnosić się do statycznej treści HTML lub lista pozycji może być generowana dynamicznie w locie (z użyciem lub bez użycia AJAX).
Carousel Slideshow to dobrze znany skrypt DHTML do wyświetlania obrazów w Twojej witrynie. Wyświetla obrazy w 3D, jak karuzela.
iCarousel to darmowe narzędzie javascript typu open source do tworzenia widżetów w stylu karuzeli. Możesz także użyć iCarousel jako paska wiadomości / przewijania wiadomości lub jako galerii obrazów.
Suwak panelu
Coda Slider to wtyczka jQuery, która naśladuje efekt slajdu paneli, podobnie jak na stronie Coda.
Sliding Tabs to wtyczka Mootools 1.11 z bardzo fajnymi efektami. Jest to klon czegoś używanego przez witrynę Coda firmy Panic Software, która z kolei jest bardzo podobna do widżetu używanego przez witrynę iTunes Music Store.
Karty
jQuery Tabs to potężna i elastyczna wtyczka jQuery, która umożliwia tworzenie w pełni konfigurowalnej nawigacji w kartach (bardzo zalecane).
Kolejny świetny samouczek z jQueryForDesigners.com pokazuje, jak stworzyć podstawową nawigację w kartach za pomocą jQuery.
MooTabs to niewielka (3kb) klasa dla MooTools. Jak sama nazwa wskazuje, jego głównym celem jest pomoc w tworzeniu prostych zakładek nawigacyjnych.
Bardzo elastyczna wtyczka jQuery, która umożliwia animację podczas przewijania do dowolnej pozycji na stronie internetowej z dostosowywanymi opcjami wymazywania i szybkości przewijania.
Prosty skrypt MooTools, który umożliwia płynne przewijanie do kotwicy na stronie internetowej.
Konfigurowalna wtyczka jQuery, która wyświetla podpowiedzi — ze statyczną zawartością HTML lub AJAX.
Kolejna dobra wtyczka podpowiedzi.
Bardzo prosty skrypt jQuery wyświetlający podpowiedź i podgląd obrazu (używam go w Best Web Gallery).
Menu akordeonu
Ta wtyczka tworzy menu akordeonowe. Działa z listami zagnieżdżonymi, listami definicji lub po prostu zagnieżdżonymi elementami div.
Wtyczka Accordion może doskonale podkreślić i pokazać potrzebne treści.
Image Menu to wtyczka MooTools, która może tworzyć poziome menu akordeonowe z obrazami.
Wymiana tekstu i obrazu Flash
sIFR może zastąpić krótkie fragmenty zwykłego tekstu przeglądarki wybraną czcionką renderowaną, niezależnie od tego, czy jest ona zainstalowana w systemach użytkowników. Wykonuje swoje zadanie za pomocą kombinacji javascript, CSS i Flash.
Wtyczka jQuery, która wykona dla Ciebie funkcje sIFR.
Facelift Image Replacement to skrypt zastępujący obraz, który dynamicznie generuje reprezentację tekstu na obrazie na Twojej stronie internetowej w czcionkach, które w przeciwnym razie mogłyby być niedostępne dla odwiedzających. Wygenerowany obraz jest automatycznie wstawiany na twoją stronę internetową za pomocą JavaScript i jest widoczny we wszystkich nowoczesnych przeglądarkach
Użytkownicy, odwiedzając wszelkiego rodzaju zasoby internetowe, często natrafiają na ciekawe niestandardowe rozwiązania na nich i chcą zrobić to samo na swoich stronach. Najczęściej takie rozwiązania są związane z wykorzystaniem JavaScript.
W tym artykule przeprowadzę Cię przez JavaScript, język skryptowy do tworzenia interaktywnych stron internetowych i co możesz zrobić z JS. Przyjrzymy się przykładom użycia JavaScript i zobaczymy, jak może nam to pomóc.
Co możesz zrobić za pomocą JavaScript?
Zmień stronę, napisz na niej tekst, dodaj i usuń tagi, zmień style elementów.
Reaguj na zdarzenia: skrypt może poczekać, aż coś się wydarzy (kliknij/najedź, strona się wczytuje) i zareagować na to wykonaniem funkcji.
Na przykład, umieszczając kursor myszy nad łączem lub obrazem, możesz wyświetlić podpowiedź. Klikając myszką, możesz przełączać zawartość bloku. Po zakończeniu ładowania strony pokaż wyskakujące okienko reklamowe. Możesz zmienić wygląd strony w zależności od pory dnia.
JavaScript. Szybki start
Wykonuj żądania do serwera i ładuj dane bez ponownego ładowania strony.
Na przykład, jeśli użytkownik zostawił komentarz na stronie lub w księdze gości, komentarz ten zostanie natychmiast wyświetlony bez ponownego ładowania strony. Możesz także przesyłać pliki na serwer, jednocześnie pokazując postęp pobierania w procentach.
Ustawiaj i czytaj pliki cookie, weryfikuj dane, wyświetlaj komunikaty i wiele więcej.
Na przykład przy pierwszej wizycie na stronie użytkownikowi wyświetla się wyskakujące okienko i ustawiany jest plik cookie. A przy kolejnych wizytach w tym zasobach wyskakujące okienko nie jest wyświetlane, ponieważ plik cookie został już ustawiony.
Możesz również sprawdzić poprawność wprowadzonego e-maila, sprawdzić wpisany numer telefonu pod kątem zgodności z wymaganym formatem oraz od razu wyświetlić komunikat o poprawności lub błędności wprowadzonych danych.
Przykłady użycia JavaScript
Wykorzystanie JavaScriptu jest tak szerokie i zróżnicowane, że istnieją tysiące przykładów jego użycia, a lista wciąż nie będzie kompletna, ponieważ codziennie pisane są nowe skrypty. Jestem pewien, że widziałeś wiele poniższych przykładów na różnych stronach. A wszystko to jest zaimplementowane za pomocą JavaScript.
Oczywiście galeria przedstawiona w przykładzie nie jest jedyną. Takie galerie, jak wszystko inne, można sobie wyobrazić w setkach. A ja, żeby nie zawyżać listy w nieskończoność, podałem jeden przykład z najpopularniejszych grup skryptów.
Co nam to daje?
1. Wygodna wielopoziomowa nawigacja
Korzystanie z JavaScript pozwala tworzyć zwarte wielopoziomowe menu, wielopoziomową nawigację w paskach bocznych. Pozycje menu są otwierane przez kliknięcie lub najechanie myszą.
Wiele sklepów internetowych ma boczną nawigację rozwijaną. Rozważmy shop.by jako przykład. Wyobraź sobie, jak bardzo rozciągałby się w dół, gdyby elementy podrzędne nie wypadły po najechaniu lub kliknięciu, ale były widoczne jednocześnie!
2. Za pomocą galerii i sliderów możemy pokazać zdjęcia, zdjęcia dodatkowych rodzajów towarów, wygodnie i zwięźle uporządkować portfolio fotografa.
JavaScript. Szybki start
Naucz się podstaw JavaScript na praktyczny przykład o tworzeniu aplikacji internetowej
Galerie są szczególnie przydatne do szczegółowego przeglądania towarów w sklepach internetowych, gdy trzeba pokazać różne rodzaje towarów. Z ich pomocą możemy pokazać użytkownikowi jednocześnie wszystkie obrazy w małym bloku, udostępniając do oglądania zarówno małe, jak i powiększone obrazy.
Ile miejsca potrzeba na poniższą galerię?
3. Ostatnio w bocznych kolumnach witryn wyświetlało się wiele widżetów. Są to widżety dla popularnych sieci społecznościowych, kategorii, archiwów postów, kalendarzy, ostatnich komentarzy na blogu, popularnych postów i wielu innych.
Należy zauważyć, że na wielu stronach niektóre widżety można po prostu usunąć, ponieważ nie mają sensu, ale zajmują miejsce.
Ale co, jeśli nadal potrzebujesz kompaktowo zmieścić wiele widżetów?
Tu na ratunek przychodzi rozwiązanie JavaScript z „zakładkami”.
Z ich pomocą zmieścisz wszystkie widżety w bocznych kolumnach strony. Dla lepszej percepcji możesz pogrupować widżety w „karty”.
Na przykład możesz umieścić widżety mediów społecznościowych w jednej „karcie”, kategorie i archiwa w drugiej i tak dalej. Pozwoli to zaoszczędzić miejsce i sprawi, że strona będzie bardziej przyjazna dla użytkownika.
4. Używając JavaScript, możesz również znacznie ulepszyć stronę kontaktową swojej witryny lub witryn swoich klientów.
osadzać podpowiedzi w polach formularzy;
sprawdzać dane wprowadzone w polach formularzy i wyświetlać komunikaty o błędach;
przesłać dane formularza bez przeładowywania strony;
umieść mapę z trasą.
5. Osobom zamieszczającym na stronie dane tabelaryczne bardzo przydatne będzie sortowanie danych w tabeli.
6. Osobom, które zamieszczają na stronie jakiekolwiek statystyki w postaci wykresów i wykresów, bardzo przyda się możliwość tworzenia interaktywnych wykresów i wykresów w JavaScript.
Ponadto, za pomocą JavaScript, możesz wykonać na stronie różnego rodzaju efekty - takie jak płynne przesuwanie elementów, ich ruch, pojawianie się i wygaszanie oraz wszystko, co wystarczy Twojej wyobraźni.
Wszystko to może sprawić, że strona będzie bardziej przyjazna dla użytkownika, bardziej interaktywna, bardziej technologiczna.
Wniosek
Jak widać, zakres JavaScript jest bardzo szeroki. Są to galerie, suwaki i zakładki oraz wszelkiego rodzaju elementy interaktywne, mapy i grafiki, praca z formularzami i wiele, wiele więcej.
Myślę, że każdy może znaleźć przydatne wykorzystanie JavaScript dla siebie i używać go na swoich stronach lub na stronach swoich klientów.
Mam nadzieję, że spodobał Ci się artykuł i dowiedziałeś się z niego o nowych funkcjach, które można zaimplementować dzięki JS.
Czy używasz JavaScript w swoich witrynach? Jakie są Twoje główne trudności w korzystaniu z JavaScript?
Daj nam znać w komentarzach do artykułu.
JavaScript. Szybki start
Poznaj podstawy JavaScript na praktycznym przykładzie budowania aplikacji internetowej
Resource Creative Bloq opublikował materiał, w którym jego autorzy podzielili się z czytelnikami najlepszymi, ich zdaniem, przykładami wykorzystania JavaScript do tworzenia witryn. Procesor wybrał 30 najciekawszych zasobów.
1. Portfolio Mike'a Coosa
Portfolio projektanta stron internetowych Mike'a Kus zostało zaprojektowane w sposób „czysty i dyskretny”, piszą redaktorzy Creative Bloq. Łączy duże obrazy z prostymi elementami interfejsu użytkownika.
„Myślę o swojej pracy jak o marce. Nie ma potrzeby dodawać do mojej strony dodatkowe elementy projekt ”- mówi Koos.
Portfolio Kus jest równie łatwe w nawigacji na wszystkich typach ekranów – zaznacza, że to był najtrudniejszy do osiągnięcia efekt. Każdy z projektów projektanta jest reprezentowany przez obraz lub fotografię - tak, że użytkownik chce dowiedzieć się więcej o pracy.
2. Witam poniedziałek
Strona agencji kreatywnej Hello Monday przeszła znaczące zmiany – zauważają autorzy artykułu. Ogromna praca została wykonana przez programistów firmy. Udało im się uczynić interfejs przyjaznym dla użytkownika.
Stara strona agencji Hello Monday
Teraz strona zawiera przykładowe zamówienia już zrealizowane przez agencję - każdy projekt ma swoją własną stronę, która opisuje jego historię, co daje użytkownikowi głębsze zrozumienie tego, czym zajmuje się Hello Monday.
Zaktualizowana strona internetowa Hello Monday
„Staraliśmy się odejść od schematu tego, jak powinna wyglądać witryna agencji kreatywnej”, mówi Katie Hertel, kierownik projektu przeprojektowania strony Hello Monday. Dla autorów materiału strona jest bardzo atrakcyjna i responsywna, co ułatwia organizacja projektów na stronie głównej: jest ona automatycznie uzupełniana o nowe prace agencji podczas przewijania w dół.
3. Multeor
Multeor to gra online dla wielu graczy napisana w JavaScript przy użyciu elementu płótna HTML5. Zaprojektowali go Arjen de Wise i Philidor Weise, a zaprojektował Arthur van Hoog. Głównym zadaniem użytkownika w grze jest kontrolowanie upadku meteorytów, zdobywanie punktów za pozostawione przez siebie zniszczenia.
Gra wykorzystuje serwer Node.js do zarządzania komunikacją między komputerami stacjonarnymi i urządzeniami mobilnymi za pomocą WebSockets.
Weise podkreśla, że przy tworzeniu Multeora nie wykorzystano istniejących bibliotek gier:
Wszystko napisaliśmy sami - było to bardzo ekscytujące, poza tym nauczyliśmy się wielu nowych rzeczy. Fakt, że nie byliśmy zależni od konkretnych złożeń i prefabrykatów, dawał nam pewną swobodę działania: nie trzeba było zajmować się renderowaniem istniejącej grafiki, obsługą kolizji i osobno opisywaniem systemu odpowiedzialnego za wybuchy.
4. Oś czasu zbrodni
Crime Timelime to agregator, który gromadzi dane dotyczące przestępczości w Wielkiej Brytanii za pomocą publicznych interfejsów API. Dzięki niemu użytkownicy wiedzą, jak mają się sprawy w ich regionie.
„Zorganizowaliśmy witrynę w taki sposób, aby pokazywała mapę regionu i miejsca popełnienia przestępstw – na miesiąc wybrany przez użytkownika w panelu poniżej” – mówi deweloper projektu Alex Miller.
Zasób korzysta z Google Maps API, jQuery i jQRangeSlider zostały użyte do stworzenia panelu z miesiącami. Kiedy użytkownik wchodzi w interakcję z mapą — na przykład klika na niej określoną lokalizację — witryna aktualizuje obraz za pomocą JavaScript. Bąbelki przestępczości zostały stworzone za pomocą CSS i animowane za pomocą za pomocą jQuery.
Oto dzisiaj JavaScript jest używany do tworzenia animacji. Twórca zasobu, projektant Luc Twyman, tak tłumaczy swój pomysł: „Chciałem stworzyć coś, co da każdemu poczucie skali czasu. Here is Today pomaga zrozumieć, jak rozległa jest historia wszechświata.”
Twyman zauważa, że od samego początku postanowił zrezygnować ze standardowych jednostek miary – pikseli i opisał własne na podstawie wielkości ekranu. Zrobiono to, aby strona wyglądała tak samo na wszystkich urządzeniach.
To już drugi projekt JavaScript stworzony przez projektanta, a w nim wykorzystał elementy, których nie wykorzystał w poprzednim. Twyman znajduje jednak w języku wiele podobieństw z innymi językami programowania wysokiego poziomu, poza tym, według niego, JavaScript ma dość szczegółową dokumentację, a duża liczba przykładów została zdemontowana w Internecie (w tym na formularzach tematycznych).
6. Tweetmapa
Tweetmap wyświetla kraje na mapie proporcjonalnie do liczby wysłanych z nich tweetów. Programista usług Rob Hawkes wymienia kilka technologii użytych przy jego tworzeniu: TopoJSON, D3.js, Node.js, PhantomJS oraz specjalne algorytmy do konstruowania sąsiadujących kartogramów w czasie rzeczywistym.
Wybraliśmy Node.js, ponieważ mieliśmy już z nim doświadczenie i ponieważ jest to prosta, szybka i elastyczna platforma. Do animacji mapy (w formacie TopoJSON) używamy D3, fantastycznej biblioteki do wizualizacji danych. W szczególności szeroko korzystamy z modułu geo, który pozwala nam na wykonywanie skomplikowanych obliczeń i przekształceń geograficznych.
Aby uniknąć problemów z prezentacją map w przeglądarce klienta, system generuje mapy na serwerze za pomocą D3, uruchamia je i renderuje za pomocą silnika PhantomJS, a dopiero potem przekazuje je użytkownikowi – dzięki temu unika się tworzenia „dziur” podczas wyświetlania map .
7. Podróż
The Trip to interaktywny film wykonany w JavaScript i HTML5 (bez Flasha). Otto Nascarella, twórca projektu, uważa, że zadanie rozwoju podobna usługa okazało się bardzo trudne:
Większość trudności, z jakimi się zmierzyliśmy, wynikała z faktu, że HTML5 w momencie pisania tej strony nie miał możliwości rozwoju w różnych przeglądarkach. Następnie zdecydowaliśmy, że zalecamy klientom korzystanie z Chrome.
Kod witryny JavaScript używa jQuery do prawie wszystkiego. Twórcy użyli również TextBlur i TextDrop do rozmycia i animowania tekstu.
8. Si cyfrowe
Ta strona, napisana w JavaScript, to nowe portfolio i blog agencji projektowo-marketingowej Si Digital. Główny deweloper projektu, Alex Kruk, wyjaśnia animację na stronie głównej w następujący sposób: „Płyn poruszający się w rurach prowadzi użytkowników przez nasze portfolio – aktywuje animację obrazów na każdym etapie eksploracji witryny przez klienta”.
Aby osiągnąć podobny efekt, Crook wykorzystał metodę jQuery.animate(). Dodatkowo dodaje, trzeba było wybrać odpowiednią szybkość napełniania rur płynem – w końcu każdy czyta w innym tempie.
Interaktywny wykres na stronie opisujący zrealizowane projekty i zespół agencji, zaimplementowany przy użyciu jQuery. Oś czasu, według Krook, jest generowana dynamicznie – na podstawie informacji z bazy danych, z wykorzystaniem technologii Ajax.
9. Strona internetowa Jeana Halfsteina
Jean Halfstein jest projektantem stron internetowych. W jego portfolio autorzy artykułu przyciągnęli najwięcej strona główna- i animację na nim. „Naprawdę dobrze się bawiłem, majstrując przy różnych efektach. Bardzo lubię korzystać z nowych technologii, więc postanowiłem uczynić stronę główną mojej witryny rodzajem piaskownicy - tam bawię się z Three.js i elementem płótna HTML5 ”- mówi Halfstein.
Ideą projektanta było stworzenie portfolio zgodnego z obowiązującymi trendami – musiało być minimalistyczne, a jednocześnie wnieść coś świeżego do projektu strony internetowej. Postanowił więc użyć myszy i kontrolek przeciągania do animacji, a nie klawiszy nawigacyjnych.
10. Portfel Nicka Jonesa
Według Jonesa, kiedy tworzył witrynę, miał większe doświadczenie z Flashem niż z JavaScriptem, ale chciał spróbować czegoś nowego - zrozumieć, do czego jest zdolny. „Od razu wiedziałem, że składnia JavaScript jest prawie taka sama jak składnia ActionScript — więc szybko się do niej przyzwyczaiłem” — opisuje proces kodowania Jones.
Jones wspomina, że Flash nie dawał mu dostępu do pracy z ruchami myszy – było to nowe doświadczenie, które naprawdę mu się podobało. Deweloper chciał osiągnąć responsywną stronę, której nie mógł osiągnąć za pomocą przejść klas w CSS. Jones jest zadowolony z wyniku:
Jeśli zamierzasz przełączyć się z ActionScript na JavaScript, nie wahaj się ani chwili. Budując swoją stronę, chciałem zrozumieć, czy JavaScript jest w stanie zrobić to, do czego jest zdolny Flash. I jestem pod wrażeniem.
11. MapyTD
MapsTD to gra online oparta na obronie twierdzy. Twierdza jest własnym domem użytkownika, który musi chronić przed złoczyńcami, którzy niestrudzenie przemierzają ulice okolicy.
Twórca projektu Duncan Barclay wyjaśnia, jak to działa: „Użyliśmy Google Maps API, MooTools i JavaScript. Najtrudniej jest znaleźć drogę, którą pójdą wrogowie użytkownika. Gdy gracz wybierze punkt początkowy, usługa wyszukuje długość i szerokość geograficzną oraz oblicza możliwe ścieżki za pomocą Google.”
W miarę postępów w grze na ekranie pojawia się coraz więcej przeciwników. Barclay twierdzi, że programiści musieli „zmagać się” z czasem przeglądarek – faktem jest, że większość z nich z czasem zmniejsza częstotliwość sprawdzania aktualizacji na stronie i trzeba było się upewnić, że tak się nie stało.
Kolejnym problemem było to, że wraz z postępami w grze liczba wrogów rosła, a produktywność spadała. W efekcie twórcy postanowili podnieść poziom umiejętności złoczyńców, a nie ich liczbę.
12. Katalogi spojrzenie
Zasób Glimpse został opracowany wspólnie przez zespół Windows IE i projekt TheFind i łączy w sobie wyszukiwarkę TheFind oraz aplikację tych samych programistów do zakupów online na Facebooku. W ramach Glimpse programiści wydali własny framework oparty na Turn.js.
Celem zespołu od samego początku było uczynienie z Glimpse aplikacji internetowej, a nie zwykłej strony internetowej. Twórcy zastosowali paradygmat model-widok-zachowanie, który dzieli model danych na trzy oddzielne komponenty, interfejs użytkownika i interakcji z klientem. Usługa wykorzystuje szablony renderowania modelu po stronie klienta Thrift lub JSON w zależności od moc obliczeniowa klient.
Biblioteka Turn.js została również wykorzystana przy tworzeniu katalogów. Za pomocą CSS i JavaScript modelom prezentowanym na stronie nadaje się objętość - poprzez nakładanie cieni na obraz.
13. Radio Akademii Muzycznej Red Bull
RBMA Radio korzysta z narzędzia Modernizr, które pozwala na rozwój różnych przeglądarek w HTML5 i CSS. Modernizr jest stale aktualizowany, aby twórcy witryn mogli ulepszać kod w miarę wprowadzania nowych funkcji.
Dodatkowo przy wdrażaniu usługi wykorzystano bibliotekę Backbone.js – za jej pomocą ładowane są kafelki, by stworzyć efekt niekończącej się strony.
14. Nouvelle Vague
Nouvelle Vague to strona francuskiej agencji projektowej Ultranoir. Serwis umożliwia „śledzenie” tweetów po danym hashtagu. Jest zaimplementowany przy użyciu JavaScript, WebGL i HTML5. HTML5 jest jednak odpowiedzialny za zwiastun tylko podczas otwierania zasobu.
Jeden z twórców agencji powiedział, że stworzenie strony zajęło cztery miesiące, a pracowały nad nią trzy osoby. „Próba pracy z WebGL była dla nas naprawdę ekscytująca” — wyjaśnia.
Głównym celem projektu było odtworzenie atmosfery z wygaszacza wideo za pomocą obrazów 3D. Zespół zagłębił się w nowe technologie HTML5, CSS3 i JavaScript i wierzy, że te języki mogą w przyszłości stać się standardem w pracy z 3D - ze względu na wysokiej jakości renderowanie, bogatą interoperacyjność i responsywność.
15. Konwergencja
The Convergence to gra przeglądarkowa przypominająca Super Mario Bros. Pokazuje niesamowitą moc JavaScript i HTML5 i udowadnia, że HTML5 może wykonywać swoją pracę równie dobrze jak Flash.
Twórcy obiecują dodać dźwięk i nowe poziomy do gry w przyszłości, a także wsparcie dla API Mozilla Gamepad.
16. Czytnik w chmurze Kindle
Ta aplikacja internetowa sprawia, że słowa „kup raz, przeczytaj na wszystkich urządzeniach” stają się rzeczywistością. Wykorzystuje technologie HTML5, API JavaScript, biblioteki jQuery i jQuery UI oraz kilka wtyczek jQuery, w tym jScrollPane do przewijania stron i szablony jQuery. Ponadto zespół programistów wykorzystał WebSQL do obsługi trybu offline.
17. Les Enfants straszne
Strona uruchomiona przez studio WeFail, według autorów notatki, wygląda przerażająco, ale nadal bardzo fajnie. Zasób jest wykonany w dość ostrym stylu. JavaScript służy do animowania interakcji użytkownika z systemem. Aby przewijać tylko poszczególne elementy interfejsu, w poleceniu użyto wtyczki jQuery ScrollTo. Aby wideo pojawiło się nie w wyskakujących okienkach, ale bezpośrednio na stronie, użyto biblioteki Shadowbox.js.
Dodatkowo w kodzie Les Enfants zastosowano wtyczkę jQuery Cycle - odpowiada ona za wyświetlanie zdjęć i przykładów pracy agencji.
„Wprowadziliśmy Les Enfants, aby zrozumieć możliwości JavaScriptu. Okazało się, że w połączeniu z СSS Transform można osiągnąć doskonałe wyniki„Mówi programista Martin Hugh.
Nie tak dawno, zauważa Hugh, tego rodzaju rzeczy można było zrobić tylko za pomocą Flasha, ale teraz ma realną alternatywę, JavaScript.
18. Pinterest
Pinterest to doskonały przykład wykorzystania JavaScript do tworzenia niekończącego się efektu strony. Do stworzenia strony potrzebne były narzędzia jQuery, jQuery UI oraz wtyczka PageLess.
Według autorów notatki, PageLess ma kluczowe znaczenie dla Pinteresta, ponieważ niekończące się przewijanie i ładowanie nowych pinów znacznie skuteczniej pomaga utrzymać uwagę użytkownika niż funkcje społecznościowe, takie jak komentowanie postów.
19. Budowniczy bomb miłosnych
Love Bobm Builder pomaga użytkownikom wyrazić swoją miłość lub wdzięczność komuś. Jest to zgrabna i prosta strona, która pozwala stworzyć i wysłać wiadomość bombową.
Zasób wykorzystuje narzędzie Modernizr do terminowej aktualizacji kodu JavaScript i HTML5.
20. Michelberger Booze
Kiedy użytkownik wchodzi na stronę, pierwszą rzeczą, jaką widzi, jest tak zwany „preloader” – może się wydawać, że jest zrobiony we Flashu, ale tak nie jest. HTML5 i JavaScript są odpowiedzialne za napełnianie szklanki piwem podczas ładowania.
Zasób wykorzystuje funkcję częściowego przewijania - tylko dla niektórych elementów interfejsu i pozwala użytkownikowi na interaktywną interakcję z obrazami.
Klikając w maskę zwierząt, klient zostaje przeniesiony do innych scen - wszystkie efekty animacji, w których wykonuje się za pomocą jQuery.animate().
21. Trello
Trello to aplikacja do planowania współpracy lub jeden-do-jednego, w której użytkownicy mogą tworzyć listy ukończonych i zaległych zadań oraz udostępniać postępy w czasie rzeczywistym. Strona jest rozwijana przy użyciu Node.js, MongoDB i Backbone.js.
Współzałożyciel Trello, Daniel Le Cerminan, wyjaśnia, że używanie tylko jednego języka podczas pisania strony internetowej pomaga nowym członkom zespołu szybciej wejść w proces rozwoju.
Komunikacja między użytkownikami realizowana jest za pomocą Web Sockets – Le Cerminan zauważa, że to wystarczy Nowa technologia, więc pojawiły się pewne trudności w jego konfiguracji.
22. Przeglądarka
Ta gra w stylu retro autorstwa Little Workshop została zaprojektowana, aby pokazać moc HTML5, JavaScript, a zwłaszcza Web Sockets. Może wspierać interakcję między tysiącami użytkowników jednocześnie.
„Tworzenie gry wieloosobowej to świetny sposób na zademonstrowanie, jak takie technologie mogą ze sobą współpracować. BrowserQuest opiera się na serwerach Node.js, z których każdy może uruchamiać wiele instancji świata gry ”- mówi deweloper studia Guillaume Lecolné.
23. JS1k
JS1k to coroczny konkurs, którego zadaniem jest stworzenie strony w JavaScript na zadany temat (najczęściej animowane obrazy). Jego waga nie powinna przekraczać 1 KB.
W tym roku tematem przewodnim jest „Oto smoki”.
Laureat pracy w konkursie w 2012 roku. Autor - Philip Buchanan, temat - "Miłość"
Praca zwycięzcy z 2012 roku początkowo ważyła 8 KB - ale w ciągu jednego dnia Philip był w stanie zmniejszyć jej rozmiar do wymaganego 1 KB poprzez optymalizację algorytmu generowania drzewa:
Moja taktyka polegała na „uczciwym oszukaniu” kompilatora. Na przykład za pomocą „a? b: c "zamiast" if (a) b else c "zapisuje 8 bajtów.
24. Oś czasu
Usługa pomaga użytkownikom tworzyć osie czasu i jest bardzo łatwa w użyciu. Interaktywna oś czasu może zawierać tweety, filmy, zdjęcia i nagrania audio. Oś czasu można opisać za pomocą JSON lub Dokumenty Google- ponieważ jest to wygodniejsze dla samego klienta.
25. Narysuj Stickmana
Główną ideą serwisu jest zapewnienie użytkownikowi możliwości odrobiny zabawy poprzez wzięcie udziału w interaktywnej opowieści – pomaganie wylosowanemu człowiekowi w pokonywaniu różnych przeszkód. Szkice na stronie wykonujemy za pomocą myszki.
Do stworzenia gry wykorzystano jQuery i bibliotekę do pracy Grafika wektorowa Rafał.js. Wdrożenie projektu z Raphalem pomogło programistom uniknąć problemów z wydajnością na większości urządzeń i we wszystkich przeglądarkach.
Teraz, gdy omówiliśmy podejścia do nauki HTML i CSS, nadszedł czas, aby zwrócić naszą uwagę na JavaScript, trzecią kluczową umiejętność projektanta stron internetowych. JavaScript to język skryptowy. Oznacza to, że jego składnia jest nieco bardziej złożona niż składnia HTML i CSS. Jest dużo więcej do nauczenia się zanim będziesz mógł płynnie pisać kod JavaScript. Większość ludzi uczy się JavaScriptu trochę dłużej niż nauka HTML i CSS. Istnieje wiele opinii na temat najlepszego podejścia do nauki JavaScript i nie wszystkie z nich są takie same jak moje.
Jednak w rzeczywistości jestem przeciwny używaniu jednego konkretnego sposobu nauczenia się JavaScript. Moja nauka JavaScript poszła nie tak. Zasadniczo po prostu zbierałem fragmenty informacji o języku z samouczków lub fragmentów kodu, co stworzyło duże luki w mojej wiedzy o JavaScript, które następnie musiałem wypełnić. Dlatego polecam wybrać nieco dłuższą trasę, która mam nadzieję doprowadzi do lepszego wyniku. Po pierwsze, musisz zrozumieć, co dokładnie robi JavaScript. JavaScript to język programowania po stronie klienta. Fraza „po stronie klienta” oznacza, że kod nie działa na serwerze, ale w przeglądarce.
Język został stworzony do pracy z HTML i CSS, dzięki czemu ma wiele wbudowanych funkcji ułatwiających kontrolowanie zachowania witryny. JavaScript uzupełnia statyczną naturę HTML, umożliwiając tworzenie elementów interaktywnych, renderowanie elementów w oparciu o określone warunki, animowanie elementów lub wykonywanie dowolnej liczby zadań skryptowych. Dowiedzenie się, do czego jest dobry JavaScript, jest bardzo ważne, ponieważ pomaga zrozumieć, kiedy go używać i na co zwracać uwagę podczas nauki JavaScript.
Jak wspomniałem wcześniej, staraj się nie uczyć JavaScript z fragmentów kodu. Większość ludzi stosuje takie podejście, łącznie ze mną. Dzięki takiemu podejściu znajdujesz fragment kodu, który wykonuje zadanie, którego potrzebujesz, wstawiasz go do jednego ze swoich projektów, edytujesz i uruchamiasz. Jak wiesz, takie podejście pozwoli Ci z czasem opanować pewne umiejętności związane z JavaScriptem, ale co najważniejsze, w tym przypadku brakuje Ci powodu, dla którego ten konkretny język powinien być używany. W rezultacie nie zrozumiesz w pełni tego języka programowania.
Ponadto polecam najpierw zapoznać się z podstawami JavaScript, a dopiero potem zacząć poznawać biblioteki takie jak jQuery. Korzystanie z jQuery jest dość kuszącym pomysłem, ponieważ jest to potężne narzędzie i używa go wiele osób. Błyskawicznie znajdziesz setki samouczków dotyczących korzystania z jQuery w swojej witrynie. Ale nauka jQuery, zanim jeszcze nauczysz się JavaScript, jest dużym błędem. Jak możesz sobie wyobrazić, korzystanie z biblioteki jQuery nie zawsze jest właściwą decyzją. A jeśli wiesz tylko, jak korzystać z konkretnej biblioteki, nie będziesz w stanie zrozumieć, kiedy używać JavaScript, a kiedy nie.
Takie podejście zakłada, że powinieneś przynajmniej w uporządkowany i skoncentrowany sposób nauczyć się podstaw JavaScript poprzez, na przykład, konkretny kurs lub książkę. Podczas gdy wiele samouczków uczy, jak wykonywać bardzo specyficzne zadania za pomocą JavaScript, naprawdę musisz dobrze zrozumieć jego koncepcje i składnię, aby zrozumieć, co kryje się za każdym z twoich działań. Oczywiście nie wszyscy projektanci stron internetowych muszą biegle posługiwać się językiem JavaScript. Projektanci, którzy na przykład chcą tworzyć frontend, muszą biegle posługiwać się JavaScript.
A dla tych, którzy bardziej interesują się projektowaniem UX lub projektowaniem wizualnym, same podstawy powinny wystarczyć. Bez względu na to, jak głęboka musi być Twoja wiedza o JavaScript, musisz opanować najważniejsze pojęcia, aby mieć praktyczną wiedzę na temat języka. Najważniejsze to być cierpliwym. Nauka JavaScriptu zajmuje dużo czasu, a jeśli zrezygnujesz z uczenia się zbyt szybko, nie będziesz w stanie zapamiętać tego, czego się nauczyłeś, jeśli potrzebujesz tego do projektu. Gorąco polecam zacząć od kursu JavaScript Essential Training Simona Allardyce'a, który można znaleźć w internetowej bibliotece szkoleniowej na lynda.com.
Patrzy na JavaScript z punktu widzenia początkującego i tak naprawdę opisuje podstawy JavaScript w najprostszy sposób. Również polecam... przepraszam, jeśli źle wymówię... książkę Marijna Haverbeke. Nawiasem mówiąc, to świetny facet. W każdym razie polecam lekturę jego książki „Eloquent JavaScript”, zwanej także „Nowoczesnym wprowadzeniem do programowania”. Ta książka jest naprawdę napisana w języku przystępnym dla początkujących. Istnieje wiele książek napisanych o JavaScript, ale ta książka została napisana przez programistę i dla programistów. Książka „Eloquent JavaScript” została napisana w taki sposób, że jest swoistym wprowadzeniem do języka dla początkujących.
Co najbardziej zaskakujące, można kupić drukowaną wersję książki, ale... Kliknijmy w ten link... Istnieje również wersja elektroniczna tej książki. Obejmuje wszystko, o czym jest JavaScript, i zawiera kilka praktycznych przykładów, z którymi możesz poeksperymentować, aby zobaczyć, jak to wszystko działa. To naprawdę fajna mała strona. Podobnie jak w przypadku HTML i CSS, docs.webplatform.org zawiera sekcję JavaScript. Będzie bardzo przydatny, ponieważ zawiera kilka samouczków, funkcji, obiektów, zdarzeń - wszystkie te podstawowe rzeczy, które musisz wiedzieć podczas nauki JavaScript.
Nie mogę nie doceniać znaczenia stackoverflow.com. Jeśli nigdy wcześniej się z tym nie spotkałeś, to warto zauważyć, że ta strona umożliwia założenie konta, a następnie wysyłanie pytań do członków tej witryny o te rzeczy, które wprowadzają Cię w błąd podczas pracy nad własnymi projektami lub zadawanie pytań na ich temat pojęcia, które są dla Ciebie trudne do nauczenia. Często ludzie udzielają wielu różnych porad, przy czym dobre odpowiedzi otrzymują dodatkowe głosy, a złe rady są pozbawione głosów. Dlatego po pewnym czasie, dzięki opiniom członków społeczności, będziesz w stanie zrozumieć, która odpowiedź jest najlepsza. Możesz nie tylko publikować pytania, ale także wyszukiwać je na stronie. Możliwe, że ktoś zadał już pytanie, które Cię interesuje. Dlatego stackoverflow.com jest rzeczywiście bardzo przydatnym źródłem informacji. Podobnie jak w przypadku HTML i CSS, sieć programistów Mozilli ma również sekcję JavaScript. Zawiera wiele różnych informacji. Ponadto po prawej stronie serwisu znajduje się sekcja z listą zasobów, w której można uzyskać bardziej szczegółowe informacje na dany temat. Niektóre z tych informacji są całkowicie techniczne. Ale w zasadzie każdy początkujący JavaScript może skorzystać z większości tych informacji na samym początku nauki tego języka programowania. Jeśli po opanowaniu podstaw JavaScript masz ochotę dokładniej przestudiować ten język, możesz skorzystać z innej, całkiem przydatnej moim zdaniem książki - „Professional JavaScript for Web Developers”, której autorem jest Nicholas Zakas.
Nie będę Cię oszukiwać i twierdzić, że zrozumiałem wszystko, co jest napisane w tej książce, ale używam jej jako materiału referencyjnego, ponieważ po zapoznaniu się z podstawami JavaScript mogą pojawić się sytuacje, gdy wydaje się, że utkniesz i nie wiesz, co zrobić Zrób następne. Ta wspaniała książka pozwala lepiej zrozumieć składnię JavaScript, nauczyć się pisać wydajniejszy kod i zastosować nie tylko podstawowe koncepcje JavaScript, ale także bardziej zaawansowane funkcje. Oczywiście, jeśli ponownie wrócisz na lynda.com, znajdziesz tam całą sekcję świetnych kursów JavaScript, w tym kurs Simona. Dlatego dokładnie przeanalizuj, jakie kursy znajdują się w naszej bibliotece.
JavaScript jest jednym z tych języków, które można zrozumieć tylko poprzez zastosowanie go w praktyce. Dlatego podejście, które wybierzesz do jej studiowania, powinno oznaczać wdrożenie wielu praktycznych przykładów.
jFBL, CHEV-UVTBOYGB TSYCHЈF. chSh OBTYUPCHBMY LBTFYOLY, RPDZPFPCHYMY FELUF, UDEMBMY CHUЈ, UFP IPFEMPUSH, Y ... ABULHYUBMY. rPUENH? dB IPFS VSH RPFPNKH, UFP CHSCHUFTBDBOOBS CHBNY UVTBOYYULB OYLBL OE PFLMYLBEFUS O DEKUFFCHYS CHMBDEMSHGB, TsBDOP YBTSEZP RP OEK LKHTUPTPN. FSHZHH, RPYUFY OERTYMYUOP RPMHYUIMPUSH ... SUSZARKA DO WŁOSÓW OE NEOOEE, VHDEN MEUUIFSH.
DP FPZP, LBL OBYUBFSH TBUULB P CHUSLIYI FEIOYUEULYI ZHPLKHUBI O RPFEIKH RPUEFYFEMSN Y UEVE, MAVINSCHN, OBDP RTEDUFBCHYFSH, YUPP CHPPVEYT NSCH.
sshl HTML UFBFYUEO. dMS FPZP, YUFPVSH OBKHYUIFSH UVTBOYGKH „TSYFSH”, PFLMYLBFSHUS O DEKUFHYS RPMSHSPCHBFEMS, OKHTSOP OBKFY URPUPV Ybrtpztbnnnytpchbfcheo FP EMPEO. HNOSCHE MADI - OE YUEFB OBN U CHBNY - TEYBAF LFKH RTPVMENH, CHUFBCHMS CH ZYRETFELUF LHULY RTPZTBNNOPZP LPDB, LPFPTSCHE OBSCHCHBAF ultyrfbny. chPVEE ZPCHPTS, ULTIRF - RTPUFP NBMEOSHLBS RTPZTBNNLB, UTBVBFSCHCHBAEBS FPZDB, LPZDB EK ULBTSKHF, Y OBRYUBOB POB NPTSEF VSCHFSHY OBRYUBOB POB NPTSEF VSCHFSHY OBPDBMPN nSCH U CHBNY VKHDEN ZPCHPTYFSH FPMSHLP PV PDOPN Y'OYI - JavaScript. UYOFBLUYU JavaScript CHSF YY VPMSHYPZP Y UETSHЈBOPZP SJSHLB Java, O LPFPTPN RTPZTBNNYTHAF UVTBYOSCH VPTPDBFSHE DSDY DECHEMPRETSCH, RPMHYUBS JB
OBYE U CHBNY DUMP NBMEOSHLPE, OBN OBDP RTPUFP OBKHYUIFSHUS RYIBFSH LFY UBNSHE ULTYRFSH LKHDB RPRBMP, YUFPVSCHUЈ NYZBMP, LTKHFIPZBMEBMEZHT y FPZDB LPZP-OYVKHSH RMPIPZP PF OBYEK UVTBOYGSCH FPYUOP ICHBFIF LPODTBFYK, B BOBYUIF, NSCH U CHBNY IPTPYE. b EUMY LPODTBFYK ICHBFIF LPZP-OYVHDSH IPTPYEZP? EFYLKO! üFINY ЪBDBYUBNY ЪBOYNBAFUS UREGBMYUFSCH RP NBTLEFYOSKH Y TELMBNE, POI JOBAF, UFP FBLPE Gemechbs zthrb, J PFZPOSF CHUEI IPTPYUPYUPY PF och, UFP-FP S PRSFSH ъBRKHFBMUS: LCS LPZP Ts NSCh FPZDB CHPPVEE FTHDYNUS?
uOHCHB LPOFEKOETSCH
YUFPVSCH CHUFBCHYFSH LHUPL LPDB O JAVINGU JavaScript CH FEMP HTML -UFTBOYGSCH, OBN U CHBNY PRSFSH RPOBDPVYFUS LPOFEKOET. chPF FBLPK:
EDYOUFCHOOSCHK RBTBNEFT, LPFPTSCHK DEKUFCHYFEMSHOP UVPIF YURPMSHCHBCHBFSH, OBSCHCHBEFUS język. NA PRTEDEMSEF, O LBLPN SSCHLE OBRYUBOP CHUЈ FP, UFP OBIPDYFUS CHOHFTY LPOFEKOETB. dce DPRPMOYFEMSHOSHE UFTPULY CHOKHFTY ZPCHPTSF UFBTPNKH VTBKHETKH, LPFPTSCHK OILBLYI ULTIRFPCH OE RPOINBEF, UFP CHUЈ, OBIPDSEEEUS NECDKH- LPNNEOFBTYK, LPFPTSCHK OBDP RTPUFP PUFBCHYFSH CH RPLPE Y OYUEZP U OYN OE DEMBFSH. fBLYN PVTBSPN, EUMY LFP-FP PFLTPEF UVTBOYGKH U RPNPESHA LFPZP UBNPZP UFBTPZP VTBKHETB, PO RPMKHYUIF FPMSHLP YUUFSCHK HTML -LPDLTCH, B CHUEFT EUMY JOBLY LPNNEOFBTYS PFUHFUFCHHAF, B CHOHFTY ULTYRFB OBIPDYFUS UFP-FP FBLPE, UEZP VTBKHET OE RPOINBEF, RPUEFYFEYFYUVLEV UPMEYUPHEYUPHEYFEYUFYUVLEY RPMEJ pop OBN U CHBNY OBDP?
FERETSH P FPN, ZDE UVPIF RPNEEBFSH ULTYRFSH. h RTYOGYRE, POI NPZHF OBIPDYFSHUS ZDE HZPDOP, OP MHYUYE RPNEBFSH JavaScript-LPD CH LPOFEKOETE HEAD. eUMY TBNEUFIFSH LPD CH TBEDEME
..., PO PVSBFESHOP YURPMOIFUS CH FPF NPNEOF, LPZDB VTBKHET DPKDЈF DP OESP RP NETE BZTKHLY UVTBOYGSCH. H OELPFPTSCHI UMHYUBSI FP FPTSE OEPVIPDYNP OP IPTPYYN FPOPN SCHMSEFUS PZHPTNMEOYE ULTYRFPCH B CHYDE zhholgyk, LPFPTSCHE NPTSOP RTY OEPVIPDYNPUFY CHSCHCHBFSH dv MAVPZP NEUFB UFTBOYGSCH J LPFPTSCHE OE VHDHF CHSCHRPMOSFSHUS DP FEI RPT, RPLB NShch mają CHBNY FPZP OE BIPFYN.Rolowanie
FEIOUEEULPE ABDBOYE
rPUFBOPCHLB BDBYUI OPNET PDIO.
o UVTBOYGE EUFSH LOPRLB, CHCHRPMOEOOBS HYDE Y'PVTBCEOIS CH ZhPTNBFE GIF. oKhTsOP, YuFPVShch POB LBLYN-FP PVTBPN NEOSMBUSH RTY OBCHEDOYY O OEЈ LKHTUPTB.
üFPF ÜZHZHELF RP-BOZMYKULI OBSCHCHBEFUS przewrócenie TH CH TEKFYOSE RPRHMSTOPUFY ÜZHELFPCH JBOYNBEF, UCHETOPE, RETCHPE NEUFP. jFBL, RTYUFHRYNA.
TEBMYBGY
RTECDE CHUEZP OBN RPOBDPVSFUS dche LOPRLY: YUIPDOSCHK CHBTYBOF RMAU FPF, LPFPTSCHK DPMTSEO RPDUFBCHMSFSHUS CHNEUFP OEZP RTY DCHEYTSETOYCHEY NKHTUPSCH LKHTUPYP. PVE LBTFYOLY DPMTSOSCH YNEFSH PDYO Y FPF TSE TBNET. UNSCHUM CHUEEI DBMSHOEKYYI NBOYRKHMSGYK UPUFPIF CH FPN, YUFPVSH BNEOIFSH PDOP Y'PVTBTSEOYE DTHZYN, B RPFPN CHETOHFSH YUIPDOPE O NEUFP.
CHUFBCHMSEN RETCHHA LOPRLH H HTML. LPD VKHDEF CHSCHZMSDEFSH RTYNETOP FBL:
FEZ IMG YURPMSH'KHEFUS DMS TBNEEEOYS ZTBZHYLY O HTML -UFTBOYG. RBTBNEFTSCH nazwa, src, szerokość І wysokość ЬBDBAF UPPFCHEFUFCHOOOP YNS CHUFTFEOOOPZP CH HTML PVYAELFB DMS DBMSHOEKYI UUSCHMPL O OEZP, YNS ZTBZHYUEULPHYUFYUPHYBYUFYT CHYBKMBYT
FERETSH TBNEUFYN CH TBDEME GŁOWA UMEDHAEYK VMPL:
FERETSH DPVBCHYN EEЈ DCHB RBTBNEFTB CH FES IMG:
Onmouseover = "ImgOn ();" onmouseout = "ImgOff ();"
OPRPNOA, UFP SNSCHL JavaScript YUHCHUFCHAYFEMEO L TEZYUFTKH, RPFPNKH, EUMY CHPPN NEUFE OBRYYEFE imgon, B CH DTHZPN ImgOn, FY PRYUBOIS OEFNSHDHT
pUFBMPUSH UDEMBFSH RPUMEDOEE: DPVBCHYFSH PDYO RBTBNEFT CH FES BODY:
Onload = "ImgPreload ();"
w LPDPN RPLPOYEOP. z OBNETEOOOP OE DBA DEFBMSHOSHI YOUFTKHLGYK: TBKHNEEFUS, YY UPPVTBTSEOYK MЈZLPZP UBDYUNB. OP P FPN, LBL LFP CHUЈ TBVPFBEF, TBUULBTSKH RPDTPPVOP.
PYASUOOEEOS
h BZPMPCHLE UVTBOYGSCH - PRZEZ YNEOOOP CH UELGY HEAD - NSC UPDBMY ULTIRF, CHLMAYUBAEYK CH UEVS FTY ZhHOLGY: ImgPreload, ImgOn Y ImgOff. lMAYUECHPE UMPCHP funkcja CH VPMSHYOUFCHE SSCHLPCH PRTEDEMSEF LHUPL LPDB, LPFPTSCHK NPTSEF VSHFSH NOPZPLTBFOP CHSCHBO YY TBMYUOSHI NEUF RTPZTBNSCH. pWAYK UMHYUBK UYOFBLUYUB CHCHZMSDIF FBL:
Funkcja nazwa_funkcji (par1, par2, par3) (...)
TBYYZHTPCHSCHBEFUS CHUЈ LFP UMEDHAEYN PVTBPN: ZhHOLGYS U YNEOEN nazwa_funkcji, CH LPFPTKHA RETEDBAFUS RBTBNEFTSCH U YNEOBNY par1, par2 Y parShch3, LPPFP OTP. ZHYZKHTOSCHE ULPVLY PVTBNMSAF FKH YUBUFSH, LPFPTBS, UPVUFCHEOOOP, Y VKHDEF CHCHRPMOSFSHUS, EUMY NSCH LFKH ZhHOLGYA CHSCHUPCHEN, F. E. UPYMЈNUS OBJNEOYPK LPKH
YBYUEN OKHTSOSCH RBTBNEFTSCH, FEN VPMEE, UFP CH FEI FTЈI JHOLGYSI, LPFPTSCHE NSCH YURPMSHKHEN CH OBDBYUE OBDBYUE, YI OEF? b PPF JBYUEN. rTEDUFFBCHSHFE UEVE, UFP O UVTBOYULE EUFSH oeulpmshlp LOPRPL, DMS LBTSDPK Y'LPFPTSCHI NSCH IPFINE UDEMBFSH UCHPK UPVUFCHEOOSCHK przewrócenie. SFP TSE, RYUBFSH PFDEMSHOKHA ZhHOLGYA O LBTSDKHA LOPRLKH? b EUMY YI DEUSFPL? ZMHRPUFY LBLEY.
Hm OBRYYEN edyoufcheooha ZHHOLGYA LCA LBTSDPK PRETBGYY, J mają RPNPESHA RBTBNEFTPCH RETEDBDYN EC yns FPK LBTFYOLY HBS LPFPTPK B DBOOSCHK NPNEOF RTPIPDYF LHTUPT NSCHY JOPPFFFUPTBS, U chPF Y CZUЈ.
CHETOЈNUS L OVYENKH LPDH.
zhHOLGYS Img Ładowanie wstępne UMKHTSIF DMS RTEDCHBTYFEMSHOPK ЬBZTHKHLJ CH RBNSFSH LPNRSHAFETB FPZP Y'PVTBCEOIS, LPFPTPPE DPMTSOP VSCHFSH RPDUFDUFBCHPMEOPU OBJECT. POB ABRHULBEFUS FPZDB, LPZDB CHUS UVTBOYGB ABZTHYMBUSH: ABRYUSH onload = "ImgPreload ();" CH FEZE BODY POBUBEF, UFP RP UPVSHFYA onload (PLPOYUBOYA ABZTHALY PFPVTBTSBENPK YUBUFY UVTBOYGSCH VTBKHYETPN) VHDEF CHCHRPMOEOB ZhHOLGYS.
ъBYUEN OKHTSOB FB ZhHOLGYS? DEMP CH FPN, UFP YBZTHALB LBTSDPZP YPVTBCEOIS U UETCHETB FTEVHEF CHTENEYOI, PUPVEOP RTY OE PYUEOSH IPTPYEK UCHSYY. eUMY NShch VHDEN FBEYFSH CHFPTHA LBTFYOLH mają UETCHETB, OP LHTUPT HKDЈF mają LOPRLY TBOSHYE, Yuen NShch HCHYDYN LBLPK-OP ZHZHELF, FL ZTBZHYYUEULYK ZHBKM LBLYN R™ VHM OBTH NBMEOS. dTHZPE DAMP, LPZDB FTEVKHENBS LBTFYOLB HTSE OBIPDYFUS CH RBNSFY: ABZTKHLB RTPY'PKDЈF NZOPCHEOOP.
FERETSH P UBNPK ŻHOLGY. ъBRYUSH pic2 = nowy obraz (); UP'DBЈF OCHSCHK PVYaELF FIRB Obraz, O LPFPTSCHK U LFPZP NPNEOFB NSCH NPTSEN UUSCHMBFSHUS, B UMEDKHAEBS UVTPYULB pic2.src = button1b.gif; ZPCHPTYF P FPN, LBLPK ZTBZHYUEULYK ZhBKM UPPFCHEFUFCHHEF LFPNKH PVYAELFKH. FERETSH, ЪBRTPUYCH J MAVPZP NEUFB LPDB ЪOBYUEOYE pic2.src, NSCh FHF TSE RPMKHUYN button1b.gif, UFP OBN Y FTEVKHEFUS.
pVTBFYFE CHOINBOYE O FP, LBLYE RBTBNEFTSCH NSCh DPVBCHYMY CH FES IMG. ъBRYUSH onmouseover = "ImgOn ();" P'OBYUBEF, UFP RP UPVSHFYA onmouseover (LKHTUPT CHYAEIBM O LBTFYOLKH) DPMTSOSCH VSCHFSH CHSCHCHBOB ZhHOLGYS ImgOn, B BRYUSH onmouseout = "ImgOff;" POBUBYUBEF, UFP LKHTUPT HYЈM U LOPRLY, Y FERETSH OKHTSOP ABKHUFIFSH ZhHOLGYA ImgOff. IBL RPOSFOP Y OBUCHBOYS, LFY DCHE ZhHOLGY PFCHEYUBAF ЪB RPDNEOH LBTFYOLY (ImgOn) Y CHUCHTBF EЈ CH YUIPDOPE UPUFFPSOYE (ImgOff). FERETSH RPUNPFTINE, LBL LFY ZhHOLGY TBVPFBAF.
h ZHHOLGY ImgOn RETCHBS UVTPLB (temp = mybutton.src;) RETEDBЈF RETENEOOPK temp YNS FPZP ZTBZHYUEULPZP ZHBKMB, LPFPTSCHK UPPFCHEFUEFCHKHEFKHUPUPUPUPDUP UPYUP hFPTBS UFTPLB (mybutton.src = pic2.src;) RETEDBЈF LOPRLE YNS ChFPTPZP ZhBKMB, LPFPTSCHK NSC RPDUFBCHMSEN. LBL FPMSHLP LFP RTPYSPYMP, CHNEUFP RETCHPOBYUBMSHOPK LBTFYOLY O NEUFE LOPRLY CHOYLBEF LBTFYOLB button1b.gif, Y OBYB BDBYUB TAMPUMP. OPRPMPCHYOKH, RPFPNKH UFP OBN EEЈ RTDUFFPIF CHETOHFSH LOPRLKH CH YUIPDOPE UPUFFPSOYE RPUME FPZP, LBL LHTUPT NSCHY HVETЈFUS CHPUCHPSUY.
üFYN Y ЪBOYNBEFUS ZHHOLGYS ImgOff. eЈ EDYOUFCHEOOBS UFTPULB (mybutton.src = temp;) ChPUCHTBEBEF LOPRLE FPF ZhBKM, LPFPTSCHK UPPFCHEFUFCHPCHBM EK CH UBNPN OBYUBME. chuЈ!
dMS RTYNETB RPUNPFTYFE, LBL PTZBOY'PCHBOSCH najazdy O ZMBCHOPK (YMY MAVPK DTHZPK) UVTBOYGE NPEZP UBKFB. üFP FBLYE NBMEOSHLYE UYOYE FPYUY, CHOOILBAEYE CHOKHFTY NBMEOSHLYI VESCHI LTKHTSPYULPCH, LPZDB CHSCH CHPYFE NSCHYLPK RP RHOLFBN NEOA. rTBCHDB, FBN CHUЈ UDEMBOP YUHFSH-YUHFSH YOBYUE. ;-)
Openwin
TBUUNPFTYN ABDBYUH OPNET DCHB.
FEIOUEEULPE ABDBOYE
jFBL, OBN OKHTSOP, UFPVShch
RTY EEMULE NSCHYSHA O UUSCHMLE PFLTSCHCHBMPUSH DPRPMOYFESHOP PLOP VTBKHETB, UCHPKUFCHB LPFPTPZP NPTSOP VSCHMP VSCH PTEDEMYFSH VBTBOYEE. OERMPIP, EUMY LFP PLOP NPTSOP VKHDEF YBLTSCHFSH EEMULPN RP TBURPMPTSEOOPK CH ON TCE UUSCHMLE.
pZPCPTLB
üFKH ЪBDBYULH NPTSOP TEYYFSH Y UTEDUFCHBNY UBNPZP HTML, RTBCHDB, ЪBDBFSh uchpkufchb OPCHPZP PLOB CHUЈ-FBLY OE HDBUFUS, DB Y ЪBLTSCHYFSHYEBOSCH CHURPNOIN UOBUBMB, UFP FBLPE UUSCHMLB.
ChPF FHF X OBU U CHBNY UUSCHMLB.
chFPTPK CHBTYBOF:
oE FBLBS HC VPMSHYBS TBOOYGB, LBLBS YUBUFSH LPOFEOFB CHCHRPMOEOB CH HYDE UUSCHMLY: FES RTYUHFUFCHHEF CH MAVPN UMKHYUBE, B PO-FP OBN Y OKHTSEO.
fBL CPF, YBDBYUH NPTSOP TEYYFSH DPVBCHMEOYEN RBTBNEFTB cel CH FES (cel = "zzz"). chNEUFP zzz NPTSOP RPDUFBCHMSFSH PDOP YJ FTЈI ABTEETCHYTPCHBOSCHI JOBYOOIK:
Własna _góra _pusta
ъОБЮЕОЕ _self YURPMSHHHEFUS CH FPN UMKHYUBE, EUMY OCHSCHK DPLHNEOF DPMTSEO VSCHFSH PFLTSCHF CH FPN TCE PLOE (ZHTEKNE), UFP YYUIPDOSCHK; OBYUEOYE _TOP ZPCHPTYF P FPN, YUFP OPCHSCHK DPLHNEOF VHDEF PFLTSCHF B FELHEEN PLOE VTBHETB, CHSCHFEUOYCH dv OEZP Chueh ZHTEKNSCH, EUMY FBLYE OBMYYUEUFCHHAF B OBYUEOYE _blank LBL TB PRTEDEMSEF, YUFP OPCHSCHK DPLHNEOF VHDEF PFLTSCHF B OPCHPN PLOE, LPFPTPE PFLTPEFUS UREGYBMSHOP LCA fpk GEMY. OP - LBL S WŁOCHY - HRTBCHMSFSH RBTBNEFTBNY LFPZP PLOB NSCH OE UNPTSEN.
LUFBFY, URYUPL ABTEETCHYTPCHBOOSHI JOBYUEOYK OE YUYUETRSCHBEFUS FTENS PRYUBOSCHNY YDEUSH RTYNETBNY, OP ЪB F FIN - L FETBRECH LHPPH E.
DEUSh OHTSOP DPVBCHYFSH, YUFP, PE-RETCHSCHI, LTPNE BTEETCHYTPCHBOOSCHI RBTBNEFTPCH B LBYUEUFCHE target NPTSEF VSCHFSH RPDUFBCHMEOP YNS HTSE UHEEUFCHHAEEZP PLOB, B EUMY FBLPZPECHOUFHVPHVPCHE VTBH. chP-CHFPTSHI, Z KhRPNYOBM ZHTEKNSCH, P LPFPTSCHI OBN U CHBNY RPLB YUFP OYUEZP OE YCHEUFOP. o OB DBOOCHK NPNEOF PVPKDЈNUS FEN, UFP ZHTEKNSCH - LFP PLOB OEBCHYUYNSHI DPLHNEOPPCH, LPFPTSCHE CH MAVPN LPMYUEUFCHE NPZKHF OBIPDIFSHUS PYEBYET PVEBYT CHLOEEN DMS. РПЗПЧПТЙН ОЕУЛПМШЛП РПЪЦЕ. h FTEFSHYI, YURPMSHPCHBOYE UUSCHMPL LCA PFLTSCHFYS OPCHPZP PLOB CHSCHCHBOP FPMSHLP DRYER, DE CH YUFP Netscape UPUFPSOYY RPOSFSH UPVSCHFYE onclick (EEMYUPL NSCHYSHA) EUMY EPP ORTPYUSIPCHDYF Internet Explorer DEMBEF LFP U MЈZLPUFSHA, OP OBN PF LFPZP OE MEZUE: ULTYRFSH DPMTSOSCH TBVPFBFSH CH MAVPN VTBHATE.
TEBMYBGY
rPDZPFPCHYN ZhBKM newfile.htm, UPDETTSBEYK UMEDHAEYK LPD:
YUFPVSH YBLTSCHFSH PLOP, EMLOYFE YDEUSH.
pVTBFIFE CHOINBOYE, UFP UFTPLB U FESPN
TBPTCHBOB: OYUESP UVTBYOPZP, HTML FBLYE CHEEI RETEOPUIF URPLPKOP. uFTBOOPE OBYUEOE RBTBNEFTB href - "#" - OETEDLP YURPMSHKHEFUS FPZDB, LPZDB UUSCHMLB LBL FBLPCHBS OHTSOB, B RETEIPD RP OEKHEKOEKU DBMTSO
dBMEE. h FPN ZHBKME, YB LPFPTPZP CHSCH IPFIFE PFLTSCHFSH OPCHPE PLOP, OHTSOP UDEMBFSH DCHE CHUFBCHLY. RETCHBS - CH WELGY HEAD.
hFPTBS - ZDE-OYVKHSH CH FEME UVTBOYGSCH:
YUFPVSH PFLTSCHFSH OPCHPE PLOP, EMLOYFE YDEUSH.
FERETSH RPUNPFTYN, UFP X OBU U CHBNY RPMKHYUIMPUSH. lTPNE FPZP, NPTSOP EЈMLOKHFSH.
LOOFBFY, JNECFE CH CHYDKH: ЪBLTSCHFSH PLOP FBLYN PVTBYPN CH UNPTSFE FPMSHLP CH FPN UMKHYUBE, EUMY POP VSCHMP PFLTSCHFP RTY RPNPEY JavaScript.
n FPN, LBLYE EEЈ RBTBNEFTSCH NPTSOP ABRYIBFSH PE CHUFTFEOOKHA ZhHOLGYA window.open, CHCH RTPYUIFBEFE CH THLPCHPDUFCHE RP JavaScript PF W3C. ;-)
PYASUOOEEOS
jHOLGYS OpenWin UPDETTSIF UVBODBTFOSCHK NEFPD JavaScript window.open, YURPMSHHAEYKUS DMS PFLTSCHFYS OCHPZP PLOB. h LBYUEUFCHE RBTBNEFTPCH NSCh RETEDBЈN LFPNKH NEFPDKH (YMY ZhHOLGYY, SFP RPYUFE FP TSE UBNPE):
1. "nowyplik.htm" - YNS DPLKHNEOFB, LPFPTSCHK DPMTSEO PFLTSCHFSHUS CH OPCHPN PLOE.
2. "moje okno" - YNS LFPZP PLOB DMS DBMSHOOEKYY UUSCHMPL O OESP. xLBSCHBFSH OE PVSBFESHOP, OP RBTH RHUFSHI LBCHSCHYUEL ("") CHUЈ TBCHOP RTYDЈFUS RPUFBCHYFSH, F.L.
3. "szerokość = 300, wysokość = 250, pasek narzędzi = nie"- OBVPT UFBODBTFOSHI RBTBNEFTPCH UP YOBYUEOYSNY. h DBOOPN UMKHYUBE - MYOEKOSCHE TBNETSCH PLOB Y YOZHPTNBGYA P FPN, UFP POP OE DPMTSOP YNEFSH RBOEMY YOUFTKHNEOPCH. YBNEFSHFE, UFP YOBYUEOIS RBTBNEFTPCH S RYYKH VE LBCHSCHYUEL.
uMEDHAEBS YUBUFSH LPDB ( Edeusz) RTEDRYUSCHCHBEF VTBKHETKH YURPMOYFSH ZHHOLGYA (NEFPD) OpenWin RTY EEMULE O UMPCH YDEUSH, PZHPTNMEOOPN LBL RHUFBS UUSCHMLB (href = "#").
fPYUOP FBLKHA TSE ZHPTNKH ABRYUY YURPMSHHEF ULTIRF, TBNEEЈOSCHK CH DPLHNEOFE, LPFPTSCHK PFLTSCHCHBEFUS CH OPCHPN PLOE. uFBODBTFOSCHK NEFPD window.close ЬBLTSCHCHBEF FELHEE PLOP, EUMY POP VSCHMP PFLTSCHFP U RPNPESHA JavaScript. euMI NSCH IPFEMY VSCH ЪBLTSCHFSH DTHZPE PLOP, RTYYMPUSH VSH OBRYUBFSH mywin.close (), ZDE mywin - YNS PLOB, LPFPTPPE ULTYRFKH RTDUFFPIF BLTSCHFSH.
chSCHOPU ULTYRFPCH CH PFDEMSHOSCHK ZhBKM
eUFSH EEЈ PDYO CHBTYBOF ЪBRYUY LPOFEKOETB SCRIPT.
üFP POBUBEF, UFP CHUE CHBY ULTYRFSH NPZHF ITBOYFSHUS CH PFDEMSHOPN ZHBKME U TBUYYTEOYEN. js. eUFEUFChEOOP, B FPN UMHYUBE OE OHTSOP RYUBFSH LMAYUECHPE UMPCHP SCRIPT H UBNPN ZHBKME: RTPUFP RPNEUFYFE RTYCHEDЈOOHA CHSCHYE UFTPLH B TBDEME HEAD, NY MAVBSHR ZHOBMYU. üFP HDPVOP EEЈ Y RPFPNKH, UFP RTY CHP'NPTSOPN YUNEOOOY ULTYRFB CHBN OE RTYDЈFUS YUNEOSFSH CHUE HTML -ZHBKMSCH, LPFPTSCHE O OEZP USUSCHMBAF.
ъБЛМАЮЕОЕЙЕ
rPOSFOP, UFP RPLB EEЈ OYUEZP OE RPOSFOP. uPVUFCHEOOP, S OE DBCHBM PVEF HYUIFSH CHBU SISHLH CH RPMOPN PVYAЈNE: DMS LFPZP EUFSH NBUUB KHNOSCHI Y RPMEOSHI LOIZ. rTPVMENB CH FPN, YUPP PYUEOSH YUBUFP X MADEK, RTPYUIFBCHYI FBLYE LOYZY, CHPOBOILBEF NBUUB CHRTPUPCH YNEOP CHTENS RETCHPK RPRSCHFLY TEBMSCHEYUPCHBFSHT y ChPF FHF, S OBDEAUSH, NPЈ NBMEOSHLPE THLPCHPDUFCHP PLBTSEFUS RPMEHOSCHN.
z TBUUNPFTEM CHBTYBOFSH TEYEOYS DCHKHI YBDBYU, LPFPTSCHE YUBEE CHUEZP CHUFTEYUBAFUS RTY RPUFTPEOY CHEV-UVTBOYG. LPOEUOP TSE, CHBN OKHTSOP BOBFSH VPMSHIE P JavaScript: CHP'NPTSOP, YNEOOOP HZMHVMEOYEN OBOYK NSCH Y ABKNЈNUS O UMEDHAEN HTPLE. b UEKYUBU - OBRPUMEDPL - OEULPMSHLP RTBCHYM, LPFPTSCHE OEPVIPDYNP RPNOFSH PE CHTENS RTPZTBNNYTPCHBOYS O JavaScript.
1. zaakceptowany JavaScript YUHCHUFCHAYFEMEO L TEZYUFTH.
IBL HTSE ZPCHPTYMPUSH TBOSHYE, RETENEOOSCHE temp J Temp DMS SJSHLB JavaScript OE PDOP Y FP CHE: X OYI VHDHF TBOBOOCHE BOBYUEOIS, RPFPNKH VHDSHFE CHOINBFEYPE.
2. IBTDSCHK PRTBFPT DPMTSEO PLBOYUYCHBFSHUS FPULPK U ЪBRSFPK.
FEPTEFYUEULY RPUMEDOIK PRTBFPT VMPLB (...) NPTSOP RYUBFSH Y VE'FULY U BRSFPK, OP MKHYUYE EЈ CHUЈ-FBLY UVBCHYFSH… LTPNE UREGIBMSHCHET PZPBUCHPN
3. ОЕ ЬВЩЧБКФЕ PVTBNMSFSH ULTYRFSH UYNCHPMBNY LPNNEOFBTYS.