Lesson JAVASCRIPT
តើ JavaScript ជាអ្វី?
JavaScript គឺជាclient
site script មួយសម្រាប់គេហទំព័រ គឺវាមិនត្រូវការ
Server ដើម្បីធ្វើការ Compile កូដរបស់វានោះទេ វាអាចដំណើរការលើ
Browser តែម្តង។ JavaScript
គឺជាភាសាដ៏មានប្រជាប្រិយភាពមួយនៅលើប្រព័ន្ធអ៊ិនធ័រណិត និង វាដំណើរការនៅលើ
browsers ជាច្រើនដូចជា Internet explorer, Firefox, Chrome, Opera, Safari និង browsers ជាច្រើន
ផ្សេងទៀត។
តើ JavaScript អាចធ្វើអ្វីបានខ្លះ?
មានគេហទំព័ររាប់លាន បានប្រើភាសា JavaScript ដើម្បីបន្ថែមធ្វើឲ្យគេហទំព័រមានភាពទាក់ទាញ ពីសំណាក់អ្នកទស្សនា។ ក្នុងការងារដែលគេតែងតែប្រើវាច្រើនជាងគេនោះ
គឺ ប្រើដើម្បីដាក់លក្ខខ័ណ្ឌ ទៅលើការបញ្ជូលទិន្នន័យនៅលើ Form និង ចាប់យកឈ្មោះ Browser ដែលអ្នកទស្សនាកំពុងតែប្រើ។
ប្រវត្ថិរបស់ JavaScript
JavaScript ត្រូវបានបង្កើតដោយ លោក Brendan Eich ដែលបំរើការនៅក្នុងក្រុមហ៊ុន Netscape។ ដំបូង JavaScript ត្រូវបានគេបានដាក់ឈ្មោះថា Mocha ប៉ុន្តែក្រោយមក គេបានប្តូរឈ្មោះទៅជា
LiveScript។ បន្ទាប់មកទៀត ក្រុមហ៊ុន Netscape និង Sun Microsystem បានសហការគ្នា
ក្នុងការអភិវឌ្ឍន៍ LiveScript រួចក៏បានប្តូរឈ្មោះទៅជា JavaScript វិញ នៅថ្ងៃទី ៤ ខែ ឆ្នូ ឆ្នាំ ១៩៩៥ ។
២. របៀបនៃការប្រើប្រាស់ភាសា JavaScript
ការសរសេរភាសា JavaScript នៅក្នុង ទំព័រ HTML
ដើម្បីសរសេរកូដ JavaScript នៅក្នុងទំព័រ HTML គឺយើងប្រើប្រាស់ tag មួយដែលមានឈ្មោះថា <script> </script> និង ត្រូវប្រើ attribute type=”text/javascript” ។ឧទាហរណ៍
លទ្ធផល
Hello Worlddocument.write គឺជាកូដរបស់ JavaScript មួយដែលវាមាននាទីសម្រាប់ឲ្យយើងអាចសរសេរអត្ថបទផ្សេងៗសម្រាប់ បង្ហាញនៅលើ Browser ។
របៀបសរសេរកូដ JavaScript ជាមួយនឹង Browser ចាស់ៗ
Browser ចាស់ៗដែលមិនអាចដំណើរការកូដរបស់ JavaScript នោះវានឹងបង្ហាញកូដទាំងនោះទៅលើ Browser។ ដើម្បីការពារកុំឲ្យវាបង្ហាញ យើងគួរតែប្រើប្រាស់សញ្ញាអត្ថាធិប្បាយរបស់ HTML ក្តោបកូដ JavaScript។ឧទាហរណ៍
ការសរសេរកូដ JavaScript នៅខាងក្រៅ ទំព័រ HTML
ប្រសិនបើអ្នកចង់ដំណើរការកូដ JavaScript ដូចៗគ្នានៅលើទំព័រច្រើន ដោយមិនមានការសរសេរ កូដដដែលៗគ្រប់ទំព័រ អ្នកអាចសរសេរកូដ JavaScript ទាំងនោះនៅក្នុង file ដាច់ដោយឡែកមួយ ដោយ file នោះ មាន extension .js ។ចំណាំ៖
នៅក្នុង file JavaScript មិនអាចមាន <script> បានឡើយ។ ចំពោះ ទំព័រណាមួយ បើសិនជាចង់ប្រើប្រាស់ JavaScript file នោះ ត្រូវប្រើប្រាស់ tag <script> ដោយមាន attribute src ហើយតំលៃរបស់ attribute src គឺជាឈ្មោះរបស់ JavaScript file។
Single Comment
Single Comment យើងប្រើសម្រាប់ពិពណ៌នាកូដរបស់យើង ប្រសិនបើ Comment របស់យើងមានតែ មួយបន្ទាប់។ ដើម្បី Comment យើងប្រើសញ្ញា // ។ឧទាហរណ៍
Multiline Comment
យើងប្រើ Multiline Comment ដើម្បីពិពណ៌នាកូដដែលការពិពណ៌នារបស់យើង មានច្រើនបន្ទាត់ ឬ ធ្វើការបិទកូដកុំឲ្យដំណើរការជាដើម។ ដើម្បី Comment យើងចាប់ផ្តើមដោយសញ្ញា /* និង បញ្ចប់ដោយ សញ្ញា */ ។ឧទាហរណ៍
៤. អញ្ញាត
ការប្រកាសអញ្ញាត
ដើម្បីធ្វើការប្រកាសអញ្ញាតនៅក្នុង JavaScript គឺយើងប្រើប្រាស់ var នៅពីមុខ អញ្ញាតរបស់យើង។ទំរង់ទូទៅ
var variable_name;
ច្បាប់នៃការដាក់ឈ្មោះអញ្ញាត
- ឈ្មោះរបស់អញ្ញាត គឺប្រកាន់តួអក្សរ ( n និង N គឺខុសគ្នា)- ឈ្មោះរបស់អញ្ញាត គឺត្រូវតែចាប់ផ្តើមដោយ អក្សរ , សញ្ញាត unserscore ( _ ) ឬ សញ្ញាត ដុល្លា ( $ ) ។
ឧទាហរណ៍
៥. Conditional Statement
If Statement
ទំរង់ទូទៅif(condition){
code to be execute if condition is true
}ឧទាហរណ៍
if ... else statement
ទំរង់ទូទៅif(condition){
code to be execute if condition is true
}
else{
code to be execute if condition is not ture
}ឧទាហរណ៍
៦. Loop Statement
For Loop Statement
ទំរង់ទូទៅfor (var=startvalue;var<=endvalue;var=var+increment){
code to be executed
}ឧទាហរណ៍
while loop Statement
ទំរង់ទូទៅwhile(var<=endvalue){
code to be execute
}ឧទាហរណ៍
Do while loop Statement
ទំរង់ទូទៅdo{
code to be executed
}
while (var<=endvalue);ឧទាហរណ៍
៧. Flow Control Statement
break statement
break statement មាននាទីសម្រាប់បញ្ចប់ដំណើរការរបស់ Loop ហើយដំណើរការកូដនៅ statement បន្ទាប់ ឬ មាននាទីសម្រាប់ចាកចេញពី Loop។ឧទាហរណ៍
Continue Statement
Continue Statement គឺជាប្រើដើម្បីបញ្ចប់ដំណើរកូដនៅក្នុង Loop ដែលស្ថិតនៅខាងក្រោមវា រួចទៅ ដំណើរការ Loop បន្តទៀត។ឧទាហរណ៍
Switch Statement
ទំរង់ទូទៅswitch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}ឧទាហរណ៍
Alert Box
Alert Box ជាធម្មតាគេប្រើវាសម្រាប់បង្ហាញព័ត៌មានផ្សេងៗដល់អ្នកទស្សនា ដែលវាមានប៊ូតុង OK ដើម្បីឲ្យអ្នកទស្សនាចុច។ទំរង់ទូទៅ
alter(“sometext”);ឧទាហរណ៍
លទ្ធផល
Confirm Box
Confirm Box ជាធម្មតាគេប្រើសម្រាប់បញ្ជាក់ទៅដល់អ្នកទស្សនា ដើម្បីធ្វើការយល់ព្រមអ្វីមួយ។ Confirm Box មានប៊ូតុងពីរគឺ ប៊ូតុង OK និង ប៊ូតុង Cancel។ទំរង់ទូទៅ
confirm(“sometext”);ឧទាហរណ៍
លទ្ធផល
៩. Function
របៀបបង្កើត Function
ទំរង់ទូទៅfunction function_name(var1,var2,...,varN){
function definition
}ឧទាហរណ៍
ឧទាហរណ៍ខាងលើនេះ យើងមាន function មូយឈ្មោះថា welcome()។ function នេះវាដំណើរការ នៅពេលដែលយើងចុចលើប៊ូតុង Click me។ ដើម្បីឲ្យយើងដំណើរការ function នៅពេលយើងចុចលើ ប៊ូតុង យើងប្រើ attribute onclick ដោយឲ្យ attribute onlick ស្មើនឹងឈ្មោះ function ដែលយើងចង់ ដំណើរការ។
function មាន return តំលៃ
ឧទាហរណ៍ជីវិតរបស់អញ្ញាតនៅក្នុង JavaScript
ប្រសិនបើយើងប្រកាស អញ្ញាតមួយនៅក្នុង function នោះវាអាចប្រើបានតែនៅក្នុង Function នោះទេ វាមិនអាចយកទៅប្រើនៅខាងក្រៅបានទេ។ នៅពេលដែលយើងចាកចេញពី Function អញ្ញាតនោះនឹងត្រូវបានបាត់បង់។ អញ្ញាតបែបនេះ គេហៅវាថា Local Variable។ប្រសិនបើយើងប្រកាស អញ្ញាតមួយនៅខាងក្រៅ function នោះវាអាចប្រើនៅក្នុង ទំព័រ របស់យើង ទាំងមូល។ អញ្ញាតបែបនេះ គឹហៅថា Global Variable។ ជីវិតរបស់អញ្ញាតជា Global ទាល់តែទំព័រត្រូវ បានបិទ ទើបវាបាត់ទៅដែ
១០. Event
Event គឺជាសកម្មភាពដែលត្រូវបានចាប់បានដោយ JavaScript។ កាលណាយើងប្រើ JavaScript នោះយើងមានលទ្ធភាពក្នុងការបង្កើតគេហទំព័រលក្ខណៈជា Dynamic។ឧទាហរណ៍ខ្លះក្នុងការប្រើប្រាស់ Event
- ការចុច Mouse- ការ Load រូបភាព ឬ ទំព័រ
- ការជ្រើសរើស Input field នៅក្នុង HTML form
- ការ submit HTML Form
Event onLoad និង onUnload
Event onLoad និង onUnload កើតឡើងនៅពេលដែលអ្នកទស្សនាចូល ឬ ចាកចេញពីទំព័រ។ onLoad event ជាធម្មតាគេប្រើវាដើម្បីពិនិត្យមើលលើ ប្រភេទ និង ជំនាន់ របស់ Browser។Event ទាំងពីរនេះ ជាធម្មតាគេប្រើដើម្បីធ្វើការទាក់ទងទៅនឹង Cookie ដែលត្រូវបានកំណត់នៅពេល អ្នកទស្សនាចូល និង ចាកចេញពីទំព័រ។
នៅមេរៀនបន្ទាប់ពួកយើងនឹងបង្ហាញពីការប្រើប្រាស់ Event ទាំងពីរនេះបន្ថែមទៀត។
Event onChange, onBlur និង onFocus
Event ទាំងបីខាងលើនេះ គឺគេប្រើបញ្ជូលគ្នាដើម្បីដាក់លក្ខខ័ណ្ឌទៅលើការបញ្ជូលទិន្នន័យនៅក្នុង Form។Event onChange កើតឡើងនៅពេលដែលធាតុរបស់ Form មានការផ្តាស់ប្តូរតម្លៃ។
Event onBlur កើតឡើងនៅពេលដែលយើងចាកចេញពីធាតុណាមួយ ដូចជាចាកចេញពី Text Box ជាដើម។
Event onFocus កើតឡើងនៅពេលដែលយើងចុចលើធាតុណាមួយរបស់ form, window ឬ frame។
ឧទាហរណ៍
តាមឧទាហរណ៍ខាងលើ នៅពេលដែលយើងមានផ្តាស់ប្តូរតំលៃនៅលើ Text Box email នោះ function checkEmail() នឹងដំណើរការ។
Event onSubmit
onSubmit ត្រូវបានគេប្រើដើម្បីធ្វើការកំណត់លក្ខខ័ណ្ឌទៅលើការបញ្ជូលទិន្នន័យ មុននឹងធ្វើការ បញ្ជូនទៅទិន្នន័យ។ឧទាហរណ៍
តាមឧទាហរណ៍ខាងលើ នៅពេលដែលយើងចុចលើប៊ូតុង Submit នោះ function checkForm នឹង ដំណើរការពិនិត្យមើលថាតើការបញ្ជូលបានត្រឹមត្រូវហើយឬនៅ ។
Event onMouseOver, onMouseOut
Event onMouseOver និង onMouseOut ជាទូទៅគេប្រើវាដើម្បីបង្កើត Rollover ប៊ូតុង។Event onMouseOver នៅពេលដែលយើងយក Mouse ទៅដាក់ពីលើ ចំណែកឯ onMouseOut កើត ឡើងនៅពេលដែលយើងដក Mouse ចេញ។
ឧទាហរណ៍
តាមឧទាហរណ៍ខាងលើ នៅពេលដែលយើងយក Mouse ទៅដាក់លើតំណភា្ជប់ Click Me ! នោះ វានឹងបង្ហាញ Popup Box។
Event onClick
Event onClick កើតឡើងពីពេលយើងយក Mouse ចុចលើធាតុណាមួយ នៅលើ Screen។ឧទាហរណ៍
១១. Try...Catch statement
ក្នុងមេរៀននេះ យើងនឹងរៀនពីការចាប់ភាព Error របស់ JavaScript ដោយយើងមិនបានដឹងជា មុន។ វាមានសារៈសំខាន់ណាស់សំរាប់អ្នកបង្កើតគេហទំព័រ ព្រោះការចាប់ភាព Error នេះបានលុប បំបាត់ការបង្ហាញ ផ្ទាំង Message Error ដល់អ្នកទស្សនា។ try...catch statement អាចឲ្យយើងអាចចាប់រក Error នៅពេលដែលកូដកំពុងតែដំណើរការ។ Try block មាននាទីផ្ទុក កូដ សម្រាប់ធ្វើការអនុវត្ត ចំណែកឯ catch statement មាននាទីផ្ទុកដើម្បីអនុវត្ត នៅពេលដែលយើងកូដនៅក្នុង Try block មានភាព Error។ទំរង់ទូទៅ
try{
//Run some code here
}
catch(err){
//Handle errors here
}ឧទាហរណ៍
តាមឧទាហរណ៍ខាងលើ នៅក្នុង function message() យើងមាន block try មួយដែលមានភាព Error ដោយការសរសេរ alert ខុស។ ដូចនេះវានឹងមិនដំណើរការកូដនៅក្នុង try block ទេ គឺវាអនុវត្តនៅក្នុង catch block។
ការបង្កើត Array
ដើម្បីធ្វើការបង្កើត Array យើងមានបីរបៀបយ៉ាងដូចខាងក្រោម៖- របៀបទីទី១ : បង្កើត Array ទទេមួយ បន្ទាប់មកទើប Assignment តម្លៃតាមក្រោយ
var khtemple = new Array();
khtemple[0] = “Ankgor Wat”;
khtemple[1] = “Bayon”;
khtemple[2] = “Preah Vihear”;- របៀបទី២ : បញ្ជូលតម្លៃឲ្យ Array នៅពេលប្រកាស
var khtemple = new Array(“Ankgor Wat”,”Bayon”,”Preah Vihear”);- របៀបទី៣ :
var khtemple = [“Ankgor Wat”,”Bayon”,”Preah Vihear”];
ការបង្ហាញ Array
ឧទាហរណ៍តាមឧទាហរណ៍ខាងលើ យើងអាចបង្ហាញធាតុ Array តាមរយៈ index ហើយបើសិនជាយើងមិនដាក់ index នោះវានឹងបង្ហាញ ធាតុទាំងអស់របស់ Array។
ការបង្កើត Array ដែលមាន index ជា string
ឧទាហរណ៍នៅក្នុង JavaScript យើងក៏អាចប្រើ String ធ្វើជា index របស់ array បានដែរ។ តាមឧទាហរណ៍ខាងលើ យើងឃើញថា ដើម្បីបង្ហាញ ធាតុនិមួយៗរបស់ array យើងអាចបង្ហាញតាមប្រើឈ្មោះ Array រួចប្រើសញ្ញា dot រួចឈ្មោះ index របស់វាបានទៀតផង។
១៣. Object
ការបង្កើត Object
ឧទាហរណ៍តាមឧទាហរណ៍ខាងលើ យើងមាន Object មួយឈ្មោះថា studentObj និង មាន property បីគឺ firstname, lastname និង class។
ការបន្ថែម Method ទៅឲ្យ Object
ទំរង់ទូទៅobjName.method_name = function_name;ដើម្បីបន្ថែម method មួយទៅឲ្យ object យើងត្រូវបង្កើត method មួយជាមុនសិនរួចទើបធ្វើការបន្ថែម ដូចទំរង់ខាងលើ។
ការបង្កើត Object តាមទំរង់ Alternative
ឧទាហរណ៍ការបង្កើត Object តាម Constructor
ឧទាហរណ៍តាមឧទាហរណ៍ខាងលើ ដើម្បីធ្វើការបង្កើត Object តាមរយៈ constructor នោះ យើងត្រូវបង្កើត function មួយរួចទើបបង្កើត Object តាម function នោះ
១៤. String Object
String គឺជា object មានស្រាប់នៅក្នុង JavaScript ហើយនៅខាងក្រោមនេះ យើងនឹងបង្ហាញពី property និង method ខ្លះៗរបស់ string ដែលគេប្រើញឹកញាប់ជាងគេ។String Property
Length : គឺជា property មានតួនាទីសម្រាប់ទាញយកចំនួនតូរបស់ string។ឧទាហរណ៍
String Methods
toUpperCase / toLowerCase : មានតួនាទីសម្រាប់បំលែង string ទៅជាអក្សរធំ ឬ តូច។ឧទាហរណ៍
substr( start, length) : បោះនូវ string ដែលមានទីតាំង start ចំនួន length បើមិនមាន length វាយក ដល់ទីតាំងចុងក្រោយគេបង្អស់។ ទីតាំងរបស់ string គិតចាប់ពីលេខ 0។
ឧទាហរណ៍
concat(string1,...) : មានតួនាទីសម្រាប់តភ្ជាប់ string ជាមួយនឹង string ។
ឧទាហរណ៍
១៥. Date Object
Object
Date Object ត្រូវបានគេប្រើជាមួយនឹងថ្ងៃទី និង ម៉ោង។ យើងបង្កើតវាដោយប្រើ Date() constructor។យើងមានវិធី ៤ របៀបដើម្បីបង្កើត Date Object
សំគាល់:
គ្រប់ចំនួន ប៉ារ៉ាម៉ែតទាំងអស់ជា Optional ដូចនេះយើងអាច ដាក់ចំនួនប៉ារ៉ាម៉ែតដែលយើង ចង់បាន។
dateString អាចមានដូចជា៖
Thu Sep 11 2008
Thursday, September 11, 2008
Thursday, September 11, 2008 5:24:39 PM
5:24:39 PMឧទាហរណ៍
Date Method
getDate() : មាននាទីបោះថ្ងៃទី (ពី១ ដល់ 31)getDay() : មាននាទីបោះចំនួនសប្តាហ៍ (ពី 0 ដល់ 6)
getFullYear() : មាននាទីបោះឆ្នាំដែលមាន៤ខ្ទង់
getMonth() : មាននាទីបោះខែជាលេខ (ពី ០(មករា) ដល់ ១១(ធ្នូ) )
getHours() : មាននាទីបោះម៉ោង (ពី ០ ដល់ ១១)
getMinutes() : មាននាទីបោះនាទី (ពី ០ ដល់ ៥៩)
getSecondes() : មាននាទីបោះវិនាទី (ពី ០ ដល់ ៥៩)
getTime( ) : បោះចំនូនវិនាទី ពីឆ្នាំ១៩៧០ ខែ មករា ថ្ងៃទី១ ម៉ោង ០ មកដល់ Date Object របស់យើង
ឧទាហរណ៍
លទ្ធផល
Thu Jan 05 2012 11:42:53 GMT+0700 (SE Asia Standard Time)
Date: 5
Day: 4
Year: 2012
Month: 0
Hour: 11
Minute: 42
Second: 53
១៦. Browser Detection
ក្នុងមេរៀននេះ យើងនឹងរៀនពីរបៀបចាប់យកឈ្មោះ Browser និង ជំនាន់។ ប៉ុន្តែយើងអាច ធ្វើបានក្នុងករណីណាដែល Browser នោះអនុញ្ញាតឲ្យកូដ JavaScript និង Browser ថ្មីតែប៉ុណ្ណោះ។ដើម្បីឲ្យគេហទំព័ររបស់យើងអាចចាប់យកព័ត៌មានផ្សេងៗនៃ Browser របស់អ្នកទស្សនាបែបនេះ យើងត្រូវប្រើ Navigator Object។ Navigator Object ផ្ទុកព័ត៌មានអំពី ឈ្មោះ, ជំនាន់ និង ផ្សេងៗទៀត នៃ Browser របស់អ្នកទស្សនា។ ខាងក្រោមនេះគឺជា properties របស់ Navigator Object
appName : មាននាទីចាប់យកឈ្មោះរបស់ Browser
appVersion : មាននាទីចាប់យកជំនាន់របស់ Browser
ឧទាហរណ៍
លទ្ធភាព
// Open with Mozila
Browser name: Netscape
Browser version: 5
// Open with Internet Explorer
Browser name: Microsoft Internet Explorer
Browser version: 4
១៧. Form Validation
ក្នុងមេរៀននេះ យើងនឹងរៀនពីការកំណត់លក្ខខ័ណ្ឌក្នុងការបញ្ជូលតម្លៃទៅក្នុង Form នឹងមុនធ្វើការ បញ្ជូលទិន្នន័យទៅកាន់ Server។Required Field
តាមឧទាហរណ៍ខាងលើ នៅពេលដែលយើងចុចលើប៊ូតុង Submit នោះវានឹងពិនិត្យលក្ខខ័ណ្ឌ ថាតើ យើងបានបំពេញនៅក្នុង Text Field ដែរឬទេ ប្រសិនបើមិនបានបំពេញ វានឹងលោត Popup Box បង្ហាញ។
No comments:
Post a Comment