cb
ABCD
  • HTML Оршил
  • HTML Editor
  • HTML Үндсэн ойлголт
  • HTML Элемент /Elements/
  • HTML Атрибут /Attributes/
  • HTML Гарчиг /Headings/
  • HTML Догол мөр /Paragraphs/
  • HTML Загвар /Style/
  • HTML текст формат
  • HTML Quotation болон Citation элемент
  • HTML Тайлбар /Comments/
  • HTML Өнгө /Colors/
  • HTML CSS
  • HTML Холбоос /Links/
  • HTML Зураг /Images/
  • HTML Хүснэгт /Tables/
  • HTML Жагсаалт /Lists/
  • HTML Блок /Block/
  • HTML Класс атрибут /Class/
  • HTML id атрибут
  • HTML Iframe
  • HTML JavaScript
  • HTML Файлын байршил /File Paths/
  • HTML Толгой хэсэг /Head/
  • HTML Зохион байгуулалт /Layout/
  • HTML Responsive
  • HTML Компьютер код
  • HTML Симантик элемент /Semantic/
  • HTML Forms
  • HTML form элементүүд
  • HTML Оролтын төрлүүд /Input Type/
  • HTML Оролтын Атрибутууд
тохиргоо
Толгой хэсэг
Хажуугийн самбар
Үндсэн контент
НЭВТРЭХ

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>
Үр дүнг харах

Сэтгэгдэлүүд

Контентын нэр
HTML Оршил
HTML Editor
HTML Үндсэн ойлголт
HTML Элемент /Elements/
HTML Атрибут /Attributes/
HTML Гарчиг /Headings/
HTML Догол мөр /Paragraphs/
HTML Загвар /Style/
HTML текст формат
HTML Quotation болон Citation элемент
HTML Тайлбар /Comments/
HTML Өнгө /Colors/
HTML CSS
HTML Холбоос /Links/
HTML Зураг /Images/
HTML Хүснэгт /Tables/
HTML Жагсаалт /Lists/
HTML Блок /Block/
HTML Класс атрибут /Class/
HTML id атрибут
HTML Iframe
HTML JavaScript
HTML Файлын байршил /File Paths/
HTML Толгой хэсэг /Head/
HTML Зохион байгуулалт /Layout/
HTML Responsive
HTML Компьютер код
HTML Симантик элемент /Semantic/
HTML Forms
HTML form элементүүд
HTML Оролтын төрлүүд /Input Type/
HTML Оролтын Атрибутууд
ABCD.mn ©

Нөхцөл & Шаардлага

1. General

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor.

2. Account

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor.

3. Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor.

4. Payments

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor.