មេរៀនសង្ខេប Syntax ក្នុង HTML5
មេរៀន HTML5 Syntax
អ្វីទៅជា HTML5? កម្មវិធី C + + ដែលការគាំទ្រ
HTML5 Syntax HTML ដែលThe DOCTYPE:
HTML 5 ប្រើ
<!DOCTYPE html>
Character Encoding:
<meta charset="UTF-8">The <script> tag:
<script type="text/javascript" src="scriptfile.js"></script>HTML 5 បន្ថែម
<script src="scriptfile.js"></script>The <link> tag:
So far you were writing <link> as follows:
<link rel="stylesheet" type="text/css" href="stylefile.css">HTML5 ពត៌មាន
<link rel="stylesheet" href="stylefile.css">HTML5 Elements: Following is the example of an HTML5 element:
<p>...</p>HTML5 Attributes:
<div>...</div>The markup for an HTM 5 document would look like the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>មេរៀន HTML5 Attributes
ខាងក្រោមនេះ
<div>...</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 | តម្រឹម |
| 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 | បញ្ឈរ |
| width | Numeric Value | Specifies the width of tables, images, or table cells. |
<div data-subject="physics" data-level="complex">
...
</div>មេរៀន HTML5 SVG
Embeding SVG in HTML5
HTML5 allows embeding SVG directly using <svg>…</svg> tag which has following simple syntax:
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>HTML5 – SVG Circle រង្វង់
Following is the HTML5 version of an SVG example which would draw a cricle using <circle> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>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 <rect> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>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 <line> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100"
style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>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 <ellipse> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>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 <polygon> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>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 <polyline> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polyline</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
</svg>
</body>
</html>This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 – SVG Gradients ពណ៌ជម្រាលខាងក្រោមនេះ
Similar way you can use <linearGradient> tag to create SVG linear gradient.
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50"
style="fill:url(#gradient)" />
</svg>
</body>
</html>his would produce following result in HTML5 enabled latest version of Firefox.
មេរៀន HTML5 MathMLវាក្យសម្ព័ន្ធ HTML របស់ HTML5 អនុញ្ញាតឱ្យសម្រាប់ធាតុ MathML ត្រូវបានប្រើនៅខាងក្នុងឯកសារដោយប្រើ <math> … <គណិតវិទ្យា /> ស្លាកមួយ។ ភាគច្រើននៃកម្មវិធីរុករក បណ្ដាញអាចបង្ហាញស្លាក MathML ។ ប្រសិនបើកម្មវិធីរុករករបស់អ្នកមិនគាំទ្រការ MathML នោះអ្នក ប្រើកម្មវិធី Firefox ចុងក្រោយបំផុត។
MathML Examples:
Following is a valid HTML5 document with MathML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Pythagorean theorem</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>This would produce following result:
Using MathML Characters:
Consider, following is the markup which makes use of the characters ⁢:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MathML Examples</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo></mo>
<mi>x</mi>
</mrow>
<mo>+</mo>
<mn>4</mn>
</mrow>
<mo>=</mo>
<mn>0</mn>
</mrow>
</math>
</body>
</html>
Matrix Presentation Examples:
Consider the following example which would be used to represent a simple 2×2 matrix:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MathML Examples</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</body>
</html>
មេរៀន HTML5 – Web Storage
HTML5 ណែនាំ ស្រដៀងទៅនឹង HTTP សម្រាប់រក្សាទុកទិន្នន័យដែលមាន រចនាសម្ព័ន្ធនៅ ផ្នែកខាងម៉ាស៊ីននិងដើម្បីការពារ។ Cookies ត្រូវបានកំណត់ទៅប្រមាណ 4 គីឡូបៃនៃទិន្នន័យ។
Session Storage:
Following is the code which would set a session variable and access that variable:
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( sessionStorage.hits ){sessionStorage.hits = Number(sessionStorage.hits) +1;
}else{sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>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:
| <!DOCTYPE HTML><html> <body> <script type=”text/javascript”> if( localStorage.hits ){ localStorage.hits = Number(localStorage.hits) +1; }else{ localStorage.hits = 1; } document.write(“Total Hits :” + localStorage.hits ); </script> <p>Refresh the page to increase number of hits.</p> <p>Close the window and open it again and check the result.</p> </body> </html> |
Following is the code which would clear complete local storage:
| <!DOCTYPE HTML><html> <body> <script type=”text/javascript”> localStorage.clear(); // Reset number of hits. if( localStorage.hits ){ localStorage.hits = Number(localStorage.hits) +1; }else{ localStorage.hits = 1; } document.write(“Total Hits :” + localStorage.hits ); </script> <p>Refreshing the page would not to increase hit counter.</p> <p>Close the window and open it again and check the result.</p> </body> </html> |
មូលដ្ឋានទិន្នន័យ 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 = "<p>Found rows: " + len + "</p>";
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.
| <!DOCTYPE HTML><html> <head> <script type=”text/javascript”> var db = openDatabase(‘mydb’, ’1.0′, ‘Test DB’, 2 * 1024 * 1024); var msg; 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”)’); msg = ‘<p>Log message created and row inserted.</p>’; document.querySelector(‘#status’).innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql(‘SELECT * FROM LOGS’, [], function (tx, results) { var len = results.rows.length, i; msg = “<p>Found rows: ” + len + “</p>”; document.querySelector(‘#status’).innerHTML += msg; for (i = 0; i < len; i++){ msg = “<p><b>” + results.rows.item(i).log + “</b></p>”; document.querySelector(‘#status’).innerHTML += msg; } }, null); }); </script> </head> <body> <div id=”status” name=”status”>Status Message</div> </body> </html> |
| Log message created and row inserted.Found rows: 2 foobar logmsg |
កម្មវិធីបណ្ដាញសាមញ្ញបង្កើតព្រឹត្តិការណ៍ដែលត្រូវបានបញ្ជូនទៅកាន់ម៉ាស៊ីនបម្រើបណ្ដាញ។ ឧទាហរណ៍ការចុចលើតំណសាមញ្ញមួយ requests ពីទំព័រថ្មីពីម៉ាស៊ីនមេ។
Web Application for SSE:
ដើម្បីប្រើម៉ាស៊ីន Server-Sent Events ត្រូវបានបញ្ជូនព្រឹត្តិការណ៍និងសកម្មភាពនៅក្នុងកម្មវិធី បណ្តាញមួយដែលអ្នកនឹងត្រូវការដើម្បីបន្ថែមធាតុមួយ <eventsource> ទៅឯកសារ។
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id="sse">
<eventsource src="/cgi-bin/ticker.cgi" />
</div>
<div id="ticker">
<TIME>
</div>
</body>
</html>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.
| <!DOCTYPE HTML><html> <head> <script type=”text/javascript”> document.getElementsByTagName(“eventsource”)[0]. addEventListener(“server-time”, eventHandler, false); function eventHandler(event) { // Alert time sent by the server document.querySelector(‘#ticker’).innerHTML = event.data; } </script> </head> <body> <div id=”sse”> <eventsource src=”/cgi-bin/ticker.cgi” /> </div> <div id=”ticker” name=”ticker”> [TIME] </div> </body> </html> |
WebSockets គឺជា
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. |
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. |
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.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{ if ("WebSocket" in window) { alert("WebSocket is supported by your Browser!");// Let us open a web socket
var ws = new WebSocket("ws://localhost:9998/echo");ws.onopen = function()
{// Web Socket is connected, send data using send()
ws.send("Message to send"); alert("Message is sent...");};
ws.onmessage = function (evt)
{var received_msg = evt.data;
alert("Message is received...");};
ws.onclose = function()
{// websocket is closed.
alert("Connection is closed...");};
}
else
{// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>មេរៀន HTML5 – Canvas
<canvas> ធាតុ HTML5 ផ្ដល់ឱ្យអ្នកនូវវិធីងាយស្រួលនិងមានអានុភាពដើម្បីគូរក្រាហ្វិកដោយប្រើការអនុញ្ញាត JavaScript ។ វាអាចត្រូវបានប្រើដើម្បីគូរក្រាហ្វិក, ធ្វើឱ្យសមាសភាពរូបថតឬធ្វើចលនា។
<canvas id="mycanvas" width="100" height="100"></canvas>You can easily find that <canvas> element in the DOM using getElementById() method as follows:
| var canvas = document.getElementById(“mycanvas”); |
| <!DOCTYPE HTML><html> <head> <style> #mycanvas{ border:1px solid red; } </style> </head> <body> <canvas id=”mycanvas” width=”100″ height=”100″></canvas> </body> </html> |
ollowing is the code to get required context along with a check if your browser supports <canvas> element:
| var canvas = document.getElementById(“mycanvas”);if (canvas.getContext){ var ctx = canvas.getContext(’2d’); // drawing code here } else { // canvas-unsupported code here } |
The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8 does not support canvas natively.
<!--[if IE]><script src="excanvas.js"></script><![endif]-->មេរៀន HTML5 – Audio & Video
លក្ខណៈពិសេស HTML5, រួមបញ្ចូលអូឌីយ៉ូ និងការគាំទ្រវីដេអូដោយមិនចាំបាច់ប្រើ Flash។ <audio> HTML5 និងស្លាក <video> ធ្វើឱ្យ សាមញ្ញដើម្បីបន្ថែមទៅ កាន់ប្រព័ន្ធផ្សព្វផ្សាយលើគេហទំព័រ។ អ្នកត្រូវការដើម្បីកំណត់គុណលក្ខណៈ src ដើម្បីបញ្ជាក់ប្រភពប្រព័ន្ធផ្សព្វផ្សាយនិងរួមបញ្ចូលការ ត្រួតពិនិត្យ អ្នកប្រើអាចលេងនិង pause លើប្រព័ន្ធផ្សព្វផ្សាយ។
Embedding Video:
Here is the simplest form of embedding a video file in your webpage:
| <video src=”foo.mp4″ width=”300″ height=”200″ controls>Your browser does not support the <video> element. </video> |
| <!DOCTYPE HTML><html> <body> <video width=”300″ height=”200″ controls autoplay> <source src=”/html5/foo.ogg” type=”video/ogg” /> <source src=”/html5/foo.mp4″ type=”video/mp4″ /> Your browser does not support the <video> element. </video> </body> </html> |
HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows.
| <audio src=”foo.wav” controls autoplay>Your browser does not support the <audio> element. </audio> |
| <!DOCTYPE HTML><head> <script type=”text/javascript”> function PlayVideo(){ var v = document.getElementsByTagName(“video”)[0]; v.play(); } </script> </head> <html> <body> <form> <video width=”300″ height=”200″ src=”/html5/foo.mp4″> Your browser does not support the <video> element. </video> <input type=”button” onclick=”PlayVideo();” value=”Play”/> </form> </body> </html> |
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); } |
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; … } |
Microdata អនុញ្ញាតឱ្យអ្នកកំណត់ធាតុផ្ទាល់ខ្លួនរបស់អ្នកហើយចាប់ផ្តើមបង្កប់ លក្ខណៈសម្បត្តិផ្ទាល់ ខ្លួននៅក្នុងទំព័រតំបន់បណ្ដាញរបស់អ្នក។ នៅកម្រិតខ្ពស់មួយ microdata មានក្រុមនៃគូឈ្មោះតម្លៃមួយ។
Here there are two items, each of which has the property “name”:
| <div itemscope><p>My name is <span itemprop=”name”>Zara</span>.</p> </div> <div itemscope> <p>My name is <span itemprop=”name”>Nuha</span>.</p> </div> |
| <div itemscope><img itemprop=”image” src=”tp-logo.gif” alt=”TutorialsPoint”> </div> |
| <div itemscope>My birthday is: <time itemprop=”birthday” datetime=”1971-05-08″> Aug 5th 1971 </time> </div> |
| function supports_microdata_api() {return !!document.getItems; } |
| <section itemscope itemtype=”http://data-vocabulary.org/Person”><h1 itemprop=”name”>Andy Runie</h1> <p> <img itemprop=”photo” src=”http://www.example.com/photo.jpg”> </p> <a itemprop=”url” href=”http://www.example.com/blog”>My Blog</a> </section> |
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; …………. } |
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:
| <!DOCTYPE HTML><html> <head> <style type=”text/css”> #boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; } #boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { background-color: #FF6699; width:150px; height:150px; } </style> <script type=”text/javascript”> function dragStart(ev) { ev.dataTransfer.effectAllowed=’move’; ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’)); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } </script> </head> <body> <center> <h2>Drag and drop HTML5 demo</h2> <div>Try to drag the purple box around.</div> <div id=”boxA” draggable=”true” ondragstart=”return dragStart(event)”> <p>Drag Me</p> </div> <div id=”boxB”>Dustbin</div> </center> </body> </html> |
Following is the example to drop an object into another object:
| <!DOCTYPE HTML><html> <head> <style type=”text/css”> #boxA, #boxB { float:left;padding:10px;margin:10px;-moz-user-select:none; } #boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { background-color: #FF6699; width:150px; height:150px; } </style> <script type=”text/javascript”> function dragStart(ev) { ev.dataTransfer.effectAllowed=’move’; ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’)); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } function dragEnter(ev) { event.preventDefault(); return true; } function dragOver(ev) { return false; } function dragDrop(ev) { var src = ev.dataTransfer.getData(“Text”); ev.target.appendChild(document.getElementById(src)); ev.stopPropagation(); return false; } </script> </head> <body> <center> <h2>Drag and drop HTML5 demo</h2> <div>Try to move the purple box into the pink box.</div> <div id=”boxA” draggable=”true” ondragstart=”return dragStart(event)”> <p>Drag Me</p> </div> <div id=”boxB” ondragenter=”return dragEnter(event)” ondrop=”return dragDrop(event)” ondragover=”return dragOver(event)”>Dustbin</div> </center> </body> </html> |
ការអនុញ្ញាត JavaScript ត្រូវបានគេរចនាឡើងដើម្បីរត់ក្នុងបរិស្ថានតែមួយ-ខ្សែស្រឡាយមានន័យស្គ្រីបច្រើនមិនអាចរត់នៅពេលដំណាលគ្នា។ ចូរគិតពីស្ថានភាព មួយដែលជាកន្លែងដែលអ្នកត្រូវការដើម្បីដោះស្រាយព្រឹត្តិការណ៍ចំណុចប្រទាក់: សំណួរនិងបរិមាណដ៏ធំនៃដំណើរការទិន្នន័យ API និងការរៀបចំរបស់ DOM បាន។
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
function bigLoop(){ for (var i = 0; i <= 10000000000; i += 1){var j = i;
}
alert("Completed " + j + "iterations" );}
function sayHello(){ alert("Hello sir...." );}
</script>
</head>
<body>
<input type="button" onclick="bigLoop();" value="Big Loop" />
<input type="button" onclick="sayHello();" value="Say Hello" />
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js'); worker.onmessage = function (event) { alert("Completed " + event.data + "iterations" );};
function sayHello(){ alert("Hello sir...." );}
</script>
</head>
<body>
<input type="button" onclick="sayHello();" value="Say Hello"/>
</body>
</html>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(); |
| <!DOCTYPE HTML><html> <head> <title>Big for loop</title> <script> var worker = new Worker(‘bigLoop.js’); worker.onmessage = function (event) { alert(“Completed ” + event.data + “iterations” ); }; worker.onerror = function (event) { console.log(event.message, event); }; function sayHello(){ alert(“Hello sir….” ); } </script> </head> <body> <input type=”button” onclick=”sayHello();” value=”Say Hello”/> </body> </html> |
<!DOCTYPE HTML><html> <head>
<title>Big for loop</title>
<script src=”/js/modernizr-1.5.min.js”></script>
<script>
if (Modernizr.webworkers) {
alert(“Congratulation!! you have web workers support.” );
}else{
alert(“Sorry!! you do not have web workers support.” );
}
</script>
</head>
<body>
<p>Checking for Browser Support for web workers</p>
</body>
</html>
Post a Comment