imparare javascript fai-da-te ?

anaketa · 1 Feb 2012

Good morning a tutti!
Qualcuno di voi super esperti mi sa consigliare un bel libro su cui posso imparare un po di javascript?
Anticipo che io sono una web designer (quindi html, css) che ha gia lavorato un po con javascript (quindi di vista lo conosco

) e mi sono gia studiata un paio di mini guide introduttive tipo quella proposta qui da Mr.Webmaster.
Ma al di la di questo sono un po nuova. Però vorrei qualcosa che mi dia la possibilità di metterlo in pratica con esempi e casi facili da trovare

p.s. se ebook meglio xk sono in terra estera!

Attendo i vostri saggi consigli!
Grazzie :faraone:

max_400 · 1 Feb 2012

Ciao Anaketa e ben tornata sul forum

Come guide sono buone quelle del nostro forum :book:
Ma personalmente se vuoi imparare velocemente basta guardare l'indice di questa sezione e troverai delle cose molto interessanti da vedere da provare e che ti potranno servire in futuro.

Visto che conosci i css voglio farti vedere un esempio di manipolare i css tramite javascript
guarda quest'esempio:
http://max400.netne.net/nascondi-visualizza-div-javascript-css.html

e questo è il codice:

Codice:

<head>
<style type="text/css">
.classe1{
display:none;
}
.classe2{
display:block;
}
</style>

<script  type="text/javascript">

function nascondi(){
document.getElementById('kkk').className="classe1";
}
function visualizza(){
document.getElementById('kkk').className="classe2";
}
</script>
</head>

<body>
<div id="kkk" align="center">questo è un div chiamato kkk</div>  <br>

<div align="center">
<input type="button" onclick="nascondi()" value="nascondi">
<input type="button" onclick=" visualizza()" value="visualizza">
</div>
</body>

cominciando dall'alto la parte css possiamo distinguere 2 classi
la prima imposta il display su none (per nascondere)
il secondo su block (visualizza)
e queste cose già le sai presumo...
a parte interessante di quest'esempio è che javascript manipola queste classi
a suo piacimento...
infatti più sotto possiamo distinguere 2 funzioni:
- la funzione nascondi() //questa richiama la .classe1 (display:none)
- la funzione visualizza() //questa richiama la .classe2 (display:block)

il comando getElementById('kkk').className è il cervello del sistema imposta
su quale oggetto... in questo caso un div.... scaricare l'operazione!
il className è l'attributo per richiamare la classe.
infine i pulsati input ...con onclick richiamiamo la funzione che vogliamo eseguire.

Prova e vedi se ti funziona
by Max_400

anaketa · 1 Feb 2012

Daii!! Pensa che proprio poco tempo fa c'era un collega che lavorava su un giochetto del genere e non ero ancora riuscita bene a capire cm avesse fatto! Grazie mille ora ho capito benissimo ed e anche abbastanza semplice.
Si Cmq credo che possa essere molto utile fare delle piccole cose del genere.
E provo a riguardarmi anche le guide qui magari me ne sono persa qualcuna..
Grazie Max :mavieni:

max_400 · 2 Feb 2012

Naturalmente ci sono modi più semplici

Ad esempio agire direttamente sul testo tramite javascript.
Javascript contiene al suo interno dei comandi css... è davvero straordinario
tutto ciò che si può fare con javascript senza bisogno di utilizzare i css

ho creato una serie di pulsanti tanto per fare esperimenti. Premendoli si creano una serie di effetti sul testo o sulla foto!

esempio
http://max400.netne.net/setAttribute-tutti-gli-esempi.html

il codice

Codice:

<div align=center>
<font  color="red"><font size="6">Esperimenti del Dottor Max_400 </font></font><br>
<font  color="blue"> <font size="5">Manipolare i css con javascript</font></font>
</div>
<div align=center id="testo"> testo </div> 
<img id="img"  src="http://max400.netne.net/meloni-pau.jpg" width=300 height=300><br>

<!-------------------------------------------------per il testo---------------------------------------------------------------->
<input type=button onclick="document.getElementById('testo').style.backgroundColor='#FFcc00'"  value="sfondo giallo">
<input type=button onclick="document.getElementById('testo').style.backgroundColor='#FFFFFF'"  value="sfondo bianco">
<input type=button onclick="document.getElementById('testo').style.fontSize='30px'"  value="size10px">
<input type=button onclick="document.getElementById('testo').style.fontSize='50px'"  value="size14px">
<input type=button onclick="document.getElementById('testo').style.fontSize='70px'"  value="size20px">
<input type=button onclick="document.getElementById('testo').style.color='#ff0000'"  value="rosso">
<input type=button onclick="document.getElementById('testo').style.color='#000000'"  value="nero">


<input type=button onclick="document.getElementById('testo').style.fontWeight='bold'"  value="grassetto">
<input type=button onclick="document.getElementById('testo').style.fontWeight='normal'"  value="normal"><br>
<input type=button onclick="document.getElementById('testo').setAttribute('align','left')"  value="a sinistra">

<!-------------------------------------------------per la foto-------------------------------------------------------------->
<input type=button onclick="document.getElementById('img').setAttribute('border','3')"  value="bordo">
<input type=button onclick="document.getElementById('img').removeAttribute('border')" value="rimuovi">

<input type=button onclick="document.getElementById('img').style.border='5px solid blue'"  value="bordo blu">
<input type=button onclick="document.getElementById('img').style.border='0px solid blue'"  value="rimuovi bordo">

<input type=button onclick="document.getElementById('img').setAttribute('width','700')"  value="a 700">
<input type=button onclick="document.getElementById('img').setAttribute('width','300')"  value="a 300">
<input type=button onclick="document.getElementById('img').removeAttribute('width')" value="rimuovi width"><br>

<input type=button onclick="document.getElementById('img').style.marginLeft='350px'" value="sposta di 350">
<input type=button onclick="document.getElementById('img').style.marginLeft='0px'" value="ritorna a 0">

come puoi vedere ... si gioca con i css
Per qualsiasi cosa non hai che da chiedere

ciao bella micetta!
Er Doctor Max_400

Cerca

Cerca

imparare javascript fai-da-te ?

anaketa

Nuovo Utente

max_400

Utente Attivo

anaketa

Nuovo Utente

max_400

Utente Attivo

Discussioni simili