ingångWebbdesign med javascript. Videohandledning: Lär dig JavaScript
V modern webbdesign Javascript är bara en viktig komponent. Förutom dess funktionalitet kan Javascript dramatiskt förbättra den övergripande användarupplevelsen genom att skapa olika övergångseffekter som mjuka övergångar och bildanimationer. Tack vare Javascripts öppna arkitektur behöver vi inte längre skriva separata skript från grunden. Här är 47 Javascript-plugins som du kan använda för att förbättra din webbplats användarupplevelse och funktionalitet. Se till att kolla in exempel på webbplatser som visar hur du kan använda dessa plugins.
De två mest populära Javascript-ramverken
De två mest använda Javascript-ramverken idag är jQuery och MooTools. Ta en titt på undersökningen nedan:
Popup-bilder och zoom
Du är förmodligen bekant med Lightbox - enkelt Javascript som används för att lägga över bilder på den aktuella sidan. Den ursprungliga Lightbox släpptes 2005. Sedan dess har många skript släppts med liknande funktionalitet, men med olika metoder och Javascript-bibliotek.
Denna plugin liknar Lightbox JS, endast skriven i jQuery-biblioteket.
Thickbox är jQuery plugin som är väldigt lik Lightbox, förutom med fler funktioner. Det låter dig visa: enstaka eller flera bilder, inline-innehåll, innehåll i en flytande ram eller innehåll som skickas via AJAX i en hybridmodell.
Obs: Web Designer Wall använder Thickbox för att visa sina bildgallerier och demohandledningar.
Highslide JS tjänar samma syfte som Thickbox, men har också en zoomeffekt som låter dig dra överläggsbilden.
FancyBox är ett jQuery-plugin som designades för att ersätta den överanvända Lightbox. Den har liknande funktioner men snyggare övergångseffekter (design i Mac-stil).
jQZoom låter dig visa förstorade miniatyrbilder. Denna teknik används ofta på webbplatser. e-handel(se Gap-webbplatsen för ett exempel).
Gallerier och bildspel
Bildspel 2! Detta är en javascript-klass för Mootools 1.2 för att animera presentationen av bilder på din webbplats.
Med hjälp av mootools v1.11 låter detta bildspel och javascript-gallerisystem dig skapa enkla och smidiga (smidig övergångsteknik) bildgallerier, bildspel, affischer och många andra coola prylar för din webbplats.
Galleria är ett javascript-bildgalleri skrivet i jQuery. Den laddar bilder en efter en från en osorterad lista och visar miniatyrer när varje bild laddas. Den kan skapa olika ikoner om du väljer, skalad eller oskalad, centrerad eller beskuren för att passa ikonmarginalen som definieras i CSS.
NoobSlide är en MooTools-klass som låter dig skapa bildspel och reglage synkroniserade med en timer. Kolla in den här sidan för en demo.
Här är en demo av en skjutreglage från jQuery UI-biblioteket som används för att skapa en produktskjutare som den på Apple - Mac-webbplatsen.
Karusell
jCarousel är ett jQuery-plugin som låter dig styra en lista med objekt horisontellt eller vertikalt. Objekt, som kan vara statiskt innehåll i HTML eller laddade med (eller utan) AJAX, kan rullas framåt och bakåt (med eller utan animering).
Den vändande komponenten hanterar innehållsförteckningen ( HTML-element LI inuti UL-taggen), som kan visas vertikalt eller horisontellt. Innehåll kan rullas upp och ner med eller utan animering. Innehållet kan referera till statiskt HTML-innehåll, eller så kan objektlistan genereras dynamiskt i farten (med eller utan att använda AJAX).
Carousel Slideshow är ett välkänt DHTML-skript för att visa bilder på din webbplats. Den visar bilder i 3D, som en karusell.
iCarousel är ett gratis javascript-verktyg med öppen källkod för att skapa widgets i karusellstil. Du kan också använda iCarousel som en nyhetsticker/scroller eller som ett bildgalleri.
Panelreglage
Coda Slider är ett jQuery-plugin som efterliknar bildeffekten av paneler, liknande Coda-webbplatsen.
Sliding Tabs är ett mootools 1.11-plugin med mycket trevliga effekter. Detta är en klon av något som används av Panic Softwares Coda-sajt, som i sin tur liknar en widget som används av iTunes Music Store-webbplatsen.
Flikar
jQuery Tabs är ett kraftfullt och flexibelt jQuery-plugin som låter dig skapa helt anpassningsbar navigering med flikar (rekommenderas starkt).
En annan bra handledning från jQueryForDesigners.com visar hur du skapar grundläggande navigering med flikar med jQuery.
MooTabs är en liten (3kb) klass för MooTools. Som namnet antyder är dess huvudsakliga syfte att hjälpa dig skapa enkla navigeringsflikar.
En mycket flexibel jQuery-plugin som låter dig animera när du rullar till valfri position på en webbsida med anpassningsbara alternativ för radering och rullningshastighet.
Ett enkelt MooTools-skript som kan skapa smidig rullning till ett ankare på en webbsida.
En konfigurerbar jQuery-plugin som visar verktygstips - antingen med statiskt HTML- eller AJAX-innehåll.
Ett annat bra plugin för verktygstips.
Ett mycket enkelt jQuery-skript som visar en verktygstipssträng och en förhandsgranskning av bilder (jag använder det på Best Web Gallery).
Dragspelsmeny
Denna plugin skapar dragspelsmenyer. Det fungerar med kapslade listor, definitionslistor eller bara kapslade div.
Dragspelsplugin kan perfekt markera och visa innehållet du behöver.
Image Menu är ett MooTools-plugin som kan skapa horisontella dragspelsmenyer med bilder.
Ersätter Flash-text och bild
sIFR kan ersätta korta utdrag av vanlig webbläsartext med det renderade typsnittet du väljer, oavsett om det är installerat på dina användares system. Den utför sin uppgift med en kombination av javascript, CSS och Flash.
En jQuery-plugin som kör sIFR-funktionerna åt dig.
Facelift Image Replacement är ett bildersättningsskript som dynamiskt genererar en representation av text i en bild på din webbsida i typsnitt som annars kanske inte är tillgängliga för dina besökare. Den genererade bilden infogas automatiskt på din webbsida via Javascript och är synlig i alla moderna webbläsare
Användare som besöker alla typer av webbresurser stöter ofta på intressanta icke-standardiserade lösningar på dem och vill göra detsamma på sina webbplatser. Oftast är sådana lösningar knutna till användningen av JavaScript.
I den här artikeln går jag igenom JavaScript, ett skriptspråk för att skapa interaktiva webbsidor, och vad du kan göra med JS. Vi ska titta på exempel på JavaScript-användning och se hur det kan hjälpa oss.
Vad kan du göra med JavaScript?
Ändra sidan, skriv text på den, lägg till och ta bort taggar, ändra elementstilar.
Reagera på händelser: skriptet kan vänta på att något ska hända (klicka / hovra, sidan har laddats klart) och reagera på det genom att köra en funktion.
Genom att till exempel föra musen över en länk eller bild kan du visa ett verktygstips. Genom att klicka med musen kan du byta innehåll i blocket. När sidan har laddats klart, visa ett popup-fönster för reklam. Du kan ändra utseendet på sidan beroende på tid på dygnet.
JavaScript. Snabb start
Kör förfrågningar till servern och ladda data utan att ladda om sidan.
Till exempel, om en användare lämnade en kommentar på webbplatsen eller i gästboken, kommer denna kommentar omedelbart att visas utan att sidan laddas om. Du kan också ladda upp filer till servern samtidigt som nedladdningsförloppet visas i procent.
Ställ in och läs cookies, validera data, visa meddelanden och mycket mer.
Till exempel, vid det första besöket på webbplatsen, visas ett popup-fönster för användaren och en cookie ställs in. Och vid efterföljande besök på denna resurs visas inte popup-fönstret, eftersom cookien redan har ställts in.
Du kan också kontrollera riktigheten av den inmatade e-posten, kontrollera det angivna telefonnumret för överensstämmelse med det önskade formatet och omedelbart visa ett meddelande om riktigheten eller felaktigheten av de inmatade uppgifterna.
Exempel på JavaScript-användning
Användningen av JavaScript är så bred och varierad att det finns tusentals exempel på användning, och fortfarande kommer listan inte att vara komplett, eftersom nya skript skrivs varje dag. Jag är säker på att du har sett många av exemplen nedan på olika webbplatser. Och allt detta implementeras med hjälp av JavaScript.
Galleriet som presenteras i exemplet är naturligtvis inte det enda. Sådana gallerier, som allt annat, kunde föreställas i hundratals. Och jag, för att inte blåsa upp listan på obestämd tid, gav ett exempel från de mest populära grupperna av manus.
Vad ger det oss?
1. Bekväm navigering på flera nivåer
Genom att använda JavaScript kan du skapa kompakta menyer på flera nivåer, navigering på flera nivåer i sidofält. Menyunderpunkter öppnas antingen genom att klicka eller genom att hålla musen.
Många nätbutiker har rullgardinsmeny på sidan. Se shop.by som ett exempel. Föreställ dig hur mycket det skulle sträcka sig nedåt om underobjekten inte släpptes när de svävade eller klickade, utan alla var synliga på en gång!
2. Genom att använda gallerier och reglage kan vi visa fotografier, bilder av ytterligare typer av varor, bekvämt och kompakt ordna fotografens portfölj.
JavaScript. Snabb start
Lär dig grunderna i JavaScript på praktiskt exempel på att skapa en webbapplikation
Gallerier är särskilt relevanta för detaljvisning av varor i nätbutiker, när du behöver visa olika typer av varor. Med deras hjälp kan vi visa användaren alla bilder i ett litet block på en gång, vilket ger både små och förstorade bilder för visning.
Hur mycket utrymme skulle behövas för galleriet nedan?
3. På sistone har många widgets visats i sidokolumnerna på webbplatser. Det här är widgets för populära sociala nätverk, kategorier, inläggsarkiv, kalendrar, senaste bloggkommentarer, populära inlägg och mycket mer.
Det bör noteras att på många webbplatser kan några av widgetarna helt enkelt raderas, eftersom de inte är meningsfulla, men de tar upp plats.
Men vad händer om du fortfarande behöver få plats med många widgets?
Det är här JavaScript-lösningen med "tabs" kommer till undsättning.
Med deras hjälp kan du passa alla widgets bra i sidokolumnerna på webbplatsen. För bättre uppfattning kan du gruppera widgets i "flikar".
Du kan till exempel lägga widgets för sociala medier i en "flik", kategorier och arkiv i den andra osv. Detta kommer att spara utrymme och göra webbplatsen mer användarvänlig.
4. Genom att använda JavaScript kan du också dramatiskt förbättra kontaktsidan för din webbplats eller dina kunders webbplatser.
bädda in tips i formulärfält;
kontrollera data inmatade i formulärfält och visa felmeddelanden;
skicka formulärdata utan att ladda om sidan;
placera en karta med en rutt.
5. För de som lägger upp tabelldata på sidan kommer det att vara mycket användbart att använda sortering av data i tabellen.
6. De som lägger ut någon statistik på sajten i form av grafer och diagram kommer att ha stor nytta av att kunna skapa interaktiva diagram och grafer i JavaScript.
Med hjälp av JavaScript kan du också skapa alla möjliga effekter på webbplatsen - som smidig glidning av element, deras rörelse, tona in och ut och allt som räcker för din fantasi.
Allt detta kan göra sajten mer användarvänlig, mer interaktiv, mer teknisk.
Slutsats
Som du kan se är omfattningen av JavaScript mycket bred. Dessa är gallerier, skjutreglage och flikar, och alla typer av interaktiva element, och kartor och grafik, och arbetar med formulär och mycket, mycket mer.
Jag tror att alla kan hitta användbar användning av JavaScript för sig själva och använda den på sina webbplatser eller på sina kunders webbplatser.
Jag hoppas att du gillade artikeln och lärde dig av den om de nya funktionerna som kan implementeras tack vare JS.
Använder du JavaScript på dina webbplatser? Vilka är dina största svårigheter med att använda JavaScript?
Låt oss veta i kommentarerna till artikeln.
JavaScript. Snabb start
Lär dig grunderna i JavaScript med ett praktiskt exempel på hur du bygger en webbapplikation
Resource Creative Bloq publicerade material där dess författare delade med sina läsare de bästa, enligt deras åsikt, exempel på att använda JavaScript för att skapa webbplatser. CPU:n valde de 30 mest intressanta resurserna.
1. Portfölj av Mike Coos
Webbdesignern Mike Kus portfölj är designad på ett "rent och diskret sätt", skriver redaktionen för Creative Bloq. Den kombinerar stora bilder med enkla element i användargränssnittet.
"Jag tänker på mitt arbete som ett varumärke. Det finns ingen anledning att lägga till på min sida extra element design, säger Koos.
Kus portfölj är lika lätt att navigera på alla typer av skärmar – han konstaterar att detta var den svåraste effekten att uppnå. Vart och ett av designerns projekt representeras av en bild eller fotografi - så att användaren vill veta mer om arbetet.
2. Hej måndag
Webbplatsen för den kreativa byrån Hello Monday har genomgått betydande förändringar, noterar författarna till artikeln. Ett enormt arbete har utförts av företagets utvecklare. De lyckades göra gränssnittet användarvänligt.
Gammal sida för Hello Monday-byrån
Nu innehåller sajten exempel på beställningar som redan genomförts av byrån – varje projekt har sin egen sida, som beskriver dess historia, vilket ger användaren en djupare förståelse för vad Hello Monday gör.
Uppdaterad Hello Monday-webbplats
"Vi försökte gå bort från grundplanen för hur en kreativ byråwebbplats ska se ut", säger Katie Hertel, projektledare för Hello Monday-webbsidans redesign. Författarna till materialet tycker att webbplatsen är mycket attraktiv och lyhörd, vilket underlättas av organiseringen av projekt på huvudsidan: den kompletteras automatiskt med nytt byråarbete när du rullar nedåt.
3. Multeor
Multeor är ett massivt multiplayer-onlinespel skrivet i JavaScript med HTML5-canvas-elementet. Den designades av Arjen de Wise och Philidor Weise och designades av Arthur van Hoog. Huvuduppgiften för användaren i spelet är att kontrollera meteoriternas fall och få poäng för förstörelsen som lämnats av honom.
Spelet använder en Node.js-server för att hantera kommunikation mellan stationära och mobila enheter med hjälp av WebSockets.
Weise betonar att de befintliga spelbiblioteken inte användes när Multeor utvecklades:
Vi skrev allt själva - det var väldigt spännande, dessutom lärde vi oss mycket nytt. Det faktum att vi inte var beroende av specifika sammansättningar och prefabs gav oss en viss handlingsfrihet: vi behövde inte ta itu med att rendera befintlig grafik, hantera kollisioner och separat beskriva systemet som ansvarar för explosioner.
4. Tidslinje för brott
Crime Timelime är en aggregator som samlar in brottsdata från Storbritannien med hjälp av offentliga API:er. Det låter användarna veta hur det går i deras region.
"Vi organiserade sajten på ett sådant sätt att den visade en karta över regionen och platsen där brotten begicks - för den månad som valts av användaren i panelen nedan", säger projektutvecklaren Alex Miller.
Resursen använder Google Maps API, jQuery och jQRangeSlider användes för att skapa en panel med månader. När en användare interagerar med kartan - till exempel klickar på en specifik plats på den - uppdaterar webbplatsen bilden med JavaScript. The Crime Bubbles skapades med CSS och animerades med använder jQuery.
Here is Today JavaScript används för att skapa animationer. Skaparen av resursen, designern Luc Twyman, förklarar sin idé så här: "Jag ville skapa något som skulle ge alla en känsla av tidsskalan. Here is Today hjälper till att förstå hur omfattande universums historia är."
Twyman noterar att han redan från början bestämde sig för att överge standardmåttenheterna - pixlar, och beskrev sina egna utifrån storleken på skärmen. Detta gjordes för att säkerställa att sidan ser likadan ut på alla enheter.
Detta är det andra JavaScript-projektet skapat av designern, och i det använde han element som han inte använde i det föregående. Twyman finner dock i språket många likheter med andra högnivåprogrammeringsspråk, förutom, enligt honom, har JavaScript ganska detaljerad dokumentation, och ett stort antal exempel har plockats isär på Internet (inklusive på tematiska formulär).
6. Tweetmap
Tweetmap plottar länder på kartan i proportion till antalet tweets som skickats från dem. Tjänsteutvecklaren Rob Hawkes listar flera tekniker som användes vid skapandet: TopoJSON, D3.js, Node.js, PhantomJS och speciella algoritmer för att konstruera intilliggande kartogram i realtid.
Vi valde Node.js för att vi redan hade erfarenhet av det och för att det är en enkel, snabb och flexibel plattform. För att animera kartan (i TopoJSON-format) använder vi D3, ett fantastiskt bibliotek för datavisualisering. I synnerhet använder vi i stor utsträckning geomodulen, som låter oss göra komplexa geografiska beräkningar och transformationer.
För att undvika problem med presentationen av kartor i klientens webbläsare, genererar systemet kartor på servern med hjälp av D3, startar och renderar dem med hjälp av PhantomJS-motorn och överför dem först därefter till användaren - detta undviker att skapa "hål" vid visning av kartor .
7. Resan
The Trip är en interaktiv film gjord med JavaScript och HTML5 (ingen Flash). Otto Nascarella, skaparen av projektet, anser att uppgiften att utveckla liknande tjänst visade sig vara väldigt svårt:
De flesta av de svårigheter vi stötte på berodde på det faktum att HTML5 vid tidpunkten för skrivningen inte hade möjlighet att utveckla webbläsare. Sedan bestämde vi att vi skulle rekommendera kunder att använda Chrome.
JavaScript-webbplatskoden använder jQuery för nästan allt. Utvecklarna använde också TextBlur och TextDrop för att sudda ut och animera text.
8.Si Digital
Den här sidan, skriven i JavaScript, är design- och marknadsföringsbyrån Si Digitals nya portfölj och blogg. Projektledaren Alex Kruk förklarar animeringen på hemsidan så här: "Väsken som rör sig genom rören guidar användarna genom vår portfölj - den aktiverar bildanimering i varje steg av kundens webbplatsutforskning."
För att uppnå en liknande effekt använde Crook metoden jQuery.animate (). Dessutom, tillägger han, var det nödvändigt att välja rätt hastighet för att fylla rören med vätska - trots allt läser alla i olika takt.
En interaktiv graf på sidan som beskriver genomförda projekt och byråns team, implementerad med jQuery. Tidslinjen, enligt Krook, genereras dynamiskt – baserat på information från databasen, med hjälp av Ajax-teknik.
9. Jean Halfsteins hemsida
Jean Halfstein är webbdesigner. I hans portfolio lockade artikelförfattarna mest hemsida- och animation på den. ”Jag hade riktigt bra tid att mixtra med de olika effekterna. Jag gillar verkligen att använda ny teknik, så jag bestämde mig för att göra huvudsidan på min sida till en sorts sandlåda - där har jag kul med Three.js och HTML5 canvas-elementet, säger Halfstein.
Idén med designern var att skapa en portfölj som följer de nuvarande trenderna - den måste vara minimalistisk och samtidigt ge något nytt till webbdesignen. Så han bestämde sig för att använda mus- och dragkontroller för animationer snarare än navigeringsknappar.
10. Nick Jones Portfölj
Enligt Jones, när han utvecklade sajten, hade han mer erfarenhet av Flash än med JavaScript, men han ville prova något nytt – att förstå vad han kunde. "Jag visste direkt att JavaScript-syntaxen var nästan densamma som ActionScript-syntaxen - så jag vände mig snabbt vid det," beskriver Jones kodningsprocessen.
Jones minns att Flash inte gav honom tillgång till att arbeta med musrörelser – det var en ny upplevelse som han verkligen gillade. Utvecklaren ville uppnå en responsiv webbplats som han inte kunde uppnå med hjälp av klassövergångar i CSS. Jones är nöjd med resultatet:
Om du ska byta från ActionScript till JavaScript, tveka inte en sekund. När jag byggde min webbplats ville jag förstå om JavaScript är kapabelt till vad Flash kan. Och jag är väldigt imponerad.
11. MapsTD
MapsTD är ett onlinespel baserat på försvaret av en fästning. Fästningen är användarens eget hem, som han måste skydda från skurkarna som outtröttligt strövar omkring på gatorna i området.
Projektskaparen Duncan Barclay förklarar hur det fungerar: "Vi använde Google Maps API, MooTools och JavaScript. Det svåraste är att hitta vägen som användarens fiender kommer att följa. När spelaren har valt startpunkt söker tjänsten efter longitud och latitud och beräknar möjliga vägar med Google."
Allt eftersom spelet fortskrider dyker fler och fler motståndare upp på skärmen. Barclay säger att utvecklare var tvungna att "kämpa" med tidpunkten för webbläsare - faktum är att de flesta av dem med tiden minskar frekvensen av att söka efter uppdateringar på sidan, och det var nödvändigt att se till att detta inte hände.
Ett annat problem var att allt eftersom spelet fortskred ökade antalet fiender och produktiviteten minskade. Som ett resultat beslutade utvecklarna att öka nivån på skurkarnas färdigheter, inte deras antal.
12. Glimtkataloger
Glimpse-resursen utvecklades gemensamt av Windows IE-teamet och TheFind-projektet, och kombinerar sökmotorn TheFind och samma utvecklares tillämpning för onlineshopping på Facebook. Som en del av Glimpse har programmerare släppt sitt eget ramverk baserat på Turn.js.
Teamets mål från början var att göra Glimpse till en webbapplikation, inte en vanlig webbplats. Utvecklarna använde modell-vy-beteende-paradigmet, som separerar datamodellen i tre separata komponenter, användargränssnitt och interaktion med kunden. Tjänsten använder Thrift-modellrenderingsmallar på klientsidan eller JSON beroende på beräkningskraft klient.
Turn.js-biblioteket har också använts i utvecklingen av kataloger. Med hjälp av CSS och JavaScript ges de modeller som presenteras på sajten volym – genom att lägga skuggor över bilden.
13. Red Bull Music Academy Radio
RBMA Radio använder verktyget Modernizr, som möjliggör utveckling av webbläsare i HTML5 och CSS. Modernizr uppdateras ständigt så att webbplatsskapare kan förbättra koden när nya funktioner introduceras.
Vid implementeringen av tjänsten användes dessutom Backbone.js-biblioteket - med hjälp av det laddas brickor för att skapa effekten av en oändlig sida.
14. Nouvelle Vague
Nouvelle Vague är en sida från den franska designbyrån Ultranoir. Tjänsten låter dig "spåra" tweets av en given hashtag. Det implementeras med JavaScript, WebGL och HTML5. HTML5 är dock bara ansvarig för teasern när en resurs öppnas.
En av utvecklarna av byrån sa att det tog fyra månader att skapa sajten och tre personer arbetade på den. "Det var verkligen spännande för oss att prova att arbeta med WebGL", förklarar han.
Huvudmålet med projektet var att återskapa atmosfären från videoskärmsläckaren med hjälp av 3D-bilder. Teamet har fördjupat sig i de nya teknologierna HTML5, CSS3 och JavaScript, och tror att dessa språk kan bli standarden för att arbeta med 3D i framtiden - på grund av högkvalitativ rendering, rik interoperabilitet och lyhördhet.
15. Konvergensen
The Convergence är ett webbläsarspel som påminner om Super Mario Bros. Den visar upp den fantastiska kraften hos JavaScript och HTML5 och bevisar att HTML5 kan göra sitt jobb lika bra som Flash.
Utvecklarna lovar att lägga till ljud och nya nivåer till spelet i framtiden, samt stöd för Mozilla Gamepad API.
16. Kindle Cloud Reader
Denna webbapp gör orden "köp en gång, läs på alla enheter" till verklighet. Den använder HTML5-teknik, JavaScript API, jQuery och jQuery UI bibliotek och flera jQuery plugins, inklusive jScrollPane för sidrullning och jQuery Templates. Dessutom använde utvecklingsteamet WebSQL för att stödja offlineläge.
17. Les Enfants Terrible
Sajten som lanserats av WeFail studio, enligt författarna till anteckningen, ser skrämmande ut, men fortfarande väldigt cool. Resursen är gjord i en ganska skarp stil. JavaScript används för att animera interaktioner mellan användare och system. För att göra rullning endast för enskilda gränssnittselement använde kommandot jQuery ScrollTo-plugin. För att få videon att inte visas i popup-fönster, utan direkt på sajten, användes Shadowbox.js-biblioteket.
Dessutom används jQuery Cycle-pluginen i Les Enfants-koden – den ansvarar för att visa bilder och exempel på byråns arbete.
"Vi lanserade Les Enfants för att förstå prestandafunktionerna hos JavaScript. Det visade sig att i kombination med СSS Transform kan du uppnå utmärkta resultat"Säger utvecklaren Martin Hugh.
För inte så länge sedan, noterar Hugh, kunde den här typen av saker bara göras med Flash, men nu har det ett gångbart alternativ, JavaScript.
18. Pinterest
Pinterest är ett utmärkt exempel på att använda JavaScript för att skapa en oändlig sideffekt. För att skapa webbplatsen behövde du jQuery-verktyg, jQuery UI och PageLess-plugin.
Enligt författarna till anteckningen är PageLess avgörande för Pinterest, eftersom oändlig rullning och laddning av nya pins är mycket effektivare för att hålla en användares uppmärksamhet än sociala funktioner som att kommentera inlägg.
19. Kärleksbombbyggare
Love Bobm Builder hjälper användare att uttrycka sin kärlek eller tacksamhet till någon. Det är en snygg och enkel sida som låter dig skapa och skicka ett bombmeddelande.
Resursen använder verktyget Modernizr för att uppdatera JavaScript och HTML5-kod i tid.
20. Michelberger Sprit
När en användare går in på sajten är det första han ser den så kallade "preloader" - det kan tyckas att den är gjord med Flash, men det är den inte. HTML5 och JavaScript är ansvariga för att fylla glaset med öl när det laddas.
Resursen använder den partiella rullningsfunktionen - endast för vissa gränssnittselement, och låter användaren interagera interaktivt med bilder.
Genom att klicka på djurmaskerna skickas klienten till andra scener - alla animationseffekter i vilka utförs med jQuery.animate ().
21. Trello
Trello är en samarbetsapp eller en-till-en-schemaläggningsapp där användare kan skapa listor över slutförda och utestående uppgifter och dela framsteg i realtid. Sajten är utvecklad med Node.js, MongoDB och Backbone.js.
Trellos medgrundare Daniel Le Cerminan förklarar att att använda bara ett språk när man skriver en webbplats hjälper nya teammedlemmar att komma in i utvecklingsprocessen snabbare.
Kommunikation mellan användare implementeras med hjälp av Web Sockets - Le Cerminan konstaterar att detta är tillräckligt ny teknologi, så det fanns vissa svårigheter med att sätta upp det.
22. BrowserQuest
Detta retrospel från Little Workshop är designat för att visa upp kraften i HTML5, JavaScript och särskilt Web Sockets. Det kan stödja interaktion mellan tusentals användare samtidigt.
"Att skapa ett spel för flera spelare är ett bra sätt att visa hur sådan teknik kan fungera tillsammans. BrowserQuest förlitar sig på Node.js-servrar, som var och en kan köra flera instanser av spelvärlden, säger studioutvecklaren Guillaume Lecolné.
23. JS1k
JS1k är en årlig tävling vars uppgift är att skapa en sida i JavaScript om ett givet ämne (oftast animerade bilder). Dess vikt bör inte överstiga 1 KB.
Årets tema är "Här är drakar".
Work-vinnare av tävlingen 2012. Författare - Philip Buchanan, tema - "Kärlek"
2012 års vinnares arbete vägde initialt 8 KB - men på en dag kunde Philip minska sin storlek till den erforderliga 1 KB genom att optimera trädgenereringsalgoritmen:
Min taktik var att "ärligt fuska" kompilatorn. Använd till exempel "a? b: c "istället för" om (a) b annars c "sparar 8 byte.
24. Tidslinje
Tjänsten hjälper användare att skapa tidslinjer och är mycket enkel att använda. Den interaktiva tidslinjen kan innehålla tweets, videor, foton och ljudinspelningar. Din tidslinje kan beskrivas med JSON eller Google docs- eftersom det är bekvämare för klienten själv.
25. Rita en Stickman
Huvudidén med tjänsten är att ge användaren möjligheten att ha lite kul genom att ta del av en interaktiv berättelse - hjälpa den ritade mannen att övervinna olika hinder. Skisser på webbplatsen görs med hjälp av musen.
JQuery och ett bibliotek att arbeta med vektorgrafik Raphal.js. Genom att implementera projektet med Raphal hjälpte utvecklarna att undvika prestandaproblem på de flesta enheter och alla webbläsare.
Nu när vi har diskuterat metoder för att lära sig HTML och CSS, är det dags att rikta vår uppmärksamhet mot JavaScript, den tredje nyckelfärdigheten hos en webbdesigner. JavaScript är ett skriptspråk. Detta betyder att dess syntax är något mer komplex än HTML- och CSS-syntax. Det finns mycket mer att lära sig innan du kan skriva JavaScript-kod flytande. Jag menar, de flesta tar lite längre tid att lära sig JavaScript än lära sig HTML och CSS. Det finns många åsikter om det bästa sättet att lära sig JavaScript, och alla dessa åsikter är inte desamma som mina.
Men jag är faktiskt emot att använda ett specifikt sätt att lära mig JavaScript. Min JavaScript-inlärning gick fel. I grund och botten plockade jag bara bitar av information om språket, antingen från tutorials eller kodavsnitt, vilket skapade stora luckor i min JavaScript-kunskap som jag sedan var tvungen att fylla. Därför rekommenderar jag att du tar en lite längre väg som jag hoppas ska leda dig till ett bättre resultat. Först måste du förstå vad JavaScript gör exakt. JavaScript är ett programmeringsspråk på klientsidan. Frasen "client-side" betyder att koden inte körs på servern, utan i webbläsaren.
Språket skapades för att fungera med HTML och CSS, så det har många inbyggda funktioner för att göra det lättare att kontrollera webbplatsens beteende. JavaScript kompletterar HTMLs statiska karaktär genom att låta dig skapa interaktiva element, rendera element baserat på specifika förhållanden, animera element eller utföra valfritt antal skriptuppgifter. Att ta reda på vad JavaScript är bra för är mycket viktigt eftersom det hjälper dig att förstå när du ska använda det och vad du ska hålla utkik efter när du lär dig JavaScript.
Som jag nämnde tidigare, försök att inte lära dig JavaScript från kodavsnitt. De flesta människor använder detta tillvägagångssätt, inklusive jag själv. Med detta tillvägagångssätt hittar du en bit kod som utför den uppgift du behöver, infogar den i ett av dina projekt, redigerar och kör den. Som du vet kommer detta tillvägagångssätt att tillåta dig att behärska vissa JavaScript-färdigheter över tid, men viktigast av allt, i det här fallet, saknar du anledningen till varför just detta språk ska användas. Som ett resultat kommer du inte att helt förstå detta programmeringsspråk.
Dessutom rekommenderar jag att du först lär dig grunderna i JavaScript, och sedan börjar lära dig om bibliotek som jQuery. Att använda jQuery är en ganska frestande idé eftersom det är ett kraftfullt verktyg och många människor använder det. Du kommer omedelbart att hitta hundratals handledningar om hur du använder jQuery för din webbplats. Men att lära sig jQuery innan du ens lär dig JavaScript är ett stort misstag. Som du kan föreställa dig är att använda jQuery-biblioteket inte alltid det rätta beslutet. Och om du bara vet hur du använder ett visst bibliotek kommer du inte att kunna förstå när du ska använda JavaScript och när inte.
Detta förhållningssätt förutsätter att du åtminstone på ett strukturerat och fokuserat sätt ska lära dig grunderna i JavaScript genom till exempel en specifik kurs eller bok. Medan många tutorials lär dig hur du utför mycket specifika uppgifter med JavaScript, måste du verkligen ha en klar förståelse för dess koncept och syntax för att förstå vad som ligger bakom någon av dina handlingar. Naturligtvis behöver inte alla webbdesigners vara JavaScript-kunniga. De designers som till exempel vill göra frontend-utveckling måste kunna JavaScript flytande.
Och för de som är mer intresserade av UX-design eller visuell design borde bara grunderna vara tillräckligt. Oavsett hur djupa dina kunskaper om JavaScript måste vara behöver du behärska de viktigaste begreppen för att ha en praktisk förståelse av språket. Det viktigaste är att ha tålamod. Det tar lång tid att lära sig JavaScript, och om du ger upp att lära dig det för snabbt kommer du inte att kunna komma ihåg vad du lärde dig om du behöver det för ett projekt. Jag rekommenderar starkt att du börjar med Simon Allardyces JavaScript Essential Training-kurs, som finns i onlineutbildningsbiblioteket på lynda.com.
Den ser på JavaScript från en nybörjarsynpunkt, och den beskriver verkligen grunderna i JavaScript på det mest enkla sättet. Jag rekommenderar också ... förlåt om jag uttalar fel ... Marijn Haverbekes bok. Förresten, det här är en fantastisk kille. Hur som helst, jag rekommenderar att du läser hans bok "Veltalande JavaScript", även kallad "Modern Introduction to Programming". Den här boken är verkligen skriven på ett språk som är tillgängligt för nybörjare. Det finns många böcker skrivna på JavaScript, men den här boken är skriven av en programmerare och för programmerare. Boken "Eloquent JavaScript" skrevs på ett sådant sätt att den är en slags introduktion till språket för nybörjare.
Mest överraskande kan du köpa en tryckt version av boken, men ... Låt oss klicka på den här länken ... Det finns också en elektronisk version av den här boken. Den täcker allt JavaScript handlar om och ger några användbara exempel som du kan experimentera med för att se hur det hela fungerar. Det här är en riktigt cool liten sida. Precis som med HTML och CSS har docs.webplatform.org en JavaScript-sektion. Du kommer att tycka att det är väldigt användbart eftersom det har en del handledningar, funktioner, objekt, händelser - alla de grundläggande sakerna du behöver veta när du lär dig JavaScript.
Jag kan inte underskatta vikten av stackoverflow.com. Om du aldrig har stött på det förut, så är det värt att notera att den här webbplatsen låter dig skapa ditt konto och sedan ställa frågor till medlemmar på denna webbplats om de saker som förvirrar dig när du arbetar med dina egna projekt, eller ställa frågor om de begrepp som är svåra för dig att lära dig. Ofta ger människor många olika råd, med bra svar som får fler röster och dåliga råd berövas röster. Därför kommer du efter ett tag, tack vare feedback från communitymedlemmarna, att kunna förstå vilket svar som är bäst. Du kan inte bara ställa frågor, utan också söka efter dem på sajten. Chansen är stor att någon redan har ställt frågan du är intresserad av. Därför är stackoverflow.com verkligen en mycket användbar resurs. Precis som med HTML och CSS har Mozillas utvecklarnätverk också en JavaScript-sektion. Den innehåller mycket olika information. Dessutom finns det på höger sida av webbplatsen en sektion som listar resurserna där du kan få mer detaljerad information om ett visst ämne. En del av denna information är helt teknisk. Men i princip alla JavaScript-nybörjare kan dra nytta av det mesta av denna information i början av att lära sig detta programmeringsspråk. Om du, efter att ha bemästrat grunderna i JavaScript, har en önskan att studera detta språk mer i detalj, kan du använda en annan, ganska användbar, enligt min mening, bok - "Professionell JavaScript för webbutvecklare", vars författare är Nicholas Zakas.
Jag ska inte lura dig och hävda att jag förstått allt som står i den här boken, men jag använder det som referensmaterial, för efter att ha lärt dig grunderna i JavaScript kan det uppstå situationer när du verkar fastna och inte vet vad du ska gör nästa. Den här fantastiska boken låter dig förstå JavaScript-syntax bättre, lära dig hur du skriver effektivare kod och tillämpa inte bara grundläggande JavaScript-koncept utan också mer avancerade funktioner. Naturligtvis, om du går tillbaka till lynda.com igen, hittar du en hel del av bra JavaScript-kurser där, inklusive Simons. Analysera därför noggrant vilka kurser som finns i vårt bibliotek.
JavaScript är ett av de språk som bara kan förstås genom att omsätta det i praktiken. Därför bör tillvägagångssättet du väljer att studera det innebära implementering av många praktiska exempel.
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 OM DEKUFFCHYS CHMBDEMSHGB, TsBDOP YBTSEZP RP OEK LKHTUPTPN. FSHZHH, RPYUFY OERTYMYUOP RPMHYUIMPUSH ... HÅRTORK OE NEOOEE, VHDEN MEUUIFSH.
DP FPZP, LBL OBYUBFSH TBUULB P CHUSLIYI FEIOYUEULYI ZHPLKHUBI OM RPFEIKH RPUEFYFEMSN Y UEVE, MAVINSCHN, OBDP RTEDUFBCHYFSH, YUPP CHPPVEYT NSCH.
sshl HTML UFBFYUEO. dMS FPZP, YUFPVSH OBKHYUIFSH UVTBOYGKH "TSYFSH", PFLMYLBFSHUS OM DEKUFCHYS 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 OBPDBM nSCH U CHBNY VKHDEN ZPCHPTYFSH FPMSHLP PV PDOPN Y'OYI - JavaScript. UYOFBLUYU JavaScript CHSF YY VPMSHYPZP Y UETSHЈBOPZP SJSHLB Java, OM 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 nd FPZDB LPZP-OYVKHSH RMPIPZP PF OBYEK UVTBOYGSCH FPYUOP ICHBFIF LPODTBFYK, B OBYUIF, NSCH U CHBNY IPTPYE. b EUMY LPODTBFIK ICHBFIF LPZP-OYVHDSH IPTPYEZP? oEFHYLY! ьFINY ЪBDBYUBNY ЪBOYNBAFUS UREGBMYUFSCH RP NBTLEFYOSKH Y TELMBNE, POI JOBAF, UFP FBLPE Gemechbs zthrb, J PFZPOSF CHUEI IPTPYUPYUPY PF åh, UFP-FP S PRSFSH ъBRKHFBMUS: LCS LPZP Ts NSCh FPZDB CHPPVEE FTHDYNUS?
uOHCHB LPOFEKOETSCH
YUFPVSCH CHUFBCHYFSH LHUPL LPDB OM JAVING JavaScript CH FEMP HTML -UFTBOYGSCH, OBN U CHBNY PRSFSH RPOBDPVYFUS LPOFEKOET. chPF FBLPK:
EDYOUFCHOOSCHK RBTBNEFT, LPFPTSCHK DEKUFCHYFEMSHOP UVPIF YURPMSHCHBCHBFSH, OBSCHCHBEFUS språk. PÅ PRTEDEMSEF, OM 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- LPNNEOFBTIK, 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 HUVUD. eUMY TBNEUFIFSH LPD CH TBEDEME
..., PO PVSBFESHOP YURPMOIFUS CH FPF NPNEOF, LPZDB VTBKHET DPKDЈF DP OEZP 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 har CHBNY FPZP OE BIPFYN.Rulla över
FEIOUEEULPE ABDBOYE
rPUFBOPCHLB ЪBDBYUI OPNET PDIO.
om UVTBOYGE EUFSH LOPRLB, CHCHRPMOEOOBS CHYDE Y'PVTBCEOIS CH ZhPTNBFE GIF. oKhTsOP, YuFPVSch POB LBLYN-FP PVTBPN NEOSMBUSH RTY OBCHEDEYY OM OEЈ LKHTUPTB.
ьФПФ ЬЖЖЕЛФ RP-BOSMYKULI OBSCHCHBEFUS roll-over TH CH TEKFYOSE RPRKHMSTOPUFY ZZHELFPCH JBOYNBEF, UCHETOPE, RETCHPE NEUFP. jFBL, RTYUFHRINE.
TEBMYBGYS
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 DBMSHEEKYYI NBOYRKHMSGYK UPUFPIF CH FPN, YUFPVSH BNEOIFSH PDOP Y'PVTBTSEOYE DTHZYN, B RPFPN CHETOHFSH YUIPDOPE OM NEUPP.
CHUFBCHMSEN RETCHHA LOPRLH H HTML. LPD VKHDEF CHSCHZMSDEFSH RTYNETOP FBL:
FEZ IMG YURPMSH'KHEFUS DMS TBNEEEOYS ZTBZHYLY OM HTML -UFTBOYG. RBTBNEFTSCH namn, src, bredd І höjd ЬBDBAF UPPFCHEFUFCHOOOP YNS CHUFTFEOOOPZP CH HTML PVYAELFB DMS DBMSHOEKYI UUSCHMPL OM OEZP, YNS ZTBZHYUEULPHYUFYUPHYBYUFYT CHY
FERETSH TBNEUFYN CH TBDEME HEAD 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
POOFBMPUSH UDEMBFSH RPUMEDOEE: DPVBCHYFSH PDYO RBTBNEFT CH FES BODY:
Onload = "ImgPreload ();"
på LPDPN RPLPOYEOP. med OBNETEOOOP OE DBA DEFBMSHOSHI YOUFTKHLGYK: TBKHNEEFUS, YY UPPVTBTSEOYK MЈZLPZP UBDYUNB. OP P FPN, LBL LFP CHUЈ TBVPFBEF, TBUULBTSKH RPDTPPVOP.
PYASUOOEOS
h BZPMPCHLE UVTBOYGSCH - AV YNEOOOP CH UELGY HEAD - NSC UPDBMY ULTIRF, CHLMAYUBAEYK CH UEVS FTY ZhHOLGY: ImgPreload, ImgOn Y ImgOff. lMAYUECHPE UMPCHP funktion CH VPMSHYOUFCHE SSCHLPCH PRTEDEMSEF LHUPL LPDB, LPFPTSCHK NPTSEF VSHFSH NOPZPLTBFOP CHSCHBO YY TBMYUOSHI NEUF RTPZTBNSCH. pWAYK UMHYUBK UYOFBLUYUB CHCHZMSDIF FBL:
Funktion func_name (par1, par2, par3) (...)
TBYYZHTPCHSCHBEFUS CHUЈ LFP UMEDHAEYN PVTBPN: ZhHOLGYS U YNEOEN func_name, 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 FTI JHOLGYSI, LPFPTSCHE NSCH YURPMSHKHEN CH OBDBYUE OBDBYUE, YI OEF? b PPF JBYUEN. rTEDUFFBCHSHFE UEVE, UFP OM UVTBOYULE EUFSH oeulpmshlp LOPRPL, DMS LBTSDPK Y'LPFPTSCHI NSCH IPFINE UDEMBFSH UCHPK UPVUFCHEOOSCHK roll-over. SFP TSE, RYUBFSH PFDEMSHOKHA ZhHOLGYA OM LBTSDKHA LOPRLKH? b EUMY YI DEUSFPL? ZMHRPUFY LBLEY.
Hm OBRYYEN edyoufcheooha ZHHOLGYA LCA LBTSDPK PRETBGYY, J have RPNPESHA RBTBNEFTPCH RETEDBDYN EC yns FPK LBTFYOLY HBS LPFPTPK B DBOOSCHK NPNEOF RTPIPDYF ZHTUPT NHTUPT NHUPPHPCHPTSHY,HPLFCHBPHZF,OPPHPCHBPHZH,OPPHPCH,UPPHPCH, chPF Y CHUЈ.
CHETOЈNUS L OVYENKH LPDH.
zhHOLGYS ImgPreload 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 har UETCHETB, OP LHTUPT HKDЈF har LOPRLY TBOSHYE, Yuen NShch HCHYDYN LBLPK-OP ZHZHELF, FL ZTBZHYYUEULYK ZHBKM HKDЈF har LOPRLY TBOSHYE, Yuen NShch HCHYDYN LBLPK-OP ZHZHELF, FL ZTBZHYYUEULYK ZHBKM SHPUSHYE LBLYN SHHPUSHYE FLNBOETHYE SHPUSHYE, FL ZTBZHYYUEULYK ZHBKM SHPUSHYF dTHZPE DAMP, LPZDB FTEVKHENBS LBTFYOLB HTSE OBIPDYFUS CH RBNSFY: ABZTKHLB RTPY'PKDЈF NZOPCHEOOP.
FERETSH P UBNPK ZhHOLGY. ъBRYUSH pic2 = ny bild (); UP'DBЈF OCHSCHK PVYaELF FIRB Image, OM LPFPTSCHK U LFPPZP NPNEOF NSCH NPTSEN UUSCHMBFSHUS, B UMEDKHAEBS UVTPYULB pic2.src = button1b.gif; ZPCHPTYF P FPN, LBLPK ZTBZHYUEULYK ZhBKM UPPFCHEFUFCHHEF LFPNKH PVYAELFKH. FERETSH, ЪBRTPUYCH YЪ MAVPZP NEUFB LPDB ЪOBYUEOYE pic2.src, NSCh FHF TSE RPMKHUYN button1b.gif, UFP OBN OCH FTEVKHEFUS.
pVTBFYFE CHOINBOYE OM FP, LBLYE RBTBNEFTSCH NSCh DPVBCHYMY CH FES IMG. ъBRYUSH onmouseover = "ImgOn ();" P'OBYUBEF, UFP RP UPVSHFYA över musen (LKHTUPT CHYAEIBM OM LBTFYOLKH) DPMTSOSCH VSCHFSH CHSCHCHBOB ZhHOLGYS ImgOn, B BRYUSH onmouseout = "ImgOff;" POBUBYUBEF, UFP LKHTUPT HYЈM U LOPRLY, Y FERETSH OKHTSOP ABKHUFIFSH ZhHOLGYA ImgOff. lBL 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 OM 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 roll-overs OM 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 OM 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.
pZPCHPTLB
ь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 CHCHRPMOEOOB CH CHYDE UUSCHMLY: FES RTYUHFUFCHHEF CH MAVPN UMKHYUBE, B PO-FP OBN Y OKHTSEO.
fBL CPF, YBDBYUH NPTSOP TEYYFSH DPVBCHMEOYEN RBTBNEFTB mål CH FES (mål = "zzz"). chNEUFP zzz NPTSOP RPDUFBCHMSFSH PDOP YJ FTЈI ABTEETCHYTPCHBOSCHI JOBYOOIK:
Själv _top _blank
ъОБЮЕОЕ _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 ХЦЕ ЗПЧПТЙМ - 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 mål NPTSEF VSCHFSH RPDUFBCHMEOP YNS HTSE UHEEUFCHHAEEZP PLOB, B EUMY FBLPZP RFU VTBHET B VPMSHYYOUFCHE UMHYUBECH RPUFBTBEFUS PFLTSCHFSH OPCHPE Plop J BZTHYFSH DPLHNEOF FHDB. chP-CHFPTSHI, MED KhRPNYOBM ZHTEKNSCH, P LPFPTSCHI OBN U CHBNY RPLB YUFP OYUEZP OE YCHEUFOP. om OB DBOOCHK NPNEOF PVPKDЈNUS FEN, UFP ZHTEKNSCH - LFP PLOB OEBCHYUYNSHI DPLHNEOPPCH, LPFPTSCHE CH MAVPN LPMYUEUFCHE NPZKHF OBIPDIFSHUS PYEBYET PVEBYT CHLOEEN DMS. rПДТПВОЕ ПЛФПН НЩ РПЗПЧПТЙН ОЭУЛПМШЛП РПЪЦЕ. h FTEFSHYI, YURPMSHPCHBOYE UUSCHMPL LCA PFLTSCHFYS OPCHPZP PLOB CHSCHCHBOP FPMSHLP DRYER, DE CH YUFP Netscape UPUFPSOYY RPOSFSH UPVSCHFYE onclick (EEMYUPL NSCHYSHA) EUMY EPP UPDYMLUPKUI. Internet Explorer DEMBEF LFP U MЈZLPUFSHA, OP OBN PF LFPZP OE MEZUE: ULTYRFSH DPMTSOSCH TBVPFBFSH CH MAVPN VTBHATE.
TEBMYBGYS
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-OYVHDSH 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 CHCH 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. ;-)
PYASUOOEOS
jHOLGYS OpenWin UPDETTSIF UVBODBTFOSCHK NEFPD JavaScript window.open, YURPMSHHAEYKUS DMS PFLTSCHFYS OCHPZP PLOB. h LBYUEUFCHE RBTBNEFTPCH NSCh RETEDBЈN LFPNKH NEFPDH (YMY ZHHOLGY, UFP RPUFE FP TSE UBNPE):
1. "newfile.htm" - YNS DPLKHNEOFB, LPFPTSCHK DPMTSEO PFLTSCHFSHUS CH OPCHPN PLOE.
2. "mywindow" - YNS LFPZP PLOB DMS DBMSHOOEKYY UUSCHMPL OM OESP. xLBSCHBFSH OE PVSBFESHOP, OP RBTH RHUFSHI LBCHSCHYUEL ("") CHUЈ TBCHOP RTYDЈFUS RPUFBCHYFSH, F.L.
3. "bredd = 300, höjd = 250, verktygsfält = nej"- OBVPT UFBODBTFOSHI RBTBNEFTPCH UPP YOBYUEOYSNY. h DBOOPN UMKHYUBE - MYOEKOSCHE TBNETSCH PLOB Y YOZHPTNBGYA P FPN, UFP POP OE DPMTSOP YNEFSH RBOEMY YOUFTKHNEOPCH. BNEFSHFE, UFP JOBYUEOIS RBTBNEFTPCH S RYYKH VE LBCHSCHYUEL.
uMEDHAEBS YUBUFSH LPDB ( Edeush) RTEDRYUSCHCHBEF VTBKHETKH YURPMOYFSH ZHHOLGYA (NEFPD) OpenWin RTY EEMULE OM 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-fönster.stäng Ь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 ULTIRFPCH CH PFDEMSHOSCHK ZhBKM
eUFSH EEЈ PDYO CHBTYBOF ЪBRYUY LPOFEKOETB SCRIPT.
FFP 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, NYFEUFChEOOPY RTYCHEDЈOOH ьFP HDPVOP EEЈ Y RPFPNKH, UFP RTY CHP'NPTSOPN YUNEOOOY ULTYRFB CHBN OE RTYDЈFUS YUNEOSFSH CHUE HTML -ZHBKMSCH, LPFPTSCHE OM OEZP USUSCHMBAF.
ъБЛМАЮЕОЕЙЕ
rPOSFOP, UFP RPLB EEЈ OYUESP 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, YUFP PYUEOSH YUBUFP X MADEK, RTPYUIFBCHYI FBLYE LOYZY, CHPOBOILBEF NBUUB CHPRTPUPCH YNEOP CHTENS RETCHPK RPRSCHFLY TEBMSCHEYSPHBFSHT y ChPF FHF, S OBDEAUSH, NPЈ NBMEOSHLPE THLPCHPDUFCHP PLBTSEFUS RPMEHOSCHN.
med 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 OM UMEDHAEN HTPLE. b UEKYUBU - OBRPUMEDPL - OEULPMSHLP RTBCHYM, LPFPTSCHE OEPVIPDYNP RPNOFSH PE CHTENS RTPZTBNNYTPCHBOYS OM JavaScript.
1. accepterat JavaScript YUHCHUFCHAYFEMEO L TEZYUFTH.
lBL HTSE ZPCHPTYMPUSH TBOSHYE, RETENEOOSCHE temp J Temp DMS SJSHLB JavaScript OE PDOP Y FP CHE: X OYI VHDHF TBOBOOCHE BOBYUEOIS, RPFPNKH VHDSHFE CHOINBFEYPE.
2. lBTSDSCHK PRTBFPT DPMTSEO PLBOYUYCHBFSHUS FPULPK U ЪBRSFPK.
FEPTEFYUEULY RPUMEDOIK PRTBFPT VMPLB (...) NPTSOP RYUBFSH Y VE'FULY U ЪBRSFPK, OP MKHYUYE EЈ CHUЈ-FBLY UVBCHYFSH… LTPNE UREGIBMSHCHETKHYUBBUCHPCHPN
3. ОЕ ЬВЩЧБКФЕ PVTBNMSFSH ULTYRFSH UYNCHPMBNY LPNNEOFBTYS.