JAVASCRIPT Start
Inledning
Javascript använder vi för att skapa interaktivitet på webbsidor. Javascript är ett skript-språk vilket är ett lättvikts-programmeringsspråk jämfört med Java, C, C++ som är fullständiga programmeringsspråk. Javascript körs framför allt på klientsidan, det vill säga i webbläsaren.
Javascript är ett interpreterande språk, det vill säga koden tolkas samtidigt som den körs. Javascript reagerar på händelser och kan ändra innehåll i en webbsidas del, kontrollera formulärdata, skapa cookies.
Javascript utvecklades av Brendan Eich under namnet Mocha som byttes ut till Livescript och senare till Javascript. Språket kunde användas första gången i webbläsaren Netscape Navigator 1995. Det blev väldigt populärt så Microsoft kontrade snabbt med att utveckla Jscript. För att få fram en gemensam standard så skapades det under namnet ECMAskript. Det vi gör i javascript följer den standarden och kan då även köras med Jscript-interpreterare.
Placering av Javascripten
Javascriptkoden ska ligga i separata js-filer. Den kan ligga lokalt på webbsidan innanför script-taggar men vi strävar efter att ha separerade filer med olika innehåll, html, css, javascript.
Vi länkar till filen på följande sätt:
Ovanstående länkning till js-filer bör helst ligga precis innan "</body>"-taggen. Anledningen är att javascripten kan användas till att manipulera delar på webbsidan (webbsidan laddas ju in i webbläsaren som bygger upp en trädstryktur av alla element, enligt DOM(Document Object Model)) och om skripten placeras inom head-taggarna så är ju inte sidan laddad ännu och elementen som javascripten hänvisar till finns inte, ännu.
Det går att lösa med onload-händelsen, men den körs inte förrän alla sidor och bilder är färdigladdade och är det många bilder blir det onödigt segt att behöva vänta.
Om du tittar på exempel på internet så kan koden enbart ligga inom script-taggarna direkt på webbsidan.
Koppla knapp till något som ska hända
Skapa ett paket av kod som körs först när vi anropar paketet
Vi introducerar den allra enklaste formen av funktioner redan nu, så vi kan skapa lite textrutor och knappar på våra webbsidor som i sin tur gör olika saker som vi programmerat.
Vi lägger lite kod i en funktion. Den koden körs först då vi anropar funktionen. Nu till en början anropar vi funktionen genom att vi klickar på en knapp. Vi lägger på en inbyggd händelsehanterare på vår knapp, click, och ser till att funktionen anropas då vi klickar på knappen.
document.getElementById("idElement").style.display = "none";
}
<div id="jsdiv">Här finns viktig information!</div>
<script>
document.getElementById("jsdiv").style.display = "none";
document.getElementById('jsbutton').addEventListener('click', jsfunktion);
function jsfunktion() {
document.getElementById("jsdiv").style.display = "block";
}
</script>
För att kunna sätta egenskapen "display" till antingen "none" eller "block" så måste vi ta ett html-element, med ".style" få tag på massa egenskaper och med ".display" just visa/dölj-egenskapen, som vi sen tilldelar ett värde.
<button type="button" id="moveButton">Kopiera</button>
<h1 id="jsh1"></h1>
<script>
document.getElementById('moveButton').addEventListener('click', kopieraText);
function kopieraText() {
document.getElementById("jsh1").innerHTML = document.getElementById("jstext").value;
}
</script>
I det här demot har vi använt en textruta och en h1-tagg som vi bearbetar. För att komma åt det som står i en textruta så använder vi egenskapen value och motsvarande när det gäller en html-tagg (h1, div, p, osv.) heter innerHTML.
document.getElementById("jsh1").innerHTML = document.getElementById("jstext").value;
Datorn arbetar med det på höger sida om likamed-tecknet (= - tecknet) och när höger sida är klar förs det över till vänster sida (tilldelning). I vårt fall så hämtar den det som står i textrutan med id:t "jstext" och för över det till id:t på vänster sida "jsh1". Vänster sida kommer skriva i html-elementet.
När vi klickar på knappen så tar den det som står i textrutan och skriver i h1-elementet. Stod något tidigare i h1-elementet så tas det bort och det nya skrivs in.
Källor
Webbutveckling 1, Thelin Läromedel & Lars Gunther (2013)
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode(september 2014)