THÂN CHÀO QUÝ BẠN
Blogger nầy chỉ tồn trử kiến thức và kinh nghiệm về nghề “Materials Testing”, “Textile Screen Printing” và “Internet Programming” của một kỹ sư đã phục vụ tại :
* Trung Tâm Khảo sát Kỹ Thuật Quân Nhu /QLVNCH “ & “ Viện Quốc Gia Định Chuẩn/VNCH”
* Xí nghiệp “Hiệp Hưng / VN” ( sãn xuất giày vãi cao su )
"Bradbury Company Inc/USA"(Textile Screenprinting,Imprinted Sportswear Programs) & “Sundance Graphics Inc / USA” ( in bông vãi sợi ) từ năm 1965 để dành cho thế hệ trẻ muốn học nghề.
Vạn Vật Thái Bình (PEACE ON EARTH).

Tuesday, December 29, 2015

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.

Friday, December 11, 2015

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