ANIMATION OF CSS-PICTURES BY JAVASCRIPT

LÀM CHUYỂN ĐỘNG HÌNH VẼ CSS
Method 1- Xử dụng parseInṭ() và hình vẽ là khung chử nhật.

Explanation.

 1- Trước tiên áp dụng phương pháp CSS vẽ một hình chữ nhật có vị tŕi, kích thước và màu sắc như sau. 
Có thể thay thế chữ rectangle bằng chữ khác tuỳ ý nhưng bắt buộc phải có dấu # đứng bên cạnh.

#rectangle{position:relative;left:0px;width:100px;

height:80px;background:white;border:2px solid red;}

2- Khi nào hình vẽ theo phương pháp css hoặc svg hoặc canvas thì cần phải làm initialization để hình được lưu giử trong memory.Nếu hình không được initialized thi hình biến mất. Do đó bắt buộc phải có một  function init() và window.onload=init  như sau để  “ to get a javascript reference to the css elements stored in initialization files”

  var object;

  var x=0;

  function init(){

  object=document.getElementById('rectangle')     

  object.style.left='0px';}

  window.onload=init;

3- Muốn cho hình chuyển động thì viết :

  function doMove(){

  object.style.left=parseInt(object.style.left)+1+'px';

  t=setTimeout(doMove,20)}

  

setTimeout(doMove,20) là function cũng là method của window object dùng để call function doMove() sau khi chờ đợi một thời gian gọi là delaytime 20 milliseconds.

Nếu không ấn định delaytime thì program sẽ tự động chọn 4 millisecondṣ (ms) là số tối thiểu.

setTimeout() : calls the function only once after a specified time period elapses.

setInterval( doMove,3) : keep calling the function after every delaytime of 3 milliseconds.

setTimeout() and setInterval() are also called JavaScript Timer.

object.style.left  nghĩa là vị trí tức là position của hình được đặt bên trái viết theo phương pháp DOM (Document Object Model ).Ba chử nối kết nhau bằng dấu chấm.

Khi nói đến vị trí thì nên hiểu trong đó có hàm chứa  một con số về kích thước nên phải dùng parseInt() để lấy ra con số chứa trong đó.Ở đây đơn vị đo lường kích thước là pixel viết tắt px .
Con số +1 gọi là increment 1 pixel. 
function doMove() chỉ họat động được khi có increment chứ không phải parseInt() làm function hoạt động.

4- Muốn hình dừng lại tại vị trí lúc khởi hành là 0 pixel thì viết như sau.

function stop(){

  clearTimeout(t);object.style.left='0px';}

5- Phần còn lại sau cùng, chúng ta viết những gì muốn viêt trên bức hình và viết hai nút START và STOP .

                    --------------------------------------------------

Muốn xử dụng setInterval () thì viết lại phần dưới như sau.

 function doMove(){

 object.style.left=parseInt(object.style.left)+1+'px';

 }

 

  function start(){

  t=setInterval(doMove,3)

 }

 

  function stop(){

  clearInterval(t);object.style.left='0px';

 }

 

  setInterval(doMove,3) sẽ call function doMove(){…}

  span onclick="start()" sẽ call function start(){…}

  span onclick="stop()"  sẽ call functiom stop(){…}

Method 2- Xử dụng increment và hinh vẽ là một ellipse.

Method 3-Xử dụng increment và "0==direction, direction=1"để đổi chiều.

 

 Phần ngoài script tag viết giống như method 2 

Phần trong script tag phải viết giống như sau đây thì sẽ có animation bouncing.Nếu viết sai sẽ không có animation.

  var object;

  function init(){

  object=document.getElementById('ellipse')    

  object.style.top='50px';}                            

  window.onload=init;

   var loc=50;

  var direction=0

  function doMove(){

  object.style.top=loc;

   if(0==direction){loc+=1; if(loc>150){direction=1;}}                 

   else {loc-=1; if(loc<10){direction=0;}}

   t=setTimeout(doMove,10);}

EXPLANATION.

Trong memory chúng ta đã đặt điều kiện  var direction=0;

0 là  đi xuống theo trục y.

1 là  đi lên theo trục y.

Nếu muốn thoả mãn điều kiện đó thì viết if(0==direction) và ra lịnh function vận hành như sau :{loc+=1;if(loc>150){direction=1;}

if(0==direction){loc+=1;if(loc>150){direction=1;}}.

 

Khi vượt quá 150px, nếu chúng ta muốn đổi sang direction=1, thì function không còn theo điều kiện đã đặt ra nữa nên vận hành theo lệnh sau else.

else {loc-=1;if(loc<10){direction=0;}}

Vì đi lên nên khỏang cách trên trục y thu ngắn dần ,do đó phải viết loc-=1.Khi nào ngắn hơn 10px chung ta muốn đổi sang chiều đi xuống direction=0 .

MUỐN HÌNH DI CHUYỂN THEO TRỤC X.

Trong bảng code trên,chỗ nào có chữ top thì thay thế bằng chữ left.
Di chuyển từ trái sang phải thì víết direction=1.
Di chuyển từ phải sang trái thì viết direction=-1

USING parseInt() FUNCTION

CÁCH XỬ DỤNG  parseInt() FUNCTION
ParseInt( ) do hai chữ parse và integer ghép lại , là một hàm số cốt lõi “ built-in core ” của JavaScript và của ngôn ngữ Java Programming Language.Built-in nghĩa là trong đó đã có sẳn nhiều codes mà chúng ta không biết.

 ParseInt() dùng để trích ra những con số chẳn chứa giữa hai dấu ngoặc kép “ “ và những con số chứa trong một chuổi ngôn ngữ.Chuổi ngôn ngữ nầy được xem là biến số(variable) của hàm số.

Để dễ hiểu hảy mở Notepad của computer rồi gõ vào đó những câu sau đây .

Mở browser sẽ thấy hiện ra (output) như sau : 1975.

Chuổi ngôn ngữ vienquocgiadinhchuandied có thể thay thế bằng x,y ..hay chuổi ngôn ngữ khác

vì đó là biến số (variable) nên thay đổi theo ý muốn.

ParseInt() chỉ trích ra con số chẳn 75 và bỏ con số lẽ 69

ParseInt() trích con số chẳn chứa giữa hai dấu ngoặc kép “ “ là 19

ParseInt(“12abc”) cho (output) 12

ParseInt(”abc”) cho NaN ( viết tắt của Not a Number)

               ----------------------------------------------------

ParseInt() được dùng trong JavaScript function làm cho hình chuyển động.

Thí dụ:

function doMove(){

object.style.left=parseInt(object.style.left)+10+’px’;

setTimeout(doMove)}

object.style.left  nghĩa là vị trí tức là position của hình được đặt bên trái viết theo phương pháp DOM (Document Object Model ).Ba chử nối kết nhau bằng dấu chấm.

Khi nói đến vị trí thì nên hiểu trong đó có hàm chứa  một con số về kích thước nên phải dùng parseInt() để lấy ra con số chứa trong đó.Ở đây đơn vị đo lường kích thước là pixel viết tắt px .
Con số +10 gọi là increment 10 pixel. 
function doMove() chỉ họat động được khi có increment chứ không phải parseInt() làm function hoạt động.

-------------------------------------------------------

Kết hợp onChange với parseInt()
Chép thí dụ nầy vào Notepad rồi mở browser sẽ thấy kết quả.

                           --------------------------------------------------------------------------------

parseInt( ) function với radix (base system)

Khi dung parseInt nhưng không để ý tới radix thì mặc nhiên javaScript sẽ tự động cho output theo hệ thống thập phân (decimal system) tức là radix 10.

Radix là chữ Latinh nghĩa là root và còn được gọi là base ,  hệ thống đếm con số đơn vị (digit ) bắt đầu từ zero trong toán học.

* Với hệ thống thập phân gọi là radix 10 , chúng ta đếm từ 0 tới 9.Chúng ta có 10 con số gọi là 10 digits.Hệ thống nầy dùng trong tóan học và trong máy đếm cơ khí.

* Với hệ thống radix 2, chúng ta chỉ có 2 digits là 0 và 1 diển tả OFF và  ON.Dùng trong máy đếm điện tử.

* Với hệ thống radix 8, chúng ta chỉ có 8 digits là “0-7”. Dùng trong computer.

* Với hệ thống radix 16, chúng ta có 16 digits là “0- 9”cộng với các chữ “A-F”.Dùng trong computer.

* Với hệ thống radix 64,chúng ta có các digits như sau : “A-Z” , “a-z”,”0-9”, và2 dấu

“+”, “ / “. Dùng trong computer.

Để hiểu được dể dàng, chúng ta quan sát con số 532 .

Với radix 10. Con số nầy có thể viết tách ra như sau.

     5x10^2

+   3x10^1

+   2x10^0

Với radix 16, con số 532 viết tách ra như sau.

     5x16^2

+   3x16^1

+   2x16^0

Sẽ  thành 1330  với hệ thống radix 10.
Viết câu nầy  alert(parseInt("532",16))  trong script tag rồi mở browser sẽ thấy hiện ra con số 1330 trong window alert popup.

Dấu ^ nghĩa là the power tức là lụy thừa. Thí dụ 7^2 nghĩa là 7x7=49 hoặc 7*7=49

Dấu ^ gọi là caret symbol hay caret sign dùng trong tóan học có nghĩa là exponent hay to the power of.

Radix hay base phải viết sau con số chứa trong ngoặc kép “…”,ngăn cách bằng dấu phẩy.

parseInt(“10”,10) cho  output 10

parseInt(“10”,16) cho output 16

parseInt(“10”,2) cho output 2

parseInt(“10”,8) cho output 8

parseInt(“11”) cho output 11

parseInt(“11”, 2) cho output 3

parseInt(“11”, 16) cho output 17

parseInt(“11”,8) cho output 9

Nếu chúng ta không quy định radix thì javaScript parseInt() sẽ tự động parse như sau.

• đầu tiên gặp chữ ox, nó sẽ theo hệ thống radix16
• đầu tiên gặp số 0 hoặc bất cứ con số nào,  nó sẽ theo hệ thống radix 10.

Nếu không muốn theo radix 10 và radix 16 thì phải quy định radix.

Chúng ta có thể tự chọn radix theo ý muốn từ 2 tới 36 nhưng không được chọn lớn hơn radix 36 vì một số browser không hổ trợ.

Để dễ hiểu lấy con số 10  và 11 làm căn bản để so sánh các radix chọn lưa khác nhau.

parseInt(“ox10”) cho output 16

parseInt(“ox11”) cho output 17

parseInt(“011”) cho output 11

parseInt(“11”) cho output 11

parseInt(“10”,36) cho output 36

parseInt(“11”,37) cho output NaN

parseInt(“A”,16) cho output 10

parseInt(“F”,16) cho output 15

 " BASIC JAVASCRIPT MAKING ANIMATION" USING parseInt(  )
           
                              
                            

                                             --------------------

Khi nào cần xử dụng parseInt()

parseInt() rất quan trọng được đem xử dụng trong những trường hợp sau :

- Kết hợp với increment làm cho hình chuyển động như thí dụ đã viết trên.

- Kết hợp với onchange như thí dụ trên

-Thực hiện các phép tính cộng, trừ, nhân, chia và luỹ thưà trong javaScript như những thí dụ dưới đây.

Thí dụ phép tính luỹ thừa.

 Math.pow( base,exponent ) là dấu của luỹ thừa.

Viết Một JavaScript Program Xử Dụng parseInt(), parseFloat(), Math.floor()

Writing A JavaScript Program Using parseInt(), parseFloat(), Math.floor()

Thí dụ chúng ta vào nhà bank America  đường Bolsa  gần chợ ABC , rút một số tiền $1257.75  để đi dạo phố Bolsa Khu Little Saigon,California không cần nói tiếng Anh.

Chúng ta muốn lấy tối đa giấy $20 để dễ xài.

Phần còn lại chúng ta lấy giấy $10 , giấy $5 và giấy $1

Muốn biết biết sẽ nhận được mấy tờ $20 , $10 ,  $5  và  $1, chúng ta viết JavaScript Program dưới đây trong script tag.

var strDollars = prompt("Viết vào đây số tiền muốn rút tại nhà bank");

var dollars = parseInt(strDollars);

var d1 = Math.floor(dollars / 20);

var d2 = Math.floor((dollars % 20 )/ 10);.

var d3 = Math.floor(((dollars % 20) % 10) / 5);

var d4 = parseFloat(strDollars % 5 );

alert(dollars+ 'Dollar bills you get must be : \n' +

    d1+ 'd1\n' + d2 + 'd2\n' + d3 + 'd3\n' + d4+'d4');
// output 62d1
1d2
1d3
 2.75d4

 Sau khi posted code trên vào notepad nếu không run thì kiểm soát lại từng hàng hoặc tự mình chép lại từng hàng một.

var strDollars = prompt("Viết vào đây số tiền muốn rút tại nhà bank");
var dollars = parseInt(strDollars);
var d1 = Math.floor(dollars/20);
var d2 = Math.floor((dollars%20)/10);
var d3 = Math.floor(((dollars%20)%10)/5);
var d4 = parseFloat(strDollars%5);
    alert(dollars+'gồm có như sau :' + '\n' + d1+'d1\n'
    +d2+'d2\n'+d3+'d3\n'+d4+'d4');

Ghi Chú. Trong alert() popup muốn viết xuống hàng thì phải dùng dấu \n.
Dấu + có nghĩa là nối lại với nhau mà tiếng Anh gọi  concatenate hay join chứ không có nghĩa cộng lại như dùng trong tóan học.
Dấu % nghĩa là modulus chứ không phải bách phân percent  như dùng trong tóan học.
Modulus là phần còn lại sau khi chia xong.Thí dụ 128 chia cho 3 thì phần còn lại là 2. Chọn lấy con số 2 .Đó là modulus.
Math.floor( 1.6  ) // output là 1
Math.floor( -5.1  ) // output là -6
Dùng Math.floor(  ) để làm tròn con số.

Áp dụng parseInt(), confirm(), prompt()  và alert() để viết một JavaScript program cho tiệm bán bánh .
Application of parseInt(), confirm(), prompt() and alert() in writing a 
JavaScript Program used for a Bakery.

When do we need JavaScript parseInt(), parseFloat(),confirm(), prompt() and alert() ?

JavaScript có 3 popup boxes là confirm(), prompt() , alert() rất quan trọng và rất thông dụng mà chúng ta cần phải hiểu rõ khi muốn viết những JavaScript programs như những thí dụ dưới đây.

Còn JavaScript parseInt(), parseFloat() dùng để chuyển đổi những gì viết trong

text boxes hay trong prompt  box thành con số chẵn hoặc con số có số lẽ..

Để có thể xử dụng var  banhLotus = 8 ; chúng ta viết lại program trên như sau gồm 3 phần.

Phần 1 dùng để hỏi khách hàng mua bao nhiêu bánh.

Phần 2 chuyển đổi yêu cầu của khách hàng bằng cách dùng parseInt().Nếu khách hàng mua nhiều hơn số đang có thì từ chối.

Phần 3 nếu khách hàng mua số lượng ít hơn hoặc bằng số lượng đang có thì cho khách hàng biết số tiền phải trả rồi cám ơn khách hàng.

Quá rõ phải không ?

                             var banhLotus = 8

                   function selling() {

                        if(confirm('Bạn muốn mua bánh Hạt Sen ?'))

                        {alert('Chúng tôi còn 8 bánh');

                              var mua = prompt('Bạn muốn mua mấy cái?'); }   

       

                              var buying = parseInt(mua);

                        if (banhLotus < buying){

                         alert('Chúng tôi không còn đủ bánh ');}

                        if( buying <= banhLotus) {

                        alert('Xin trả :'+ buying*16 +'USD');

                        alert('Cám ơn');}

       

                        else alert('Bạn không mua bánh Hat Sen.You have a good day')

                        }

                        selling()
Viết một JavaScript Program dùng cho cữa hàng bán áo T-Shirts màu trắng.

Writing a JavaScript program used for a  Shop Selling  White T-Shirts. 

function selling(){

 var T1= prompt('How many small do you need ?') ;

 var T2= prompt('How many medium do you need ?') ;

 var T3= prompt('How many large do you need ?') ;

 var T4= prompt('How many xtralarge do you need ?') ;

 var TC= parseInt(T1)+parseInt(T2)+parseInt(T3)+parseInt(T4) ;

         

  alert('Tổng cộng Tshirts bạn mua :\n'+ 

  T1 +':'+ 'sm\n' + T2 +':'+ 'med\n'+ T3 +':'+'larg\n'+ 

  T4 +':'+'xtlarg \n'+ TC);

var t1=parseFloat(T1*1.75) ;

var t2=parseInt(T2*2.00) ;

var t3=parseFloat(T3*2.50) ;

var t4=parseInt(T4*3.00) ;

var total=t1+t2+t3+t4 ;

    alert('You pay : \n'+

    t1 +':'+ 'sm\n' + t2 +':'+ 'med\n'+

    t3 +':'+'larg\n'+ t4 +':'+'xtlarg \n'+

    'Amount:'+ total+'USD') ;

    alert('Thank You')

 }

    selling()

Để rút ngắn chúng ta viết lại như sau bằng cách dùng kết hợp parseInt(prompt(…))

function selling(){

 alert('We have in stock:\n'+ 120 +':'+'small\n'+ 120 +':'+'medium \n'+

        120 +':'+'large\n'+ 120 +':'+'XTlarge')

 var T1= parseInt(prompt('How many small do you need ?'));

 var T2= parseInt(prompt('How many medium do you need ?'));

 var T3= parseInt(prompt('How many large do you need ?'));

 var T4= parseInt(prompt('How many xtralarge do you need ?'));

 var TC= T1+T2+T3+T4;      

 alert('Tổng cộng Tshirts bạn mua :\n'+

  T1 +':'+ 'sm\n' + T2 +':'+ 'med\n'+ T3 +':'+'larg\n'+

  T4 +':'+'xtlarg \n'+ TC);

var t1=parseFloat(T1*1.75)

var t2=parseInt(T2*2)

var t3=parseFloat(T3*2.5)

var t4=parseInt(T4*3)

var total=t1+t2+t3+t4 ;

    alert('You pay : \n'+

    t1 +':'+ 'sm\n' + t2 +':'+ 'med\n'+

    t3 +':'+'larg\n'+ t4 +':'+'xtlarg \n'+

    'Amount:'+ total+'USD');

    alert('Thank You')

 }

Nếu khách hàng input số lượng nhiều hơn đang tồn kho thì làm thế nào để không bị tính tiền trả cho số lượng bị nhầm?

var small = 120;

var medium = 120;

var large = 120

var xtralarge = 120;

function selling(){

 alert('We have in stock:\n'+ 120 +':'+'small\n'+ 120 +':'+'medium \n'+

        120 +':'+'large\n'+ 120 +':'+'xtralarge')

var T1= parseInt(prompt('How many small do you need ?')); 

  if(small <= T1) {T1=0} 

var T2= parseInt(prompt('How many medium do you need ?'));

  if(medium <= T2) {T2=0} 

var T3= parseInt(prompt('How many large do you need ?'));

  if(large <= T3) {T3=0} 

var T4= parseInt(prompt('How many xtralarge do you need ?'));

  if(xtralarge <= T4) {T4=0}

var TC= T1+T2+T3+T4;       

 alert('Tổng cộng Tshirts bạn mua :\n'+ 

  T1 +':'+ 'sm\n' + T2 +':'+ 'med\n'+ T3 +':'+'larg\n'+ 

  T4 +':'+'xtlarg \n'+ TC);

var t1=parseFloat(T1*1.75)

var t2=parseInt(T2*2)

var t3=parseFloat(T3*2.5)

var t4=parseInt(T4*3)

var total=t1+t2+t3+t4 ;

    alert('You pay : \n'+

    t1 +':'+ 'sm\n' + t2 +':'+ 'med\n'+

    t3 +':'+'larg\n'+ t4 +':'+'xtlarg \n'+

    'Amount:'+ total+'USD');

    alert('Thank You')

 }

selling()

Cũng cần nên biết  cách xử dụng những JavaScript Statements có tên sau đây trước khi viết JavaSript programs vì phải dùng đến :

break, const, continue, debugger, do…while, export, for, for…in, for each …in, function, if…else, import, label, return, switch…case, this, throw, try… catch, var, while with.

Viết program đổi tiền Japanese Yen ra tiền US Dollar.
 JavaScript program of changing Japanese Yen to USD

Trong script nầy chúng ta muốn dừng chỗ nào thì viết return chỗ đó.

Thí dụ chúng ta muốn đổi số tiền 5241 Japanese Yen ra tiền US Dollar.

Hiện nay 100 Yen tương đương với 1 US Dollar. Nếu có ít hơn hay bằng 45 Yenthì chúng ta không cần đổi nữa nên viết return 0 .

Nếu không muốn lấy tiền lẽ nặng túi thì dùng parseInt() loại bỏ số lẽ.

      var yen = 5241;

      function yentoDol(yen){

          if (yen <=45)  // nêu ít hơn hoặc bằng 45 Yen thì bỏ đi

          return 0;

          else {

          var dol = yen/ 100;

          return parseInt(dol);}

      }  

     var dol = yentoDol(yen);

     alert("The value in dol is " + dol); // output 52 vì dùng parseInt() loại bỏ số lẽ.

Chúng ta call function yentoDol(yen) bằng cách dùng yentoDol(yen);

Function chọn một trong 2  mệnh lệnh là if và else.để return cái value mà chúng ta muốn có rồi tồn trử trong var dol. Dùng alert  popup để hiển thị dol.

Nếu sau chữ return không có expression thì alert sẽ display undefined.

Nested function là gì ?

Tại sao cần có nested function ?

function inner() chứa trong function outer() gọi JavaScript nested function

Xem function inner( ) là một variable object . Dùng return để call function nầy.

Nếu không call sẽ bị undefined.

Viết javaScript program dùng nested function , return statement, prompt(),
 parseInt(), parseFloat() .

Nested function còn gọi function inside function.

Nested function có thể xử dụng variables của outer function nhưng outer function không thể xử dụng variables của nested function..Đó là một lý do có nhiều người thích dùng nested function để viết JavaScript program như thí dụ nầy.

Đây là một JavaScript  program viết cho tờ biên nhận (receipt) của một cữa hàng bán kẹo mè xửng Huế tại Thành Phố Huế VN.

Chúng ta có thể đem hết các variables của function inner() đặt trong function outer() ngoại trừ 
var total vì function inner() có thể access tất cả các variables và parameters của function outer().

The nested function can access any variables and parameters of the outer function(). 

The outer function() cannot access the variables of the inner function (nested function).

    function outer(x1, x2, x3, x4) {
         var str1= '100g meXung';
         var unitprice = 1.99;
         var quantity = parseInt(prompt('Bạn muốn mua bao nhiêu kẹo mè xửng?'));
         var currency= 'USD';   

     function inner(x3, x4) {
                 var total = parseFloat(x2*x3);
                 return('Tên món hàng'+':'+ str1 +'\n'
                  +'Giá đơn vị'+':'+ unitprice +'\n'
                  + 'Số lượng'+':'+ quantity +'\n'
                  +'Tổng cộng'+':'+ total +' '+ currency);
      }
                 return inner(quantity,'USD')// phải call inner thì function mới vận hành.
      }
                 alert(outer('100g meXung', 1.99 ,'USD'))

Đây là   receipt printout .

Using concat(), Arrays and ParseInt() to write a js program storing the pay-hour to employees.

Viết trong script tags code sau đây.

var a = ["JEFF:25$","PAUL:20$","BOB:21$","QUAN:19$"];

var b = ["Charle:18$","Kendell:18$","Jimmy:20$","Baxao:17$","Viki:19$","Jenny:19$"];

var c = ["Robin;22$","Nicole:13$","Filipe:16$","Jose:15$","Juan:20$","Henry:18$","Duke:19$"];

var d = a.concat(b,c);

var t = parseInt(prompt("Write Your PIN Number"))

alert(d[t-1])

Ghi chú. t = 1  is JEFF, t = 2  is PAUL, t = 3 is BOB, ..... t = 17 is Duke.

Chúng ta có thể chọn những code t và x  tuỳ ý miển sao [t-x] phải bằng 0,1,2,3,4, v.v.....

Thí du :  [2011-2010] cho số 1,  [2010-2010] cho số 0

VIẾT MỘT JS PROGRAM CHO CỮA HÀNG BÁN HOA TẠI BOLSA

Using Array[ ], confirm( ), prompt( ) ,  parseInt( )  and parseFloat( )To Write A JavaScript Program For A Flowers Shop In Bolsa.

1- Cách viết thứ nhất hơi phức tạp, có hóa đơn, dùng parseInt() và parseFloat()
Copy code sau đây rồi paste trong script tags

var flowers = ["Rose:2.45ea","Daisy:1.55 ea","Orchid:0.75ea","Tulip:1.25ea"];

alert("WE HAVE THESE FLOWERS :"+ "\n"+ (flowers))

var yes1 = confirm("You want ROSE ?")

if(yes1==true){var p1=parseInt(prompt("How many roses do you want?"))}

alert("You pay:" +"\n"+ (p1*2.45));

var yes2 = confirm("you want DAISY ?")

if(yes2==true){var p2=parseInt(prompt("How many daisies do you want?"))}

alert("You pay:" +"\n"+ (p2*1.55));

var yes3 = confirm("You want ORCHID ?")

if(yes3==true){var p3=parseInt(prompt("How many orchids do you want?"))}

 alert("You pay:" +"\n"+ (p3*0.75));

var yes4 = confirm("you want TULIP ?")

if(yes4==true){var p4=parseInt(prompt("How many Tulips do you want?"))}

 alert("You pay:" +"\n"+ (p4*1.25));

var t1=parseFloat(p1*2.45)

var t2=parseFloat(p2*1.55)

var t3=parseFloat(p3*0.75)

var t4=parseFloat(p4*1.25)

var T= t1+t2+t3+t4;

alert("You pay total:"+(T)+"USD"+"\n"+ // Đây là hóa đơn

(p1)+":"+"roses"+"\n"+

(p2)+":"+"daisies"+"\n"+

(p3)+":"+"orchids"+"\n"+

(p4)+":"+"tulips");

Ghi chú. Chắc bạn đã thấy cách thứ nhất có khuyết điểm?

Bỏ bớt các dấu ( ), +  và  bỏ dấu “ \n” đứng độc lập .

Viết thêm vào bảng code trên như dưới đây,  khuyết điểm sẽ không còn nữa.

var flowers = ["Rose:2.45ea","Daisy:1.55 ea","Orchid:0.75ea","Tulip:1.25ea"];

alert("WE HAVE THESE FLOWERS :\n"+ flowers)

var yes1 = confirm("You want ROSE ?")

if(yes1==true){var p1=parseInt(prompt("How many roses do you want?"))}

 alert("You pay:\n"+ p1*2.45);

if(yes1==0){p1=0} // nếu viết if(yes1==false){p1=0} thì hóa đơn sẽ có NaN và undefined

var yes2 = confirm("you want DAISY ?")

if(yes2==true){var p2=parseInt(prompt("How many daisies do you want?"))}

 alert("You pay:\n"+p2*1.55);

if(yes2==0){p2=0}

var yes3 = confirm("You want ORCHID ?")

if(yes3==true){var p3=parseInt(prompt("How many orchids do you want?"))}

 alert("You pay:\n"+p3*0.75);

if(yes3==0){p3=0}

var yes4 = confirm("you want TULIP ?")

if(yes4==true){var p4=parseInt(prompt("How many Tulips do you want?"))}

 alert("You pay:\n"+p4*1.25);

if(yes4==0){p4=0}

var t1=parseFloat(p1*2.45)

var t2=parseFloat(p2*1.55)

var t3=parseFloat(p3*0.75)

var t4=parseFloat(p4*1.25)

var T= t1+t2+t3+t4;

 alert("You pay total:"+T+"USD\n"+ // Đây là hóa đơn.

p1+":"+"roses\n"+

p2+":"+"daisies\n"+

p3+":"+"orchids\n"+

p4+":"+"tulips"); 

alert('Thank You')

Có thể viết dồn lại như sau vẫn chạy tốt .

var flowers = ["Rose:2.45ea","Daisy:1.55 ea","Orchid:0.75ea","Tulip:1.25ea"];

alert("WE HAVE THESE FLOWERS :\n"+ flowers)

var yes1 = confirm("You want ROSE ?")

if(yes1){var p1=parseInt(prompt("How many roses do you want?"));

alert("You pay:\n"+ p1*2.45);}

else {p1=0}

var yes2 = confirm("you want DAISY ?")

if(yes2){var p2=parseInt(prompt("How many daisies do you want?"));

 alert("You pay:\n"+p2*1.55);}

else {p2=0}

var yes3 = confirm("You want ORCHID ?")

if(yes3){var p3=parseInt(prompt("How many orchids do you want?"));

 alert("You pay:\n"+p3*0.75);}

else{p3=0}

var yes4 = confirm("you want TULIP ?")

if(yes4){var p4=parseInt(prompt("How many Tulips do you want?"));

 alert("You pay:\n"+p4*1.25);}

else{p4=0}

var t1=parseFloat(p1*2.45)

var t2=parseFloat(p2*1.55)

var t3=parseFloat(p3*0.75)

var t4=parseFloat(p4*1.25)

var T= t1+t2+t3+t4;

 alert("You pay total:"+T+"USD\n"+ // Đây là hóa đơn.

p1+":"+"roses\n"+

p2+":"+"daisies\n"+

p3+":"+"orchids\n"+

p4+":"+"tulips");

alert('Thank You')

2- Cách viết thứ hai sau đây đơn giản hơn, chỉ dùng parseFloat()

var flowers = ["Rose:2.45ea","Daisy:1.55 ea","Orchid:0.75ea","Tulip:1.25ea"];

alert("WE HAVE THESE FLOWERS :"+ "\n"+ (flowers));

confirm("You want ROSE ?");

var p1=prompt("How many roses do you want?");

var t1=parseFloat(p1*2.45);// phải dùng parseFloat( ) để lấy số tiền lẻ

alert("You pay:"+(t1));

confirm("you want DAISY ?");

var p2=prompt("How many daisies do you want?");

var t2=parseFloat(p2*1.55);

alert("You pay:"+(t2));

confirm("You want ORCHID ?");

var p3=prompt("How many orchids do you want?");

 var t3=parseFloat(p3*0.75);

alert("You pay:"+(t3));

confirm("you want TULIP ?");

var p4=prompt("How many tulips do you want?");

var t4=parseFloat(p4*1.25);

alert("You pay:"+(t4));

var T= t1+t2+t3+t4;

alert("You pay total:"+(T)+"USD"+"\n"+ // Đây là hóa đơn

(p1)+":"+"roses"+"\n"+

(p2)+":"+"daisies"+"\n"+

(p3)+":"+"orchids"+"\n"+

(p4)+":"+"tulips");

3- Cách thứ ba đơn giản hơn hết nhưng NaN sẽ xuất hiện trong hóa đơn nếu không mua hết các loại hoa hoặc nếu không viết zero cho những loại hoa không muốn mua.

Quý bạn có biết cách cải tiến không?

var flowers = ["Rose:2.45ea","Daisy:1.55 ea","Orchid:0.75ea","Tulip:1.25ea"];

alert("WE HAVE THESE FLOWERS :"+ "\n"+ (flowers))

 var T1= parseInt(prompt('How many roses do you want ?'));

 var T2= parseInt(prompt('How many daisies do you want ?'));

 var T3= parseInt(prompt('How many orchids do you want ?'));

 var T4= parseInt(prompt('How many tulips do you want ?'));

 var TC= T1+T2+T3+T4;     

 alert('Tổng cộng flowers bạn mua :\n'+

  T1 +':'+ 'roses\n' + T2 +':'+ 'daisies\n'+ T3 +':'+'orchids\n'+

  T4 +':'+'tulips \n'+ TC);

var t1=parseFloat(T1*2.45)

var t2=parseFloat(T2*1.55)

var t3=parseFloat(T3*0.75)

var t4=parseFloat(T4*1.25)

var total=t1+t2+t3+t4 ;

    alert('You pay : \n'+

    t1 +':'+ 'roses\n' + t2 +':'+ 'daisies\n'+

    t3 +':'+'orchids\n'+ t4 +':'+'tulips\n'+

    'Amount:'+ total+'USD'); // Đây là hóa đơn.

    alert('Thank You')

4- Cách thứ tư. Rất đơn giản . Rất hòan chỉnh.

Không còn khuyết điểm khi in hóa hóa đơn.

var flowers = ["Rose:2.45ea","Daisy:1.55 ea","Orchid:0.75ea","Tulip:1.25ea"];

alert("WE HAVE THESE FLOWERS :"+ "\n"+ flowers)

var T1= prompt('How many roses do you want ?');

var T2= prompt('How many daisies do you want ?');

var T3= prompt('How many orchids do you want ?');

var T4= prompt('How many tulips do you want ?');

var TC= parseInt(T1)+parseInt(T2)+parseInt(T3)+parseInt(T4);     

 alert('Tổng cộng flowers bạn mua :\n'+

  T1 +':'+ 'roses\n' + T2 +':'+ 'daisies\n'+ T3 +':'+'orchids\n'+

  T4 +':'+'tulips \n'+ TC);

var t1=parseFloat(T1*2.45)

var t2=parseFloat(T2*1.55)

var t3=parseFloat(T3*0.75)

var t4=parseFloat(T4*1.25)

var total=t1+t2+t3+t4 ;

    alert('You pay : \n'+

    t1 +':'+ 'roses\n' + t2 +':'+ 'daisies\n'+

    t3 +':'+'orchids\n'+ t4 +':'+'tulips\n'+

    'Amount:'+ total+'USD\n'+ // Đây là hóa đơn.

    'Thank You');

Đây là một JS program xử dụng arrays, parseInt() và prompt()

Copy rồi paste bảng code nầy trong script tags.

var a = ["banana:0.45$/lb","apple:0.25$/lb","orange:0.20$/lb","pear:0.20$/lb"];
var b = ["grape:0.99$/lb","apricot:0.18$/lb","plum:0.25$/lb","nectarine:0.25$/lb","tangerine:040$/lb","avocado:0.30$/lb"];
var c = ["cherry:0.99$/lb","blueberry:0.50$/lb","craneberry:0.20$/lb","limon:1.50$/lb","grapefruit:0.40$/lb","strawberry:099$/lb","persimon:0.19$/lb"];
var d = a.concat(b,c);
var t = parseInt(prompt("Write the code number on fruit"))
alert(d[t-4011])

Đây là code number dán trên trái cây.Gõ code number thì tên trái cây và giá tiền
mổi lb sẽ hiện ra.
banana:4011,apple:4012,orange:4013,pear:4014,
grape:4015,apricot:4016,plum:4017,nectarine:4018,
tangerine:4019,avocado:4020,cherry:4021,blueberry:4022,
craneberry:4023,limon:4024,grapefruit:4025,strawberry:4026,
persimon:4027;

Chúng ta có thể chọn những code t và x  tuỳ ý miển sao [t-x] phải bằng 0,1,2,3,4, v.v.....

Viết  Một JS Program Trắc Nghiệm Kiến Thức Tổng Quát.

Writing a JS Program For A Quiz

Thí dụ.

1st question-Where is
the capitol of California?
1. San Jose
2. Los Angeles
3. Sacramento
4. San Diego

2nd question-How many states in USA?
1. 40 states
2. 50 states
3. 60 states
4. 51 states

3rd question-Where is VietNam?
1. In Europe
2. In Africa
3. In Australia
4. In South East Asia

Trong trường hợp nầy chúng ta xử dụng array[ ], parseInt( ), prompt( ) như sau.

Trong script tag viết codes sau đây :

var answer1 = ["San Jose:False","Los Angeles:False","Sacramento:Right","San Diego:False"];

var t1 = parseInt(prompt("1st question-Write the number you choose"))

alert(answer1[t1-1])

if(t1==3){ var p1=100}

else {p1=0}

var answer2 = ["40:False","50:Right","60:False","51:False"];

var t2 = parseInt(prompt("2nd question-Write the number you choose"))

alert(answer2[t2-1])

if(t2==2){ var p2=100}

else{p2=0}

var answer3 = ["In Europe:False","In Africa:False","In Australia:False","In South E Asia:Right"];

var t3 = parseInt(prompt("3rd question-Write the number you choose"))

alert(answer3[t3-1])

if(t3==4){ var p3=100}

else{p3=0}

var total=p1+p2+p3

alert("You get" +":"+ total +" "+"points")

Nếu trả lời một câu đúng thì sẽ được 100 điểm.

Nếu trả lời đúng 3 câu thì được 300 điểm.

Ghi Chú .Tại sao phải viết [ t1-1 ]  ? Đối với Array, data đầu tiên được đếm là zero cho nên phải viết t -1 cho data đầu tiên;  nghĩa là 1-1=0
Đối với slice( ),
trong memory mỗi chữ hay mỗi con số được tồn trử trong một box ngăn cách nhau bằng 2 cọc  tức là 2 indices..Số thứ tự để đếm cho cọc bắt đầu là zero áp dụng cho cọc đầu tiên .

updated Apr-17-2014

Viết một javaScript program xử dụng return statement

cho hóa đơn.

Writing a javaScript program using return statement for a receipt

Chữ return(…) statement có nhiều công dụng nhưng trong bài nầy chúng ta chỉ chú ý đến 2 công dụng được tóm lược như sau.

* Return dùng để chận sự vận hành những code sau nó.

Return is used to stop the execution of the further code after it.

* function có nhiệm vụ thi hành công việc mà chúng ta muốn.

Phải viết  return (….) trong function. Những gì chúng ta muốn return từ function thì viết trong  dấu  (….).

Khi control vận hành gặp return thì return liền vọ̣t ra khỏi function rồi return những gì đã viết trong return tới caller của function ( code đã called function.)

Return statement jumps out or exists from the current function then returns what we want from that function to the code that called the function.

Thí dụ .

Quan sát script code sau đây.

Trong function display( ) chúng ta viết tên của  những gì chúng ta muốn function thi hành.Tên của mỗi món phải được tồn trử trong variable viết tắt var. để có thể chứa trong memory

Return là một mệnh lệnh mà function phải thi hành nên cũng phải viết trong function.

Trong return chúng ta viết tất cả tên của những món đã viết trong function (chũ màu lá cây ) và viết thêm những gì chúng muốn làm cho rỏ nghĩa (chữ màu tím ).

Chúng ta có thể viết tên của một món nếu chỉ muốn display món đó.

 Caller của function display ( ) là display();
Dùng alert để viết ra những gì  caller đã nhận từ return nên viết alert(display());

 function display(){

         var str= '100g meXung';

         var price = 1.99;

         var quantity = parseInt(prompt('Bạn muốn mua bao nhiêu kẹo mè xửng?'));    

         var total = parseFloat(quantity*price);

         var currency= 'USD';

         return('Tên món hàng'+':'+ str +'\n'

                  +'Giá đơn vị'+':'+ price +'\n'

                  + 'Số lượng'+':'+ quantity +'\n'

                  +'Tổng cộng'+':'+ total+' '+ currency) ;

         }

         alert(display());

Đây là hóa đơn mua 10 miếng kẹo mè xửng

    Nếu không muốn dùng return thì viết script code như sau.

    function display(){

         var str= '100g meXung';

         var price = 1.99;

         var quantity = parseInt(prompt('Bạn muốn mua bao nhiêu kẹo mè xửng?'));    

         var total = parseFloat(quantity*price);

         var currency= 'USD';

         alert('Tên món hàng'+':'+ str +'\n'

                  +'Giá đơn vị'+':'+ price +'\n'

                  + 'Số lượng'+':'+ quantity +'\n'

                  +'Tổng cộng'+':'+ total+' '+ currency);}

         display();

Viết thêm điều kiện nếu muốn.

if(quantity <=10){

        alert('Tên món hàng'+':'+ str +'\n'

                  +'Giá đơn vị'+':'+ price +'\n'

                  + 'Số lượng'+':'+ quantity +'\n'

                  +'Tổng cộng'+':'+ total+' '+ currency);}

        else {alert('Sorry we do not have enough')}                                             

Nếu muốn dùng return và if…else thì script code như sau.

    function display(){

         var str= '100g meXung';

         var price = 1.99;

         var quantity = parseInt(prompt('Bạn muốn mua bao nhiêu kẹo mè xửng?'));    

         var total = parseFloat(quantity*price);

         var currency= 'USD';

         if(quantity <=10){

         return ('Tên món hàng'+':'+ str +'\n'

                  +'Giá đơn vị'+':'+ price +'\n'

                  + 'Số lượng'+':'+ quantity +'\n'

                  +'Tổng cộng'+':'+ total+' '+ currency);}

         else

         {return('We do not have enough')}

         }

         alert(display());