Blog For Programmer.

Thursday, June 20, 2013

Javascript : การใช้ข้อมูลชนิด Hash

Javascript : การใช้ข้อมูลชนิด Hash
Javascript : How to use data type "Hash"

การกำหนดตัวแปรชนิด hash เราจะกำหนดข้อมูลลงในเครื่องหมาย ปีกกา
key1 เป็นชื่อของข้อมูลนั้นๆ เป็นข้อความ และ value1 คือ ข้อมูลของ key1 ซึ่งจะเป็นอะไรก็ได้ ไม่ว่า ตัวเลข ข้อความ หรือ อื่นๆ ดังที่ได้กล่าวแล้ว
ข้อมูลชนิด hash ก็เหมือนข้อมูลชนิดอื่นๆของ Javascript คือเป็น Object
การอ้างถึงข้อมูลชนิด hash สามารถอ้างถึงด้วย key โดยที่ไม่ต้องเรียงลำดับ เช่น hash.key1 hash.key2 เป็นต้น
ประโยชน์ของข้อมูล hash ก็เหมือนกับข้อมูลอื่นๆทั่วๆไป แต่สำหรับ Frame Work แล้ว มันมีความหมายพิเศษ

ทำไมจึงต้องใช้ข้อมูล hash ใน Frame Work

เวลาเราสร้าง Function ใน Javascript บางครั้งเราอาจจะสร้าง Function ที่มีการส่งค่าเข้าไปซึ่งโดยปกติถ้าส่งค่าเข้าไป 1 ถึง 2 ตัวก็อาจจะไม่พบปัญหาอะไร function showData(data1,data2)
แต่ถ้า function ที่เราสร้างขึ้นมีการส่งค่าเข้าไป 20 ตัวแล้วเราต้องการส่งค่า เฉพาะตัวที่ 20 อย่างเดียว

ชนิดข้อมูลแบบ Hash ช่วยท่านได้

เช่น
<script type='text/javascript'>
var varOption={key20:'This is key20'};
    function showData(option){
         this.option={
           key1:'',key2:'',key3:'',key4:'',key5:''
           ,key6:'',key7:'',key8:'',key9:'',key10:''
           ,key11:'',key12:'',key13:'',key14:'',key15:''
           ,key16:'',key17:'',key18:'',key19:'',key20:''
       };
       alert(option.key20);
    }
showData(varOption);
</script>

Result :
จะได้ แสดง alert box ขึ้นมาว่า "This is key20"

Wednesday, November 7, 2012

jQuery : Sort Dropdown list items using jQuery

jQuery : Sort Dropdown list items using jQuery

Javascript
<script type='text/javascript'>
$(document).ready(function() {
    $('#btnSort').click(function(e) {
        $("#ddlList").html($('#ddlList option').sort(function(x, y) {
            return $(x).text() < $(y).text() ? -1 : 1;
        }))
        $("#ddlList").get(0).selectedIndex = 0;
        e.preventDefault();
    });

    $('#btnSortVal').click(function(e) {
        $("#ddlList").html($('#ddlList option').sort(function(x, y) {
            return $(x).val() < $(y).val() ? -1 : 1;
        }))
        $("#ddlList").get(0).selectedIndex = 0;
        e.preventDefault();
    });
});
</script>

HTML
<select id="ddlList">
<option value="3">Three</option>
<option value="1">One</option>
<option value="0">Zero</option>
<option value="2">Two</option>
<option value="8">Eight</option>
</select>
<br/><br/>
<input type="button" id="btnSort" Value=" Sort Dropdown By Text " />
<input type="button" id="btnSortVal" Value=" Sort Dropdown By Value " />

Monday, September 17, 2012

jQuery : การเรียกใช้ jQuery

หลังจากที่เรา Download file jquery มาแล้ว
จะได้ ไฟล์ ดูรูปนะครับ
ในที่นี้เป็น Version 1.8.1 นะครับ

ให้เราสร้าง ไฟล์ขึ้นมา 1 ไฟล์นะครับ ในที่นี้จะสร้าง ไฟล์ เป็น file1.html นะครับ


<meta charset='utf-8'>

<script type='text/javascript' src='jquery-1.8.1.min.js'></script>

<script type='text/javascript'>
$(function(){
alert('test');
});
</script>

หลังจากนั้นเราลองเรียกไฟล์ที่เราเขียนขึ้นนะครับ มันจะแสดง alert box ว่า test
แสดงว่าใช้งาน jQuery ได้แล้วครับ

อธิบายนะครับ
<meta charset='utf-8'>
-การ encode page นั้นๆ เป็น utf-8

<script type='text/javascript' src='jquery-1.8.1.min.js'></script>
-การเรียกใช้ jquery ไฟล์

-$(function(){}); หมายถึงเมื่อ page โหลดจะโหลดคำสั่งที่อยู่ภายใต้ {} โดยเราสามารถเขียน คำสั่งแบบ jquery หรือ javascript ได้เลย

ถ้าไม่เข้าใจตรงไหนสอบถามได้นะครับ

BY N1B

JQuery : เริ่มต้นกับ JQuery

JQuery : เริ่มต้นกับ JQuery

Website สำหรับ Download ตัว Framework

http://www.jquery.com/

ให้เรา Download มานะครับโดยกดที่ Download (jQuery);

จะได้เป็น .js มานะครับผม

บทต่อไปเราจะมารู้จักวิธีการใช้งานนะครับผม

BY N1B

Friday, September 14, 2012

PHP : Create font for my web.(มาสร้าง Font ใช้บน Website ของเรากัน)

มาสร้าง Font ใช้บน Website ของเรากัน

http://www.fontsquirrel.com/fontface/generator

หลังจากนั้นให้ สร้าง ไฟล์ ชื่ออะไรก็ได้ .html

แล้วใส่ code ดังนี้

body{

font-family: 'db_king84regular';

font-size:50px;

}

</style>

<body>

บทความดีๆ ยังมีอีกเยอะ ขอให้ติดตามกันต่อไปนะครับ

</body>

Result

BY N1B

PHP : Create Class INPUT TAG

class Input{

var $json;

var $prop;

var $attr;

function Input(){}

function setProp($json='',$oldJson=''){

$this->json=$json;

if($oldJson!=''){

$merge=array_merge(json_decode($oldJson,true),json_decode($this->json,true));

$this->json=json_encode($merge);

}

$this->prop=json_decode($this->json,true);

$this->attr='';

foreach($this->prop as $key1=>$value1){

$this->attr.=strtoupper($key1).'=';

if(is_array($value1)){

$style='';

foreach($value1 as $key=>$value){

$style.=$key.':'.$value.';';

}

$this->attr.='\''.$style.'\' ';

}

else{$this->attr.='\''.$value1.'\' ';}

}

function getProp(){return $this->json;}

function setVisible($boolean=true){return '<INPUT '.$this->attr.'/>';}

}

$txt=new Input();

$txt->setProp('{

"type":"password",

"name":"txtUsername",

"id":"txtUsername",

"style":{"height":"30px","font-weight":"bold","border":"1px solid #0099FF"}

}');

print $txt->setVisible(true);