PRATICA

Tutto JavaScript· applicativi, applicazioni e codice Ilcut & paste" ·

(applet incluse)JavaScript in tutte le salse: a partire dagli applicativi che lo generano automaticamente surichiesta, per arrivare al codice da copiare al volo con il più classico dei "copia e incolla"!

Il tutto passando attraverso argomenti specifici, come lo sono la generazione dei menu (a discesae non) e gli effetti DHML di tipo cross-browser, o più generiche combinazioni di effetti ipermediali.A margine della traccia monotematica, l'articolo si completa infine con la "IPscheda" di questo

mese -che dedichiamo a Paper Killer di Visual Vision- e alla messa in linea di un altro "minigame"-ovviamente in JavaScript!- su IPweb.

di Bruno Rosati

che quella visuale ed è in grado di real-izzare lo sviluppo di un web-site com-pleto e quindi effettuarne l'upload ver-so il server. Tra le caratteristiche ap-plicative di CutePage spiccano il set ditool visual ai quali si rifà in manieramodulare per creare funzioni in Java,JavaScript e DHTML, ricavando menu,banner, bottoni interattivi ed effetti spe-ciali. In pratica CutePage non è solo unWeb Editor, ma un vero e proprio Au-thoring Tool capace di sommare modu-larmente al suo interno anche le pecu-

liarità degli altri applicativi che, più ap-presso, presentiamo nelle rispettiveversioni stand-alone.

- CutePage 2.0 (ctpg_20.zip - 5.86 MB)

CutePage Cool MenuDal DHTML a Java il passaggio non è

CutePage DHTML MenuDHTML Menu di SourceTec è in gra-

do di realizzare menu dinamici inDHTML senza richiedere la benchéminima conoscenza del codice relativoal suo utilizzatore. Per mezzo di wizardpredisposti DHTML Menu realizzamenu fluttuanti che possono essereconfezionati selezionandone dimen-sioni, colore e forme ed inserendoviall'interno quanti item si voglia senzalimitazione numerica. Nei menu è pos-sibile inserire anche delle immagini es-terne ed abilitare effetti cromatici perevidenziare il passaggio o meno delmouse su ogni specifica area attiva. Lafunzione di preview è automaticamenteagganciata al browser di default del PCospite e il codice può essere sia salvatocome file progetto che come paginaHTML. Ovviamente è disponibile l'im-magazzinamento nella clipboard per ilcopia-incolla verso una paginapreesistente. CutePage DHTML Menuè in versione trial a scadenza 30 giorni.

- DHTMl Menu (cpdm_' O.zip - '.65MB)_ ...-

_. "'"

-

50 ~------__"-1.•._"'-1'-1~ 1lI...-.rsm.

CutePa~eDHTMl Menu 1.0

Primopiano SU:Source Tec CutePage

Apriamo la rassegna puntando subitolo spot su una serie di applicativi svilup-pati dalla SourceTec Software. Una se-rie di tool che a partire da un interes-sante Web Editor e passando per tregeneratori, due di menu dinamici - unoin OHTML, un altro sottoforma di Ap-plet- ed un altro di gadget OHTML rig-orosamente cross-browser, tende a of-frire una base de-cisamente estesae completa per il fio' 1

webmaster. In tut- •. -- -~ - Q. :;o .. _j

ti e quattro entrasempre e co-munque tantocodice JavaScript.

CutePage 2.0CutePage 2.0 è

un Web Editor chesupporta sia lamodalità codice

OHTML Menu di Sour-ceTec è in grado di rea-lizzare menu dinamici inOHTML senza richiede-re la benché minima co-noscenza del codice re-lativo al suo utilizzatore.

160 MCmicrocomputer n. 214 - febbraio 2001

Dal DHTML a Java il passaggio non è breve, maCutePage CoolMenu lo rende praticamente indo-lore.

CutePage IE4Gadget:alcuni tra gli effetti di-namici più interessanti.

A••",nl~ T •.n

"llo!C.r..-' T•.•••~

-- _ ..-

M\!l!llft!!!,~1l~'!!l1!lI'.YOU(*'l we ON of ~ •••••..1C.HJ ••••.ca •...,....•••• ,.. .••.2. c..... ..• PIIIMtdl" ClllfC.-." OHTMl-1 er-aM.....,. .• lNIDIft •••• DHTMl ~ nEll

• ",o

CutePage IE4Gadget: il menu principale.

breve, ma CutePage CoolMenu lorende praticamente indolore. L'Appletutilizzata è praticamente la soluzionepiù elastica che la SourceTec offre aglisviluppatori per ovviare ai limiti delloJavaScript (strutturali nella realizzazionedi menu) e da questo a quelli delDHTML (prettamente di compatibilitàcross-browser). Con l' Applet si ri-solvono entrambe le situazioni ed oltrea poter realizzare menu altamente com-piessi e articolati è anche possibilefonderli con componenti grafiche esonore.

Seguendo la stessa impostazione delDHTML Menu, Cool Menu si basa suuna serie di Wizard che vengono via viaproposti a seconda della struttura dibase che si sceglie. Tra queste spic-cano più di dieci template per la realiz-'zazione di menu di varia foggia. Dalclassico a discesa a quello verticale, daquello simil-Explorer a quello più classi-co a bottoni.

Anche CutePage Cool Menu è in ver-sione trial a scadenza 30 giorni.

- CoolMenu (clmu_25.zip - 1.64 MB)

MCmicrocomputer n. 214 - febbraio 2001

CutePage IE4Gadget:

CutePage IE4Gadget: uno dei wizard predispostida SourceTec per la realizzazione di codice dina-mico.

CutePage IE4 GadgetQuarto prodotto della serie

CutePage, IE4Gadget è un modulo ap-plicativo che può funzionare sia stand-alone che come Add-on connessoall'editor CutePage HTML Editor.

Completamente freeware CutePageIE4Gadget è in grado di realizzare, facil-mente e rapidamente dei widgets inDHTML. Ciò grazie allo sfruttamento di

una serie di wizard predisposti di seriealla resa di animazioni sui testi-scrolling e titolazioni anzitutto- calen-dari, tabelle di selezione, Fade Menu,8anner, ecc. Il procedimento con ilquale IE4 Gadget realizza i suoi scriptdinamici è estremamente intuitivo. Par-tendo con un click sul bottone New ap-pare una lista di selezione all'internodella quale sono attiva bili ben 10 differ-enti gadget. Per ogni selezione fatta,una volta richiuso il pannello New, ap-pare immediatamente il wizard specifi-co sul quale sono riportati tutti i control-li per la selezione di parametri -effetti,link, colore, ecc.- con i quali il gadgetverrà automaticamente confezionato.Una volta settati questi parametri,tramite l'icona Preview sarà possibilevederne una resa in anteprima attraver-so il browser settato per default. PerIE4Gadget è indifferente se questo siaIE oppure Navigator (essendo difattipienamente compatibile con entrambi).Quella che vedremo sarà una paginaHTML completa (dal Tag <HTML> pas-sando per header, title e body finoall'</HTML» e quindi pronta per es-sere salvata all'istante oppure, tramitel'opzione clipboard, ricopiata nelle partiche c'interessano in un'altrapreesistente. Altra notevole opzioneche IE4Gadget ci mette a disposizioneè quella di salvare file di riferimento es-terni di tipo "js".

Insomma un piccolo gioielli no, asso-lutamente gratuito, facile da utilizzare epienamente cross-browser. Sul CD alle-gato alla rivista, oltre al downloaddell'applicativo, metteremo subito inlinea la pagina Sample.htm sulla qualesarà possibile verificare immediata-mente il tipo di resa di ciascuno dei 10gadget a disposizione.

- CutePage IE4Gadget lIE4Gadget.zip -1.35 MB)

161

":~'!7"'~;:;,";;_:i:';'l:ì-91~';'",.i~rf ;...;.I<'lo_.'- •..•_-

"':::::"""Web Programming Process

I

Due file HTML da navigare e sui qualistudiare e sperimentare: dal monumen-tale Interactive Web Design -che fa davera introduzione al mondo JavaScript-al più leggero "JavaScript Menu Com-ponent" che dettaglia su come e conche cosa è possibile realizzare deimenu dinamici in JavaScript.

mente sulla nostra pagina. Senza colpoferire, anche la funzione più articolata ecomplessa passa da AAScripter allapagina HTML che ne aveva urgenza. Etutto senza avere la benché minimaconoscenza di codice JavaScript. Bastasapere solo dove sta l' <HEAD> e il<BODY>!

AAScripter è tutto qui. Semplice, fun-zionale e piacevolmente pratico. Perfunzionare l'applicativo necessita di unapassword. Questa è: alicyb e benchésia liberamente rilevabile è bene verifi-carla in linea sul sito dell'autore:

http://www.cyberiapc.com/aa/aascripter.htm

Qui, oltre ad AAScripter troverete adattendervi centinaia e centinaia tra ap-plicativi, applet e JavaScript di cui èpossibile che ne rimarrete innamorati I

- AAScripter 1.5 (aascripter .zip - 2.29MB)

Reference e Tutorial

Interactive Web DesignPensando di farvene cosa sicura-

mente gradita, abbiamo acchialappatodalla rete il corposo manuale Interac-tive Web Design per mezzo del qualeè possibile studiare in maniera interatti-va le varie soluzioni dinamiche che, gliscript in generale e le funzioni in parti-

'colare, riescono ad offrire al program-matore in JavaScript. Completo dimoltissimi esempi -da come si realizzaun'agenda oppure un calendario interat-tivo, al codice necessario per metteresu un piccolo modulo per il debug, ecc.-IWD offre una panoramica assoluta-mente esaustiva di quello che è

~">:<JlI.<~~i!rWlIllmU\ n_.< UnI<-___ .••Wl•. (",\ÙI1'ltnu.= ••n~. - "*"':outr'""",.lDm,n>.'4UI>l;""ll"lfUll·_~

•• UIIkI<I""'· l\Ir-Ir' ~n:-\~« ~lfort:""''''~'''"••.=1O'1l-n••••:o\IlIlftt!:lun: •••••(~lJ:o••.•,"""=nr,p.~JIl!l:;"1I

I.eto. __ •••. ~~IiI*' •••••• ~:--.;,,.,:-~-u-.~-~-z-;-:-;:~~;--;·-:;'.--~-.

ewtcl:lUJn. __ JIl<n"nulImu;ji!rWlIll!nua,~ :oulrlftmull'l (

~m.null.."""-r_~~4urr.ne3W:l.t • -monUiIU.I:I.~~""-'

II'WI1em _-imJlJ ilrn liolmg_• ...otn m JaW'DlScmi!>!. i~Il> lnr1pclr'Iml!_ j/'OllJJltailltm ltitlii> '!Jf'ITI1f!l1il1mme_ di IJlIDlJ'OInmnniirng:

.• WI/j!le <li, IEtiI~W'C'llIT """"<:le <OI>de lfilII>It _ <lII11f~dlIJrnd Ite>:ltedfJtm''';III\1MDll'l<ji

T~ •.••••••

Tj, •.•.••••

Tj, •.•.••••

Ob' •••••••"-- ..~..-Zl

Ii\:-<w.~,

n-u..+1-~ ..~..'~-;, ....•..•u.-

ObJO<'"''•........."". ' .. ''''<'-''i>''•••••"",.z,

~';.~"GJ!..D"'~"TNIl-

Con il manuale Inte-ractive Web Designper mezzo del quale èpossibile studiare inmaniera interattiva levarie soluzioni dinami-che che, gli script ingenerale e le funzioniin particolare, riesconoad offrire al program-matore in JavaScript.

(massima del giorno, link, ecc.) Form,Calcolatrici matematiche, Sicurezza(Generatori di Password, Login, GateKeeper, ecc.) Search Engine di variatipologia, Browser Window (FinestrePop-Up con/senza auto-centratura sulloschermo, Scroller, Full Screen, duratain schermo, ecc.), Barre e Menu di nav-igazione, Codici per l'indirizza mento dipagine, Info (tipo di browser, Report, IPGrabber, risoluzioni) ecc. Insomma ditutto e di più!

Una volta che si è selezionata la cate-goria desiderata, nel campo superioreapparirà la serie di effetti dei qualiAAScripter è in grado di generare auto-maticamente il codice relativo. Undoppio click sull'effetto desiderato edecco apparire un pannello nel quale ègià immagazzinata l'intera struttura delcodice. Tra l'altro questa apparirà ancheripartita nelle due specifiche zone dellanostra pagina nelle quali il codice elabo-rato andrà inserito. Specificamenteall'interno dei tag <HEAD> la primaarea e tra i tag <BODY> la seconda.Prima di procedere al più classico dei"copia e incolla" potremo anchegodere di un'anteprima dell'effetto re-so. Per farlo basterà cliccare sul link:c1ick here for sample page! Immediata-mente si apre una finestra di serviziodel browser settato per default nel nos-tro PC ed ecco possibile vedere comeAAScripter risponde o meno alla nostrarichiesta. Tornati al pannello della Clip-board adesso non ci resterà che copi-are le singole parti e riportarle, primauna poi l'altra sulla nostra pagina HTMLin lavorazione. L'effetto richiesto e vis-to in anteprima si trasferirà diretta-

~b.A.Io.nlIlt"wn-.tfl • ....,'KrijJts;nwrlilm>ttl.lR"'9rmnmlHl'WritntnlttllU1T\.1I11ulftJ·nt"'llBnttttlB'

lID~~lIfltl1"'lnigtltfl.oll ••uttlllnll!

I pannelli di AAScripter: dall'originalissima interfaccia a "forma d'uovo" con ipannelli di selezione dei wizard e degli effetti specifici alla pagina della clip-board fino alla preview immediata effettua bile per mezzo del browser settatoper default.

Altra categoria molto apprezzata dagliutenti creativi è senz'altro quella degliapplicativi che generano automatica-mente il codice e che, "cut & paste ", èsubito possibile implementare all'inter-no delle nostre pagine in lavorazione.Tra quelli provati quello che più ci haentusiasmato è AAScripter, un 'autenti-ca fucina di codice JavaScript"milleusi"!

AAScripterBellissimo questo applicativo di

sviluppo -scritto in Visual Basic- per lagenerazione di codice JavaScript. A dis-posizione dell'utente ci sono oltre 150combinazioni di script e una modalità diinserimento manuale (del codice ot-tenuto all'interno di pagine HTMLpreesistenti) assolutamente geniale.AAScripter è un applicativo a "formad'uovo", nel senso che apre la sua pag-ina di lavoro in un'insolita forma ovale.All'interno di questa particolarissima in-terfaccia appaiono due campi di se-lezione. Il primo è assegnato alla visual-izzazione degli effetti generabili, quellosottostante alla selezione di una dellecategorie principali i cui effetti disponi-bili verranno immediatamente listati nelcampo superiore.

Il selettore dispone di 16 categorieprincipali tra le quali spiccano: Effetti(sulla barra di stato, sul testo, immagini,suoni e link) routine di eventi casuali

Applicativiper la generazionedi codice automatico

162 MCmicrocomputer n. 214 - febbraio 2001

...----}---- '-...,.

...,...,.. •• __ .oIl •••• __ •.=:~-=-~~---_ ...•-_ .•_O" ••• NCO •• WC__ ••____ .FP:lDI.

•.••_doo_Ql.:EJ9w.

,...•"""""r;s--- ~""-- ~~

~ .... ~~~,•.·.•·4 ::l Il''' __ 'J ·350

ElSoipto

ffsCRIPIOfar MtCrOSOtt FrontPage

__ ("__ 1<0_ •••••••••••_ ••__ ._ ••••••••••_____ .10_ ...•.... .•. ..-_ ••.••.•.---_._-- ...•.._--._._la-J ...._ .. . -..._.__.-_,_~c: ._.__ .•__ • .•••_-_.__ ..- .•..-__ ••.••_r ••__ ••••••.•___ IN_ •• I0••••.•_ •••••••• _

=:::.::-.::: :::.....:::::~ ..=.::::::=.:-• __ ••••••••••• l<o••• _.Ja •• _~.., __ • ,_

~:..~~~E==~7........~u_..=.E:..~=~,,:.=--.••=.:==..:::.:-::'6_ •• __ .•• _ ••.• _ •••• _. __ r•• _ ••••• _ ••• __ 4

:.:.ç=:::="=:::=4==-.-:":-:::..=''':::'7.00.::':':;;:-~"::.-:::=::-': ":=';"::':'~==;..~:=:"...•....--'-"-::'::':-Il'..~."" .. .~••...__ .•.._ •.• •.••.••

EI Scripto far FrontPage: la versione Lite dell'Add-on offreun pannello ridotto di wizard. Tra questi spiccano quelloper la generazione di script per l'apertura di finestre Pop-Up e quindi quello per il Text-scrolling. Quest'ultimo, adifferenza del <MARQUEE> preprogrammato da FrontPa-ge, è ovviamente compatibile anche con Navigator.

EI Scripto far Front-Page: ecco vistiall'opera i due wi-zard appena segna-lati. La pagina è lE eNN compatibile!

JavaScript, arricchendosi di un Refer-ence -è quello che la stessa Netscapetiene online- e di una overview suquelle che sono le specifiche standard-izzate dall'ECMA. Insomma, un vero eproprio "must" dal quale, oltre a fruiredi tutorial ed apprendere concetti, sin-tassi e trucchi, è possibile testaremoltissimi esempi, da cui prendere poispunto per realizzare script personali.Per installarsi correttamente ed essereutilizzato, IWD necessita di una pass-word per avere la quale è necessarioregistrarsi online presso il sitohttp://www.web-data.org/js/pass-word.htm. Per i vostri primi passi è co-munque possibile utilizzare la chiavegenerale: javascript101.

- Interactive Web Design (js.zip - 1.74MB)

JavaScript Menu ComponentSpecifico per la gestione dei Menu in

JavaScript, ma senza essere né unaguida né tantomeno un Reference uffi-ciale, è il comunque interessantissimoarticolo propedeutico: The JavaScriptMenu Component - creating Cross-Browser Oynamic HTML Menus.

In questo articolo c'è tutta laconoscenza al riguardo di come si real-izzano e gestiscono menu dinamici inHTML/JavaScript ed ovviamente inpiena compatibilità con IExplorer e Nav-igator. L'autore approfondisce ogni ar-gomento, spiegando parametro dopoparametro resa e prestazioni di una se-rie di menu dinamici. Estremamenteconnesso, sia alla corretta letturadell'articolo che al riutilizzo del codice,c'è anche un indispensabile script diriferimento: menu.js, nel quale sonoaccatastate le coordinate di attivazionedi una miriade di menu. Ovviamentel'articolo oltre a descrivere produce tut-ta una serie di esempi immediatamente

MCmicrocomputer n. 214 - febbraio 2001

verificabili al caricamento e all'azione.Per interattivare con l'articolo è suffi-ciente cliccare sul link JavaScriptMenu Component presente nella pre-sentazione di Internet Pratica.

Altre soluzioni:dai JavaScript per FrontPage ai

soliti «spicchi di mele}}Un Add-on per FrontPage 2000 con il

quale automatizzare quindici compo-nenti JavaScript a più diffuso utilizzo equindi la classica alternativa: un genera-tore di Applet per fare menu interattivi,ricchi di combinazioni dinamiche, suoni,ecc.

EI Scripto(http://www.elscripto.coml

FrontPage 2000 di Microsoft, amatoed odiato dai più, è senz'altro uno deipiù diffusi Web Authoring. A tal puntoche, intorno a se, vede ruota re un sem-pre crescente numero di Add-on,prodotti sia da Microsoft stessa che daterzi. Dopo che sul CD di MC abbiamoinserito in maniera permanente unarubrica dedicata a FP2000 e immagazzi-nato sia un tutorial che l'Add-on QuizEngine, questo mese presentiamo daqueste pagine EI Scripto, un plug-in ca-pace di aggiungere 15 componenti es-senziali per l'utilizzo facilitato di funzion-alità JavaScript. Semplici all'uso questisi visualizzano come normalissimi pan-nelli di comando di FrontPage e perme-ttono di realizzare codice automaticoper le seguenti funzioni:

• Browser Redirect: Condizione per laverifica del browser che si sta utiliz-zando e, in base al riscontro, rinvioverso le pagine realizzate per l'inter-azione con lo specifico tipo di brows-

ero• Clock, per l'inserimento di un orolo-

gio in un text-box dedicato.• Color Fade IBasicl Inserisce testo

controllandone il colore attraversouna serie di sfumature preordinate.

• Color Fade IAdvancedl Come soprainserisce testo controllandone il col-ore, ma per mezzo di un maggior nu-mero di controlli, sia statici che di-namiCI.

• Current Time Inserisce l'orario cor-rente sulla pagina.

• Current Date Inserisce la data at-tuale sulla pagina.

• Document Info Inserisce data dell'ul-tima modifica, l'URL della pagina, iltitolo e l'ultima pagina visitata.

• JavaScript Redirect Condizione perl'indirizzamento del browser utilizzatoverso la lettura di pagine compatibilicon la versione di JavaScript support-ata dal browser di navigazione utiliz-zato.

• Jump List Inserisce una lista di se-lezione, dotata di riferimenti d'identi-ficazione di ogni singolo sito e un bot-tone di navigazione per il caricamentodella Home Page del sito stesso.

• Last Modified Inserisce il classicoriferimento sulla data e l'ora dell'ulti-ma modifica effettuata sulla specificapagina.

• Navigate Back/Forward Inserisce Ibottoni di navigazione Avanti/Indietrogestiti attraverso la funzione di histo-ry di JavaScript.

• Pop-Up Window Crea una nuovafinestra del browser con misure ebarre customizzate. Altre funzionidisponibili, se attivate, sono in gradodi attivare l'apertura della pagina siaattraverso il c1ick su di una immaginecome un bottone oppure onLoadall'avvenuto caricamento della paginaprincipale.

163

EI Scripto far FrontPage:vista d'insieme dei mag-giori tra i wizard per lagenerazione automaticadi codice JavaScriptdallo sheet di lavoro delWeb Editor di Microsoft.Da evidenziare, in alto asinistra, il menu "EIScripto" che si apre traquelli di FrontPage unavolta installato l'Add-on.

CoolStrip: Example #1

Tutti i logo delle testate diPluricom. Tra gli script più inter-essanti che presentiamo questomese c'è senz'altro il Changelm-ageLink da noi stessi messo apunto per arrivare a garantire undinamismo di pagina richiestociniente di meno che dal grandeMM. Nella rinnovata interfacciadel Web di Pluricom, abbiamodeciso di tornare alla vista a dueframe verticali. Uno più stretto ascorrere sulla sinistra con i linkverso le pagine principali di riv-iste e sezioni formativedell'azienda ed un altro, più am-pio, dedicato all'effettiva visualiz-zazione delle pagine. Tutto ciòmantenendo sempre lo stessoframe dei link a scorrere sullasinistra.

Ma cosa non faremmo pertrovare il modo migliore d'im-pazzire un po' di più!

Detto fatto ecco che ci siamoinventati il problema: ad ognic1ick verso le pagine della rivistao del corso di formazione a cui siè interessati, oltre alla nuovapagina che appare nel frame"principale" si dovrà visualizzare

Nlp.1I_._C<IOIIl<o

~11_""'_""","'tp:1_.tbçIme.-IM.

To ••••• theiipplllt tegs ~ ••• above, rfltlt cId: NidlI thls fr_ nchooMVIew ~

n-~~CooI5lr~cIDnQ,..tlli:x:tJt~~CIf'lt:l_Kt ••lWltImt:lille~'Use6nedors'" ~Arrows •• botl wt t:l .,... .• colorI •• II:«""-::l IO-lbaMed leJCt'" IO-p"lIJMdtrrtMldllTCNf,"'N:h~t...~ngimdge.

lnbotl~. hlU.*":kOr€>citp;ll'••".... .leftòlt 'ho' (lltc8fM), MldN:ht.. ••di1fw1lfll~ld:n'<yll*tlId. WIoWl&tt•• rl!>f1:SeftIDWlril! itI dIt~~ ••••.

tem A");tem B");tem C");tem D");

Illll~ .!J.!JJl.F_~I '-~I------~::J

,..-I-!-~...EIS~_T",~."",_.I

f••• IF •••. M.Z2.1~ :::J--v--::"'~~

~

't':"""=",-.-,.UIITICI'I

("'~l.ìIII rtUnol••••n••

~ls""d ::Js- ••~

::"'~~

<SCRIPT LANGUAGE="JavaScriptl.2">if (document.all) (

onLoad() ;

</HEAD>

}</SCRIPT>

<H2>Simple Menu</H2>

}//-></SCRIPT>

... e all'interno dei tag <BODY>:

<A HREF="javascript:window.showMenu(win-dow.myMenu) i" onMouseOver="window.show-Menu (window.myMenu) ;">display myMenu</A>

<p>This is a sample page that contains sim-

plified menu code.

<TITLE>Simple Menu</TITLE><SCRIPT LANGUAGE~"JavaScriptl.2"

SRC="rnenu.js"></SCRIPT><SCRIPT LANGUAGE~"JavaScriptl.2">function onLoad() (

window.myMenu = new Menu();myMenu.addMenultem("my menumyMenu.addMenultem("my menumyMenu.addMenultem("my menumyMenu.addMenultem("my menumyMenu.writeMenus() ;

-.••...--Cobf.-,-'CoIoof ••• ~

'-""'-'1__ ...~••~fIMkl_ .•.'"'-~ -,.,,"""--,~'.•....~..,I•••..-"'-

~T.- ta1Mt_2~~.,...... ....ob...l~3~~'- ....•*1~4~~ ••••••••••• 1

'"'-'( •••••••3~~~'W. __l"-( •••••~~ ~"' •• I

All'interno deitag <HEAD>

"""

anche con step in-feriori, tipo IE 4.x eNN 4.x.

CoolStrip, più che ungeneratore è un vero eproprio menu "prefabbri-cato". Ovvero già prontoper essere riutilizzatoall'interno delle nostrepagine.

CoolStripCoolStrip, più che un generatore è un

vero e proprio menu "prefabbricato".Ovvero già pronto per essere riutilizzatoall'interno delle nostre pagine. Disponi-bile in quattro versioni -ciascuna dellequali gestita da un Applet dedicato,CoolStrip viene presentato sul CD diMC con la possibilità di navigare in of-fline sull'Help in HTML.

- CoolStrip (coolstrip.exe- 235 KB)

Tra tutti questi componenti, nella ver-sione Lite in prova questo mese nerisultano attivi solo tre: Last Modified,Pop-Up Window e Text Scroll. Ma sia laLite che la versione Pro hanno la stessamodalità di lavoro, inserendo comenuovo menu a discesa tra quelli giàdisponibili di serie in FrontPage ed of-frendo dei pannelli di settaggio semplicie funzionali.

- EI Scripto (elsv102I.exe- 2.09 MB)

IPscriptLa rassegna di codice JavaScript

questo mese è assai ampia e il codicestesso è più articolato del solito. La re-sa, pratica e a livello di resa è co-munque notevole e merita un piccolosforzo in più in fase di "copia e incolla ".

• Status Text Genera lo script per larealizzazione di un testo scorrevoleda far apparire nella barra di stato.

• Text Scroll Inserisce un text-box nelquale scorre del testo. La digitazionedel testo, la velocità di scorrimento ela grandezza del box sono gli uniciparametri che il wizard richiede infase di realizzazione della pagina.

• Wavv Text Inserisce il classico effet-to dell'onda su ogni componente tes-tuale inserita attraverso il wizard.

Semplice Menu Dinamico. Legan-dolo idealmente all'argomento deiMenu in JavaScript con il quale abbi-amo aperto questo articolo, tra i nostriIPscript del mese inseriamo l'interes-sante nonché praticissimo script Dina-Menu che, pur appoggiandosi al pe-sante (ma prezioso) "menu.js" -che ab-biamo visto nella trattazione delJavaScript Menu Component- garan-tisce un utilizzo semplice e immediatodei menu a scomparsa.

Il comportamento del codice è asso-lutamente identico, cioè ottimo, su en-trambi i tipi di browser da noi utilizzatiper queste prove: IExplorer 5 e Naviga-tor 4.5, che abbiamo preso come ver-sioni minime, anche se gli autori con-fermano tutti il perfetto funzionamento

164 MCmicrocomputer n. 214 - febbraio 2001

<img src="img/mc_Iink.gif" width="130" height~"20" border~"O"alt=" Dal 1981 il mondo dell'informatica "></a>

<a href="mcm/indexdx.html"onClick="javascript,doPic('img/mcspot.gif');" target="principale">

Thumb Menu risulta utilesia per fare slideshowche per navigare versospecifici URL. In questosecondo caso potendofar vedere anche unaGIF/JPEG dell'antepri-ma della Home Page delsito pubblicizzato.

anche un bel lagoidentificativo.

Sembra tuttofacile ... ma il logonon dovrà appariresulla pagina che sicarica, bensì su quella del frame dedi-cato ai link.

Pensa e ripensa ecco venire fuori ilcodice giusto che posizioniamo tra i tag<HEAO>:

<script>function doPic(imgName)if (ns3up Il ie4up) {imgOn = ("" + imgName);document.mainpic.src = irngOn;

}}</script>

A sua volta nel <BOOY> e specifica-mente dov'è posizionata ogni singolaGIF di collegamento verso una delletestate (MCmicrocomputer, ad esem-pio) dovremo scrivere un <a href ... > unpo' più dettagliato del solito:

AI verificarsi dell'evento onClick,ovvero quando premeremo il bottonesinistro del mouse sull'area occupatadall'immagine-bottone (MCmicrocom-puter) il gestore onClick, rilevatonel'evento, procederà a lanciare la fun-zione doPic sopra illustrata e facendocosì visualizzare (document.mainpic.src=imgOn) la GIF "img/mcspot.gif"che è segnalata nel costruttoonClick=" javascript ... >

Normale invece sarà il tag dell'im-magine:

Risultato: tutto funziona e al primocolpo I

Per una piena dimostrazione dellavalenza del codice abbiamo messo apunto un piccolo frameset di provacomposto dal frame dei link (e dei logoche cambiano) e da quello delle paginerichiamabili. Un click su

ChangelmgLink e, dalla pagina di In-ternet Pratica presente sul CO allegato,sarà possibile" ammirare" la resa.

Thumb Menu. Veramente bello èquindi il Thumbnail Navigator -scortonell'archivio di JavaSource e da noirielaborato, nonché rinominato, affinchéarrivasse a soddisfare le specifiche esi-genze di un sito sulla pittura. ThumbMenu risulta utile sia per fareslideshow che per navigare versospecifici URL. In questo secondo casopotendo far vedere anche unaGIF/JPEG dell'anteprima della HomePage del sito pubblicizzato.

Per mezzo di bottoni -tra l'altro dotatianche del codice per il change-image alpassaggio del mouse- è possibile visu-

alizzareAvanti/Indietrotutte le

immagini che abbiamo inserito nelcodice.

Per prima cosa stabilendo il numeromassimo delle stesse per mezzo diun'apposita variabile (maxPIC).

Ad esempio:maxPIC = 5;

e quindi denominando per ciascunaimmagine visualizzabile: dimensioni,denominazione e link eventuale:

p1 = new Image (400,300);pl.src = "l-thumb.jpg";link1 = "Thumb.htm";

A loro vol-ta I bottoniper il con-trollo remo-

to -Avanti, Indietro e Go!, ovvero quel-lo per attivare il link annesso alla speci-fica pagina visualizzata- sono gestiti at-traverso il richiamo di tre funzioni dedi-cate: nextO, backO e linkO.

Le prime due "giocano" sulla denom-inazione delle immagini (l-thumb.jpg, 2-thumb.jpg, ecc) sottraendo oppure ad-

dizionando "1" ad ogni click. La fun-zione LinkO non fa altro che andare aleggere il numero della variabile link(Iinkl, link2, ecc.) e quindi ricostruire lapath da cariare:

function link() {location.href=eval("link" + count);}

A margine della descrizione di Thumbva segnalato che lo script realizzatoprende ispirazione da un codice pre-sente nell'archivio di JavaSource:

http://javascriptsource.comed è stato messo a punto per un sito

sulla pittura il cui portale di riferimento-WEBgiovani: i giovani per il Web, ilWeb per i giovani- potremo'vederlopresto sia in linea che in versione di-mostrativa su uno dei nostri prossimiMOC-ROM.

IPweb!Rapidamente l'elenco delle ultime

novità che troverete su IPweb:elPscheda: Visual Vision Paper Killer:

applicativo per la realizzazione di man-uali, e-books, ipertesti, guide online eCD-ROM. Con iPer Paper Killer, cosìcome recita la locandina online, è pos-sibile realizzare pagine con font, stili,tabelle e disegni come in un word-processor, inserire velocemente col-legamenti (Iink), immagini cliccabili(hot spotl, tabelle, cornici, ecc. Ovvia-mente l'applicativo, oltre ad avere gli"onori della ribalta" su IPweb, saràpresente sul CO allegato a questo nu-mero della rivista (d_it3wh.exe - 4.31MB) unitamente alle pagine di un fileinformativo bellamente navigabilesempre dal CO.

elPgame: La Torre di Hanoi. Attraver-so il codice sviluppato da un magnani-mo autore che ne rende l'utilizzolibero, abbiamo messo a punto questosecondo momento di relax in linea. Ilsolito rompicapo. Usando lo stessostile degli altri IPservice -giochi o coseserie che siano!- abbiamo quindi sis-temato il nuovo file nella directory diIPweb ... ma subito dopo, navigando,abbiamo scoperto il Tower of Hanoi diMazeWorks che, grazie ad un Applet,fa le stesse cose, anzi ne fa di più e lefa meglio. Insomma, siamo caduti neldubbio se mettere in linea la nostraTorre di Hanoi in JavaScript oppurela Torre di Hanoi in Applet rintraccia-to subito dopo. Senza aver ancorarisolto il dilemma, per il momentomettiamo sia le "torri" in JavaScriptche quelle via Applet entrambe sul COe quindi lasciamo che scegliate pervostro conto. fAf5

MCmicrocomputer n. 214 - febbraio 2001 165