Sådan Output en JavaScript-variabel i et anker

February 11

Sådan Output en JavaScript-variabel i et anker


Webbrowsere fortolker websider, der er skrevet i HyperText Markup Language, og, når de anvendes sammen med CSS og JavaScript, HTML er standard sprog, der anvendes til at oprette sider på World Wide Web. Udtrykket "HyperText" henviser til tekst, der indeholder links eller "ankre" til andre websider og er derfor ikke begrænset til en lineær format. JavaScript er et scriptsprog, der lader webudviklere oprette scripts, der kan bruges til en lang række formål og output kode resultater - såsom variabler - i anker tags.

Instruktioner

1 Åbn en teksteditor og oprette en ny fil med navnet jsAnchor.html. Tilføj nogle HTML-koder til den fil, omfatter en åben "<html>" tag, en åben "<head>" tag, en nær "</ head>" tag, en åben "<body>" tag, en nær "< / body> "tag, og en tæt" </ html> "tag. Tilsammen udgør disse tags danner en rudimentær webside, der kan vises i en webbrowser.

<Html>

<Head> </ head>

<Body> </ body>

</ Html>

2 Tilføj en åben "<script>" og en tæt "</ script>" tag mellem "<body>" og "</ body>" tags. Tildel "type" attribut "text / javascript" til "<script>" tag.

<Html>

<Head> </ head>

<Body>

<Script type = "text / javascript">

</ Script>

</ Body>

</ Html>

3 Erklær en JavaScript-variabel med navnet "anchorVar" mellem "<script>" og "</ script>" tags ved hjælp af JavaScript "var" søgeord. Tildel variablen værdien "http://www.usda.gov". Denne værdi er et eksempel; hyperlinket s "href" attribut kan være en hvilken som helst hjemmeside-adresse til rådighed lokalt eller på internettet.

<Html>

<Head> </ head>

<Body>

<Script type = "text / javascript">

var anchorVar = "http://www.usda.gov";

</ Script>

</ Body>

</ Html>

4 Brug JavaScript "document.write ()" metode til at skrive den første del af en HTML anker tag ( "<a") og anker tag s "href" attribut til HTML-siden. Indtast et lighedstegn ( "=") umiddelbart efter "href" attribut.

<Html>

<Head> </ head>

<Body>

<Script type = "text / javascript">

var anchorVar = "http://www.usda.gov";

document.write ( "<a href =");

</ Script>

</ Body>

</ Html>

5 Anvendes en anden "document.write ()" metode til at skrive "anchorVar" variabel til HTML-side. Brug JavaScript Sammenkædningsoperator ( "+") og en tæt tegn "(>)" for at fuldføre anker tag.

<Html>

<Head> </ head>

<Body>

<Script type = "text / javascript">

var anchorVar = "http://www.usda.gov";

document.write ( "<a href =");

document.write (anchorVar + ">");

</ Script>

</ Body>

</ Html>

6 Brug en tredje "document.write ()" metode til output teksten "Dette link bruger en variabel output med JavaScript" til HTML-siden.

<Html>

<Head> </ head>

<Body>

<Script type = "text / javascript">

var anchorVar = "http://www.usda.gov";

document.write ( "<a href =");

document.write (anchorVar + ">");

document.write ( "Dette link bruger en variabel output med JavaScript");

</ Script>

</ Body>

</ Html>

7 Brug en fjerde "document.write ()" metode til at skrive en tæt HTML hyperlink tag ( "</a>") til HTML-side. Gem og luk jsAnchor.html.

<Html>

<Head> </ head>

<Body>

<Script type = "text / javascript">

var anchorVar = "http://www.usda.gov";

document.write ( "<a href =");

document.write (anchorVar + ">");

document.write ( "Dette link bruger en variabel output med JavaScript");

document.write ( "</a>");

</ Script>

</ Body>

</ Html>

8 Åbn "jsAnchor.html" i en webbrowser. Klik på hyperlinket og validere, at den "anchorVar" JavaScript-variabel ( "http://www.usda.gov") er output som en del af ankeret tag.

TIPS

  • JavaScript har en funktion kaldet String.link, der automatisk tilføjer string tekst til ankre. Se afsnittet referencer for mere information om den String.link funktionen.
  • Den "<a>" HTML-tag kan styles ved hjælp af CSS-attributter såsom farve, skrifttype og stil.
  • JavaScript kan bruges til at oprette bogmærker inde dokumenter. Bogmærker er interne links, der tillader kobling til specifikke oplysninger inden for en hypertekst dokument.
  • JavaScript undslippe karakter, eller omvendt skråstreg, kan hjælpe med at sikre, at web-browsere fortolker skråstreger efter hensigten.

relaterede artikler