hello html by voratep
Aug0
หลังจากเขียนแต่ฝั่ง server มาสักระยะ ก็ต้องมาทำในส่วนของหน้าแสดงผลซึ้ง ตั้งใช้ความรู้ หลายเรื่องมากเช่น html css ajax jquery ซึ้งผก็ยังไม่มีความรู้เลย เลยต้องมาศึกษา เพิ่มหน่อย ตัวแรก ที่ต้องศึกษาเลย ก็คือ html เพราะเป็นพื้นฐานของอย่างอื่น ครับ งั้นเรามาทำความรู้จัก html แบบเร่งรัดกันครับ
html คือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์ ที่มีลักษณะเป็นภาษาในเชิงการบรรยายเอกสารไฮเปอร์มีเดีย
(Hypermedia Document Description Language) เพื่อนำเสนอเอกสารนั้น เผยแพร่ในระบบเครือข่าย เว็บ นั้นเองครับ มันมีโครงสร้างการเขียน
ที่อาศัยตัวกำกับ เรียกว่า แท็ก (Tag) ควบคุมการแสดงผลของข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมบราวเซอร์ (Browser)
Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < )
และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 อย่าง
เป็น tag เดี่ยว กับ tag เปิด /ปิด ดังนี้ครับ
tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส
Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash (/) นำหน้าคำสั่งใน Tag นั้นๆ
**แต่ html 5 เปลี่ยนมาให้เขียนในรูปแบบ Tag เปิด/ปิด ทั้งหมด ครับ
ต่อไปเรามาเรียนรู้คำสั่งที่จำเป็นต้องใช้ของมันกันครับ
| Tag | คำอธิบาย |
|---|---|
| <!–…–> | กำหนดแสดงความคิดเห็น หรือ คอมเม้นต์ |
| <! DOCTYPE> | กำหนดชนิดของเอกสาร |
| <a> | กำหนดจุดยึด |
| <abbr> | กำหนดคำย่อ |
| <acronym> | กำหนดตัวย่อ |
| <address> | ข้อมูลการติดต่อผู้เขียนกำหนดสำหรับเจ้าของ / ของเอกสาร |
| <b> | กำหนดข้อความเป็นตัวหนา |
| <big> | กำหนดตัวอักษรขนาดใหญ่ |
| <blockquote> | กำหนดคำพูดยาว |
| <body> | ตัวกำหนดของเอกสาร |
| <br /> | กำหนดตัวแบ่งบรรทัดเดียว |
| <button> | กำหนดกดปุ่ม |
| <caption> | กำหนดคำอธิบายตาราง |
| <center> | เลิก. เป็นศูนย์กลางกำหนดข้อความ |
| <cite> | กำหนดการอ้างอิง |
| <code> | กำหนดข้อความรหัสคอมพิวเตอร์ |
| <col /> | คุณลักษณะที่กำหนดค่าสำหรับคอลัมน์อย่างน้อยหนึ่งในตาราง |
| <colgroup> | กำหนดกลุ่มของคอลัมน์ในตารางสำหรับการจัดรูปแบบ |
| <dd> | กำหนดรายละเอียดของคำในรายการคำจำกัดความ |
| <del> | กำหนดลบข้อความ |
| <dfn> | กำหนดคำนิยามคำ |
| <dir> | เลิก. กำหนดรายการไดเรกทอรี |
| <div> | ส่วนกำหนดในเอกสาร |
| <dl> | กำหนดรายละเอียด |
| <dt> | กำหนดระยะ (รายการ) ในรายการความละเอียด |
| <em> | กำหนดในการเน้นข้อความ |
| <fieldset> | กำหนดเส้นขอบรอบ ๆ องค์ประกอบในรูปแบบ |
| <font> | เลิก. กำหนดตัวอักษรสีและขนาดของข้อความ |
| <form> | กำหนดรูปแบบ HTML ในการเข้าของผู้ใช้ |
| <frame /> | กำหนดหน้าต่าง (กรอบ) ใน frameset |
| <frameset> | กำหนดชุดของเฟรม |
| <h1>,<h2>,<h3>,<h4>,<h5>,<h6> | HTML กำหนดหัวเรื่อง |
| <head> | กำหนดข้อมูลเกี่ยวกับเอกสาร |
| <hr /> | กำหนดเส้นแนวนอน |
| <html> | กำหนดเอกสาร HTML |
| <i> | กำหนดตัวเอียง |
| <iframe> | กำหนดเฟรมแบบอินไลน์ |
| <img /> | กำหนดภาพ |
| <ins> | กำหนดแทรกข้อความ |
| <isindex> | เลิก. กำหนดดัชนีค้นหาที่เกี่ยวข้องกับเอกสาร |
| <label> | กำหนดป้ายชื่อสำหรับองค์ประกอบเข้า |
| <li> | กำหนดรายการ |
| <link /> | กำหนดความสัมพันธ์ระหว่างเอกสารและทรัพยากรภายนอก |
| <meta /> | กำหนดข้อมูลเมตาเกี่ยวกับเอกสาร HTML |
| <noframes> | กำหนดเนื้อหาสำรองสำหรับผู้ใช้ที่ไม่สนับสนุนการใช้เฟรม |
| <noscript> | กำหนดเนื้อหาสำรองสำหรับผู้ใช้ที่ไม่สนับสนุนสคริปต์ฝั่งไคลเอนต์ |
| <object> | กำหนดวัตถุฝังตัว |
| <optgroup> | กำหนดกลุ่มของตัวเลือกที่เกี่ยวข้องกันในรายการให้เลือก |
| <option> | กำหนดตัวเลือกในรายการเลือก |
| <p> | กำหนดย่อหน้า |
| <param /> | กำหนดพารามิเตอร์สำหรับวัตถุ |
| <pre> | กำหนดจัดรูปแบบล่วงหน้าข้อความ |
| <q> | กำหนดคำพูดสั้น ๆ |
| <s> | เลิก. กำหนดตัวอักษรขีดทับ |
| <script> | กำหนดสคริปต์ฝั่งไคลเอนต์ |
| <select> | กำหนดรายการเลือก (รายการแบบหล่นลง) |
| <small> | กำหนดตัวอักษรขนาดเล็ก |
| <span> | ส่วนกำหนดในเอกสาร |
| <strike> | เลิก. กำหนดตัวอักษรขีดทับ |
| <strong> | กำหนดข้อความที่แข็งแกร่ง |
| <style> | ข้อมูลสำหรับกำหนดรูปแบบเอกสาร |
| <sub> | กำหนด subscripted ข้อความ |
| <table> | กำหนดตาราง |
| <tbody> | กลุ่มเนื้อหาตัวในตาราง |
| <td> | กำหนดเซลล์ในตาราง |
| <textarea> | กำหนดหลายสายการควบคุมการป้อนข้อความ |
| <tfoot> | กลุ่มเนื้อหาส่วนท้ายในตาราง |
| <th> | กำหนดส่วนหัวของเซลล์ในตาราง |
| <thead> | กลุ่มเนื้อหาส่วนหัวในตาราง |
| <title> | กำหนดชื่อเรื่องของเอกสาร |
| <tr> | กำหนดแถวในตาราง |
| <u> | เลิก. กำหนดขีดเส้นใต้ |
| <var> | ส่วนกำหนดตัวแปรของข้อความ |
ครับ ตอนนี้เราก็ทราบคำสั่งพื้นฐานของ html แล้วน่ะครับ
วิธีการจัดการ ไฟล์ unit test by voratep
Jul0
ในการ เขียน งานขึ้นมาสักงานหนึ่ง ไม่มีทางที่จะเขียนทุกอย่างๆลง ไฟล์ๆ เดียวได้ ต้องมีการแยกหมวดหมู่ออกมาโดยในที่นึ้
เราใช้วิธีการ เขียนแบบ MVC
เพราะฉะนั้นตัวไฟล์ของ unit test นั้น ก็ควรที่จะแบ่งเขียนออกมาตาม class เพื่อให้ง่ายต่อการเรียกใช้งาน ดังรูป
แต่จะมีปัณหาเมื่อผู้ใช้ต้องการที่จะรันทุกไฟล์ เพื่อตรวจสอบการทำงานของโปรแกรมทั้งหมดจะให้รันทีละไฟล์ก็เหนื่อยไป เราสามารถแก้ปัณหานี้ได้โดย
เอาทุกไฟล์มารวมไว้อยู่ใน โฟว์เดอร์เดียวกัน ในที่นี้ ใช้ testall
และผู้ใช้ก็สามารถใช้ คำสั่ง mocha ชื่อโฟว์เดอร์ ที่ต้องการ ได้เลยครับ ไม่จำเป็นต้อง ทีละไฟล์ แล้วสะดวกไหมล่ะครับ ^^
วิธีการออกแบบฐานข้อมูลบน redis by voratep
Jun0
redis นั้นเป็นฐานข้อมูลชนิดหนึ่งที่เป็น no-sql จึงทำให้มันไม่มีโครงสร้างตายตัว
โดยหลักการของมันนั้น จะทำการเก็บแบบ Key/Value โดย value ของมันจะเป็นแค่ string เท่านั้นน่ะครับ
ยกตัวอย่างเช่น
-> set key value
-> get key เพื่อเอาค่าของมัน
การทำงานหลักของมันมีแค่นี้ครับ แต่ในความเป็นจริงเราเก็บข้อมูลที่ซ้ำซ้อนมากกว่านี้มากครับ
ซึ่งวันนี้ผมก็จะนำนำทริกในการเก็บข้อมูลลง redis ให้มีประสิทธิภาพ มากยิ่งขึ้นครับ
– รู้จักคำสั้งพื้นฐานกันก่อน
set :: คำสั่งพื้นฐานในการเก็บข้อมูลครับ
get :: คำสั่งแสดงข้อมูล โดยคำสั่ง get จะตามด้วย key ที่ต้องการ
key :: เป็นคำสั่งที่ใช้สำหนับดู key บนฐานข้อมูลของเรา
สามารถทดลองคำสั้งได้ที่ redis.io
การเก็บข้อมูลในรูปแบบตาราง
การเก็บข้อมูลในรูปแบบของตารางนั้น สามารถใช้คำสั่งต่อไปนี้ครับ
ทีละ field
hset :: hset key ชื่อfield1 ” ค่า ”
hget ::hget key ชื่อfield1
ทีละหลายๆ field สามารถส่งเป็น array ได้ ครับ
hmset :: HMSET key ชื่อfield1 ” ค่า ” ชื่อfield2 “ค่า”
hmget :: จะเป็นการ คิวรี่ค่าออกจาก key โดยกำหนด ชื่อ field เข้าไปด้วยครับ
*hgetall :: จะเป็นคำสั่งที่เอาไว้แสดง value ของ field ทุก field ของ key นั้นๆ ครับ
ตัวอย่าง hgetall key
จะได้ข้อมูลออกมาเป็น array [ field : value ] ครับ
—————————————————————–
การตั้งชื่อ key ก็สำคัญ
การตั้งชื่อ key นั้นก็สำคัณในการค้นหาข้อมูลได้
เช่น เราตั้งชื่อ keyด้วยชื่อ ชื่อkey:ไอดีของผู้เล่น
เราสามารถใช้ คำสั้ง key ชื่อkeyที่ต้องการจะหา ตามด้วยเครื่องหมาย *
เช่น key monster:*
จะเป็นการแสดง keyทั้งหมดที่มี monster: นำหน้า ทำไห้เราสามารถนำkey นั้นมาวนหาค่าได้อีกด้วยครับ
การเขียน javascript ในรูปแบบ oop by voratep
May0
oop (Object Oriented Programming)
เป็นหลักการ เขียนโปรแกรมชนิดหนึ่งครับ บางคนอาจจะนึกไม่ออกแต่ถ้า บอกว่า เขียนในรูปแบบของ class กับ object หลายๆคนคงจะนึกออกน่ะครับ
แต่การเขียน javascript ในรูบแบบของ oop นั้นจะมีวิธีการเขียนที่แปลกสักหน่อย ครับ ดังนี้ครับ
รูปแบบการเขียน
จากตัวโครงสร้างการเขียน class เราจะสร้าง class Foo ขึ้นมา โดย
function Foo() {
}
จะเป็นเหมือนการประกาศ class ครับ
ส่วนการสร้าง Constructor จะเป็นการรับค่ามาจาก parameter
ในรูปแบบของ
function Foo(bar) {
// การสร้าง Constructor กับ Attribute
this.bar = bar;
this.baz = ‘baz’; // default value
}
โดย ใช้ this. การสร้าง Attribute ขึ้นมา
และส่วนการสร้าง Method นั้น จะใช้การเขียนแบบนี้ครับ
Foo.prototype.fooBar = function() {
};
ชื่อ class.prototype.ชื่อMethod = function ที่เราจะสร้าง
แต่ ชื่อ class.prototype. นั้นสามารถ ตามด้วย Attribute ได้ แต่ ค่าตัวนั้นจะเป็นค่า ของ class
คือ Object ที่สร้างจาก class นี้จะมีค่า เหมือนกัน เหมือนตัวอย่างนี้ ครับ
var Foo = function (name) { this.name = name; };
Foo.prototype.data = [1, 2, 3];
Foo.prototype.showData = function () { console.log(this.name, this.data); };
var foo1 = new Foo(“foo1″);
var foo2 = new Foo(“foo2″);
foo1.showData(); // “foo1″, [1, 2, 3]
foo2.showData(); // “foo2″, [1, 2, 3]
// ถ้าเราเพิ่ม ค่าลง ( prototype.data )
foo1.data.push(4);
// obj ทั้ง 2 จะเหมือนกัน
foo1.showData(); // “foo1″, [1, 2, 3, 4]
foo2.showData(); // “foo2″, [1, 2, 3, 4]
ประมาณนี้ครับ แต่ถ้าต้องการ แยก class ออกมาอีกไฟล์หนึ่งก็ใช้
module.exports = Foo;
ออกมาครับ
การทำ callback หลังจบลูป by voratep
Apr0
ในการใช้งานของ node.js นั้น จะมีพื้นฐานการทำงานแบบ Asynchronous ทำให้บางครั้ง
การที่เราต้องการค่าตัวสุดท้ายที่ออกมาจากลูป นั้นทำได้ยากมาก
ตัวอย่างเช่น
เรามี array อยู่ 1 ชุดจากนั้นเราต้องการ เอาค่าต่างๆใน array ชุดนั้นมาเข้าฟังก์ชั่นที่ต้องรอ callback อีกทีหนึ่ง
แล้วเราก็ต้อง callback ค่าที่ได้นั้นๆออกมาเป็น array อีกที เราจะมีวิธีเขียนเพื่อทำงานในลักษณะนี้ยังไง
วิธีแก้ไขปัญหานี้ เราจะใช้ parallel ของ async lib เข้ามาช่วยโดยโครงสร้างของมันมีดังนี้
parallel(tasks, [callback])
async.parallel([
function(callback){
setTimeout(function(){
callback(null, 'one');
}, 200);
},
function(callback){
setTimeout(function(){
callback(null, 'two');
}, 100);
}
],
// optional callback
function(err, results){
// results จะมีค่าเป็น array [one,two]
});
จากตัวอย่างการเขียนเราสามารถเขียน เป็น Array ของ function ให้เสร็จก่อนแล้วค่อยเรียกใช้งาน parallel ได้ แต่สิ่งที่เราต้องการนั้น
เราต้องเอาค่าใน array ไปเรียกใช้ function ก่อนด้วย จะมีลักษณะ การใช้ดังนี้
var aData = [1,2,3];
var aFunc = [];
for (var i in a)
{
//สั่งให้ มันรันคำสั่งนี้ทันที
(function(){
var temp = a[i];
var func = function(callback){
// เรียกฟังก์ชัน อืนเพื่อประมวนผลก่อน
funcA (temp, function(result){
callback(null,result);
}
};
aFunc.push(func);//เก็บ function ลง array
})();
}
async.parallel(aFunc,function(err,results){
//จะได้เป็น array ของข้อมูลที่ออกมาจากฟังก์ชั้น funcA});
Who are we?
