* ធាតុ លក្ខណៈថ្មី
* ជំនួយ CSS3
* វីដេអូនិងអូឌីយ៉ូ, ក្រាហ្វិក 2D/3D
* មូលដ្ឋានទិន្នន័យ SQL
* កម្មវិធីបណ្តាញ
ជាមួយកម្មវិធីរបស់ HTML យើងអ្នកអាចកែសម្រួល HTML ។ ឧទាហរណ៏
<!DOCTYPE HTML>
<html>
<body>
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
</body>
</html>
HTML5 គឺជាអ្វី? មានអ្វីថ្មី? HTML5 នឹងស្តង់ដាថ្មីសម្រាប់ជា HTML ។ កំណែថ្មីនៃ HTML, HTML បាន 4 មានក្នុងឆ្នាំ 1999 ។ ត្រូវបានផ្លាស់ប្តូរជាច្រើនចាប់តាំងពីពេលនោះមក។ HTML5 គឺនៅតែតែ អភិវឌ្ឍន៍។ ទោះជាយ៉ាងណាមានកម្មវិធីរុករកដ៏ធំគាំទ្រជាច្រើននៃធាតុ HTML5 ថ្មីនិង APIs ។
តើ HTML5 ចាប់ផ្តើមដោយរបៀបណា?
ក្បួនមួយចំនួនសម្រាប់ HTML5 ត្រូវបានបង្កើតឡើង:
- លក្ខណៈពិសេសថ្មីផ្អែកលើ HTML គឺជា CSS, របស់ DOM, និង JavaScript
- កាត់បន្ថយតម្រូវការសម្រាប់កម្មវិធីជំនួយខាងក្រៅ (ដូច Flash),
- ការគ្រប់គ្រងកំហុសក្នុងកាន់តែប្រសើរ
- មានកូដបន្ថែមទៀតដើម្បីជំនួសស្គ្រីប
- HTML5 គួរតែជាឧបករណ៍ឯករាជ្យ
- ដំណើរការអភិវឌ្ឍន៍អាចមើលឃើញដល់សាធារណៈ
HTML5 នេះ <! DOCTYPE>
<! doctype> នៅក្នុង HTML5 មានតែមួយប៉ុណ្ណោះគឺការប្រកាសហើយវាសាមញ្ញ:
<!DOCTYPE html>
ខាងក្រោមនេះឯកសារ HTML5 ធម្មតាគឺជាមួយនឹងអប្បបរមានៃស្លាកដែលត្រូវការ:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document……
</body>
</html>
លក្ខណៈពិសេសថ្មី HTML5
លក្ខណៈពិសេសថ្មីគួរឱ្យចាប់អារម្មណ៍បំផុតនៅក្នុង HTML5 គឺ:
១.ធាតុ <canvas> សម្រាប់គំនូរ 2D
២. ធាតុ <video> និង <audio> សម្រាប់ព័ត៌មាន ចាក់សារថ្មី
៣. ការគាំទ្រសម្រាប់ការផ្ទុកមូលដ្ឋាន
៤. ធាតុមាតិកាជាក់លាក់ថ្មីដូចជា <article>, <footer>, <header>, <nav>, <section>
៥. វត្ថុបញ្ជាសំណុំបែបបទថ្មីដូចជាប្រតិទិនកាលបរិច្ឆេទពេលវេលាអ៊ីមែល URL ស្វែងរក
ការគាំទ្រសម្រាប់ HTML5 កម្មវិធីរុករក HTML5 គឺមិនទាន់មានស្ដង់ដារមួយជាផ្លូវការនិងប្រើកម្មវិធីរុករក បណ្ដាញគ្មានមានការគាំទ្រ HTML5 ពេញ លេញ នៅឡើយ។ ប៉ុន្ដែមានកម្មវិធីរុករកដ៏ធំ (Safari, Chrome, Firefox , Opera សម្រាប់ប្រើ អ៊ិនធឺ ណិរុករក) បន្តដើម្បីបន្ថែមលក្ខណៈពិសេសថ្មីរបស់ HTML5 ទៅកំណែចុងក្រោយបំផុតរបស់ពួកគេ។
HTML សរសេរដោយប្រើ Notepad ឬ TextEdit កម្មវិធីHTML ត្រូវបានកែសម្រួលដោយប្រើកម្មវិធីសរសេររបស់ HTML ដែលមានជំនាញដូចជា:
-កម្មវិធី Adobe Dreamweaver
- បណ្ដាញម៉ៃក្រូសូហ្វ Frontpage
- CoffeeCup កម្មវិធីសរសេរកូដរបស់ HTML
ជំហានទី 1: ចាប់ផ្តើម Notepadដើម្បីចាប់ផ្ដើម Notepad សូមចូលទៅកាន់:
ចាប់ផ្តើម
កម្មវិធីទាំងអស់
គ្រឿង
Notepad
ជំហានទី 2: កែសម្រួល HTML របស់អ្នកជាមួយនឹង Notepad
សូមវាយបញ្ចូលកូដ HTML របស់អ្នកចូលទៅក្នុង Notepad :
ជំហានទី 3: HTML ដែលរក្សាទុកជ្រើស រក្សាទុកជា .. នៅក្នុងម៉ឺនុយឯកសារ Notepad របស់។ នៅពេលដែលអ្នករក្សាទុកជាឯកសារ HTML អ្នកអាចប្រើដោយ Save ជា file មានកន្ទុយ htm ។
ជំហានទី 4: HTML ដែលរត់នៅក្នុងកម្មវិធីរុករករបស់អ្នក: ចាប់ផ្តើមកម្មវិធីរុករកបណ្ដាញរបស់អ្នកនិងបើកឯកសារ html របស់អ្នកពី ឯកសារ :បានរក្សា ទុករួចហើយចុចទ្វេដងលើឯកសារ HTML របស់អ្នក។ លទ្ធផលគួរតែមើលទៅច្រើនដូចនេះ:
ធាតុថ្មីនៅក្នុង HTML5 អ៊ិនធើណិនិង ការប្រើប្រាស់អ៊ីនធឺណិតនោះបានផ្លាស់ ប្តូរជាច្រើនចាប់តាំងពី 4 HTML ដែលបានក្លាយជាស្ដង់ដារនៅក្នុងឆ្នាំ 1999 នេះ។ សព្វថ្ងៃនេះធាតុជាច្រើនក្នុង HTML 4 គឺគេលែងប្រើហើយ, មិនត្រូវបានប្រើ។ ធាតុទាំងអស់ទាំងនោះត្រូវបានយកចេញឬ សរសេរនៅក្នុង HTML5 វិញ។ ដើម្បី ឱ្យកាន់តែប្រសើរឡើងដោះ ស្រាយ ការប្រើ ប្រាស់អ៊ិនធឺណិនាពេលបច្ចុប្បន្ននេះរបស់ HTML5 ផងដែររួមបញ្ចូលទាំងធាតុថ្មីសម្រាប់ក្រាហ្វិកដែលបន្ថែម មាតិកាប្រព័ន្ធផ្សព្វផ្សាយរចនាសម្ព័ន្ធទំព័រល្អប្រសើរជាងមុន, ការដោះស្រាយសំណុំបែបបទល្អប្រសើរជាងមុននិង APIs ជាច្រើនដើម្បីអូស / ទម្លាក់ធាតុ, រកឃើញទីតាំងភូមិសាស្ដ្រ, រួមបញ្ចូលទាំងការផ្ទុកបណ្ដាញ។
ធាតុ <canvas> ថ្មី
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
Media ថ្មី
Tag | Description |
---|---|
<audio> | Defines sound content |
<video> | Defines a video or movie |
<source> | Defines multiple media resources for <video> and <audio> |
<embed> | Defines a container for an external application or interactive content (a plug-in) |
<track> | Defines text tracks for <video> and <audio> |
Tag | Description |
---|---|
<datalist> | Specifies a list of pre-defined options for input controls |
<keygen> | Defines a key-pair generator field (for forms) |
<output> | Defines the result of a calculation |
Tag | Description |
---|---|
<article> | Defines an article |
<aside> | Defines content aside from the page content |
<bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
<command> | Defines a command button that a user can invoke |
<details> | Defines additional details that the user can view or hide |
<dialog> | Defines a dialog box or window |
<summary> | Defines a visible heading for a <details> element |
<figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
<figcaption> | Defines a caption for a <figure> element |
<footer> | Defines a footer for a document or section |
<header> | Defines a header for a document or section |
<hgroup> | Groups a set of <h1> to <h6> elements when a heading has multiple levels |
<mark> | Defines marked/highlighted text |
<meter> | Defines a scalar measurement within a known range (a gauge) |
<nav> | Defines navigation links |
<progress> | Represents the progress of a task |
<ruby> | Defines a ruby annotation (for East Asian typography) |
<rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
<rp> | Defines what to show in browsers that do not support ruby annotations |
<section> | Defines a section in a document |
<time> | Defines a date/time |
<wbr> | Defines a possible line-break |
នេះដូចខាងក្រោម 4,01 ធាតុរបស់ HTML ត្រូវបានយកចេញពី HTML5:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
canvas គឺជាអ្វី? ធាតុ <canvas> HTML5 គឺត្រូវបានប្រើដើម្បីគូរក្រាហ្វិកនៅលើរហ័សនោះតាមរយៈការសរសេរ ស្គ្រីប (ជាធម្មតាការអនុញ្ញាត JavaScript) ។ ធាតុ <canvas> គឺគ្រាន់តែជាឧបករណ៍ផ្ទុកសម្រាប់ក្រាហ្វិកមួយ។ អ្នក ត្រូវតែប្រើស្គ្រីបដើម្បីពិតជាគូរក្រាហ្វិក។ canvas មានវិធីសាស្រ្តជាច្រើនសម្រាប់ផ្លូវគំនូរ, ប្រអប់, រង្វង់, តួអក្សរនិងរូបភាពបានបន្ថែម។
ការគាំទ្រកម្មវិធីរុករក រុករកអ៊ិនធឺណិ 9 + Firefox មាន, របស់ Opera, Chrome និង Safari គាំទ្រធាតុ <canvas> នេះ។
ចំណាំ: កំណែថ្មីរបស់កម្មវិធីរុករកអ៊ិនធឺណិ 8 និងមុននេះ, មិនគាំទ្រធាតុ <canvas> នេះ។
បង្កើត canvas មួយ canvas គឺជាតំបន់ចតុកោណនៅលើទំព័រ HTML មួយហើយវាត្រូវបានបញ្ជាក់ជាមួយនឹងធាតុ <canvas> នេះ។
ចំណាំ: តាមលំនាំដើមធាតុ <canvas> មានព្រំដែននោះទេហើយគ្មានមាតិកា។ markup ដែលមើលទៅដូចនេះ:
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
ដើម្បីបន្ថែមនៅតាមព្រំដែនជាមួយ, ប្រើគុណលក្ខណៈរចនាបទ:
ឧទាហរណ៏
<canvas id=”myCanvas” width=”200″ height=”100″
style=”border:1px solid #000000;”>
</canvas>
style=”border:1px solid #000000;”>
</canvas>
គូរលើcanvas ដោយមាន JavaScript នេះ គំនូរនៅលើផ្ទាំងក្រណាត់ទាំងអស់ត្រូវតែត្រូវបានធ្វើនៅខាងក្នុងការអនុញ្ញាត JavaScript ថា:
ឧទាហរណ៏
<script>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);
</script> ឩទាហរណ៍ពន្យល់:
ជាដំបូងរកឃើញធាតុ <canvas>ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);
</script> ឩទាហរណ៍ពន្យល់:
var c=document.getElementById(“myCanvas”);
បន្ទាប់មក, ហៅ getContext (របស់ខ្លួន) វិធីសាស្ត្រ (អ្នកត្រូវតែកូសខ្សែអក្សរ “2D” ដើម្បី getContext នេះ () វិធីសាស្ត្រ):
var ctx=c.getContext(“2d”);
វត្ថុ getContext (“2D”) គឺជាការបង្កើតក្នុងវត្ថុ HTML5 ជាមួយនឹងលក្ខណៈសម្បត្តិជាច្រើននិងវិធីសាស្រ្តសំរាប់ផ្លូវការ គូរប្រអប់រង្វង់, អត្ថបទ, រូបភាពនិងច្រើនទៀត។ បន្ទាប់ពីរបន្ទាត់គូរចតុកោណកែងពណ៌ក្រហមមួយ:
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);
ctx.fillRect(0,0,150,75);
លក្ខណៈសម្បត្តិ fillStyle អាចជាពណ៌ជា CSS, ជម្រាលឬលំនាំមួយ។ fillStyle លំនាំដើមគឺ # 000000 (ពណ៌ខ្មៅ) ។
ការ fillRect ( X, Y, ទទឹងកម្ពស់ វិធីសាស្ត្រ) គូរចតុកោណដែលបានបំពេញជាមួយរចនាប័ទ្មបំពេញបច្ចុប្បន្ននេះ។
ផ្ទាំងក្រណាត់កូអរដោនេ ផ្ទាំងក្រណាត់ នេះគឺជាក្រឡាចត្រង្គដែលមានពីរវិមាត្រ។ ជ្រុងខាងលើឆ្វេងនៃផ្ទាំងក្រណាត់មានកូអរដោនេ (0,0) ដូច្នេះ fillRect នេះ () វិធីសាស្រ្តខាងលើបានប៉ារ៉ាម៉ែត្រ (0,0,150,75) ។ នេះមានន័យថា: ចាប់ផ្តើមនៅជ្រុងខាងលើឆ្វេង (0,0) និងគូរចតុកោណដែលជាភីកសែល 150×75 ។
ឩទាហរណ៍សំរបសំរួល កណ្តុរនៅលើចតុកោណ កែងខាងក្រោមដើម្បីមើលកូអរដោនេ x និង Y របស់វា:
Canvas ផ្លូវ ដើម្បីគូរបន្ទាត់ត្រង់នៅលើផ្ទាំងក្រណាត់ មួយ ដែលយើងនឹងប្រើវិធីសាស្រ្តពីរដូចខាងក្រោម:
- moveTo ( X, Y ) កំណត់ជាចំណុចចាប់ផ្តើមនៃបន្ទាត់
- lineTo ( X, Y ) កំណត់ចំណុចដែលបញ្ចប់នៃបន្ទាត់
ប្រើកូដ JavaScript:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); ដើម្បីគូររង្វង់មួយដែលនៅលើ Canvas មួយដែលយើងនឹងប្រើវិធីសាស្ដ្រដូចខាងក្រោម:
- ធ្នូ (x Y, r,, ការចាប់ផ្តើមបញ្ឈប់ការ)
ដើម្បីគូររង្វង់តាមពិតយើងត្រូវតែប្រើវិធីសាស្រ្ត មួយនៃ “ទឹកថ្នាំ”, () ឬបំពេញ () ។ បង្កើតរង្វង់មួយដែលមានវិធីសាស្ត្រធ្នូ ():
ការប្រើ JavaScript:
Canvas សរសេរជា- អត្ថបទ ដើម្បីគូរអត្ថបទនៅលើផ្ទាំងក្រណាត់មួយដែលជាទ្រព្យសម្បត្ដិដ៏សំខាន់បំផុតនិងជាវិធីសាស្រ្តនោះគឺ:
- ពុម្ពអក្សរ – កំណត់លក្ខណៈសម្បត្តិសម្រាប់ពុម្ពអក្សរអត្ថបទ
- fillText ( អត្ថបទ, X, Y ) – គូរអត្ថបទ “បានបំពេញ” នៅលើផ្ទាំងក្រណាត់
- strokeText ( អត្ថបទ, X, Y ) – គូរអត្ថបទនៅលើផ្ទាំងក្រណាត់ (គ្មានបំពេញ) ការប្រើ fillText ():
ឧទាហរណ៏ សរសេរអត្ថបទមួយដែលបានបំពេញ 30px ខ្ពស់នៅលើផ្ទាំងក្រណាត់នោះដោយប្រើពុម្ពអក្សរ “Arial”:
កូដJavaScript:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=”30px Arial”;
ctx.strokeText(“Hello World”,10,50);
Canvas ជម្រាល ជម្រាល អាចត្រូវបានប្រើដើម្បីបំពេញចតុកោណកែង, រង្វង់បន្ទាត់អត្ថបទរាងលនៅលើផ្ទាំងក្រណាត់មិនត្រូវបានកំណត់ទៅ ជាពណ៌រឹង។មានពីរប្រភេទផ្សេងគ្នានៃជម្រាលគឺ:
- createLinearGradient ( X, Y, x1, y1 ) – បង្កើតជម្រាលលីនេអ៊ែរ
- createRadialGradient ( X, Y, r,, x1, y1, r1 ) – បង្កើតជម្រាលមូល / រាងជារង្វង់នៅពេលដែលយើងមានវត្ថុជម្រាលមួយយើងត្រូវតែបន្ថែមពីរឬច្រើនជាងនេះឈប់ពណ៌។ addColorStop នេះ () វិធីសាស្ត្របញ្ជាក់ឈប់ពណ៌និងជំហររបស់ខ្លួននៅតាមជម្រាលនោះទេ។ ជម្រាលអាចត្រូវបានគ្រប់ទីកន្លែងរវាង 0 ទៅ 1 ។ ដើម្បីប្រើជម្រាលដែលបានកំណត់លក្ខណៈសម្បត្តិ fillStyle ឬ strokeStyle ទៅជម្រាលហើយបន្ទាប់មកគូររូបរាងដូចចតុកោណអត្ថបទឬបន្ទាត់មួយ។ ការប្រើ createLinearGradient ():
ឧទាហរណ៏ បង្កើតជម្រាលលីនេអ៊ែរ។ បំពេញចតុកោណកែងជាមួយជម្រាលនេះ:var ctx=c.getContext(“2d”);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); ដើម្បីគូររង្វង់មួយដែលនៅលើ Canvas មួយដែលយើងនឹងប្រើវិធីសាស្ដ្រដូចខាងក្រោម:
- ធ្នូ (x Y, r,, ការចាប់ផ្តើមបញ្ឈប់ការ)
ដើម្បីគូររង្វង់តាមពិតយើងត្រូវតែប្រើវិធីសាស្រ្ត មួយនៃ “ទឹកថ្នាំ”, () ឬបំពេញ () ។ បង្កើតរង្វង់មួយដែលមានវិធីសាស្ត្រធ្នូ ():
ការប្រើ JavaScript:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas សរសេរជា- អត្ថបទ ដើម្បីគូរអត្ថបទនៅលើផ្ទាំងក្រណាត់មួយដែលជាទ្រព្យសម្បត្ដិដ៏សំខាន់បំផុតនិងជាវិធីសាស្រ្តនោះគឺ:
- ពុម្ពអក្សរ – កំណត់លក្ខណៈសម្បត្តិសម្រាប់ពុម្ពអក្សរអត្ថបទ
- fillText ( អត្ថបទ, X, Y ) – គូរអត្ថបទ “បានបំពេញ” នៅលើផ្ទាំងក្រណាត់
- strokeText ( អត្ថបទ, X, Y ) – គូរអត្ថបទនៅលើផ្ទាំងក្រណាត់ (គ្មានបំពេញ) ការប្រើ fillText ():
ឧទាហរណ៏ សរសេរអត្ថបទមួយដែលបានបំពេញ 30px ខ្ពស់នៅលើផ្ទាំងក្រណាត់នោះដោយប្រើពុម្ពអក្សរ “Arial”:
កូដJavaScript:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=”30px Arial”;
ctx.fillText(“Hello World”,10,50);
ប្រើកូដJavaScript:var ctx=c.getContext(“2d”);
ctx.font=”30px Arial”;
ctx.fillText(“Hello World”,10,50);
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=”30px Arial”;
ctx.strokeText(“Hello World”,10,50);
Canvas ជម្រាល ជម្រាល អាចត្រូវបានប្រើដើម្បីបំពេញចតុកោណកែង, រង្វង់បន្ទាត់អត្ថបទរាងលនៅលើផ្ទាំងក្រណាត់មិនត្រូវបានកំណត់ទៅ ជាពណ៌រឹង។មានពីរប្រភេទផ្សេងគ្នានៃជម្រាលគឺ:
- createLinearGradient ( X, Y, x1, y1 ) – បង្កើតជម្រាលលីនេអ៊ែរ
- createRadialGradient ( X, Y, r,, x1, y1, r1 ) – បង្កើតជម្រាលមូល / រាងជារង្វង់នៅពេលដែលយើងមានវត្ថុជម្រាលមួយយើងត្រូវតែបន្ថែមពីរឬច្រើនជាងនេះឈប់ពណ៌។ addColorStop នេះ () វិធីសាស្ត្របញ្ជាក់ឈប់ពណ៌និងជំហររបស់ខ្លួននៅតាមជម្រាលនោះទេ។ ជម្រាលអាចត្រូវបានគ្រប់ទីកន្លែងរវាង 0 ទៅ 1 ។ ដើម្បីប្រើជម្រាលដែលបានកំណត់លក្ខណៈសម្បត្តិ fillStyle ឬ strokeStyle ទៅជម្រាលហើយបន្ទាប់មកគូររូបរាងដូចចតុកោណអត្ថបទឬបន្ទាត់មួយ។ ការប្រើ createLinearGradient ():
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);
ឧទាហរណ៏ បង្កើតជម្រាលមូល / រាងជារង្វង់។ បំពេញចតុកោណកែងជាមួយជម្រាលនេះ:
កូដ JavaScript:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”); // Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
var ctx=c.getContext(“2d”); // Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Canvas ដាក់រូបភាព
ដើម្បីគូររូបភាពនៅលើផ្ទាំងក្រណាត់មួយដែលយើងនឹងប្រើវិធីសាស្ដ្រដូចខាងក្រោម: drawImage ( រូបភាព, X, Y )
កូដ
c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
var img=document.getElementById(“chhunnan”);
ctx.drawImage(img,10,10);
មេរៀន HTML5 Inline SVG
HTML5 មានការគាំទ្រសម្រាប់ក្នុង SVG ។
SVG គឺជាអ្វី?
-SVG ឈរសម្រាប់ក្រាហ្វិកវ៉ិចទ័រដែលអាចធ្វើមាត្រដ្ឋាន
-SVG ត្រូវបានប្រើដើម្បីកំណត់ក្រាហ្វិកវ៉ិចទ័រដែលមានមូលដ្ឋានសម្រាប់បណ្ដាញ
-SVG កំណត់ក្រាហ្វិកនៅក្នុងទ្រង់ទ្រាយ XML
ក្រាហ្វិក SVG ធ្វើមិនបាត់បង់គុណភាពណាមួយប្រសិនបើពួកគេត្រូវបានពង្រីកឬប្តូរទំហំ
ធាតុរៀងរាល់និងគុណលក្ខណៈទាំងអស់នៅក្នុង-ឯកសារ SVG អាចត្រូវបាន animated
- SVG គឺជាអនុសាសន៍ W3C
គុណសម្បត្តិ SVG អត្ថប្រយោជន៍នៃការប្រើ SVG ជាងទ្រង់ទ្រាយរូបភាពផ្សេងទៀត (ដូចជា JPEG, GIF ម្ដងទៀតនិងការ) គឺ:
-រូបភាព SVG អាចត្រូវបានបង្កើតឡើងនិងបានកែសម្រួលដោយប្រើកម្មវិធីនិពន្ធអត្ថបទណាមួយ
-រូបភាព SVG អាចត្រូវបានស្វែងរកសន្ទស្សន៍ស្គ្រីបនិងការបង្ហាប់
-រូបភាព SVG គឺប្រែព្រួល
-រូបភាព SVG អាចត្រូវបានបោះពុម្ពដោយមានគុណភាពខ្ពស់នៅក្នុងដំណោះស្រាយណាមួយទេ
-រូបភាព SVG គឺ zoomable (និងរូបភាពដែលអាចត្រូវបានពង្រីកដោយមិនចាំបាច់មានការរិចរិល)
SVG ដោយផ្ទាល់ទៅក្នុងទំព័រ HTML & # នៅក្នុង HTML5 អ្នកអាចបង្កប់ធាតុ SVG ដោយផ្ទាល់ទៅក្នុងទំព័រ HTML របស់អ្នក:
ឧទាហរណ៏
<!DOCTYPE html>
<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ height=”190″>
<polygon points=”100,10 40,180 190,60 10,60 160,180″
style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;”>
</svg>
</body>
</html>
លទ្ឋផល:
ភាពខុសគ្នារវាង SVG និងCanvas
SVG គឺជាភាសាសម្រាប់ពណ៌នាក្រាហ្វិក 2D នៅក្នុង XML ដែលមួយ។ Canvas គូរក្រាហ្វិក 2D នៅលើលឿន (ដោយមានការប្រើ JavaScript មួយ) ។
SVG គឺមានមូលដ្ឋានលើ XML មានដែលមានន័យថាជារៀងរាល់គឺជាធាតុដែលអាចរកបាននៅក្នុង SVG របស់ DOM ។ អ្នកអាចភ្ជាប់កម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ការប្រើ JavaScript សម្រាប់ធាតុមួយ។ នៅក្នុង SVG, នីមួយរូបរាងត្រូវបានដកចេញត្រូវបានគេចងចាំថាជាវត្ថុមួយ។ ប្រសិនបើគុណលក្ខណៈ SVG នៃវត្ថុមួយដែលត្រូវបានផ្លាស់ប្តូរកម្មវិធីរុករកដោយស្វ័យ ប្រវត្តិអាច re-បង្ហាញរូបរាង។
Canvas ត្រូវបានបង្ហាញភីកសែលដោយភីកសែល។ នៅក្នុងCanvas , នៅពេលដែលត្រូវបានគូរក្រាហ្វិក, វាត្រូវបានគេបំភ្លេចចោលដោយកម្មវិធីរុករក។ ប្រសិនបើជំហររបស់ខ្លួនគួរតែត្រូវបានផ្លាស់ប្តូរនោះជាកន្លែង ទាំងមូលត្រូវ redrawn រួមទាំងវត្ថុណាមួយដែលអាចនឹងត្រូវបានគ្របដណ្តប់ដោយក្រាហ្វិក ។
មេរៀន HTML5 Drag និង Drop
Drag និង Drop អូសនិងទម្លាក់គឺជាលក្ខណៈពិសេសមួយ ដែលមានញឹកញាប់ណាស់។ វាគឺជាពេលដែលអ្នក “ចាប់” វត្ថុមួយនិងអូសវាទៅទីតាំងផ្សេងគ្នា។ នៅក្នុង HTML5, អូសនិងទម្លាក់គឺជាផ្នែកមួយនៃស្តង់ដារនិងធាតុណាមួយដែលអាច ទាញបាន ។
ឧទាហរណ៏
ជាដំបូងនៃការទាំងអស់: ដើម្បីធ្វើឱ្យ draggable ធាតុមួយកំណត់គុណលក្ខណៈ draggable ទៅ true:
<img draggable=”true”>
តើអ្វីទៅ – ondragstart និង setData ()
បន្ទាប់មកបញ្ជាក់អ្វីដែលគួរកើតឡើងនៅពេលដែលធាតុត្រូវបានអូស។ នៅក្នុងឧទាហរណ៍ខាងលើគុណលក្ខណៈ ondragstart បានហៅមុខងារអូស (ព្រឹត្តិការណ៍) ដែលបញ្ជាក់ពីអ្វីដែលទិន្នន័យត្រូវបានអូស។ dataTransfer.setData នេះ () វិធីសាស្រ្តកំណត់ប្រភេទទិន្នន័យនិងតម្លៃនៃទិន្នន័យដែលបានអូស នេះ:
function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}
កន្លែងដែលត្រូវដាក់ – ondragover
ព្រឹត្តិការណ៍ ondragover បញ្ជាក់កន្លែងដែលទិន្នន័យអាចត្រូវបានអូសធ្លាក់ចុះ។តាមលំនាំដើម ទិន្នន័យ / ធាតុមិនអាចត្រូវបានធ្លាក់ចុះនៅក្នុងធាតុផ្សេងទៀត។ ដើម្បីអនុញ្ញាតឱ្យមានការធ្លាក់ចុះមួយដែលយើងត្រូវតែការពារការ ដោះស្រាយលំនាំដើមនៃធាតុនេះ។
event.preventDefault () វិធីសាស្ត្រសម្រាប់ព្រឹត្តិការណ៍ ondragover នេះ:
event.preventDefault()
តើដាក់នៅ – ondrop
នៅពេលដែលទិន្នន័យត្រូវបានធ្លាក់ចុះបានអូសព្រឹត្តិការណ៍ទម្លាក់កើតឡើង។
នៅក្នុងឧទាហរណ៍ខាងលើគុណលក្ខណៈ ondrop បានហៅអនុគមន៍មួយ, ការធ្លាក់ចុះ (ព្រឹត្តិការណ៍):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
មេរៀន HTML5 ទីតាំងភូមិសាស្ដ្រGeolocation
រកទីតាំងទីតាំងរបស់អ្នកប្រើ
ទីតាំងភូមិសាស្ដ្រ នេះ បាន HTML5 API គឺត្រូវបានប្រើដើម្បីទទួលបាននូវទីតាំងភូមិសាស្រ្តនៃអ្នកប្រើ។
ចាប់តាំងពីពេលនេះអាចនឹងប៉ះពាល់ដល់ភាពឯកជន របស់អ្នកប្រើទីតាំងនេះគឺមិនអាចធ្វើបានទេលុះត្រាតែអ្នកប្រើ ដែលបានយល់ព្រម។
HTML5 – ការប្រើទីតាំងភូមិសាស្ដ្រ ប្រើវិធីសាស្ត្រ getCurrentPosition () ដើម្បីទទួលបាននូវទីតាំងរបស់អ្នកប្រើ។ ឧទាហរណ៏ខាងក្រោមនេះគឺជាឧទាហរណ៏មួយទីតាំងភូមិសាស្ដ្រសាមញ្ញ ប្រើ latitude និង longitude នៃទីតាំងរបស់អ្នកប្រើ:
ឧទាហរណ៏
<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>
កំហុសការគ្រប់គ្រងនិងការបដិសេធ ប៉ារ៉ាម៉ែត្រ វិធីសាស្ត្រទីពីរនៃ getCurrentPosition () គឺត្រូវបានប្រើដើម្បីដោះស្រាយកំហុស។ វាបញ្ជាក់ពីមុខងារដើម្បីរត់ប្រសិនបើវាបានបរាជ័យដើម្បីទទួលបាន នូវទីតាំងរបស់អ្នកប្រើមួយ:
ឧទាហរណ៏
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML=”User denied the request for Geolocation.”
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML=”Location information is unavailable.”
break;
case error.TIMEOUT:
x.innerHTML=”The request to get user location timed out.”
break;
case error.UNKNOWN_ERROR:
x.innerHTML=”An unknown error occurred.”
break;
}
}
បង្ហាញលទ្ធផលនៅក្នុងផែនទី ដើម្បីបង្ហាញ លទ្ធផលនៅក្នុងផែនទីមួយដែលអ្នកត្រូវការចូលដំណើរការទៅកាន់សេវា ផែនទីមួយដែលអាចប្រើ latitude និង longitude ដូចផែនទីរបស់ Google:
ឧទាហរណ៏
function showPosition(position)
{
var latlon=position.coords.latitude+”,”+position.coords.longitude;
var img_url=”http://maps.googleapis.com/maps/api/staticmap?center=”
+latlon+”&zoom=14&size=400×300&sensor=false”;
document.getElementById(“mapholder”).innerHTML=”<img src=’”+img_url+”‘>”;
}
ពត៌មានទីតាំងជាក់លាក់
ទំព័រនេះបង្ហាញពីរបៀបដើម្បីបង្ហាញពីទីតាំងរបស់អ្នកប្រើនៅលើ ផែនទី។ ទោះជាយ៉ាងណាក៏ទីតាំងភូមិសាស្ដ្រនេះគឺមានប្រយោជន៍ខ្លាំងណាស់ សម្រាប់ព័ត៌មានទីតាំងជាក់លាក់។
ឧទាហរណ៏:
-ឡើងលើដើម្បីកាលបរិច្ឆេទពត៌មានមូលដ្ឋាន
-បង្ហាញពីចំណុចនៃការចាប់អារម្មណ៍នៅជិតអ្នកប្រើ
-បើកដោយវេន-រុករក (GPS)
វិធីសាស្រ្ត getCurrentPosition នេះ () – ទិន្នន័យត្រឡប់ទៅរកដើម្បីគូររូបភាពនៅលើផ្ទាំងក្រណាត់មួយដែលយើងនឹងប្រើវិធីសាស្ដ្រដូចខាងក្រោម: drawImage ( រូបភាព, X, Y )
កូដ
c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
var img=document.getElementById(“chhunnan”);
ctx.drawImage(img,10,10);
មេរៀន HTML5 Inline SVG
HTML5 មានការគាំទ្រសម្រាប់ក្នុង SVG ។
SVG គឺជាអ្វី?
-SVG ឈរសម្រាប់ក្រាហ្វិកវ៉ិចទ័រដែលអាចធ្វើមាត្រដ្ឋាន
-SVG ត្រូវបានប្រើដើម្បីកំណត់ក្រាហ្វិកវ៉ិចទ័រដែលមានមូលដ្ឋានសម្រាប់បណ្ដាញ
-SVG កំណត់ក្រាហ្វិកនៅក្នុងទ្រង់ទ្រាយ XML
ក្រាហ្វិក SVG ធ្វើមិនបាត់បង់គុណភាពណាមួយប្រសិនបើពួកគេត្រូវបានពង្រីកឬប្តូរទំហំ
ធាតុរៀងរាល់និងគុណលក្ខណៈទាំងអស់នៅក្នុង-ឯកសារ SVG អាចត្រូវបាន animated
- SVG គឺជាអនុសាសន៍ W3C
គុណសម្បត្តិ SVG អត្ថប្រយោជន៍នៃការប្រើ SVG ជាងទ្រង់ទ្រាយរូបភាពផ្សេងទៀត (ដូចជា JPEG, GIF ម្ដងទៀតនិងការ) គឺ:
-រូបភាព SVG អាចត្រូវបានបង្កើតឡើងនិងបានកែសម្រួលដោយប្រើកម្មវិធីនិពន្ធអត្ថបទណាមួយ
-រូបភាព SVG អាចត្រូវបានស្វែងរកសន្ទស្សន៍ស្គ្រីបនិងការបង្ហាប់
-រូបភាព SVG គឺប្រែព្រួល
-រូបភាព SVG អាចត្រូវបានបោះពុម្ពដោយមានគុណភាពខ្ពស់នៅក្នុងដំណោះស្រាយណាមួយទេ
-រូបភាព SVG គឺ zoomable (និងរូបភាពដែលអាចត្រូវបានពង្រីកដោយមិនចាំបាច់មានការរិចរិល)
SVG ដោយផ្ទាល់ទៅក្នុងទំព័រ HTML & # នៅក្នុង HTML5 អ្នកអាចបង្កប់ធាតុ SVG ដោយផ្ទាល់ទៅក្នុងទំព័រ HTML របស់អ្នក:
ឧទាហរណ៏
<!DOCTYPE html>
<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ height=”190″>
<polygon points=”100,10 40,180 190,60 10,60 160,180″
style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;”>
</svg>
</body>
</html>
លទ្ឋផល:
ភាពខុសគ្នារវាង SVG និងCanvas
SVG គឺជាភាសាសម្រាប់ពណ៌នាក្រាហ្វិក 2D នៅក្នុង XML ដែលមួយ។ Canvas គូរក្រាហ្វិក 2D នៅលើលឿន (ដោយមានការប្រើ JavaScript មួយ) ។
SVG គឺមានមូលដ្ឋានលើ XML មានដែលមានន័យថាជារៀងរាល់គឺជាធាតុដែលអាចរកបាននៅក្នុង SVG របស់ DOM ។ អ្នកអាចភ្ជាប់កម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ការប្រើ JavaScript សម្រាប់ធាតុមួយ។ នៅក្នុង SVG, នីមួយរូបរាងត្រូវបានដកចេញត្រូវបានគេចងចាំថាជាវត្ថុមួយ។ ប្រសិនបើគុណលក្ខណៈ SVG នៃវត្ថុមួយដែលត្រូវបានផ្លាស់ប្តូរកម្មវិធីរុករកដោយស្វ័យ ប្រវត្តិអាច re-បង្ហាញរូបរាង។
Canvas ត្រូវបានបង្ហាញភីកសែលដោយភីកសែល។ នៅក្នុងCanvas , នៅពេលដែលត្រូវបានគូរក្រាហ្វិក, វាត្រូវបានគេបំភ្លេចចោលដោយកម្មវិធីរុករក។ ប្រសិនបើជំហររបស់ខ្លួនគួរតែត្រូវបានផ្លាស់ប្តូរនោះជាកន្លែង ទាំងមូលត្រូវ redrawn រួមទាំងវត្ថុណាមួយដែលអាចនឹងត្រូវបានគ្របដណ្តប់ដោយក្រាហ្វិក ។
មេរៀន HTML5 Drag និង Drop
Drag និង Drop អូសនិងទម្លាក់គឺជាលក្ខណៈពិសេសមួយ ដែលមានញឹកញាប់ណាស់។ វាគឺជាពេលដែលអ្នក “ចាប់” វត្ថុមួយនិងអូសវាទៅទីតាំងផ្សេងគ្នា។ នៅក្នុង HTML5, អូសនិងទម្លាក់គឺជាផ្នែកមួយនៃស្តង់ដារនិងធាតុណាមួយដែលអាច ទាញបាន ។
ឧទាហរណ៏
<!DOCTYPE HTML>
<html>
<head>
<script>
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));
}
</script>
</head>
<body>
<div id=”div1″ ondrop=”drop(event)”
ondragover=”allowDrop(event)”></div>
<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″>
</body>
</html>
ធ្វើឱ្យ Draggable ធាតុមួយ<html>
<head>
<script>
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));
}
</script>
</head>
<body>
<div id=”div1″ ondrop=”drop(event)”
ondragover=”allowDrop(event)”></div>
<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″>
</body>
</html>
ជាដំបូងនៃការទាំងអស់: ដើម្បីធ្វើឱ្យ draggable ធាតុមួយកំណត់គុណលក្ខណៈ draggable ទៅ true:
<img draggable=”true”>
តើអ្វីទៅ – ondragstart និង setData ()
បន្ទាប់មកបញ្ជាក់អ្វីដែលគួរកើតឡើងនៅពេលដែលធាតុត្រូវបានអូស។ នៅក្នុងឧទាហរណ៍ខាងលើគុណលក្ខណៈ ondragstart បានហៅមុខងារអូស (ព្រឹត្តិការណ៍) ដែលបញ្ជាក់ពីអ្វីដែលទិន្នន័យត្រូវបានអូស។ dataTransfer.setData នេះ () វិធីសាស្រ្តកំណត់ប្រភេទទិន្នន័យនិងតម្លៃនៃទិន្នន័យដែលបានអូស នេះ:
function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}
កន្លែងដែលត្រូវដាក់ – ondragover
ព្រឹត្តិការណ៍ ondragover បញ្ជាក់កន្លែងដែលទិន្នន័យអាចត្រូវបានអូសធ្លាក់ចុះ។តាមលំនាំដើម ទិន្នន័យ / ធាតុមិនអាចត្រូវបានធ្លាក់ចុះនៅក្នុងធាតុផ្សេងទៀត។ ដើម្បីអនុញ្ញាតឱ្យមានការធ្លាក់ចុះមួយដែលយើងត្រូវតែការពារការ ដោះស្រាយលំនាំដើមនៃធាតុនេះ។
event.preventDefault () វិធីសាស្ត្រសម្រាប់ព្រឹត្តិការណ៍ ondragover នេះ:
event.preventDefault()
តើដាក់នៅ – ondrop
នៅពេលដែលទិន្នន័យត្រូវបានធ្លាក់ចុះបានអូសព្រឹត្តិការណ៍ទម្លាក់កើតឡើង។
នៅក្នុងឧទាហរណ៍ខាងលើគុណលក្ខណៈ ondrop បានហៅអនុគមន៍មួយ, ការធ្លាក់ចុះ (ព្រឹត្តិការណ៍):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
មេរៀន HTML5 ទីតាំងភូមិសាស្ដ្រGeolocation
រកទីតាំងទីតាំងរបស់អ្នកប្រើ
ទីតាំងភូមិសាស្ដ្រ នេះ បាន HTML5 API គឺត្រូវបានប្រើដើម្បីទទួលបាននូវទីតាំងភូមិសាស្រ្តនៃអ្នកប្រើ។
ចាប់តាំងពីពេលនេះអាចនឹងប៉ះពាល់ដល់ភាពឯកជន របស់អ្នកប្រើទីតាំងនេះគឺមិនអាចធ្វើបានទេលុះត្រាតែអ្នកប្រើ ដែលបានយល់ព្រម។
HTML5 – ការប្រើទីតាំងភូមិសាស្ដ្រ ប្រើវិធីសាស្ត្រ getCurrentPosition () ដើម្បីទទួលបាននូវទីតាំងរបស់អ្នកប្រើ។ ឧទាហរណ៏ខាងក្រោមនេះគឺជាឧទាហរណ៏មួយទីតាំងភូមិសាស្ដ្រសាមញ្ញ ប្រើ latitude និង longitude នៃទីតាំងរបស់អ្នកប្រើ:
ឧទាហរណ៏
<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>
កំហុសការគ្រប់គ្រងនិងការបដិសេធ ប៉ារ៉ាម៉ែត្រ វិធីសាស្ត្រទីពីរនៃ getCurrentPosition () គឺត្រូវបានប្រើដើម្បីដោះស្រាយកំហុស។ វាបញ្ជាក់ពីមុខងារដើម្បីរត់ប្រសិនបើវាបានបរាជ័យដើម្បីទទួលបាន នូវទីតាំងរបស់អ្នកប្រើមួយ:
ឧទាហរណ៏
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML=”User denied the request for Geolocation.”
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML=”Location information is unavailable.”
break;
case error.TIMEOUT:
x.innerHTML=”The request to get user location timed out.”
break;
case error.UNKNOWN_ERROR:
x.innerHTML=”An unknown error occurred.”
break;
}
}
បង្ហាញលទ្ធផលនៅក្នុងផែនទី ដើម្បីបង្ហាញ លទ្ធផលនៅក្នុងផែនទីមួយដែលអ្នកត្រូវការចូលដំណើរការទៅកាន់សេវា ផែនទីមួយដែលអាចប្រើ latitude និង longitude ដូចផែនទីរបស់ Google:
ឧទាហរណ៏
function showPosition(position)
{
var latlon=position.coords.latitude+”,”+position.coords.longitude;
var img_url=”http://maps.googleapis.com/maps/api/staticmap?center=”
+latlon+”&zoom=14&size=400×300&sensor=false”;
document.getElementById(“mapholder”).innerHTML=”<img src=’”+img_url+”‘>”;
}
ពត៌មានទីតាំងជាក់លាក់
ទំព័រនេះបង្ហាញពីរបៀបដើម្បីបង្ហាញពីទីតាំងរបស់អ្នកប្រើនៅលើ ផែនទី។ ទោះជាយ៉ាងណាក៏ទីតាំងភូមិសាស្ដ្រនេះគឺមានប្រយោជន៍ខ្លាំងណាស់ សម្រាប់ព័ត៌មានទីតាំងជាក់លាក់។
ឧទាហរណ៏:
-ឡើងលើដើម្បីកាលបរិច្ឆេទពត៌មានមូលដ្ឋាន
-បង្ហាញពីចំណុចនៃការចាប់អារម្មណ៍នៅជិតអ្នកប្រើ
-បើកដោយវេន-រុករក (GPS)
getCurrentPosition នេះ () វិធីសាស្ត្រត្រឡប់វត្ថុមួយបើវាគឺទទួលបានជោគជ័យ។ លក្ខណៈសម្បត្តិ latitude នេះ longitude និងភាពត្រឹមត្រូវត្រូវបានត្រឡប់មកវិញជានិច្ច។ លក្ខណៈសម្បត្តិផ្សេងទៀតនៅខាងក្រោមនឹងត្រូវបានត្រឡប់មកវិញ ប្រសិនបើអាចប្រើបាន។
Property | Description |
---|---|
coords.latitude | The latitude as a decimal number |
coords.longitude | The longitude as a decimal number |
coords.accuracy | The accuracy of position |
coords.altitude | The altitude in meters above the mean sea level |
coords.altitudeAccuracy | The altitude accuracy of position |
coords.heading | The heading as degrees clockwise from North |
coords.speed | The speed in meters per second |
timestamp | The date/time of the response |
watchPosition () – ត្រឡប់ទីតាំងបច្ចុប្បន្នរបស់អ្នកប្រើហើយបន្តទៅវិលត្រឡប់មក ទីតាំងដែលបានធ្វើឱ្យទាន់សម័យជាផ្លាស់ទីអ្នកប្រើ (ដូចជា GPS នៅក្នុងរថយន្តមួយ) ។ clearWatch () – បញ្ឈប់ watchPosition នេះ () វិធីសាស្ដ្រ។ ឧទាហរណ៏ដូចខាងក្រោមនេះបង្ហាញពីវិធីសាស្រ្ត watchPosition នេះ () ។ អ្នកត្រូវការឧបករណ៍ GPS ត្រឹមត្រូវដើម្បីសាកល្បងនេះ (ដូចជាទូរស័ព្ទ iPhone):
ឧទាហរណ៏
<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>
មេរៀន HTML5 Video
វីដេអូនៅលើបណ្តាញ
រហូតមកដល់ពេលបច្ចុប្បន្ននេះមានបានមិនត្រូវបានស្តង់ដារសម្រាប់ បង្ហាញវីដេអូមួយ / ខ្សែភាពយន្តនៅលើទំព័របណ្តាញមួយ។សព្វថ្ងៃនេះវីដេអូភាគច្រើនគឺ ត្រូវបានបង្ហាញតាមរយៈកម្មវិធីជំនួយក្នុង (ដូចជា Flash) ។ ទោះជាយ៉ាងណាមានកម្មវិធីរុករកផ្សេងគ្នាអាចមានភាពខុសគ្នាដោត -ins ។ HTML5 កំណត់ធាតុថ្មីដែលបញ្ជាក់ពីវិធីដែលជាស្តង់ដារដើម្បីបង្កប់វីដេអូ / ខ្សែភាពយន្តនៅលើទំព័របណ្តាញមួយ: ធាតុ <video> នេះ។
របៀបដែលវាធ្វើការ
ដើម្បីបង្ហាញវីដេអូនៅក្នុង HTML5 មួយនេះគឺជាអ្វីទាំងអស់ដែលអ្នកត្រូវការ:
ឧទាហរណ៏
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
ធ្វើទ្រង់ទ្រាយវីដេអូនិងផ្តល់ជំនួយកម្មវិធីរុករក
MP4 បាន WebM, Ogg និង: បច្ចុប្បន្នមាន 3 ទ្រង់ទ្រាយវីដេអូការគាំទ្រសម្រាប់ធាតុ <video> គឺ:
Browser | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer 9+ | YES | NO | NO |
Chrome 6+ | YES | YES | YES |
Firefox 3.6+ | NO | YES | YES |
Safari 5+ | YES | NO | NO |
Opera 10.6+ | NO | YES | YES |
rmat | MIME-type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
HTML5 មានវិធីសាស្រ្តរបស់ DOM នេះ អចលន ទ្រព្យនិងព្រឹត្តិការណ៍សំរាប់ <video> និងធាតុ <audio> ។
វិធីសាស្រ្តទាំងនេះ មានលក្ខណៈសម្បត្តិនិងព្រឹត្តិការណ៍អនុញ្ញាតឱ្យអ្នករៀបចំធាតុ <video> និង <audio> ដោយប្រើការអនុញ្ញាត JavaScript ។
និងការផ្ទុកសម្រាប់ឧទាហរណ៏និងមានលក្ខណសម្បត្តិ (ដូចជារយៈពេលនិងកម្រិតសំឡេង) ។ វាក៏មានព្រឹត្តិការណ៍របស់ DOM ដែលអាចផ្ដល់ដំណឹងដល់អ្នកនៅពេលដែលធាតុ <video> ចាប់ផ្តើមលេងគឺត្រូវបានផ្អាកត្រូវបានបញ្ចប់
មេរៀន HTML5 Audio
អូឌីយ៉ូនៅលើបណ្តាញ
រហូតមកដល់ពេល បច្ចុប្បន្ន នេះមានបានស្តង់ដារត្រឹមត្រូវសម្រាប់ចាក់ឯកសារអូឌីយ៉ូនៅលើទំព័របណ្តាញមួយ។
សព្វថ្ងៃនេះឯកសារអូឌីយ៉ូដែលបានច្រើនបំផុតត្រូវបានចាក់តាមរយៈកម្មវិធីជំនួយក្នុង (ដូចជា Flash) ។
HTML5 កំណត់ធាតុថ្មីដែលបញ្ជាក់ពីវិធីដែលជាស្តង់ដារដើម្បីបង្កប់ឯកសារ អូឌីយ៉ូនៅលើទំព័របណ្តាញមួយ: ធាតុ <audio> នេះ។
របៀបដែលវាធ្វើការ
ដើម្បីចាក់ឯកសារអូឌីយ៉ូនៅក្នុង HTML5, នេះគឺជាអ្វីទាំងអស់ដែលអ្នកត្រូវការ:
ឧទាហរណ៏
<audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>
ទ្រង់ទ្រាយអូឌីយ៉ូនិងករផ្តល់ជំនួយកម្មវិធីរុករក
MP3 បាន WAV, និង Ogg: បច្ចុប្បន្នមាន 3 ទ្រង់ទ្រាយឯកសារការគាំទ្រសម្រាប់ធាតុ <audio> គឺ
owser | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer 9+ | YES | NO | NO |
Chrome 6+ | YES | YES | YES |
Firefox 3.6+ | NO | YES | YES |
Safari 5+ | YES | YES | NO |
Opera 10+ | NO | YES | YES |
Format | MIME-type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
បញ្ចូល HTML5 ប្រភេទថ្មី
HTML5 មានប្រភេទព័ត៌មានបញ្ចូលជាច្រើនដែលថ្មីសម្រាប់ទម្រង់។ ទាំងនេះជាលក្ខណៈពិសេសថ្មីអនុញ្ញាតឱ្យត្រួតពិនិត្យការបញ្ចូលបាន ល្អប្រសើរនិងត្រឹមត្រូវ។
ពណ៌
កាលបរិច្ឆេត
datetime
datetime-មូលដ្ឋាន
អ៊ីម៉ែល
ខែ
ចំនួន
ជួរ
ស្វែងរក
ទូរស័ព្ទ
ពេលវេលា
URL
សប្តាហ៍
បញ្ចូលប្រភេទពណ៌
Select your favorite color: <input type=”color” name=”favcolor”>
បញ្ចូលប្រភេទកាលបរិច្ឆេទ
Birthday: <input type=”date” name=”bday”>
បញ្ចូលប្រភេទdatetime
Birthday (date and time): <input type=”datetime” name=”bdaytime”>
បញ្ចូលប្រភេទdatetime-មូលដ្ឋាន
Birthday (date and time): <input type=”datetime-local” name=”bdaytime”>
បញ្ចូលប្រភេទអ៊ីម៉ែល
E-mail: <input type=”email” name=”email”>
បញ្ចូលប្រភេទខែ
Birthday (month and year): <input type=”month” name=”bdaymonth”>
បញ្ចូលប្រភេទចំនួន
Quantity (between 1 and 5): <input type=”number” name=”quantity” min=”1″ max=”5″>
បញ្ចូលប្រភេទជួរ
<input type=”range” name=”points” min=”1″ max=”10″>
បញ្ចូលប្រភេទស្វែងរក
Search Google: <input type=”search” name=”googlesearch”>
បញ្ចូលប្រភេទទូរស័ព្ទ
Telephone: <input type=”tel” name=”usrtel”>
បញ្ចូលប្រភេទពេលវេលា
Select a time: <input type=”time” name=”usr_time”>
បញ្ចូលប្រភេទURL
Add your homepage: <input type=”url” name=”homepage”>
បញ្ចូលប្រភេទសប្តាហ៍
Select a week: <input type=”week” name=”week_year”>
មេរៀន HTML5 Form Elements
HTML5 ថ្មីធាតុទម្រង់
HTML5 មានដូចខាងក្រោមធាតុសំណុំបែបបទថ្មី:
<datalist>
<keygen>
<output>
ចំណាំ: មិនមែនទាំងអស់ដែលមានកម្មវិធីរុករកដ៏ធំគាំទ្រទាំងអស់ធាតុសំណុំ បែបថ្មីនោះទេ។ ទោះជាយ៉ាងណាអ្នកអាចចាប់ផ្តើមរួចទៅហើយដោយប្រើប្រសិនបើពួក គេចូលប្រើមិនកើត ដូចជាវាលអត្ថបទមើលមិនឃើញ។
ធាតុ HTML5 <datalist>
ធាតុ <datalist> បញ្ជាក់បញ្ជីរបស់ជម្រើសដែលបានកំណត់ជាមុនសម្រាប់ធាតុ <input> មួយ។
ធាតុ <datalist> ត្រូវបានប្រើដើម្បីផ្ដល់នូវលក្ខណៈពិសេស “ស្វ័យប្រវត្តិ” នៅលើធាតុ <input> ។ អ្នកប្រើប្រាស់នឹងឃើញបញ្ជីនៃជម្រើសដែលបានកំណត់ជាមុនជាការ បញ្ចូលទិន្នន័យរបស់ពួកគេ។
ប្រើគុណលក្ខណៈបញ្ជីធាតុ <input> របស់វាទៅចងរួមគ្នាជាមួយធាតុមួយ <datalist> ។ របស់ OperaSafariChromeFirefox មានកម្មវិធីរុករក អ៊ិនធឺណិ ឧទាហរណ៏
ធាតុ <input> មួយជាមួយនឹងតម្លៃដែលបានកំណត់មុននៅក្នុង <datalist> មួយ:
<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
ធាតុ HTML5 <keygen>
គោលបំណងនៃធាតុ <keygen> នេះគឺដើម្បីផ្តល់ជាវិធីដ៏មានសុវត្ថិភាពដើម្បីផ្ទៀងផ្ទាត់ភាព ត្រឹមត្រូវរបស់អ្នកប្រើ។ ស្លាក <keygen> បញ្ជាក់វាលម៉ាស៊ីនភ្លើងគ្រាប់ចុចគូនៅក្នុងសំណុំបែបបទ។
សំណុំបែបបទជាមួយវាល keygen មួយ:
<form action=”demo_keygen.asp” method=”get”>
Username: <input type=”text” name=”usr_name”>
Encryption: <keygen name=”security”>
<input type=”submit”>
</form>
ធាតុ HTML5 <output>Encryption: <keygen name=”security”>
<input type=”submit”>
</form>
ធាតុ <output> តំណាងឱ្យលទ្ធផលនៃការគណនា (ដូចជាមួយដែលបានអនុវត្តដោយស្គ្រីប) មួយ។
របស់ OperaSafariChromeFirefox មានកម្មវិធីរុករកអ៊ិនធឺណិ
ឧទាហរណ៏
អនុវត្តការគណនាមួយនិងបង្ហាញលទ្ធផលនៅក្នុងធាតុ <output> ថា:
<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>0
<input type=”range” id=”a” value=”50″>100 +
<input type=”number” id=”b” value=”50″>=
<output name=”x” for=”a b”></output>
</form>
មេរៀន Form Attributes
HTML5 ថ្មីគុណលក្ខណៈទម្រង់
HTML5 មានគុណលក្ខណៈថ្មីជាច្រើនសម្រាប់ការ <form> និង <input> ។
គុណលក្ខណៈថ្មីសម្រាប់ <form>:
ស្វ័យប្រវត្តិ
novalidate
គុណលក្ខណៈថ្មីសម្រាប់ <input>:
-ស្វ័យប្រវត្តិHTML5 ថ្មីគុណលក្ខណៈទម្រង់
HTML5 មានគុណលក្ខណៈថ្មីជាច្រើនសម្រាប់ការ <form> និង <input> ។
គុណលក្ខណៈថ្មីសម្រាប់ <form>:
ស្វ័យប្រវត្តិ
novalidate
គុណលក្ខណៈថ្មីសម្រាប់ <input>:
-autofocus
-សំណុំបែបបទ
-formaction
-formenctype
-formmethod
-formnovalidate
-formtarget
-កម្ពស់និងទទឹង
-បញ្ជី
-នាទីនិងអតិបរមា
-ច្រើន
-លំនាំ (regexp)
-កន្លែងដាក់
-តម្រូវឱ្យមាន
-ក្នុងចម្ការ
-<form> / <input>ស្វ័យប្រវត្តិ
គុណលក្ខណៈស្វ័យប្រវត្តិបញ្ជាក់ថាតើវាលសំណុំបែបបទឬបញ្ចូលគួរតែ មាននៅលើស្វ័យប្រវត្តិបិទឬបើក។នៅពេលដែលស្វ័យប្រវត្តិគឺនៅលើ កម្មវិធីរុករកដោយស្វ័យប្រវត្តិតម្លៃពេញលេញដែលមានមូលដ្ឋានលើ តម្លៃដែលអ្នកប្រើបានមុនពេលដែលបានបញ្ចូល
ឧទាហរណ៏
មួយសំណុំបែបបទ HTML ជាមួយស្វ័យប្រវត្តិនៅលើ (និងបិទសម្រាប់វាលបញ្ចូលមួយ):
<form action=”demo_form.asp” autocomplete=”on”>
First name:<input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
E-mail: <input type=”email” name=”email” autocomplete=”off”><br>
<input type=”submit”>
</form>
-គុណលក្ខណៈ <form> novalidate
ឧទាហរណ៏
បង្ហាញថាទម្រង់គឺមិនត្រូវបានធ្វើឱ្យមានសុពលភាពនៅលើដាក់ជូន:
<form action=”demo_form.asp” novalidate>
E-mail: <input type=”email” name=”user_email”>
<input type=”submit”>
</form>
E-mail: <input type=”email” name=”user_email”>
<input type=”submit”>
</form>
គុណលក្ខណៈ <input> autofocus
នៅពេលបច្ចុប្បន្ននេះវាបញ្ជាក់ថាធាតុ
<input>
មួយដោយស្វ័យប្រវត្តិគួរទទួលបានការផ្តោតអារម្មណ៍នៅពេលដែលផ្ទុក
ទំព័រ។ របស់ OperaSafariChromeFirefox មានកម្មវិធីរុករកអ៊ិនធឺណិ
ឧទាហរណ៏
សូមឱ្យបាន “ឈ្មោះដំបូង” វាលបញ្ចូលដោយស្វ័យប្រវត្តិនៅពេលដែលទទួលបានផ្តោតការផ្ទុកទំព័រ:
First name:<input type=”text” name=”fname” autofocus>
ឧទាហរណ៏
សូមឱ្យបាន “ឈ្មោះដំបូង” វាលបញ្ចូលដោយស្វ័យប្រវត្តិនៅពេលដែលទទួលបានផ្តោតការផ្ទុកទំព័រ:
First name:<input type=”text” name=”fname” autofocus>
គុណលក្ខណៈសំណុំបែបបទ <input>
ឧទាហរណ៏
វាលបញ្ចូលមួយដែលមានទីតាំងស្ថិតនៅខាងក្រៅសំណុំបែបបទរបស់ HTML (ប៉ុន្តែនៅតែជាផ្នែកមួយនៃសំណុំបែបបទមួយ):
<form action=”demo_form.asp” id=”form1″>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
</form>
Last name: <input type=”text” name=”lname” form=”form1″>
គុណលក្ខណៈ formaction <input>
គុណលក្ខណៈ formaction បញ្ជាក់ URL
នៃឯកសារមួយដែលនឹងដំណើរការត្រួតពិនិត្យការបញ្ចូលនៅពេលដែលសំណុំ
បែបបទនេះត្រូវបានដាក់ជូន។ឧទាហរណ៏
វាលបញ្ចូលមួយដែលមានទីតាំងស្ថិតនៅខាងក្រៅសំណុំបែបបទរបស់ HTML (ប៉ុន្តែនៅតែជាផ្នែកមួយនៃសំណុំបែបបទមួយ):
<form action=”demo_form.asp” id=”form1″>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
</form>
Last name: <input type=”text” name=”lname” form=”form1″>
គុណលក្ខណៈ formaction <input>
គុណលក្ខណៈគុណលក្ខណៈ formaction បានបដិសេធសកម្មភាពនៃធាតុ <form> នេះ។
ឧទាហរណ៏
មួយសំណុំបែបបទ HTML ជាមួយពីរប៊ូតុងដាក់ស្នើដោយមានសកម្មភាពផ្សេងគ្នា:
<form action=”demo_form.asp”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit” value=”Submit”><br>
<input type=”submit” formaction=”demo_admin.asp”
value=”Submit as admin”>
</form>
គុណលក្ខណៈ <input> formenctype
គុណលក្ខណៈ formenctype បញ្ជាក់អំពីរបៀបដែលសំណុំបែបបទទិន្នន័យគួរតែត្រូវបានដាក់ស្នើនៅ ពេលដែលអ៊ីនកូដវាទៅម៉ាស៊ីនបម្រើ (សម្រាប់តែសំណុំបែបបទជាមួយវិធីសាស្ត្រ = “ប្រកាស”)
គុណ លក្ខណៈគុណលក្ខណៈ formenctype បដិសេធ enctype នៃធាតុ <form> នេះ។
ឧទាហរណ៏
<form action=”demo_post_enctype.asp” method=”post”>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
<input type=”submit” formenctype=”multipart/form-data”
value=”Submit as Multipart/form-data”>
</form>
គុណលក្ខណៈ <input> formmethod
គុណលក្ខណៈ formmethod កំណត់វិធីសាស្ត្រ HTTP សម្រាប់ការផ្ញើសំណុំបែបបទទិន្នន័យទៅជា URL សកម្មភាព។ គុណលក្ខណៈគុណលក្ខណៈ formmethod បដិសេធវិធីសាស្ត្រនៃធាតុ <form> នេះ។
ឧទាហរណ៏
<form action=”demo_form.asp” method=”get”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit” value=”Submit”>
<input type=”submit” formmethod=”post” formaction=”demo_post.asp”
value=”Submit using POST”>
</form>
គុណលក្ខណៈ <input> formnovalidate
គុណលក្ខណៈគុណលក្ខណៈ novalidate គឺជាប៊ូលីន។ នៅពេលបច្ចុប្បន្ននេះវាបញ្ជាក់ថាធាតុ <input> មិនគួរត្រូវបានធ្វើឱ្យមានសុពលភាពនៅពេលដែលត្រូវបានដាក់ស្នើ។
ឧទាហរណ៏
<form action=”demo_form.asp”>
E-mail: <input type=”email” name=”userid”><br>
<input type=”submit” value=”Submit”><br>
<input type=”submit” formnovalidate value=”Submit without validation”>
</form>
គុណលក្ខណៈ formtarget <input>
គុណលក្ខណៈ formtarget បញ្ជាក់ឈ្មោះឬពាក្យគន្លឹះដែលបានចង្អុលបង្ហាញកន្លែងដែលត្រូវ បង្ហាញការឆ្លើយតបដែលត្រូវបានទទួលបន្ទាប់ពីការដាក់ស្នើសំណុំ បែបបទនេះ។
ឧទាហរណ៏
<form action=”demo_form.asp”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit” value=”Submit as normal”>
<input type=”submit” formtarget=”_blank”
value=”Submit to a new window”>
</form>
<input> កម្ពស់និងទទឹងគុណលក្ខណៈ
គុណលក្ខណៈកម្ពស់និងទទឹងបញ្ជាក់កម្ពស់និងទទឹងនៃធាតុ <input> មួយ។
ឧទាហរណ៏
<input type=”image” src=”img_submit.gif” alt=”Submit” width=”48″ height=”48″>
គុណលក្ខណៈបញ្ជី <input>
បញ្ជីគុណលក្ខណៈនេះសំដៅទៅលើធាតុមួយ <datalist> ថាមានជម្រើសដែលបានកំណត់ជាមុនសម្រាប់ធាតុ <input> មួយ។
របស់ OperaSafariChromeFirefox មានកម្មវិធីរុករកអ៊ិនធឺណិ
ឧទាហរណ៏
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
<input> នាទីនិងអតិបរមាគុណលក្ខណៈ
នាទីនិងគុណលក្ខណៈអតិបរមាបញ្ជាក់តម្លៃអប្បរមានិងអតិបរមាសម្រាប់ធាតុ <input> មួយ។
ឧទាហរណ៏
Enter a date before 1980-01-01:
<input type=”date” name=”bday” max=”1979-12-31″>
Enter a date after 2000-01-01:
<input type=”date” name=”bday” min=”2000-01-02″>
Quantity (between 1 and 5):
<input type=”number” name=”quantity” min=”1″ max=”5″>
<input> គុណលក្ខណៈច្រើន
Select images: <input type=”file” name=”img” multiple>
គុណលក្ខណៈលំនាំ <input>
ឧទាហរណ៏
Country code: <input type=”text” name=”country_code” pattern=”[A-Za-z]{3}” title=”Three letter country code”>
គុណលក្ខណៈកន្លែងដាក់ <input>
<input type=”text” name=”fname” placeholder=”First name”>
<input> គុណលក្ខណៈដែលបានទាមទារ
Username: <input type=”text” name=”usrname” required>
គុណលក្ខណៈជំហាន <input>
<input type=”number” name=”points” step=”3″>
ឧទាហរណ៏
Country code: <input type=”text” name=”country_code” pattern=”[A-Za-z]{3}” title=”Three letter country code”>
គុណលក្ខណៈកន្លែងដាក់ <input>
<input type=”text” name=”fname” placeholder=”First name”>
<input> គុណលក្ខណៈដែលបានទាមទារ
Username: <input type=”text” name=”usrname” required>
គុណលក្ខណៈជំហាន <input>
<input type=”number” name=”points” step=”3″>
មេរៀន HTML5 Semantic Elements
តើធាតុ Semantic អ្វីជា និងមានអ្វីខ្លះ?ធាតុ semantic យ៉ាងច្បាស់ពណ៌នាពីអត្ថន័យរបស់វាទៅកម្មវិធីរុករកទាំងពីរនិងការអភិវឌ្ឍ។
ឧទាហរណ៏នៃការ មិនមែន-semantic ធាតុ: <div> និង <span> – សុំអ្វីបន្តិចសោះអំពីមាតិការបស់វា។
ឧទាហរណ៏នៃការ semantic ធាតុ: <form>, <table> និង <img> – ច្បាស់កំណត់មាតិការបស់វា។
Semantic ធាតុថ្មីនៅក្នុង HTML5
មនុស្សជាច្រើននៃតំបន់បណ្ដាញដែលមានស្រាប់នាពេលបច្ចុប្បន្ននេះ មានកូដ HTML ដូចនេះ: <div id=”nav”>, <div> ឬ <div id=”footer”> ដើម្បីចង្អុលបង្ហាញតំណការណែនាំ, បឋមកថានិងបាតកថា។ HTML5 ផ្តល់នូវធាតុ semantic ថ្មីដើម្បីកំណត់យ៉ាងច្បាស់នូវភាពខុសគ្នាផ្នែកនៃទំព័របណ្ដាញ:
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
ធាតុ HTML5 <section>
ធាតុ <section> កំណត់ផ្នែកនៅក្នុងឯកសារមួយ។
ឧទាហរណ៏
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is….</p>
</section>
ធាតុ HTML5 <article>
ធាតុ <article> បញ្ជាក់ឯករាជ្យមាតិកាខ្លួនឯងមាន។
ឧទាហរណ៏មួយនៃកន្លែងដែលធាតុ <article> មួយដែលអាចត្រូវបានប្រើ:
-ការប្រកាសវេទិកា
-ការប្រកាសកំណត់ហេតុបណ្ដាញ
-រឿងរ៉ាវពត៌មាន
-Comment
ឧទាហរណ៏
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT…..</p>
</article>
ធាតុ HTML5 <nav>
ធាតុ <nav> កំណត់សំណុំនៃតំណរុករក។
ធាតុ <nav> ត្រូវបានបម្រុងទុកសម្រាប់ប្លុកដ៏ធំនៃតំណរុករក។ ទោះជាយ៉ាងណាមិនមែនជាតំណភ្ជាប់ទាំងអស់នៅក្នុងឯកសារមួយដែលគួរ តែមាននៅខាងក្នុងធាតុ <nav> មួយ!
ឧទាហរណ៏
<nav>
<a href=”/html/”>HTML</a> |
<a href=”/css/”>CSS</a> |
<a href=”/js/”>JavaScript</a> |
<a href=”/jquery/”>jQuery</a>
</nav>
ធាតុ HTML5 <aside>
ធាតុ <aside> កំណត់មាតិកាមួយចំនួនឡែកពីមាតិកាដែលវាត្រូវបានដាក់ក្នុង (ដូចជារបារចំហៀងមួយ) នោះទេ។
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
ធាតុ HTML5 <header>
ធាតុ <header> បញ្ជាក់បឋមកថាសម្រាប់ឯកសារមួយឬជាផ្នែកមួយ។
ធាតុ <header> គួរតែត្រូវបានប្រើជាឧបករណ៍ផ្ទុកសម្រាប់ការមាតិកាណែនាំមួយ។
អ្នកអាចមានធាតុ <header> មួយចំនួននៅក្នុងឯកសារមួយ។
ឧទាហរណ៏
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime=”2011-03-15″></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT…..</p>
</article>
ធាតុ HTML5 <footer>
ធាតុ <footer> បញ្ជាក់បាតកថាសម្រាប់ឯកសារមួយឬជាផ្នែកមួយ។
ធាតុ <footer> មួយគួរតែមានព័ត៌មានអំពីធាតុដែលមានរបស់វា។
ឧទាហរណ៏
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime=”2012-03-01″></time></p>
</footer>
<figure> HTML5 និងធាតុ <figcaption>
ស្លាក <figure> បញ្ជាក់មាតិកាខ្លួនឯងមានដូចជា Illustrator, ដ្យាក្រាម, រូបថត, បញ្ជីលេខកូដល
ខណៈពេលដែលមាតិកានៃធាតុ <figure> ត្រូវបានទាក់ទងទៅនឹងលំហូរមេជំហររបស់ខ្លួនគឺឯករាជ្យនៃលំហូរមេ ហើយប្រសិនបើបានយកចេញវាមិនគួរប៉ះពាល់ដល់លំហូរនៃឯកសារ។
ឧទាហរណ៏
<figure>
<img src=”img_pulpit.jpg” alt=”The Pulpit Rock” width=”304″ height=”228″>
<figcaption>Fig1. – The Pulpit Pock, Norway.</figcaption>
</figure>
ចាប់ផ្តើមដោយការប្រើធាតុ Semantic ទាំងនេះ?
ធាតុផ្សំដែលបានពន្យល់ខាងលើគឺជាធាតុទាំងអស់ប្លុក (លើកលែងតែ <figcaption>) ។
header, section, footer, aside, nav, article, figure
{
display: block;
}
មានបញ្ហាជាមួយនឹងកម្មវិធីរុករកអ៊ិនធឺណិ 8 និងមុននេះ
IE8 និងមុននេះមិនដឹងពីរបៀបដើម្បីបង្ហាញជា CSS នៅលើធាតុដែលវាមិនស្គាល់។ អ្នកអាច <header> រចនាប័ទ្មមិន <section>, <footer>, <aside>, <nav>, <article>, <figure> ឬធាតុផ្សេងទៀត HTML5 ថ្មី។
ដើម្បីបើក HTML5 Shiv (បន្ទាប់ពីទាញយក) បញ្ចូលលេខកូដដូចខាងក្រោមចូលទៅក្នុងធាតុ <head> ថា:
<!–[if lt IE 9]>
<script src=”html5shiv.js”></script>
<![endif]–>
មេរៀន HTML5 Web Storage
HTML5 បណ្តាញគឺជាអ្វី?
ជាមួយនឹង HTML5 ទំព័របណ្តាញអាចរក្សាទុកក្នុងមូលដ្ឋានទិន្នន័យនៅក្នុងកម្មវិធីរុករករបស់អ្នកប្រើ។
localStorage និង sessionStorage
វាមានពីរវត្ថុថ្មីសម្រាប់រក្សាទុកទិន្នន័យនៅលើម៉ាស៊ីន ភ្ញៀវគឺ: localStorage – ទិន្នន័យហាងដែលមានកាលបរិច្ឆេទផុតកំណត់មិនមាន
sessionStorage – ទិន្នន័យហាងលក់សម្រាប់សម័យមួយមុនពេលប្រើការផ្ទុកបណ្ដាញពិនិត្យ មើលការគាំទ្រសម្រាប់កម្មវិធីរុករក localStorage និង sessionStorage:
if(typeof(Storage)!==”undefined”)
{
// Yes! localStorage and sessionStorage support!
// Some code…..
}
else
{
// Sorry! No web storage support..
}
វត្ថុ localStorage
វត្ថុ localStorage រក្សាទុកទិន្នន័យដែលមានកាលបរិច្ឆេទផុតកំណត់ទេ។ ទិន្នន័យនេះនឹងមិនត្រូវបានលុបនៅពេលដែលកម្មវិធីរុករកត្រូវបាន គេបិទហើយនឹងអាចរកបាននៅថ្ងៃបន្ទាប់ក្នុងសប្តាហ៍ឬឆ្នាំ។
ឧទាហរណ៏
localStorage.lastname=”Smith”;
document.getElementById(“result”).innerHTML=”Last name: ”
+ localStorage.lastname;
ឩទាហរណ៍បានពន្យល់ថា:
បង្កើត គូ កូនសោ / តម្លៃ localStorage ជាមួយនឹងកូនសោ = “lastname” តម្លៃនិង = “ស្ម៊ីធ”
ទៅយក តម្លៃនៃគ្រាប់ចុច “lastname” ហើយបញ្ចូលវាទៅក្នុងធាតុដែលមានលេខសម្គាល់ = “លទ្ធផល”
ព័ត៌មានជំនួយ: គូសោ / តម្លៃត្រូវបានរក្សាទុកជាខ្សែអក្សរ។ ចងចាំបម្លែងពួកវាទៅជាទ្រង់ទ្រាយមួយផ្សេងទៀតនៅពេលដែលចាំបាច់។
ឧទាហរណ៏
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById(“result”).innerHTML=”You have clicked the button ” + localStorage.clickcount + ” time(s).”;
វត្ថុ sessionStorage
វត្ថុ sessionStorage គឺមានចំនួនស្មើទៅនឹងវត្ថុ localStorage, លើកលែងតែ ថាវារក្សាទុកទិន្នន័យសម្រាប់តែសម័យមួយប៉ុណ្ណោះ។ ទិន្នន័យនឹងត្រូវបានលុបនៅពេលដែលអ្នកប្រើបិទបង្អួចកម្មវិធី រុករក។
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById(“result”).innerHTML=”You have clicked the button ” + sessionStorage.clickcount + ” time(s) in this session.”;
មេរៀន HTML5 Application Cache
HTML5 ណែនាំឃ្លាំងសម្ងាត់កម្មវិធីដែលមានន័យថាកម្មវិធីដែលតំបន់បណ្ដាញ មួយនេះត្រូវបានដាក់ហើយអាចចូលដំណើរការដោយគ្មានការតភ្ជាប់អ៊ី ធឺណិត។
ឃ្លាំងសម្ងាត់កម្មវិធីដែលផ្តល់នូវកម្មវិធីមួយទាំងបីគុណសម្បត្តិ:
-រកមើលក្រៅបណ្ដាញ – អ្នកប្រើប្រាស់អាចប្រើកម្មវិធីនៅពេលដែលពួកគេស្ថិតនៅក្រៅបណ្ដាញ
-ល្បឿន – ដាក់ក្នុងឃ្លាំងសម្ងាត់ធនធានផ្ទុកលឿនជាងមុន
-កាត់បន្ថយការផ្ទុកម៉ាស៊ីនបម្រើ – កម្មវិធីរុករកតែប៉ុណ្ណោះនឹងត្រូវទាញយកធនធានដែលបានធ្វើឱ្យ ទាន់សម័យ / ផ្លាស់ប្តូរពីម៉ាស៊ីនបម្រើ
ឩទាហរណ៍ HTML5 សម្ដែង Cache
ឧទាហរណ៏
<!DOCTYPE HTML>
<html manifest=”demo.appcache”>
<body>
The content of the document……
</body>
</html>
សម្ដែងមូលដ្ឋាន Cache
ឃ្លាំងសម្ងាត់ដើម្បីបើកកម្មវិធីដែលមានរួមបញ្ចូលគុណលក្ខណៈសម្ដែងនៅក្នុងស្លាក <html> របស់ឯកសារនេះ:
<!DOCTYPE HTML>
<html manifest=”demo.appcache”>
…
</html>
បង្ដើតថ្មីឃ្លាំងសម្ងាត់
នៅពេលដែលកម្មវិធីនេះត្រូវបានដាក់ក្នុងឃ្លាំងសម្ងាត់នេះវានៅតែមានរហូតដល់មួយដូចខាងក្រោមដែលកើតឡើងនៅ:
-អ្នកប្រើដែលជម្រះឃ្លាំងសម្ងាត់កម្មវិធីរុករករបស់
-ឯកសារសម្ដែងនេះត្រូវបានកែប្រែ (សូមមើលចំណុចខាងក្រោម)
-ឃ្លាំងសម្ងាត់កម្មវិធីនេះត្រូវបានធ្វើឱ្យទាន់សម័យកម្មវិធី
ឧទាហរណ៏
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
មេរៀន HTML5 Web Workers
បណ្ដាញ Web Workersគឺជាអ្វី?
នៅពេលដែលការប្រតិបត្តិស្គ្រីបនៅក្នុងទំព័រ HTML មួយទំព័រដែលបានក្លាយជាព្រងើយកន្តើយរហូតដល់ស្គ្រីបដែលត្រូវ បានបញ្ចប់។ បុគ្គលិក បណ្តាញ គឺជាការអនុញ្ញាត JavaScript ដែលរត់ក្នុងផ្ទៃខាងក្រោយដែលឯករាជ្យរបស់ស្គ្រីបរបស់អ្នកផ្សេងទៀត ដោយមិនបង្កផលប៉ះពាល់ដល់ការអនុវត្តនៃទំព័រនេះ។ អ្នកអាចបន្តធ្វើអ្វីដែលអ្នកចង់បាន: ចុចជ្រើសអ្វីលខណៈពេលដែលWeb Workers រត់ក្នុងផ្ទៃខាងក្រោយ។
HTML5 បណ្តាញឧទហរណ៍
Count numbers:
ពិនិត្យមើលការគាំទ្រWeb Workers
បុគ្គលិកមុនពេលការបង្កើតបណ្តាញមួយដែលពិនិត្យមើលថាតើកម្មវិធីរុករករបស់អ្នកប្រើគាំទ្រវា:
if(typeof(Worker)!==”undefined”)
{
// Yes! Web worker support!
// Some code…..
}
else
{
// Sorry! No Web Worker support..
}
បង្កើតឯកសារWeb Workers
ឥឡូវនេះអនុញ្ញាតឱ្យបុគ្គលិករបស់លោកបង្កើតបណ្ដាញរបស់ ពួកយើងនៅក្នុងការអនុញ្ញាត JavaScript ខាងក្រៅ។ នៅទីនេះយើងបង្កើតស្គ្រីបដែលរាប់បមួយ។ ស្គ្រីបគឺត្រូវបានទុកនៅក្នុងឯកសារ “demo_workers.js”:
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout(“timedCount()”,500);
}
timedCount();
បង្កើតវត្ថុWeb Workers
ឥឡូវពួកយើងមានឯកសារបណ្តាញកម្មករដែលយើងត្រូវការដើម្បីហៅវាពីទំព័រ HTML មួយ។
បន្ទាត់ដូចខាងក្រោមពិនិត្យប្រសិនបើបុគ្គលិកដែលមានរួចហើយ ប្រសិនបើមិនបាន – វាបង្កើតជាបណ្តាញវត្ថុថ្មីបុគ្គលិកនិងការរត់កូដនៅក្នុង “demo_workers.js” នេះ:
if(typeof(w)==”undefined”)
{
w=new Worker(“demo_workers.js”);
}
ការផ្តាច់Web Workers
នៅពេលដែលវត្ថុបុគ្គលិកបណ្តាញត្រូវបានបង្កើតវានឹងបន្ត ដើម្បីស្តាប់សម្រាប់សារ (សូម្បីតែបន្ទាប់ពីស្គ្រីបខាងក្រៅត្រូវបានបញ្ចប់) រហូតដល់វាត្រូវបានបញ្ចប់។
ដើម្បីបញ្ឈប់បុគ្គលិកបណ្តាញនិងធនធានរបស់កម្មវិធីរុករក / កុំព្យូទ័រឥតគិតថ្លៃប្រើបញ្ចប់ () វិធីសាស្ដ្រ:
w.terminate();
កូដឧទាហរណ៍ពេញ
យើងបានឃើញរួចហើយកូដកម្មករនៅក្នុងនោះ។ ឯកសារ js ។ ខាងក្រោមនេះជាកូដសម្រាប់ទំព័រ HTML គឺ:
ឧទាហរណ៏
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id=”result”></output></p>
<button onclick=”startWorker()”>Start Worker</button>
<button onclick=”stopWorker()”>Stop Worker</button>
<br><br>
<script>
var w;
function startWorker()
{
if(typeof(Worker)!==”undefined”)
{
if(typeof(w)==”undefined”)
{
w=new Worker(“demo_workers.js”);
}
w.onmessage = function (event) {
document.getElementById(“result”).innerHTML=event.data;
};
}
else
{
document.getElementById(“result”).innerHTML=”Sorry, your browser does not support Web Workers…”;
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
0 comments:
Post a Comment