Tag: javascript

วิธีสร้าง accordion โดยไม่ต้องใช้ javascript
ในความคิดของหลาย ๆ คนคิดว่า ถ้าจะสร้าง accordion สำหรับใช้ในเว็บไซต์ เราต้องใช้ javascript ประกอบ แต่ที่จริงแล้ว ตัว html มี tag ที่สามารถใช้งานในลักษณะคล้ายกับ accordion ไว้ให้อยู่แล้ว tag นั้นก็คือ <details>

โดย <details> นั้น จะใช้งานร่วมกับ <summary> และมีสถานะที่จะแสดงผลข้อมูล คือ open

รูปแบบมาตรฐานของ <details> จะแสดงผลนำหน้าด้วยสามเหลี่ยมขนาดเล็ก และหมุนเป็นสามเหลี่ยมคว่ำ เพื่อแสดงสถานะการเปิด ปิด

ส่วนข้อความหลังสามเหลี่ยมนั้น เป็นข้อความใน <summary>

ตัวอย่างรูปแบบมาตรฐานของ <details>
```
<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
```
ผลลัพธ์

Details
Something small enough to escape casual notice.

ซึ่งถ้าเราต้องการให้มีสถานะเปิดแสดงผลตั้งแต่แรก ให้ใส่ open ลงไปใน <details> เลย
```
<details open>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
```
ผลลัพธ์

Details
Something small enough to escape casual notice.

และเรายังสามารถเขียน css เพื่อมาตกแต่งหน้าตาของมันให้ดูสวยงามขึ้นได้อีกด้วย

ตัวอย่าง accordion โดยไม่ต้องใช้ javascript

CodePen Embed Fallback

เข้าใจได้ว่า สามารถใช้งานในระดับพื้นฐานได้ละ แต่ถ้าต้องการจะประยุกต์ใช้งานอะไรเพิ่มเติม คงต้องให้ javascript มาช่วยเหลืออยู่ดี
February 25, 2022
[HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

คงน่าเสียดายที่เว็บ HTML5 CSS3 ที่เราทำมามันจะถูกจำกัดให้ Browser เก่า ๆ แสดงผลได้ไม่เหมือนกับที่เราต้องการ ดังนั้นจึงมีตัวช่วยอย่าง Modernizr ออกมา

โดย 1 ในความสามารถของ Modernizr ซึ่งเป็น Javascript Library นั้นจะช่วยเช็คว่า Browser ที่ทำงานอยู่สนับสนุนการทำงานของ HTML5 CSS3 อย่างไรบ้าง เราจะใช้งานในลักษณะแบบนี้

[html]
<script src="js/modernizr.min.js"></script>
[/html]

และกำหนดที่ html ให้มี class เป็นแบบนี้

[html]
<html class="no-js">
[/html]

และเมื่อตัว Modernizr ทำงาน class ของ html ก็จะเปลี่ยนไปเป็นลักษณะแบบนี้ครับ

[html]
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
[/html]

จะเห็นว่า class ที่เปลี่ยนไปนั้น จะบอกถึงคุณสมบัติต่าง ๆ ที่ Browser ตัวนี้สนับสนุน เพื่อที่เราจะได้นำ class เหล่านี้ไปประยุกต์ให้ Browser เก่า ๆ สามารถแสดงผลได้ใกล้เคียงกับที่ Browser รุ่นใหม่ ๆ แสดงผลได้มากที่สุด

รวมเรายังสามารถกำหนดการใช้งานเฉพาะส่วนที่เราต้องการก็ได้ ในรูปแบบนี้ครับ

โดย Modernizr สนับสนุนการทำงานกับ IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome.
บน mobile Modernizr ใช้ได้กับ iOS mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile และกำลังพัฒนาเพื่อให้สนับสนุน Blackberry 6+

ลองไปศึกษาเพิ่มเติมที่เว็บ : Modernizr เลยครับ

December 26, 2011
วิดีโอสอนพื้นฐานของ HTML CSS Javascript จาก Google

ในการจะเรียนรู้ HTML CSS นั้น ผมคิดว่าในตอนนี้ไม่น่าจะเป็นเรื่องยากแล้ว เพราะมีข้อมูลความรู้มากมายในอินเตอร์เน็ตให้เราค้นหา ให้เราศึกษา และนี่ก็เป็น 1 ในนั้น มันคือ วิดีโอที่ทาง Google ได้ทำขึ้นเพื่อสอนพื้นฐานของ HTML CSS Javascript เรามาดูกันเลยดีกว่าครับ

แนะนำให้รู้จัก HTML CSS Javascript

HTML

แนะนำให้รู้จัก HTML

แบบฝึกหัดในหัวข้อ HTML

CSS

แนะนำให้รู้จัก CSS

สอนใช้ CSS เบื้องต้น

แบบฝึกหัดในหัวข้อ CSS

JavaScript

แนะนำให้รู้จัก JavaScript

แบบฝึกหัดในหัวข้อ JavaScript

HTML CSS เนี่ยผมว่าไม่ยากที่จะเรียนรู้หรอกครับ อย่าคิดว่ามันยาก ถ้ายังไม่ได้เริ่มที่จะเรียนรู้มันนะครับ ^^

ที่มา : Google: HTML, CSS, and Javascript from the Ground Up

November 23, 2011
หัดเขียนโปรแกรมไปกับ Codecademy.com

วันก่อนไปเจอเว็บน่าสนใจเข้าเว็บนึง ชื่อเว็บ Codecademy โดยเว็บนี้จะสอนเราเกี่ยวกับการเขียนโปรแกรม ทีละขั้นตอน เข้าใจง่าย และทำไปพร้อม ๆ กับที่เว็บสอน รวมถึงมีการเก็บสะสมคะแนน และ Badges ต่าง ๆ ที่เราจะได้ในระหว่างที่ทำแบบทดสอบ

หน้าตาของเว็บ Codecademy

คลิ๊กที่ Sign Up เพื่อสมัครเข้าใช้งานเลยครับ

กรอกข้อมูลต่าง ๆ เพื่อสมัครเข้าใช้งาน

เมื่อกด Sign Up ไปแล้ว ก็เข้าสู่หน้านี้

หน้า Profile หลังจากสมัครแล้ว

ระหว่างนั้นก็จะมีอีเมลส่งมาให้ตามอีเมลที่เราสมัครไป

เนื้อหาของอีเมลที่ส่งมาให้เรา

แต่ก่อนจะทำอะไรต่อไป แนะนำให้ไปที่ Edit Account ก่อนนะครับ จะได้ตั้งค่าต่าง ๆ ที่จำเป็นในการเข้าใช้ครั้งหน้าของเรา

ตั้งค่า Account ของเราให้เรียบร้อยก่อนเรียน

เมื่อกรอกข้อมูลต่าง ๆ จนเสร็จแล้ว มาที่หน้า Profile จะพบว่าข้อมูลของเราเปลี่ยนไปตามที่เรากรอกข้อมูลแล้ว เรามาเริ่มเรียนเขียนโปรแกรมกันดีกว่า

หน้าของ Profile ที่เปลี่ยนตามที่เราตั้งค่าไว้

พอเราคลิ๊กที่หัวข้อ Getting Started with Programming ก็จะเป็นรายละเอียดเกี่ยวกับหัวข้อนี้สำหรับเรา ว่าเราเรียนไปถึงไหนแล้ว แต่ตอนนี้เรายังไม่ได้เริ่ม เลยยังเป็น 0% อยู่ งั้นก็มาเริ่มเรียนโดยกดที่ Start your first lesson ทางด้านขวา

คลิ๊ก Start your first lesson เพื่อเริ่มเรียน

ในหน้าบทเรียนนั้น จะมีลักษณะเป็นแบบนี้

หน้าบทเรียน

โดยแต่ละส่วนก็ทำหน้าที่ของมันดังนี้

บอกว่าเราอยู่หัวข้อไหน บทที่เท่าไหร่แล้ว

บอกจุดประสงค์ของหัวข้อนี้ ว่าต้องการให้เราทำอะไร

ส่วนที่ไว้ให้เราเขียนโปรแกรม ตามจุดประสงค์ของแต่ละข้อจากด้านซ้าย

และเมื่อทำจนจบบทแรก เราก็จะได้ Badges อันแรกมา รวมถึงคะแนนต่าง ๆ ที่เพิ่มขึ้นระหว่างที่เราเรียน

ได้ Badges หลังจากที่ทำบทแรกเสร็จ

คราวนี้ลองกลับมาที่หน้า Profile จะพบว่า เราเรียนหัวข้อ Getting Started with Programming ไปแล้ว 12% มีแต้มสะสมเท่าไหร่ ได้ Badges อะไรบ้างแล้ว

หน้า Profile ของเราที่เปลี่ยนไป หลังจากที่เรียนบทแรกเสร็จแล้ว

ซึ่งตอนนี้ ถ้าเข้าไปที่หัวข้อ Courses จะพบว่ามีให้เรียนอยู่สองหัวข้อตามนี้

หน้า Courses

ถ้าใครอยากลองเข้าไปเรียนบ้าง ก็ตามไปที่ Codecademy เลยครับ

October 5, 2011