บันทึกเล็กๆของผ้มมม...

Thursday, May 3, 2012

ลองเล่น jQuery UI

ข้อมูลจาก jqueryui.com ครับ

jQuery UI (UI = User Interface) ก็คือ widget หรือ interface ที่ออกแบบมาให้ใช้กับเว็บ ทำให้เว็บมีปฏิสัมพันธ์กับผู้ใช้ได้สะดวกและสวยงามขึ้น ซึ่ง jQuery UI เองก็ถูกพัฒนาโดยใช้ jQuery ซึ่งเป็น javascript library อย่างหนึ่ง (jquery.com)

ลองมาดูตัวอย่างการใช้งานครับ ในที่นี้เราจะลองใช้ datepicker widget หรือ calendar widget เพื่อป้อนข้อมูลวันที่ ดังนี้ครับ

การติดตั้งและขั้นตอนการใช้งาน ดูได้จาก http://jqueryui.com/docs/Getting_Started โดยสรุปสั้นๆว่า

ไปดาวน์โหลด jQuery UI มาก่อน สามารถเลือก theme หรือเลือกเฉพาะ widget ก็ได้ ถ้าอยากได้ง่ายๆไม่ต้องทำอะไรมากก็ดาวน์โหลดตัวปกติได้ที่หน้าหลัก เช่น http://jqueryui.com/download/jquery-ui-1.8.20.custom.zip
แตกไฟล์ออกมา จะมีไดเรกทอรี js (jQuery), css, development-bundle (เอกสาร, ตัวอย่าง, UI) และไฟล์ index.html
ใช้ text editor เปิดไฟล์ index.html จะเห็นว่ามี 3 บรรทัดคือ

< link type="text/css" href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
< script type="text/javascript" src="js/jquery-1.7.1.min.js" > < /script >
< script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js" > < /script >

จากนั้นให้สร้างไฟล์ html ของเราที่จะใช้งาน เช่น testUI.html แล้วนำโค้ดข้างต้นมาเพิ่ม พร้อมกับเติม textbox ที่ต้องการป้อนค่าวันที่เข้าไป เช่น

<html>
<head>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
    <div>
    <p>    Date <input type="text" name="date" id="date" /> </p> </div>
</body>
</html>

ต่อมาให้สร้างไฟล์ javascript เช่น myScript.js ให้สอดคล้องกับไฟล์ html ที่อ้างถึง แล้วเพิ่มรายละเอียด ได้แก่

$(function(){
    $('#date').datepicker();
});

บันทึกไฟล์ทั้งหมด แล้วลองเปิดไฟล์ html ก็จะได้ผลลัพธ์ตามต้องการครับ

อย่างไรก็ตาม วันที่ที่ป้อนจะเป็น เดือน/วัน/ปี โดยอัตโนมัติ เราสามารถเปลี่ยนรูปแบบให้เป็น วัน/เดือน/ปี ได้โดยกำหนด

$(function(){
    $('#date').datepicker({ dateFormat: "dd/mm/yy" });
});

เอกสารอ้างอิง

http://jqueryui.com/docs/Getting_Started
http://jqueryui.com/demos/datepicker/
http://jquery.com

Wednesday, May 2, 2012

การใช้แท็ก div + style เพื่อกำหนด layout

ปรับเปลี่ยนและอ้างอิงจาก http://www.w3schools.com/html/html_layout.asp ครับ

Content

HTML โค้ดครับ

<html>
<body>

<div id="container" style="width:100%">

<div id="header" style="background-color:#98BF21;">
<h1 style="margin-bottom:0;text-align:center">Title</h1></div>

<div id="menu" style="background-color:#AAAAAA;height:200px;width:20%;float:left;">
<b>Menu</b><br />
First<br />
Second<br />
Third</div>

<div id="content" style="background-color:#CCCCCC;height:200px;width:80%;float:left;">
Content</div>

<div id="footer" style="background-color:#98BF21;clear:both;text-align:center;">
Copyleft © 2012</div>

</div>

</body>
</html>

HTML quick reference

ข้อมูลจาก http://www.w3schools.com/html/html_quick.asp ไว้สำหรับอ้างอิงครับ

HTML Basic Document

<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body> </html>

Heading Elements

<h1>Largest Heading</h1> <h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Unordered list

Ordered list

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
    <th>Tableheader</th>
    <th>Tableheader</th>
</tr>
<tr>
    <td>sometext</td>
    <td>sometext</td>
</tr>
</table>

Iframe

Frames

Forms

<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />

<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>

</form>

Entities

Other Elements

<blockquote>
Text quoted from a source.
</blockquote>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

Tuesday, May 1, 2012

โจทย์เกมส์ OX

ลองมาเขียนโปรแกรมเกมส์ OX แบบคอนโซลง่ายๆกันครับ

กติกา

ผู้เล่นคือ O กับ X เล่นสลับกัน
ตารางแสดงด้วยเลข 1-9
ห้ามเลือกเลขที่ถูกเลือกไปแล้ว
มีการตรวจสอบการชนะ คือแนวนอน แนวตั้ง และทะแยง
มีการตรวจสอบถ้าเสมอกัน

ผลลัพธ์ที่ต้องการ
กรณีมีผู้ชนะ

กรณีเสมอไม่แสดงรูปนะครับ ยาวเกิน

กรณีเลือกตำแหน่งซ้ำ โปรแกรมจะถามให้ป้อนใหม่เรื่อยๆจนกว่าจะถูก

ถ้าจะเช็คว่าป้อนเป็นตัวเลขอยู่ในช่วง 1-9 ได้ก็จะดีมากครับ

Saturday, March 3, 2012

ลองเล่น Linux Mint

หลังจากไม่ได้แตะ linux มานานมากกกก ด้วยไม่มีเวลาและไม่แน่ใจว่า linux จะสนับสนุนอุปกรณ์อย่างเพียงพอแล้วหรือยัง

ช่วงนี้ได้โอกาส เลยลองติดตั้ง Ubuntu 12.04 .....สวย แต่หน้าตาและการใช้งานไม่คุ้นเลย ต่างกับวินโดวส์พอสมควร

ไปค้นหาในเน็ต เว็บ distrowatch.com ให้ข้อมูลว่า page hit ในช่วงเดือนของ Linux Mint สูงกว่าใครเพื่อน อย่างนี้ต้องลอง

ไปดาวน์โหลด iso ที่ linuxmint.com มา มี mint4win สำหรับให้ติดตั้งบนวินโดวส์แบบ wubi ชอบมากๆ ไม่อยากไปปวดหัวกับการแบ่งพาร์ทิชันกับเอา grub ออกตอนเลิกใช้

ผลการทดลอง
1. mint เหมือนกับ ubuntu ยังกับแกะ เนื่องจากมีฐานมาจาก debian เหมือนกัน และยังออกตาม release ของ ubuntu ด้วย (แต่ตอนหลังรู้สึกว่าจะไม่)
2. มี mint4win เหมือน wubi เป๊ะ
3. ติดตั้งง่าย รวดเร็ว น่าจะเร็วกว่าวินโดวส์มากพอควร

ข้อด้อย
1. สนับสนุนฮาร์ดแวร์คล้ายๆกัน หาอะไรไม่เจอก็ไม่เจอเหมือนกัน เช่น ไม่เจอ wireless usb adapter ของ d-link dw-125 :( ต้องหาวิธีติดตั้งในเน็ต (http://kaustav.codebinders.com/2011/10/install-dwa-125-wireless-driver-on-ubuntu-11-10.html)
2. ยังมีปัญหากับ switchable graphics ทำให้ผมลงบนโน้ตบุ้คแบบนี้ไม่ได้ เครื่องจะร้อนตลอดเวลา

ข้อเด่น
1. สวย สวยกว่า ubuntu ด้วย
2. หน้าจอคล้ายวินโดวส์ ใช้งานง่ายกว่า ubuntu
3. เรียกใช้ terminal ง่ายกว่า คลิกขวาก็เรียกได้
4. อะไรที่ใช้ได้กับ ubuntu ก็ใช้ได้กับ mint แก้ปัญหาก็เหมือนๆกัน
5. ฟอนต์ไทยที่มีมาให้มีน้อยกว่า ubuntu

โดยรวมแล้วถ้าเครื่องคอมฯใครไม่มีอุปกรณ์ต่อพ่วงที่แปลกๆ mint หรือ ubuntu ก็น่าจะสนับสนุนเต็มที่โดยไม่ต้องลงอะไรเพิ่ม ฟรีและสวยแบบนี้ น่าลองครับ