JAVASCRIPT Learninghttp://www.ninenik.comรวมบทความ JAVASCRIPT th-THSun, 01 Aug 2010 03:09:51 +0700Copyright ninenik.comCMSPro เว็บไซต์สำเร็จรูปhttp://www.ninenik.com/images/logo_ninenik.gifhttp://www.ninenik.comjavascript เรียกฟังก์ชัน ใน parent จาก iframehttp://www.ninenik.com/javascript_เรียกฟังก์ชัน_ใน_parent_จาก_iframe-305.htmlทบทวนความรู้ การเรียกใช้งาน ฟังก์ชัน ใน parent จาก iframe  ตัวอย่างต่อไปนี้ เป็น
บันทึกช่วยจำ กรณีต้องการเรียกใช้งาน javascript ฟังก์ชัน ใน parent จาก iframe เงื่อนไข คือในไฟล์หลัก มี javascript ฟังก์ชัน อยู่ และมีการใช้งาน iframe โดยต้องการเรียกใช้งาน ฟังก์ชัน ในไฟล์หลัก จากไฟล์ iframe สามารถเป็นแนวทางได้ดังนี้

 

parent.callMe();
// parent.ชื่อฟังก์ชันที่เรียกใช้งาน
// parent.callMe();

ตัวอย่างการใช้งานจากไฟล์ใน iframe
 

<button type="button" onclick="parent.callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์ iframe</button>

หรือ
 

<script type="text/javascript">
parent.callMe();
</script>

ตัวอย่างโค้ดไฟล์หลัก main_file_with_iframe.php
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>คือในไฟล์หลัก มี javascript ฟังก์ชัน อยู่ และมีการใช้งาน ifram</title>
<style type="text/css">
body {
	background-color: #333;
}
</style>
</head>

<body>

<button type="button" onclick="callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์หลัก</button>
<br />
<br />
<iframe name="myiframe" src="my_iframe.php" width="450" height="350" frameborder="1">
</iframe>
<script type="text/javascript">
function callMe(){
	alert("Test");	
}
</script>
</body>
</html>

ตัวอย่างโค้ดไฟล์ iframe   my_iframe.php
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ฟังก์ชัน ในไฟล์หลัก จากไฟล์ iframe</title>
</head>

<body>


<button type="button" onclick="parent.callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์ iframe</button>


</body>
</html>

ตัวอย่าง
http://www.ninenik.com/demo/main_file_with_iframe.php
 

]]>Sat, 31 Jul 2010 21:15:47 +0700สั่ง print preview ใน IE และ ประยุกต์กับ บราวเซอร์ อื่นhttp://www.ninenik.com/สั่ง_print_preview_ใน_IE_และ_ประยุกต์กับ_บราวเซอร์_อื่น-304.htmlตัวอย่าง ต่อไปนี้เป็นโค้ดสำหรับการสั่ง print preview ซึ่งทำงานได้เฉพาะ IE เท่านั้น แต่เราสามารถประยุกต์
เพิ่มเติม ตามตัวอย่างโค้ด ด้านล่าง สำหรับกรณี browser อื่นๆ

โค้ดตัวอย่าง
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>print preview</title>

<?php if($_GET['print_preview']==1){ ?>
<style type="text/css" media="all">
button#printPreview{
	display:none;	
}
body{
	padding:10px;	
}
</style>
<?php }else{ ?>
<style type="text/css" media="print">
button#printPreview{
	display:none;	
}
</style>
<?php } ?>
</head>

<body>

<p>ตัวอย่าง ต่อไปนี้เป็นโค้ดสำหรับการสั่ง print preview ซึ่งทำงานได้เฉพาะ IE เท่านั้น แต่เราสามารถประยุกต์<br />
เพิ่มเติม ตามตัวอย่างโค้ด ด้านล่าง สำหรับกรณี browser อื่นๆ </p>

<script type="text/javascript">
function printPreview() {
	if(navigator.appName == "Microsoft Internet Explorer"){
	if(!document._wb){
		var obj="<object id='_wb' width='0' height='0' ";
		obj+=" classid='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>";
		document.body.insertAdjacentHTML(
			"beforeEnd",obj
		); 
	}
	_wb.ExecWB(7,1)
	}else{
		var windowWidth=850;
		var windowHeight=550;
		var myleft=(screen.width)?(screen.width-windowWidth)*0.5:100;    
   		var mytop=(screen.height)?(screen.height-windowHeight)*0.5:100;
		var feature='left='+myleft+',top='+eval(mytop-50)+',width='+windowWidth+',height='+windowHeight+',';
		feature+='menubar=yes,status=no,location=no,toolbar=no,scrollbars=yes';
		window.open(window.location+'?print_preview=1','welcome',feature);
	}
}
</script>

<button id="printPreview" onclick="printPreview()">Print Preview</button>

</body>
</html>

ตัวอย่าง

http://www.ninenik.com/demo/print_preview.php

อย่างไรก็ตาม IE ที่มีระบบ security สูงก็อาจไม่สามารถใช้งานได้ ให้ปรับฟังก์ชันเป็น

<script type="text/javascript">
function printPreview() {
		var windowWidth=850;
		var windowHeight=550;
		var myleft=(screen.width)?(screen.width-windowWidth)*0.5:100;    
   		var mytop=(screen.height)?(screen.height-windowHeight)*0.5:100;
		var feature='left='+myleft+',top='+eval(mytop-50)+',width='+windowWidth+',height='+windowHeight+',';
		feature+='menubar=yes,status=no,location=no,toolbar=no,scrollbars=yes';
		window.open(window.location+'?print_preview=1','welcome',feature);

}
</script>

เพื่อใฃ้ในรูปแบบธรรมดา และรองรับทุกบราวเซอร์ โดยสามารถกำหนดรูปแบบที่ต้องการแสดงเมื่อทำการพิมพ์
ด้วยการเพิ่ม css style ในส่วนของ โค้ดตามตำแน่งด้านล่าง

<?php if($_GET['print_preview']==1){// กำหนดรูปแบบการพิมพ์กรณี preview popup หน้าใหม่ ?>
<style type="text/css" media="all">
button#printPreview{
	display:none;	
}
body{
	padding:10px;	
}
</style>
<?php }else{ // กำหนดรูปแบบการพิมพ์กรณี preview ผ่าน บราวเซอร์ ?>
<style type="text/css" media="print">
button#printPreview{
	display:none;	
}
</style>
<?php } ?>

 

 

]]>Thu, 29 Jul 2010 22:03:31 +0700ทบทวน วันที่ date object ใน javascript http://www.ninenik.com/ทบทวน_วันที่_date_object__ใน_javascript_-293.htmlการดึงค่ามาใช้งาน

var myDate=new Date(2010,6,1,17,30,30,500);
myDate.getFullYear() = 2010  
// แสดงปี ค.ศ. 4 หลัก

myDate.getYear() = 110  
// ไม่นิยมเพราะจะขึ้นกับ บราวเซอร์ ถ้าใน IE จะเท่ากับ 2010 ใน FF เท่ากับ 2010-1900

myDate.getMonth() = 6 
// เดือน 0-11

myDate.getDate() = 1 
// วันที่ 1-31

myDate.getDay() = 4 
// วัน 0=Sunday, 1=Monday

myDate.getHours() = 17 
// ชั่วโมง 0-23

myDate.getMinutes() = 30 
// นาที 0-59

myDate.getSeconds() = 30  
// วินาที 0-59

myDate.getMilliseconds() = 500  
// มิลลิวินาที 0-999

myDate.getTime() = 1277980230500
// เวลาทั้งหมด เป็น มิลลิวินาที ได้จาก เวลา timestamp + millisecond , 1277980230 + 500

myDate.getTimezoneOffset() = -420
// ความต่างของเวลามาตรฐานโลกตามนาฬิกาที่กรีนิช ในอังกฤษ (คำย่อคือ GMT) กับเวลาที่บ้านเรา
// หน่วยเป็น นาที จากตัวอย่าง -420 ได้จาก 60 นาที คูณด้วย 7 ชม.
// ค่าติดลลบแสดงว่าเร็วกว่าเวลาที่ ที่กรีนิช ในอังกฤษ   420/60 =7 ชม.

myDate.getUTCFullYear() = 2010
// แสดงปี ค.ศ. 4 หลัก ที่กรีนิช ในอังกฤษ

myDate.getUTCMonth() = 6
// เดือน 0-11 ที่กรีนิช ในอังกฤษ

myDate.getUTCDate() = 1
// วันที่ 1-31 ที่กรีนิช ในอังกฤษ

myDate.getUTCDay() = 4
// วัน 0=Sunday, 1=Monday ที่กรีนิช ในอังกฤษ

myDate.getUTCHours() = 10
// ชั่วโมง 0-23 ที่กรีนิช ในอังกฤษ

myDate.getUTCMinutes() = 30
// นาที 0-59 ที่กรีนิช ในอังกฤษ

myDate.getUTCSeconds() = 30
// วินาที 0-59 ที่กรีนิช ในอังกฤษ

myDate.getUTCMilliseconds() = 500
// มิลลิวินาที 0-999 ที่กรีนิช ในอังกฤษ

การแปลงค่า

myDate.toGMTString() = Thu, 01 Jul 2010 10:30:30 GMT
// แปลงวันที่เป็นเวลาที่กรีนิช ในอังกฤษ เป็นแบบข้อความ

myDate.toLocaleString() = Thursday, July 01, 2010 5:30:30 PM
// แปลงวันที่เป็นเวลาที่บ้านเรา

myDate.toLocaleDateString() = Thursday, July 01, 2010
// แปลงวันที่เป็นเวลาที่บ้านเรา ไม่เอาเวลา

myDate.toLocaleTimeString() = 5:30:30 PM
// แปลงวันที่เป็นเวลาที่บ้านเรา ไม่เอาวันที่

myDate.toString() = Thu Jul 01 2010 17:30:30 GMT+0700 (SE Asia Standard Time)
// แปลงวันที่เป็นเวลาที่บ้านเรา เป็นแบบ universal time

myDate.toUTCString() = Thu, 01 Jul 2010 10:30:30 GMT
// แปลงวันที่เป็นเวลาที่กรีนิช ในอังกฤษ เป็นแบบข้อความ

myDate.valueOf() = 1277980230500
// แปลงวันที่เป็นเวลาในหน่วย มิลลิวินาที ได้จาก เวลา timestamp + millisecond , 1277980230 + 500

การตั้งค่าเวลา

// สำหรับการตั้งค่าจะใช้คำสั่งคล้ายกับคำสั่งในการดึงค่ามาใช้ แต่เปลี่บนจาก get เป็น set และเพิ่มค่าพารามิเตอร์เข้าไปในวงเล็บ
// เช่น
myDate.getFullYear()
// เป็น
myDate.setFullYear(2010,6,1)

// หรือ
myDate.getHours()
// เป็น
myDate.setHours(17,30,30,500)

 

]]>Mon, 05 Jul 2010 11:21:07 +0700สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดายhttp://www.ninenik.com/สร้าง_comment_ด้วย_social_plugins_ใน_facebook_api_อย่างง่ายดาย-291.htmlดูตัวอย่าง และทดสอบการใช้ตามลิ้งค์ด้านล่าง
http://developers.facebook.com/docs/reference/plugins/comments

ใครที่ต้องการสร้างระบบ comment หรือการแสดงความคิดเห็นในเว็บไซต์ของตัวเอง โดยไม่ต้องสร้างฐานข้อมูล สามารถเข้าไปใช้บริการ facebook api ที่ชื่อ comment ตามขั้นตอนต่อไปนี้

1.ล็อกอินเข้าสู่ระบบ facebook ปกติ ถ้ายังไม่ได้เป็นสมาชิก
http://www.facebook.com/login.php
ต้องทำการสมัครสมาชิก facebook ก่อนถึงจะใช้งานได้

2.เข้าไปที่หน้า http://developers.facebook.com/setup/

กรอกรายละเอียดดังนี้
site name:--- กรอกเป็นชื่อ domain ตัวอย่าง ninenik
site url:------  กรอก http://www.youdomain.com/  ตัวอย่าง  http://www.ninenik.com/
ควรกรอก / หลังชื่อโดเมนปัองกันปัญหา การแจ้งเตือน Invalid url
locale:-------  เลือกภาษาไทย หรือภาษาอื่นตามต้องการ

3.คลิกปุ่ม Create Application ถ้าไม่เกิดข้อผิดพลาด ระบบจะสร้าง Application  ซึ่งมีรายละเอียด
ดังรูปด้านล่าง ให้ทำการบันทึก ข้อมูลไว้ใช้งาน โดยเฉพาะ app id และ app secret


4.แทนที่ แท็กเปิด <html ...  ในไฟล์ที่ต้องการ แสดง comment ด้วย
 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">

แทนที่ตำแหน่งตรงแถบสีฟ้าอ่อน ตามรูปด้านล่าง


5.แทรกโค้ด comment ด้านล่างในไฟล์ตามข้อ 4. ในตำแหน่งที่ต้องการแสดง
 

<fb:comments numposts="10"  width="800"></fb:comments>
<div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: 'ใส่หมายเลข app id ตรงนี้', status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
          '//connect.facebook.net/th_TH/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

6.ปรับแต่งคุณสมบัติของ comment ตามต้องการเช่น
กำหนดความกว้าง
width="800" 
 

<fb:comments width="800"></fb:comments>

กำหนดจำนวนแถวความคิดเห็นที่แสดง
numposts="10" 
 

<fb:comments numposts="10"  width="800"></fb:comments>

กำหนด uniqe id กรณีใฃ้ mod rewrite และไม่สามารถโพสข้อความได้
จำเป็นต้องกำหนด uniqe id โดยใช้ php เข้ารหัส ด้วยคำสั่ง

<?=md5($_SERVER["REQUEST_URI"])?>

ตัวอย่างผลลัพธ์ที่ได้ xid="91b95134d257f54425eb38b73d3df4b7"
 

<fb:comments xid="<?=md5($_SERVER["REQUEST_URI"])?>"   numposts="10"  width="800"></fb:comments>

บรรทัดข้างล่างเป็นส่วน เพิ่มเติม แต่ไม่จำเป็น
นอกจากนี้ยังสามารถกำหนด meta tags ในส่วนของ <header> เพื่อให้ facebook นำค่าไปใช้งาน ตัวอย่าง
 

<meta property="og:title" content="รู้จักกับ Ajax Events ใน jQuery"/>
<meta property="og:site_name" content="ninenik.com"/>
<meta property="og:image" content="http://www.ninenik.com/mages/logo_01_Sat.gif"/>

og:title ใช้กำหนดไดเติลที่ต้องการนำไปใฃ้ใน facebook ปกติ facebook จะดึงจาก tag title
og:site_name ใช้กำหนด ชื่อเว็บไซต์
og:image ใฃ้กำหนดรูปภาพ ปกติ facebook จะดึงจากรูปใน tag img ที่แสดงหน้านั้น

og:title ถ้าใช้ php สามารถดึงจากฐานข้อมูล หรือตัวแปรมาแสดง ตัวอย่าง
 

<meta property="og:title" content="<?=$yourtitle?>"/>

 

]]>Sat, 19 Jun 2010 01:40:15 +0700การหา ขนาด ความกว้าง ความสูงของ รูปภาพ ด้วย javascripthttp://www.ninenik.com/การหา_ขนาด_ความกว้าง_ความสูงของ_รูปภาพ_ด้วย_javascript-287.htmlปกติเราสามารถหาขนาดความกว้าง ความสูง ของรูปภาพที่แสดงอยู่ด้วย javascript ได้โดยง่าย ดังนี้
ตัวอย่าง HTML Code
 

<img id="myimg" src="http://www.ninenik.com/images/logo_01_Wed.gif" />

Javascript Code
 

<script type="text/javascript">
var jsimg=document.getElementById('myimg');
var jsimg_width=jsimg.width; // หาความกว้าง
var jsimg_height=jsimg.height; // หาความสูง
var jsimg_fileSize=jsimg.fileSize; // หาขนาดไฟล์ กรณ๊ IE เท่านั้น
</script>

ข้างต้นเป็นกรณีที่ไฟล์ รูปภาพนั้นแสดงแล้ว ส่วนกรณี หา ความกว้าง ความสูง ของรูปภาพ กรณีที่ยังไม่แสดง หรือทราบเฉพาะ url ของรูปภาพ สามารถทำได้ดังนี้
 

<script type="text/javascript">
var img_new=new Image();
img_new.src="http://www.ninenik.com/images/logo_01_Wed.gif";
img_new.onload=function(){
   var jsimg_width=img_new.width; // หาความกว้าง
   var jsimg_height=img_new.height; // หาความสูง
   var jsimg_fileSize=img_new.fileSize; // หาขนาดไฟล์ กรณ๊ IE เท่านั้น
}
</script>

 

]]>Wed, 02 Jun 2010 11:58:26 +0700สร้าง countdown นับเวลา ถอยหลัง ด้วย javascripthttp://www.ninenik.com/สร้าง_countdown_นับเวลา_ถอยหลัง_ด้วย_javascript-274.htmlตัวอย่างผลลัพธ์ กำหนดเวลาที่ 10/31/2010 09:09:09

 

HTML Code ตัวอย่าง

<div id="showRemain"></div>

Javascript Code ตัวอย่าง

<script type="text/javascript">
function countDown(){
	var timeA = new Date(); // วันเวลาปัจจุบัน
	var timeB = new Date("10/31/2010 09:09:09"); // วันเวลาสิ้นสุด รูปแบบ เดือน/วัน/ปี ชั่วโมง:นาที:วินาที
	var timeDifference = timeB-timeA;
	if(timeDifference>=0){
		timeDifference=timeDifference/1000;
		timeDifference=Math.floor(timeDifference);
		var wan=Math.floor(timeDifference/86400);
		var l_wan=timeDifference%86400;
		var hour=Math.floor(l_wan/3600);
		var l_hour=l_wan%3600;
		var minute=Math.floor(l_hour/60);
		var second=l_hour%60;
		var showPart=document.getElementById('showRemain');
		showPart.innerHTML="เหลือเวลา "+wan+" วัน "+hour+" ชั่วโมง "
		+minute+" นาที "+second+" วินาที"; 
			if(wan==0 && hour==0 && minute==0 && second==0){
				clearInterval(iCountDown); // ยกเลิกการนับถอยหลังเมื่อครบ
				// เพิ่มฟังก์ชันอื่นๆ ตามต้องการ
			}
	}
}
// การเรียกใช้
var iCountDown=setInterval("countDown()",1000); 
</script>

 

]]>Fri, 09 Apr 2010 02:06:54 +0700เริ่มต้น รู้จัก ก่อนการใช้งาน google map apihttp://www.ninenik.com/เริ่มต้น_รู้จัก_ก่อนการใช้งาน_google_map_api-266.htmlGoogle Maps API คืออะไร

Google Maps API ทำให้ท่าน สามารถแทรก Google Maps  หรือแผนที่จาก Google ลงในเว็บเพจของท่าน
เพื่อประโยชน์ เช่น ระบุตำแหน่งที่ตั้งของ บริษัท ,สถานที่, ที่นัดหมาย เป็นต้น ได้ โดยสามารถจะจัดการรายละเอียด
ต่างๆในแผนที่ เช่นเดียวกับที่ใช้งานใน http://maps.google.com ได้

การใช้งาน Google Maps API  จำเป็นจะต้องมี Google Maps API Key
ซึ่งสามารถเข้าไปขอรับได้ที่ url ตามด้านล่างนี้

http://code.google.com/apis/maps/signup.html

เมื่อเข้าไปแล้วให้กดเลือก ยอมรับเงื่อนไข การใช้งาน และกรอก url เว็บไซต์ที่ต้องการนำ google map ไปใช้

ในกรณีต้องการทดสอบที่เครื่องการใช้จริง สามารถ ใช้ script ด้านล่างแทนได้ เมื่อใช้งานจริง จึงค่อยเปลี่ยน
ในส่วนค่า key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRRn0sJCm-CFhvGa72HC9maIDPrX5RTjV4z1TYBiTrysASJhAHZCMDeQ_A
เป็นค่าใหม่

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRRn0sJCm-CFhvGa72HC9maIDPrX5RTjV4z1TYBiTrysASJhAHZCMDeQ_A" type="text/javascript"></script>

 

ตัวอย่างโค้ด google map พื้นฐาน แสดงแผนที่ประเทศไทย

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html{
	padding:0px;
	margin:0px;
}
div#map_canvas{
	margin:auto;
	width:500px;
	height:450px;
	overflow:hidden;
}
</style>

</head>

<body onload="initialize()" onunload="GUnload()">

<div id="map_canvas">
</div> 


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRRn0sJCm-CFhvGa72HC9maIDPrX5RTjV4z1TYBiTrysASJhAHZCMDeQ_A" type="text/javascript"></script>
<script type="text/javascript"> 
function initialize() { 
  if (GBrowserIsCompatible()) { 
	var map = new GMap2(document.getElementById("map_canvas")); 
	map.setCenter(new GLatLng(13.77436,100.53458), 5); 
	map.setUIToDefault(); 
  } 
} 
</script> 

</body>
</html>

 

 
]]>Wed, 24 Mar 2010 15:29:37 +0700ทบทวนคำสั่ง break และ continue ใน javascripthttp://www.ninenik.com/ทบทวนคำสั่ง_break_และ_continue_ใน_javascript-265.htmlคำสั่ง break;

ใช้สำหรับกำหนดให้หยุดการทำงานในคำสั่ง while หรือ for ลูป

<script type="text/javascript">
var i = 0;  // กำหนดค่า ตัวแปร i = 0
while(i < 6){ // ทำการวนลูป ขณะที่ i น้อยกว่า 6
	if(i == 3){	// เงื่อนไข กรณ๊ i =3
		break; // ให้หยุดหรือสิ้นสุดการทำงานต่างๆ ในคำสั่ง while
	}
	i++; // เพิ่มค่า i ครั้งละ 1 ทุกครั้งที่มีการวนลูป
	console.log(i); // แสดงผลค่า i กรณ๊ใช้กับ firebug ใน firefox เท่านั้น อาจใช้ alert(i); แทนได้
}
</script>


 
ผลลัพธ์ของ script ด้านบนคือ ค่า i จะค่อยๆเพิ่มค่า จากค่า 1 เป็น 2 และเป็น 3
และเมื่อค่า i = 3 จะเข้าเงื่อนไข คำสั่ง if(i==3) โปรแกรมจะไปทำงานที่คำสั่ง break
คือ ทำให้หยุดการทำงานทั้งหมดในคำสั่ง while ดังนั้น การเพิ่มค่าในกรณี ที่ค่า i >3
จึงหยุดการทำงานไป ค่า i ตัวสุดท้ายจึงเท่ากับ 3

คำสั่ง continue;

ทำงานตรงกันข้าม กับคำส่ัง break; โดยลักษณะ การทำงาน ขึ้นอยู่กับ เงื่อนไข ต่อไปนี้

กรณีใช้กับคำสั่ง while โปรแกรมจะไม่ทำงานคำสั่ง ที่อยู่ถัดจากคำสั่ง continue;
และจะกลับไปตรวจสอบเงื่อนไข ในคำสั่ง while

ตัวอย่าง
 

<script type="text/javascript">
var i = 0;  // กำหนดค่า ตัวแปร i = 0
while(i < 6){ // ทำการวนลูป ขณะที่ i น้อยกว่า 6
	i++; // เพิ่มค่า i ครั้งละ 1 ทุกครั้งที่มีการวนลูป
	if(i == 3){	// เงื่อนไข กรณ๊ i =3
		continue; // โปรแกรมจะวิ่งไปที่คำสั่ง while โดยจะไม่ทำงานคำสั่ง console.log(i); ที่จะอยู่ถัดไป
	}
	console.log(i); // แสดงผลค่า i กรณ๊ใช้กับ firebug ใน firefox เท่านั้น อาจใช้ alert(i); แทนได้
}
</script>

ผลลัพธ์ของ script ด้านบน คือ ค่า i จะเท่ากับ 1, 2, 4, 5 และ 6 โดยจะไม่แสดงค่า i=3
ซึ่งเป็นไปตามเงื่อนไข เมื่อ ค่า i เท่ากับ 3 จะทำงานคำส่ัง continue ทำให้คำสั่ง console.log(i); ไม่ทำงานกรณีค่า i=3
จากนั้นโปรแกรมจะวิ่งไปทำงานที่คำสั่งตรวจสอบเงื่อนไขใน while  แล้วก็เข้ามาทำงาน ใน ลูป อีกครั้ง
และเมื่อค่า  i มากกว่า 3 คำสั่ง console.log(i); ก็จะทำงานตามปกติ


กรณีใช้กับคำสั่ง for โปรแกรมจะไม่ทำงานคำสั่ง ที่อยู่ถัดจากคำสั่ง continue;
และจะกลับไปที่เงื่อนไขการเพิ่ม หรือลดค่า แล้วเข้ามาทำงานในคำสั่ง for ต่อไป

ตัวอย่าง
 

<script type="text/javascript">
for(a=0;a<6;a++){  //  วนลูป โดยเริ่มต้นค่า a  เท่ากับ 0 และ a  น้อยกว่า 6
	if(a==3){ // เงื่อนไข กรณ๊ a =3
		continue; // โปรแกรมจะวิ่งไปที่คำสั่ง a++ โดยจะไม่ทำงานคำสั่ง console.log(a); ที่จะอยู่ถัดไป
	}
	console.log(a); // แสดงผลค่า a กรณ๊ใช้กับ firebug ใน firefox เท่านั้น อาจใช้ alert(a); แทนได้
}

</script>

ผลลัพธ์ของ script ด้านบน คือ ค่า a จะเท่ากับ 0, 1, 2, 4 และ 5 โดยจะไม่แสดงค่า a=3
ซึ่งเป็นไปตามเงื่อนไข เมื่อ ค่า a เท่ากับ 3 จะทำงานคำส่ัง continue ทำให้คำสั่ง console.log(a); ไม่ทำงานกรณีค่า a=3
จากนั้นโปรแกรมจะวิ่งไปทำงานที่คำสั่งเพิ่มหรือลด ค่า แล้วก็เข้ามาทำงาน ใน ลูป อีกครั้ง
เละเมื่อค่า  a มากกว่า 3 คำสั่ง console.log(a); ก็จะทำงานตามปกติ

]]>Mon, 22 Mar 2010 16:52:02 +0700ทบทวน javascript ฟังก์ชั่น ให้กรอกเฉพาะภาษาอังกฤษเท่านั้นhttp://www.ninenik.com/ทบทวน_javascript_ฟังก์ชั่น_ให้กรอกเฉพาะภาษาอังกฤษเท่านั้น-257.htmlJavascript Code

<script type="text/javascript"> 
function isEnglishchar(str){   
	var orgi_text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890._-";   
	var str_length=str.length;   
	var isEnglish=true;   
	var Char_At="";   
	for(i=0;i<str_length;i++){   
		Char_At=str.charAt(i);   
		if(orgi_text.indexOf(Char_At)==-1){   
			isEnglish=false;   
			break;
		}      
	}   
	return isEnglish; 
}  
</script>

การใช้งาน

<script type="text/javascript"> 
var str="ทดสอบ";
if(isEnglishchar(str)==false){
	alert("กรุณากรอกข้อมูลเป็นภาษาอังกฤษเท่านั้น");
	return false;
}
</script>
]]>Wed, 03 Feb 2010 00:54:49 +0700ทบทวน การเรียกใช้งาน events ใน javascript ที่ใช้ได้สำหรับ ทุก browsershttp://www.ninenik.com/ทบทวน_การเรียกใช้งาน_events_ใน_javascript_ที่ใช้ได้สำหรับ_ทุก_browsers-244.htmlก่อนที่จะมี javascript libraries ต่างๆ เช่น jQuery ,Prototype เป็นต้น หากต้องการที่จะใช้ event เช่น การคลิก click events สำหรับ element ใดๆ ที่ต้องการแล้ว สามารถทำได้โดยใช้ โค้ต javascript ข้างล่างต่อไปนี้

ใช้งาน Events เรียกใช้ฟังก์ชันโดยตรง

<script type="text/javascript">

var DOMobj = document.getElementById("myButton");

// เรียกใช้ฟังก์ชันโดยตรง
if(DOMobj.addEventListener){
	DOMobj.addEventListener("click", function() {
		alert('button clicked');
	},false); 
}else if(DOMobj.attachEvent){
	DOMobj.attachEvent("onclick", function() {
		alert('button clicked');
	});
}else{
	DOMobj.onclick = function() {
		alert('button clicked');
	}
}	

</script>

ใช้งาน Events เรียกฟังก์ชันผ่านตัวแปร

<script type="text/javascript">
// สร้างตัวแปรเก็บฟังก์ชันที่ต้องการ
var myFunction=function(){
	alert('button clicked');
}

var DOMobj = document.getElementById("myButton");

// เรียกใช้ฟังก์ชันผ่านตัวแปรชื่อ myFunction
if(DOMobj.addEventListener){
	DOMobj.addEventListener("click",myFunction,false); 
}else if(DOMobj.attachEvent){
	DOMobj.attachEvent("onclick", myFunction);
}else{
	DOMobj.onclick =myFunction;
}	

</script>
]]>Fri, 11 Dec 2009 02:25:08 +0700สร้าง ฟังก์ชั่น บันทึกหน้าเพจไว้ใน Favorites และ Bookmarks ด้วย javascript http://www.ninenik.com/สร้าง_ฟังก์ชั่น_บันทึกหน้าเพจไว้ใน_Favorites_และ_Bookmarks_ด้วย_javascript_-214.html function bookmark(title,url){ if(window.sidebar){ // สำหรับ firefox window.sidebar.addPanel(title, url, ""); }else if(window.opera && window.print){ // สำหรับ opera var elem = document.createElement('a'); elem.setAttribute('href',url); elem.setAttribute('title',title); elem.setAttribute('rel','sidebar'); elem.click(); }else if(document.all){// สำหรับ ie window.external.AddFavorite(url, title); } }

ตัวอย่าง

บันทึกหน้านี้ไว้

Javascript ฟังก์ชั่น 

<script type="text/javascript">
function bookmark(title,url){
	if(window.sidebar){ // สำหรับ firefox
		window.sidebar.addPanel(title, url, "");
	}else if(window.opera && window.print){ // สำหรับ opera
		var elem = document.createElement('a');
		elem.setAttribute('href',url);
		elem.setAttribute('title',title);
		elem.setAttribute('rel','sidebar');
		elem.click();
	}else if(document.all){// สำหรับ ie
		window.external.AddFavorite(url, title);
	}	
}
</script>

HTML Code การเรียกใช้งาน 

<a href="javascript:bookmark(document.title,window.location);">บันทึกหน้านี้ไว้</a>
<!--
เราสามารถกำหน title และ url ในฟังก์ชั่น เลย เช่น
<a href="javascript:bookmark('javascript bookmark','http://www.ninenik.com');">บันทึกหน้านี้ไว้</a>
หรือกำหนดเป็น
<a href="javascript:bookmark(document.title,window.location);">บันทึกหน้านี้ไว้</a>
โดย document.title จะดึง title ของหน้าเว็บนั้นมาโดยอัตโนมัติ
และ window.location จะดึง url ของหน้าเว็บนั้นมาให้โดยอัตโนมัติ เช่นกัน
-->
]]>Tue, 18 Aug 2009 19:47:49 +0700วิธีการสร้าง preloading images โหลดรูปภาพ ด้วย javascript อย่างง่ายhttp://www.ninenik.com/วิธีการสร้าง_preloading_images_โหลดรูปภาพ_ด้วย_javascript_อย่างง่าย-208.htmlใน javascript มีฟังก์ชัน image ที่สามารถนำมาใช้ในการสร้าง preload images เมื่อเราทำการสร้าง Image Object และกำหนด src ของตำแหน่งภาพ บราวเซอร์จะทำการเรียก image นั้นและทำการบันทึกไว้ใน cache และเมื่อมีการเรียกใช้รูปเดิมนั้นอีกครั้ง บราวเซอร์ก็จะทำการดึงรูปภาพจาก cache มาแทนการโหลดรูปภาพนั้นใหม่ ทำให้สามารถแสดงผลรูปภาพได้เร็วกว่าเดิม

Javascript Code สำหรับสร้าง Preload Image

<script type="text/javascript">
var img = new Image();
img.src = 'yourimg.gif';
</script>

ถ้ารูปที่ต้องการทำ preload มีจำนวนมาก เราสามารถที่จะทำการ cache รูปเหล่านั้นด้วยการใช้ for loop และถ้า image มีนามสกุล เหมือนๆ กัน เราสามารถเพิ่มประสิทธิภาพให้กับ code ด้วยการเพิ่มนามสกุลรูปภาพในขั้นตอนการกำหนด src แทนการกำหนด นามสกุลไฟล์รูป ในชื่อรูปภาพโดยตรง

Javascript Code กรณีมีหลายรูปภาพ และนามสกุลไฟล์รูปเหมือนกันในที่นี้เป็น gif 

<script type="text/javascript">
var imgNames = ['car', 'bus', 'boat', 'sun']; // กำหนดชื่อรูปภาพ กรณีรูปภาพมีนามสกุลเหนือนกัน จะกำหนดแต่ชื่อ
var imgObjects = []; // สร้าง ตัวแปร array ไว้กำหนด Image Object
for (var i = 0; i < imgNames.length; i++){ // วนลูปสร้าง preload image
	imgObjects[i] = new Image();
	imgObjects[i].src = imgNames[i] + '.gif';
}
</script>

Javascript Code กรณีมีหลายรูปภาพ และนามสกุลไฟล์รูปเไม่หมือนกัน 

<script type="text/javascript">
var imgNames = ['car.gif', 'bus.png', 'boat.jpg', 'sun.jpg']; // กำหนดชื่อรูปภาพ กรณีรูปภาพมีนามสกุลไม่เหนือนกัน จะกำหนดชื่อและนามสกุลรูปภาพ
var imgObjects = []; // สร้าง ตัวแปร array ไว้กำหนด Image Object
for (var i = 0; i < imgNames.length; i++){ // วนลูปสร้าง preload image
	imgObjects[i] = new Image();
	imgObjects[i].src = imgNames[i]; 
}
</script>
]]>Mon, 08 Jun 2009 00:00:00 +0700ใช้งาน cookie ในการจำค่าชื่อผู้ใฃ้และรหัสผ่าน ด้วย javascript และ phphttp://www.ninenik.com/ใช้งาน_cookie_ในการจำค่าชื่อผู้ใฃ้และรหัสผ่าน_ด้วย_javascript_และ_php-190.htmlJavascript Code

<script type="text/javascript">
function chk_form(){
	var j_keep_login=document.form1.keep_login;
	var i_username=document.form1.username.value;
	var i_password=document.form1.password.value;
	if(j_keep_login.checked==true){
		var days=10; // กำหนดจำนวนวันที่ต้องการให้จำค่า
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
		document.cookie = "CK_username=" +i_username+ "; expires=" + expires + "; path=/";
		document.cookie = "CK_password=" +i_password+ "; expires=" + expires + "; path=/";
	}else{
		var expires="";
		document.cookie = "CK_username="+expires+";-1;path=/";
		document.cookie = "CK_password="+expires+";-1;path=/";		
	}
}
</script>

PHP Code

<form id="form1" name="form1" method="post" action=""  onsubmit="return chk_form()">
  ชื่อผู้ใช้  :
  <input name="username" type="text" id="username" value="<?=$_COOKIE['CK_username']?>" />
  <br />
  รห้สผ่าน  :
  <input name="password" type="password" id="password" value="<?=$_COOKIE['CK_password']?>" />
  <br />
  <input name="keep_login" type="checkbox" id="keep_login" value="1" <?=(isset($_COOKIE['CK_username']) && $_COOKIE['CK_username']!="")?"checked":""?> />
  จำ้ข้อมูลการล็อกอินไว้<br />
  <input type="submit" name="Submit" value="เข้าสู่ระบบ" />
</form>

คลิกดูตัวอย่าง

]]>Wed, 25 Mar 2009 23:02:27 +0700การใช้งานแอดทริบิวท์ autocomplete แบบพื้นฐานhttp://www.ninenik.com/การใช้งานแอดทริบิวท์_autocomplete_แบบพื้นฐาน-189.htmlHTML Code

<!--ใส่แอทริบิวท์ autocomplete="off" ในแท็ก form เพื่อกำหนดให้บราวเซอร์ไม่ต้องจำค่า  ข้อมูลการล็อกอิน-->
<form id="form1" name="form1" method="post" action="" autocomplete="off">
  Username:
<!--ใส่แอทริบิวท์ autocomplete="off" ในแท็ก input text  เพื่อกำหนดให้บราวเซอร์ไม่ต้องจำค่าข้อความใน input text นั้นๆ  -->
  <input name="username" type="text" id="username"  autocomplete="off" />
  <br />
  Password:
  <input name="password" type="password" id="password" />
  <br />
  <input type="submit" name="Submit" value="Submit" />
</form>
]]>Wed, 25 Mar 2009 22:20:12 +0700สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่ายhttp://www.ninenik.com/สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย_javascript_แบบง่าย-186.htmlCSS Code

 
<style type="text/css">    
/* css code สำหรับรูปแบบของภาพที่ต้องการแสดง */  
div.bigGallPic{   
    position:fixed;   
    margin:auto;   
    top:150px;   
    left:150px;   
    padding:3px;   
    text-align:center;   
    background-color:#FFFFFF;   
    border:5px solid #666666;   
    display:none;   
    cursor:pointer;   
}   
</style>

Javascript Code

 
<script type="text/javascript">    
function setPic(imgShow){   
    var showBig=document.getElementById('bigGallDiv');   
    showBig.style.display='block';   		
	showBig.style.visibility='hidden';   
    showBig.innerHTML="<img src='"+imgShow+"' title='คลิกที่รูปเืพื่อปิด' >";   
	setTimeout("showPic()",500);
} 
function  showPic(){
	var showBig=document.getElementById('bigGallDiv');   
    var LeftVal=0;   	
    if(showBig.innerHTML!=""){   
		LeftVal=showBig.offsetWidth;      					
		LeftVal=(gWH().width-LeftVal)/2;   	
    }   
	showBig.style.left=LeftVal+"px";   
	showBig.style.visibility='visible';   	
}
function gWH(){ // ฟังก์ชันหาความกว้างและความสูงของหน้าเพจ   
    var e = window, a = 'inner';   
    if ( !( 'innerWidth' in window ) ){   
        a = 'client';   
        e = document.documentElement || document.body;   
    }   
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }   
}  
</script>

HTML Code

 
<div class="bigGallPic" id="bigGallDiv" onclick="this.style.display='none'"></div>  
<!--รูปแบบการใช้งานคือการส่งค่ารูปภาพขนาดใหญ่เข้าไปใน ฟังก์ชัน showPid('ตำแหน่งของรูปภาพขนาดใหญ่');-->  
<a href="javascript:setPic('big_img.jpg');"><img src="thumb_img.jpg" border="0" /></a>

ตัวอย่าง

]]>Sun, 22 Mar 2009 04:05:01 +0700