Posts

Create Pop up Form in JavaScript

Image
  <!DOCTYPE html > <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Pop-Up Form </title> <style> /* Basic styles for the page */ body { font-family : Arial , sans-serif ; margin : 0 ; padding : 0 ; box-sizing : border-box ; } /* Overlay background */ .modal-overlay { display : none ; position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : rgba( 0 , 0 , 0 , 0.5 ); z-index : 1000 ; } /* Modal box */ .modal { position : fixed ; top : 50% ; left : 50% ; transform : translate( -50% , -50% ); background :...
Post a Comment
Read more

JavaScript Calendar

Image
<!DOCTYPE html > <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> ប្រតិទិនប្រចាំឆ្នាំ </title> <style> .calendar-container { display : flex ; flex-wrap : wrap ; justify-content : center ; gap : 20px ; } .month { width : 280px ; border : 1px solid #ddd ; border-radius : 5px ; padding : 10px ; text-align : center ; font-family : Arial , sans-serif ; } table { border-collapse : collapse ; width : 100% ; margin-top : 10px ; } th , td { border : 1px solid #ddd ; padding : 5px ; text-align : center ; } th { background-...
Post a Comment
Read more

JavaScript Loading Page

Image
  <!DOCTYPE html > <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Loading Page </title> <style> body { margin : 0 ; display : flex ; justify-content : center ; align-items : center ; height : 100vh ; background-color : #ffffff ; color : #0039d7 ; font-family : Arial , sans-serif ; } .loader { text-align : center ; } .progress-bar { width : 800px ; height : 40px ; background-color : #ffffff ; border-radius : 20px ; margin-top : 20px ; box-shadow : inset 0 0 10px #000000 ; } .progress-fill { height : 40px ; width : 0% ; background-color : #4caf50 ; border-radius : 20px ; transition : width 0.2s ; } .percentage { font-size : 34px ; ...
Post a Comment
Read more

JavaScript DOM

Image
DOM Document Object Model គឺជា Programming Interface មួយដែលគេប្រើប្រាស់សម្រាប់ធ្វើការជាមួយ HTML ឱ្យមានលក្ខណៈ Dynamic ដែលអាចគ្រប់គ្រងទៅលើផ្នែកផ្សេងៗរបស់ដូចជា Element, Attribute និង Text ជាដើម ។ ដើម្បីធ្វើការកែប្រែ HTML Element គេអាចធ្វើបានតាមរយៈវិធីច្រើនខុសៗគ្នាមានដូចជាតាម ID, Class, Tag ឬ Form ជាដើម ។ ការចាប់យកតម្លៃ Element តាមឈ្មោះ ID ដើម្បីទាញតម្លៃចេញពី HTML Tag ណាមួយតាមរយៈឈ្មោះ ID ត្រូវសរសេរតាមទម្រង់ដូចខាងក្រោម៖ សម្រាប់ Element ធម្មតា ----------------------------------------------------------------------------------------- document.getElementById(" idName "). textContent/outerHTML ; ----------------------------------------------------------------------------------------- textContent ប្រើសម្រាប់ចាប់យកតែអក្សរចេញពី Element  outerHTML ចាប់យកទាំងអក្សរ និងកូដ HTML ទាំងមូល  សម្រាប់ Form Element ----------------------------------------------------------------------------------------- document.getElementById(" idName "). value ; -------------------------------------------...
Post a Comment
Read more

Events នៅក្នុង JavaScript

Image
HTML Event គឺជាអ្វីដែលត្រូវកើតឡើងចំពោះ HTML Element។ នៅពេលដែល JavaScript ត្រូវបានប្រើក្នុង HTML Page វាអាចមានទំនាក់ទំនងជាមួយ Event ទាំងអស់នេះ ។  HTML Event អាច Browser ជាអ្នកធ្វើ ឬ User ជាអ្នកធ្វើ។ HTML Event មានដូចជា៖ កើតឡើងពេល Page បានដំណើរការចប់ Input Field ត្រូវបានផ្លាស់ប្តូរ និង Button ត្រូវបានចុច ។  ជាទូទៅនៅពេលដែល Event ទាំងនោះកើតឡើងយើងអាចកំណត់វាឱ្យធ្វើអ្វីមួយ។ JavaScript អាចកំណត់ឱ្យអ្នកអាចដំណើរការកូដនៅពេលបានជួប Event ណាមួយ ។ HTML Event អ្នកអាចសរសេរដោយប្រើសញ្ញា Single Quote ឬ Double Quote ក៏បាន ។ --------------------------------------------------------------------------------------- <tag event='some JavaScript' >...</tag>  <tag event="some JavaScript" >...</tag> --------------------------------------------------------------------------------------- Events ទូទៅប្រើប្រាស់ក្នុង HTML មានដូចខាងក្រោម៖ onchange កើតឡើងពេល HTML Element ត្រូវបានផ្លាស់ប្តូរ  onclick កើតឡើងពេលអ្នកប្រើប្រាស់ចុចលើ HTML Element ណាមួយ  onmouseover កើតឡើងពេលអ្...
Post a Comment
Read more

ការប្រើ function នៅក្នុង JavaScript

Image
  function គឺជាបណ្តុំនៃកូដដែលបង្កើតឡើងសម្រាប់ដំណើរការទៅលើការងារអ្វីមួយនៅពេលដែលហៅយកទៅប្រើ ។ យើងអាចប្រើប្រាស់កូដនៅក្នុង Function បានច្រើនដងនៅកន្លែងផ្សេងៗគ្នា ដោយមិនចាំបាច់សរសេរកូដដដែលៗឡើងវិញ ហើយងាយស្រួលគ្រប់គ្រងកូដ នៅពេលកែគឺនៅក្នុងកន្លែងតែមួយ ។ ក្នុងការបង្កើត Function មានពីរគឺ Function ដែលមិនប្រើ Parameter និង Function ដែលប្រើ Parameter ។ ការបង្កើត function មិនប្រើ Parameter ការបង្កើត function ដែលមិនប្រើ parameter គឺជា Function ដែលមិនតម្រូវឱ្យអ្នកបញ្ចូលតម្លៃនៅពេលហៅវាយកទៅប្រើប្រាស់នោះទេ ។ -------------------------------------------------------------------- function name(){            code execute when call function  } -------------------------------------------------------------------- ដើម្បីហៅ Function យកមកប្រើគឺហៅឈ្មោះរបស់វាដោយសរសេរ name(); ។ ការបង្កើត function ដោយប្រើ Parameter ការបង្កើត function ដែលប្រើ parameter គឺជា Function ដែលតម្រូវឱ្យអ្នកបញ្ចូលតម្លៃនៅពេលហៅវាយកទៅប្រើប្រាស់ ។ --------------------------------------------------------------...
Post a Comment
Read more

ការប្រើ while Loop ក្នុង JavaScript

Image
  While Loop ត្រួតពិនិត្យលក្ខខណ្ឌរួចដំណើរការវិលជុំនៃបណ្តុំកូដដដែលៗរហូតទាល់តែជួបលក្ខខណ្ឌមិនពិតទើបឈប់ដំណើរការ ។ --------------------------------------------------------------------------- initial value; while (condition) {            code block to be executed            increment/decrement } --------------------------------------------------------------------------- ឧទាហរណ៍៖ --------------------------------------------------------------------------- <script> var i = 1 ; while (i<= 10 ){ document.write( "លទ្ធផលនៃ while Loop ជុំទី " , i, "<br>" ); i++; } </script> --------------------------------------------------------------------------- do while Loop គឺធ្វើការស្ទើរតែដូចទៅនឹង while Loop ទាំងស្រុង គ្រាន់តែវាដំណើរការវិលជុំលើបណ្តុំកូដម្តងសិន រួចត្រួតពិនិត្យមើលលក្ខខណ្ឌ ធ្វើបែបនេះបើសិនជាជួបលក្ខខណ្ឌមិនពិតវានឹងបង្ហាញលទ្ធផលយ៉ាងហោចណាស់បានមួយជុំដែរ ។ ------------------------...
Post a Comment
Read more