BUNLEAB WEB DEVELOPMENT

Posts

Showing posts from November, 2024

Create Pop up Form in JavaScript

November 23, 2024

<!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 :...

JavaScript Calendar

November 18, 2024

<!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-...

JavaScript Loading Page

November 18, 2024

<!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 ; ...

JavaScript DOM

November 18, 2024

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 ; -------------------------------------------...

Events នៅក្នុង JavaScript

November 18, 2024

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 កើតឡើងពេលអ្...

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

November 14, 2024

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 ដែលតម្រូវឱ្យអ្នកបញ្ចូលតម្លៃនៅពេលហៅវាយកទៅប្រើប្រាស់ ។ --------------------------------------------------------------...

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

November 14, 2024

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 ទាំងស្រុង គ្រាន់តែវាដំណើរការវិលជុំលើបណ្តុំកូដម្តងសិន រួចត្រួតពិនិត្យមើលលក្ខខណ្ឌ ធ្វើបែបនេះបើសិនជាជួបលក្ខខណ្ឌមិនពិតវានឹងបង្ហាញលទ្ធផលយ៉ាងហោចណាស់បានមួយជុំដែរ ។ ------------------------...

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

November 13, 2024

for Loop ជាធម្មតាត្រូវបានប្រើសម្រាប់ដំណើរការដដែលៗនៃបណ្តុំកូដ ទៅតាមចំនួនជំហាន វិលជុំដែលបានកំណត់ជាក់លាក់មួយ ។ ---------------------------------------------------------------------------------------- for (statement 1; statement 2; statement 3) { code block to be executed } ---------------------------------------------------------------------------------------- statement 1 គឺជាតម្លៃចាប់ផ្តើមរបស់ Loop (អាចចាប់ផ្តើមពីតម្លៃធំ ឬតូច) statement 2 គឺជាលក្ខខណ្ឌកំណត់ចំនួនជុំនៃ Loop (វាឈប់ដំណើរការកូដនៅពេលដែលជួបលក្ខខណ្ឌមិនពិត បើសិនជាលក្ខខណ្ឌពិតរហូតនោះវានឹងដំណើររហូតដល់គាំង Web Browser) statement 3 គឺជាជំហានរបស់ Loop (កើនឡើង ឬថយចុះ) ឧទាហរណ៍៖ បង្កើតតារាងទៅតាមចំនួនជួរឈរ និងជួរដេកដែលបានបញ្ចូល ---------------------------------------------------------------------------------------- <!DOCTYPE html > <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0...

ការប្រើ Switch ក្នុង JavaScript

November 10, 2024

switch គឺជា Statement លក្ខខណ្ឌមួយដែលប្រើសម្រាប់ចាប់យកបណ្តុំកូដរបស់ case មួយក្នុងចំណោម case ជាច្រើនមកដំណើរការ តាមរយៈការផ្ទៀងផ្ទាត់ជាមួយ expression ដែលត្រូវគ្នា ។ --------------------------------------------------------------------------------------------- switch ( expression ) { case value1: code block break; case value2: code block break; case value3: code block break; ... default: default code block } --------------------------------------------------------------------------------------------- expression ប្រើសម្រាប់យកទៅប្រៀបធៀបជាមួយនឹង case នីមួយៗ បើត្រូវជាមួយ case ណាមួយ វានឹងចាប់យកកូដរបស់ case នោះមកដំណើរ...