នៅក្នុងឯកសារ Astro មួយ បើសិនជាមានធាតុ <script> នៅក្នុងនោះ កម្មវិធី Astro នឹងប្រមូលកូដនៅក្នុងនោះព្រមទាំងកូដដែលនាំចូលមកផង មកចងក្រងជាកូដ JavaScript មួយបញ្ចូលទៅក្នុងផ្នែកក្បាលនៃគេហទំព័រ នៅត្រង់កន្លែងដែលមានតាក់ <head> នៅក្នុងនោះ។ កូដនោះនឹងមានទំរង់ដូចខាងក្រោម ហើយនឹងត្រូវបញ្ជូនទៅកាន់ browser ។
<script type="module" src="..."></script>
បើយើងមិនចង់អោយមានការប្រមូលចងក្រងកូដដូចខាងលើនេះទេ យើងត្រូវប្រើ is:inline។
<script is:inline>
// Will be rendered into the HTML exactly as written!
// Local imports are not resolved and will not work.
// If in a component, repeats each time the component is used.
</script>
កូដនៃភាសា JavaScript អាចត្រូវសរសេរនៅក្នុងឯកសារផ្សេងៗ នៅក្នុងថតណាមួយនៅក្នុងថត src ។ កូដនោះអាចត្រូវយកមកប្រើតាមរយៈតាក់ <script> ។
<!-- relative path to script at `src/scripts/local.js` -->
<script src="../scripts/local.js"></script>
<!-- also works for local TypeScript files -->
<script src="./script-with-types.ts"></script>
កម្មវិធី Astro នឹងប្រមូលចងក្រងកូដខាងលើនេះ បញ្ចូលទៅក្នុងតាក់ <head> នៅផ្នែកក្បាលនៃគេហទំព័រ។ ក៏ប៉ុន្តែ បើសិនជាកូដនៃភាសា JavaScript ស្ថិតនៅក្នុងឯកសារមិនស្ថិតនៅក្នុងថត src ការយកកូដទាំងនោះមកប្រើ ត្រូវធ្វើឡើងតាមរយៈធាតុ <script> ដោយមាន is:inline នៅក្នុងនោះ។
<!-- absolute path to a script at `public/my-script.js` -->
<script is:inline src="/my-script.js"></script>
<!-- full URL to a script on a remote server -->
<script is:inline src="https://my-analytics.com/script.js"></script>
តាមធម្មតា កូដជាភាសា JavaScript នៅក្នុង frontmatter នៅក្នុងឯសារ Astro ដំណើរការតែនៅលើ server តែប៉ុណ្ណោះ។ ដូចនេះនៅក្នុង browser អថេរទាំងឡាយដែលត្រូវបានបង្កើតនៅក្នុង frontmatter នឹងលែងមានតទៅទៀតហើយ។ ក៏ប៉ុន្តែ យើងមានមធ្យោបាយមួយ ដើម្បីបញ្ជូនអថេរទាំងនោះទៅកាន់ browser ។
<!--src/pages/index.astro-->
---
const message = "ស្វាគមន៍មកកាន់ទំព័រដើម"
---
<div data-message={message}>
<button>Welcome</button>
</div>
<script>
const message = document.querySelector('div').getAttribute("data-message")
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert(message);
})
</script>
ការបញ្ជូនអថេរពី frontmatter ទៅកាន់ browser ត្រូវធ្វើឡើងដោយការផ្តល់អថេរទាំងនោះជាតំលៃសំរាប់សម្បត្តិ data-* ។ នៅក្នុង browser យើងអាចស្រង់យកអថេរនោះតាមវិធី getAttribute("data-*") ៕
