Hvordan bruke Javascript for å oppdatere en sidetittel
Javascript er en leverandør-nøytral skriptspråk som vanligvis innebygd i websider og kjører på en klientdatamaskin. Siden Javascript er objektbasert, den har en rekke innebygde objekter som kan brukes til å legge til dynamisk innhold på nettsider. En av disse objektene, dokumentobjektet, gir tilgang til alle elementene i en HTML-side fra innsiden Javascript, noe som gir utviklere muligheten til å endre dokumentelementer som lenker og ankere, samt egenskaper som bakgrunnsfarge og en side dynamisk .
Bruksanvisning
1 Åpne en teksteditor og opprette en ny fil med navnet updateTitle.html. Legg noen HTML-koder til updateTitle.html, være sikker på å inkludere en <head> og <body> -delen:
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
Lagre updateTitle.html.
2 Legg en <title> taggen i HTML <head> -delen. Tittelen tekst bør lese "Page tittel Før":
<Html>
<Head>
<Title> sidens tittel Før </ title>
</ Head>
<Body> </ body>
</ Html>
3 Skriv en Javascript åpen skriptmerket og plassere den inne i HTML <head> -taggen. Sett <script> tag typeverdi til text / javascript og lukke tag:
<Html>
<Head>
<Title> sidens tittel Før </ title>
<Script type = "text / javascript">
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Legg en Javascript-funksjonen til filens <script> -delen. Navn funksjonen changeTItle ():
<Html>
<Head>
<Title> sidens tittel Før </ title>
<Script type = "text / javascript">
fungere changeTitle ()
{
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Legg Javascript-kode til changeTitle () funksjon som oppdaterer dokumentets tittel med document.title eiendom. Endre tittelen til sidens tittel Etter:
<Html>
<Head>
<Title> sidens tittel Før </ title>
<Script type = "text / javascript">
fungere changeTitle ()
{
document.title = "Side tittel Etter";
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
6 Legg en <p> tag inne i HTML <body> -taggen. Skriv inn teksten som vises meldingen Endre tittel med Javascript. Lukk </ p> tag:
<Html>
<Head>
<Title> sidens tittel Før </ title>
<Script type = "text / javascript">
fungere changeTitle ()
{
document.title = "Side tittel Etter";
}
</ Script>
</ Head>
<Body>
<P> Endre tittel Med Java </ p>
</ Body>
</ Html>
7 Legg en <-knappen> tag til <body>. Legg en onclick () hendelse til knappen og still onclick () tiltak for å ringe changeTitle () Javascript-funksjon. Skriv inn teksten Klikk for å endre tittel etter <-knappen> åpen tag og lukke tag:
<Html>
<Head>
<Title> sidens tittel Før </ title>
<Script type = "text / javascript">
fungere changeTitle ()
{
document.title = "Side tittel Etter";
}
</ Script>
</ Head>
<Body>
<P> Endre tittel Med Java </ p>
<-knappen Onclick = "changeTitle ()"> Klikk for å endre tittel </ knapp>
</ Body>
</ Html>
Lagre og lukk updateTitle.html.
8 Åpne updateTitle.html i en nettleser. Klikk på "Klikk for å endre tittel" for å endre updateTitle.html tittel fra sidens tittel Før til sidens tittel After.
Hint
- Sidens tittel er en av de viktigste elementene i SEO (Search Engine Optimization), og siden titler vises fremtredende i søkemotoren resultatsider. Ha dette i bakhodet når du utvikler sidetitler.
- Gjentatte ganger skape gjenstander kan føre til ytelsesproblemer. Hvis du må lage flere identiske objekter, vurdere å opprette objektet gang, lagre den i en variabel, og refererer til variabelen.
- Plassere Javascript-kode i en egen fil, og refererer til filen fra innsiden HTML kode tillater utviklere å bruke en enkelt kode fil i flere sider. I tillegg lar denne teknikken flere utviklere bruker samme kodefilen og fremmer innkapsling.
- Endre sidetitler dynamisk ved hjelp av en klient-side script vil ikke endre sidens resultater i søkemotorene. Søkemotorer bruker tittelen som er kodet som en del av siden, og er uvitende om dynamiske tittel endringer etter at siden er lastet.