multiple attribute Multiple attribute ใช้กาหนด input element ให้สามารถป้อนได้มากกวา่ หน่ึงคา่ ซ่ึงใช้ร่วมกับ input type email และ file ตวั อยา่ งที่ 2.3.10 multiple attribute Select images: <input type=\"file\" name=\"img\" multiple> Pattern attribute Pattern attribute ใชป้ ้อน regular expression เพ่อื ทำกำรตรวจสอบ format ของ input ทป่ี ้อนเขำ้ มำ ดงั ตวั อย่ำงท่ี 2.1.9 Placeholder attribute ใชส้ ำหรบั ระบลุ ำยน้ำ หรอื ทเ่ี รยี กวำ่ mask input เพ่อื ใหท้ รำบวำ่ ขอ้ มลู ทจ่ี ำเป็นตอ้ งป้อนคอื อะไร ตวั อยา่ งท่ี 2.3.11 placeholder attribute ช่ือผใู้ ช้ : <input type=\"text\" placeholder=\"กรุณาระบุชื่อผใู้ ชง้ าน\"> เบอร์โทร : <input type=\"text\" placeholder=\"กรุณาเบอร์โทรศพั ทร์ ูปแบบ (999)999-9999\" style=\"width:300px\">
Required attribute ใช้สาหรบั ระบุว่า input นั้นจาเป็นตอ้ งป้อนค่า ใช้ไดก้ ับ input type : text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. ตวั อย่างท่ี 2.3.12 required attribute <form action=\"/addPerson\" method=\"post\"> ช่ือผใู้ ช้ : <input type=\"text\" placeholder=\"กรุณาระบชุ ่ือผใู้ ชง้ าน\" name=\"username\" required> <input type=\"submit\" /> </form> ตอนท่ี 5 HTML5 Graphics
ขาเท่ยี ว รกั จัง สงั ขละบุรี By Tickonlymind เม่อื สามปีท่ีแลว้ ผมได้ไปเท่ียวกับเพ่ือนๆท่สี ังขละบุรี ปัจจุ บนั สะพานมอญน้ันถกู พัดเสียหาย และยังมีปัญหาในการ ก่อสรา้ งลา่ ช้า จึงอยากหวนราลกึ ถงึ ความหลงั ถึงบรรยากาศสดุ คลาสสคิ ท่ไี ด้ไปเท่ยี วกับเดอะแก็ง และ Tickonlymind ขอนาเสนอภาพและบทความท่คี ณุ ต๊ิกได้เขียนเอาไว้
แคช่ ่ือเร่อื งก็คงไม่ต้องถามวา่ รูส้ กึ แบบไหน เส้นทางรถท่คี ดเค้ยี วล้อมรอบด้วยภเู ขาไม่ทาใหร้ ู้สกึ หว่ันใจ ย่งิ เคยผ่านการเท่ียวภทู างภาคเหนือมาหลายท่ี สังข ละบุรีถือว่าเดนิ ทางไมย่ ากนัก ถนนเปน็ แบบสองเลนมีรถสวนไปมาแต่หากเปรยี บกับส่ิงแวดลอ้ มระหว่างทางถือวา่ คมุ้ ค่าจรงิ ๆ สังขละบุรีเปน็ เมืองเลก็ ล้อมรอบด้วยขุนเขาในจังหวัด กาญจนบุรีมชี ายแดนติดพม่า อากาศช่วงมถิ ุนา กลางวันแดดเเรงแต่ก็มีลมพัดพอให้รูส้ ึกสบายตัว มนเสน่ห์ของเมืองนี้คอื ความสงบ เรยี บงา่ ยและแฝง ไปด้วยวฒั นธรรมของชาวมอญ ชาวกะเหร่ียง ชาว ไทย และชาวพม่า โดยมลี าน้าซองกาเลียเป็นเสน้ แบ่งระหว่างวิถไี ทยและวถิ ีมอญ การเดินขา้ มไปมา หาสู่ยงั คงใช้สะพานมอญเดินข้ามถึงกัน ชีวติ ยามเช้าของคนมอญคือการตกั บาตร คนท่นี ่ี ค่อนข้างเคร่งศาสนาแม้แตเ่ ด็กวัยรุ่นเม่ือเหน็ พระสงฆ์ เดนิ ผ่านมากจ็ ะน่ังลงกราบ คร้ังแรกท่ีเหน็ กแ็ ปลกใจ แต่เม่อื เวลาผ่านไปเกือบวัน ส่งิ น้ถี ือเป็นเร่ืองปกติ ชาวมอญมคี วามศรัทธาในศาสนา มคี วามสงบและ ปรองดอง สังเกตได้จากบ้านเรอื นแถวน้ีไม่มเี หลก็ ดัดหรือส่งิ ป้องกันโจรขโมย คนท่ีน่ีมอี ัธยาศัยดีมาก เจอกันก็ ทักทาย ยิ้มแย้มแจ่มใส เด็กตัวเลก็ กอ็ อกมาทาหน้าท่ีมคั คุเทศก์จ๋ิวคอยอธบิ ายประวัตเิ มอื งสังขละบุรี เราเป็นอีก คนท่ีสนับสนุนเด็กๆใหร้ ู้จักทางานจงึ ไมแ่ ปลกท่เี ราจะฟังประวัตเิ มืองนซ้ี ้าไปซ้ามาจากเดก็ หลายคน มารู้อกี ทคี ือ แบงกป์ ลีกท่ีมหี มดกระเป๋ า
สถานท่ที ่องเท่ยี วมีหลายแหง่ ท่นี า่ สนใจไดแ้ ก่ เมอื งบาดาล ด่านเจดยี ส์ ามองค์ เจดยี ์ พุ ทธคยา และวัดหลวงพ่ออุตตะมะ ท่พี ักมีหลากแบบข้ึนกบั ความชอบและงบประมาณในกระเป๋ า ได้แก่ รีสอร์ท เกสเฮาส์ แพ โฮมสเตย์แบบมอญและ กะเหร่ียง ส่วนเราพกั ท่พี นทีรสี อรท์ ตรงฝ่ังไทย ลกั ษณะ เป็นรีสอรท์ มีบา้ นพักเป็นไม้ท้ังหลงั อยู่บนเนินริมน้า สามารถ เดนิ ลดั เลาะเพ่อื เท่ยี วหมู่บา้ นมอญไดไ้ มย่ ากนัก แตร่ าคาหิน ไมเ่ บาคะ่ หากใครเป็นคนรกั ความสงบและรกั การทอ่ งเท่ยี ว สังขละบุรเี ป็นอกี หน่งึ ทางเลือกท่ีนา่ ประทับใจ อยากรบกวนนักทอ่ งเท่ยี วท่ีเยอื นสังขละบุรี ขอให้ไปอย่าง สงบ ไปเพ่ือซึมซับวัฒนธรรมดๆี ไปใหร้ ักษาความสะอาด ไปแล้วอย่าเปล่ยี นวถิ ชี าวบ้านให้เหมือนเมืองกรุง อย่าเอา ธุรกิจมาขยายในพื้นท่แี ห่งนีเ้ ป็นเช่นด่ัง ปาย อัมพวา เชียง คาน หากเท่ียวอย่างมีสานึก พวกเรากจ็ ะมีแหลง่ ท่องเท่ยี วดๆี ไวน้ านๆคะ่
ในภาษา Javascript ทุกๆอย่างคือ ออบเจค(object) หลายๆภาษา เช่น Java , .NET จะต้องสร้าง คลาสตน้ แบบขนึ้ มาก่อน คลาสท่สี ร้างข้ึนมาน้ันจะต้องไปประกาศเป็น ออบเจคกอ่ นจึงจะนาไปใช้งานได้ แต่ Javascript ไม่จาเป็นต้องมีคลาส ประกาศออบเจคใช้งานได้เลย ออบเจค คือ ในการเขียนโปรแกรมหมายถึง คานามท่ีประกอบไปดว้ ย property (คุณสมบัติของนาม) และ Method หรอื function (หน้าท่ขี องนาม) ในการเขียนโปรแกรมเชิงวตั ถุ (Object Oriented Programming) ได้รบั ความนิยมมากในปัจจุ บันเพราะสามารถลดปัญหา Spaghetti code หรือการเขียน โปรแกรมไมม่ ีระเบียบจนโคด้ พนั กันจนยุง่ เหยงิ ดังนั้นผูเ้ ขียนโปรแกรมสามารถพัฒนาฝีมือการเขยี นโปรแกรม ของตนเองไดโ้ ดยการนาหลักของ OOP (Object Oriented Programming) เขา้ มาใช้ในโปรแกรมของตนเอง แล้วจะสามารถรองรับการเขียนโปรแกรมหลายมือ และโครงการขนาดใหญ่ได้ เพราะผมเองกเ็ ปน็ หน่ึงในผูป้ ระสบ ปัญหา Spaghetti code จนหลายปีท่ีผ่านมาพฒั นาตนเองด้วยการนาหลักการน้ีมาใช้ทาใหบ้ ักโปรแกรมน้อยลง และสามารถคมุ มาตรฐานการเขยี นโค้ดให้ทีมงานได้ แม้ว่าโปรแกรมเมอร์จะลาออกไป กม็ รี ูปแบบท่ีชัดเจนในการ ตรวจสอบการทางานของโค้ดโดยท่ีไม่ต้องใหโ้ ปรแกรมเมอร์คนนั้นมาถ่ายทอด สาหรบั หลักการ OOP นนั้ ไม่ได้ ยากอย่างท่หี ลายคนคิด แต่ถา้ จะให้ไดผ้ ลเร็วนักพฒั นานนั้ มีความจาเป็นต้องเรียนรู้ธุรกิจ หรอื ความต้องการ ของผูใ้ ช้งานหรือลกู ค้า แลว้ นามาออกแบบให้เป็นออบเจคตามหลกั การ OOP
สามารถนา object ท่อี อกแบบไว้มาเขียนในรูปแบบ JSON ได้ ดังนี้ http://jsfiddle.net/apaichon/kbz1zpxy/ var car = { // Properties color:\"green\",wheelType:\"spinning\", roof:\"shad\",numOfGear:4 ,gearType:\"auto\", maxSpeed:150,currentSpeed:0,currentGear:0,status:\"stop\" // Function ,start:function(key){ if (key != '1234' && this.status ==\"running\"){ return false; } this.status =\"running\"; this.driveId = setInterval(function(){car.drive()},1000); return true; } ,stop:function(key){ if (key != \"1234\" && this.status !=\"running\"){ return false; } this.currentGear =0; this.currentSpeed =0; this.status =\"stop\"; clearInterval(this.driveId); return true; } ,drive:function(){ if (this.status ==\"running\"){ if (this.currentGear >=0 && this.currentGear < this.numOfGear){ this.currentGear ++; this.currentSpeed = this.currentGear * (this.maxSpeed / this.numOfGear); } return true; } return false; }
,isRunning:function(){ if (this.status==\"running\"){ return true; } return false; } ,getCurrentGear:function(){ return this.currentGear; } ,getSpeed:function(){ return this.currentSpeed; } ,turn:function(turnType){ if (turnType ==\"direct\" || turnType ==\"left\" || turnType ==\"right\"){ this.turnType = turnType; return true; } return false; } ,breakCar:function(){ if (this.status!=\"stop\"){ if (this.currentGear !=0 && this.currentGear <= this.numOfGear){ this.currentGear --; this.currentSpeed = this.currentGear * (this.maxSpeed / this.numOfGear); if (this.currentSpeed == 0){ this.stop(\"1234\"); } } } return this.currentSpeed; } };
การกาหนด Propertyสาหรบั JSON format ทาได้โดย ช่ือ Property : Value เช่น color:”green”,maxSpeed:150 การกาหนด function สาหรับ JSON format ทาได้โดย ช่ือ Function : function(parameters,1..,n){} เช่น สรา้ ง object car ขน้ึ มาโดยคณุ สมบตั ิตามตารางท่ไี ด้ออกแบบไว้ color : “green” มีสีเขยี ว wheelType : “spining” ประเภทล้อแบบ spinning roof : “shad” หลงั คารถเก๋ง numOfGear: 4 มี 4 เกยี ร์ gearType:”auto” เป็นเกียร์แบบออโต้ maxSpeed:150 มีความเรว็ สงู สุด 150 km ต่อช่ัวโมง currentSpeed:0 ความเร็ว ณ ปัจจุ บัน getCurrentGear:function(){ return this.currentGear; } currentGear:0 เกยี ร์ปัจจุ บัน status:”stop” สถานะปัจจุ บันของรถ กาหนดเป็น stop คือหยุดเป็นค่าเร่ิมตน้ var car = { color:\"green\",wheelType:\"spinning\", roof:\"shad\",numOfGear:4 ,gearType:\"auto\", maxSpeed:150,currentSpeed:0,currentGear:0,status:\"stop\" }
ฟังก์ช่ัน start มกี ารรับค่า string คอื คีย์ จะ start รถได้จะตอ้ งมกี ุญแจ ในตวั อย่างน้สี มมุตวิ ่าคียท์ ่ีถูกตอ้ ง คือ 1234 ถา้ key ไม่เท่ากบั '1234' และ status เทา่ กบั 'running' คอื รถว่ิงอยูก่ จ็ ะไม่สามารถ start ได้ start:function(key){ if (key != '1234' && this.status ==\"running\"){ return false; } this.status =\"running\"; this.driveId = setInterval(function(){car.drive()},1000); return true; } หาก key ถูกตอ้ ง ก็จะเร่ิมติดเคร่อื ง และเร่มิ ออกว่ิง if (key != '1234' && this.status ==\"running\"){ return false; } this.status =\"running\"; this.driveId = setInterval(function(){car.drive()},1000); return true; setInterval(function(){car.drive()},1000) คือจะทาการรันฟังก์ช่ัน car.drive() ทุกๆหน่ึงวินาที
drive:function(){ if (this.status ==\"running\"){ if (this.currentGear >=0 && this.currentGear < this.numOfGear){ this.currentGear ++; this.currentSpeed = this.currentGear * (this.maxSpeed / this.numOfGear); } return true; } return false; } ถา้ status เป็น running คอื ว่งิ อยูใ่ ห้ทาการเพ่ิมเกยี รแ์ ละความเร็วขึ้นเร่ือยๆ ลองดูตัวอยา่ งจากเวบ็ http://jsfiddle.net/apaichon/kbz1zpxy/ เม่ือกดปุ่ม start จะทาการเพ่มิ ความเร็วข้นึ เร่ือยๆ ตอนท่ี 5 Java Script Function
Search
