Vad gör javascript i webbläsaren. Alternativ webbläsarteknik
JavaScript är ett programmeringsspråk som lägger till interaktivitet till din webbplats (till exempel: spel, respons när du klickar på knappar eller när du matar in data i formulär, dynamiska stilar, animationer). Den här artikeln hjälper dig att komma igång med detta spännande språk och ger dig en uppfattning om vad det kan göra.
Vad är JavaScript egentligen?Obs: Anledningen till att vi placerar elementet längst ner i HTML-filen är att HTML-element laddas av webbläsaren i den ordning de visas i filen. Så om JavaScript läses in först och behöver interagera med HTML-koden under det, kommer det att misslyckas eftersom JavaScriptet kommer att laddas före HTML-koden som den behöver interagera med. Att placera JavaScript längst ned på HTML-sidan anses därför vara den bästa strategin.
Vad hände?Så din texttitel har ändrats till "Hej värld!" Med använder JavaScript. Vi gjorde detta genom att anropa querySelector(), ta en referens till vår header och lagra den i en variabel som heter myHeading. Detta är väldigt likt det vi gjorde i CSS med väljare. Om du vill göra något med ett element måste du först välja det.
Efter detta ställer du in värdet på myHeading-variabeln till textContent-egenskapen (som representerar rubrikinnehållet) till "Hello world!".
Snabbkurs i språkgrundernaLåt oss ta en titt på några grundläggande funktioner JavaScript-språk för att ge dig en bättre förståelse för hur det hela fungerar. Dessutom är dessa funktioner gemensamma för alla programmeringsspråk. Om du kan förstå dessa grunder, kommer du att kunna börja programmera som om ingenting någonsin hänt!
VariablerObs: JavaScript är skiftlägeskänsligt - myVariable skiljer sig från myvariable. Om du har problem med din kod, kolla fallet!
Efter att ha deklarerat en variabel kan du tilldela den ett värde:
MyVariable = "Bob";
Du kan göra båda dessa operationer på samma rad om du vill:
Var myVariable = "Bob";
Du kan få värdet genom att helt enkelt anropa variabeln efter namn:
MyVariable;
När du har ställt in värdet på en variabel kan du ändra det senare:
Var myVariable = "Bob"; myVariable = "Steve";
Observera att variabler har olika datatyper:
| En textsekvens som kallas en rad. För att indikera att detta värde är en sträng måste du omsluta det inom citattecken. | var myVariable = "Bob"; |
| Tal. Siffror har inga citattecken runt sig. | var myVariable = 10; |
| Värdet är True/False. Orden sant och falskt är speciella nyckelord i JS och behöver inga citat. | var myVariable = sant; |
| En array som låter dig lagra flera värden i en enda referens. | var myVariable = ; Du kan komma åt varje element i arrayen så här: myVariable, myVariable, etc. |
| I princip vad som helst. Allt i JavaScript är ett objekt och kan lagras i en variabel. Tänk på detta medan du lär dig. | var myVariable = document.querySelector("h1"); Allt detta kommer från exemplen ovan. |
Så varför behöver vi variabler? Tja, variabler skulle göra något intressant i programmering. Om värdena inte kunde ändras, kunde du inte göra något dynamiskt, som att anpassa välkomstmeddelande eller ändra bilden som visas i bildgalleriet.
KommentarerDu kan lägga kommentarer i JavaScript-kod, precis som du gjorde i CSS:
/* Allt som finns här är en kommentar. */
Om din kommentar inte innehåller radbrytningar är det ofta lättare att använda två snedstreck framåt, så här:
// Detta är en kommentar
OperatörerObs: Att blanda datatyper kan leda till vissa oväntade resultat när du utför beräkningar, så var noga med att referera till dina variabler korrekt för att få de förväntade resultaten. Skriv till exempel "35" + "25" i din konsol. Varför fick du inte det resultat du förväntade dig? Eftersom citattecken förvandlade siffrorna till strängar, så du slutade med strängsammansättning snarare än siffertillägg. Om du anger 35 + 25 får du rätt resultat.
BetingelserVillkor är kodstrukturer som låter dig testa om ett uttryck är sant eller falskt och sedan exekvera annan kod beroende på resultatet. Den vanligaste formen av tillstånd kallas om ... annat. Till exempel:
Var glass = "choklad"; if (glass === "choklad") ( alert("Yay, jag älskar chokladglass!"); ) else ( alert("Awwww, men choklad är min favorit..."); )
Uttrycket inuti if (...) är ett test som använder identitetsoperatorn (som beskrivs ovan) för att jämföra variabeln iceCream med chokladsträngen och se om de är lika. Om denna jämförelse returnerar sant kommer det första kodblocket att exekveras. Om inte, kommer denna kod att hoppas över och det andra kodblocket efter else-satsen kommer att exekveras.
Funktioner HändelserFör att skapa verklig interaktivitet på en webbplats behöver du evenemang. Händelser är ett ramverk som lyssnar på vad som händer i webbläsaren och sedan låter dig köra kod som svar på det. Den mest uppenbara är klickhändelsen, som avfyras av webbläsaren när vi klickar på något med musen. För att demonstrera denna händelse, gå in nästa kommando in i din konsol och klicka sedan på den aktuella webbsidan:
Document.querySelector("html").onclick = function() ( alert("Aj! Sluta peta mig!"); )
Det finns många sätt att koppla en händelse till ett element. Här väljer vi elementet och ställer in dess onclick-egenskapshanterare till en anonym (d.v.s. namnlös) funktion som innehåller koden vi vill köra på klickhändelsen.
anteckna det
Document.querySelector("html").onclick = function() ();
likvärdig
Var myHTML = document.querySelector("html"); myHTML.onclick = function()();
Det är bara kortare.
Låt oss uppgradera vårt webbplatsexempelNu när vi har gått igenom en del JavaScript grunderna, låt oss lägga till några coola, enkla funktioner till vår exempelwebbplats för att ge dig en uppfattning om hur det fungerar.
Lägger till en bildändringI det här avsnittet kommer vi att lägga till ytterligare en bild på vår webbplats och lägga till några enkelt javascript för att växla mellan två bilder när de klickas.
Så vi sparar en referens till vårt element i variabeln myImage. Därefter skapar vi en hanterare för denna variabel onclick-händelser med en anonym funktion. Nu, varje gång det här bildelementet klickas:
Därefter lägger vi till lite annan kod för att ändra sidtiteln till ett personligt välkomstmeddelande när användaren först landar på sidan. Detta välkomstmeddelande kommer att sparas när användaren lämnar sidan och återkommer senare - vi sparar det med . Vi kommer också att inkludera möjligheten att ändra användare, och därför välkomstmeddelandet, när som helst detta behövs.
När du nu besöker sidan för första gången kommer den att fråga dig om ett användarnamn och sedan ge dig ett personligt meddelande. Du kan ändra namnet när som helst genom att klicka på knappen. Som ytterligare bonus, eftersom namnet lagras i localStorage, kvarstår det efter att webbplatsen stängts, samtidigt som ett personligt meddelande bibehålls nästa gång du öppnar webbplatsen!
Slutsats
Moderna webbläsare måste ha stöd för JavaScript-språket.
JavaScript-kommandon läggs till på webbsidor med taggen och det körbara skriptet måste anges i textfönstret CMS WordPress. Det kan finnas hur många behållare du vill i ett dokument. Attributet "type='text/javascript'" är valfritt, eftersom standard är javascript.
Här är ett exempel:
dokumentera. write("Utmatningstext standardkommando JavaScript." );
Taggens typattribut talar om för webbläsaren vilka kommandon som ska användas. skriptspråkär inbäddade ytterligare före den avslutande taggen.
När du behärskar JavaScript-språket måste du först behärska kommentarer, vilket bör användas särskilt ofta när du först börjar använda språket.
JavaScript tillåter korta kommentarer – kommentarer som inte är längre än radens längd. Allt efter två tecken // till slutet av raden kommer att vara en kort kommentar. Här är två exempel på korta kommentarer:
// 1. Kommandot nedan visar stycket i fet stil
dokumentera. skriva(");
dokumentera. skriva( Hej världen!); // 2. Mata ut i kursiv stil strängen Hej, världen!
Dessutom tillåter JavaScript flerradskommentarer – kommentarer som sträcker sig över flera rader. Här är ett exempel på en sådan kommentar:
/*
Det första kommandot visar stycket i fet stil,
och det andra kommandot visar stycket i kursiv stil
*/
dokumentera. skriva("
Stycke visas i fet stil.
" ); dokumentera. skriva("Stycke skriven i kursiv stil.
» );Det är omöjligt att beskriva alla funktioner i JavaScript-språket på en sida. Jag kommer bara att skriva ner de viktigaste, enligt min mening, funktionerna i språket.
Skriptet för detta språk kan antingen bäddas in direkt i sidans HTML-kod eller placeras i en fil som kan kallas olika sidor. Här är ett exempel på att anropa en fil med ett skript:
Om specificerat src-attribut="… ", då ignoreras innehållet i taggen, det vill säga skript kan inte inkluderas samtidigt i en tagg externt manus och ange koden, så du måste välja: skriptet innehåller antingen src eller innehåller kod. Om det behövs lägger vi helt enkelt till koden i ett annat skript.
Förresten, WordPress-versioner 4.0 känner inte igen JavaScript-kod i HTML-koden på sidorna och förstör den genom att dölja JavaScript-koden bakom
Deklarerande matriser
MyArray = new Array(365);
Arrayer är implementerade så att endast vissa (icke-tomma) element kommer att använda minne, de "urladdningar arrayerna". Om vi ställer in uppsättningen myArray = "något där" och myArray = "något annat där", så har vi endast använt utrymme för dessa två element.
Föremål
JavaScript har flera typer av inbyggda objekt, nämligen Object, Array, String, Number, Boolean, Function, Date och Math. Andra objekt tillhör DOM-objekt (fönster, formulär, länkar, etc.).
Genom att definiera konstruktorfunktioner kan du definiera objekt. JavaScript är ett prototypbaserat objektorienterat språk. Du kan lägga till ytterligare egenskaper och metoder till enskilda föremål efter att de skapats. För att göra detta kan du använda en prototypsats för alla instanser av en viss typ av objekt.
Exempel: Skapa ett objekt
// Konstruktörsfunktion
Funktion MyObject(attributA, attributB) ( this.attributeA = attributeA this.attributeB = attributeB )
// Skapa ett objekt
obj = new MyObject("röd", 1000)
// Få tillgång till ett objektattribut
alert(obj.attributeA)
// Åtkomstattribut med associativ matrisbeteckning
alert(obj["attributA"])
Objekthierarkin kan också reproduceras i JavaScript. Till exempel:
Funktion Base() ( this.Override = _Override; this.BaseFunction = _BaseFunction; function _Override() ( alert("Base::Override()"); ) funktion _BaseFunction() ( alert("Base::BaseFunction()" ); ) ) function Derive() ( this.Override = _Override; function _Override() ( alert("Derive::Override()"); ) ) Derive.prototype = new Base(); d = new Derive(); d.Override(); d.BaseFunction();
Som ett resultat får vi på skärmen: Derive::Override() Base::BaseFunction()
Kontrollinstruktioner
Om ... annat om (villkor) ( uttalanden )
Cyklar
while (villkor) ( uttalanden ) Gör ... while do ( uttalanden ) while (villkor); För loop för (; ; ) ( uttalanden ) För loop ... in
Denna loop går igenom alla egenskaper hos ett objekt (eller element i en array)
för (variabel i objekt) ( uttalande )
Urvalsoperatör
switch (uttryck) ( case label1: statements; break; case label2: statements; break; default: statements; )
Funktioner
Funktionens brödtext finns i (kroppen kan vara tom), och listan med argument anges inuti () efter funktionsnamnet. Funktioner kan returnera ett värde efter exekvering.
Funktion(arg1, arg2, arg3) ( uttalanden; returnera uttryck; )
Som ett exempel, låt oss titta på en funktion baserad på den euklidiska största gemensamma divisoralgoritmen:
Funktion gcd(a, b) ( medan (a != b) ( if (a > b) ( a = a - b; ) else ( b = b - a; ) ) returnerar a; )
Antalet argument vid anrop av en given funktion behöver inte nödvändigtvis ge lika många argument som angavs när funktionen deklarerades. I en funktion kan argument också nås via en argumentmatris.
Varje funktion är en instans av en funktion, grundläggande typ objekt. Funktioner kan skapas och tilldelas som alla andra objekt:
Var myFunc1 = new Function("alert("Hej")"); var myFunc2 = myFunc1; myFunc2();
Resultat på skärmen:
Användarinteraktion
De flesta användarinteraktioner görs med HTML-formulär, som kan nås via HTML DOM. Men det finns också några mycket enkla botemedel kommunikation med användaren:
Varningsdialogruta
Bekräfta dialogrutan
Dialoglinjer
Statusfältet
Konsoler
Textelement kan vara källan till olika händelser, som kan utlösa åtgärder om en EMCAScript-händelsehanterare är registrerad. I HTML definieras dessa händelsehanterarfunktioner ofta som anonyma funktioner direkt i HTML-taggarna.
JavaScript är ett av de programmeringsspråk som ofta används för åtkomst till programvara till applikationsobjekt. Det är ofta inbyggt i webbläsaren och är nödvändigt för att göra webbsidor mer funktionella. Följaktligen, om JavaScript är inaktiverat av en eller annan anledning, kanske sidan inte öppnas alls eller kommer att öppnas, men med betydande begränsningar eller fel. Till exempel kanske viss text inte visas. Därför, om du inte vet hur du aktiverar detta språk i din webbläsare, då har du kommit till rätt ställe.
Mozilla Firefox- I topp meny välj avsnittet "Verktyg" - "Inställningar".
- Ett fönster har öppnats framför dig på fliken "Grundläggande". Du måste välja fliken "Innehåll".
- Överst i fönstret kommer du att se flera objekt, varav en kommer att heta "Använd JavaScript" - markera rutan bredvid och klicka på OK.
- Uppdatera sidan med F5-tangenten på ditt tangentbord.
UPPMÄRKSAMHET! Denna beskrivning är endast lämplig för versioner under version 22. Från och med version 23 krävs inte JavaScript - alternativet är aktiverat som standard.
Opera- Till vänster övre hörnet Klicka på knappen "Verktyg" - "Inställningar" - "Allmänna inställningar".
- Väl i menyn, gå till fliken "Avancerat" (det är den femte).
- Klicka på länken "Innehåll" i menyn till vänster och markera rutan bredvid "Använd JavaScript".
- Klicka på OK och uppdatera sidan.
- I det övre högra hörnet finns en knapp där du kommer att se tre staplar - klicka på den och välj avsnittet "Inställningar".
- Scrolla ner på sidan till botten och klicka på "Visa avancerade inställningar".
- I avsnittet "Personlig information" ser du knappen "Innehållsinställningar" som du måste klicka på.
- Öppnad extra fönster. Hitta alternativet "Tillåt alla webbplatser att använda JavaScript (rekommenderas)" och klicka på OK.
- Ladda om sidan i din webbläsare.
- Öppna webbläsarens egenskaper (detta kan göras antingen i själva webbläsaren via menyn eller med kontrollpanelen på din dator).
- Ett fönster har öppnats, du måste gå till fliken "Säkerhet".
- Längst ner i den måste du klicka på knappen märkt "Övrigt...".
- Öppnad stor lista. Du måste gå till avsnittet "Skript" och i undersektionen "Aktiva skript", markera rutan bredvid alternativet "Aktivera".
- Klicka på OK och uppdatera sidan.
- I menyn hittar vi avsnittet "Inställningar".
- Öppnad separat fönster med flera flikar, bland vilka du måste öppna den som heter "Säkerhet".
- Markera rutan bredvid "Aktivera JavaScript" och stäng fönstret.
- Vi uppdaterar sidan genom att trycka på F5-tangenten.
Det bör noteras att alla versioner av de mest kända och populära webbläsare idag ge JavaScript-stöd. De stöder den tredje upplagan av specifikationen, och Mozilla Firefox försökte till och med stödja den fjärde upplagan. Som standard används JavaScript som standard på nästan alla webbläsare, och det är vanligtvis inaktiverat av användaren själv.
När det gäller användningen av språket är det nödvändigt, till exempel i vissa webbapplikationer, skript i webbläsare ( vi pratar om om speciella program som låter dig formatera sidor, automatiskt fylla i formulär, dölja delar av innehållet och så vidare), samt i AJAX (en metod för att bygga applikationsgränssnitt där datautbyte med servern sker i bakgrund, på grund av vilken sidan inte laddas om helt, men själva applikationen går bara snabbare).