Download to read offline
![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();](https://image.slidesharecdn.com/f5b8e500-d779-4778-90ab-243161b56ea4-160317012026/85/Web-Development-8-320.jpg)
Web Development
- 1.
- 2.
- 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 functionname(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 MainWindow 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’)” >