Gå til innhold

Garanti's hjelpetråd i Javascript


Anbefalte innlegg

Denne tråden har nå blitt gjordt om til en hjelpetråd.

 

Opprinnelig førstepost:

 

 

Hei!

Har følgende kode:

function switcher(e){
switch(e){
	case("ein"):
		document.getElementById('ein').style.display = ""
		document.getElementById('to').style.display = "none"
		document.getElementById('tre').style.display = "none"
		document.getElementById('fire').style.display = "none"
		break
	case("to"):
		document.getElementById('ein').style.display = "none"
		document.getElementById('to').style.display = ""
		document.getElementById('tre').style.display = "none"
		document.getElementById('fire').style.display = "none"
		break
	case("tre"):
		document.getElementById('ein').style.display = "none"
		document.getElementById('to').style.display = "none"
		document.getElementById('tre').style.display = ""
		document.getElementById('fire').style.display = "none"
		break
	case("fire"):
		document.getElementById('ein').style.display = "none"
		document.getElementById('to').style.display = "none"
		document.getElementById('tre').style.display = "none"
		document.getElementById('fire').style.display = ""
		break
}
}

 

Oversiktlig og greit, men jeg er sikker på at det går an å minske antall linjer kode drastisk her. Hvordan?

Endret av Garanti
Lenke til kommentar
Videoannonse
Annonse

Kanskje noko som dette?

 

function switcher(e)
{
var idCollection = new Array("ein","to","tre", "fire");
for (id in idCollection)
{
	if (idCollection[id].match(e))
	{
		document.getElementById(e).style.display = "";
	}
	else
	{
		document.getElementById(idCollection[id]).style.display = "none";
	}
}
}

 

Men det som er viktigast er at koden er lettlest, at du skjønner det som står der og ikkje må bruke fleire timer på å prøve å forstå koden.

Lenke til kommentar

Tror jeg lager meg en hjelpetråd jeg.

Hvorfor fungerer dette eksempelet bare i firefox:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
function wysiwyg(){
e=document.getElementById('write').value
document.getElementById('show').innerHTML = e
}

</script>
</head>

<body style=" margin: 0px auto; width: 300px; margin-top: 100px;">
<h1 style="margin: 0px 0px 5px 0px;">skriv html:</h1>
<textarea id="write" onKeyUp="wysiwyg()" style="height: 100px; width: 313px;" wrap="physical"></textarea>
<div style="background-color:#FFCC99; border: 1px solid #FF3333; min-height: 200px; min-width: 300px; padding: 5px;" id="show">
</div>
</body>
</html>

Lenke til kommentar

Halvbumper denne, då jeg har støtt på et merkelig problem. Siden fungerer tydeligvis i alle sidene likevel, men jeg har derimot problemer med å få scriptet til å funke den med regex. Med fungere mener jeg at det bl. annet skal konvertere en [*url=http://lala] til en a href-lenke direkte.

 

Det merkelige er at den lille regex-snutten fungerer her: <a href="http://regex.larsolavtorvik.com/" target="_blank">http://regex.larsolavtorvik.com/[/url] (gå til Javascript > replace og sett inn henholdsvis:

\+[a-z0-9~\#%@&=\?;\+\/_-]+)\](.*?)\[\/url]

 

<a href="$1">$2</a>

 

ff</a> )

 

Resultatet der blir en link, mens i koden min blir reultatet bare 'ff', uten link..

 

Om det er relevant, koden min følger:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script language="javascript" type="text/javascript">
function bbcode(string){
string = string.replace(/\[b\]/gi, '<b>');
string = string.replace(/\[\/b\]/gi, '</b>')
string = string.replace(/\[i\]/gi, '<i>')
string = string.replace(/\[\/i\]/gi, '</i>')
string = string.replace(/\[url=((?:ftp|http|https)?(?::\/\/)?[a-z0-9~\#%@\&:=\?;\/\.,_-]+[a-z0-9~\#%@&=\?;\+\/_-]+)\](.*?)\[\/url]/gi, <a href="$1">$2</a>);
return string

}


function wysiwyg(){
e=document.getElementById('write').value
e=bbcode(e)
document.getElementById('show').innerHTML = e
}

</script>
</head>

<body style=" margin: 0px auto; width: 300px; margin-top: 100px;">
<h1 style="margin: 0px 0px 5px 0px;">skriv html:</h1>
<textarea id="write" onKeyUp="wysiwyg()" style="height: 100px; width: 313px;" wrap="physical"></textarea>
<div style="background-color:#FFCC99; border: 1px solid #FF3333; min-height: 200px; min-width: 300px; padding: 5px;" id="show">
</div>
</body>
</html>

Endret av Garanti
Lenke til kommentar
  • 4 måneder senere...

Heisann, mekker en slideshow-funksjon i javascript, men har støtt på et lite problem.

function Slider(){

this.id;
this.numImg;
this.current = 0;
this.images;


// LOAD methods
this.load = function(images){

	//Gets image paths from an defined javascript array
	this.numImg = images.length-1;
	this.images = images;
};

this.get = function(id){
	this.id = id;

	// Get image paths via AJAX

	// this.load(paths);
};


// NAVIGATION methods
this.next = function(){
	this.skipTo(this.current+1);
};

this.previous = function(){
	this.skipTo(this.current-1);
}

this.to = function(num){
	this.skipTo(num);
};

this.skipTo = function(num){
	this.current = num;
	if(this.current < 1){this.current = this.numImg}
	if(this.current > this.numImg){this.current = 1}

	document.getElementById('slider1').src = (this.current) + '.jpg';
	document.getElementById('info').innerHTML =  (this.current) + '.jpg';;
};

this.play = function(){
	t=setInterval("this.next(this.current+1)",500);
};

this.pause = function(){};


}

 

 

Det er ved

	this.play = function(){
	t=setInterval("this.next(this.current+1)",500);
};

problemenet oppstår, da jeg bruker 'this' i this.next.

 

Dersom jeg gjør følgende

	var images = new Array('1','2','3','4','5','6');

var slider = new Slider;
slider.load(images);

 

Og bytter ut setInterval("this.next(this.current+1)",500); med setInterval("slider.next(this.current+1)",500); fungerer det utmerket, men resultatet blir jo mindre dynamisk. Hjelp!

Lenke til kommentar

Den ble kjøret gjennom en object event, dvs. <button onClick="slider.play()">

 

Nå prøvde jeg en annen måte, men får da feilmeldingen "document.getElementById("next") is null"

	var images = new Array('1','2','3','4','5','6');

var slider = new Slider;
slider.load(images);

document.getElementById('next').onclick = slider.next;

 

?

Lenke til kommentar

For å få til det du ønsker må du bruke en closure, men jeg hadde ikke sett på det som nødvendig for denne saken. Skal du ha flere instanser av slideren aktive på én gang er det rett vei, men dersom du bare skal ha én er det lettere å bare ha ett enkelt globalt objekt.

 

var slider = {
images : [],
iterator : 2,
timer : null,
targetElement : null,
nextImage : null,
loadImages : function( images ) {
	if ( typeof images === 'object' && images.constructor === Array && images.length > 0 ) {
		slider.images = images;
		return true;
	}
	return false;
},
play : function( timeout, targetElement ) {
	if ( typeof targetElement === 'string' ) {
		targetElement = document.getElementById( targetElement );
	}
	if ( typeof targetElement === 'object' && targetElement && targetElement.nodeType === 1 ) {
		if ( typeof slider.images[0] === 'string' ) {
			var image = document.createElement( 'img' );
			image.src = slider.images[0];
			targetElement.appendChild( image );
		}
		if ( typeof slider.images[1] === 'string' ) {
			slider.nextImage = document.createElement( 'img' );
			slider.nextImage.src = slider.images[1];
		}			
		slider.targetElement = targetElement;
		slider.timer = setInterval( slider.next, timeout * 1000 );
		return true;
	}
	return false;
},
next : function() {
	slider.targetElement.innerHTML = '';
	slider.targetElement.appendChild( slider.nextImage );
	if ( typeof slider.images[slider.iterator] === 'string' ) {
		slider.nextImage = document.createElement( 'img' );
		slider.nextImage.src = slider.images[slider.iterator];
		slider.iterator++;
	} else {
		clearInterval( slider.timer );
	}
}
};

<div id="container"></div>
<script type="text/javascript">
var images = ['1.jpg', '2.jpg', '3.jpg'];
if ( slider.loadImages( images ) ) {
	slider.play( 2, 'container' );
}
</script>

Et par kommentarer; å bruke [] og {} er raskere og enklere enn new Array og new Object, og jeg oppretter <img>-tags, men inserter de ikke før neste intervall, på den måten vil bildet sannsynligvis allerede være ferdig nedlastet i bakgrunnen i det det blir gjort synlig.

Endret av JohndoeMAKT
Lenke til kommentar

Mange takk!

Men hva gjør denne:

			if ( typeof slider.images[0] === 'string' ) {
			var image = document.createElement( 'img' );
			image.src = slider.images[0];
			targetElement.appendChild( image );
		}
		if ( typeof slider.images[1] === 'string' ) {
			slider.nextImage = document.createElement( 'img' );
			slider.nextImage.src = slider.images[1];
		}

Lenke til kommentar

Dersom det er noe i første posisjon i bildearrayet, vis det bildet med én gang.

 

Dersom det er noe i andre posisjon i bildearrayet, opprett et bildeobjekt og sett objektes src-attributt til bilde nummer to og få nextImage til å peke på andrebildet. Det gjør at bilde to starter å lastes med én gang selv om det ikke vises, og når timeren slår til for første gang blir byttet gjort uten at bildet gradvis vises mens det lastes.

Lenke til kommentar

Hehe, hadde en mistanke om at jeg uttrykte meg litt vagt ja :p

 

Vel, som et eksempel: Man fyller inn et skjema for å bli medlem på en eller annen nettside, men fordi man har skrevet en feil, blir man sendt til f.eks blimedlem.php#passordfeil, hvor en boks med en feilmelding er plassert. Jeg går ut i fra at denne boksen er generert av javascript og ikke fra serverside?

Lenke til kommentar

Mener du at koden blir sjekket av JavaScript før du får poste formet, eller at du får postet formet til server som finner ut at det var feil der og sender deg tilbake?

 

Dersom du mener siste bør det bli generert av serverside, og aller helst bør du bli tatt tilbake til samme form med verdiene du tastet inn forige gang.

Lenke til kommentar

Slike feilmeldinger genereres ikke av javascript på bakgrunn av en såkalt «ID». Et godt system for forms gjør inputvalidering både på klientside og serverside, for å sørge for sikkerhet og færreste mulige spørringer til siden. Det finnes haugevis med formgenerators på nettet. (Jeg har bl.a. laget en for lenge siden, her, men den koden føler jeg virkelig ikke for å publisere :p)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...