មេរៀនសង្ខេប JavaScript

aJavaScript គឺជាអ្វី?
JavaScript ចាប់ផ្តើមប្រើ LiveScript ប៉ុន្តែបានផ្លាស់ប្តូរឈ្មោះរបស់ Netscape ដោយបានបង្កើតដោយកម្មវិធី Java អភិវឌ្ឃន៍ទៅជា JavaScript ផងដែរ។ JavaScript ដើម្បីធ្វើឱ្យរូបរាងដំបូងរបស់ខ្លួននៅលើ Netscape 2.0 នៅក្នុងឆ្នាំ 1995 ជាមួយនឹង LiveScript ។

១-  មេរៀន JavaScript Syntax
<script> ជាកម្មវិធីកម្មវិធីរុករកបណ្ដាញចាប់ផ្តើមការបកស្រាយទាំង អស់ អត្ថបទ រវាងស្លាកទាំងនេះជាមួយ ស្គ្រីប។ Syntacx សាមញ្ញដូចខាងក្រោម:

<script ...>
  JavaScript code
</script>

ដូច្នេះ JavaScript នឹងមានដូចជា:

<script language="javascript" type="text/javascript">
  JavaScript code
</script>

JavaScript Script ដំបូង
ឧទាហរណ៍ print ចេញ”Hello World”

<html>
<body>
<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>
</body>
</html>

ប្រើ Semicolons

<script language="javascript" type="text/javascript">
<!--
  var1 = 10
  var2 = 20
//-->
</script>

But when formatted in a single line as follows, the semicolons are required:

<script language="javascript" type="text/javascript">
<!--
  var1 = 10; var2 = 20;
//-->
</script>

Comments នៅក្នុង JavaScript:
ឧទាហរណ៍

<script language="javascript" type="text/javascript">
<!--

// This is a comment. It is similar to comments in C++

/*
 * This is a multiline comment in JavaScript
 * It is very similar to comments in C Programming
 */
//-->
</script>

២-  មេរៀន  JavaScript ក្នុង Browsers

JavaScript in Internet Explorer: Here are simple steps to turn on or turn off JavaScript in your Internet Explorer:

  1. Follow Tools-> Internet Options from the menu
  2. Select Security tab from the dialog box
  3. Click the Custom Level button
  4. Scroll down till you find Scripting option
  5. Select Enable radio button under Active scripting
  6. Finally click OK and come out

JavaScript in Firefox: Here are simple steps to turn on or turn off JavaScript in your Firefox:

  1. Follow Tools-> Optionsfrom the menu
  2. Select Content option from the dialog box
  3. Select Enable JavaScript checkbox
  4. Finally click OK and come out

JavaScript in Opera: Here are simple steps to turn on or turn off JavaScript in your Opera:

  1. Follow Tools-> Preferencesfrom the menu
  2. Select Advanced option from the dialog box
  3. Select Content from the listed items
  4. Select Enable JavaScript checkbox
  5. Finally click OK and come out

Non-JavaScript Browsers:

<html>
<body>

<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>

<noscript>
  Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>

៣  – មេរៀន  JavaScript នៅក្នុង HTML File

  • Script in <head>…</head> section.
  • Script in <body>…</body> section.
  • Script in <body>…</body> and <head>…</head> sections.
  • Script in and external file and then include in <head>…</head> section.

JavaScript in <head>…</head> section:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

JavaScript in <body>…</body> section:

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>

លទ្ធផលចេញជា

Advertisements
Hello World
This is web page body

JavaScript in <body> and <head> sections:

You can put your JavaScript code in <head> and <body> section altogether as follows:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

លទ្ធផលចេញជា

aJavaScript in External File :
example to show how you can include an external JavaScript file in your HTML code using script tag and its src attribute:

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

៤-  មេរៀន JavaScript  អេថេរ និងប្រភេទទិន្នន័យ  Data Types
JavaScript អនុញ្ញាតលោកអ្នកធ្វើការជាមួយប្រភេទ  data types:

  • Numbers ឧ 123, 120.50 etc.
  • Strings of text ឧ “This text string” etc.
  • Boolean ឧ true ឬ false

JavaScript អេថេរ Variables:

<script type="text/javascript">
<!--
var money;
var name;
//-->
</script>
You can also declare multiple variables with the same var keyword as follows:
<script type="text/javascript">
<!--
var money, name;
//-->
</script>

JavaScript Variable Scope:

<script type="text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
   var myVar = "local";  // Declare a local variable
   document.write(myVar);
}
//-->
</script>

JavaScript Variable Names:
JavaScript Reserved Words:

stract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with

៥-   មេរៀន ប្រមាណវិធី JavaScript Operators

–  ប្រមាណវិធី លេខ Arithmetic Operators
–   ប្រមាណវិធី ធៀប Comparision Operators
–   ប្រមាណវិធី Logical (or Relational) Operators
–   ប្រមាណវិធី Assignment Operators
–  ប្រមាណវិធី លក្ខខ័ណ្ឌ Conditional OperatorsThe Arithmatic Operators:

ប្រមាណវិធី ការអធិប្បាយ ឧទាហរណ៍
+ Adds two operands A + B will give 30
Subtracts second operand from the first A – B will give -10
* Multiply both operands A * B will give 200
/ Divide numerator by denumerator B / A will give 2
% Modulus Operator and remainder of after an integer division B % A will give 0
++ Increment operator, increases integer value by one A++ will give 11
Decrement operator, decreases integer value by one A– will give 9

ប្រមាណវិធី Comparison Operators:

ប្រមាណវិធី ការអធិប្បាយ ឧទាហរណ៍
== Checks if the value of two operands are equal or not, if yes then condition becomes true. (A == B) is not true.
!= Checks if the value of two operands are equal or not, if values are not equal then condition becomes true. (A != B) is true.
> Checks if the value of left operand is greater than the value of right operand, if yes then condition becomes true. (A > B) is not true.
< Checks if the value of left operand is less than the value of right operand, if yes then condition becomes true. (A < B) is true.
>= Checks if the value of left operand is greater than or equal to the value of right operand, if yes then condition becomes true. (A >= B) is not true.
<= Checks if the value of left operand is less than or equal to the value of right operand, if yes then condition becomes true. (A <= B) is true.

ប្រមាណវិធី Logical Operators:

ប្រមាណវិធី ការអធិប្បាយ ឧទាហរណ៍
&& Called Logical AND operator. If both the operands are non zero then then condition becomes true. (A && B) is true.
|| Called Logical OR Operator. If any of the two operands are non zero then then condition becomes true. (A || B) is true.
! Called Logical NOT Operator. Use to reverses the logical state of its operand. If a condition is true then Logical NOT operator will make false. !(A && B) is false

ប្រមាណវិធី Assignment Operators:

ប្រមាណវិធី ការអធិប្បាយ ឧទាហរណ៍
= Simple assignment operator, Assigns values from right side operands to left side operand C = A + B will assigne value of A + B into C
+= Add AND assignment operator, It adds right operand to the left operand and assign the result to left operand C += A is equivalent to C = C + A
-= Subtract AND assignment operator, It subtracts right operand from the left operand and assign the result to left operand C -= A is equivalent to C = C – A
*= Multiply AND assignment operator, It multiplies right operand with the left operand and assign the result to left operand C *= A is equivalent to C = C * A
/= Divide AND assignment operator, It divides left operand with the right operand and assign the result to left operand C /= A is equivalent to C = C / A
%= Modulus AND assignment operator, It takes modulus using two operands and assign the result to left operand C %= A is equivalent to C = C % A

ប្រមាណវិធី Conditional Operator (? 🙂

ប្រមាណវិធី ការអធិប្បាយ ឧទាហរណ៍
? : Conditional Expression If Condition is true ? Then value X : Otherwise value Y

The typeof Operator

ប្រភេទ String Returned by typeof
Number “number”
String “string”
Boolean “boolean”
Object “object”
Function “function”
Undefined “undefined”
Null “object”

៦-  មេរៀន ការប្រកាស JavaScript if…else Statements
JavaScript ផ្គត់ផ្គង់ទម្រង់ការប្រកាស if..else statement:

  • if statement
  • if…else statement
  • if…else if… statement.

ការប្រកាស if :
Syntax:

if (expression){
   Statement(s) to be executed if expression is true
}
ឧទាហរណ៍
<script type="text/javascript">
<!--
var age = 20;
if( age > 18 ){
   document.write("<b>Qualifies for driving</b>");
}
//-->
</script>

លទ្ធផលចេញ:   Qualifies for driving

ការប្រកាស if…else statement:
Syntax:

if (expression){
   Statement(s) to be executed if expression is true
}else{
   Statement(s) to be executed if expression is false
}

ឧទាហរណ៍

<script type="text/javascript">
<!--
var age = 15;
if( age > 18 ){
   document.write("<b>Qualifies for driving</b>");
}else{
   document.write("<b>Does not qualify for driving</b>");
}
//-->
</script>

លទ្ធផលចេញ:  Does not qualify for driving

ការប្រកាស if…else if… statement:
Syntax:

if (expression 1){
   Statement(s) to be executed if expression 1 is true
}else if (expression 2){
   Statement(s) to be executed if expression 2 is true
}else if (expression 3){
   Statement(s) to be executed if expression 3 is true
}else{
   Statement(s) to be executed if no expression is true
}

ឧទាហរណ៍

<script type="text/javascript">
<!--
var book = "maths";
if( book == "history" ){
   document.write("<b>History Book</b>");
}else if( book == "maths" ){
   document.write("<b>Maths Book</b>");
}else if( book == "economics" ){
   document.write("<b>Economics Book</b>");
}else{
  document.write("<b>Unknown Book</b>");
}
//-->
</script>

លទ្ធផលចេញ:  Maths Book

៧-  មេរៀន  JavaScript Switch Case
Syntax

switch (expression)
{
  case condition 1: statement(s)
                    break;
  case condition 2: statement(s)
                    break;
   ...
  case condition n: statement(s)
                    break;
  default: statement(s)
}

ឧទាហរណ៍បង្ហាញពី loop

<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br />");
switch (grade)
{
  case 'A': document.write("Good job<br />");
            break;
  case 'B': document.write("Pretty good<br />");
            break;
  case 'C': document.write("Passed<br />");
            break;
  case 'D': document.write("Not so good<br />");
            break;
  case 'F': document.write("Failed<br />");
            break;
  default:  document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>

លទ្ធផលចេញ

Entering switch block
Good job
Exiting switch block

ឧទាហរណ៍ ករណីប្រើ if ដោយមិនប្រើ break statement:

<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br />");
switch (grade)
{
  case 'A': document.write("Good job<br />");
  case 'B': document.write("Pretty good<br />");
  case 'C': document.write("Passed<br />");
  case 'D': document.write("Not so good<br />");
  case 'F': document.write("Failed<br />");
  default:  document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>

លទ្ធផលចេញ: 

Entering switch block
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block

៨-  មេរៀន  JavaScript while Loops
The while Loop

Syntax

while (expression){
   Statement(s) to be executed if expression is true
}

ឧទាហរណ៍ មូលដ្ឋាននៃ while loop:

<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br />");
while (count < 10){
  document.write("Current Count : " + count + "<br />");
  count++;
}
document.write("Loop stopped!");
//-->
</script>

លទ្ធផលចេញ

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

The do…while Loop:
Syntax:

do{
   Statement(s) to be executed;
} while (expression);

ឧទាហរណ៍ប្រើ do…while loop.

<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br />");
do{
  document.write("Current Count : " + count + "<br />");
  count++;
}while (count < 0);
document.write("Loop stopped!");
//-->
</script>

លទ្ធផលចេញ

Starting Loop
Current Count : 0
Loop stopped!

៩-  មេរៀន  JavaScript for Loops
The for Loop

Syntax

for (initialization; test condition; iteration statement){
     Statement(s) to be executed if test condition is true
}

ឧទាហរណ៍មូលដ្ឋាននៃការប្រើ for loop:

<script type="text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 10; count++){
  document.write("Current Count : " + count );
  document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>

លទ្ធផលប្រហាក់ប្រហែល និង while loop:

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

១០-  មេរៀន  JavaScript for…in loop
Syntax

for (variablename in object){
  statement or block to execute
}

ឧទាហរណ៍

<script type="text/javascript">
<!--
var aProperty;
document.write("Navigator Object Properties<br /> ");
for (aProperty in navigator)
{
  document.write(aProperty);
  document.write("<br />");
}
document.write("Exiting from the loop!");
//-->
</script>

លទ្ធផលបង្ហាញ

Navigator Object Properties
appCodeName
appName
appMinorVersion
cpuClass
platform
plugins
opsProfile
userProfile
systemLanguage
userLanguage
appVersion
userAgent
onLine
cookieEnabled
mimeTypes
Exiting from the loop!

១១-   មេរៀន  JavaScript Loop Control
The break Statement:

ឧទាហរណ៍

<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
  if (x == 5){ 
     break;  // breaks out of loop completely
  }
  x = x + 1;
  document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

លទ្ធផលបង្ហាញ

Entering the loop
2
3
4
5
Exiting the loop!

The continue Statement:
ឧទាហរណ៍

<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
  x = x + 1;
  if (x == 5){ 
     continue;  // skill rest of the loop body
  }
  document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

លទ្ធផលបង្ហាញ

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!

ការប្រើប្រាស់ពី Labels ទៅ Control :
ឧទាហរណ៍

<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop:   // This is the label name
for (var i = 0; i < 5; i++)
{
  document.write("Outerloop: " + i + "<br />");
  innerloop:
  for (var j = 0; j < 5; j++)
  {
     if (j >  3 ) break ;         // Quit the innermost loop
     if (i == 2) break innerloop; // Do the same thing
     if (i == 4) break outerloop; // Quit the outer loop
     document.write("Innerloop: " + j + "  <br />");
   }
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

លទ្ធផលបង្ហាញ

Entering the loop!
Outerloop: 0
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 1
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 2
Outerloop: 3
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 4
Exiting the loop!

ឧទាហរណ៍

<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop:   // This is the label name
for (var i = 0; i < 3; i++)
{
   document.write("Outerloop: " + i + "<br />");
   for (var j = 0; j < 5; j++)
   {
      if (j == 3){
         continue outerloop;
      }
      document.write("Innerloop: " + j + "<br />");
   } 
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
លទ្ធផលបង្ហាញ
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!

១២-  មេរៀន  JavaScript អនុគមន៍ Functions
និយមន័យ អនុគមន៍ Functions

<script type="text/javascript">
<!--
function functionname(parameter-list)
{
  statements
}
//-->
</script>

ឧទាហរណ៍

<script type="text/javascript">
<!--
function sayHello()
{
   alert("Hello there");
}
//-->
</script>

ហៅអនុគមន៍

<script type="text/javascript">
<!--
sayHello();
//-->
</script>

អនុគមន៍ Parameters:
ឧទាហរណ៍

<script type="text/javascript">
<!--
function sayHello(name, age)
{
   alert( name + " is " + age + " years old.");
}
//-->
</script>

The return Statement:
ឧទាហរណ៍

<script type="text/javascript">
<!--
function concatenate(first, last)
{
   var full;

   full = first + last;
   return  full;
}
//-->
</script>

១៣-  មេរៀន  JavaScript Events
onclick Event Type:

ឧទាហរណ៍

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

a

onsubmit event type:
ឧទាហរណ៍

<html>
<head>
<script type="text/javascript">
<!--
function validation() {
   all validation goes here
   .........
   return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>

onmouseover and onmouseout:
ឧទាហរណ៍

<html>
<head>
<script type="text/javascript">
<!--
function over() {
   alert("Mouse Over");
}
function out() {
   alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

HTML 4 Standard Events

Event Value Description
onchange script Script runs when the element changes
onsubmit script Script runs when the form is submitted
onreset script Script runs when the form is reset
onselect script Script runs when the element is selected
onblur script Script runs when the element loses focus
onfocus script Script runs when the element gets focus
onkeydown script Script runs when key is pressed
onkeypress script Script runs when key is pressed and released
onkeyup script Script runs when key is released
onclick script Script runs when a mouse click
ondblclick script Script runs when a mouse double-click
onmousedown script Script runs when mouse button is pressed
onmousemove script Script runs when mouse pointer moves
onmouseout script Script runs when mouse pointer moves out of an element
onmouseover script Script runs when mouse pointer moves over an element
onmouseup script Script runs when mouse button is released

១៤-  មេរៀន  JavaScript – Dialog Boxes

Alert Dialog Box:

<head>
<script type="text/javascript">
<!--
   alert("Warning Message");
//-->
</script>
</head>

Confirmation Dialog Box:

<head>
<script type="text/javascript">
<!--
   var retVal = confirm("Do you want to continue ?");
   if( retVal == true ){
      alert("User wants to continue!");
	  return true;
   }else{
      alert("User does not want to continue!");
	  return false;
   }
//-->
</script>
</head>

Prompt Dialog Box:

<head>
<script type="text/javascript">
<!--
   var retVal = prompt("Enter your name : ", "your name here");
   alert("You have entered : " +  retVal );
//-->
</script>
</head>

១៥-  មេរៀន JavaScript – Void Keyword

<head>
<script type="text/javascript">
<!--
void func()
javascript:void func()

or:

void(func())
javascript:void(func())
//-->
</script>
</head>

ឧទាហរណ៍១

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript:void(alert('Warning!!!'))">Click me!</a>
</body>

ឧទាហរណ៍២

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript:void(0))">Click me!</a>
</body>

ឧទាហរណ៍៣

<head>
<script type="text/javascript">
<!--
function getValue(){
   var a,b,c;

   a = void ( b = 5, c = 7 );
   document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
//-->
</script>
</head>

១៦-  មេរៀន Javascript – បង្កើតបូតុងបោះពុម្ពទំព័រ Page Printing

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>

IT ads