Bygga långa strängar med Javascript

Det vanligaste sättet att lägga ihop mindre strängar är att konkatenera dem:
var str = str1 + str2…
Detta är det mest läsliga sättet och duger utmärkt för mindre operationer. Men konkatenering är långsamt och bör undvikas att upprepas allt för många gånger.

Alternativet är att placera varje sträng i en array och slå ihop den en enda gång med join(). Läs mer om join.

Ett exempel:

var buttonSet = [
		"<div>",
		"<button id='buttonBold'><img src='icons/text_bold.png' alt='bold'/></button>",
		"<button id='buttonItalic'><img src='icons/text_italic.png' alt='italic'/></button>",
		"<button id='buttonUnderline'><img src='icons/text_underline.png' alt='underline'/></button>",
		"<button id='buttonSuperscript'><img src='icons/text_superscript.png' alt='superscript'/></button>",
		"<button id='buttonLink'><img src='icons/link.png' alt='link'/></button>",
		"<button id='buttonImage'><img src='icons/image.png' alt='image'/></button>",
		"</div>",
		"<div>",
		"<img id='emoticon_evilgrin' src='icons/evilgrin.png' alt='evil grin' />",
		"<img id='emoticon_grin' src='icons/grin.png' alt='grin' />",
		"<img id='emoticon_unhappy' src='icons/sad.png' alt='unhappy' />",
		"<img id='emoticon_kiss' src='icons/kiss.png' alt='kiss' />",
		"<img id='emoticon_wink' src='icons/wink.png' alt='wink' />",
		"<img id='emoticon_smile' src='icons/smile.png' alt='smile' />",
		"<img id='emoticon_surprised' src='icons/surprised.png' alt='surprised' />",
		"</div>"].join("");

Största värdet med XPath

Jag är nybörjare på XPath och skriver lika mycket för att undervisa mig själv. Tänkte dela med mig av ett knep. Ibland är det önskvärt att hitta noden med det högsta värdet.

Tänk dig följande xml-dokument.

<countries>
	<country name="Sweden" population="9076744">
	</country>
	<country name="Finland" population="5302545" >
	</country>
	<country name="Greece" population="10645343">
	</country>
	<country name="France" population="63601002">
	</country>
</countries>

För att välja ut den nod vars name-attribut har värdet ”Sweden” används följande uttryck: countries/country[@name="Sweden"]

Att få fram landet med den största befolkningen är något knepigare. Då får man jämföra syskon:

countries/country[not(@population<= ./preceding-sibling::country/@population) and
not(@population <= ./following-sibling::country/@population)]

Obs. radbrytning. I detta fallet bör det resultera i ”France” som har den största befolkningen.

http://www.w3schools.com/xpath/

Memory med Javascript

Ett enkelt spel jag gjorde för en kurs.

	/*** memory.js ***/

	var image = new Array(24); // för våra bilder
	var duplicates = new Array (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); // antal av varje bild 
	
	var number = 0;
	var choiseOne = -1;
	var choiseTwo = -1;
	var pairs = 0;
	var tries = 0;
	var size = 0;
  	
	function randomImages()
	{
		for(n = 0; n < size; n++)
		{
				do 
				{
					do
					{
						number = Math.floor(Math.random() * 100);
					}
					while(number > 11)
				
				} 
				while(duplicates[number] > 1);
				
				duplicates[number] ++;
				image[n] = (number + 1) + '.gif';
		}
	}
	
	function setUp()
	{	 
		size = 24;
		
		randomImages(); // Sätta upp den egentliga spelplanen
	 	
	 	for(n = 0; n < size; n++)
	 	{
		 	document.write('<img id="p' + n + '" onclick="select(' + n + ')" src="0.gif" alt="" />');
		 	
	 	}
	}
		
	function reset()
	{
		a = document.getElementById('p' + choiseTwo);
		a.setAttribute('src', '0.gif');
		
		a = document.getElementById('p' + choiseOne);
		a.setAttribute('src', '0.gif');
		
		choiseOne = -1;
		choiseTwo = -1;
	}
	
	function select(i) 
	{	
		var url = document.getElementById('p' + i).src; // ska inte kunna klicka samma bild om igen
		if(url.match('0.gif') != '0.gif')
		{
			return;
		}
			
		if(choiseOne == -1 && choiseTwo == -1) // Söka finna ett nytt par
		{			
			a = document.getElementById('p' + i);
			a.setAttribute('src', image[i]);
			
			choiseOne = i; // hålla reda på första valet
		}
		else if(choiseOne != -1 && choiseTwo == -1)
		{		
			a = document.getElementById('p' + i);
			a.setAttribute('src', image[i]);
			tries ++;
			
			choiseTwo = i;
			
			if(image[choiseOne] == image[choiseTwo]) // undersöker om detta val stämmer med det förra
			{	
				pairs ++;
				choiseOne = -1;
				choiseTwo = -1;			
			}
			else // annars så återställs bilden 
			{
				setTimeout('reset()', 400);
			}
		}

		if(pairs == size/2)
		{
			alert('Game over! Congratulations, You won!\nNumber of tries = ' + tries);
		}
	}

HTML-filen skulle i princip kunna se ut så här:

 <html>
 <head>
 <title>Memory</title>
 <script type="text/javascript" src="memory.js"></script>
 </head>
 <body>
 <div id="board">
 	<script type="text/javascript">
 		setUp();
 	</script>	
</div>
 </body>
 </html>

Spara filerna i samma mapp tillsammans med bilder. Namnge dem 0.gif, 1.gif… 12.gif.

Reguljära uttryck

Ett måste att kunna när man programmerar men bra att känna till vid textbehandling i allmänhet. Inom programmering används de flitigt för att kontrollera indata, förhindra att fel uppstår och inte minst av säkerhetsskäl. Det är lätt att kontrollera att användaren matar in exempelvis en korrekt epostadress med ett reguljärt uttryck.

Reguljära uttryck är mönster som matchar en text (eller bit av en text). De kan vara enkla eller komplexa. Att bli duktig på reguljära uttryck kräver träning och tid men att snappa upp grunderna är inte svårt.

I sin enklaste form utgörs de av ett enda tecken. ”a” matchar alla ”a” i en text. Eller också är det en följd av tecken. ”katt” matchar allt utom första bokstaven i ”skatt”.

Det finns några grundläggande operationer.

Alternativ

För att välja mellan alternativ används tecknet ”|”. Uttrycket katt|hund matchar ”katt” eller ”hund”.

Gruppering

Med parenteser grupperar man uttryck och bestämmer prioritet. hus(bil|vagn) matchar ”husbil” eller ”husvagn”.

Kvantifiering

Med kvantifieringstecken bestämmer man antalet av ett visst tecken eller grupp.

+	Ett eller fler.
?	Noll eller ett.
*	Noll eller fler.

hus(bil|vagn(ar)?) matchar ”husbil”, ”husvagn” och ”husvagnar”. ka+na matchar ”kana” men även ”kaana” och ”kaaaana”. Plustecknet betyder att det får finnas hur många a:n som helst. Dock minst ett. Vi kan också använda asterisk. kann*a matchar både ”kana” och ”kanna”. Dessutom ”kannnnna”. Ett annat alternativ är frågetecken. kann?a matchar både ”kana” och kanna” eftersom vårt ena ”n” kan vara noll eller ett.

Det som vi använt kallas metatecken eftersom de hör till språket i reguljära uttryck. Syntaxen kan variera men vanligast är att man skriver så här.

Jokertecken

Ett annat vanligt tecken är jokertecken som betyder vilket tecken som helst och skrivs med punkt. Ett exempel. ra.t matchar ”rart” men även ”rakt”, ”ratt” eller ”rast”. Tredje tecknet är valfritt.

Viktigt att komma ihåg att punkten har särskild betydelse. Vill man ha en vanlig punkt måste den föregås av backslash. Samma sak med andra metatecken. Man skriver \. när man vill att tecknet ska betyda punkt och inte jokertecken.

Teckenklasser

Det finns även teckenklasser. Dessa skrivs med hakparentes. [aA5] matchar något av tecknen ”a”, ”A” eller ”5”. [0-9] matchar en siffra från noll till nio. Vill man så kan man kvantifiera det också. [0-9]+ matchar en eller flera siffror.

Detta var en kort introduktion. Kom gärna med synpunkter och kritik. Personligen tycker jag reguljära uttryck är kul eftersom det är klurigt att syssla med. Kör du med Firefox finns ett tillägg att ladda ner där man kan öva sig. Lycka till!

Nystartad blogg

”Under uppbyggnad” borde det stå för jag ska mest testa saker innan jag kör igång.