css – iT Blog

ตัวอย่าง CSS ใน HTML (Joom.htm)

CSS (Cascading Style Sheets) คือ ภาษาคอมพิวเตอร์สำหรับกำหนดรูปแบบในเอกสาร HTML หรือเรียกว่า สไตล์ชีต ที่ใช้กำหนดรูปแบบ (Layout) สีอักษร สีพื้น ตัวอักษร การจัดวาง ระยะห่าง เส้นขอบ เป็นต้น มีรูปแบบ Syntax เฉพาะตัว ได้รับการกำหนดมาตรฐานโดย W3C การใช้ CSS มี 3 แบบ คือ Inline, Internal และ External CSS

เรื่อง CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้ ปัจจุบัน CSS มีถึงรุ่น 3 แล้ว ในการใช้งานจริงมักสร้าง CSS แบบ External style sheet เพราะแฟ้มอื่นเรียกใช้ได้ ส่วน Internal style sheet ก็จะเรียกใช้ได้เฉพาะในแฟ้มนั้น ส่วน Inline style ก็จะพิมพ์คำว่า style ต่อท้าย tag นั้นไปเลย ซึ่งตัวแปรหลัก 2 แบบที่กำหนดเองใน CSS มี 2 แบบคือ id กับ class
การกำหนด และการเรียกใช้ต่างกันไป ถ้าเป็น id จะขึ้นต้นด้วย # แต่เป็น class จะขึ้นต้นด้วย . ถ้าเรียกใช้ id จะใช้ properties name ว่า id ส่วนเรียกใช้ class จะใช้ properties name ว่า class

สิ่งที่แตกต่างกัน คือ id จะเรียกใช้ครั้งเดียว แต่ class เรียกใช้ได้หลายครั้ง ถ้าวางแผนอย่างใจเย็นก็จะใช้ประโยชน์จาก css ได้อย่างเต็มที่ มีตัวอย่างที่ css_sample.htm และ การทำเมนู Responsive แบบ Top Nav หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com

CSS คือ ภาษาคอมพิวเตอร์สำหรับกำหนดรูปแบบในเอกสาร HTML เรียกว่า สไตล์ชีต ที่ใช้กำหนดรูปแบบ สีอักษร สีพื้น ตัวอักษร การจัดวาง ระยะห่าง เส้นขอบ เป็นต้น มีรูปแบบ Syntax เฉพาะตัว ได้รับการกำหนดมาตรฐานโดย W3C การใช้ CSS มี 3 แบบ คือ Inline, Internal และ External CS จากตัวอย่างในรหัสต้นฉบับ แฟ้ม joom.htm ที่เป็นอัลบั้มแบบ static ถูกทำเครื่องหมายไว้ 6 จุด เพื่อใช้ชี้ให้เห็นในสิ่งที่น่าสนใจ ดังนี้ 1) แฟ้มเก็บ css ที่เก็บไว้ภายนอก แต่อยู่ในเครื่องบริการของตนเอง ทำให้เว็บเพจอื่นโหลดไปใช้ได้ นำเข้าได้ด้วย link tag 2) เขียน css ไว้ในเว็บเพจ และเรียกใช้ได้เฉพาะในเว็บเพจนั้น เขียนอยู่ใน style tag 3) ใน style tag สามารถกำหนด ขนาด media สำหรับเรียกใช้ css แต่ละชุดได้ เช่น mobile, desktop, notebook ก็จะแสดงผลแตกต่างกันไปตามขนาดหน้าจอ 4) มี css ที่ถูกพัฒนาให้ใช้ร่วมกับ Pure Javascript ที่ทำให้แสดงผลบนเว็บเพจแบบ dynamic และถูกใช้อย่างแพร่หลาย สามารถเรียกใช้ผ่านเครื่องบริการ CDN (Content Delivery Network) ได้ฟรี 5) การประกาศ css แบบ in-line ทำให้มีผลทันทีใน tag นั้น เช่น ประกาศบน div ใด ก็จะมีผลเฉพาะใน div นั้น หากอยู่นอกเหนือขอบเขต ก็จะไม่มีผล การประกาศใช้ที่จุดใด จึงต้องคำนึงถึงขอบเขตของการนำไปใช้ 6) การประกาศ css มักอยู่ในรูปของ class แล้ว tag ต่าง ๆ สามารถเรียกใช้ class ได้ และยังเรียกใช้หลาย class พร้อมกันได้ ซึ่งการตรวจสอบค่า css ในระหว่างแสดงผลบน browser เช่น chrome สามารถกด F12 แล้วใช้ Developer Tools เข้าไปตรวจสอบ หรือทดสอบแก้ไข แล้วการแสดงผลจะเปลี่ยนไปทันที ทำให้กลับไปแก้ไขโค้ดทำได้ง่ายขึ้น

https://www.thaiall.com/java/indexo.html

ใช้ bootstrap ทำเมนูไว้ใช้งาน

Bootstrap อาจแปลว่า สิ่งที่ช่วยทำให้ง่ายขึ้น หรือ สิ่งที่ทำได้ด้วยตัวเอง

Bootstrap คือ Front-end Framework ที่ช่วยพัฒนาเว็บไซต์ได้เร็วขึ้น ง่ายขึ้น
ซึ่ง Bootstrap มีเครื่องมือหลักให้ 4 อย่าง คือ
1) Scaffolding หรือ Grid system ช่วยจัด column และ row บน screen เพื่อจัด Layouts
2) Base CSS ช่วยจัด form, table, icons หรือ buttons
3) Components ช่วยจัด Navbar หรือ Pagination หรือ Progress bars หรือ Media object
4) JavaScript ช่วยจัด Dropdown, Tab, Popover, Collapse, Carousel

มีตัวอย่างการเรียกใช้ที่ http://www.thaiall.com/web2

เมนูคอมพิวเตอร์ ก็คล้ายกับเมนูอาหาร มีตัวเลือกมากมายให้เลือกสั่ง ต้ม ผัด แกง ทอด ไอศครีม เมนูคอมพิวเตอร์ที่คุ้นตาก็จะมี file, edit, view, help เป็นต้น นักพัฒนา (Developer) จะเลือกเครื่องมือจัดเมนูให้ผู้ใช้ (User) เข้าถึงบริการต่าง ๆ ที่พัฒนาขึ้น ต่อไปเป็นตัวอย่างการทดสอบ menu ทั้ง 6 แบบ ที่ใช้ bootstrap กับ Java script ข้างนอก และเขียนเอง
ซึ่งแชร์ source code 6 แบบ

ขั้นตอนการทดสอบ ให้เห็นภาพเมนู มีดังนี้
1. download clone (repository)
จาก ใน https://github.com/thaiall/programming-page
ได้แฟ้ม programming-page-master.zip
เมื่อวันที่ 28 กันยายน 2560 มีขนาด 4,713,347 bytes

2. start โปรแกรม apache ใน xampp

3. unzip แฟ้มในข้อแรก
ได้ห้อง programming-page-master
แล้วย้าย folder นี้ไปไว้ใน c:\xampp\htdocs

4. เปิด menu แบบที่ 1
ด้วย http://localhost/programming-page-master/php/menu01.php
จนถึง menu06.php
ซึ่งทั้ง 6 แบบทำงานแบบ client-sided script

https://gist.github.com/thaiall/8e2a113c7cde54d4e18c217ba3dd8dae

5. พบว่า menu01.php – menu03.php ใช้ bootstrap

6. พบว่า menu04.php ใช้ javascript ของ DHTML Menu version 3.3.19

7. พบว่า menu05.php ใช้ jqueryui.com

8. พบว่า menu06.php เขียน javascript และ css ใช้เอง

มีหน้าตาของ Menu ทั้ง 6 แบบ ดังนี้

การเขียน CSS เพื่อเรียกใช้ font ของตนเองที่เตรียมไว้

มีโอกาสเขียนเว็บเพจที่ใช้ font ที่เตรียมไว้
ได้ download มา 2 font แล้วเก็บไว้ในห้องหนึ่ง
ชื่อ rsp_thchakrapetch.ttf กับ rsp_alexbrush.ttf
ส่วนแฟ้ม .htm ก็อยู่ในห้องเดียวกัน

มีขั้นตอนดังนี้
1. ประกาศชื่อแฟ้มฟอนต์ และชื่อฟอนต์ที่จะใช้ภายในเว็บเพจ
2. จุดใดจะกำหนดรูปแบบฟอนต์ ก็อ้างอิงที่ประกาศได้เลย
3. ดูจากตัวอย่างก็เข้าใจได้โดยง่าย

http://www.thaiall.com/web2

<body>
<style>
@font-face{
font-family:THChakraPetch;
src: url(‘rsp_thchakrapetch.ttf’);
}
@font-face{
font-family:AlexBrush;
src: url(‘rsp_alexbrush.ttf’);
}
</style>
<p style=”font-family:THChakraPetch;font-size:100px;”>สวัสดี</p>
<p style=”font-family:AlexBrush;font-size:100px;”>hello</p>
<p><a href=”rsp_thchakrapetch.ttf”>rsp_thchakrapetch.ttf</a></p>
<p><a href=”rsp_alexbrush.ttf”>rsp_alexbrush.ttf</a></p>
</body>

ดาวน์โหลดฟอนต์ และ code ตัวอย่าง โดย view source ได้เลย
http://www.thaiall.com/web2/download_font.htm

ปรับความสูงของ site-header หรือระยะห่างต่าง ๆ ใน wordpress

แฟ้ม style.css ของ Theme: Twenty sixteen
ใน wordpress มีกำหนดไว้เยอะมาก
ตัวหนึ่งที่ใช้กำหนดความสูงของ header คือ site-header

การกำหนดให้ padding: เป็น 0em และ 0%
ทำให้ส่วนของ header มีขนาดเล็กลง
ไม่ต้องมีขอบกินพื้นที่ของเนื้อหา

การตามแก้ไข css ใช้ inspector ของ browser
ทั้ง firefox และ chrome ช่วย developer ได้มาก
หาตำแหน่งได้ง่ายขึ้นมาก โดยกด ctrl-shift-i
จากนั้นคลิ๊ก inspector
เมื่อทราบว่าตำแหน่งใดที่กำหนด css ผ่านตัวใด ก็เข้าแก้ไขได้
เช่น

ลดขนาด margin-top หรือ padding เป็น 0em เป็นต้น
ลดขนาด margin top กับ left ของ site เหลือ 2px
ลดขนาด padding ของ site-content
จาก padding: 0 4.5455%; เป็น padding: 0 1%;
เพิ่มขนาด width: 71.42857144%; เป็น 80%
ของ body.no-sidebar:not(.search-results) article:not(.type-page) .entry-content
ลดขนาด width: 21.42857143%; เป็น 10%
ของ body:not(.search-results) article:not(.type-page) .entry-footer

กำหนดรูปแบบให้ตัวเลขแบบ leading Zero

มีเพื่อนต้องการแฟ้ม .csv ที่มี leading zero
คือ นำหน้าด้วยเลข 0 หากจำนวนหลักไม่ครบตามต้องการ
เพราะเป็นเงื่อนไขของหน่วยเหนือ เค้าขอมาอย่างไรก็ต้องจัดให้
กำหนดมาให้มีข้อมูล 3 หลัก เช่น 007 ส่งแต่ 7 ไปเค้าก็ไม่ปลื้ม
แต่ข้อมูลในระบบเก็บเป็นเลข 7
เดิมนั้นคุณปอ นำข้อมูลออกจากระบบ (export)
แล้วเขียนในรูปแบบ .htm แต่เปลี่ยนสกุลเป็น .xls อัตโนมัติ เพื่อใช้ใน excel
จากนั้นคุณนอ ก็เปิดใน excel เพื่อประมวลผลอีกซะป๊ะ
แล้วจึง save as เป็น .csv เพื่อนำเข้าระบบ (import) ให้หน่วยเหนือ

สรุปขั้นตอน
1. ข้อมูลเลข 7 ในระบบ ปรับเป็น 007 แล้วส่งเป็น .htm จะพบ 007 ผ่าน table
ไม่พบปัญหา เมื่อแสดงผล 007 ใน browser
2. นำแฟ้ม .htm แปลงเป็น .xls ด้วยการเปลี่ยนนามสกุล เพื่อนำไปเปิดใน excel
ไม่พบปัญหา เพราะแฟ้มทั่วไปเปลี่ยนนามสกุลได้
3. เปิดแฟ้ม .xls ที่มีเลข 007 พบว่า excel ปรับการแสดงผลเป็น 7 ทันที
พบปัญหา ว่าเลข 007 เมื่อแสดงใน excel จะพบเพียงเลข 7
4. เดิมแก้ด้วยการปรับแบบ manual ใน excel
พร้อมไปกับการประมวลผลอื่น แล้วส่งออกเป็น .csv ก็รู้สึกว่าเป็นการทำงานหลายรอบ
คุณนอ บอกคุณปอ ว่าไม่สะดวก ช่วยปรับระบบให้หน่อย

สรุปว่า
ในขั้นตอนที่ 1 เขียนข้อมูลออกจากระบบ
โดยปรับเพิ่ม css เข้าไปใน table เพื่อให้การแสดงผลใน excel ถูกต้อง
ด้วยการเติม css ว่า style=”mso-number-format:000;”
เท่านี้ใน excel ก็จะมองเห็น 000 ตามต้องการแล้ว ซึ่งใช้งานได้กับ excel
เมื่อส่งออกไปเป็น .csv ก็พบว่ารูปแบบ 000 ติดไปด้วย และส่งไปให้หน่วยเหนือได้

ตัวอย่าง source code ใน .xls
<body>
<table>
<tr><td style=”mso-number-format:000;”>0</td></tr>
<tr><td style=”mso-number-format:000;”>000</td></tr>
</table>
</body>

ปล. ข้อมูลเรื่องนี้ได้จากการย้อนรอยกลับขึ้นไปจากตัว excel เองครับ

การเปลี่ยนเว็บไซต์เป็นขาวดำ ต้องใช้วันที่ 14 ตุลาคม พ.ศ.2559

พบการแชร์ CSS code สำหรับเปลี่ยน webpage เพื่อไว้ทุกข์
ดังนั้นหากท่านใด ต้องการใส่ตัวกรองให้กับ webpage ให้เป็นสีขาวดำ
(if you want to use filter to change webpage for grayscale mode)
ทำได้โดยเพิ่ม code ของ CSS (Cascading Style Sheets) เข้าไปใน webpage
ซึ่งแต่ละ browser อาจยอมรับคำสั่งแตกต่างกันไป
ซึ่งคำสั่งสำคัญ คือ filter
มี source code ของ #blackandwhitecss ดังนี้

https://gist.github.com/thaiall/d4fea62b72d8ab026896d6142c0b4b6d

ความแตกต่างของ id และ class

CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้

วันนี้ 11 มิ.ย.59 ว่าจะจัดการเรื่อง float:left ใน web2 ให้เรียบร้อย แต่มาใช้เวลากับการนั่งทดสอบ Developer tools ของ chrome นานไปหน่อย ติดใจเลย
ทำให้ได้เรียนรู้ว่า chrome ช่วยให้การปรับแต่งเว็บไซต์ง่ายกว่าใช้ editor ธรรมดาอย่าง editplus มาก
http://www.thaiall.com/web2
—
เรื่อง CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้ ปัจจุบัน CSS มีถึงรุ่น 3 แล้ว ในการใช้งานจริงมักสร้าง CSS แบบ External style sheet เพราะแฟ้มอื่นเรียกใช้ได้ ส่วน Internal style sheet ก็จะเรียกใช้ได้เฉพาะในแฟ้มนั้น ส่วน Inline style ก็จะพิมพ์คำว่า style ต่อท้าย tag นั้นไปเลย ซึ่งตัวแปรหลัก 2 แบบที่กำหนดเองใน CSS มี 2 แบบคือ id กับ class

การกำหนด และการเรียกใช้ต่างกันไป
ถ้าเป็น id จะขึ้นต้นด้วย # แต่เป็น class จะขึ้นต้นด้วย . ถ้าเรียกใช้ id จะใช้ properties name ว่า id ส่วนเรียกใช้ class จะใช้ properties name ว่า class

สิ่งที่แตกต่างกัน คือ id จะเรียกใช้ครั้งเดียว แต่ class เรียกใช้ได้หลายครั้ง ถ้าวางแผนอย่างใจเย็นก็จะใช้ประโยชน์จาก css ได้อย่างเต็มที่ มีตัวอย่างที่ css_sample.htm หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com

<html><head><style type=”text/css”>
#header {background:yellow;font-size:20px;}
.title-text {color:red;}
p.big { font-size:40px; }
span.small { font-size:10px; }
table, th, td { border: 1px solid black; }
.burin1 {color:red;border: 2px}
.burin2 {font-size:20px;float:left;}
.burin3 {color:blue;font-size:30px;float:left;}
</style><body id=”header” class=”title-text”>
<span style=”color:green;”>hello</span><p class=”big”>my</p>
<span class=”small”>friend</span><span class=”small”>is tom.</span>
<table class=”burin1″><tr><td>one</td></tr></table>
<table class=”burin2″><tr><td>two</td></tr></table>
<table class=”burin3″><tr><td>three</td></tr></table>
http://www.w3schools.com/css/css_table.asp
</body></html>

ถึงยุค responsive web design มาได้พักหนึ่งแล้ว

เดี๋ยวนี้ .. เขียนเว็บหนึ่งหน้า ต้องนั่งออกแบบกันหน่อยว่า
จะให้เข้ากับอุปกรณ์ใด ขนาดเท่าใด
สมัยก่อน คิดว่าจะให้เข้ากับจอขนาดเท่าใด
เช่น ใคร ๆ ก็ใช้จอใหญ่ ออกแบบให้มี 4 คอลัมก็จบ
ก็จะได้รูปแบบที่เหมาะสมกับจอขนาดใหญ่เท่านั้น
เมื่อเปลี่ยนจอภาพเป็นขนาดอื่น ก็จะไม่เปลี่ยนไปตามอุปกรณ์
เช่น ใช้สมาร์ทโฟน แต่แสดง 4 คอลัม เค้าก็จะเห็นได้ไม่หมด
หรือต้องคอยเลื่อน scroll bar ขยับไปมา ซึ่งไม่สะดวก

แต่เดี๋ยวนี้ ต้องคิดว่าจะให้เข้ากับจอขนาดเท่าใดบ้าง
โดยเขียนเว็บเพจ 1 หน้า แต่ปรับการแสดงผลอัตโนมัติ
ให้เหมาะสมกับแต่ละจอ
จอเล็กก็แสดง 1 คอลัม
จอกลางอย่างแท็บเล็กก็แสดง 2 คอลัม
จอคอมพิวเตอร์ตั้งโต๊ะก็แสดง 3 คอลัม
ส่งไปแสดงทางโปรเจคเตอร์ก็แสดง 4 คอลัม

พบฟังก์ชันใน css คือ @media ()
ใน () ห้ามมีเครื่องหมาย ; ต่อท้าย
ถ้ามีก็จะทำให้ responsive ไม่ทำงาน
แต่ ; ใช้กับการแบ่งระหว่าง properties อื่นใน css ได้
ยกเว้นอย่าใช้ ; ปิดท้ายค่าที่ส่งไปใน ()

ตัวอย่าง code

<html><head><style type=”text/css”>
.m_still, .m_hidden{width:728px;}
/* @media screen and (max-width:320px;) { */
@media screen and (max-width:320px) {
.m_still{visibility:visible;width:300px;}
.m_hidden{visibility:hidden;display:none;}
}</style></head><body>
<table class=”m_still” style=”background:yellow;”><tr><td>a</td></tr></table>
<table class=”m_hidden” style=”background:green;”><tr><td>b</td></tr></table>
</body></html>

font-face คือ การกำหนดการเรียกใช้ฟอนต์บน CSS ที่เพิ่มช่องทางได้หลากหลาย

ต้องการผลแบบนี้ จะเขียน code อย่างไร เพราะ world เล็กไปหน่อย

เคยได้คุยกับนักศึกษาเรื่องการกำหนด font แล้วมีการทดสอบสร้างแฟ้ม .htm
ด้วย Word 2010 โดย save as แบบ Web Page, Filtered
ซึ่งปกติการใช้ font ในการเขียนเว็บเพจ มักเรียกใช้ font ที่ติดตั้งบนเครื่อง client
แต่ใน CSS (Cascading Style Sheets) เราสามารถเรียกใช้ font บน Web server
ได้มีการเพิ่ม @font-face เข้าไปใน specification ของ CSS3
โดยการอ้างอิง Font file สามารถทำได้หลากหลายผ่าน src: url();

ผลการทดสอบใช้กับ Firefox และ Chrome รุ่นใหม่แล้วโอเค
แต่ IE 11 ใช้คุณสมบัตินี้ได้ แต่มีปัญหากับ .otf ส่วน .ttf โอเค

ต.ย. 1
<html><head><title>my font</title><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
–>
</style></head><body>
<div style=’font-size:70pt;font-family:”WisdomScript”;’>
Hello world
</div>
</body></html>

ต.ย. 2
<html><head><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
body{font-family:”WisdomScript”;}
–>
</style></head><body>
Hello world
</body></html>
ต.ย. 3
<html><head><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
@font-face{font-family:”AlexBrush”; src: url(‘AlexBrush-Regular.ttf’);}
body{font-size:72pt;font-family:”arial”;}
–>
</style></head><body>
say “<span style=’font-family:”WisdomScript”;’>Hello</span>
<span style=’font-family:”AlexBrush”;’>world</span>”
</body></html>

ดาวน์โหลดฟอนต์นี้
ที่ https://github.com/codeforamerica/click_that_hood/blob/master/public/fonts/Wisdom-Script.otf
ที่ https://www.fontsquirrel.com/fonts/download/alex-brush
หรืออีกมากมาย
ที่ https://www.fontsquirrel.com/

Unobtrusive Javascript เป็นพื้นฐานการออกแบบเว็บไซต์ยุคใหม่

Unobtrusive Javascript คือ หลักการที่จะแยก javascript ออกไปจาก html
เพื่อให้การพัฒนา Responsive web design ง่าย
สอดคล้องกับการแยก style ออกจาก html ไปไว้ใน CSS
ยุคต่อไปของการพัฒนาเว็บไซต์จะเป็น responsive web design
การแยก html ออกจาก script และ css เป็นหลักการพื้นฐานก่อนเริ่มออกแบบ
โดยยึดว่า basic design มองไม่ที่ mobile device ก่อน
คือการมองจาก screen ที่มีข้อจำกัดที่สุดก่อน
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Unobtrusive JavaScript
http://www.siamhtml.com/%E0%B8%AA%E0%B8%AD%E0%B8%99%E0%B8%82%E0%B8%B1%E0%B9%89%E0%B8%99%E0%B8%95%E0%B8%AD%E0%B8%99-%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%97%E0%B8%B3-responsive-web-design/
http://8columns.com/articles/50009/1387278156096
http://web.stoms.co.th/2013/10/15/responsive-web-design/
—
ตัวอย่างแฟ้ม x1.htm
เขียน html แบบฝัง javascript ลงไปใน html tag
<body>
<input type=”text” name=”s1″ onchange=”window.status=’hello’;return true;” />
</body>
—
ตัวอย่างแฟ้ม x2.htm
เขียน html แบบเรียกใช้ javascript จาก html tag ซึ่งผูกเชื่อมกันชัดเจน
<head>
<script>
function s2(){ window.status = “hello”; }
</script>
</head>
<body>
<input type=”text” name=”s2″ onchange=”s2()” />
</body>
—
ตัวอย่างแฟ้ม x3.htm
เขียน html กับ javascript แยกกันเด็ดขาด แต่ฝากไว้ในแฟ้ม html เท่านั้น
<head>
<script>
window.onload = function() {
document.getElementById(“s3”).onchange = s3;
function s3(){ window.status = “hello”; }
}
</script>
</head>
<body bgcolor=yellow>
<input type=”text” name=”s3″ id=”s3″ />
</body>
—
ตัวอย่างแฟ้ม x4.htm
ทั้ง html กับ javascript และ css ต่างคนต่างอยู่ ใช้ include เข้ามา
<head>
<link href=”x.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”x.js”></script>
</head>
<body>
<input type=”text” name=”s41″ id=”s41″ />
<input type=”text” id=”s42″ />
</body>
—
ตัวอย่างแฟ้ม x.js
window.onload = function() {
var s41 = document.getElementById(“s41”);
s41.onchange = function() {
window.status = “hello”;
};
document.getElementById(“s42”).onclick = s42;
function s42(){ alert(“hello”); }
};
—
ตัวอย่างแฟ้ม x.css
body {
background-color: #ffff00;
}