ความรู้เบื้องต้นมากๆ ของ CSS , Java Script ครับ

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 1:06 am

ความรู้เบื้องต้นมากๆ ของ CSS , Java Script ครับ

โพสต์โดย samsonnaze3 » 24/03/2012 12:43 pm

สวัสดีครับ วันนี้จะมาขอพูดเรื่อง CSS และ Java Script ครับ ซึ่งเป็นข้อมูลเบื้องต้น ที่ควรรู้ไว้เพื่อเอาไปทำงานต่อครับ


รูปภาพ
ในเรื่องแรก CSS :
CSS คืออะไรประวัติความเป็นมา ต่างๆ สามารถไปดูได้ที่ http://www.rangsiwut.com/html-css/css-basic/ ครับ
วิธีการใช้งาน สิ่งที่ จะต้องมีใน css เลยนะครับประกอบไปด้วย
1.Selector คือการกำหนดตำแหน่งต่างๆ อาจจะอ้างจาก id หรือ name ใน tag html ต่างๆที่เราสร้างไว้ก็ได้ครับ เช่น

โค้ด: เลือกทั้งหมด

<input type="text" id="test_input"/>
ซึ่งถ้าเราจะนำตัวนี้ไปใช้งาน css ก็ใช้ test_input เป็น Selector ครับ แต่ว่า Selector แต่เรียกใช้แตกต่างกัน ดังนี้ครับ
- id เวลาใช้จะต้องมีเครื่องหมาย # ไว้ที่หน้า Selector ครับ เช่น #test_input
- class เวลาใช้จะต้องมีเครื่องหมาย . ไว้ที่หน้า Selector ครับ เช่น .test_input (ถ้าประกาศเป็น class นะครับ)
- tag html ถ้าเป็น tag ใน html สามารถเขียนไปตรงๆได้เลยครับ เช่น tag p ก็เขียน p ไปตรงๆได้เลย
2.Property คือการกำหนดคุณสมบัติต่างๆของ Selector ครับ เช่นการกำหนด สี,ขนาด,ตัวอักษร,ตำแหน่ง เป็นต้น ท่านสามารถไปดูว่า Property ต่างๆใน css มีอะไรบ้างได้ที่ http://www.w3schools.com/cssref/default.asp นะครับ
3.Value เป็นการกำหนดค่าต่างๆ ให้ Property ครับ เช่น เราเขียน Property ว่า สี ในตัว Value จะเป็นการกำหนดว่า สี เป็นสีอะไร เช่น color:red; กำหนดว่า ให้ text เป็น สีแดงครับ
แก้ไขล่าสุดโดย samsonnaze3 เมื่อ 24/03/2012 2:19 pm, แก้ไขไปแล้ว 2 ครั้ง.
รูปภาพ

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 1:06 am

Re: ความรู้เบื้องต้นมากๆ ของ CSS , Java Script , jQuery ครับ

โพสต์โดย samsonnaze3 » 24/03/2012 1:00 pm

ตัวอย่างการใช้งานเบื้องต้นนะครับ

ถ้าจะทำการสร้าง CSS คุณจำเป็นต้องเปิด tag นี้ก่อนเสมอครับ <style type="text/css"> แล้วปิดด้วย </style> แล้วเขียนคำสั่ง css ลงไปภายใน tag ได้เลยครับ ให้ สร้าง tag ไว้หลังจาก <title></title> นะครับ

ตัวอย่าง

โค้ด: เลือกทั้งหมด

<title>Test_CSS</title>
<style type="text/css">
    #test_css{
        color: #eec900;
    }
    .test_css_class{
        color: #009966;
    }
    p{
        text-align: center;
    }
</style>
</head>
    <body>
        <p id="test_css">ตัวอย่าง ของการใช้ id="test_css"</p>
        <p class="test_css_class">ตัวอย่าง ของการใช้ class="test_css_class"</p>
        <p>ส่วน ข้อความทุกข้อความที่อยู่ใน tag p น้น จะกำหนดให้อยู่ตรงกลางหมด</p>
    </body>
แนบไฟล์
Simple_CSS01.png
Simple_CSS01.png (6.61 KiB) เปิดดู 3744 ครั้ง
รูปภาพ

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 1:06 am

Re: ความรู้เบื้องต้นมากๆ ของ CSS , Java Script , jQuery ครับ

โพสต์โดย samsonnaze3 » 24/03/2012 1:13 pm

รูปภาพ
ในเรื่องที่สอง Java Script :
Java script เป็นภาษาสคริปต์อีกชนิดหนึ่งที่นิยมนำมาเขียน เพื่อเสริมคุณค่าให้งานการสร้างเว็บเพจให้มีคุณค่า และมีคุณภาพ ไม่ว่าจะเว็บเพจเพื่อการทำ E-Commerce, Web database หรือ E-Learning ซึ่งงานเหล่านี้ถ้าใช้เพียงภาษาสคริปต์ PHP, ASP, JSP หรืออื่น ๆ จะเห็นว่าไม่ได้ดังใจ ผู้เขียนโปรแกรมมือใหม่ทั้งหลาย เมื่อเห็นการเขียนโปรแกรมของผู้อื่นตามเว็บต่าง ๆ รู้สึกว่างานของเขาที่ออกมาดีนั้น เขาเขียนกันอย่างไร เว็บนี้มีคำตอบให้ท่าน

Java Script ทำงานอย่างไร
ถ้าพิจารณาการเขียนโปรแกรมบนเว็บทั้งหลายจะเห็นว่ามีการแปรภาษาอยู่ 2 ลักษณะได้แก่ การแปรจาก Server Side ได้แก่ PHP, ASP, JSP กับการแปรจากเครื่อง Client หรือ Client-Side อันได้แก่ HTML, Java Script


วิธีการใช้งาน
ในการสร้าง Java Script ใน HTML นั้น จะต้องเปิด <script type="text/javascript"> แล้วปิดด้วย </script> ซึ่งควรจะทำการเปิดในระหว่าง <Head> กับ </Head> หรือหลัง <body> ก็ได้


โค้ด: เลือกทั้งหมด

<head>
<title></title>
<script type="text/javascript">
     ...................คำสั่ง Javascript ต่างๆ............
</script>
</head>
รูปภาพ

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 1:06 am

Re: ความรู้เบื้องต้นมากๆ ของ CSS , Java Script , jQuery ครับ

โพสต์โดย samsonnaze3 » 24/03/2012 1:30 pm

ตัวอย่างการใช้งาน Java Script เบื้องต้นนะครับ

คำสั่งที่ใช้ในการเขียน Java Script นั้น ประกอบด้วย
1.Object
2.Properties หรือ Method
โดยที่ ทั้งสองตัวนี้จะมีเครื่องหมาย . คั้นกลางครับ เช่น document.write คือการสั่งให้ Object document ไปทำงานใน Method ที่มีชื่อว่า write เป็นการเขียนข้อความทั่วไปครับ


ตัวอย่าง

โค้ด: เลือกทั้งหมด

<title>Test_JavaScript</title>
<script type="text/javascript">
    document.write("ทดสอบการเขียน JavaScript");
</script>
</head>
    <body>
    </body>
แนบไฟล์
Simple_javascript01.png
Simple_javascript01.png (1.49 KiB) เปิดดู 3743 ครั้ง
รูปภาพ


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 6 และ บุคคลทั่วไป 0 ท่าน