ភាសា Astro ត្រូវបានបង្កើតឡើងដោយឈរនៅលើភាសា HTML រួមផ្សំនឹងលក្ខណៈពិសេសមួយចំនួនដែលអនុញ្ញាតិអោយយើងមានការងាយស្រួលក្នុងការប្រើប្រាស់អថេរនិងក្បួនខ្នាតនៃភាសា JavaScript នៅក្នុងនោះ។ ដូចនេះ បើសិនជាយើងមានមូលដ្ឋានគ្រឹះនៃភាសា HTML យ៉ាងរឹងមាំហើយនោះ បញ្ហានឹងលែងចោទចំពោះយើងហើយនៅក្នុងការសរសេរកម្មវិធី Astro ។
ជាក់ស្តែង នៅក្នុងភាសា Astro ការប្រើប្រាស់អថេរនិងក្បួននៃភាសា JavaScript ចាំបាច់ត្រូវដាក់នៅក្នុងសញ្ញា { } ។
<!--src/pages/about.astro-->
---
const name = "Astro"
const year = 2021
function display(name, year){
const message = `កញ្ចប់ ${name} ត្រូវបានបង្កើតឡើងនៅឆ្នាំ ${year}`
return message
}
---
<p>{display(name, year)}</p>
<style>
p{
color: blue;
}
</style>
ដូចគ្នាដែរ អថេរនៃភាសា JavaScript ក៏អាចប្រើប្រាស់ជាតំលៃនៃលក្ខណៈ (attribute) របស់ធាតុ HTML ទាំងឡាយបានដែរ។
<!--src/pages/about.astro-->
---
const name = "message"
---
<p class={name}>ស្វាគមន៍មកកាន់ទំព័រ about.astro</p>
<style>
.message{
color: green;
}
</style>
ដោយហេតុថា ក្បួននៃភាសា JavaScript នៅក្នុងផ្នែក frontmatter មានតែនៅលើ server តែប៉ុណ្ណោះ ដូចនេះយើងមិនអាចប្រើប្រាស់ក្បួនទាំងនោះជាតំលៃនៃលក្ខណៈផ្សេងរបស់ធាតុ HTML បានឡើយ ជាពិសេសលក្ខណៈ onClick ពីព្រោះលក្ខណៈនេះត្រូវការតំលៃជាក្បួនដែលនឹងត្រូវដំណើរការនៅក្នុង browser នៅពេលអ្នកអានចុច។ ហើយនៅក្នុង browser ក្បួននៅក្នុងផ្នែក frontmatter លែងមានតទៅទៀតហើយ។
ក៏ប៉ុន្តែមានវិធីមួយដែលយើងអាចបញ្ជូនក្បួនជាភាសា JavaScript ទៅកាន់ browser និងផ្តល់ក្បួននោះជាតំលៃសំរាប់លក្ខណៈ onClick របស់ធាតុ HTML ទាំងឡាយបាន។
<!--src/pages/about.astro-->
---
const message = "សូមចុច"
---
<button id="button">{message}</button>
<script>
function handleClick () {
alert("ប៊ូតុងត្រូវបានចុច!")
}
document.getElementById("button").addEventListener("click", handleClick)
</script>
<style>
#button{
color: white;
background: green;
}
</style>
នៅក្នុងភាសា Astro យើងអាចប្រើប្រាស់វិធីឈ្មោះ map( ) នៅក្នុងភាសា JavaScript ក្នុងការបង្កើតធាតុ HTML មួយចំនួនចេញពីកំរង JavaScript ណាមួយបាន។
<!--src/pages/about.astro-->
---
const items = ["ស្វាយ", "ចេក", "ដូង"]
---
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>
យើងក៏អាចប្រើប្រាស់ប្រមាណសញ្ញាកត្តវិទ្យា (logical operator) និងឬប្រមាណសញ្ញាមានជំរើស (conditional operator) នៅក្នុងការជ្រើសរើសយកធាតុ HTML ទាំងឡាយបានដែរ។
<!--src/pages/about.astro-->
---
const visible = true;
---
{visible && <p>ត្រូវបានជ្រើសរើសយក!</p>}
{visible ? <p>ជំរើសទី ១!</p> : <p>បើពុំនោះសោតទេ ជំរើសទី ២!</p>}
មានរបៀបពីរយ៉ាងក្នុងការធ្វើកំណត់ពន្យល់នៅក្នុងភាសា Astro ។ របៀបទីមួយគឺការធ្វើកំណត់ពន្យល់តាមបែប HTML និងរបៀបទីពីរគឺធ្វើកំណត់ពន្យល់តាមបែប JavaScript ។
<!--src/pages/about.astro-->
---
const visible = true;
---
{/* ការប្រើប្រាស់ប្រមាណសញ្ញាកត្តវិទ្យា */}
{visible && <p>ត្រូវបានជ្រើសរើសយក!</p>}
{/* ការប្រើប្រាស់ប្រមាណសញ្ញាជ្រើសរើស */}
{visible ? <p>ជំរើសទី ១!</p> : <p>បើពុំនោះសោតទេ ជំរើសទី ២!</p>}
យើងត្រូវកត់សំគាល់ថា ការធ្វើកំណត់ពន្យល់តាមបែប HTML កំណត់ពន្យល់នោះនឹងត្រូវបញ្ជូលទៅក្នុង browser តែបើធ្វើកំណត់តាមបែប JavaScript វិញ កំណត់ពន្យល់នឹងត្រូវរំលងចោល ដោយមិនបញ្ជូលទៅក្នុង browser ឡើយ៕
