deadlime.project » JavaScript http://deadlime.hu squeezed out Tue, 24 Jan 2012 21:54:45 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Mit nézel? http://deadlime.hu/2010/06/04/mit-nezel/ http://deadlime.hu/2010/06/04/mit-nezel/#comments Fri, 04 Jun 2010 18:51:52 +0000 kriz http://deadlime.hu/?p=179 Úgy tűnik tartom magamat az elmúlt években már megszokott kontent mennyiséghez. Most is csak azért írok, hogy hírt adjak arról, hogy összedobtam egy kis oldalt, aminek segítségével nyomon lehet követni ismerőseink és saját magunk sorozatnézési szokásait. Használjátok egészséggel. :)

Ja... a cím: s01e01.hu

]]> http://deadlime.hu/2010/06/04/mit-nezel/feed/ 0 A Google Reader hasznosítása http://deadlime.hu/2007/11/09/a-google-reader-hasznositasa/ http://deadlime.hu/2007/11/09/a-google-reader-hasznositasa/#comments Fri, 09 Nov 2007 18:40:24 +0000 kriz http://deadlime.hu/2007/11/09/a-google-reader-hasznositasa/ A Google Reader egy rettentő addiktív dolog, ha az ember a feedolvasást választja a hírek beszerzésének kényelmes formájaként. De mi van akkor, ha az itt olvasott dolgokat szeretnénk másokkal is megosztani a saját honlapunkon? És ha a feliratkozásainkból szeretnénk egy blogrollt csinálni az oldalunkon? Természetesen a Google is gondolt erre, ezért mindkettőre van lehetőségünk.

Az alábbiakban szeretném bemutatni, hogy hogyan is valósíthatjuk meg ezeket a dolgokat, valamint mit tehetünk, ha nem elégszünk meg az alap lehetőségekkel.

Blogroll készítése

  1. A Reader felületén kattintsunk az egyik feedünkre és a "Feed settings..." alatt adjunk hozzá egy új könyvtárat (New folder...). Legyen a neve mondjuk "blogroll".
  2. Kellő óvatossággal kattintsuk meg a jobb felső sarokban található "Settings" linket és azon belül is a "Subscriptions" fülecskét.
  3. Jelöljük ki azokat az oldalakat, amiket meg szeretnénk jeleníteni a blogrollunkban és a "More options..." lenyitható űrlapelem segítségével adjuk hozzá a "blogroll" taget.
  4. Menjünk át a "Tags" fülre. A "blogroll" neveztű tag sorában kattintsuk meg azt a kis feed ikonocskát, mire megjelenik egy csomó minden egyéb link is abban a sorban.
  5. A minket érdeklő dolog az "add a blogroll to your site" link. A megkattintás után előjön egy popup, ahol be tudjuk állítani a blogroll dobozunk stílusát.
  6. Most már csak az van hátra, hogy a személyre szabott kódunkat, amit alatta egy textarea-ban legenerált nekünk, kimásoljuk és beillesszük a blogunkra egy megfelelő helyre.

De tényleg csak ennyi lenne? Nem tudom, de nekem nem igazán sikerült olyan színsémát találnom, ami igazán passzolt volna a bloghoz, szóval ideje valami alternatív megoldást keresni. A popupban két <script> tag található. Az első egy olyan JavaScript fájl, ami a megjelenítésért felelős, ezért minket nem is érdekel különösebben. Ám a második egy aranyos JSON fájl, ami egy callback függvénynek átadja a nekünk szükséges adatokat. Ennek a linknek is csak az első fele érdekes számunkra a "callback" részig. A callback utáni részt pedig írjuk át nemes egyszerűséggel updateBlogroll-ra. Ezek után valahogy így fog kinézni:

http://www.google.com/reader/public/javascript-sub/user/AZONOSÍTÓ/label/blogroll?callback=updateBlogroll

Így egy olyan JavaScript kódot fog legenerálni nekünk a Google, ami meghívja az updateBlogroll függvényt és átadja neki a Reader-ünkből származó adatokat. Így már csak annyi a dolgunk, hogy ezt az updateBlogroll függvényt megírjuk, az őt tartalamzó JS fájt betöltsük a honlapunk <head> részében, a fent említett, Reader által generált JS-t pedig az után a tag után, ahova a blogrollt be szeretnénk szúrni. Egy példa az updateBlogroll függvényre (a kód prototype.js-t használ):

function updateBlogroll(data)
{
	var parent = $('blogroll-list');
	parent.innerHTML = '';
	var len = data.items.length;
	for (var i = 0; i < len; ++i)
	{
		parent.insert('<li><a href="'+data.items[i].alternate.href+'">'+data.items[i].title+'</a></li>');
	}
}

Ha ezt a függvényt mondjuk egy update.js fájlba mentjük el, akkor a HTML kódunk valahogy így nézhet ki:

...
<script language="JavaScript" type="text/javascript" src="update.js"></script>
</head>
...
<ul id="blogroll-list">Blogroll betöltése...</ul>
<script language="JavaScript" type="text/javascript" src="http://www.google.com/reader/public/javascript-sub/user/AZONOSÍTÓ/label/blogroll?callback=updateBlogroll"></script>
...

Feed elemek megosztása

Hasonló módon érhetjük el azt is, ha szeretnénk az általunk érdekesnek talált linkeket megosztani a blogunk látogatóival. A Reader beállításainál a "Tags" fülön található egy "Your shared items" (ide úgy kerülnek bele az elemek, ha "Expanded view"-ban Shift+S-t nyomunk egy bejegyzésen vagy megnyomjuk a "Share" linket az elem alján. "List view"-ban csak az utóbbira van lehetőségünk, ha már kinyitottunk egy elemet). Ennek a sorában kattintsuk meg az "add a clip to your site" linket. Egy hasonló popup ugrott fel, mint a blogroll esetében is. Ha nem szeretnénk saját formázást használni akkor a megfelelő beállítások elvégzése után a textarea-ban található kód beillesztésével végeztünk is. Ellenkező esetben ismét a második <script> tagben lévő linket kell kimásolnunk. A callback után most írjuk az updateLinks függvénynevet, valahogy így:

http://www.google.com/reader/public/javascript/user/AZONOSÍTÓ/state/com.google/broadcast?n=15&callback=updateLinks

Az n utáni szám átírásával tudjuk meghatározni, hogy hány darab elemet kapjunk vissza. Az updateLinks függvény is hasonlóan fog kinézni, mint az előző updateBlogroll:

function updateLinks(data)
{
	var parent = $('link-list');
	parent.innerHTML = '';
	var len = data.items.length;
	for (var i = 0; i < len; ++i)
	{
		parent.insert('<li><a href="'+data.items[i].alternate.href+'">'+data.items[i].title+'</a></li>');
	}
}

Természetesen nem csak ennyi adatot kapunk meg az elemekről. Nézzünk pár fontosabbat a teljesség igénye nélkül (a továbbiakért érdemes a kapott fájlba belenézni):

  • data.items[i].published
    A bejegyzés publikálásának időpontja Unix timestamp formában.
  • data.items[i].summarySnippet
    A bejegyzés rövid, összefoglaló szövege.
  • data.items[i].origin.title
    Az oldal neve, ahol megjelent ez a bejegyzés.
  • data.items[i].origin.htmlUrl
    Az oldal címe.

Körülbelül ennyi lenne a Google Reader pár hasznos felhasználási módjáról. A jobb oldali sáv "Linkek" és "Blogroll" részében látható a működő példa.

]]> http://deadlime.hu/2007/11/09/a-google-reader-hasznositasa/feed/ 7 Prototype események http://deadlime.hu/2007/03/28/prototype-esemenyek/ http://deadlime.hu/2007/03/28/prototype-esemenyek/#comments Wed, 28 Mar 2007 07:18:43 +0000 kriz http://deadlime.hu/2007/03/28/prototype-esemenyek/ Mivel az "esemény" és annak kezelése a JavaScript-ben az egyik legfontosabb dolog, ezért nem teljesen mindegy, hogy mégis hogyan csináljuk. Vagy méginkább az, hogy hogyan kell csinálnunk. Értem itt ezalatt azt, hogy minden egyes alkalommal egy kisebb fajta regényt kell írnunk, amikor egy objektum egy eseményét akarjuk figyelni, vagy elég egy Event.observe() hívás, ami elvégez számunkra minden piszkos munkát.

Az "Objektum-orientált JavaScript" című bejegyzésem utolsó példájával kapcsolatban felmerült, hogy kicsit jobban is kifejthettem volna az ott történteket. Mivel ott nem az eseményeken volt a hangsúly, ezért gondoltam egy külön bejegyzésben teszem ezt meg.
A prototype.js az események téren is képes a dolgunkat a végtelenségig leegyszerűsíteni. Egészen addig, amíg mi magunk nem akarjuk a dolgokat "bonyolítani", és bele nem fogunk az objektum-orientáltságban. Ilyenkor kezdődnek a problémák. Tegyük fel, hogy szeretnénk egy olyasmi dolgot megoldani, hogy két gomb segítségével egy harmadik gombra tudunk eseményt tenni, majd azt az eseményt levenni a gombról. Objektumok nélkül nem lenne különösebben nehéz dolgunk:

function add_event(event)
{
	Event.observe('myButton_1', 'click', alert_me);
}
function remove_event(event)
{
	Event.stopObserving('myButton_1', 'click', alert_me);
}

var text = 'Ez a \'text\' tartalma';
function alert_me(event) {
	if (text != null) {
		alert('A \'text\' tartalma: '+text);
	}
	else {
		alert('A \'text\' nincs definiálva!');
	}
}

Event.observe(window, 'load', function(event) {
	Event.observe('myButton_2', 'click', add_event);
	Event.observe('myButton_3', 'click', remove_event);
});

A dolog persze kezd bonyolódni, ha nem csak egy, hanem mondjuk n darab ilyen gomb trióra kell ráhúznunk ezeket az eseményeket, így joggal merül fel az OO-ra az igény. Hirtelen felindulásból a fenti mintájára összedobunk valami ilyet:

var Teszt = Class.create();
Teszt.prototype = {
	initialize : function(alert_button, event_add_button, event_remove_button, text)
	{
		this.alert_object = $(alert_button);
		this.add_object = $(event_add_button);
		this.remove_object = $(event_remove_button);

		this.text = text;

		Event.observe(this.add_object, 'click', this.add_event);
		Event.observe(this.remove_object, 'click', this.remove_event);
	},

	add_event : function(event)
	{
		Event.observe(this.alert_object, 'click', this.alert_me);
	},
	remove_event : function(event)
	{
		Event.stopObserving(this.alert_object, 'click', this.alert_me);
	},

	alert_me : function(event)
	{
		if (this.text != null) {
			alert('A \'text\' tartalma: '+this.text);
		}
		else {
			alert('A \'text\' nincs definiálva!');
		}
	}
};

Event.observe(window, 'load', function(event) {
	var gombok = new Teszt('myButton_1', 'myButton_2', 'myButton_3', 'Ez a \'text\' tartalma');
});

Kódunk több sebből vérzik, gyakorlatilag a halálán van, és a hirtelen támadt pánikban lövésünk sincs, hogy mi a franc baja lehet ennek a látszólag működőképes kódnak. Miközben a prototype.js összes fejlesztőjének rokonságát végigszidjuk, lelünk rá a dokumentációban pár érdekes részletre, valami bind() függvénnyel kapcsolatban.
A probléma az, hogy amikor megnyomjuk az "Esemény hozzáadása" gombot, és lefut az add_event() függvény, az abban a függvényben lévő "this" az nem éppen az lesz, mint amire mi gondolunk. Ahhoz, hogy ez a "this" ugyanaz legyen, mint ami az initialize() függvényben a "this", pár változtatást kell eszközölnünk:

Event.observe(this.add_object, 'click', this.add_event.bind(this));
Event.observe(this.remove_object, 'click', this.remove_event.bind(this));

Ami azt illeti, a dolog működik, csak éppen az alert_me() folyamatosan azt mondja nekünk, hogy a text nincs megadva, pedig de. Mielőtt ismét elővennénk a fejlesztők rokonságát, látjuk, hogy talán az add_event() részbe se ártana egy bind(), hátha ugyanaz a probléma:

Event.observe(this.alert_object, 'click', this.alert_me.bind(this));

És csodák csodájára működik... izé... öhm... majdnem. Hozzáadjuk az eseményt az egyik gombbal, megnyomjuk a gombot, kiírja a megfelelő szöveget, majd levesszük az eseményt, megnyomjuk a gombot, és látjuk, hogy az esemény még mindig rajta van. Ennek az oka az, hogy az Event.stopObserving() segítségével csak elnevezett függvényeket tudunk a megfigyelésből kivonni. De hát ez el van nevezve, az a neve, hogy this.alert_me. Azaz, hogy majdnem az a neve. Mert a mi alert_me() függvényünkön meghívtuk a bind()-et, ami egy névtelen függvénnyel tér vissza, így szivatva meg minket.
Még mielőtt rátérnénk a megoldásra, nézzük meg mi is az a névtelen függvény, hogy biztosan teljesen képben legyünk:

Event.observe(window, 'load', function(event) {
	alert('Névtelen függvény vagyok!');
});

var myFunction = function(event) {
	alert('Én nem vagyok névtelen függvény!');
};
Event.observe(window, 'load', myFunction);

Tehát, az Event.stopObserving() csak a második esetben használható, amikor tudjuk annak a függvénynek a nevét, amit le akarunk állítani. Nincs más dolgunk, mint az initialize() végére fűzni egy sort...

this.alert_event = this.alert_me.bind(this);

...valamint a következőképpen módosítani az add_event() és remove_event() függvényeket:

add_event : function(event)
{
	Event.observe(this.alert_object, 'click', this.alert_event);
},
remove_event : function(event)
{
	Event.stopObserving(this.alert_object, 'click', this.alert_event);
},

A megoldás már csak annyiban kifogásolható, hogy a bind() helyett a prototype.js nyújt számunkra egy másik függvényt is, amit kifejezetten eseménykezelőkre lett kitalálva. Ez a gyönyörű nevű bindAsEventListener(). Miután lecseréltük az összes bind()-ünket erre a függvényre, készen is vagyunk. Egy - remélhetőleg - működő példa megtekinthető itt.

]]> http://deadlime.hu/2007/03/28/prototype-esemenyek/feed/ 0 Objektum-orientált JavaScript http://deadlime.hu/2007/03/20/objektum-orientalt-javascript/ http://deadlime.hu/2007/03/20/objektum-orientalt-javascript/#comments Tue, 20 Mar 2007 19:49:42 +0000 kriz http://deadlime.hu/2007/03/20/objektum-orientalt-javascript/ Egy régebbi melós projekt során merült fel a dolog, aztán azóta még nem volt nagyon időm írni róla, pedig akkor eléggé rákattantam a témára. Aztán most, hogy újraírtam a deadlime bejegyzés értékelő rendszerét valami korrektebb formába (azok a kis csillagok jobbra a bejegyzés után...), gondoltam ejtek néhány szót az objektum-orientált JavaScript szépségeiről.

A "JavaScriptben programozás szépségei", mint olyan, nem nagyon merült fel bennem soha, ha ezzel a nyelvvel kellett foglalkoznom (bár ebben biztos az is szerepet játszott, hogy még a különböző keretrendszerek elterjedése előtt az embernek if ágak egész erdejét kellett írnia, hogy a műve végül a főbb böngészőkben működjön). Szerencsére ezen sikerült változtatni.

A dolog alapjait egy, a weblaboron megjelent cikk elég jól leírja, én most inkább egy másik megközelítést szeretnék megemlíteni, amit ha a prototype.js-el együtt használunk, egy sokkal szebb szerkezetet kapunk.
Kezdetben ugye volt nekünk a függvény, mint olyan, amit egy alternatív módon is meg tudtunk adni:

var f = function(param)
{
	alert('param: '+param);
};

f('valami');

Aztán van olyan dolog is a JavaScript-ben, hogy asszociatív tömb, amit valahogy így kell elképzelni:

var a = {
	a : 'a értéke',
	b : 'b értéke',
	c : 'c értéke'
};

alert(a['a']);

A dolog ott kezd érdekessé válni, hogy ugye minden ilyen tömbelem elérésre létezik egy alternatív módszer is, ami már olyan "objektum-orientált" szerű:

var a = {
	a : 'a értéke',
	b : 'b értéke',
	c : 'c értéke'
};

alert(a.a);

Itt jön a gondolat, hogy mi lenne, ha ezt a két módszert összekombinálnánk, és akkor legalább már ez az OOP dolog annyiban megvalósulna, hogy a függvényeket egy csokorba tudjuk gyűjteni:

var c = {
	f : function(param)
	{
		alert('param: '+param);
	}
};
c.f('valami');

Most már mondhatni alakul a dolog, de hát még a példányosítás hiányzik. Itt jönnek a képbe a függvények (tehát ezen a ponton már érdemes a weblabor cikk által nyújtott tudás birtokában lenni), amikkel lehet ilyen perverz dolgokat is művelni:

var f = function(param)
{
	this.out = param;

	this.alert_me = function()
	{
		alert('param: '+this.out);
	};
};

var p = new f('valami');

p.alert_me();

Na kérem szépen, ez már egészen OOP, már csak helyre kell pofozni, mert ez így nem kicsit csúnya. Tehát, van a minden függvényenek alapból egy prototype tulajdonsága (aminek tökéletesen semmi köze nincs a prototype.js keretrendszerhez), aminek ilyen asszociatív tömb formában szépen meg lehet adni a függvény további tulajdonságait is. Valahogy így:

var c = function(param) {
	this.out = param;
};
c.prototype = {
	alert_me : function()
	{
		alert('param: '+this.out);
	}
};
b = new c('másvalami');

b.alert_me();

A dolog csúnyasága csak annyi, hogy a konstruktor és a többi függvény el van választva egymástól. Ezen segít a prototype.js, aminek van egy Class.create() függvénye. Ennek segítségével az osztályunk initialize() függvénye automatikusan meghívódik új példány készítése esetén, és átadódnak neki a paraméterek:

var c = Class.create();
c.prototype = {
	initialize : function(param)
	{
		this.out = param;
	}
	alert_me : function()
	{
		alert('param: '+this.out);
	}
};
b = new c('másvalami');

b.alert_me();

Emiatt az egy dolog miatt mondjuk még nem lenne érdemes a prototype.js -t használni, mivel ez a része csak ennyiből áll:

var Class = {
	create : function() {
		return function() {
			this.initialize.apply(this, arguments);
		};
	}
};

De mivel egyéb jó tulajdonságokkal is rendelkezik, ezért nézzünk is meg még egy kis példakódot, hogy jobban előjöjjenek a dolog szépségei:

var Gomb = Class.create();
Gomb.prototype = {
	initialize : function(id)
	{
		this.object = $(id);

		Event.observe(
			this.object,
			'mouseover',
			this.evt_over.bindAsEventListener(this)
		);
		Event.observe(
			this.object,
			'mouseout',
			this.evt_out.bindAsEventListener(this)
		);
		Event.observe(
			this.object,
			'click',
			this.evt_click.bindAsEventListener(this)
		);
	},
	evt_over : function(evt)
	{
		alert(this.object.id+' mondja: Hurrá, fölöttem van az egér!');
	},
	evt_out : function(evt)
	{
		alert(this.object.id+' mondja: Már nincs :\'(');
	},
	evt_click : function(evt)
	{
		alert(this.object.id+' mondja: Köszi, hogy megnyomtál!');
	}
};

var my_button = new Gomb('id_button');

A használt prototype.js függvényekről további információ: Class.create(), Event.observe(), Function.bindAsEventListener(). Ennyit mára, JavaScriptekben gazdag további szép napot. :)

]]> http://deadlime.hu/2007/03/20/objektum-orientalt-javascript/feed/ 0 Hogyan szövegeljünk JSben? http://deadlime.hu/2006/05/16/hogyan-szovegeljunk-jsben/ http://deadlime.hu/2006/05/16/hogyan-szovegeljunk-jsben/#comments Tue, 16 May 2006 17:20:11 +0000 Tommey http://deadlime.hu/2006/05/16/hogyan-szovegeljunk-jsben/ Az igazi cím inkább a "Hogyan írjunk ki egy szöveget JavaScript-ben betűnként?" lenne, de túl hosszúnak tűnt :) Mai napon sok vergődésembe került a címben említett problémát megoldani, pedig már tanultam is róla, dehát könnyen felejt az ember. Csináltam ma egy design-t és úgy gondoltam milyen jó lenne, ha egy kis emberke lenne rajta, és mellette egy buborék 'amiben beszél'. Ez így szép is meg jó is, de a html ezzel már nem tud mit kezdeni, be kell vetni a javascript tudást. A getElementById-ig ment is a dolog, aztán jött a probléma, hogyan mondjuk meg, hogy annak az elemnek a szövegét akarjuk változtatni? :)

Első megoldásként olyasmi szép függvényeket találtam a problémára: createTextNode, appendChild, replaceChild, removeChild, stb. Tulajdonképpen a szöveg beírásával nem is volt gond, az működött, de akartam egy extra fícsört, hogy bizonyos időközönként történjen meg a 'beszéd' újra, ehhez viszont az kéne, hogy törölni tudjam az eddigi szöveget. Valahol találtam is még ilyen deleteData függvényt is, de nem igazán működött, a replaceChild-al az volt a gond, hogy kell neki, hogy mit minek a helyére tegyen, és itt még a mit nem is kérdéses, de a minek a helyére az elég problémás, hiszen nem egy elemről van szó, csak szövegről, és így nem tudtam mit csináljak, ekkor léptem át a DOM csodálatos világába [bár ha most ez hülyeségnek tűnne, akkor csak azért van, mert nem tudom hol a határ a JS és DOM között:]

A megoldást tehát egy nagyon egyszerű elem jelentette, az 'innerHTML', ez esetünkben annyit tesz, mint egy form elemeinél a 'value', megkaphatjuk a mező értékét és módosíthatjuk is vele könnyedén, csakhogy utóbbi csak formokban alkalmazható, egyéb elemeken nem igazán, van helyette 'innerHTML', csak rá kell jönni, hogy van, és innentől kezdve pofonegyszerű a feladat :)

Lássuk tehát a megvalósulást. Először is kell egy függvény, amit a body onload="" metódusából hívhatunk, stilszerűen init()-nek nevezhetjük, tehát a html-ben ennyi változtatás szükséges:

<body onload="init()">

Ezután az init()-ben egyszerűen meghívjuk a függvényünket, nálam az 'udv' nevet kapta, mivel üdvözlő szövegről van szó. A 0-ás paraméteréről mindjárt szót ejtek. Tehát az udv függvényünket indítjuk, ez egy változóba elteszi nekünk a kívánt szöveget. A következő sor miatt már el kell áruljam, hogy az 'n' paraméterünket arra használjuk, hogy az n. karaktert vegyük ki az előbb specifikált szövegből, hiszen az jön soron a kiiratásban. Ekkor tehát végeznünk kell egy tesztet, hogy odaértünk-e már az utolsó utáni betűhöz, mivel ilyen nincs, ezért nyílván ekkor már nem akarunk tovább betűket kiírni tovább. A kiírás folyamata a következő:

  1. eltesszük egy változóba a módosítani kívánt html elem referenciáját
  2. előállítjuk a soron következő karaktert [az n.-et]
  3. kiírjuk az új betűt a képernyőre

A következő betű kiírásához rekurzívan meg kell hívni a függvényünket, azzal a különbséggel, hogy az n paramétert most már (n+1)-nek választjuk. A setTimeout('függvényNeve(paraméterei)',[a szünet hossza milimásodpercben]) paraméterezése miatt én egy külön változóban szoktam előbb létrehozni az első paramétert, mivel egy szöveget vár, és voltak már problémáim belőle amikor ott helyben akartam összerakni a függvényhívást :) szóval, ha megfogadtok egy jó tanácsot, akkor ha paraméterezni kell a függvényt, akkor előbb egy változóban hozzátok létre, úgy nem lehet gond. A szünet hosszát pedig én 100ms-re állítottam, bár ennyivel nem sokan tudnak gépelni szerintem, az átlag gépelési időhöz inkább a 200-300 lenne az ideális, de kipróbáltam és szép meg jó, tényleg olyan, mintha valaki mást látnék szenvedni, ahogy gépel, de mivel az olvasási sebességünk gyorsabb a gépelésinél ezért a 100 olyan köztes megoldásnak jó szerintem :) Aki a végső határokat szeretné feszegetni az próbálkozhat a 40-41ms-sel [a szemünk 24-25 képet lát másodpercenként, tehát 1000/25=40ms idő az teljesen korrekt, annak aki esetleg js-ben mozgást kívánna létrehozni, bár a mozgásoknál inkább 30ms a szokásos, de erről majd egy másik cikkben:]

Visszatérve: meghívjuk a setTimeout-ot és a beállított idő múlva meghívódik az (n+1). függvényünk, és írja szépen tovább a betűket. Amiről még nem esett szó, hogy mi van, ha elfogytak a betűk. Ki-ki belátása szerint csinál amit akar, én alkottam egy cls() függvényt, gondolom nehéz kitalálni, hogy mi célt szolgálhat :) Említettem a cikk elején, hogy szerettem volna ha többször is megtörténik ez a 'gépelés', ehhez törölni kell az eddig beírt szöveget, majd újraindítani a folyamatot, a törlés mint látható egyszerűen csak annyi, hogy a [kiválasztott elem].innerHTML tagját egy üres szöveggel tesszük egyenlővé. A kódunk véglegesen tehát ilyen formát ölt:

/* Iniciálunk, futtatunk...futtatunk, törlünk, futtatunk.. */
function init() {
 udv(0);
}
function udv(n) {
 var t = 'Üdvözöllek az oldalon! Köszönöm, hogy meglátogattál.';
 if (n!=t.length) {
  var h = document.getElementById('header');
  h.innerHTML += t.charAt(n);
  var f = 'udv('+(n+1)+')';
  setTimeout(f,100);
 } else setTimeout('cls()',30000);
}

function cls() {
 var h = document.getElementById('header');
 h.innerHTML = '';
 udv(0);
}

Várok további ötleteket, hogy mikre vagytok kíváncsiak javascript terén, és persze ha felmerül valami megoldott probléma a házam táján közlöm veletek :)

]]> http://deadlime.hu/2006/05/16/hogyan-szovegeljunk-jsben/feed/ 0