KHCODE

HTML អនុវត្តជាក់ស្ដែង

គ្រប់ចំណុចដែលបានបង្ហាញ តែងមានភ្ជាប់ជាមួយនូវការអនុវត្តជាក់ស្ដែង ដែលមានសណ្ឋានដូចប្រអប់ខាងក្រោម ។ វាគឺជាឧបករណ៍មួយដែលបង្កើតឡើងដោយក្រុមការងារ KhCode សំរាប់សម្រួលដល់ការអនុវត្តកូដរបស់អ្នកសិក្សាគ្រប់រូប ។ អ្នកអាចសរសេរកូដនៅក្នុងនោះ ហើយមើលចម្លើយបានភ្លាមៗតែម្ដង ។

<!DOCTYPE html>
<html>
    <head>
        <title>KhCode Academy</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>KHCODE ACADEMY</h2>
        <p>ស្វាគមន៍មកកាន់ KHCODE</p>
        <p>មេរៀនកូដកុំព្យូទ័រ ជាភាសាខ្មែរ ឥតគិតថ្លៃ</p>
    </body>
</html>

HTML កំណត់ចំណងជើង

ចំណងជើងនៃទំព័រនីមួយៗត្រូវបានកំណត់ដោយប្រើ <title>

<!DOCTYPE html>
<html>
    <head>
        <title>KHCODE ACADEMY</title>
    </head>
</html>

HTML ក្បាលរឿង

<h1>, <h2>, <h3>, <h4, <h5>, <h6> ទាំងអស់នេះ ប្រើសំរាប់សរសេរក្បាលរឿងតាមលំដាប់លេខ ។ ចំណងជើងធំ ត្រូវសរសេរនៅក្នុង <h1> ។ មួយធំ ពីរធំ បីធំ... ត្រូវសរសេរនៅក្នុង <h2> ។

<h1>ចំណងជើង</h1>
<h2>១.មួយធំ</h2>
<h3>១.១.មួយចុចមួយ</h3>
<h4>១.១.១.មួយចុចមួយចុចមួយ</h4>
<h4>១.១.២.មួយចុចមួយចុចពីរ</h4>
<h5>ក.ក្បាលរឿងទី៥</h5>
<h5>ខ.ក្បាលរឿងទី៥</h5>
<h6>a.ក្បាលរឿងទី៦</h6>
<h6>b.ក្បាលរឿងទី៦</h6>
<h4>១.១.៣.មួយចុចមួយចុចបី</h4>
<h3>១.២.មួយចុចមួយ</h3>
<h2>២.ពីរធំ</h2>

HTML កថាខណ្ឌ

កថាខណ្ឌត្រូវសរសេរនៅក្នុង <p> ។

<h2>ក្បាលរឿងទី២</h2>
<p>កថាខណ្ឌត្រូវសរសេរនៅក្នុង p ។</p>

CSS អនុវត្តជាក់ស្ដែង

គ្រប់ចំណុចដែលបានបង្ហាញ តែងមានភ្ជាប់ជាមួយនូវការអនុវត្តជាក់ស្ដែង ដែលមានសណ្ឋានដូចប្រអប់ខាងក្រោម ។ វាគឺជាឧបករណ៍មួយដែលបង្កើតឡើងដោយក្រុមការងារ KhCode សំរាប់សម្រួលដល់ការអនុវត្តកូដរបស់អ្នកសិក្សាគ្រប់រូប ។ អ្នកអាចសរសេរកូដនៅក្នុងនោះ ហើយមើលចម្លើយបានភ្លាមៗតែម្ដង ។

h2 {
    background: #808080;
    color: #fff;
}

CSS នៅក្នុង <style>

យើងអាចសរសេរកូដ CSS នៅក្នុង <style> ដែល <style> នោះ ត្រូវសរសេរនៅក្នុង <head> ។

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            p {
                color:blue;
            }
            #a {
                color:green;
            }
        </style>
    </head>
    <body>
        <p>ស្វាគមន៍មកកាន់ KHCODE ។</p>
        <p>ឥតគិតថ្លៃ សំរាប់ថ្ងៃនេះ និងជានិរន្តន៍ ។</p>
        <p id="a">សូមជួយចែករំលែក ។</p>
    </body>
</html>

Javascript អនុវត្តជាក់ស្ដែង

គ្រប់ចំណុចដែលបានបង្ហាញ តែងមានភ្ជាប់ជាមួយនូវការអនុវត្តជាក់ស្ដែង ដែលមានសណ្ឋានដូចប្រអប់ខាងក្រោម ។ វាគឺជាឧបករណ៍មួយដែលបង្កើតឡើងដោយក្រុមការងារ Khode សំរាប់សម្រួលដល់ការអនុវត្តកូដរបស់អ្នកសិក្សាគ្រប់រូប ។ អ្នកអាចសរសេរកូដនៅក្នុងនោះ ហើយមើលចម្លើយបានភ្លាមៗតែម្ដង ។

function increase(event) {
    event.target.innerText = Number(event.target.innerText) + 1;
}

Javascript នៅក្នុង <script>

យើងអាចសរសេរកូដ Javascript នៅក្នុង <script> ។ <script> អាចសរសេរនៅក្នុង <head> ក៏បាន <body> ក៏បាន តែទីតាំងរបស់វាក៏ជិះឥទ្ធិពលដល់កូដដែលនៅក្នុងនោះដែរ ។

<script>
// ខ្ញុំសរសេរកូដ Javascript
// ដើម្បីកែតម្រូវ
// <p id="a">
</script>
<p id="a">Khode</p>

តាមកូដខាងលើ Javascript ព្យាយាមកែតម្រូវ <p id="a"> ។ ប៉ុន្តែខណៈពេលនោះ <p id="a"> មិនទាន់មាននៅឡើយទេ ។ ដូចនេះ Javascript មួយនោះ នឹងចេញជាបញ្ហា ។ ដើម្បីដោះស្រាយបញ្ហានោះ យើងគ្រាន់តែសរសេរ <script> នៅក្រោមគេបង្អស់ទៅ ជាការស្រេច ព្រោះពេលនោះ គ្រប់ធាតុទាំងអស់បានរៀបចំសព្វគ្រប់អស់ហើយ ។

Javascript សញ្ញាចំណុចក្បៀស

ត្រង់ចំណុចនេះ Javascript គឺដូច CSS ដែរ ។ រាល់ដំណើរការអ្វីចប់មួយ ត្រូវបញ្ចប់ដោយសញ្ញាចំណុចក្បៀស គឺសញ្ញា ; នេះ ។

Javascript វិចារណ៍

វិចារណ៍មិនបង្ហាញអ្វីជាចម្លើយនោះ វាមានប្រយោជន៍ដល់អ្នកសរសេរកូដ ដែលប្រើសំរាប់កត់ចំណាំថាតើកូដនៅកន្លែងនោះ និយាយអំពីអ្វី ។ នៅក្នុង Javascript ដើម្បីសរសេរវិចារណ៍ យើងត្រូវ ៖ សំរាប់មួយបន្ទាត់ ត្រូវសរសេរផ្ដើមដោយ //សំរាប់ច្រើនបន្ទាត់ ត្រូវសរសេរផ្ដើមដោយ /* ហើយបញ្ចប់ដោយ */ ។

// រចនាទៅឲ្យធាតុ
function newStyle(element) {
    element.style.background = "blue";
    element.style.color = "white";
    element.style.fontSize = "2em";
}
/* ខ្ញុំអាចសរសេរវិចារណ៍
នៅក្នុងនេះ
ច្រើនបន្ទាត់ប៉ុណ្ណាក៏បាន */

Javascript - alert()

alert() function សំរាប់បង្ហាញប្រអប់ផុសចេញមក ។

<button onclick="alert('ស្វាគមន៍មកកាន់ KHCODE')">បង្ហាញ</button>

ឧទាហរណ៍ខាងលើ ៖

onclick សំរាប់កំណត់ព្រឹត្តិការណ៍នៅពេលដែលចុចលើធាតុ ។ តម្លៃនៃ onclick គឺជាកូដ Javascript ។
នៅក្នុងវង់ក្រចកនៃ alert() គឹជាអ្វីដែលត្រូវបង្ហាញនៅក្នុងប្រអប់ដែលត្រូវលេចចេញមក ។

Code All The Things

Collection of code goodies for beginner dev 🤓💻

មេរៀន HTML

HTML អនុវត្តជាក់ស្ដែង

HTML កំណត់ចំណងជើង

HTML ក្បាលរឿង

HTML កថាខណ្ឌ

មេរៀន CSS

CSS អនុវត្តជាក់ស្ដែង

CSS នៅក្នុង <style>

មេរៀន Javascript

Javascript អនុវត្តជាក់ស្ដែង

Javascript នៅក្នុង <script>

Javascript សញ្ញាចំណុចក្បៀស

Javascript វិចារណ៍

Javascript - alert()

Javascript - អថេរ

Javascript - បង្កើតអថេរ

KHCODE

Code All The Things

Collection of code goodies for beginner dev 🤓💻

មេរៀន HTML

HTML អនុវត្តជាក់ស្ដែង

HTML កំណត់​ចំណងជើង

HTML ក្បាលរឿង

HTML កថាខណ្ឌ

មេរៀន CSS

CSS អនុវត្ត​ជាក់ស្ដែង

CSS នៅ​ក្នុង <style>

មេរៀន Javascript

Javascript អនុវត្ត​ជាក់ស្ដែង

Javascript នៅ​ក្នុង <script>

Javascript សញ្ញាចំណុច​ក្បៀស

Javascript វិចារណ៍

Javascript - alert()

Javascript - អថេរ

Javascript - បង្កើត​អថេរ​​

HTML កំណត់ចំណងជើង

CSS អនុវត្តជាក់ស្ដែង

CSS នៅក្នុង <style>

Javascript អនុវត្តជាក់ស្ដែង

Javascript នៅក្នុង <script>

Javascript សញ្ញាចំណុចក្បៀស

Javascript - បង្កើតអថេរ