1. BENCHARAT BUATHONG

2. ภาษาที่ใช้พัฒนา
HTML5
CSS3
Javascript
jQuery
PHP

3. Javascript
ทางานบน Web Browser ฝั่ง Client
สร้าง Interaction กับ User
jQuery
Javascript Framework
AJAX
เขียนโค้ดง่ายขึ้น
ทางานมากขึ้น ด้วยโค้ดที่น้อยลง

4. AJAX
เทคนิคการเขียนโปรแกรม
Javascript + XML
ทางานแบบ Asynchronous
XML  ปัจจุบันเปลี่ยนมาใช้ JSON
ประมวลผลหน้าเว็บแบบบางส่วนได้

5. Server ( PHP )
Client ( HTML5+CSS3+Javascript)
Request
Response
time
Request
Response
time
Request
time
Response
Interaction ระหว่าง Web server และ Client แบบเดิม

6. Server ( PHP )
Client ( HTML5+CSS3+Javascript+jQuery)
AJAX Engine
JSCall
AJAX Engine
httpreq
ServerresHtml+css
JSCall
Html+css
JSCallhttpreq
Html+css
Html+css
Serverres
Html+cssInteraction ระหว่าง Web server และ Client แบบใช้ AJAX ช่วย

7. Javascript Syntax
Case Sensitive
ใช้กับ html ต้องมี <script></script> เสมอ
ปิด Statement ด้วย ; ( semicolons )
String : “my text” หรือ ‘my text’
Number : 1000
การต่อ String : “ John “ + “ “ + “ Doe”

8. Variables
 ใช้Var นาหน้า
 String
 var myString = ‘aaa’;
 Number
 var myNumber = 10;
 Boolean
 var myBoolean = true;
 Array
 var myArray = [1,’bob’,’steve’,10];
 Object
 var myObject = new Date();

9. Javascript Output
 alert(“ my alert “);
 document.write(“dddd”);
 InnerHTML
 ตย.
 <div id="newRedText"><div>
document.getElementById("newRedText ").value=”;
 Console.log
 ใช้สาหรับการ Debug Javascript
 console.log(‘’);

10. Operators
 +
String คือการต่อ String :: “hello” + “World” = “Hello
World”;
Number คือการบวก :: 6 + 9 = 15
 - , * , /
 == คือการเทียบค่าตัวแปร
 === คือการเทียบค่าตัวแปร และ Type ตัวแปร
 != คือ การเทียบค่า แบบ ไม่เท่ากับ
 !== คือการเทียบค่า แบบไม่เท่ากับและ ชนิดตัวแปรไม่เหมือนกัน
 >= , <=

11. Javascript Function
 function name(parameter1, parameter2, parameter3)
 {
code to be executed;
}
เช่น
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
การเรียกใช้
var x = myFunction(4, 3);
ถ้าไม่มีการ return เรียกใช้ฟังก์ชั่นได้เลยเช่น
name(1,2,3);

12. Control Flow
 BLOCK :: { //statement here; }
 If…else ::
if(condition) {
statement 1;
} else if(condition){
statement 2;
} else {
statement 3;
}
 Switch…..case
switch (fruittype) {
case “Oranges”:
console.log(“oranges here”);
break;
case “apple”:
console.log(‘apple’);
break;
default:
console.log(“default”);
}

13. Loop and Iteration
 For
for ( var i=0; i< 5;i++)
{
if(I == 2){break;}
alert(“ i = “+ i);
}
 While
n=0; x=0;
while ( n<3){
n++;
x+= n;
}
 Break statement หยุดการทางาน Do…while ทาหนึ่งรอบก่อนเช็คเงื่อนไข
do {
I += 1;
console.log(i);
} while (I < 5);

14. Javascript Date
Get วันที่จากเครื่อง Client
Type = Object
เวลาจะใช้ต้อง new ก่อน เช่น new Date()
getDate(); วันที่ 1 – 31
getMonth() เดือน 0 – 11
getFullYear() ปี ค.ศ.

15. Javascript BOM : Browser Object Model
 API ที่ใช้ในการเข้าถึง Browser
 BOM ไม่มีการกาหนดมาตรฐาน แต่ละ Browser จะอนุญาตให้มีการเข้าถึง Browser ไม่เหมือนกัน
 Document
 <input type=“text” id=“txtID” class=“txtClass” name=“txtName”>
 document.getElementById() => return element 1 element ที่มี ID นั่น
 document.getElementByClassName() => return element list ที่มี class นั้น
 document.getElementByName() => return element list ที่มี ชื่อ นั้น
 Window.innerWidth+innerHeight : return ความกว้าง+ความสูง ของ window ไม่รวม toolbar scroll bar
 Location object : URL
 <a href=“localhost/test”>link drcombi</a>
 Location.href = “localhost/test”; location.reload();
 location.href = return URL
 location.reload() = reload หน้าเว็บ

16. Javascript BOM : Browser Object Model
 window.open เปิด popup เป็นวินโดว์ใหม่
 Window.opener เรียกวินโดว์ที่ทาการเปิดหน้าต่าง หน้า popup นี้
 Parent Object : อ้างอิงถึงหน้าต่างหลักปัจจุบัน จะใช้ในกรณีที่ หน้าเว็บ มีการฝัง iFrame เข้าไป และต้องการอ้างอิงถึงวินโดว์หลัก
จะเรียก parent.document….. จากโค้ดใน iFrame

17. Window.open / window.opener
Main Window
Call window.open()
Popup Window
Call window.opener()

18. Parent object
iFrame
Call : parent.document.body.style.backgroundColor = “white";

19. Javascript window methods
 alert()
 prompt()
 selInterval() => setInterval(function(){ alert("Hello"); }, 3000);
 setTimeout() =>setTimeout(function(){ alert("Hello"); }, 3000);

20. Javascript DOM : Document Object Model
 API สาหรับเข้าถึงและจัดการ HTML element
 DOM จะมีการจัดวาง HTML element ในรูปแบบของ Tree
 Javascript เข้าถึง HTML element ด้วยการใช้ document.

21. Javascript Events
 Onchange ใช้เมื่อ html มีการเปลี่ยนแปลง
 Onclick ใช้เมื่อ มีการ click ที่ html
 Onmouseover ใช้เมื่อมีการ เอาเมาส์ไปอยู่บน html
 Onmouseout ใช้เมื่อมีการ เอาเมาส์ออก html
 Onkeydown
 onKeyup
 onload

22. BOM + DOM
 ใช้ คาสั่ง BOM จัดการ การทางานของ browser เช่น window.history.back();
 ใช้ คาสั่ง BOM เข้าถึง DOM ซึ่งก็คือ tag html เพื่อกาหนดค่า หรือ สั่งให้ tag html ทางาน ตาม Event ต่าง ๆ เช่น
<script>
document.getElementById(‘myButton’).value = ‘my button’;
window.document.getElementByName(‘myInput’).value=‘ Please key something!’;
function loseFocusFunction(parameter1){
alert( parameter1);
};
</script>
<input type=“button” id=“myButton” onclick=“alert(‘this is my button’) ”
onblur=“loseFocusFunction(‘Parameter1’)” >
<input type=“text” name=“myInput” onkeyup=“keyupFunction()” onkeydown=“keydownFunction(‘22’)” >