HTML JavaScript
JavaScript нь HTML-г динамик, интерактив болгодог.
Жишээлбэл:
Бидний эхний JavaScript
script
нь клиент талын хэл бөгөөд HTML-д <script>
tag-д тодорхойлогдоно.
Эсвэл бид src
атрибутыг ашиглан гадна байрлах нь скрипт файлыг ашиглаж болно.
HTML элементийг сонгохын тулд JavaScript нь ихэвчилэн document.getElementById()
функцийг ашигладаг.
Жишээлбэл:
test гэсэн id-тай элементэд "Энэ бол JavaScript" текстийг бичиж үзье.
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML = "Энэ бол JavaScript!";
</script>
</body>
</html>
Зөвлөмж: JavaScrpit-ийн талаар илүү ихийг мэдэхийг хүсвэл манай JS сурцгаая А-Я хичээлээс үзээрэй.
JavaScript-ийн боломжоос сонирхвол
JavaScript юу хийж чаддаг вэ? Товчхон жишээнээс үзье.
HTML-ийн контентыг өөрчилж чадна
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<button type="button" onclick="myFunc()">Товч!</button>
<p id="test">Энэ бол HTML</p>
<script>
function myFunc() {
document.getElementById("test").innerHTML = "Харин энэ бол JavaScript!";
}
</script>
</body>
</html>
HTML-элементийн загварыг өөрчилж чадна
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<p id="test">Энэ бол HTML & JavaScript</p>
<script>
function myFunc() {
document.getElementById("test").style.fontSize = "16px";
document.getElementById("test").style.color = "white";
document.getElementById("test").style.backgroundColor = "green";
}
<button type="button" onclick="myFunc()">Товчлуур</button>
</script>
</body>
</html>