Category Archives: JavaScript

Popup

ที่มา : www.dynamicdrive.com/forums

<!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>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

		var id = '#dialog';

		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		//transition effect
		$('#mask').fadeIn(1000);
		$('#mask').fadeTo("slow",0.8);

		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();

		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);

		//transition effect
		$(id).fadeIn(2000);

	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();

		$('#mask').hide();
		$('.window').hide();
	});

	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});

});

</script>
<style type="text/css">
body {
	font-family:verdana;
	font-size:15px;
}
a {
	color:#333;
	text-decoration:none
}
a:hover {
	color:#ccc;
	text-decoration:none
}
#mask {
	position:absolute;
	left:0;
	top:0;
	z-index:9000;
	background-color:#000;
	display:none;
}
#boxes .window {
	position:absolute;
	left:0;
	top:0;
	width:440px;
	height:200px;
	display:none;
	z-index:9999;
	padding:20px;
}
#boxes #dialog {
	width:375px;
	height:203px;
	padding:10px;
	background-color:#ffffff;
}
</style>
</head>
<body>
<h2><a href="http://www.queness.com/">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2>
<div style="font-size: 10px; color: rgb(204, 204, 204);">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>
<div id="boxes">
  <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"> Simple Modal Window | <a href="#" class="close">Close it</a> </div>
  <!-- Mask to cover the whole screen -->
  <div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>
</html>

ทำความรู้จักกับ มัลแวร์ไอเฟรม จะได้ไม่ตกเป็นเหยื่อ

HTML <iframe> Tag (Reference)

นิยาม

An inline frame is used to embed another document within the current HTML document.

คือคำสั่ง <iframe> ใช้ในการฝังอะไรซักอย่างไว้ในหน้า html ของเราอีกที

ตัวอย่างการใช้งาน

    <iframe src="http://www.w3schools.com"></iframe>

ซึ่งนับว่าเป็นคำสั่งที่มีประโยชน์ไม่ใช่น้อย เมื่อใช้ในทางที่ถูกต้อง

แต่ก็มีการนำมาใช้ในทางที่ผิด คือเป็นการฝังโค๊ดของหน้าเว็บเพจที่มีมัลแวร์ไว้ในหน้า html

โดยการฝังไว้ตรงๆ ก็คงสังเกตุได้ไม่ยาก แต่ถ้าฝังโค๊ดด้วย JavaScript นี่สิ! ยุ่งเลย

วิธีสังเกตุในโค๊ดว่ามีโค๊ดแปลกปลอมมั๊ย วิธีง่ายๆเลย ให้ดูว่าในโค๊ดมี คำสั่ง JavaScript ต่อไปนี้หรือไม่

<script>
    eval(unescape('xxx'));
</script>

ถ้ามีก็เตรียมใจไว้เลย

โดย ‘xxx’ ในที่นี้คือ uri หรือ url ของหน้าเว็บเพจที่มีมัลแวร์อยู่นั่นเอง

เช่นเข้ารหัส url ด้วยคำสั่ง  escape จะได้ตัวอักษรที่อ่านไม่รู้เรื่อง เช่น

<script>
    document.write(escape("Need tips? Visit W3Schools!"));
</script>

จะได้

    Need%20tips%3F%20Visit%20W3Schools%21

ดูรหัส url ทั้งหมดได้ที่นี่ HTML URL Encoding Reference

เวลาที่ web browser อ่านจึงต้องใช้คำสั่ง unescape  มาถอดรหัส และใช้คำสั่ง eval มาสั่งให้โค๊ดดังกล่าวทำงาน

ถ้าติดเข้าแล้วจะทำยังไง??

นั่งลบเองทีละบรรทัด หรือใช้ FizScript โดยอ่านได้ที่นี่ www.thaiseoboard.com

Debug JavaScript ด้วย Visual Studio

คัดลอกมาจาก: http://codesanook.com/

โดยส่วนตัว ผมเองพอทราบมาช่วงหนึ่งแล้วว่า Visual Studio สามารถ debug JavaScript ผมเคยได้ลอง set break point ในคำสั่ง JavaScript แต่พอลอง debug ดู โปรแกรมก็ไม่ได้มาหยุดที่ break point จึงไม่สามารถ debug JavaScript ได้ และประกอบกับผมเองก็ใช้งาน FireFox เป็นหลักจึงหันไปใช้การ debug JavaScript ด้วย FireBug ที่เป็น add-on ของ FireFox แทน แต่หลังจาก debug ด้วย FireBug มาช่วงหนึ่ง ผมพบว่ามีบ้างครั้งที่ผมสั่งให้มีการทำงานแบบ step into ไม่ยอมทำงาน ทำให้ผมได้พยายามหา tool อื่นๆ มาช่วยการ debug JavaScript จนทำให้นึกถึงการ debug JavaScript ด้วย visual Studio ขึ้นมาอีกครั้ง แต่คราวนี้ผมได้พยายามหาข้อมูลอย่างเต็มที่ให้สามารถใช้งาน feature นี้ใน visual studio ให้ได้ จนท้ายที่สุดผมก็ได้พบคำตอบ เป็นวิธีการที่ง่ายมากๆ เพียงแค่เพิ่ม key word debugger; เข้าไปในส่วนบนของคำสั่ง JavaScript ที่เราจะ debug ดังตัวอย่างในภาพต่อไปนี้

ในตัวอย่างนี้ ผมได้ใช้ Visual Studio 2008 และ jQuery 1.4.2  เป็น JavaScript Framework

ขอให้สังเกตบรรทัดที่ 11 ที่ได้เพิ่ม key word debugger; เข้าไป

และบรรทัดที่ 14 ที่มีการ set break point เอาไว้

ผมได้ทำการ debug คำสั่ง JavaScript แบบง่าย ๆ เพื่อทดสอบว่าเมื่อ click ที่ปุ่มที่มี id clickMe โปรแกรม จะวิ่งมาหยุดที่ตรงบรรทัดที่มีคำสั่งเพื่อแสดง message box ที่มีข้อความว่า You’ve just clicked me !!!

เพื่อให้การ debug ทำงานได้ จำเป็นที่จะต้อง setting ค่าใน IE (Internet Explore) โดยเปิดโปรแกรม IE ขึ้นมา

เข้าไปที่ Tools > Internet Options

เลือก Tab Advanced เลื่อนหา Section Browsing

uncheck disable script debugging (Internet Explorer) และ disable script debugging (other) ดังภาพ

กดปุ่ม F5 เพื่อ debug โปรแกรม

แล้วทำการ step over , step into ได้ตามต้องการ

สามารถที่จะดูสถานะของ object ด้วย locals Window หรือทำการ add object to watch แบบเดียวกับกับการ debug C# หรือ VB.NET

ผมได้แนบ source code ของตัวอย่างนี้ สามารถโหลดได้ตาม link ข้างล่างนี้เลย

download source code

ลองนำวิธีนี้ไปใช้กันดูนะครับ คิดว่าจะเป็นประโยชน์มากเมื่อมีปัญหากับ JavaScript