Hvordan lage enkle HTML5 Application Utgang med Javascript

December 3  by Eliza

Når du skriver programmer i Javascript, må du konfrontere noen problemer før de blir virkelig klar for dem. Det er en kylling-eller-egget scenario - som teknikken bør du ta først? Det er slik det er med søknad utgang.

For å se hvordan noen programmeringsteknikker fungere, må du vite hvordan du skal skrive utgang til programskjermen. Selvfølgelig, du virkelig trenger å vite mer om Javascript før du kan mestre teknikken for å skrive noe til skjermen.

Hvordan å skrive til et HTML-element

HTML-dokumenter er bygget opp av enkeltelementer. Et element er noen kode som du bruker til å holde innhold, for eksempel en <div> <p> eller <input> tag. Du kan skrive informasjon til noen av disse elementene ved hjelp av Javascript. Følgende eksempel viser hvordan du kan skrive til bestemte elementer.

<! DOCTYPE html>
<Html>
<Head>
<Title> data kan overføres til HTML </ title>
<Script language = "Javascript">
funksjon WriteText ()
{
document.getElementById ("myText"). innerhtml =
"Klikket!";
}
</ Script>
</ Head>
<Body>
<H1> Opprette HTML Element Utgang </ h1>
<Div> <p id = "myText"> Endre Me </ p> </ div>
<Div> <input id = "btnClickMe"
type = "button"
value = "Click Me"
onclick = "WriteText ()" />
</ Div>
</ Body>
</ Html>

I dette tilfellet inneholder siden en <p> tag med en id av myText. Dette avsnittet inneholder teksten endre meg. I tillegg er det en <input> tag som skaper en knapp brukeren kan klikke. Når brukeren klikker på Klikk Me-knappen, kaller søknaden WriteText () -funksjonen som vises i <head> av dokumentet i <script> tag.

Java har flere globale gjenstander du kan få tilgang til koden din. En av de mest viktige objekter er dokumentet, som refererer til hele HTML-dokumentet. Selvfølgelig, trenger du ikke ønsker å endre hele dokumentet; du ønsker å endre bare ett element i dokumentet. Den getElementById () -funksjonen henter alle objekt som har en id-attributt ved navn som attributt, som er myText i dette tilfellet.

På dette punktet, har du tilgang til hele <p> element med navnet myText. Du ønsker å endre teksten i det elementet. Innerhtml eiendom gir tilgang til tekst i <p> ​​element. Du kan enten lese innholdet eller endre det. Ved hjelp av innerhtml =, som vist i koden, modifiserer innholdet. Det gjør innholdet lik uansett følger, som er klikket! i dette tilfellet.

Når du prøver eksemplet du først se en side med litt tekst og en knapp. Klikk på knappen, og verdien av tekstendringer. Denne teknikken fungerer med alle element som viser tekst. Du kan like gjerne bruke den med en <span> eller annen kode som kan vise tekst.

Denne teknikken fungerer bare når du samhandler med elementer som inneholder tekst i en åpning og lukking tag, for eksempel <p>. Når du arbeider med en <input> eller annet element som bruker attributter å holde innhold, må du bruke en annen metode. I dette tilfellet må du få tilgang til attributtet innenfor kontroll og gjøre endringen der, som vist her:

document.getElementById ("btnClickMe"). setAttribute (
"Verdi", "klikket!");

I dette tilfellet, spør du javascript for å få tilgang til btnClickMe <input> element i dokumentet og deretter å sette verdien attributtet til Klikkede !. Resultatet er det samme som når du arbeider med <p> -taggen, men tilnærmingen er litt annerledes. Innerhtml eiendommen er nyttig bare for elementer som har en verdi tilordnet den egenskapen.

Hvordan du oppretter direkte dokument Java utgang

I noen tilfeller trenger du ikke ønsker å samhandle med et eksisterende element, så du opprette et nytt element som inneholder innholdet du ønsker å se. For eksempel kan du legge til en ny <p> tag som inneholder teksten du ønsker å se. Javascript gir en rekke måter å utføre denne oppgaven.

Den enkleste måten til å utføre oppgaven er å skape en inline-skript som vist i det følgende eksempel som tilfører den nødvendige effekt.

<! DOCTYPE html>
<Html>
<Head>
<Title> Direkte dokumentutgangs </ title>
</ Head>
<Body>
<H1> Opprette Direkte utgang </ h1>
<Script language = "Javascript">
document.write ("<p> Dette er direkte utgang </ p>");
</ Script>
</ Body>
</ Html>

Det sentrale punktet i dette eksempelet er kallet til document.write () -funksjonen. Denne funksjonen lar deg skrive inn tekst du vil dokumentobjektet. I dette tilfellet danner det eksempel en ny <p> signal som inneholder en enkelt melding.

Du kan enkelt lage denne teksten ved å legge på <p> tag direkte. Denne spesielle teknikken kommer i hendig. For eksempel kan du bruke den til å se etter en betingelse, og deretter legge den aktuelle teksten basert på tilstanden. Hva du trenger å se i dette eksempelet er at du skriver til dokumentet ved hjelp av et skript er faktisk mulig.

Unngå potensielle problemer med utgang

Bugs kan føre til alle slags problemer for brukere som vil i sin tur føre til alle slags problemer for deg. En av de mer interessante feil som du kan støte skriver informasjon til en dokumentobjekt feil. Følgende illustrerer en situasjon hvor du ser feil resultat fra å bruke document.write () -funksjonen.

<! DOCTYPE html>
<Html>
<Head>
<Title> Feil Utgang </ title>
<Script language = "Javascript">
funksjon WriteText ()
{
document.write ("Oops!");
}
</ Script>
</ Head>
<Body>
<H1> Opprette HTML Element Utgang </ h1>
<Div> <p id = "myText"> Endre Me </ p> </ div>
<Div> <input id = "btnClickMe"
type = "button"
value = "Click Me"
onclick = "WriteText ()" />
</ Div>
</ Body>
</ Html>

Legg merke til at document.write () funksjonen kalles etter at siden er ferdig. Når du bruker document.write () -funksjonen på denne måten, overskriver det alt som vises i dokumentobjekt. Når du klikker på Klikk Me knapp på siden, ser du Oops ord! skjermen og ingenting annet.

Faktisk, vil siden ikke engang ferdig lasting fordi nettleseren ikke vet hva de skal gjøre med det. Å stoppe lasteprosessen, må du klikke på nettleserens Stopp Laster knapp manuelt.

På dette punktet, hvis du bruker nettleseren din evne til å se siden kilden, vil du se et eneste ord, Oops !. Siden ikke lenger inneholder en <! DOCTYPE> erklæring, <html>, <head> eller <body> tags, eller noen av de andre opplysningene brukte den til å inneholde. Den document.write () -funksjonen har overskrevet alt.

Nå, dette er ikke alltid en feil resultat - kan du faktisk trenger for å overskrive den siden med nytt materiale, men du trenger for å lage en helt ny side når du gjør det.