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

Result

มีตรงไหนสงสัยถามได้เลยนะครับ

BY N1B

Tuesday, August 28, 2012

PHP : Convert Array To String(การแปลงจากตัวแปรชุดเป็นข้อความ)

PHP : Convert Array To String(การแปลงจากตัวแปรชุดเป็นข้อความ)

<?
$arr=array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
$str=implode(',',$arr);
print $str;

?>

Result (ผลลัพธ์)
A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z

BY N1B

Monday, August 27, 2012

JQuery : Multiple jQuery Get Scripts

/* enhance $.getSctipt to handle mutiple scripts */
var getScript = jQuery.getScript;
jQuery.getScript = function( resources, callback ) {

var // reference declaration & localization
length = resources.length,
handler = function() { counter++; },
deferreds = [],
counter = 0,
idx = 0;

for ( ; idx < length; idx++ ) {
deferreds.push(
getScript( resources[ idx ], handler )
);
}

jQuery.when.apply( null, deferreds ).then(function() {
callback && callback();
});
};

$.getScript(['script1.js','script2.js','script3.js'], function() {
//do something after all scripts have loaded
});

//or seperate into an array to include

var scripts = ['script1.js','script2.js','script3.js'];
$.getScript(scripts, function(data, textStatus) {
//do something after all scripts have loaded
});

Tuesday, August 21, 2012

PHP : Get Client IP

ฟังชั่นนี้เป็นการแสดงค่า IP ของเครื่องคอมพิวเตอร์ที่ เข้ามาดูเว็บเรานะครับ

function getClientIP(){
if(!empty($_SERVER['HTTP_CLIENT_IP'])){
$ip=$_SERVER['HTTP_CLIENT_IP'];
}
else if(!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
$ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
}
else {
$ip=$_SERVER['REMOTE_ADDR'];
}
return $ip;
}

print getClientIP();

BY N1B

Thursday, July 26, 2012

JQuery : ค่า Index ของ Checkbox

JQuery : ค่า Index ของ Checkbox

<input type="checkbox" name="checkbox[]">A
<input type="checkbox" name="checkbox[]">B
<input type="checkbox" name="checkbox[]">C
<input type="checkbox" name="checkbox[]">D
<input type="checkbox" name="checkbox[]">E
<input type="checkbox" name="checkbox[]">F
<input type="checkbox" name="checkbox[]">G

A B C D E F G

เราจะได้ ตามรูปเลย คราวนี้เราจะรู้ได้ยังไง ว่า checkbox ตัวไหนเป็น index อะไร
ตามตัวอย่างเลยนะครับ

<script type='text/javascript'>
$(function(){
$('input[name="checkbox[]"]').click(function(){
var checkBoxIndex=$('input[name="checkbox[]"]').index($(this));
alert(checkBoxIndex);
});
});
</script>

ยังไงก็ลองเอาไปประยุกต์ ใช้กับอย่างอื่นนะครับ

BY N1B

Monday, July 23, 2012

Thursday, July 19, 2012

JQuery : วิธีการตรวจสอบว่าเราใช้ Browser อะไรอยู่

JQuery : วิธีการตรวจสอบว่าเราใช้ Browser อะไรอยู่

ตามตัวอย่างเลยนะครับ

$(function(){
//Firefox
if($.browser.mozilla){alert('Firefox');}
//Safari
else if($.browser.safari){alert('Safari');}
//Opera
else if($.browser.opera){alert('Opera');}
//IE
else if($.browser.msie){alert('IE');}

//Check
alert($.browser.version);
});

ลองเอาไปประยุกต์ใช้กันดูนะครับ

BY N1B

Monday, July 16, 2012

JQuery : การใส่ค่า Index ของ Object นั้นๆ

JQuery : การใส่ค่า Index ของ Object นั้นๆ ด้วย :eq

ใน JQuery นั้นเวลาเราเลือก Elements เป็นแบบ Class หรือ Name[] (ที่เป็น Array) เราจะได้ค่ามาเป็น Array เพราะฉะนั้นถ้าเราต้องการกำระบุว่าเป็น Array ตัวไหนให้ทำดังนี้นะครับ

เช่น ถ้าเรามี Elements ดังนี้

//เรามี DIV ทั้งหมด 6 อัน ตามด้านล่างนี้ นะครับ
<div class="divBox">A1</div>
<div class="divBox">A2</div>
<div class="divBox">A3</div>
<div class="divBox">A4</div>
<div class="divBox">A5</div>
<div class="divBox">A6</div>

//เรากำหนดให้ .divBox เป็นดังนี้
/*
background-color เป็น รหัสสี #0099FF
ความสูง เป็น 25px
ความกว้าง เป็น 100px
*/
$('.divBox').css({
'background-color':'#0099FF'
,'height':'25px'
,'width':'100px'
});

แล้วคราวนี้ถ้าเราต้องการให้ A2,A3,A4,A5,A6 ความกว้างเป็น 90px,80px,70px,60px,50px ตามลำดับเราจะทำยังไง สำหรับคนที่ยังไม่รู้ ก็ลองดูตามนี้เลยครับผม
$('.divBox:eq(1)').css({'width':'90px'}); //DIV อันนี้จะเป็นของ A2
$('.divBox:eq(2)').css({'width':'80px'}); //DIV อันนี้จะเป็นของ A3
$('.divBox:eq(3)').css({'width':'70px'}); //DIV อันนี้จะเป็นของ A4
$('.divBox:eq(4)').css({'width':'60px'}); //DIV อันนี้จะเป็นของ A5
$('.divBox:eq(5)').css({'width':'50px'}); //DIV อันนี้จะเป็นของ A6

ลองเอาไปประยุกต์กับทางอื่นดูนะครับ
มีข้อสงสัยโพสถามได้เลยนะครับ

BY N1B

Friday, July 13, 2012

PHP : Tip การรวมค่าของ JSON สองค่าเข้าด้วยกัน

PHP : Tip การรวมค่าของ JSON สองค่าเข้าด้วยกัน

<?
$bJSON1='{"firstName":"Natthapong"}'; //กำหนดค่าแบบ JSON ให้กับตัวแปร $bJSON1
$bJSON2='{"lastName":"Charoenporndeengam"}'; //กำหนดค่าแบบ JSON ให้กับตัวแปร $bJSON1

$bArr1=json_decode($bJSON1,true); //ถอดรหัส json ให้เป็น array ต้องใส่ true ด้วยนะครับ
$bArr2=json_decode($bJSON2,true); //ถอดรหัส json ให้เป็น array ต้องใส่ true ด้วยนะครับ

$arr=array_merge_recursive($bArr1,$bArr2); //อันนี้เป็นการรวม array

$bJSON=json_encode($arr); //เราก็เอา array ที่รวมมาเข้ารหัส json อีกครั้ง

ผลลัพธ์
{
"firstName":"Natthapong"
,"lastName":"Charoenporndeengam"
}

มีข้อสงสัยตรงไหน post ถามได้เลยนะครับ

BY N1B
?>

Wednesday, July 11, 2012

CSS : การใช้ DIV กับ z-index

z-index คืออะไร ง่ายๆ นะครับ คือการใช้จัดเรียง elementที่ซ้อนกันและต้องเป็น element ที่ถูกกำหนด position ไว้เท่านั้น
position ก็จะมี position:relative,position:absolute; เป็นต้น

เรามีดูตัวอย่างกันนะครับ

<style type='text/css'>
#box1,#box2,#box3{
background-color:#0099FF;
border:1px solid #000;
height:100px;
width:100px;
position:absolute;
z-index:3;
}
#box2{
background-color:#FF0099;
left:20px;
top:20px;
position:absolute;
z-index:1;
}
#box3{
background-color:#00FF99;
left:40px;
top:40px;
position:absolute;
z-index:4;
}
</style>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

อธิบายนะครับ

1.กำหนด <div> ทั้งหมด 3 ตัว คือ div ทีมี ชื่อ box1,box2,box3 ตามลำดับ
2.สร้าง CSS ให้กับ div ทั้ง 3 ตัว โดยให้ค่าทั้ง 3 div เหมือนกัน ดังนี้
-background color เป็น รหัส สี #0099FF
-ขอบ ของ div เป็น ความหนา 1 px เป็น เส้นตรง (solid) สี เป็นสีดำ
-ความสูง และ ความกว้าง 100px
-position เป็น แบบ absolute คือ อ้างอิงตำแหน่งของ parent
-กำหนด z-index คือ เหมือนตำแหน่งของ Layout อ่ะ ยิ่งตัวเลขยิ่ง มากก็จะอยู่บนสุด
3.กำหนด ค่า CSS ของ box2 ให้เป็นดังนี้
-background color รหัสสี #FF0099
-กำหนดให้ห่างจากขอบซ้ายและขอบด้านบน 20px
-position เป็น แบบ absolute คือ อ้างอิงตำแหน่งของ parent
-กำหนด z-index คือ เหมือนตำแหน่งของ Layout อ่ะ ยิ่งตัวเลขยิ่ง มากก็จะอยู่บนสุด
4.กำหนด ค่า CSS ของ box3 ให้เป็นดังนี้
-background color รหัสสี #00FF99
-กำหนดให้ห่างจากขอบซ้ายและขอบด้านบน 40px
-position เป็น แบบ absolute คือ อ้างอิงตำแหน่งของ parent
-กำหนด z-index คือ เหมือนตำแหน่งของ Layout อ่ะ ยิ่งตัวเลขยิ่ง มากก็จะอยู่บนสุด

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

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

Tuesday, July 10, 2012

PHP Chapter 2 Software ที่ใช้ในการเขียน PHP

PHP Chapter 2 Software ที่ใช้ในการเขียน PHP

1.Notepad++
- เอาไว้ใช้เขียน Source Code PHP หรือ Source Code อื่นๆ ด้วยก็ได้นะครับ
2.Appserv
-เป็นตัวจำลอง Server ซึ่งจะมี Apache,PHP,MySQL,PHPMyadmin มาให้เราครบเลย คราวนี้แล้วแต่ใครจะเลือกลงแบบไหนนะครับ
3.Heidi
-อันนี้ไว้จัดการฐานข้อมูลต้องติดตั้งไว้บนเครื่องคอมพิวเตอร์ของเรา
4.Adminer
-อันนี้ไว้จัดการฐานข้อมูล ทำงานผ่านหน้าเว็บ
5.MySQL
-เป็นฐานข้อมูล ที่ได้รับความนิยมสูงในการทำ Website
6.JQuery
-เป็น Script ที่เอาไว้ใ้ช้จัดการ Element ต่างๆ เช่น <INPUT>,<SELECT>,<TEXTAREA> หรือ Element ตัวอื่นๆ ด้วย หรือ จะจัดการเกี่ยว CSS หรือ เราจะเขียน Plugin เพิ่มเติมเองก็ได้ หรือท่านจะหาดาวน์โหลดตาม Website ก็มีให้เลือกเยอะมากมายตามใจท่านเลย

BY N1B

Monday, July 9, 2012

Tool : HeidiSQL

HeidiSQL Website (http://www.heidisql.com)

เป็นช่วยจัดการฐานข้อมูล ที่ต้องติดตั้งลงบนเครื่องคอมพิวเตอร์ก่อน
ความสามารถพื้นฐานนั้นมีครบถ้วน แถมเป็น Freeware อีกต่างหาก

อันนี้เป็นภาพจากโปรแกรม โดยรวมนะครับ
ยังไงก็ลอง เอาไปใช้ดูนะครับ

Tool : Adminer

Adminer Website (http://www.adminer.org/)

เป็นตัวเองจัดการกับฐานข้อมูล ที่มีลักษณะคล้ายๆ PHP My Admin แต่ขนาดไฟล์ ต่างกัน
- Adminer ขนาดไฟล์ ประมาณ 377 KB(0.377 MB)
- PHP MyAdmin ประมาณ 3600 KB (3.6 MB)

อันนี้เป็นภาพของโปรแกรมนะครับ

ยังมีั Theme และ Plugin ให้เลือกใช้อีกด้วยครับ

ยังไงก็ลองใช้งานกันดูนะครับ
BY N1B

Blog For Programmer.

Thursday, June 20, 2013

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

Wednesday, November 7, 2012

jQuery : Sort Dropdown list items using jQuery

Monday, September 17, 2012

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

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

Friday, September 14, 2012

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

PHP : Create Class INPUT TAG

Tuesday, August 28, 2012

PHP : Convert Array To String(การแปลงจากตัวแปรชุดเป็นข้อความ)

Monday, August 27, 2012

JQuery : Multiple jQuery Get Scripts

Tuesday, August 21, 2012

PHP : Get Client IP

Thursday, July 26, 2012

JQuery : ค่า Index ของ Checkbox

Monday, July 23, 2012

JQuery : get ค่า index ของ Tag option ใน Tag Select

Thursday, July 19, 2012

JQuery : วิธีการตรวจสอบว่าเราใช้ Browser อะไรอยู่

Monday, July 16, 2012

JQuery : การใส่ค่า Index ของ Object นั้นๆ

Friday, July 13, 2012

PHP : Tip การรวมค่าของ JSON สองค่าเข้าด้วยกัน

Wednesday, July 11, 2012

CSS : การใช้ DIV กับ z-index

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

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

Tuesday, July 10, 2012

PHP Chapter 2 Software ที่ใช้ในการเขียน PHP

Monday, July 9, 2012

Tool : HeidiSQL

Tool : Adminer

Labels

About Me