วันจันทร์ที่ 22 เมษายน พ.ศ. 2556

Window


การเปิด ปิด window

          ตอนที่คุณเริ่มเปิด Browser ขึ้นมา มันจะสร้างและเปิดหน้าต่างขึ้นมา 1 หน้า เพื่อเริ่มต้นที่ Startup Page ของคุณใช่ไหมครับ นี่เป็นวิธีการที่ธรรมดาที่สุดในการสร้าง window object
          ส่วนใหญ่แล้ว window นี้จะเปิดอยู่ตลอดถ้าคุณยังไม่ออกจากโปรแกรมไปซะก่อน เมื่อคุณ พิมพ์ http://realdev.truehits.net ลงไป Site นี้ก็จะมาแทนที่ (replace) Startup page ของคุณ แต่ก็ยังคงเป็นหน้าต่างเดิม เพี่ยงแต่เปลี่ยน document เท่านั้น
          และในขณะที่คุณเล่น net เพลินๆ สมมุติว่าน้องชายมาขอส่ง page ไปหาแฟน คุณก็จะเปิดหน้าต่างใหม่ ด้วย Ctrl-n หรือไม่ก็ ไปเลือก New window ใน pull-down menu จะได้ไม่ต้อง replace site ที่คุณกำลังไปชมอยู่ แต่ในการเขียน Homepage เราคงสั่งให้ผู้ใช้เปิดหน้าต่างเองไม่ได้ จริงไหมครับ
          ใน JavaScript ก็มี methods ที่ใช้ในการเปิดปิดหน้าต่างอยู่ คือ open() กับ close() คำสั่ง open จะใช้สำหรับเปิด window ใหม่ขึ้นมา มีวิธีใช้ดังนี้ครับ
variable=open(url,name,[option])
variable ก็คือชื่อตัวแปรที่จะใช้เรียกเจ้า window นี้ คุณต้องตั้งชื่อให้มันครับ
url ก็คือ URL ของ document ที่จะเปิดใน window
[option] เป็นการกำหนดลักษณะของ window จะไม่ใส่ก็ได้ครับ
name ก็อาจนำไปใช้เป็น target ของ tag และ
ก็ได้ครับ
อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น:

Document


Document object คืออะไร

Document Object หมายถึงเอกสาร HTML ที่เป็นเวบเพจที่กำลังแสดงอยู่ในหน้าต่างหลัก เป็น Propertiy ของ window (window.document) Document Object เปรียบเสมือนหน้าหนังสือ หากคุณลองเปิดหนังสือดูจะเห็น หมายเลขหน้า และ หมายเลขบท ในทาง OOP หมายเลขหน้าและหมายเลขบทเหล่านั้นก็เป็น Properties สำหรับบอกคุณสมบัติ ของหน้านั้น ว่าอยู่ในหน้าที่เท่าไหร่ บทใด นอกจากนี้ ในหน้าหนังสือยังมีเนื้อหาสาระที่ประกอบอยู่ภายใน ไม่ว่าจะเป็นเนื้อหา หัวข้อ ย่อหน้า รูปภาพ ตาราง ฯลฯ สิ่งเหล่านี้ก็นับเป็น Properties ของหน้าหนังสือเช่นกันครับ
          Document object ก็คล้ายๆกับหน้าหนังสือนั่นแหละครับ มีทั้ง Properties ที่บอกคุณสมบัติของ Document และ Properties ที่เป็นเนื่อหาภายในที่ Document บรรจุอยู่

Properties ที่บอกคุณสมบัติของ Document

URLURL ของเวบเพจ
titletitle ของเวบเพจ
refererURL ของเวบเพจที่ลิงก์มาที่เอกสารนี้
lastModifiedวันเวลาของการ Update ครั้งสุดท้าย
historyเป็น list ของ URL ที่ผู้ใช้เคยผ่านไป โดยใช้ window เดียวกับเวบเพจนี้
domaindomain ของเวบเพจ
alinkColorสีของ Actived links
bgColorสีของพื้นหลัง
fgColorสีของอักษรปกติ
linkColorสีของ links
vlinkColorสีของ visited links
การเขียนชื่อ properties ให้ระวังการใช้ตัวอักษรให้ดี เล็กใหญ่ต้องตรงกันนะครับ
ตัวอย่าง properties ของเพจนี้ ลองกดดูละครับ




อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น:

Form


Text box

textbox ก็คือช่องรับข้อมูลบรรทัดเดียวครับ เป็น Property ของ form อีกทีหนึ่ง
Properties ของ text มีดังนี้ครับ
defaultValue เป็นค่า Default ของข้อความที่ปรากฎในใน text ครับ
name ชื่อของ text ครับ ควรจะกำหนดใน tag <input> จะทำให้อ้างถึงได้สะดวกครับ
value เป็นข้อความที่ปรากฎใน text ครับ 
ส่วนใหญ่แล้ว Properties ที่ถูกนำมาใช้ คือ value ครับ เพราะเป็น Property ที่อ้างถึงข้อความใน text โดยตรง
การอ้างถึง text ทำได้โดย
  1. ใช้ tag <form name=ชื่อของform> กำหนดชื่อเพื่อใช้อ้างอิงครับ
  2. ใช้ tag <input type=text name=ชื่อของtext> เป็นการสร้าง form ชนิด text ครับ
  3. ในการอ้างอิงถึงข้อความใน text ใช้แบบนี้ครับ document.formname.textname.value
  4. แล้วก็ใช้ tag </form> ปิดท้ายด้วยนะครับ ถ้ายังไม่เข้าใจ ตัวอย่างการใช้ครับ

&lt;html&gt; &lt;head&gt;&lt;title&gt;Using Text Form&lt;/title&gt;&lt;/head&gt; &lt;body&gt; &lt;form name=&#39;crazy&#39;&gt; &lt;input type=&quot;text&quot; name=&#39;hero&#39;&gt; &lt;/form&gt; &lt;br&gt; &lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;document.crazy.hero.value=&#39;สว&#3633;สด&#3637;คร&#3633;บ&#39;&quot;&gt; สว&#3633;สด&#3637;คร&#3633;บ&lt;/a&gt; &lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;document.crazy.hero.value=&#39;Hi! My dear&#39;&quot;&gt; Hi! My dear&lt;/a&gt; &lt;/body&gt; &lt;/html&gt;

อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น:

Link


ส่วนประกอบของ URLs

          Universal resource locator หรือ URLs เนี่ย เป็นมาตรฐานของ Address ต่างๆใน Internet เวลาคุณต้องการจะไปที่ไหน คุณก็ต้องพิมพ์ URLs ลงไปในช่อง Address ของ Browser ทีนี้ ก่อนที่เราจะศึกษา JavaScript เรามาศึกษารายละเอียดของการใช้ URLs กันก่อนดีไหมครับ
URLs ส่วนใหญ่จะอยู่ในรูปแบบนี้ครับ :
protocol//hostname[:port] path search hash 
protocol เป็นวิธีการในการขอการบริการใน Internet เช่น http:,ftp:,mailto: และ file: และคุณจะได้ศึกษา Protocol ของ JavaScript เพิ่มเติมในบทนี้ครับ hostname ก็คือชื่อเต็มของ host ที่มีเราติดต่อไปเช่น realdev.truehits.net portเป็นการกำหนดหมายเลข TCP port ที่จะใช้กับ Protocol ตัวอย่าง port ที่เรารู้จักดีก็เช่น port 80 ของ http: path คือ ไดเรกทอรีของข้อมูล วิธีเขียน slash จะใช้ตามแบบ UNIX เช่น /javascript/charpter11.php search เป็นส่วนที่ CGI ของ search engine ต่างๆเพิ่มให้เรา เพื่อใช้ส่งค่าตัวแปรของ CGI hash เป็นชื่อ URLs ที่ถูกกำหนดใน file ทำให้สามารถ links ไปยังจุดต่างๆในหน้าเดียวกันได้ (มักใช้กับ Webpage ยาวๆ) เครื่องหมายของ hash ก็คือ # เช่น #p2

โพรโตคอล javascript:

นอกจาก Protocols ทั่วไปแล้ว เบราเซอร์ที่สนับสนุน JavaScript ยังมีโพรโตคอล javascript: อีกตัวหนึ่ง ใช้สำหรับ run คำสั่ง javascript โดยไม่ต้องอาศัยเท็ก <script> แต่สามารถเรียกคำสั่งมาทำงานได้ทันที โดยการพิมพ์ลงไปในช่อง address หรือจะทำเป็น links ก็ได้ เช่น
ถ้าคุณพิมพ์ javascript:Date() ลงในช่อง address เบราเซอร์จะแสดงวันที่ และเวลาปัจจุบัน
ถ้าคุณพิมพ์ javascript:(4+4)*5 เบราเซอร์จะแสดงผลลัพธ์การคำนวณคือ 40
ถ้าคุณพิมพ์ javascript:"<H1>"+"What's up?"+"</H1>" บราเซอร์จะแสดงคำว่า "What's up?" ในขนาด H1
ถ้าคุณต้องการทำตัวลิงก์ แต่ไม่ต้องการลิงก์ไปไหน ก็อาจใช้คำสั่งนี้ครับ

&lt;a href=&quot;javascript:void(0)&quot;&gt;no taget links&lt;/a&gt;
และนี่คือผลที่ได้ครับ เป็นตัวลิงก์ที่คลิกไปก็ไม่เกิดอะไรขึ้น
อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น:

Image


Image properties

borderมีค่าเท่ากับแอตทริบิวต์ BORDER
completeโหลดภาพเสร็จหรือยัง
heightมีค่าเท่ากับแอตทริบิวต์ HEIGHT
hspaceมีค่าเท่ากับแอตทริบิวต์ HSPACE
lowsrcมีค่าเท่ากับแอตทริบิวต์ LOWSRC
nameชื่ออ็อบเจกต์ของ Image
srcชื่อ URL ของ Image
vspaceมีค่าเท่ากับแอตทริบิวต์ VSPACE
widthมีค่าเท่ากับแอตทริบิวต์ WIDTH
Image เป็น Object ที่ไม่มี Method แต่มี Event 3 ตัวคือ onAbout onError onLoad

การสลับภาพเมื่อเอา mouse ไปทับ

          เมื่อภาพภาพหนึ่งถูกแสดงในเวบเพจแล้ว หากเราใช้ JavaScript เปลี่ยนค่าในพรอเพอร์ตี้ src จะมีผลทำให้ภาพนั้นเปลี่ยนไปด้วย การสลับภาพเมื่อเอา mouse ไปทับ ก็จะใช้หลักการนี้แหละครับ แต่เราจะรู้ได้ไงว่า mouse จะไปทับเมื่อไหร่ ในเมื่อ Object Image ไม่มี Event ที่ชื่อ onmouseover และ onmouseout
          ไม่ยากครับ ก็อย่างที่กล่าวไว้ตอนต้นบทไงว่า เราจะเอา Links มาเพิ่มความสามารถให้ Image ก็ตรงนี้และครับ ถ้าเราทำ Image ให้เป็นตัวลิงก์ซะก็ใช้ Event onmouseover และ onmouseout ได้แล้ว แบบนี้ไงครับ
และนี้คือ Code ของตัวอย่างข้างบนครับ

&lt;a href=&quot;javascript:void(0)&quot; onmouseover=&quot;switch1.src=pic2.gif&quot; onmouseout=&quot;switch1.src=pic1.gif&quot;&gt; &lt;img src=&quot;pic1.gif&quot; name=&quot;switch1&quot;&gt; &lt;/a&gt;

การทำ Rollover

อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น:

Math


Math Object

Math Object เป็น object ที่ช่วยให้เราทำงานทางคณิตศาสตร์ได้ อ็อบเจกต์ Math เป็น อ็อบเจกต์ที่นำมาใช้ได้เลย โดยไม่ต้องประกาศ โดยจะมี ค่าคงที่ (Constants) และ Function ทางคณิตศาสตร์ให้เราใช้ครับ

Mathematical Constants

Eเป็นค่าคงที่ของ Euler ซึ่งเป็นฐานของ natural logarithms
LN2ln 2
LN10ln 10
LOG2Elog e ฐาน 2
LOG10Elog e ฐาน 10
PIค่าไพน์ (3.14159...)
SQRT1_2square root ของ 1/2
SQRT2square root ของ 2
ถึงคุณจะไม่รู้จักบางตัวก็ไม่เป็นไรนะครับ ไม่ค่อยได้ใช้หรอก แต่รู้ไว้เผื่อใช้ก็ได้ จริงไหมครับ เวลาคุณต้องการใช้ตัวไหนก็มองมันเป็น Property ของ Math ดังนั้นการอ้างถึงก็ใช้ Math.constant เช่น
CircleArea=Math.PI*r*r; // สูตรหาพื้นที่วงกลม

Mathematical Functions

ผมจะขอแบ่งฟังก์ชั่นออกเป็น 6 กลุ่มนะครับ ตามประเภทการใช้งาน

Rounding Functions

ใช้ในการปัดเศษของ Floating (ทศนิยม) ให้เป็น จำนวนเต็มครับมีอยู่ 3 ตัวคือ 
round() ใช้ปัดเศษไปหาจำนวนเต็มที่ใกล้ที่สุด
floor() ใช้ปัดเศษทิ้ง (ปัดลง)
ceil() ปัดขึ้น
อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น:

String


การใช้ String Object

การใช้ความสามารถของ Object String สามารถใช้งานได้กับตัวแปรทุกตัวที่เป็น String โดย ที่ไม่ต้องใช้คําสั่ง new เพื่อสร้างอ็อบเจ็กต์ใหม่ เพราะตัวแปรแต่ละตัวก็เป็น Object อยู่แล้วนั่นเอง ดังนั้นจึงใช้ Properties และ Method ของ String ได้ทันที เช่น

document.write(&quot;Sawasdee&quot;.bold());

การหาความยาวของ String

String มีพรอเพอร์ตี length เก็บความยาวของข้อความ ดังนั้น ถ้าจะเอาความยาวของข้อความไปเก็บไว้ในตัวแปร a ก็สามารถทำได้ดังนี้

a = &quot;How are You?&quot;.length

การกําหนดรูปแบบตัวอักษร

ในการเขียนเวบเพจด้วย HTML หากเราต้องการแสดงข้อความว่า Hello! ที่มีรูปแบบตัวอักษรให้เป็นตัวหนา เราก็คงใช้คําสั่งอย่างเช่น <B>Hello! </B> แต่ในหัวข้อนี้เราจะได้รู้จักกับอีกวิธีการหนึ่งในการกําหนดรูปแบบตัว อักษรด้วย JavaScript โดยมีรูปแบบดังนี้

&quot;ข&#3657;อความ&quot;.ร&#3641;ปแบบต&#3633;วอ&#3633;กษร()
สรุปเมทธอดสำหรับจัดรูปแบบของ String
big()<BIG>
blink()<BLINK>
Bold()<B>
fixed()<TT>
Fontcolor(color)<FONT COLOR=...>
Fontsize(size)<FONT SIZE=...>
italics()<I>
small()<SMALL>
strike()<STRIKE>
sub()<SUB>
sup()<SUP>
อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)