Quindi, abbiamo già scoperto che l'applicazione principale degli script JavaScript è nei siti Internet. Spero che tu lo sappia almeno in termini generali. Non ne parlerò.
Il sito Internet più semplice è costituito da una o più pagine web (pagine web, ).
Per utilizzare gli script JavaScript, devi in qualche modo incorporare il codice sorgente dello script nella pagina web.
È di questo che parlerò oggi.
Quindi, lo script nel corpo di una pagina HTML può essere inserito quasi ovunque.
Se inserisci una sorta di funzione, è meglio inserirla nell'intestazione della pagina. Cioè, da qualche parte nel mezzo
... .Lo script stesso viene inserito tra i tag
Qui come parametro del tag di apertura
Come ho detto, lo script può essere inserito in qualsiasi punto della pagina. Tuttavia, se ciò avviene tra i tag, il codice sorgente dello script sarà visibile all'utente. Questo, ovviamente, non è necessario nel caso generale.
Per evitare che il testo del codice sorgente venga visualizzato dal browser, il codice sorgente deve essere scritto come commento di markup HTML, ovvero tra caratteri
È così:
Ma c'è un'altra caratteristica. I browser particolarmente stupidi non capiscono il simbolo -->. Pertanto, per garantire che il codice non sia visibile all'utente in tutti i browser, si consiglia di procedere come segue:
NOTA
Quasi tutti i browser moderni funzioneranno bene anche se non utilizzi caratteri di commento nel markup HTML. Tuttavia, è meglio farlo, poiché l'utente potrebbe avere un vecchio browser.
Bene, ora un esempio di una semplice pagina HTML con JavaScript incorporato:
Crea un file di testo, cambia la sua estensione (non dovrebbe essere txt, ma htm o html), incolla il testo sopra e salva.
Quindi esegui semplicemente questo file con un doppio clic. Il tuo browser predefinito si aprirà e apparirà il messaggio "Il mio primo script su una pagina web!".
Come avrai intuito, le pagine HTML e gli script in esse incorporati possono essere eseguiti sul computer di un utente anche se non dispone di una connessione Internet. E questo significa...
ATTENZIONE!
Con JavaScript, puoi scrivere programmi che verranno eseguiti sul computer dell'utente. e Non importa quale sistema operativo ha! La cosa principale è che il suo browser supporta lo scripting. E allo stesso tempo, non hai bisogno di strumenti di sviluppo speciali che costano soldi pazzi: basta un editor di testo!
Abbiamo pubblicato un nuovo libro, "Social Media Content Marketing: come entrare nella testa degli abbonati e farli innamorare del tuo marchio".
Il codice sorgente di un sito è una raccolta di markup HTML, stili CSS e script JavaScript che il browser riceve dal server web.
Altri video sul nostro canale - impara l'internet marketing con SEMANTICA
Può essere paragonato a un insieme di comandi impartiti ai soldati dal comandante. Immagina che il pubblico non veda o senta il capo. Dal loro punto di vista, i militari svolgono azioni in modo indipendente. Nel nostro caso, il comandante è il browser, i comandi sono il codice sorgente e i soldati in marcia sono il risultato finale.
Il sito è memorizzato su un web server che invia la pagina su richiesta dell'utente. Una richiesta consiste nel digitare un URL nella barra degli indirizzi, fare clic su un collegamento o fare clic su un pulsante di invio in un modulo. Non importa in quale lingua siano scritte le pagine Web, se includono una parte software. Il risultato finale di qualsiasi algoritmo lato server è un insieme di tag html e testo.
Il codice sorgente della pagina è un insieme di dati che include:
- marcatura html;
- foglio di stile o collegamento al file;
- programmi scritti in JavaScript o collegamenti a file con codice.
Queste tre sezioni sono gestite dal browser. Per il server, questo è semplicemente il testo che deve essere inviato in risposta alla richiesta.
Perché potremmo aver bisogno di studiare il codice sorgente
Tutto ciò che vediamo, lo possiamo analizzare e applicare per risolvere alcuni problemi che sorgono durante il lavoro con il sito, soprattutto durante l'ottimizzazione. Osservando il codice sorgente, possiamo:
- Vedi i meta tag del tuo sito o di qualcun altro per la loro analisi.
- Visualizza la presenza o l'assenza di determinati elementi nel sito: contatori, codici identificativi nei vari sistemi, determinati script e altro.
- Scopri i parametri degli elementi: dimensioni, colori, caratteri.
- Trova il percorso per le foto e altri elementi nella pagina.
- Esamina i collegamenti dalla pagina.
- Trova problemi con il codice che interferiscono con il processo di ottimizzazione del sito: stili che non sono stati spostati in file separati, script, codice non valido.
Queste sono le caratteristiche principali, ma in effetti, potendo leggere il codice, puoi imparare molto di più sulla pagina.
Come visualizzare il codice sorgente di un sito
Completamente nella forma in cui è disposto sul server, questo non può essere fatto dal browser. Ma puoi vedere l'intero markup facendo clic sulla pagina con il tasto destro del mouse. Qui e sotto sull'esempio di Google Chrome.
Seleziona l'opzione "Visualizza codice pagina" e ottieni l'elenco completo in una scheda separata.
È solo testo che devi analizzare per capire. Ma puoi ottenere codice interattivo usando gli strumenti per sviluppatori.
Come trovare il codice sorgente di una pagina di un sito web
Fare clic sull'icona del menu nel browser. Molto spesso è sulla destra e sembra tre punti o strisce.
Nella sezione degli strumenti aggiuntivi, seleziona "Strumenti per sviluppatori".
Si aprirà una finestra che mostra lo stato attivo del codice. Ciò significa che quando fai clic sul markup accanto ad esso, verrà visualizzato lo stile dell'elemento e i blocchi selezionati verranno evidenziati sulla pagina.
Nella scheda "Sorgente", puoi visualizzare il contenuto di alcuni file: script, caratteri, immagini.
Nella scheda "Sicurezza" è disponibile la verifica del certificato del sito.
La scheda "Audit" ti aiuterà a controllare la risorsa pubblicata sull'hosting.
Se la posizione del pannello a destra è scomoda, puoi fare clic sui tre punti e cambiarla selezionando la voce desiderata.
Come visualizzare i meta tag
Ogni documento html include tag di struttura. Ecco qui alcuni di loro:
- html è l'intero documento.
- Head - sezione delle intestazioni dei servizi.
- Titolo – titolo della pagina (visualizzato nella scheda).
- Corpo: il corpo del documento.
- H1-H6 - intestazioni del testo della pagina.
- Articolo - articolo.
- Sezione - sezione.
- Menù - menù.
- Div - blocco.
- Lo span è una stringa.
- P - paragrafo.
- Tavolo - tavolo.
Gli elementi sono progettati per delimitare logicamente le sezioni di una pagina e hanno uno stile secondo necessità. Contengono testo che è in qualche modo visibile sulla pagina. Ma il tag Head contiene informazioni sul servizio. I meta tag vengono utilizzati per specificarlo. Tutto ciò che è scritto in essi è destinato al server e ai motori di ricerca.
Il loro contenuto non può essere conosciuto in altro modo.
Prestiamo attenzione al tag Link. Viene utilizzato per specificare collegamenti a file di inclusione esterni. Se lo si desidera, è possibile visualizzare il contenuto e salvarlo su disco. Per fare ciò, passa il mouse sopra l'indirizzo e fai clic con il pulsante destro del mouse. Seleziona "Apri in una nuova scheda".
Il file specificato si aprirà in una nuova scheda, che puoi visualizzare o salvare.
Come visualizzare il codice sorgente di una pagina per eseguire il debug di uno script
In questo caso, è più conveniente aprire la pagina sul computer locale. Se hai solo bisogno di correggere il markup, gli stili e gli script, puoi farlo direttamente dalla cartella. Il codice HTML viene visualizzato allo stesso modo. Ma gli errori del codice JavaScript possono essere visualizzati nella scheda "Console". Mostra la descrizione dell'errore e il numero di riga su cui si è verificato.
La sintassi può essere vista direttamente nel codice. Questa è la scheda Sorgente.
Come visualizzare il codice di un elemento specifico
Per pagine di grandi dimensioni con molti elementi, è difficile trovare il codice giusto in tutto il markup. In questo caso, dovresti usare un comando speciale dal menu contestuale. Passa il mouse sopra il frammento e premi RMB. Seleziona il comando Visualizza codice.
Si aprirà la stessa finestra, ma con il focus sull'oggetto selezionato.
Sommario
Ti abbiamo detto qual è il codice sorgente di una pagina. È sufficiente padroneggiare la conoscenza elementare di HTML e CSS e, utilizzando comodi strumenti di sviluppo, è possibile eseguire il debug dei propri documenti html.
Navigare il codice delle risorse sul web ti permetterà di imparare non solo dalla tua esperienza, ma anche di utilizzare veri e propri esempi di lavoro. E per i seo-specialisti saranno utili i meta tag, le informazioni in cui possono dire molto sul sito.
Molto semplice: basta fare clic con il pulsante destro del mouse e selezionare l'elemento appropriato nel menu contestuale. La dicitura può variare a seconda del browser utilizzato: in Mozilla Firefox si chiama "Source", in Apple Safari - "View source", in Google Chrome - "View page code", in Opera - "Source code", in Internet Explorer - " Visualizza codice HTML.
Il codice sorgente degli script del server che generano il codice HTML di una pagina con un software server normalmente configurato non può essere ottenuto con una semplice richiesta. Puoi visualizzare il codice sorgente degli script PHP o Perl solo scaricando i loro file tramite il protocollo FTP o tramite il file manager del pannello di controllo dell'hosting o del sistema di gestione dei contenuti. Puoi aprire questi file con un normale editor di testo.
Il codice sorgente degli script client eseguiti direttamente nel browser (ad esempio JavaScript) può essere visualizzato estraendo i relativi file dalla cache del browser. E ancora più semplice: salva la pagina con tutti i file di accompagnamento in una posizione specifica. In questo caso, non è necessario dissotterrare tutto ciò che è memorizzato nella cache. Per fare ciò, in qualsiasi browser è necessario premere la combinazione di tasti CTRL + S, quindi nel campo "Tipo di file" selezionare "Pagina Web completa". Puoi anche aprire file con estensione js contenenti il codice sorgente dello script con un normale editor di testo.
Il codice sorgente per i filmati flash che vengono scaricati dal browser sul tuo computer non è così facile da vedere. Il browser non riceve il codice sorgente, ma solo la sua versione compilata: il codice eseguibile. Tuttavia, esistono programmi di decompilatore in grado di eseguire la procedura di conversione inversa. Ad esempio, Flash Decompiler Trillix è integrato nel tuo browser e ti consente di estrarre un oggetto Flash da una pagina e salvarlo. Dopo aver aperto il flash nel decompilatore, avrai accesso ai suoi singoli componenti: immagini, script, suoni, ecc. Naturalmente, questo codice non corrisponderà completamente alle fonti dell'autore, ma solo con un grado di accuratezza sufficiente per il funzionamento.
Il "codice sorgente" è spesso chiamato il codice di un programma in un linguaggio di programmazione comprensibile dall'uomo (di alto livello). Con questo codice è possibile apportare modifiche al programma (script, filmato flash, applicazione java, programma applicativo, ecc.). L'autore o il distributore del programma decide se distribuire il codice sorgente insieme al prodotto finito. Esiste un'intera classe di applicazioni distribuite "open source", il codice sorgente di altri programmi (ad esempio script JavaScript o pagine HTML) per definizione non può essere nascosto e il codice sorgente di altri programmi è soggetto a copyright.
Istruzione
Ottenere il codice sorgente per un'applicazione open source dal sito dell'autore o del distributore del prodotto software. Di solito puoi trovare l'indirizzo del sito nella sezione del menu chiamata "Aiuto", se selezioni la voce "Informazioni" al suo interno.
Fare clic con il pulsante destro del mouse su una pagina Web se si desidera accedere al suo codice sorgente. In qualsiasi browser, il menu contestuale a discesa conterrà un comando per visualizzare la fonte, sebbene la sua formulazione possa variare leggermente. Puoi fare a meno del menu contestuale: la scorciatoia da tastiera ctrl + u duplica la chiamata al comando di visualizzazione sorgente. Alcuni browser dispongono di strumenti di navigazione integrati (Mozilla Firefox, Google Chrome), altri utilizzano programmi esterni per questo, il più delle volte Blocco note. È possibile salvare in un file l'origine della pagina ottenuta in questo modo.
Natascia 31 ottobre 2011 alle 03:10JavaScript: nascondere lo script da occhi indiscreti
- Ripostiglio *
Hai mai desiderato nascondere agli estranei sulla tua pagina uno script che implementa un aspetto del menu irrealisticamente bello o altre azioni che non vorresti vedere presto su ogni secondo sito?
Se sì, il metodo descritto in questo articolo ti sarà utile insieme all'offuscamento del codice. Allo stesso tempo, prenoterò subito che il metodo non è al 100 percento, ma probabilmente proteggerà dalla maggior parte dei non professionisti e da alcuni professionisti.
Teoria
Diciamo che abbiamo una pagina nojs.php e su di essa c'è uno script secret.js che deve essere nascosto. Il browser e l'utente possono ottenere lo script dal server nei seguenti modi:- Caricamento di uno script posizionato direttamente sulla pagina o caricato tramite DOM;
- Visualizza script nella finestra Codice sorgente della pagina;
- Salvataggio della pagina con tutti i file sul disco rigido;
- Inserimento di un URL diretto nella barra degli indirizzi.
Nel secondo e terzo caso, non viene trasmesso da tutti i browser (Chrome, FireFox danno lo script precedentemente caricato dalla cache; Opera, IE carica nuovamente lo script, ma senza inviare il referer).
Nel quarto caso, il referer non viene passato da nessuno dei quattro browser.
Se emettiamo JavaScript in modo dinamico con un controllo per la presenza dell'intestazione del referer nella richiesta, allora ci proteggeremo immediatamente da Opera e IE, ma per Crome e Firefox dovremo inventare qualcosa di più intricato. Caricheremo prima uno script, che a sua volta caricherà un altro script, mentre entrambi i download verranno controllati per la presenza di http-referer. È stato stabilito da un poke scientifico che se crei dinamicamente uno script nella pagina document.createElement("script"), e quindi lo elimini dalla pagina, lo script funzionerà come al solito, ma non verrà salvato.