មេរៀនទី២៣: មេរៀនសង្ខេប Syntax ក្នុង HTML5

អ្វីទៅជា HTML5? កម្មវិធី C + + ដែលគោលកម្មវិធីស្នូលនៃ HTML5 ការលំបាកសម្រាប់ការចាប់ផ្តើម រៀនកម្មវិធីនេះ គឺ មិនស្មុគស្មាញជាង HTML នោះទេ។ កម្មវិធី HTML5 គឺជាការជាកម្មវិធីកែត ម្រូវឡើង វិញដ៏ធំមួយបន្ទាប់នៃស្តង់ដារ HTML ដែល HTML 4,01, ប្ដូរ XHTML 1.0 ហើយប្ដូរ XHTML 1.1 ។ ក្រោយមកដាក់ជា HTML5 គឺជាស្តង់ដារសម្រាប់ការរចនាសម្ព័ន្ធ និងការបង្ហាញមាតិកា នៅ លើបណ្តាញទូទាំងពិភពលោក។ កម្មវិធី HTML5 គឺជាកិច្ចសហ ប្រតិបត្តិការរវាង សម្ព័ន្ធបណ្ដាញទូទាំងពិភពលោក (W3C) និង បណ្តាញ Hypertext កម្មវិធីបច្ចេកវិទ្យាក្រុមការងារ (WHATWG) មួយ។ ស្តង់ដារថ្មី មួយទៀតមានលក្ខណៈពិសេស ដូចជា អាចចាក់វីដេអូនិង អូសនិងដាក់បាន Adobe Flash, កម្មវិធី ក្រុមហ៊ុន Microsoft Silverlight និង Gear របស់ Google ។

ការគាំទ្រកម្មវិធីរុករក Browser Support: កំណែចុងក្រោយបំផុតរបស់ក្រុមហ៊ុន Apple Safari, Google Chrome, មាន Mozilla Firefox មាននិងលក្ខណៈពិសេសរបស់ Opera ទាំងអស់ HTML5 ការគាំទ្រជាច្រើន ក្នុងការរុករកតាមប្រព័ន្ធអ៊ីនធីណែតដោយប្រើ HTML5។ កម្មវិធីរុករកបណ្តាញទូរស័ព្ទចល័តដែល បានដំឡើងនៅលើ iPhones, iPad និងទូរស័ព្ទប្រព័ន្ធប្រតិបត្តិការ Android ទាំងអស់ដែលមានការគាំទ្រល្អប្រសើ ជាមួយ HTML5

HTML5 Syntax   HTML ដែលមាន 5 ភាសា “ផ្ទាល់ខ្លួន” វាក្យសម្ព័ន្ធគឺជា HTML ជាមួយនឹងជា HTML 4 និង XHTML1  ប៉ុន្ដែ ជាមួយ HTML5 ច្រើននិងមានភាពបត់បែននឹងគាំទ្រដូចខាងក្រោម:
The DOCTYPE:
HTML 5 ប្រើវាក្យសម្ព័ន្ធសាមញ្ញាដើម្បីបញ្ជាក់ DOCTYPE ដូចខាងក្រោម:

 Character Encoding:

The

HTML 5 បន្ថែមពត៌មាននិងការទាមទារឱ្យមាន អ្នកអាចប្រើវាក្យសម្ព័ន្ធដែលមាន ដូចខាងក្រោមនេះ:

The tag:
So far you were writing as follows:

HTML5 ពត៌មានបន្ថែមនិងការទាមទារឱ្យមានអ្នក អាចប្រើវាក្យសម្ព័ន្ធដែលមាន ដូចខាងក្រោមនេះ:

HTML5 Elements: Following is the example of an HTML5 element:

...

HTML5 Attributes:

...

The markup for an HTM 5 document would look like the following:

  
...

  
...

      ...

  
...

  
...

មេរៀន   HTML5 Attributes
ខាងក្រោមនេះគឺជាឧទាហរណ៍មួយនៃ លក្ខណៈ HTML5  ដែលបង្ហាញពីរបៀប ដើម្បីសម្គាល់ធាតុ div ឡើងមួយជាមួយ នឹង លក្ខណៈ ដោយប្រើតម្លៃនៃ “ឧទាហរណ៍” ខាងក្រោម:

...

Standard Attributes:
The attributes listed below are supported by almost all the HTML 5 tags.

Attribute	Options	Function
accesskey	User Defined	បញ្ជាក់ផ្លូវកាត់ក្ដារចុចមួយដើម្បីចូលដំណើរការជាធាតុមួយ។
align	right, left, center	តម្រឹមផ្ដេក tags
background	URL	ដាក់​​រូបភាពផ្ទៃខាងក្រោយមួយដែលនៅពីក្រោយធាតុមួយ
bgcolor	numeric, hexidecimal, RGB values	ដាក់​​ពណ៌ផ្ទៃខាងក្រោយមួយដែលនៅពីក្រោយធាតុមួយ
class	User Defined	Classifies ធាតុសម្រាប់ប្រើជាមួយល្បាក់សន្លឹករចនាប័ទ្មមួយ។
contenteditable	true, false	បញ្ជាក់ប្រសិនបើអ្នកប្រើមិនអាចកែសម្រួលមាតិកាធាតុ នោះទេ។
contextmenu	Menu id	បញ្ជាក់ម៉ឺនុយ សម្រាប់ធាតុមួយ។
data-XXXX	User Defined	ឯកសារ HTML ដែលអាចកំណត់លក្ខណៈផ្ទាល់ខ្លួនរបស់វា ត្រូវតែចាប់ ផ្ដើមដោយ “ទិន្នន័យ” ។
draggable	true,false, auto	បញ្ជាក់ថាតើអ្នកប្រើបានឬមិនត្រូវបានអនុញ្ញាតអោយទាញ ធាតុមួយ
height	Numeric Value	Specifies the height of tables, images, or table cells.
hidden	hidden	Specifies whether element should be visible or not.
id	User Defined	Names an element for use with Cascading Style Sheets.
item	List of elements	ត្រូវបានប្រើដើម្បីធាតុក្រុម
itemprop	List of items	ធាតុដែលបានប្រើដើម្បីជាក្រុម
spellcheck	true, false	Specifies if the element must have it’s spelling or grammar checked.
style	CSS Style sheet	Specifies an inline style for an element.
subject	User define id	Specifies the element’s corresponding item.
tabindex	Tab number	បញ្ជាក់លំដាប់នៃធាតុ មួយ
title	User Defined	“Pop-up” title for your elements.
valign	top, middle, bottom	បញ្ឈរតម្រឹមស្លានៅក្នុងធាតុរបស់ HTML មួយ
width	Numeric Value	Specifies the width of tables, images, or table cells.

Custom Attributes:

...

មេរៀន HTML5  SVG
Embeding SVG in HTML5
 HTML5 allows embeding SVG directly using tag which has following simple syntax:

...

HTML5 – SVG Circle រង្វង់
Following is the HTML5 version of an SVG example which would draw a cricle using tag:

HTML5 SVG Circle

This would produce following result in HTML5 enabled latest version of Firefox.

HTML5 – SVG Rectangle ចតុកោណកែង
Following is the HTML5 version of an SVG example which would draw a rectangle using tag:

HTML5 SVG Rectangle

This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 – SVG Line បន្ទាត់
Following is the HTML5 version of an SVG example which would draw a line using tag:

HTML5 SVG Line

    
          style="stroke:red;stroke-width:2"/>

This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 – SVG Ellipse អេលីប
Following is the HTML5 version of an SVG example which would draw an ellipse using tag:

HTML5 SVG Ellipse

This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 – SVG Polygon ពហុកោណ
Following is the HTML5 version of an SVG example which would draw a polygon using tag:

HTML5 SVG Polygon

This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 – SVG Polyline ពហុបន្ទាត់
Following is the HTML5 version of an SVG example which would draw a polyline using tag:

HTML5 SVG Polyline

This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 – SVG Gradients ពណ៌ជម្រាល
ខាងក្រោមនេះគឺជាកំណែ HTML5 របស់ SVG ឧទហរណ៍មួយដែលនឹងគូររាងពងក្រពើដោយប្រើស្លាក មួយហើយនឹងប្រើស្លាក ដើម្បីកំណត់មួយជម្រាលមូល SVG
Similar way you can use tag to create SVG linear gradient.

HTML5 SVG Gradient Ellipse

      
      fx="50%" fy="50%">
      
      
      

   
      style="fill:url(#gradient)" />

his would produce following result in HTML5 enabled latest version of Firefox.
មេរៀន HTML5  MathML
វាក្យសម្ព័ន្ធ HTML របស់ HTML5 អនុញ្ញាតឱ្យសម្រាប់ធាតុ MathML ត្រូវបានប្រើនៅខាងក្នុងឯកសារដោយប្រើ $\dots ស្លាកមួយ។\; ភាគច្រើននៃកម្មវិធីរុករក\; បណ្ដាញអាចបង្ហាញស្លាក\; MathML\; ។\; ប្រសិនបើកម្មវិធីរុករករបស់អ្នកមិនគាំទ្រការ\; MathML\; នោះអ្នក\; ប្រើកម្មវិធី\; Firefox\; ចុងក្រោយបំផុត។$
MathML Examples:
Following is a valid HTML5 document with MathML:

    $$

        a2

        +

        b2

        =

        c2

This would produce following result:

Using MathML Characters:
Consider, following is the markup which makes use of the characters ⁢:

    $$

                x

                2

             +

                4

                ⁢

                x

             +

             4

             =

             0

Matrix Presentation Examples:
Consider the following example which would be used to represent a simple 2×2 matrix:

    $$

          A

          =

                   x

                   y

                   z

                   w

មេរៀន HTML5 – Web Storage
HTML5 ណែនាំ ស្រដៀងទៅនឹង HTTP សម្រាប់រក្សាទុកទិន្នន័យដែលមាន រចនាសម្ព័ន្ធនៅ ផ្នែកខាងម៉ាស៊ីននិងដើម្បីការពារ។ Cookies ត្រូវបានកំណត់ទៅប្រមាណ 4 គីឡូបៃនៃទិន្នន័យ។
Session Storage:
Following is the code which would set a session variable and access that variable:

  Refresh the page to increase number of hits.

  Close the window and open it again and check the result.

Local Storage:
Following is the code which would set a local storage variable and access that variable every time this page is accessed, even next time when you open the window:

Refresh the page to increase number of hits. Close the window and open it again and check the result.

Delete Web Storage:
Following is the code which would clear complete local storage:

Refreshing the page would not to increase hit counter. Close the window and open it again and check the result.

មេរៀន HTML5 – Web SQL Database
មូលដ្ឋានទិន្នន័យ SQL API គឺមិនមែនជាពិតជាផ្នែកមួយនៃការបញ្ជាក់ HTML5 នោះទេប៉ុន្តែវាគឺជាការបញ្ជាក់ដាច់ដោយឡែកដែលបានណែនាំសំណុំនៃ APIs ដើម្បីរៀបចំមូលដ្ឋានទិន្នន័យផ្នែកខាងម៉ាស៊ីន client​ ដោយប្រើ SQL ។
Opening Database:
The openDatabase method takes care of opening a database if it already exists, this method will create it if it already does not exist.
ដើម្បីបង្កើតនិងបើកមូលដ្ឋានទិន្នន័យមួយដែលប្រើកូដដូចខាងក្រោម:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Executing queries: To execute a query you use the database.transaction() function. This function needs a single argument, which is a function that takes care of actually executing the query as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {

   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

});

INERT Operation:
To create enteries into the table we add simple SQL query in the above example as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {

   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');

});

We can pass dynamic values while creating entering as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {

  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

  tx.executeSql('INSERT INTO LOGS

                        (id,log) VALUES (?, ?'), [e_id, e_log];

});

READ Operation:
To read already existing records we use a callback to capture the results as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {

   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');

});

db.transaction(function (tx) {

   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {

   var len = results.rows.length, i;

   msg = "Found rows: " + len + "

";

   document.querySelector('#status').innerHTML +=  msg;

   for (i = 0; i < len; i++){

      alert(results.rows.item(i).log );

   }

 }, null);

});

Final Example:
So finally, let us keep this example in full fledged HTML5 document as follows and try to run it with Safari browser.

Status Message

This would produce following result with latest version of either Safari or Opera:

Log message created and row inserted.Found rows: 2foobar logmsg

មេរៀន HTML5 – Server Sent Events
កម្មវិធីបណ្ដាញសាមញ្ញបង្កើតព្រឹត្តិការណ៍ដែលត្រូវបានបញ្ជូនទៅកាន់ម៉ាស៊ីនបម្រើបណ្ដាញ។ ឧទាហរណ៍ការចុចលើតំណសាមញ្ញមួយ requests ពីទំព័រថ្មីពីម៉ាស៊ីនមេ។
Web Application for SSE:
ដើម្បីប្រើម៉ាស៊ីន Server-Sent Events ត្រូវបានបញ្ជូនព្រឹត្តិការណ៍និងសកម្មភាពនៅក្នុងកម្មវិធី បណ្តាញមួយដែលអ្នកនឹងត្រូវការដើម្បីបន្ថែមធាតុមួយ ទៅឯកសារ។

Server Side Script for SSE:
A server side script should send Content-type header specifying the type text/event-stream as follows.

print "Content-Type: text/event-stream\n\n";

Handle Server-Sent Events:
Let us modify our web application to handle server-sent events. Following is the final example.

[TIME]



មេរៀន HTML5  WebSockets
WebSockets គឺជាបច្ចេកវិទ្យាទំនាក់ទំនងបន្ទាប់ជំនាន់ទ្វេទិសតំបន់បណ្តាញសម្រាប់កម្មវិធីដែលដំណើរការនៅ លើទិសតែមួយនិងត្រូវបានលាតត្រដាងតាមរយៈចំណុចប្រទាក់ប្រើ JavaScript ក្នុង HTML 5 កម្មវិធីរុករកដែលត្រាប់តាម។

var Socket = new WebSocket(url, [protocal] );

WebSocket Events:
Following are the events associated with WebSocket object. Assuming we created Socket object as mentioned above:

Event	Event Handler	Description
open	Socket.onopen	This event occurs when socket connection is established.
message	Socket.onmessage	This event occurs when client receives data from server.
error	Socket.onerror	This event occurs when there is any error in communication.
close	Socket.onclose	This event occurs when connection is closed.

WebSocket Methods:
Following are the methods associated with WebSocket object. Assuming we created Socket object as mentioned above:

Method	Description
Socket.send()	The send(data) method transmits data using the connection.
Socket.close()	The close() method would be used to terminate any existing connection.

Client Side HTML & JavaScript Code:
At the time of writing this tutorial, there are only few web browsers supporting WebSocket() interface. You can try following example with latest version of Chrome, Mozilla, Opera and Safari.

   Run WebSocket

មេរៀន HTML5 – Canvas
ធាតុ HTML5 ផ្ដល់ឱ្យអ្នកនូវវិធីងាយស្រួលនិងមានអានុភាពដើម្បីគូរក្រាហ្វិកដោយប្រើការអនុញ្ញាត JavaScript ។ វាអាចត្រូវបានប្រើដើម្បីគូរក្រាហ្វិក, ធ្វើឱ្យសមាសភាពរូបថតឬធ្វើចលនា។

You can easily find that element in the DOM using getElementById() method as follows:

var canvas  = document.getElementById(“mycanvas”);

Let us see a simple example on using element in HTML5 document.




The Rendering Context:
ollowing is the code to get required context along with a check if your browser supports element:

var canvas  = document.getElementById(“mycanvas”);if (canvas.getContext){var ctx = canvas.getContext(’2d’); // drawing code here } else { // canvas-unsupported code here }

Browser Support
The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8 does not support canvas natively.

មេរៀន HTML5 – Audio & Video
លក្ខណៈពិសេស HTML5, រួមបញ្ចូលអូឌីយ៉ូ និងការគាំទ្រវីដេអូដោយមិនចាំបាច់ប្រើ Flash។
Embedding Video:
Here is the simplest form of embedding a video file in your webpage:

You can use tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format:

Your browser does not support the

Embedding Audio:
HTML5 supports

Following is the example which allows to play the given video:

Your browser does not support the





មេរៀន HTML5 – Geolocation
HTML5 Geolocation API អនុញ្ញាតឱ្យអ្នកចែករំលែកទីតាំងរបស់អ្នកជាមួយនឹងតំបន់ បណ្ដាញចំណូលចិត្តរបស់អ្នក។ ដើម្បីអាចចាប់យក latitude និង longitude របស់អ្នកនិង ត្រូវបានផ្ញើទៅម៉ាស៊ីនមេ តាមបណ្ដាញ។

var geolocation = navigator.geolocation;

Example:
Following is a sample code to use any of the above method:

function getLocation() {var geolocation = navigator.geolocation;geolocation.getCurrentPosition(showLocation, errorHandler); }

Example:
Following is a sample code which makes use of Position object. Here showLocation method is a callback method:

function showLocation( position ) {var latitude = position.coords.latitude;var longitude = position.coords.longitude; … }

មេរៀន HTML5 Microdata
Microdata អនុញ្ញាតឱ្យអ្នកកំណត់ធាតុផ្ទាល់ខ្លួនរបស់អ្នកហើយចាប់ផ្តើមបង្កប់ លក្ខណៈសម្បត្តិផ្ទាល់ ខ្លួននៅក្នុងទំព័រតំបន់បណ្ដាញរបស់អ្នក។ នៅកម្រិតខ្ពស់មួយ microdata មានក្រុមនៃគូឈ្មោះតម្លៃមួយ។
Here there are two items, each of which has the property “name”:

My name is Zara. My name is Nuha.

Properties Datatypes: Properties generally have values that are strings as mentioned in above example but they can also have values that are URLs. Following example has one property, “image”, whose value is a URL:
Properties can also have values that are dates, times, or dates and times. This is achieved using the time element and its datetime attribute.

My birthday is: Aug 5th 1971

Microdata API support: If a browser supports the HTML5 microdata API, there will be a getItems() function on the global document object. If browser doesn’t support microdata, the getItems() function will be undefined.

function supports_microdata_api() {return !!document.getItems;}

Using about properties a person microdata could be as follows:

Andy Runie My Blog

មេរៀន HTML5 Drag and drop
Drag and Drop (DnD) គឺជាអ្នកប្រើគំនិតដ៏មានអនុភាពចំណុចប្រទាក់ដែលធ្វើឱ្យវាងាយស្រួលក្នុងការចម្លង reorder និងការលុបធាតុដោយមានជំនួយពីការចុចកណ្តុរ។ នេះអនុញ្ញាតឱ្យអ្នកប្រើដើម្បីចុច និង សង្កត់ប៊ូតុងកណ្ដុរចុះពីលើធាតុ មួយអូសវាទៅទីតាំងមួយផ្សេងទៀតនិង លែងប៊ូតុងកណ្ដុរ ក្នុងការទម្លាក់ធាតុនៅទីនោះ។
The DataTransfer Object:
The event listener methods for all the drag and drop events accept Event object which has a readonly attribute called dataTransfer. The event.dataTransfer returns DataTransfer object associated with the event as follows:

function EnterHandler(event) {DataTransfer dt = event.dataTransfer;…………. }

Drag and Drop Process:
Following are the steps to be carried out to implement Drag and Drop operation:
Step 1: Making an Object Draggable:
Following is the example to make an object dragable:

Drag and drop HTML5 demo

Try to drag the purple box around.

ondragstart=”return dragStart(event)”>
Drag Me

Dustbin

Step 2: Dropping the Object:
Following is the example to drop an object into another object:

Drag and drop HTML5 demo

Try to move the purple box into the pink box.

ondragstart=”return dragStart(event)”>
Drag Me

ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>Dustbin

មេរៀន HTML5 Web Workers
ការអនុញ្ញាត JavaScript ត្រូវបានគេរចនាឡើងដើម្បីរត់ក្នុងបរិស្ថានតែមួយ-ខ្សែស្រឡាយមានន័យស្គ្រីបច្រើនមិនអាចរត់
នៅពេលដំណាលគ្នា។ ចូរគិតពីស្ថានភាព មួយដែលជាកន្លែងដែលអ្នកត្រូវការដើម្បីដោះស្រាយព្រឹត្តិការណ៍ចំណុចប្រទាក់: សំណួរនិងបរិមាណដ៏ធំនៃដំណើរការទិន្នន័យ API និងការរៀបចំរបស់ DOM បាន។

Stopping Web Workers: Web Workers don’t stop by themselves but the page that started them can stop them by calling terminate() method.

worker.terminate();

Handling Errors: The following shows an example of an error handling function in a Web Worker JavaScript file that logs errors to the console. With error handling code, above example would become as following:

Checking for Browser Support: Following is the syntax to detect a Web Worker feature support available in a browser:




Checking for Browser Support for web workers