Study Javascript

JavaScript គឺជាអ្វី?
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:

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

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

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

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

Follow Tools-> Preferencesfrom the menu
Select Advanced option from the dialog box
Select Content from the listed items
Select Enable JavaScript checkbox
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>

លទ្ធផលចេញជា

JavaScript 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>

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>

By Devid

IT BTB

Search This Blog

Study Javascript

Comments