[JavaScript] L'inizio...

[Hirador]

Salve, vado subito al sodo: ho da poco finito di studiare le basi del JavaScript (ho usato questa guida: @) e un po', ma poco, ormai lo capisco, il problema però è che per adesso non riesco ad applicare del codice js (di qualsiasi tipo) alle pagine html; mi spiego, praticamente riesco a leggere e capire degli script già fatti (che non siano troppo complicati) ma non riesco a farne di miei partendo da zero (è strana come cosa lo so ) ed è questo il motivo che mi spinge a chiedere aiuto...
Non so manco io come poter iniziare ad "applicare" il js, per cui ogni consiglio è bene accetto...
Thx


P.S. Ovviamente, conosco sia l'html che il css abbastanza bene da poter realizzare un sito statico ma decente...

[w00000fz]

Ti consiglio di usare un Framework Javascript. Ovviamente il mio consiglio è per MooTools, mi sembra il minimo.
Ad oggi, programmare in Javascript nativo è un suicidio. I browser moderni sono tutti diversi e sviluppare in javascript nativo ti porterà a sprecare il tuo tempo per rendere il codice compatibile in tutti gli ambienti. Senza contare che non tutti i browser implementano Javascript 1.7.
I Frameworks si occupano proprio di questo: creano una soluzione che è già compatibile con tutti gli ambienti, tu devi solo usarlo. Senza contare poi che includono numerose utility già pronte all'uso.

Se vuoi vedere MooTools in azione, compreso un pò di JavaScript da leggere, fai un salto qui: http://demos.mootools.net

PS: Ho sentito dire () che a breve MooTools rilascerà la versione 1.2 (ora è 1.11), le differenze sono notevoli e l'1.2 vanta di molte migliorie ed aggiunte. Se vuoi tuffarti nel mondo di MooTools, ti consiglio di iniziare con la 1.2b2, se hai bisogno di links relativi a documentazione e download, fammelo sapere.

[m_Ramiel]

PS: Ho sentito dire ()

complimenti per il lavoro w00fz

[w00000fz]

Grazie cara.

[Hirador]

Ti consiglio di usare un Framework Javascript. Ovviamente il mio consiglio è per MooTools, mi sembra il minimo.
Ad oggi, programmare in Javascript nativo è un suicidio. I browser moderni sono tutti diversi e sviluppare in javascript nativo ti porterà a sprecare il tuo tempo per rendere il codice compatibile in tutti gli ambienti. Senza contare che non tutti i browser implementano Javascript 1.7.
I Frameworks si occupano proprio di questo: creano una soluzione che è già compatibile con tutti gli ambienti, tu devi solo usarlo. Senza contare poi che includono numerose utility già pronte all'uso.

Se vuoi vedere MooTools in azione, compreso un pò di JavaScript da leggere, fai un salto qui: http://demos.mootools.net

PS: Ho sentito dire () che a breve MooTools rilascerà la versione 1.2 (ora è 1.11), le differenze sono notevoli e l'1.2 vanta di molte migliorie ed aggiunte. Se vuoi tuffarti nel mondo di MooTools, ti consiglio di iniziare con la 1.2b2, se hai bisogno di links relativi a documentazione e download, fammelo sapere.

Scusa, sarò scemo io, ma non mi è riuscito di scaricare MooTools...
Sono andato nella pagina Download, ho spuntato tutte le voci della pagina e ho messo a scaricare, ma ho ottenuto un file dal nome mootools-release-1.11.js.txt con del codice JavaScript all'interno abbastanza "confuso", e non ci ho capito niente :/
Sai darmi qualche informazione in più? :P
Grazie di tutto

[w00000fz]

Sai darmi qualche informazione in più? :P

Sì, intanto se vuoi scaricare la versione 1.2b2, l'indirizzo è questo.

Per selezionare tutti i componenti, puoi usare il trucchetto. Nella barra degli indirizzi, scrivi:

javascript:Download.all();

E vedrai selezionarsi tutto.

Hai scaricato giusto, solo che vedi tutto confuso perchè di base è selezionata la compressione. Per avere la libreria non compressa basta che clicki su "Choose compression type" (prima di Download) e scegli "No Compression" come opzione.

Dimenticavo, te lo scarica come .txt, ma è .js. Rinominalo pure in .js
Quello sarà poi il file da includere nell'head delle pagine html tipo:

<script src=mootools-release-1.11.js" type="text/javascript"></script>

[Hirador]

[...]

Ti ringrazio per la tempestività delle risposte sono riuscito a scaricare MooTools, gli sto dando un'occhiata proprio ora, ma non è proprio qualcosa di semplice (ci capisco relativamente poco :/), specie cose di questo genere:

regExp: (/:([^-:(]+)[^:(]*(?:\((["']?)(.*?)\2\))?|\[(\w+)(?:([!*^$~|]?=)(["']?)(.*?)\6)?\]|\.[\w-]+|#[\w-]+|\w+|\*/g),

vanno decisamente al di là della mia comprensione (anche se conto di capirci qualcosa, presto o tardi)...

Non c'è qualcosa di più "semplice"? MooTools mi sembra una risorsa completa per chi ha già esperienza con il JavaScript, e a me manca proprio quella :/

[w00000fz]

Leggerti il code di MooTools può servirti per imparare JavaScript, è vero, ma tendenzialmente nessuno lo fa, perchè è JavaScript avanzato.
C'è la documentazione che è molto dettagliata: http://docs.mootools.net (se hai preso la versione 1.11, se è 1.2b http://docs12b.mootools.net).
Un'ottima risorsa di tutorial è: http://clientside.cnet.com. In particolare, ti consiglio di partire da qui
Ci sono poi le demos ed il forum... demos.moo forum.moo

E' tutto in inglese però, e per roba semplice non saprei cosa suggerirti, a meno di smanettare un pò leggendoti qualche codice di qualche sito, tutorial online, manuali, blog, forum... Quell'articolo di html.it è ok per iniziare.

Prova a farti qualche pagina d'esempio e se hai bisogno chiedi pure, come posso ti aiuto.

[Kaisersouze]

Io ti consiglio, per cominciare di darti un obiettivo. Es: "voglio fare una pagina con un javascript che mostra un calendarietto interattivo in cui cliccare e valorizzare così un campo input con la data".

A quel punto ci è anche più facile darti una mano.

[Hirador]

E' tutto in inglese però, e per roba semplice non saprei cosa suggerirti, a meno di smanettare un pò leggendoti qualche codice di qualche sito, tutorial online, manuali, blog, forum... Quell'articolo di html.it è ok per iniziare.

Prova a farti qualche pagina d'esempio e se hai bisogno chiedi pure, come posso ti aiuto.

Ci ho provato a leggere le guide, ma l'inglese lo mastico appena appena...
Cercando un po' ho trovato su questo sito (http://www.web-link.it/) la sezione riguardante il JavaScript (http://www.web-link.it/html/js.htm), ma non mi dice nulla che non sappia già...
Ho pure provato a riprodurre lo script che c'è in fondo alla pagina (quello dell'onmouseover/onmouseout) ma manco quello funziona, e il bello è che l'ho copiato tale e quale! xD

Io ti consiglio, per cominciare di darti un obiettivo. Es: "voglio fare una pagina con un javascript che mostra un calendarietto interattivo in cui cliccare e valorizzare così un campo input con la data".

A quel punto ci è anche più facile darti una mano.

Beh, l'obbiettivo ci sarebbe, ma quello che mi ero preposto è: "Imparare ad usare autonomamente JavaScript per poi passare a PHP". E' molto generico per due motivi: 1. in questo momento non devo realizzare nulla, l'ho studiato perché mi piace (:P) e in futuro mi servirà sicuramente; 2. non conosco le "vere" potenzialità del JavaScript (non avendo nessuna esperienza a parte quello che ho imparato con la guida di html.it) e non so cosa davvero potrei fare, quindi va bene qualsiasi cosa voi proponiate...

[Kaisersouze]

Uhmmm... ci sono un sacco di "esercizietti" carini per iniziare. Il primo esercizio banale che mi viene in mente è di farti fare 2 select uguali (stesse option, nello stesso ordine) sincronizzate (cambiando una, cambia anche l'altra in maniera identica e vice-versa). Quando hai fatto, l'esercizio può essere reso più complicato in diversi modi.

[Hirador]

Uhmmm... ci sono un sacco di "esercizietti" carini per iniziare. Il primo esercizio banale che mi viene in mente è di farti fare 2 select uguali (stesse option, nello stesso ordine) sincronizzate (cambiando una, cambia anche l'altra in maniera identica e vice-versa). Quando hai fatto, l'esercizio può essere reso più complicato in diversi modi.

Niente da fare, non ci riesco :/ porc...

[Kaisersouze]

Nel senso che hai scritto un codice che dovrebbe fungere o nel senso che non sai da che parte cominciare? In entrambi i casi ti posso dare una mano, ma devi fare lo sforzo di essere più preciso.

[Hirador]

Nel senso che hai scritto un codice che dovrebbe fungere o nel senso che non sai da che parte cominciare? In entrambi i casi ti posso dare una mano, ma devi fare lo sforzo di essere più preciso.

Non so proprio da dove cominciare, però ci ho provato lo stesso, e questo è ciò che è venuto fuori:

<html>
<head>
<script language="JavaScript">
<!--
function cambio() {

	value = document.contenitore.variabili.value;
	value_2 = document.contenitore.variabili_2.value;
	
	if (value == 1) { value_2 = 4; }	
	if (value == 2) { value_2 = 5; }
	if (value == 3) { value_2 = 6; }
}

//-->
</script>
</head>
<body>

<form name="contenitore" action="">
	<fieldset>
		<legend>Variabili</legend>

		<select name="variabili" onclick="cambio();">
			<option onclick="cambio();" value="#1" selected="selected">x</option>
			<option onclick="cambio();" value="#2">y</option>
			<option onclick="cambio();" value="#3">z</option>
		</select>
		
		<select name="variabili_2" onclick="cambio();">
			<option onclick="cambio();" value="#4" selected="selected">x</option>
			<option onclick="cambio();" value="#5">y</option>
			<option onclick="cambio();" value="#6">z</option>
		</select>
	</fieldset>
</form>


</body>
</html>

Ma di funzionare proprio non vuole saperne :/

[Kaisersouze]

Uhmmm... ci sono tanti errori concettuali, vedo. Andiamo con ordine.

1. Non puoi associare un evento ad un elemento di tipo 'option'... cioè, puoi... ma secondo me è poco corretto (e di certo poco pratico).

2. Avendo a che fare con elementi di tipo 'select', c'è un solo modo di gestire intelligentemente la questione: usare l'evento onchange, e non l'evento onclick. L'evento onchange ha luogo ogni volta che vai a modificare il valore selezionato, quindi fa esattamente a caso tuo.

3. Se il valore di una option è "#3", questi non è pari al "numero tre": è la stringa "#3"; quindi, nella tua funzione javascript, il valore su cui fare il confronto dovrà essere '#3', non '3'.

4. Se nella funzione salvi il valore di un oggetto HTML in una variabile e poi vai a modificare questa variabile, il valore dell'oggetto HTML resta invariato. Per questo il mio consiglio è di lavorare sugli oggetti e sulle proprietà.

Eccoti il codice corretto:

<html>
<head>
<script language="JavaScript">
<!--
function cambio() {

	document.contenitore.variabili_2.selectedIndex = document.contenitore.variabili.selectedIndex;
}

//-->
</script>
</head>
<body>

<form name="contenitore" action="">
	<fieldset>
		<legend>Variabili</legend>

		<select name="variabili" onchange="cambio();">
			<option value="#1" selected="selected">x</option>
			<option value="#2">y</option>
			<option value="#3">z</option>
		</select>
		
		<select name="variabili_2" onchange="cambio();">
			<option value="#4" selected="selected">x</option>
			<option value="#5">y</option>
			<option value="#6">z</option>
		</select>
	</fieldset>
</form>


</body>
</html>

E'tutt'altro che perfetto o elegante, ma almeno funziona. In un secondo momento, quando avrò tempo, ti spiegherò come renderlo più... "giusto".

PS Naturalmente, se w00fz ha voglia, cedo volentieri il posto.