WRITING A JS PROGRAM FOR A SMALL SHOP SELLING RICE AND SUGAR.

WRITING A JS PROGRAM FOR A SMALL SHOP SELLING RICE AND SUGAR.

 XỬ DỤNG alert, confirm, prompt, if, else if , else and object

 ĐỂ VIẾT JS PROGRAM  DÙNG TRONG TIỆM BÁN GẠO VÀ ĐƯỜNG

 WRITING A JS PROGRAM FOR A SMALL SHOP SELLING RICE AND SUGAR.

 

       var shop = {

          greeting :"WELCOME TO : ENRIQUE SHOP" ,

          product :"CHÚNG TÔI BÁN RICE VÀ SUGAR \n RICE BAG : 5 lbs \n SUGAR BAG : 2 lbs",

          appreciation :"THANK YOU \n SEE YOU AGAIN !",

          rice :"YOU WANT TO BUY RICE ?",

          sugar :"YOU WANT TO BUY SUGAR ?",};         

          alert(shop.greeting);

          alert(shop.product);

               

          var ac = confirm(shop.rice);

         if(ac== true){var x = parseInt(prompt("HOW MANY RICE BAGS YOU WANT?"))};

          if(x <= 100){alert("YOU PAY :"+ x*5.25 + "USD");}

          else if(x>100){alert("YOU PAY :"+ x*4.00 + "USD");}

  //Nếu click cancel thì  window confirm dưới đây xuất hiện.

          else{confirm(shop.sugar)}; 

         var y = parseInt(prompt("HOW MANY SUGAR BAGS YOU WANT?"));

         if(y<=10){alert("YOU PAY :"+ y*3.25 + "USD")}

          else{alert("YOU PAY :"+ y*3.00 + "USD")}

          alert(shop.appreciation);

Ghi chú hướng dẫn.
Program trên đơn giản, còn thiếu hóa đơn.

CHỌN PROGRAM NẦY CÓ HÓA ĐƠN.

Khi viết program nầy, quý bạn sẽ gặp vấn đề có hơi phức tạp vì có 4 giá bán khác nhau chia làm 2 nhóm.

Nhóm bán sỉ có giá thấp và nhóm bán lẻ có giá cao hơn .

Trong mỗi nhóm có 2 giá bán khác nhau là sỉ goị wholesale và lẻ goị laretail cho nên phải suy nghĩ và trắc nghiệm nhiều lần mới thành công.

Ngoài ra cần cắt bỏ những codes không cần thiết để program được ngắn gọn.

Nên xử dụng document.write để những con số không biến mất giúp chúng ta kiểm sóat không bị nhầm lẫn khi tính tiền với khách hàng.

Trong program nầy,nếu muốn chúng ta có thể viết them tên của shop và ngày giờ bán hàng.

Dưới đây là JavaScript Program theo kiến thức của người viết.

Quý bạn thông minh hơn có thể nghĩ cách viết tốt hơn.

                

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

var shop = {

          greeting :"WELCOME TO : ENRIQUE SHOP" ,

          product :"CHÚNG TÔI BÁN RICE VÀ SUGAR \n RICE BAG : 5 lbs \n SUGAR BAG : 2 lbs",

          appreciation :"THANK YOU \n SEE YOU AGAIN !",};         

         

          alert(shop.greeting);

          alert(shop.product);        

          var x = parseInt(prompt("HOW MANY RICE BAGS YOU WANT?"))

          var pay1 = parseFloat(x*5.25);

          var pay2 = parseInt(x*4.00);

         

          if(x>=100){document.write("YOU PAY : "+ pay2 +"\n");}

           else{document.write("YOU PAY : "+ pay1 +"\n");}

         

          var y = parseInt(prompt("HOW MANY SUGAR BAGS YOU WANT?"));

          var pay3 = parseFloat(y*3.25);

          var pay4 = parseInt(y*3.00);

         

          if(y>=100){document.write("YOU PAY : "+ pay4);}

           else{document.write("YOU PAY :"+ pay3);}

          var total1 = pay2+pay4;// wholesale

          var total2 = pay1+pay3; //retail  

          var total3 = pay1+pay4;  //retail plus wholesale

          var total4 = pay2+pay3;   // wholesale plus retail

                    //here is the sale receipt

          alert("TOTAL RICE BAGS IS : "+ x +"\n"+

                  "TOTAL SUGAR BAGS IS : " +y +"\n"+

                  "TOTAL PAY IS :" + "\n"+

                  "* WH :"+ total1 +"\n"+

                  "* RETAIL :"+ total2 +"\n"+

                  "* RETAIL PLUS WH :" + total3 +"\n"+

                  "* WH PLUS RETAIL :" + total4 + "\n"+

                      shop.appreciation);                                    

Đây là Hoá Đơn mua 150 rice bags và 80 sugar bags.

Quan sát receipt,chúng ta chú ý món nào thì lọt vào mua retail và món nào thì xếp vào wholesale.Theo quy định của chủ cữa hàng nếu mua trên 100 bags áp dụng cho rice và sugar thì xếp vào wholesale.Đó là lý do chúng ta cần phải dùng document.write để có những con số chắc chắn dùng so sánh với số tiền trên receipt.  

CHỈNH LẠI NHƯ SAU ĐỂ CÓ RECEIPT RÕ RÀNG HƠN.

if(x>=100){document.write("PAY WHOLESALE RICE : "+ pay2 + "\n");}

           else{document.write("PAY RETAIL RICE : "+ pay1 + "\n");}

         

          var y = parseInt(prompt("HOW MANY SUGAR BAGS YOU WANT?"));

          var pay3 = parseFloat(y*3.25);

          var pay4 = parseInt(y*3.00);

         

          if(y>=100){document.write("/ PAY WHOLESALE SUGAR : "+ pay4);}

           else{document.write(" / PAY RETAIL SUGAR : "+ pay3);}

PAY WHOLESALE RICE : 600 / PAY RETAIL SUGAR : 260

Nếu cần in receipt thì dùng document.write thay thế cho alert.

document.write("TOTAL RICE BAGS IS : "+ x +"\n"+ 
                  "TOTAL SUGAR BAGS IS : " +y +"\n"+ 
                  "TOTAL PAY IS :" + "\n"+
                  "* WHOLESALE :"+ total1 +"\n"+
                  "* RETAIL :"+ total2 +"\n"+
                  "* RETAIL PLUS WHOLESALE :" + total3 +"\n"+
                  "* WHOLESALE PLUS RETAIL :" + total4 + "\n"+ 

                      shop.appreciation);

PAY WHOLESALE RICE : 600 / PAY RETAIL SUGAR : 260 TOTAL RICE BAGS IS : 150 TOTAL SUGAR BAGS IS : 80 TOTAL PAY IS : * WHOLESALE :840 * RETAIL :1047.5 * RETAIL PLUS WHOLESALE :1027.5 * WHOLESALE PLUS RETAIL :860 THANK YOU SEE YOU AGAIN !
Quan sát receipt,chúng ta thấy có những con số không cần thiết.Làm cách nào để loại bỏ những con số màu đỏ vô ích đó?Tại sao có những con số đó?
Chắc quý bạn biết cách thực hiện như ý muốn?
Chắc Quý Bạn say mê JavaScript phải hông ?

Giải thích những con số không cần thiết nhưng vẫn giúp ích khi cần.

1-Mua 10 rice bags và 20 sugar bags.

PAY RETAIL RICE : 52.5 / PAY RETAIL SUGAR : 65

TOTAL RICE BAGS IS : 10

TOTAL SUGAR BAGS IS : 20

TOTAL PAY IS :

* WHOLESALE :100 = 10*4.00 $ +20*3.00$

* RETAIL :117.5  = 10*5.25$ +20*3.25$

* RETAIL PLUS WHOLESALE :112.5  =10*5.25$ +20*3.00$

* WHOLESALE PLUS RETAIL :105 = 10*4.00$ + 20*3.25

THANK YOU

SEE YOU AGAIN !

2- Mua 100 rice bags và 100 sugar bags

PAY WHOLESALE RICE : 400 USD / PAY WHOLESALE SUGAR : 300USD

TOTAL RICE BAGS IS : 100 TOTAL SUGAR BAGS IS : 100

TOTAL PAY IS :

* WHOLESALE : 700 = 100*4.00$ +100*3.00$

* RETAIL : 850 = 100*5.25$ + 100*3.25$

* RETAIL PLUS WHOLESALE : 825 =100*5.25$ +100*3.00$

 * WHOLESALE PLUS RETAIL : 725 = 100*4.00+100*3.25$

THANK YOU

 SEE YOU AGAIN !

3-Mua 150 rice bags và 80 sugar bags.

PAY WHOLESALE RICE : 600 USD / PAY RETAIL SUGAR : 260 USD

TOTAL RICE BAGS IS : 150

TOTAL SUGAR BAGS IS : 80

TOTAL PAY IS :

* WHOLESALE : 840 =150*4.00$ + 80*3.00 $

* RETAIL :1047.5  = 150* 5.25$ + 80*3.25$

* RETAIL PLUS WHOLESALE :1027.5 = 150*5.25$ + 80*3.00$

* WHOLESALE PLUS RETAIL :860 = 150*4.00$ + 80*3..25$

THANK YOU

SEE YOU AGAIN !

4- Không mua sugar thi viết ZERO

PAY WHOLESALE RICE : 600 USD / PAY RETAIL SUGAR : 0 USD TOTAL RICE BAGS IS : 150

TOTAL SUGAR BAGS IS : 0

TOTAL PAY IS :

 * WHOLESALE :600

* RETAIL : 787.5 

* RETAIL PLUS WHOLESALE :787.5 = 150* 5.25$

* WHOLESALE PLUS RETAIL : 600 = 150*4.00$

THANK YOU

SEE YOU AGAIN !

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

JAVASCRIPT PROGRAMMING LÀ PHƯƠNG TIỆN TUYỆT VỜI DÙNG ĐỂ DIỄN TẢ SỰ SUY NGHĨ VÀ TÍNH TOÁN CỦA CHÚNG TA.

HOAN HÔ QUÝ BẠN ĐANG SAY MÊ NÓ.

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

SAU KHI DỰ THẢO XONG THẤY PROGRAM ĐÃ HOẠT ĐỘNG ĐƯỢC RỒI,

chúng ta suy nghĩ chỉnh lại program cho gọn va trông đẹp mắt .

Thí dụ program trên được chỉnh lại như sau.Nếu cần in receipt thì viết thêm trong program một function display().

* PAY WHOLESALE RICE : 600 USD * PAY RETAIL SUGAR : 260 USD * RICE BAGS : 150 * SUGAR BAGS : 80 
CLICK TO GET RECEIPT

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

      var shop = {

          greeting :"WELCOME TO : ENRIQUE SHOP \n" ,

          product :"CHÚNG TÔI BÁN RICE VÀ SUGAR \n RICE BAG : 5 lbs \n SUGAR BAG : 2 lbs",

          appreciation :"THANK YOU \n SEE YOU AGAIN !",};         

         

          alert(shop.greeting);

          alert(shop.product);        

          var x = parseInt(prompt("HOW MANY RICE BAGS YOU WANT?"))

          var pay1 = parseFloat(x*5.25);

          var pay2 = parseInt(x*4.00);

         

       if(x>=100){document.write(" * PAY WHOLESALE RICE : "+ pay2 + " " + "USD");}

           else{document.write(" *PAY RETAIL RICE : "+ pay1 + " " + "USD");}

         

         

          var y = parseInt(prompt("HOW MANY SUGAR BAGS YOU WANT?"));

          var pay3 = parseFloat(y*3.25);

          var pay4 = parseInt(y*3.00);

         

       if(y>=100){document.write(" * PAY WHOLESALE SUGAR : "+ pay4 +" " + "USD");}

           else{document.write(" * PAY RETAIL SUGAR : "+ pay3 + " " + "USD");}

         document.write(" * RICE BAGS : " + x + " "+ " * SUGAR BAGS : " + y +" ")

          var total1 = pay2+pay4;     // wholesale

          var total2 = pay1+pay3;    //retail  

          var total3 = pay1+pay4;        //retail plus wholesale

          var total4 = pay2+pay3;   // wholesale plus retail       

              

         function display(){

                  alert(shop.greeting +

                    "TOTAL RICE BAGS IS : "+ x +"\n"+

                  "TOTAL SUGAR BAGS IS : " +y +"\n"+

                  "TOTAL PAY IS :" + "\n"+

                  "* WHOLESALE :"+ total1 +"\n"+

                  "* RETAIL :"+ total2 +"\n"+

                  "* RETAIL PLUS WHOLESALE :" + total3 +"\n"+

                  "* WHOLESALE PLUS RETAIL :" + total4 + "\n"+

                      shop.appreciation + "\n"+

                  "* MANAGER : BAXAO XAOKE "); }

   

Đây là Hóa Đơn đã cải tiến nhưng vẫn còn cải tiến
nữa theo ý muốn của Manager BaXao Xaoke người Mỹ gốc Mít.

Manager Baxao Xaoke người Mỹ gốc Mít Tố Nữ Lái Thiêu muốn có output giống như sau .

PAY WHOLESALE RICE : 600 USD
* PAY RETAIL SUGAR : 260 USD
* RICE BAGS : 150
* SUGAR BAGS : 80
CLICK TO GET RECEIPT

Click xong thì xuất hiện receipt nầy.Phần trên biến mất.

WELCOME TO : ENRIQUE SHOP 
TOTAL RICE BAGS IS : 150
TOTAL SUGAR BAGS IS : 80
TOTAL PAY IS :
* WHOLESALE :840
* RETAIL :1047.5
* RETAIL PLUS WHOLESALE :1027.5
* WHOLESALE PLUS RETAIL :860
THANK YOU SEE YOU AGAIN !
* MANAGER : BAXAO XAOKE

Do yêu cầu trên, chúng ta phải viết lại như sau .Vì phải xử dụngdocument.write thay alert nên khi viết xuống hàng chúng ta phải huỷ bỏ dấu “\n” đã dùng cho alert rồi thay vào đó dấu  “<br>”

if(x>=100){document.write(" * PAY WHOLESALE RICE : "+ pay2 + " " + "USD"+ "<br>");}

           else{document.write(" *PAY RETAIL RICE : "+ pay1 + " " + "USD"+"<br>");}

         

          var y = parseInt(prompt("HOW MANY SUGAR BAGS YOU WANT?"));

          var pay3 = parseFloat(y*3.25);

          var pay4 = parseInt(y*3.00);  

       if(y>=100){document.write(" * PAY WHOLESALE SUGAR : "+ pay4 +" " + "USD"+"<br>");}

         else{document.write(" * PAY RETAIL SUGAR : "+ pay3 + " " + "USD"+"<br>");}   

          document.write(" * RICE BAGS : " + x + "<br> "+ " * SUGAR BAGS : " + y")

function display(){

                  document.write(shop.greeting + "<br>"+

                    "TOTAL RICE BAGS IS : "+ x +"<br>"+

                  "TOTAL SUGAR BAGS IS : " +y +"<br>" +

                  "TOTAL PAY IS :" + "<br>"+

                  "* WHOLESALE :"+ total1 +"<br>"+

                  "* RETAIL :"+ total2 +"<br>"+

                  "* RETAIL PLUS WHOLESALE :" + total3 +"<br>"+

                  "* WHOLESALE PLUS RETAIL :" + total4 + "<br>"+

                      shop.appreciation + "<br>"+

                  "* MANAGER : BAXAO XAOKE "); }

Hóa đơn nầy còn thiếu giờ, ngaỳ, tháng và năm

Muốn thỏa mãn yêu cầu của manager người nữ Gốc Mít Lái Thiêu rất dễ thương thì phải viết thêm codes nầy vào trong function display() của program.

          var today = new Date();

          var day = today.getDate();

          var month = today.getMonth()+1; //January is 0!

          var year = today.getFullYear();    

 

          document.write("* YEAR : " + year + " / " + "MONTH : " + month + "<br>"+ "DAY : " + today)

Cuối cùng sau đây là JavaScript Program mà manager chấp nhận vì có đầy đủ theo mong muốn nên rất cám ơn người viết miễn phí.

var shop = {

          greeting :"WELCOME TO : ENRIQUE SHOP \n" ,

          product :"CHÚNG TÔI BÁN RICE VÀ SUGAR \n RICE BAG : 5 lbs \n SUGAR BAG : 2 lbs",

          appreciation :"THANK YOU \n SEE YOU AGAIN !",         

          };

          alert(shop.greeting);

          alert(shop.product);

alert("YOU MUST PUT ZERO IF YOU DO NOT WANT TO BUY ANY OF THEM");            

          var x = parseInt(prompt("HOW MANY RICE BAGS YOU WANT?"))

          var pay1 = parseFloat(x*5.25);

          var pay2 = parseInt(x*4.00);

        if(x>=100){document.write(" * PAY WHOLESALE RICE : "+ pay2 + " " + "USD"+ "<br>");}

           else{document.write(" *PAY RETAIL RICE : "+ pay1 + " " + "USD"+"<br>");}

          var y = parseInt(prompt("HOW MANY SUGAR BAGS YOU WANT?"));

          var pay3 = parseFloat(y*3.25);

          var pay4 = parseInt(y*3.00);     

       if(y>=100){document.write(" * PAY WHOLESALE SUGAR : "+ pay4 +" " + "USD"+"<br>");}

           else{document.write(" * PAY RETAIL SUGAR : "+ pay3 + " " + "USD"+"<br>");}

          document.write(" * RICE BAGS : " + x + "<br> "+ " * SUGAR BAGS : " + y )

          var total1 = pay2+pay4;     // wholesale

          var total2 = pay1+pay3;    //retail  

          var total3 = pay1+pay4;        //retail plus wholesale

          var total4 = pay2+pay3;   // wholesale plus retail             

function display(){

                  document.write(shop.greeting + "<br>"+

                    "TOTAL RICE BAGS IS : "+ x +"<br>"+

                  "TOTAL SUGAR BAGS IS : " +y +"<br>" +

                  "TOTAL PAY IS :" + "<br>"+

                  "* WHOLESALE :"+ total1 +"<br>"+

                  "* RETAIL :"+ total2 +"<br>"+

                  "* RETAIL PLUS WHOLESALE :" + total3 +"<br>"+

                  "* WHOLESALE PLUS RETAIL :" + total4 + "<br>"+

                      shop.appreciation + "<br>"+

                  "* MANAGER : BAXAO XAOKE "+ "<br>");                 

          //Đây là codes for year,month and day

          var today = new Date();

          var day = today.getDate();

          var month = today.getMonth()+1; //January is 0!

          var year = today.getFullYear();    

 

                    document.write("* YEAR : " + year + " / " + "MONTH : " + month + "<br>"+ "DAY : " + today)}

            
             ***************************

CẦU CHÚC QUÝ BẠN THỰC TẬP THÀNH CÔNG

TỰ TẠO JAVASCRIPT OBJECT ĐỂ VIẾT PROGRAMS

CREATING YOUR OWN OBJECTS USED FOR WRITING  JAVASCRIPT PROGRAMS

Muốn viết một javascript program có nhiều đề mục riêng biệt và trong mỗi đề mục chúng ta tha hồ̉ muốn viết gì tuỳ ý thì chúng ta phải biết cách tự tạo ra nhiều objects.

Mỗi object là một đề mụ̣c có tên giống nhau nhưng có nội dung khác nhau hoặc mỗi object có tên khác nhau với nội dung khác nhau.

Trong trường hợp nầy, chúng ta phải xử dụng  constructor function.

Constructor function có nhiệm vụ vừa tạo ra những objects vưà thi hành những nhiệm vụ khác cùng một lúc.

Điều kiện để cho một regular function tự động trở thành constructor function là trong function phải có chữ this (keyword this) .

Chữ this sẽ cột buộc( bound to ) với new object mà chúng ta sẽ tạo ra  

Sau khi tạo xong những new objects, chúng ta có thể dùng một javaScript function khác để display những values của new object mà chúng ta muốn xuất hịên sau cùng

Thí du.

Chúng ta muốn viết một javaScript program giới thiệu Blogger VQGĐC gồm có 6 đề mục mục thì chúng ta phải tự tạo ra 6 objects như sau.

* Viết function createobject() để declare object.

* Dùng chữ this cho mỗi object . Nếu muốn có nhiều objects thì dùng chữ this nhiều lần tuỳ ý. Khi viết chữ this trong function thì function createobject() tự động trở thành constructor function. 

Khi đã có constructor function rồi, chúng ta tha hồ tạo ra những new object bằng cách viết như sau.  

            var  myobject = new createobject().

            var  obj = new createobject().

            var  xaoke = new createobject().

 myobject, obj,  xaoke  là  những new objects chúng ta tư tạo ra.

* Phải dùng chữ  new để instantiate object function tức là dành chỗ trong memory cho object function. ( We allocate a memory space for object function with the new operator or new keyword.)

Dùng dấu chấm dot để cho properties hay method tiếp cận với new object đã tạo.

Thí dụ  : myobject.first, myobject.second

Tóm tắt thêm như sau.

Khi trong function  có chữ this, thì function đó tự động trở thành constructor function.

Muốn call hay invoke constructor function thì viết chữ new trước tên của function .

Chữ new tạo ra một blank object.Object nầy invokes the function để function  chuyển (passing) blank object tới chữ this.

Chữ new nói với chữ this hướng về object đã được dành chỗ trong memory(The keyword new tells this to point to the object that's being instantiated).

Khi constructor function executes thì có new object.

Chữ new còn có thêm nhiệm vụ là dành chỗ trong memory cho new object

Đây là sự xuất hiện của một JavaScript Program giới thiệu VQGĐC/VNCH.
                              Xem JavaScript Program code phía trên.

WELCOME TO : VIỆN QUỐC GIA ĐỊNH CHUẨN/VNCH
THÂN CHÀO QUY BẠN
BLOGGER NẦY TÀN TRỬ TÀI LIỆU LỊCH SỮ CỦA VQGĐC, KINH NGHIỆM NGHỀ CHUYÊN MÔN KHOA HỌC KỸ THUẬT, GHI CHÉP KINH NGHIỆM TU HỌC PHẬT VÀ THIÊN CHÚA
CẦU CHÚC QUÝ BẠN LUÔN LUÔN THĂNG TIẾN

CLICK HERE TO OPEN BLOGGER

TÌM HIỂU SÂU VỀ CHỮ THIS (Keyword this)
* Chữ this viết trong function A hay trong một method luôn luôn ám chỉ (refers to) cho một object và nắm giử value của object đó mặc dầu chúng ta chưa biết tên của object.Object nầy sẽ  kích động hay call ( will invoke or call) function A.
* Nếu chữ this viết ngoài function A thì  chữ this nắm giử undefined value, không ám chỉ tới object nào hết.

*Chúng ta xử dụng chữ this để tiếp cận (access to) với properties và methods của object.Nghĩa la chữ this làm đại diện cho invoking object của function A và chỉ có value nếu đứng trước tên của function A có chữ new gọi  là new operator. Nếu thiếu chữ new thì chữ this không hướng về object nữa nên không có object để invoke function A.

* Khi function A kićh động ( executes) thì  function A  sẽ lấy value của chữ this.Value của chữ this là value của object kich động function A có chứa chữ this.

* Khi dùng chữ this  trong function thì chúng ta nên biết ngay chữ this đại diên cho object.Thí dụ. Bé TUẤN CHAY QUÁ MAU VÌ NÓ SƠ TRỂ XE BUS. Tuấn là object, NÓ là chữ this .Vì không muốn lặp lại chữ TUẤN một lần nữa nên thay thế bằng chữ this.

HỌC VẼ CÁ DI CHUYỂN

HỌC VẼ CON CÁ DI CHUYỂN TRÊN PATH ELLIPSE.

SVG (Scalable Vector Graphics) là ngôn ngữ ( language ) dùng để vẽ hình hai chiều trong Browser bằng cách viết code, chữ và số trong XML đã thành tiêu chuẩn quốc tế W3 từ năm 1999. Do đó nếu Browser nào không hổ trợ SVG thì không thể vẽ gì được.

Với SVG,chúng ta có thể vẽ được 3 loại hình là : Vector Graphics Shapes, Images, Text

SVG có những tiện lợi là dễ thực hành, đơn giản, dễ nhớ và hình vẽ làm di động rất dể dàng với SMIL ( Synchronized Multimedia Integration Language ) nếu cần.

Chúng ta có thể làm hình vẽ SVG thu nhỏ hay phình lớn tuỳ theo kích thước của màn hình monitor nhưng hình không bị nhòa như hình bitmap vẽ bằng html 5 Canvas.

1-HỌC VIẾT CODES VẼ HÌNH ELLIPSE.

Đây là codes làm xuất hiên một hình ellipse .

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="100%" height="100%">

<g > 

 <ellipse cx ="300" cy="260" rx = "140" ry = "80"

 stroke="red" stroke-width="4" fill="none"/>

</g>

</svg>

Ghi chú hướng dẫn.

Toạ độ tâm của ellipse là cx ="300" cy="260"

Trục ngang và trục đứng của ellipse là rx = "140" ry = "80"

2-HỌC VIẾT CODES VẼ PATH ELLIPSE.

Vẽ  path ellipse rất phức tạp. Con cá chỉ có thể di chuyển trên path ellipse  chứ không thể di chuyển trên hình ellipse.

Đây là codes vẽ  path ellipse khép kín.

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="100%" height="100%">

<g> // Vẽ ellipse

<path id = "ellipse" 

       d = " M 225,275

                a 100,50  0  1,1  0,0.0009 " Z

           stroke = "red"  stroke-width = "4"  fill = "none" />

</g>

</svg>

GHI CHÚ HƯỚNG DẪN .

Tọa độ khởi hành là d = " M 225,275, chính là tâm của đường goị la ellipse path .

Phân tách những con số trong :  a 100,50  0  1,1  0,0.0009

a là command of elliptical arc.

100,50 là trục ngang và trục đứng của ellipse.

0 là góc quay bắt buộc phải có của ellipse.Nếu thiếu thì hình không hiện ra.

1,1 : số 1 đầu tiên là của large arc- flag  cho biết ellipse sẽ lớn hơn 180 độ và số 1 tiếp theo là của sweep-flag cho biết ellipse sẽ quay theo chiều dương cùng với chiều kim đồng hồ.Hai con số nầy bắt buộc phải có.

Tại sao ? Lý do như sau để chỉ cho chúng ta biết góc quay của trục ellipse path.

* 1,0 ellipse sẽ lớn hơn 180 độ và quay theo chiều ngược kim đồng hồ.

* 1,1 ellipse sẽ lớn hơn 180 độ và quay theo chiều kim đồng hồ.

* 0,1 ellipse sẽ nhỏ hơn 180 độ và quay theo chiều kim đồng hồ

* 0,0 ellipse sẽ nhỏ hơn 180 độ và quay theo chiều ngược kim đồng hồ.

0,0.0009 : con số nầy cho biết ellipse sẽ khép kin.

0,0.009 : con số nầy cho biết ellipse bị hở chút xíu.

0,1 : con số nầy cho biết ellipse sẽ hở rất lớn.

KHI CHÚNG TA HIỂU TỚI ĐÂY RỒI THÌ THA HỒ VẼ PATH ELLIPSE TUỲ Ý MUỐN

Điều kiện muốn vẽ ellipse path phải có 7 parameters nhưng người viết chỉ nêu ra phần thực hành mà thôi để giúp quý bạn không bị lẫn lộn khi muốn vẽ được ngay.

SVG có một đặc điểm rất hay gọi là transform attribute. Dùng đặc điểm nầy chúng ta có thể thay đổi vị trí của tọa độ, thay đổi hình dạ̣ng và thay đổi độ lớn hay độ nhỏ của hình vẽ mà không cần phải vẽ lại hình khác.

Transform attribute của SVG gồm có.

* transform=” translate(x,y)” để chuyển đổi vị trí toạ độ nếu hình vẽ bị che khuất.

  Thí dụ transform=” translate(175, 150)”.Nếu không xác định y thì default sẽ cho 0

* transform=” scale (x,y)” để thay đổi hình vẽ lớn hơn hay nhỏ hơn tùy ý.

  Thí dụ transform="scale(0.5)”.Nếu chỉ chọn một con số cho scale mà thôi thì tòan bộ thành phần của hình sẽ theo scale của con số đó.

* transform=”rotate(angle,cx,cy)” để xoay chuyển hình vẽ theo góc độ và thay đổi tâm (center ) của hình.

   Thí dụ transform=” rotate(45,100,100)”.Nếu không xác định cx và cy thì default sẽ rotate chung  quanh vị trí đã có ( rotates around the origin)

* transform=”skewX(angle)” làm hình nghiên vào trục X.

  Thí dụ transform=”skewX(5)”.Khỏang cách giữa hình và trục là tan của góc ( the distance of skew is the tan of the angle)

* transform=”skewY(angle)” làm hình nghiên vào trục Y

  Thí dụ transform=” skewY(5)"

3- RÁP CODES VẼ ELLIPSE PATH VÀO CHUNG VỚI CODES VẼ CÁ

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="100%" height="100%">

<g> //  Viết codes vẽ  path ellipse

<path id = "ellipse" 

           d = " M 225,275

                   a 180,100  0  1,1  0,0.0009 " Z

           stroke = "green"  stroke-width = "4"  fill = "none" />

</g>

<g transform="translate(-160,-160)">

// Viết codes vẽ con cá

<path d="M 200 160,C250 200,350 120,200 160,

          L 200 160,180 170,

          L 200 160,175 150,

          C 175 150,185 160,180 170 z"

          stroke="red" stroke-width="2" fill="green"/>

<circle cx="260" cy="155" r="3" stroke="black" fill="blue"/>

<animateMotion dur="10" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#ellipse"/>

</animateMotion>

</g>

</svg>

HƯỚNG DẪN VIẾT CODES VẼ CON CÁ.

Muốn cho con cá nằm trên hình ellipse path thì phải viết

<g transform=" translate(-160,-160)"> có chứa tọa độ  x = - 160, y= - 160

Nếu thiếu chữ translate thì tọa độ sẽ tự động theo default  là  ZERO.

Vì vậy khi vẽ hình theo SVG phải luôn nhớ viết chữ transform = " translate(x,y) “

Khi vẽ con cá  thì cần phải dùng đường cong có ký hiệu C nghĩa là curve, đường thẳng có ký hiệu L và vòng tròn ( trong bài nầy vẽ con mắt tròn của cá có bán kinh  r=3 px ở tọa độ cx=260  cy=155 )

Đây là tọa độ của con cá chưa có con mắt tròn. Và chưa có cái đuôi đầy đủ.

path d="M 200 160,C250 200,350 120,200 160,

          L 200 160,180 170,

          L 200 160,175 150 z"

Path khởi hành từ tọa độ M 200 160.,theo đường cong tới 3 tọa độ C 250 200,350 120,200 160,

Rồi theo đường thẳng tới 4 tọa độ  L 200 160,180 170, L 200 160,175 150

và tới 3 toạ độ C 175 150,185 160,180 170

Đây những tọa độ của cái đuôi cá. :  C 175 150,185 160,180 170

Muốn có đuôi đầy đủ thì viết tọa độ nầy vào như trên.

4-LÀM CHO CON CÁ DI CHUYỂN TỰ ĐỘNG VÀ KHÔNG DỪNG LẠI.

  THÌ VIẾT CODES NHƯ SAU CHO MỘT VÒNG DI CHUYỂN MẤT 10 seconds.

<animateMotion dur="10" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#uphill"/>

CON CÁ DI CHUYỂN CHUNG QUANH VÒNG ELLIPSE PATH

TẠO NÚT START VÀ STOP

<svg xmlns="http://www.w3.org/2000/svg"

         xmlns:xlink="http://www.w3.org/1999/xlink"

             width="100%" height="100%">

<g> //  Viết codes vẽ path ellipse

<path id = "ellipse"

           d = " M 225,275

                   a 180,100  0  1,1  0,0.0009 " Z

           stroke = "green"  stroke-width = "4"  fill = "none" />

</g>

<g transform="translate(-160,-160)">

// Viết codes vẽ con cá

<path d="M 200 160,C250 200,350 120,200 160,

          L 200 160,180 170,

          L 200 160,175 150,

          C 175 150,185 160,180 170 z"

          stroke="red" stroke-width="2" fill="green"/>

<circle cx="260" cy="155" r="3" stroke="black" fill="blue"/>

// Viết codes làm cá chuyển động có nút START Và STOP

<animateMotion dur="10" rotate="auto" repeatCount="indefinite"

 begin ="B.click" end="S.click">

<mpath xlink:href="#ellipse"/>

</animateMotion>

//Viết codes cuả nút START và STOP

</g>

<g id ="B">

<text x = "250" y = "150" font-size ="15"  font-family = "arial" fill="blue" >START</g>

<g id = "S">

<text x = "80" y = "50" font-size ="15"  font-family = "arial" fill="red" >STOP</g>

</g>

</svg>

 CẦU CHÚC QUÝ BẠN THỰC HÀNH THÀNH CÔNG.

Henry Dương (aka He H Dương)