HTML, CSS un JavaScript ir trīs galvenās valodas, ko izmanto priekšgala izstrādē. HTML ir iezīmēšanas valoda, savukārt CSS ir stila valoda.
JavaScript ir uz objektu orientēta programmēšanas valoda, ko galvenokārt izmanto tīmekļa un mobilo lietojumprogrammu klienta puses izveidē. Šī atvērtā koda dinamiskā valoda ir kļuvusi par vienu no visbiežāk izmantotajām programmēšanas valodām, pateicoties tās elastībai un saprotamībai.
Izmantojot HTML5 un CSS3, varat izveidot statiskas vietnes. Tomēr, lai šādai vietnei pievienotu interaktivitāti, jums ir jāizmanto pārlūkprogrammām saprotama programmēšanas valoda, piemēram, JavaScript.
Šajā rakstā ir izskaidrots, kāpēc jums ir jāizmanto JavaScript ar HTML, dažādas pieejas JavaScript koda pievienošanai HTML un paraugprakse abu valodu apvienošanai.
Kāpēc ir ļoti svarīgi izmantot JavaScript HTML
- Pievienot interaktivitāti: interaktivitāte reaģē uz lietotāja ievadi/darbībām reāllaikā, nepārlādējot pārlūkprogrammu. Piemēram, jums var būt skaitītājs, kas palielinās par vienu katru reizi, kad uz tā tiek noklikšķināts. Cits piemērs var būt atbilde, kas lietotājiem norāda, ka viņu atsauksmes ir nosūtītas ikreiz, kad viņi noklikšķina uz pogas Iesniegt.
- Klienta puses validācija: varat izmantot JavaScript, lai iegūtu pareizos datus veidlapās. Piemēram, varat izmantot šo programmēšanas valodu, lai pārbaudītu lietotāja ievadītos datus reģistrēšanās lapā pēc e-pasta formāta, paroles garuma un izmantojamās rakstzīmju kombinācijas.
- Manipulācija ar DOM: JavaScript piedāvā dokumenta objektu modeli (DOM), kas ļauj viegli dinamiski mainīt tīmekļa lapas saturu. Izmantojot šo tehnoloģiju, lapas saturs tiek automātiski atjaunināts, pamatojoties uz lietotāja ievadītajiem datiem, nepārlādējot tīmekļa lapu.
- Saderība starp pārlūkprogrammām: JavaScript ir saderīgs ar visām mūsdienu pārlūkprogrammām. Tādējādi tīmekļa lapas, kas izveidotas, izmantojot HTML, CSS un JavaScript, lieliski darbosies dažādās pārlūkprogrammās.
Priekšnoteikumi
- Pamata izpratne par HTML: jūs saprotat pamata HTML tagus, varat pievienot pogas un izveidot veidlapas, izmantojot HTML.
- Pamata izpratne par CSS: jūs saprotat CSS jēdzienus, piemēram, ID, klases un elementu atlasītājus.
- Kodu redaktors: varat izmantot koda redaktoru, piemēram, VS Code vai Atom. Varat arī izmantot tiešsaistes JavaScript kompilatoru, ja nevēlaties instalēt programmatūru savā sistēmā.
Kā lietot JavaScript HTML
Varat izmantot trīs galvenās pieejas, lai pievienotu JavaScript kodu HTML. Mēs izpētām katru pieeju un to, kur tā ir vispiemērotākā.
#1. Koda iegulšana starp tagu
Šī pieeja ļauj jums ievietot JavaScript un HTML kodus vienā failā (HTML failā). Mēs varam sākt ar projekta mapes izveidi, kurā mēs parādīsim, kā tas darbojas. Lai sāktu, varat izmantot šīs komandas;
mkdir javascript-html-playground cd javascript-html-playground
Izveidojiet divus failus; index.html un style.css
Pievienojiet šo sākuma kodu HTML failam;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Pievienojiet šo sākuma kodu savam CSS failam;
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 8px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border: none;
border-radius: 2.5px;
font-size: 8px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
Kad tīmekļa lapa tiks renderēta, jums būs kaut kas līdzīgs šim;
Tagad mēs varam pievienot vienkāršu JavaScript kodu, kas saka “iesniegts”, kad noklikšķināt uz pogas Iesniegt. Pārveidotais HTML kods ar JavaScript būs;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("submitted");
}
</script>
</body>
</html>
Noklikšķinot uz pogas Iesniegt, jūs saņemsiet kaut ko līdzīgu šim;
Pros of embedding JavaScript code between <script> … </script> tags
- Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file.
- Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug.
Cons of embedding JavaScript code between <script> … </script> tags
- Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
- Slows performance: Big code blocks on the HTML document can slow loading speeds.
#2. Inline Code by using JavaScript code directly inside HTML
Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="alert('inline submit')" />
</form>
</div>
</body>
</html>
Noklikšķinot uz Iesniegt, jūsu pārlūkprogrammā parādīsies neliels logs ar vārdiem “iekļauts iesniegt”.
Plusi, pievienojot JavaScript kā iekļauto kodu
- Ātra ieviešana: jums nav jāpārslēdzas no viena dokumenta uz citu, lai rakstītu HTML un JavaScript kodu.
- Lieliski piemērota mazai lietotnei: ja jums ir maza lietotne, kas neprasa daudz interaktivitātes, iekļautais JavaScript ir lieliska izvēle.
Mīnusi JavaScript pievienošanai kā iekļautajam kodam
- Kods nav atkārtoti lietojams: ja jūsu lietotnei ir vairākas veidlapas, katrai veidlapai tiks izveidots JavaScript kods.
- Palēnina veiktspēju: lieli koda bloki HTML dokumentā var palēnināt ielādes ātrumu.
- Koda lasāmība: koda bāzei turpinot augt, koda lasāmība samazinās.
#3. Ārēja JavaScript faila izveide
Pieaugot jūsu lietojumprogrammai, jūs ievērosiet, ka JavaScript koda pievienošana tieši HTML failam nav laba ideja. Ja jūsu HTML failā ir daudz koda, visticamāk, jums būs arī tīmekļa lapas ar zemu ielādes ātrumu.
Izveidojiet jaunu failu script.js, kas satur JavaScript kodu.
Importējiet failu script.js HTML failā;
<head> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head>
Jaunajā atjauninātajā HTML lapā būs šis kods;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Pievienojiet šo kodu failam script.js;
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("external JS sheet submit");
});
});
Šis JavaScript veic šādas darbības;
- Mums ir notikumu uztvērējs, kas gaida DOMContentLoaded notikuma aktivizēšanu.
- Pēc DOMContentLoaded notikuma aktivizēšanas tiek izpildīta atzvanīšanas funkcija.
- Veidlapas izvēlei kods izmanto querySelector.
- Mēs izmantojam event.preventDefault(), lai neļautu DOM izvēlēties noklusējuma darbību (atsvaidzināt lapu vai pāriet uz jaunu lapu), kad tiek aktivizēts iesniegšanas notikums.
- Tiklīdz tiek aktivizēts iesniegšanas notikums, tiek aktivizēts ziņojums “ārējās JS lapas iesniegšana”.
JavaScript HTML valodā: paraugprakse
- Samaziniet failu izmērus: jo lielāks faila lielums, jo vairāk laika nepieciešams ielādei pārlūkprogrammā. Samazinot avota kodā tiek noņemtas visas nevēlamās rakstzīmes, nemainot tā nozīmi vai veiktspēju. Lai izveidotu kompaktu kodu bāzi, varat izmantot tādus rīkus kā Yahoo YUI Compressor un HTMLMinifier.
- Sakārtojiet savu kodu: tas atvieglos lasīšanu un apkopi. Lai sakārtotu kodu, varat izmantot tādus paplašinājumus kā Prettier.
- Izmantojiet ārējās bibliotēkas: ja bibliotēka var veikt noteiktu uzdevumu jūsu lietotnei, kods nav jāraksta no jauna. Tomēr izvairieties no vairāku bibliotēku izmantošanas, kas vienā projektā sasniedz vienus un tos pašus mērķus.
- Optimizējiet JavaScript izvietojumu: ja vēlaties savam HTML failam pievienot JavaScript kodu, pārliecinieties, ka tas ir aiz HTML koda. Pirms taga