JavaScriptKomma igång med JavaScript


Anmärkningar

Javascript (inte att förväxla med Java ) är ett dynamiskt, svagt typspråk som används både för klientsidan och skriptsidan på serversidan.

JavaScript är ett skiftlägeskänsligt språk. Detta betyder att språket anser att stora bokstäver skiljer sig från deras små bokstäver. Nyckelord i JavaScript är alla små bokstäver.

JavaScript är en vanligtvis referensimplementering av ECMAScript-standarden.

Ämnen i denna tagg hänvisar ofta till användning av JavaScript i webbläsaren, såvida inget annat anges. Enbart JavaScript-filer kan inte köras direkt av webbläsaren; det är nödvändigt att bädda in dem i ett HTML-dokument. Om du har någon JavaScript-kod som du vill prova kan du bädda in den i något platshållarinnehåll som detta och spara resultatet som example.html :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    Inline script (option 1):
    <script>
      // YOUR CODE HERE
    </script>
    External script (option 2):
    <script src="your-code-file.js"></script>
  </body>
</html>

versioner

Version Utgivningsdatum
1 1997/06/01
2 1998/06/01
3 1998/12/01
E4X 2004-06-01
5 2009-12-01
5,1 2011-06-01
6 2015/06/01
7 2016/06/14
8 2017/06/27

Med hjälp av console.log ()

Introduktion

Alla moderna webbläsare, NodeJs och nästan alla andra JavaScript-miljöer stödjer att skriva meddelanden till en konsol med hjälp av en serie loggmetoder. Det vanligaste av dessa metoder är console.log() .

I en webbläsarmiljö används funktionen console.log() främst för felsökningsändamål.


Komma igång

Öppna JavaScript-konsolen i din webbläsare, skriv in följande och tryck på Enter :

console.log("Hello, World!"); 

Detta loggar följande till konsolen:

Console Log Output i Google Chrome

I exemplet ovan skriver console.log() -funktionen Hello, World! till konsolen och återgår undefined (visas ovan i konsolutgångsfönstret). Detta beror på att console.log() har något uttryckligt returvärde .


Loggningsvariabler

console.log() kan användas för att logga variabler av alla slag; inte bara strängar. Skriv bara in variabeln som du vill visas i konsolen, till exempel:

var foo = "bar";
console.log(foo);
 

Detta loggar följande till konsolen:

console.log () kan användas med variabler

Om du vill logga in två eller flera värden, helt enkelt separera dem med kommatecken. Mellanslag läggs automatiskt till mellan varje argument under sammanlänkning:

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar); 
Detta loggar följande till konsolen:

Konsol Concat


Platshållare

Du kan använda console.log() i kombination med platshållare:

var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);
 

Detta loggar följande till konsolen:

ange bildbeskrivning här


Loggarobjekt

Nedan ser vi resultatet av att logga ett objekt. Detta är ofta användbart för att logga JSON-svar från API-samtal.

console.log({
    'Email': '', 
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2',
    'PrincipalType': 1,
    'Title': 'user2'
}); 

Detta loggar följande till konsolen:

Loggat objekt i konsolen


Loggar HTML-element

Du har möjlighet att logga alla element som finns inom DOM . I detta fall loggar vi kroppselementet:

console.log(document.body);
 

Detta loggar följande till konsolen:

ange bildbeskrivning här


Slutnot

För mer information om funktionerna i konsolen, se Console ämnet.

Använda DOM API

DOM står för D ocument O bject M odel. Det är en objektorienterad representation av strukturerade dokument som XML och HTML .

Att ställa in textContent för ett Element är ett sätt att mata ut text på en webbsida.

Tänk till exempel på följande HTML-tagg:

<p id="paragraph"></p>
 

För att ändra dess textContent egenskap kan vi köra följande JavaScript:

document.getElementById("paragraph").textContent = "Hello, World";
 

Detta kommer att välja det element som med ID- paragraph och ställa dess textinnehåll till "Hej, världen":

<p id="paragraph">Hello, World</p>
 

(Se även den här demonstrationen)


Du kan också använda JavaScript för att skapa ett nytt HTML-element programmatiskt. Tänk till exempel på ett HTML-dokument med följande organ:

<body>
   <h1>Adding an element</h1>
</body> 
 

I vår JavaScript skapar vi en ny <p> -tagg med en textContent och lägger till den i slutet av html-kroppen:

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM
 

Det kommer att ändra din HTML-kropp till följande:

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>
 

Observera att för att manipulera element i DOM med JavaScript måste JavaScript-koden köras efter att det relevanta elementet har skapats i dokumentet. Detta kan uppnås genom att lägga JavaScript <script> -taggarna efter allt ditt andra <body> -innehåll. Alternativt kan du också använda en händelse lyssnare för att lyssna på t.ex. window onload händelse , om du lägger till din kod i den händelse lyssnaren kommer att försena körningen av din kod tills hela innehållet på din sida har laddats.

Ett tredje sätt att se till att all din DOM har laddats är att radera in DOM-manipulationskoden med en timeout-funktion på 0 ms . På så sätt återupprättas denna JavaScript-kod i slutet av körningskön, vilket ger webbläsaren en chans att avsluta göra några saker som inte är JavaScript som väntar på att bli slut innan han tittar på den nya JavaScript-biten.

Använda DOM API (med grafisk text: Canvas, SVG eller bildfil)

Använda dukelement

HTML tillhandahåller dukelementet för att bygga rasterbaserade bilder.

Bygg först en duk för att hålla bildpixelinformation.

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

Välj sedan ett sammanhang för duken, i detta fall tvådimensionellt:

var ctx = canvas.getContext('2d');
 

Ställ sedan in egenskaper relaterade till texten:

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);
 

Sätt sedan in canvas på sidan för att träda i kraft:

document.body.appendChild(canvas);
 

Med SVG

SVG är för att bygga skalbar vektorbaserad grafik och kan användas inom HTML.

Skapa först en SVG-elementbehållare med mått:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;
 

Sedan bygga en text element med de önskade positionering och teckensnitt egenskaper:

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';
 

Tillsätt sedan själva texten till skärmen till text Element:

text.textContent = 'Hello world!';
 

Slutligen lägga till text elementet vår svg behållare och tillsätt svg behållarelementet till HTML-dokument:

svg.appendChild(text);
document.body.appendChild(svg);
 

Bildfil

Om du redan har en bildfil som innehåller önskad text och har den placerad på en server kan du lägga till bildens URL och sedan lägga till bilden till dokumentet enligt följande:

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
 

Med hjälp av windows.alert ()

alert visar en visuell varningsruta på skärmen. Parametern för larmmetod visas för användaren i vanlig text:

window.alert(message);
 

Eftersom window är det globala objektet, kan du ringa också använda följande korthandling:

alert(message);
 

Så vad gör window.alert() ? Låt oss ta följande exempel:

alert('hello, world');
 

I Chrome skulle det skapa en popup som denna: varna

anteckningar

alert är tekniskt en egenskap hos window , men eftersom alla window automatiskt är globala variabler, kan vi använda alert som en global variabel i stället för som en egenskap i window - vilket innebär att du direkt kan använda alert() istället för window.alert() .

Till skillnad från att använda console.log , fungerar alert som en modal prompt vilket innebär att koden som ringer alert kommer att pausa tills prompten besvaras. Traditionellt betyder detta att ingen annan JavaScript-kod kommer att köras förrän varningen avvisas:

alert('Pause!');
console.log('Alert was dismissed');
 

Specifikationen tillåter emellertid att annan händelsutlösad kod fortsätter att köra även om en modal dialog fortfarande visas. I sådana implementationer är det möjligt för annan kod att köras medan modaldialogen visas.

Mer information om användningen av alert finns i modulen meddelanden .

Användningen av varningar är vanligtvis avskräckta till förmån för andra metoder som inte blockerar användare från att interagera med sidan - för att skapa en bättre användarupplevelse. Ändå kan det vara användbart för felsökning.

Från och med Chrome 46.0, window.alert() inuti en <iframe> såvida inte dess sandlådaattribut har värdet allow-modal .

Använda windows.confirm ()

window.confirm() visar en modaldialog med ett valfritt meddelande och två knappar, OK och Avbryt.

Låt oss ta följande exempel:

result = window.confirm(message);
 

Här är meddelandet den valfria strängen som ska visas i dialogrutan och resultatet är ett booleskt värde som indikerar om OK eller Avbryt var vald (sant betyder OK).

window.confirm() används vanligtvis för att be om användarbekräftelse innan du gör en farlig åtgärd som att ta bort något i en kontrollpanel:

if(window.confirm("Are you sure you want to delete this?")) {
    deleteItem(itemId);
}
 

Utgången från den koden ser ut så här i webbläsaren:

Bekräftelsedialogen är mycket enkel: Meddelande, OK, Avbryt

Om du behöver det för senare användning kan du helt enkelt lagra resultatet av användarens interaktion i en variabel:

var deleteConfirm = window.confirm("Are you sure you want to delete this?");
 

anteckningar

  • Argumentet är valfritt och krävs inte av specifikationen.
  • Dialogrutor är modala fönster - de förhindrar användaren att komma åt resten av programmets gränssnitt tills dialogrutan är stängd. Av den anledningen bör du inte överanvända någon funktion som skapar en dialogruta (eller modalfönster). Och oavsett, det finns mycket goda skäl att undvika att använda dialogrutor för bekräftelse.
  • Från och med Chrome 46.0 är den här metoden blockerad i ett <iframe> såvida inte dess sandlådeattribut har värdet tillåtet-modal.
  • Det är vanligt att acceptera bekräftelsesmetoden med fönsternotationen bort eftersom fönsterobjektet alltid är implicit. Det rekommenderas dock att uttryckligen definiera fönsterobjektet eftersom förväntat beteende kan förändras på grund av implementering på en lägre omfattningsnivå med liknande namngivna metoder.

Använda windows.prompt ()

Ett enkelt sätt att få en inmatning från en användare är att använda metoden prompt() .

Syntax

prompt(text, [default]);
  • text : Texten som visas i snabbrutan.
  • standard : Ett standardvärde för inmatningsfältet (valfritt).

exempel

var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user

Fråga rutan

Om användaren klickar på OK- knappen returneras ingångsvärdet. Annars returnerar metoden null .

Returvärdet för prompt är alltid en sträng, såvida inte användaren klickar på Avbryt , i vilket fall den returnerar null . Safari är ett undantag i att när användaren klickar på Avbryt returnerar funktionen en tom sträng. Därifrån kan du konvertera returvärdet till en annan typ, till exempel ett heltal .

anteckningar

  • Medan promptrutan visas förhindras användaren från att komma åt andra delar av sidan, eftersom dialogrutor är modala fönster.
  • Från och med Chrome 46.0 är den här metoden blockerad i ett <iframe> såvida inte dess sandlådeattribut har värdet tillåtet-modal.