Javascript Non capisco la parte object-oriented di Javascript

[SyncroIT]

Ciao ragazzi.
Ho un problema, diciamo che sono sempre stato per i linguaggi procedurali tipo C o PHP, però di conseguenza non ho mai capito e non sono mai riuscito a capire i linguaggi object-oriented. Da poco sono passato al web design e ho iniziato a studiare le basi di Java, cosi ho rinunciato perché non capivo nulla. Da tempo però sapevo le basi di JS, e allora ho deciso di fare uno script per rilevare la grandezza di un immagine di background e dare le dimensioni in background-size, solo che mi son reso conto che per farlo serve una parte avanzata di Java, la parte object-oriented :suicidio:

Ora ho deciso di studiarmela, ma non riesco proprio a capire certe logiche, a cosa serve "this"?
var funzioneGlobale = function() {
alert(this); // oggetto implicito window
}

var container = {
funzioneLocale: function() {
alert(this); //oggetto container
}
}

Cioè proprio non capisco, potreste aiutarmi gentilmente?
Se siete disposti a spiegarmi un introduzioni ai linguaggi object-oriented (comprensiva di this, object, number ecc) ne sarei grato, il mio skype è syncroit se volete aiutarmi aggiungetemi. Vi ringrazio.

 

[Webber]

Js non è un vero e proprio oop, anche se ha le dinamiche simili. La keyword "this" nei linguaggi oop in pratica ritorna l'oggetto della classe in cui è presente(ovvero possiamo dire il parent). Se io ho una classe Casa e un metodo "costruisci" che ritorna "this" in pratica vuol dire che quel metodo ritorna l'istanza di Casa.
Anche nel js la keyword this ritorna il "padre" del metodo, ma è un po più nascosto il meccanismo. In pratica nel js c'è un grande oggetto dal quale derivano tutti gli altri, l'oggetto window. Se io ho un metodo senza un esplicito oggetto padre(come funzioneGlobale()), l'oggetto padre è window, this ritorna window(che nell'alert dovrebbe ritorna [Window window] o qualcosa di simile). Infatti se provi a fare window.funzioneGlobale() o window.alert() funzionano entrambi.
Se il codice js viene usato in un event(onclick, onmousehover etc.), l'oggetto padre non è piu window, ma l'elemento(HTMLElementObject) dell'evento. Se tipo ho la variabile "articolo", che equivale a document.getElementsByTagName('article')[0];, tutti gli eventi(onclick etc.) sono metodi di articolo.

Nel tuo secondo esempio si definisce l'oggetto container, con il metodo funzioneLocale. Dato che il "padre" di funzioneLocale è container, verrà restituita l'istanza di container. Quindi per assurdo si potrebbe fare una cosa del genere.

var container = {
funzioneLocale: function() {
alert(this); //oggetto container
},
getInstance: function(){return this;}//restituisce l'oggetto padre, container
} 

var istanza_di_container = container.getInstance();
istanza_di_container.funzioneLocale(); // restituisce l'alert con [Container instanza_di_container] (penso)

[MENTION=205890]Syncro[/MENTION]

 

[SyncroIT]

[MENTION=172276]Webber[/MENTION]
Ho capito ti ringrazio, ma ho un'altra domanda...

Perché la parte messa in grassetto è fatta cosi? Perché quei + e i 3 '''?
<script>
function changeImgSize(objectId,newWidth,newHeight) {
imgString = 'theImg = document.getElementById("'+objectId+'")';
eval(imgString);
oldWidth = theImg.width;
oldHeight = theImg.height;
if(newWidth>0){
theImg.width = newWidth;
}
if(newHeight>0){
theImg.height = newHeight;
}
}
</script>

 

[Webber]

Non serve.

Prendiamo che objectID = "elemento"
Con i + : funz("'+objectId+'") -----> funz("elemento")
Senza i + : funz(objectId) ---> funz("elemento")

Non cambia nulla, anzi è meglio toglierli


Ah per i tre ', non sono tre ' ma un " e un '

 

[SyncroIT]

Non serve.

Prendiamo che objectID = "elemento"
Con i + : funz("'+objectId+'") -----> funz("elemento")
Senza i + : funz(objectId) ---> funz("elemento")

Non cambia nulla, anzi è meglio toglierli


Ah per i tre ', non sono tre ' ma un " e un '

Ti ringrazio della risposta. Io sto cercando di fare uno script che praticamente prenda l'URL dell'immagine contenuta in background-image e ne calcoli width e height, una volta finito il calcolo aggiorna background-size con width e heigth corretti, solo che ho un dubbio.
Per prendere l'URL dell'immagine come faccio? Se faccio document.getElementById("content").style.backgroundImage mi esce "url('url.png')" e non mi esce l'URL, posso prendere solo la parte contenuta tra le parentesi tonde?

 

[Webber]

var url = "url('url.png')";
var pattern = /\('(.*?)'\)/;
var def_url = pattern.exec(url); //url.png

Ma mi spieghi meglio cosa vuoi fare? Forse non c'è nemmeno bisogno del js

 

[SyncroIT]

var url = "url('url.png')";
var pattern = /\('(.*?)'\)/;
var def_url = pattern.exec(url); //url.png

Ma mi spieghi meglio cosa vuoi fare? Forse non c'è nemmeno bisogno del js

Ci ho ripensato! Voglio fare solo uno script che diminuisce l'immagine di background. Però al posto di objectId che ci metto? BackgroundSize?

<script>
function changeImgSize(objectId,newWidth,newHeight) {
imgString = 'theImg = document.getElementById("'+objectId+'")';
eval(imgString);
oldWidth = theImg.width;
oldHeight = theImg.height;
if(newWidth>0){
theImg.width = newWidth;
}
if(newHeight>0){
theImg.height = newHeight;
}
}
</script>

Eppoi al posto di theImg.height voglio metterci theImg.backgroundSize , ma cosa ci metto dopo = ?
C'è un modo di formattare una stringa in modo da inserirci height e width? Perché il formato di Background size sarebbe tipo "background-size: 300px 300px;".

 

[Webber]

"Voglio fare solo uno script che diminuisce l'immagine di background", in base a cosa? Mi posti l'html ?

 

[SyncroIT]

"Voglio fare solo uno script che diminuisce l'immagine di background", in base a cosa? Mi posti l'html ?

In base alla risoluzione dello schermo. Nell'HTML ancora non c'è il bg, però coi media query non posso diminuirlo, perché viene tagliato e non ridimensionato, mi serve qualcosa che lo ridimensiona, ma ora che ci penso neanche con JS lo ridimensiona se vado a cambiare background-size.... Come posso fare per ridimensionarlo?

PS: Ah si, col CSS la ridimensiona, quindi JavaScript non mi serve uso i media queries!

 

[Webber]

Facendo background-size:100% 100%; ti si ridimensiona automaticamente alle misure dello schermo