imparare javascript fai-da-te ?

A

anaketa

Nuovo Utente
25 Gen 2012
9
0
0
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 :D) 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

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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
 
A

anaketa

Nuovo Utente
25 Gen 2012
9
0
0
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

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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!

javascript-css-manip.jpg


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
 
Ultima modifica:
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
M Vorrei imparare lo javascript Javascript 1
maxbossi Imparare Javascript Javascript 2
greven Buongiorno ! imparare CSS Presentati al Forum 2
K Richiesta consiglio per imparare programmazione php PHP 2
StarFish Manuale per imparare a creareApp per Android Sviluppo app per Android 2
R Ciao a tutti! sono nuovo e spero che qualcuno possa aiutarmi ad imparare a usare un mac book apple Presentati al Forum 1
filippino Libro per imparare a sviluppare app per Android Sviluppo app per Android 2
filippino Imparare a programmare da zero Programmazione 2
I Tutorial per imparare a sviluppare applicazioni iOS Sviluppo app per iOS 0
L Imparare oop PHP 16
L guida semplice per imparare jquery jQuery 5
E Imparare Php mysql PHP 2
U Libro per imparare Java Java 2
L Libro per Imparare javascritp con php Javascript 3
A Voglio imparare Discussioni Varie 3
BEBA68 Imparare a fare siti Discussioni Varie 15
L Imparare il flash Flash 11
puffobiondo Voglia di imparare!!!! HTML e CSS 5
M Imparare as3 Flash 1
L guida o corso per imparare visual basic Visual Basic 0
A Total-Photoshop: imparare photoshop divertendosi Presenta il tuo Sito 5
A Imparare HTML [Era: maggiori informazioni] HTML e CSS 1
P Programmazione Python, imparare, guide, lezioni ecc Programmazione 0
L Imparare il flash Flash 0
A E' necessario imparare xml per il webdesign? [Era: xml] Webdesign e Grafica 1
L vorrei imparare php PHP 2
C Vorrei imparare...ma quanti dubbi! Discussioni Varie 2
Beatrixa89 Vorrei imparare a fare i pet virtuali col flash Flash 4
G Per ora desidero solo imparare a lavorare e creare siti internet. Hosting 4
alex84freeangel Imparare CSS HTML e CSS 2
S pulsanti di opzione vorrei imparare Classic ASP 14
L voglio imparare Classic ASP 6
M consigli per imparare HTML e CSS 15
S Imparare Php PHP 3
peppoweb Imparare a scrivere virus all'Università Sicurezza e Virus 0
G Imparare tutto sul il Php Velocemente PHP 0
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 3
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0

Discussioni simili

Alto Basso