สรุป JavaScript วันที่ 16/09/2556

เรื่อง PHP

     PHP ย่อมาจาก PHP Hypertext Preprocessor แต่เดิมย่อมาจาก Personal Home Page Tools

     PHP คือภาษาคอมพิวเตอร์จำพวก scripting language ภาษาจำพวกนี้คำสั่งต่างๆจะเก็บอยู่ในไฟล์ที่เรียกว่า script และเวลาใช้งานต้องอาศัยตัวแปรชุดคำสั่ง ตัวอย่างของภาษาสคริปก็เช่นJavaScript , Perl เป็นต้น ลักษณะของ PHP ที่แตกต่างจากภาษาสคริปต์แบบอื่นๆ คือ PHP ได้รับการพัฒนาและออกแบบมา เพื่อใช้งานในการสร้างเอกสารแบบ HTML โดยสามารถสอดแทรกหรือแก้ไขเนื้อหาได้โดยอัตโนมัติ ดังนั้นจึงกล่าวว่า PHP เป็นภาษาที่เรียกว่า server-side หรือ HTML-embedded scripting language นั้นคือในทุกๆ ครั้งก่อนที่เครื่องคอมพิวเตอร์ซึ่งให้บริการเป็นWeb server จะส่งหน้าเว็บเพจที่เขียนด้วย PHP

-สัญลักษณ์ที่ใช้ประกาศตัวแปรทุกตัวแปรทุกชนิด คือ “$” แล้วตามด้วยชื่อตัวแปร เช่น$name $num $potato123 เป็นต้น

-การเขียนโค้ดและการทำงานต่างๆ คล้ายๆกับ javascript แต่ php เป็นฝั่งของ server

-การประกาศชื่อตัวแปรตัวเล็กตัวใหญ่ จะเป็นคนละตัวแปรกัน

-การแสดงข้อความต่างๆ จะใช้คำสั่งว่า print

-แท็กที่บอกว่าโค้ดนี้คือ php คือ <?php……………….?>

-สามารถ converting ข้อมูลได้ เช่น 3.5 เมื่อแปลงเป็น interger จะได้ 3 และสามารถcasting กลายเป็น 3.5 ได้

- ประกาศค่าคงที่โดยใช้คำสั่ง define เช่น define(“VALUE” , 5);

-key word ที่ไม่สามารถนำเอาไปตั้งเป็นชื่อตัวแปรได้ คือ

-สามารถเปรียบเทียบ string ได้ทั้งภาษาไทยและอังกฤษ โดยเรียงเหมือนกับพจนานุกรม A-Z และ ก-ฮ(สำคัญเรียงจากน้อยไปมาก) คำสั่งที่ใช้คือ strcmp

-สามารถค้นหาคำต่างๆ ได้ เช่น ค้นหาตัวอักษรตัวแรกและตัวสุดท้ายของคำได้ ค้นหาคำแรกและคำสุดท้ายของประโยคได้ คำสั่งที่ใช้ คือ preg_match

-เช็คฟอร์มที่กรอกได้ว่า ผู้ใช้กรอกเป็นไปตามแบบที่เรากำหนดได้หรือไม่ โดยกรอกจากฟอร์ม .html เมื่อกดsubmit แล้ว ฟอร์มที่ถูกกรอก จะถูกนำไปเปรียบเทียบกับ .php ว่ากรอกถูกต้องตามแบบฟอร์มหรือไม่ 

 

-สามารถ query ข้อมูลจาก database ได้ หลังจาก สร้าง database และ import ไฟล์ .sql เข้าไปแล้ว โดยสามารถเรียกได้ตาม field ที่ต้องการจะเลือก หรือจะดูข้อมูล field ทั้งหมดก็ได้

 

-cookies คือการจำ username หรือ password เวลาที่เรา login เข้าเว็บต่างๆ มันจะถามว่าเราต้องการที่จะจำหรือไม่ หากเราเลือกที่จะให้จำ มันจะสร้าง cookies ไว้เพื่อเก็บ username และ password ไว้ในเครื่องนั้นๆ

ชนิดของตัวแปร (Vriable Types) มีตังต่อนี้

1. Array ชุดของข้อมูลที่เป็นชนิดเดียวกัน

2. Boolean ข้อมูลชนิดตรรกะจะให้ผลลัพธ์เป็นจริง (True) หรือ (False) เท่านั้น

3. Float เป็นข้อมูลชนิดตัวเลขจำนวนจริง เช่น 1.2 ,22.22 , 7A-20

4. Integer (int) เลขจำนวนเต็มที่เป็นฐานสิบ ฐานแปด หรือฐานสิบหก โดยจะมีเครื่องหมายบวก + หรือ ลบ - ประกอบอยู่ด้วยก็ได

- เลขฐานสิบ แทนด้วยเลข 0-9 เช่น 1 ,12 , -24 ,+15 เป็นต้น

- เลขฐานแปด แทนด้วยเลย 0-8 โดยจะต้องมี 0 นำหน้าเสมอ เช่น 0123 (เท่ากับ 83 ในฐานสิบ)

- เลขฐานสิบหก แทนด้วย 0-9 และ A-F โดยจะต้องใช้ 0x นำหน้าเสมอ เช่น 0x1A (เท่ากับ 26 ในเลขฐานสิบ)

5. Object การกำหนดให้ตัวแปรนั้นเก็บคุณสมบัติของออบเจ็กต์ไว้ (ซึ่งก็คือ Attribute และ Method)โดยใช้ชื่อคลาสเป็นตัวกำหนด

6. String ตัวอักษรต้องอยู่ภายใต้เครื่องหมาย Double Quotes (" ") หรือ Single Quotes (' ')

7 Object       สำหรับจัดเก็บข้อมูลที่เป็น Class Object หรือเป็น Method

สรุป JavaScript วันที่ 02/09/2556

1.เรื่อง Document Object Model (DOM): Objects and Collections 

ในบทนี้คุณจะได้เรียนรู้

• หากต้องการใช้ JavaScript และ W3C เอกสารรูปแบบของวัตถุที่จะสร้างหน้าเว็บแบบไดนามิก
• แนวคิดของโหนด DOM และต้นไม้ DOM
• การสำรวจ, แก้ไขและปรับเปลี่ยนองค์ประกอบในเอกสาร XHTML
• ในการเปลี่ยนลักษณะ CSS แบบไดนามิก
• ในการสร้างภาพเคลื่อนไหว JavaScript

-DOM คือการมอง web page ให้มีโครงสร้างเป็นแบบ tree(ต้นไม้คว่ำ) , root node คือ node ที่อยู่บนสุดจะไม่มี parent , parent nodeจะมี child node ได้หลาย node,child node จะมี parent node ได้แค่ node เดียวเท่านั้น และ node ที่อยู่ในระดับเดียวกันจะเรียกว่าsibling

รูปแบบไดนามิค

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

 สรุปวัตถุ DOM 

ในขณะที่คุณเคยเห็นในส่วนก่อนหน้านี้วัตถุและคอลเลกชันใน W3C DOM ให้คุณมีความยืดหยุ่นในการจัดการกับองค์ประกอบของหน้าเว็บ เราได้แสดงให้เห็นว่าการเข้าถึงวัตถุในหน้าวิธีการที่จะเข้าถึงวัตถุในการเก็บและวิธีการเปลี่ยนรูปแบบองค์ประกอบแบบไดนามิก

W3C DOM ช่วยให้คุณเข้าถึงองค์ประกอบในเอกสาร XHTML ทุก องค์ประกอบในเอกสารแต่ละครั้งจะถูกแสดงโดยวัตถุที่แยกต่างหาก แผนภาพในรูปที่ 10.6หลายรายการของวัตถุที่สำคัญและคอลเลกชันโดย W3C DOM รูปที่ 10.7ให้คำอธิบายสั้น ๆ ของแต่ละวัตถุและการจัดเก็บในรูป 10.6 .

-การท่องเข้าไปในDOM และ ทำการแก้ไขต่างๆ ได้ เช่น เรียกดูจากเลข ID,เพิ่มข้อมูลเข้าไปใหม่,แทนที่ข้อมูลเดิม,ลบข้อมูลได้ เป็นต้น

-สามารถโต้ตอบกับผู้ใช้ให้สามารถทำงานตามที่สั่งได้ เช่น ผู้ใช้ป้อนว่า สีแดง แล้วแปลงข้อมูลที่ป้อนไปแสดงเป็นสีพื้นหลังของ web page ได้ ในหัวข้อ Dynamic Styles

2.เรื่อง XML

-XML เป็นไฟล์ที่ ผู้ที่จะใช้ส่งข้อมูลหรือไฟล์ต่างๆ ให้กัน จะสามารถกำหนดโครงสร้างหรือชื่อแท็กต่างๆ ไดด้วยตนเอง เหมาะสำหรับผู้ที่ต้องการส่งข้อมูลให้กันโดยใช้แท็กที่เข้าใจกันเอง ไม่มีรูปแบบที่บังคับตายตัว แล้วแต่ผู้ใช้จะเป็นผู้กำหนดเอง และเข้าใจกันเอง เช่น

สรุป JavaScript วันที่ 26/08/2556

1.เรื่อง JavaScript: Functions

-เป็นการลดการเขียนโค้ดคำสั่งเดิมๆ ซ้ำๆ กัน ไม่ต้องเขียนหลายรอบ เขียนครั้งเดียวแต่สามารถเรียกใช้ได้หลายๆ ครั้ง โดยไม่ต้องเสียเวลาเขียนโค้ดใหม่อีก

       Function แบบนี้ส่วนใหญ่เราจะใช้กับการนำไปคำนวณค่าต่างๆนะครับ
พอได้ตัวแปรส่งค่ามา เอาไปคำนวณใน Function แล้วส่งผลลัพธ์ออกมา

ตัวอย่างกัน

<script language=”javascript”>
function multinum(num1,num2) {
var result= num1 * num2;
document.write(result);
}
multinum(10,20);
</script>

    Code บรรทัดแรกเปิดด้วยการสร้าง Function ชื่อ multinum โดยให้เก็บค่า
ตัวแปร num1 กับ num2
บรรทัดต่อมาผมประกาศตัวแปรชื่อ result โดยเก็บค่า num1 คูณกับ num2
บรรทัดต่อมาผมให้แสดงค่าที่อยู่ในตัวแปร result ออกมา
บรรทัดต่อมาผมเรียก Function multinum โดยระบุค่าลงไป
แต่แบบนี้เราจำเป็นต้อง ให้แสดงค่าใน Function เลย
แต่หากเราต้องการให้แสดงค่าออกมาทางอื่น เราคงต้อง ส่งค่าคืนกลับมาด้วย

<script language=”javascript”>
function multinum(num1,num2) {
var result= num1 * num2;
return result;
document.write(result);
}
var result=multinum(10,20);

document.write(result);

 </script> 

นอกจากนั้นยังมี

–Function maximum เป็นการเช็คว่าค่าที่รับมาค่าไหนมากที่สุด

-Function ทอยลูกเต๋าและทำเป็นสถิติได้

-Function Factorial เป็นต้น

2.เรื่อง JavaScript: Arrays

-ถ้าพูดถึง array ก็ต้องนึกถึงข้อมูลที่มีเป็นชุดๆ จำนวนมาก มีตั้งแต่ 1มิติ 2มิติ 3มิติ เป็นต้น

-การประการตัวแปร array ต้องมีเครื่องหมาย “[]” ตลอด เช่น var num=[2,3,5,1]; โดยสามารถเก็บได้ทั้ง String และ integer หรือ float ก็ได้

-วิธีเก็บข้อมูลของ array คือ ช่องแรก คือ index ที่ 0 และช่องถัดไปคือ 1 ไปเรื่อยๆ

-สามารถใช้ Method Sort เพื่อเรียงข้อมูลที่มีอยู่ โดยเรียงจากมากไปน้อยหรือน้อยไปมากก็ได้
-สามารถใช้ Method indexOf เพื่อค้นหาค่าใน array ได้

3.เรื่อง JavaScript: Objects

-object ก็คือ method ต่างๆ ที่เราสามารถเรียกใช้ได้เลย เช่นMath.PI,Math.E,substring,getDate,getDay,getTime เหล่านี้เรียกว่า object

สรุป JavaScript วันที่ 15/07/2556

สรุปเนื้อหา JavaScript
-ศึกษาเกี่ยวกับ JavaScript ใน e-learning ที่ www.code.org>>learn>>codeacademy และก็ได้สมัคร accout เพื่อ login (จากfacebook,twitter หรือ สมัคร accout ใหม่ด้วยตัวเองก็ได้)>>learn>>JavaScript และก็เริ่มการเรียนรู้การเขียนcode ด้วย e-learning ของทาง web codeAcedemy
-เป็นการเรียนรู้ตั้งแต่การ print text ง่ายๆ และก็สอนตรรกะเบื้องต้นต่างๆ จนถึงเงื่อนไขทางเลือกต่างๆ จนถึงขั้นสูง เรื่อง loop ต่างๆ เป็นต้น
-www.code.org>>scratch เป็นการเรียนรู้เรื่อง code ภาษาโปรแกรมสำหรับเด็ก ไว้ใช้ในการเรียนรู้เบื้องต้นเรื่องของโปรแกรมคอมพิวเตอร์
- การศึกษาและเรียนรู้ JavaScript ในเว็บไซต์ www.code.org  องค์กรที่ไม่แสวงหาผลกำไร เพื่อให้ทุกๆคนสามารถคิดกระบวนการทำงานต่างๆออกมาเป็นสัดเป็นส่วนได้ดีและเขียนโปรแกรมได้ ในต่างประเทศจะใช้สำหรับฝึกให้เด็กๆสามารถเขียนโปรแกรมพื้นฐานต่างๆได้ เช่นสร้างเกมส์แอลนิเมชั่น ทำตัวการ์ตูนเคลื่อนไหวได้ เป็นต้น
  ทำแบบฝึกหัด JavaScript ใน e-learning ==>> www.code.org>>learn>>codeacademy 
เป็นแบบฝึกหัดเกี่ยวกับการเรียนรู้การเขียนcode ด้วย e-learning ของ web codeAcedemy
เริ่มตั้งแต่การเรียนรู้ print text ง่ายๆ และก็สอนตรรกะเบื้องต้นต่างๆ จนถึงเงื่อนไขทางเลือกต่างๆ จนถึงขั้นสูง เรื่อง loop ต่างๆ เป็นต้น
      1.Introduction to JavaScript

      2.Functions

      3.'For' Loops in JavaScript

      4.'While' Loops in JavaScript

      5.Control Flow

-ไฟล์ของ JavaScript คือ .js

[สั่งงานในweb codeacademy ให้ครบ 100% ]

สรุปเนื้อหา JavaScript วันจันทร์ที่ 8 กรกฎาคม พ.ศ. 2556

สรุปเนื้อหา JavaScript
        สอนทำเว็บไซต์ สร้างเว็บไซต์ต่างๆ และแสดงผลออกมาในรูปแบบ HTML  PHP นั้นเป็นส่วนที่ใช้ในการคำนวน ประมวลผล เก็บค่า และทำตามคำสั่งต่างๆ อย่างเช่น รับค่าจากแบบ form ที่เราทำ รับค่าจากช่องคำตอบของเว็บบอร์ดและเก็บไว้เพื่อนำมาแสดงผลต่อไป คือเว็บไซต์จะโต้ตอบกับผู้ใช้ได้ ต้องมีภาษา PHP ส่วน HTML หรือ Javascript ใช้เป็นเพียงแค่ตัวควบคุมการแสดงผลเท่านั้น  การใช้งานเราจะต้องมี Web Server เพื่อให้ตัว PHP สามารถทำงานได้ ต่างจาก HTML งั้นจะทำอย่างไรถ้าเราไม่ได้เช่า Web Server เอาไว้จะใช้งาน PHP ไม่ได้  การพัฒนาเว็บไซต์ด้วย PHP  การแสดงผลของพีเอชพี ถึงแม้ว่าจุดประสงค์หลักใช้ในการแสดงผล HTML แต่ยังสามารถสร้าง XHTML หรือ XML ได้  คำสั่งของพีเอชพี สามารถสร้างผ่านทางโปรแกรมแก้ไขข้อความทั่วไป เช่น โน้ตแพด หรือ vi  สำหรับส่วนหลักของ PHP ยังมี Module ในการรองรับ CGI มาตรฐาน ซึ่ง PHP สามารถทำงานเป็นตัวประมวลผล CGI ด้วย และด้วย PHP, คุณมีอิสรภาพในการเลือก ระบบปฏิบัติการ และ เว็บเซิร์ฟเวอร์ นอกจากนี้คุณยังสามารถใช้สร้างโปรแกรมโครงสร้าง สร้างโปรแกรมเชิงวัตถุ (OOP) หรือสร้างโปรแกรมที่รวมทั้งสองอย่างเข้าด้วยกัน

โค้ด โปรแกรม คำณวนเกรด

<html>
   <head>
       <meta charset="utf-8">
       <title>An Addition Program</title>
       <script>
            var input_point; (ประกาศตัวแปร input_point เพื่อเก็บค่าคะแนนที่ผู้ใช้กรอก)
            (คำสั่งที่ใช้แสดงกล่องข้อความซึ่งให้ผู้ใช้กรอกค่าคะแนน)
            input_point = window.prompt("Enter point");
       if(input_point<50){  (ถ้าคะแนนน้อยกว่า 50)
       document.writeln("<h1>"+"You get grade F"+"</h1>");  (เกรด F)
    }else if(input_point>=50&&input_point<55){
       document.writeln("<h1>"+"You get grade D"+"</h1>");  (เกรด D)
    }else if(input_point>=55&&input_point<60){
       document.writeln("<h1>"+"You get grade D+"+"</h1>"); (เกรด D+)
    }else if(input_point>=60&&input_point<65){
       document.writeln("<h1>"+"You get grade C"+"</h1>");  (เกรด C)
    }else if(input_point>=65&&input_point<70){
       document.writeln("<h1>"+"You get grade C+"+"</h1>"); (เกรด C+)
    }else if(input_point>=70&&input_point<75){
       document.writeln("<h1>"+"You get grade B"+"</h1>"); (เกรด B)
    }else if(input_point>=75&&input_point<80){
       document.writeln("<h1>"+"You get grade B+"+"</h1>"); (เกรด B+)
    }else{
       document.writeln("<h1>"+"You get grade A"+"</h1>"); (เกรด A)
    }
    </script>
    </head><body></body>
</html>

Flowchart โปรแกรมคำนวณเกรด

โค้ด การสร้างปฎิทิน

header('Content-Type: text/html; charset=utf-8');

$weekDay = array( 'อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสฯ', 'ศุกร์', 'เสาร์');

$thaiMon = array( "01" => "มกราคม", "02" => "กุมภาพันธ์", "03" => "มีนาคม", "04" => "เมษายน",

                  "05" => "พฤษภาคม","06" => "มิถุนายน", "07" => "กรกฎาคม", "08" => "สิงหาคม",

                  "09" => "กันยายน", "10" => "ตุลาคม", "11" => "พฤศจิกายน", "12" => "ธันวาคม");

//Sun - Sat

$month = isset($_GET['month']) ? $_GET['month'] : date('m');    //ถ้าส่งค่าเดือนมาใช้ค่าที่ส่งมา ถ้าไม่ส่งมาด้วย ใช้เดือนปัจจุบัน

$year = isset($_GET['year']) ? $_GET['year'] : date('Y');   //ถ้าส่งค่าปีมาใช้ค่าที่ส่งมา ถ้าไม่ส่งมาด้วย ใช้ปีปัจจุบัน

//วันที่

$startDay = $year.'-'.$month."-01";         //วันที่เริ่มต้นของเดือน

$timeDate = strtotime($startDay);           //เปลี่ยนวันที่เป็น timestamp

$lastDay = date("t", $timeDate);            //จำนวนวันของเดือน

$endDay = $year.'-'.$month."-". $lastDay;   //วันที่สุดท้ายของเดือน

$startPoint = date('w', $timeDate);         //จุดเริ่มต้น วันในสัปดาห์

//echo "<br>\$data ";

//print_r($data);

//echo "<hr>";

?>

<html>

    <head>

    <title>ทดลองสร้างปฏิทินด้วย PHP</title>

    <script type='text/javascript'>

       function goTo(month, year){

            window.location.href = "day_of_week.php?year="+ year +"&month="+ month;

       }

    </script>

    <style>

    th,td{width:50px;height: 30px; text-align:center}

    th{background-color: #eeeeee;}

    #tb_calendar, #main{ width : 500px;}

    #main{ border : 2px solid #46A5E0;}

    #nav{

        background-color: #0C79A4;

        min-height: 20px;

        padding: 10px;

        text-align: center;

        color : white;

    }

    .navLeft{float: left; }

    .navRight{float: right;}

    .title{float: left; text-align: center; width: 300px;}

    </style>

    </head>

    <body>

<?php

echo "<br/>ตำแหน่งของวันที่ $startDay คือ <strong>", $startPoint , " (ตรงกับ วัน" , $weekDay[$startPoint].")</strong>";

$title = "เดือน $thaiMon[$month] <strong>". $startDay. " : ". $endDay."</strong>";

//ลดเวลาลง 1 เดือน

$prevMonTime = strtotime ( '-1 month' , $timeDate  );

$prevMon = date('m', $prevMonTime);

$prevYear = date('Y', $prevMonTime);

//เพิ่มเวลาขึ้น 1 เดือน

$nextMonTime = strtotime ( '+1 month' , $timeDate  );

$nextMon = date('m', $nextMonTime);

$nextYear = date('Y', $nextMonTime);

echo '<div id="main">';

echo '<div id="nav">

        <button class="navLeft" onclick="goTo(\''.$prevMon.'\', \''.$prevYear.'\');"><< เดือนที่แล้ว</button>

        <div class="title">'.$title.'</div>

        <button class="navRight" onclick="goTo(\''.$nextMon.'\', \''.$nextYear.'\');">เดือนต่อไป >></button>

    </div>

    <div style="clear:both"></div>';

echo "<table id='tb_calendar' border='1'>";   //เปิดตาราง

echo "<tr>

        <th>อาทิตย์</th><th>จันทร์</th><th>อังคาร</th><th>พุธ</th><th>พฤหัสฯ</th><th>ศุกร์</th><th>เสาร์</th>

</tr>";

echo "<tr>";              //เปิดแถวใหม่

$col = $startPoint;      //ให้นับลำดับคอลัมน์จาก ตำแหน่งของ วันในสับดาห์

if($startPoint < 7){      //ถ้าวันอาทิตย์จะเป็น 7

    echo str_repeat("<td> </td>", $startPoint);   
//สร้างคอลัมน์เปล่า กรณี วันแรกของเดือนไม่ใช่วันอาทิตย์

}

for($i=1; $i <= $lastDay; $i++){ //วนลูป ตั้งแต่วันที่ 1 ถึงวันสุดท้ายของเดือน

    $col++;      //นับจำนวนคอลัมน์ เพื่อนำไปเช็กว่าครบ 7 คอลัมน์รึยัง

    echo "<td>", $i , "</td>";      //สร้างคอลัมน์ แสดงวันที่

    if($col % 7 == false){          //ถ้าครบ 7 คอลัมน์ให้ขึ้นบรรทัดใหม่

        echo "</tr><tr>";           //ปิดแถวเดิม และขึ้นแถวใหม่

        $col = 0;                   //เริ่มตัวนับคอลัมน์ใหม่

    }

}

if($col < 7){        // ถ้ายังไม่ครบ7 วัน

    echo str_repeat("<td> </td>", 7-$col); //สร้างคอลัมน์ให้ครบตามจำนวนที่ขาด

}

echo '</tr>';     //ปิดแถวสุดท้าย

echo '</table>';  //ปิดตาราง

echo '</main>';

?>

</body>

</html>