Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Come debuggare uno script JS: un caso pratico con iCarousel.js

    Buongiorno a tutti,
    ho un problema con uno script JS che sto provando ad implementare in un'applicazione.

    Lo script è iCarousel: http://zendold.lojcomm.com.br/icarou...rousel-full.js

    Sono sicuro che funzioni perchè, oltre all'esempio online dal quale ho preso lo script, ho provato a ricostruire la stessa pagina in locale (anche se semplicemente copiando e incollando codice). Quindi, lo script funziona.

    IL PROBLEMA
    Il problema è che, ovviamente , nella mia app lo script non funziona!

    La console di Chrome mi restituisce questo errore:
    codice:
    initialize: function(container, options) {
    		this.setOptions(options);
    		this.container = $(container);
    		this.aItems = $A($$('.'+ this.options.item.klass));
    Uncaught ReferenceError: $A is not defined 
    		this.isMouseOver = false;
    La riga che dà il problema è la numero 59
    codice:
    this.aItems = $A($$('.'+ this.options.item.klass));
    L'errore è riportato nel codice che ho postato, un estratto del codice dell'intero script che potrete vedere cliccando sul link che ho inserito in apertura di questo post.

    Questo, invece, è il codice come io l'ho implementato:

    codice:
    <head>
    ...
    
    window.addEvent("domready", function() {
    	var products = new iCarousel("photos", {
    		idPrevious: "products_previous",
    		idNext: "products_next",
    		idToggle: "undefined",
    		item: {
    			klass: "productThumb",
    			size: 230
    		},
    		animation: {
    			type: "scroll",
    			duration: 1000,
    			amount: 1
    		}
    	});
    $("thumb0").addEvent("click", function(event){new Event(event).stop();products.goTo(0)});
    $("thumb1").addEvent("click", function(event){new Event(event).stop();products.goTo(1)});
    $("thumb2").addEvent("click", function(event){new Event(event).stop();products.goTo(2)});
    $("thumb3").addEvent("click", function(event){new Event(event).stop();products.goTo(3)});
    $("thumb4").addEvent("click", function(event){new Event(event).stop();products.goTo(4)});});
    
    ...
    </head>
    E poi nel body

    codice:
    <body>
    ...
    
    <div id="Photo" class="span4 media">
        <ul id="photos">
    		<li class="productThumb">
    			[img]image-1_128x128.jpg[/img]
    		
    		<li class="productThumb">
    			[img]image-2_128x128.jpg[/img]
    		
    		<li class="productThumb">
    			[img]image-3_128x128.jpg[/img]
    		
    		<li class="productThumb">
    			[img]image-4_128x128.jpg[/img]
    		
    		<li class="productThumb">
    			[img]image-5_128x128.jpg[/img]
    		
    	[/list]
    	<div id="thumbs">
    		<ul>
    			[*]
    				[img]image-1_128x128.jpg[/img]
    			
    			[*]
    				[img]image-2_128x128.jpg[/img]
    			
    			[*]
    				[img]image-3_128x128.jpg[/img]
    			
    			[*]
    				[img]image-4_128x128.jpg[/img]
    			
    			[*]
    				[img]image-5_128x128.jpg[/img]
    			
    		[/list]
    	</div>
    </div>
    
    ...
    </body>
    Quello che vorrei capire è:
    1) Appurato che $A è una variabile, dove, quando e da chi viene definita nello script? Perchè da qualche parte e da qualcosa o qualcuno deve essere definita se lo script riesce a funzionare. Ma io proprio non vedo alcun riferimento a quella variabile! Per me compare dal nulla!

    2) La sintassi mi pare abbastanza oscura: potreste spiegarmi, esattamente, this.aItems che valore dovrebbe assumere? A me pare che dovrebbe essere un array che contiene tutti gli elementi del DOM (sto usando la terminologia corretta?) che hanno la classe this.options.item.klass. Mi pare sia un ciclo, o qualcosa del genere, non ne sono sicuro. In ogni caso la sintassi non mi ricorda per niente un cicol, quindi probabilmente sto dicendo una stupidaggine, anche se riflettendoci è questo quello che dovrebbe contenere: le immagini da usare nelle slides, o no?

    3) Come faccio a stampare o leggere in altro modo il valore di $A nella pagina in cui lo script funziona? Parto dal presupposto che leggendone il valore in una pagina che funziona potrei avere un'idea più precisa del motivo per il quale non funziona, invece, nella mia pagina.
    Se fosse stato uno script PHP avrei usato qualcosa come var_dump o simili, ma in JS pare non esista questa funzione, a meno di usare un ulteriore script esterno, ma per il momento vorrei evitare di mettere altra carne a cuocere!
    In questo caso ho semplicemente modificato lo script dal tab "Sources" della console di Chrome aggiungendo un
    codice:
    alert(this.options.item.klass)
    ma non riesco a capire come fare eseguire a Chrome il "nuovo" script: ci sono riuscito solo un paio di volte su almeno 20 refresh di pagina (e ovviamente non ricordo assolutamente quale risultato conteneva ).
    Come si fa a far eseguire a Chrome uno script modificato da me (come in questo caso, per esempio, con l'alert)?

    4) In linea generale, avete articoli interessanti e utili che possa leggere per capire come si debugga uno script JS? La difficoltà che ho sempre incontrato nel farlo (e uno dei motivi principali per i quali ancora non l'ho imparato, sebbene programmi in PHP da 10 anni) è proprio quella di "muovermi" nello script per capire cosa c'è che non va. Ho letto dei breakpoint, ma onestamente il concetto e l'utilità, sebbene abbastanza chiari nella teoria, mi risultano inutili nella pratica poichè non riesco ad usarli a dovere.

    Spero che voi possiate aiutarmi a iniziare a muovere i primi passi nel mondo di JavaScript che alle volte veramente mi fa innervosire! Però la capa è tosta e figuratevi se uno scriptino mi scoraggia

    Grazie mille a tutti,
    Adamo
    eCommerceRS.NET - Commerciante, vendi on-line!
    Il mio nick è mircov e non mirco!!!

  2. #2
    Nel frattempo che aspetto che qualcuno mi aiuti, ho continuato a cercare la causa dell'errore e ho fatto un passo avanti.

    In buona sostanza iCarousel utilizza MooTools 1.1 mentre io ho la versione 1.4: è possibile sia questo il problema?
    eCommerceRS.NET - Commerciante, vendi on-line!
    Il mio nick è mircov e non mirco!!!

  3. #3
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    Originariamente inviato da mircov
    In buona sostanza iCarousel utilizza MooTools 1.1 mentre io ho la versione 1.4: è possibile sia questo il problema?
    fai una prova cambiando versione
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.