15. กำรทำงำนของ HTML5
mypage.html
2 เว็บเพจแสดง “ข้อมูลหรือ
เนื้อหำ” ตำมที่เขียนไว้ด้วยภำษำ
HTML5 HTML5
<HTML>
<HEAD>
<TITLE>my first web page</TITLE>
</HEAD> This is my web site
<BODY>
<h1>This is my web site.</h1> 1 ผู้ชมเข้ำดูเว็บเพจผ่ำนอินเทอร์เน็ต
</body>
</HTML>
16. กำรทำงำนของ HTML5 กับ CSS3
mypage.html
2 เว็บเพจแสดง “ข้อมูลหรือเนื้อหำ”
HTML5 ตำมที่เขียนไว้ด้วยภำษำ HTML5 ซึ่งจะ
แสดงในรูปแบบที่กำหนดด้วย CSS3 ที่
<HTML>
<HEAD> Link เข้ำมำ
<TITLE>my first web page</TITLE>
<link rel="stylesheet"
type="text/css" This is my web site
href="mystyle.css" />
</HEAD>
<BODY> 1 ผู้ชมเข้ำดูเว็บเพจผ่ำนอินเทอร์เน็ต
<h1> This is my web site. </h1>
</body>
</HTML>
CSS3 mystyle.css
h1
{text-shadow: 5px 5px 5px
#FF0000;}
19. ข้อดีของ JavaScript
• เขียนโปรแกรมที่มีควำมซับซ้อน เช่น
– สร้ำง และเรียกดูฐำนข้อมูล เช่น ระบบกำรสมัครเป็นสมำชิก และประวัติกำร
เรียน เป็นต้น
– ติดต่อเรียกข้อมูลจำกเครื่องแม่ข่ำย เช่น เรียกระบบกำรเรียนผ่ำนอุปกรณ์
Mobile ก็อำจจะเรียกข้อมูลบทเรียนใหม่ๆ
– เชื่อมโยงระบบแผนที่ของอุปกรณ์ Mobile เพื่อเรียกดูตำแหน่ง
– จัดเก็บข้อมูลที่อุปกรณ์ Mobile แบบ Local ทำให้ไม่ต้องเข้ำอินเทอร์เน็ตทุก
ครั้งที่ใช้งำน
– เขียนควบคุมกำรทำงำนของปุ่ม เช่น ปุ่มบังคับกำรเคลื่อนไหวของตัวละครใน
เกม เป็นต้น
20. กำรทำงำนของ HTML5/CSS3 และ JavaScript
mypage.html
2 เว็บเพจแสดง “ข้อมูลหรือเนื้อหำ”
HTML5 ตำมที่เขียนไว้ด้วยภำษำ HTML5 ซึ่งจะ
แสดงในรูปแบบที่กำหนดด้วย CSS3 ที่
<HTML>
<HEAD> Link เข้ำมำ
<TITLE>my first web page</TITLE>
<script type="text/javascript“
src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css"
/>
This is my web site
</HEAD>
<BODY>
<h1> This is my web site. </h1>
</body>
1 ผู้ชมเข้ำดูเว็บเพจผ่ำนอินเทอร์เน็ต
</HTML>
CSS3 JavaScript
mystyle.css myscript.js
29. ตัวอย่ำงกำรใช้งำน Canvas
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient โปรแกรมนี้วำดเป็นรูป
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red"); สี่เหลี่ยมไล่สี
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
30. ตัวอย่ำงกำรใช้งำน Drag & Drop
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}