Trascrizione: (click per espandere)

salve a tutti in questo video parleremo
di compatibilità tra browser, un problema
che era più sentito in passato ma ancora
adesso lo sviluppatore deve
prestarci attenzione e cercare di
testare il più possibile
in cosa consiste può succedere che certe
volte io scrivo un pezzo di codice
che funziona perfettamente nel mio
browser preferito però quando vado a
usare un diverso browser con lo stesso
pezzo di codice vedo che funziona in
maniera diversa oppure non funziona
affatto come dicevo era più sentito in
passato perché browser ognuno andava
per la sua strada poi c'era internet
explorer che era la disperazione di
ogni sviluppatore ma adesso
fortunatamente col consorzio W3C
che detta le linee guida che devono
seguire i browser per html css e
javascript
diciamo che bene o male tutti i maggiori
browser si sono un po' uniformati e
quindi è un problema un po' più difficile
da riscontrare però è sempre bene che
che uno sviluppatore
testi il proprio codice su più browser
possibili per appunto essere certo che
tutto funzioni come aspettato
andiamo a vedere un esempio di
di problema di compatibilità tra browser
allora io qui sono su chrome e ho la mia
pagina con un bottone e un bottone
scarica a cui è associato un una
funzione scarica file e adesso andiamo a
creare una funzione che scarica un file
nel desktop del nostro utente allora
scarica file
allora io creo un elemento
document.createElement e voglio che sia
un elemento di tipo "a"
quindi un elemento "ancora" poi vado a
creare una variabile per il file che
voglio scaricare
voglio innanzitutto devo definire che
tipo di file voglio scaricare quindi il
tipo di file voglio che sia un file di
testo un file .txt come faccio a sapere per un
file txt qual è il proprio MIME
vado a vedere nella pagina di
documentazione di mozilla eccolo qui
qui trovate per le estensioni proprio lo
specifico mime quindi andiamo a vedere
ha detto txt eccolo qui quindi
file di testo è avrà un MIME di tipo
text/plain quindi qui devo metterci text
slash plane e poi voglio anche metterci
la codifica charset utf 8 e poi tutto
quello che andrà aggiunto dopo la
virgola sarà il contenuto del file che
vado a scaricare
adesso andiamo a metterci un po' di
contenuto diciamo che ci faccio un
piccolo loop così ci mettiamo qualcosa
dentro
facciamo dieci facciamo e poi facciamo
concatenazione di stringhe allora io
voglio cominciare con un back slash new
line così vado a dire per ogni
iterazione mettimi una riga una nuova
riga e poi ci associo il valore di "i"
quindi io dovrei trovarmi un file con
una decina di righe e ogni riga avrà un
valore diverso di "i" e poi vado a associare
questo mio file all'elemento
all'attributo href dell'elemento "a"
allora element.setAttribute allora href e
il suo valore sarà file poi vado anche a
dire il file che vai a scaricare deve
avere questo nome quindi download
lo chiamo file.txt abbiamo detto
settare un attributo con un valore in
questa maniera ha lo stesso significato
di farlo in questa maniera sono due
maniere alternative e poi all'elemento
element ci associo un evento di tipo
click
quindi deve rispondere al click ecco qua
come avete visto allora io qui ho il mio
bottone che va innescare questa funzione
tutte cose già viste
questa funzione crea un elemento di tipo
a poi comincia a creare un file di testo
text/plain con codifica utf8 e avrà
come contenuto
il risultato di questo loop poi vado
ad associare tutto questo file
l'attributo href e poi verrà scaricato
questo file con nome file.txt
dobbiamo salvare
eccolo qui allora questo qui è chrome
andiamo a vedere eccolo qua io ho
cliccato scarica e mi si e' scaricato un
file.txt se adesso vado ad aprire
il file vedo che ho un file con
tutte le iterazioni del mio loop e
valori della variabile "i" tutti quanti in
colonna perfetto tutto funziona
perfettamente sono contentissimo e
adesso cosa succede vado a fare lo
stesso in "Safari" questo qua è lo stesso
identico file
andiamo a vedere ancora vedete che
qualcosa si è scaricato vado a vedere ho
il mio file.txt quindi
perfetto vada ad aprire il file cosa
succede ho le iterazioni
del mio loop pero' non ho gli accapo
quindi ho tutto quanto in una riga e quindi
già vedo che funziona però non funziona
alla stessa maniera
andiamo a vedere su Firefox questo e
Firefox ricarichiamo la pagina e clicco
scarica e niente succede e come mai non
succede niente vado a vedere "inspector"
console
ecco mi dice che c'è un errore quindi
come vedete lo stesso tipo di codice
funziona perfettamente in chrome
funziona in maniera leggermente diversa
in Safari non funziona proprio in
Firefox questo appunto per dirvi di
ogni volta che scrivete codice mi
raccomando provatelo in più browser
possibili perché sorprese possono sempre capitare
con questo è tutto ci sentiamo alla
prossima ciao