آموزش DHTML

Printable View

07-04-2005, 03:31
Nesta

آموزش DHTML

) يک رابط برنامه نويسي براي سندهاي XML و Html است . با استفاده از اينترفيس فوق، نحوه دستيابي و انجام پردازش هاي لازم در رابطه با سند هاي XML و Html فراهم مي گردد . برنامه نويسان با استفاده از DOM ، قادر به ايجاد يک سند ،حرکت در طول ساختار سند، افزودن ، اصلاح و يا حذف المان هاي يک سند XML و يا Html مي باشند . DOM توسط کنسرسيوم وب استاندارد و بمنظور استفاده از طريق زبان هاي برنامه نويسي متعددي طراحي شده است .
گره ها
برنامه اي با نام پارسر، امکان استقرار يک سند XML در حافظه را فراهم مي نمايد . پس از استقرار سند در حافظه ، اطلاعات مربوطه بکمک DOM ، قابل بازيابي و پردازش خواهد بود . DOM ، يک نمايش شبه درختي از يک سند XML را ايجاد مي نمايد . المان Document ، داراي بالاترين سطح در درخت ايجاد شده است . المان فوق ، داراي يک و يا چندين فرزند است . يک اينترفيس گره ، امکان خواندن و يا نوشتن المان هاي خاصي در ساختار درختواره اي يک سند XML را ميسر مي نمايد .با استفاده از خصلت ChildNodes مربوط به المان Document و بکارگيري يک حلقه تکرار مي توان هر يک از گره ها را انتخاب و در ادامه عمليات مورد نظر در رابطه با آن را انجام داد . پارسر شرکت ماکروسافت (MSXML) ، داراي توابع متفاوت بمنظور حرکت در طول درخت، دستيابي به گره ها بهمراه خصلت مربوطه، درج و حذف گره ها و تبديل ساختار درختي به شکل اوليه XML است . در حال حاضر، سيزده نوع متفاوت گره توسط پارسرشرکت ماکروسافت، حمايت مي گردد . جدول زير متداولترين نوع گره ها را نشان مي دهد .

مثال
نوع گره

<!DOCTYPE food SYSTEM "food.dtd">
Document type
<?xml version="1.0"?>
Processing instruction
<drink type="tea">Irani</drink>
Element
type="tea"
Attribute
Irani
Text

استفاده از پارسر
بمنظور خواندن، ويرايش و يا ايجاد و پردازش يک سند XML ، مي بايست از يک پارسر استفاده کرد . پارسر شرکت ماکروسافت، يک عنصر مبتني بر COM بوده که بهمراه IE نسخه پنج ، ارائه شده است . پس از نصب مرورگر فوق، امکان استفاده از پارسر فراهم مي گردد . پارسر MSXML ، داراي امکانات متعدد برنامه نويسي بمنظور استفاده توسط زبانهاي زير است :

حمايت از جاوااسکريپت VBScript Perl جاوا و ++ C

حمايت از استاندارد کنسرسيوم وب و XML DOM

حمايت از DTD و معتبر سازي

مثال : نحوه ايجاد شي Document ، با استفاده جاوااسکريپت ، VBscript و ASP در جدول زير نشان داده شده است :

مثال
تکنولوژي

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
Javascript
set xmlDoc = CreateObject("Microsoft.XMLDOM")
VBscript
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
ASP

استقرار يک سند XML در حافظه
کدهاي زير نحوه استقرار يک سند XML با نام Test.xml در حافظه را نشان مي دهد :

استقرار يک سند XML در حافظه

<script language="JavaScript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("Test.xml")
// ....... پردازش هاي لازم
</script>

اولين خط در اسکريپت هاي فوق ، يک نمونه از پارسر XML شرکت ماکروسافت را ايجاد مي نمايد . در دومين خط ، به پارسر اعلام مي گردد منتظر دريافت کامل سند XML بوده قبل از اينکه پردازش خود را آغاز نمايد . در سومين خط ، به پارسر اعلام شده است که يک سند XML با نام Test.xml را در حافظه مستقر نمايد .

استقرار متن XML در پارسر
کدهاي زير، نحوه استقرار يک رشته متن را در پارسر XML نشان مي دهد . در مثال فوق از متد LoadXML در مقابل متد load استفاده شده است . از متد loadXML بمنظور استقرار يک رشته متن در پارسر استفاده مي گردد .

استقرار يک رشته متن XML در حافظه

<script language="JavaScript">
var text="<note>"
text=text+"<to>Ali</to><from>Reza</from>"
text=text+"<heading>Reminder</heading>"
text=text+"<body>Don't forget me this weekend!</body>"
text=text+"</note>"
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.loadXML(text)
// ....... پردازش هاي لازم
</script>

شي ParseError
خطاي مربوط به فايل : با استفاده از شي ParseError ، مي توان از کد ، متن خطاء و حتي شماره خطي که خطاء در آن اتفاق افتاده است ، آگاهي يافت . در برنامه زير پارسر، سعي در استقرار سندي XML در حافظه نموده که وجود خارجي ندارد . پس از تشخيص خطاء ، برخي از خصلت هاي مربوط به خطاء در خروجي نمايش داده خواهد شد .

تشخيص خطاء و استفاده از شي ParseError در رابطه با وجود يک فايل

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("Test1.xml")
document.write("<br>Error Code: ")
document.write(xmlDoc.parseError.errorCode)
document.write("<br>Error Reason: ")
document.write(xmlDoc.parseError.reason)
document.write("<br>Error Line: ")
document.write(xmlDoc.parseError.line)

خطاي مربوط به XML . فرض کنيد يک سند XML که "خوش شکل " نمي باشد، توسط پارسر خوانده شود . کدهاي زير نحوه تشخيص و برخورد با خطاء را نشان مي دهد :

تشخيص خطاء و استفاده از شي ParseError در رابطه با سند "خوش شکل "

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note_error.xml")
document.write("<br>Error Code: ")
document.write(xmlDoc.parseError.errorCode)
document.write("<br>Error Reason: ")
document.write(xmlDoc.parseError.reason)
document.write("<br>Error Line: ")
document.write(xmlDoc.parseError.line)

خصلت هاي ParseError

عملکرد
خصلت

کد خطاي بوجود آمده ، برگردانده مي شود .
errorCode
علت خطاي بوجود آمده ،برگردانده مي شود .
reason
شماره خط خطاي بوجود آمده ، برگردانده مي شود
line
محل بروز خطاء در خط مربوطه را برمي گرداند .
linePos
رشته اي که شامل خط مربوط به خطاي بوجود آمده است، برگردانده مي شود
srcText
url مربوط به سند مستقر سده در حافظه ، بر گردانده مي شود .
url
محل بروز خطاء در فايل مربوطه، برگردانده مي شود .
filePos

حرکت در طول درخت
يکي از متداولترين روش هاي بازيابي المان هاي يک سند XML ، حرکت در طول درخت ( از گره اي به گره ديگر ) و استخراج مقدار متن ذخيره شده بهمراه هر يک از المان ها است . کدهاي نوشته شده زير ، امکان حرکت در طول يک درخت XML را فراهم و در ادامه هر يک از المان هاي سند XML ، در خروجي نمايش داده مي شوند ( کدها با استفاده از VBScript نوشته شده اند ) .

حرکت در طول درخت و نمايش المان هاي يک سند XML

set xmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
for each x in xmlDoc.documentElement.childNodes
document.write(x.nodename)
document.write(": ")
document.write(x.text)
next

ايجاد محتويات مبتني بر Html براي يک سند XML
يکي از مهمترين قابليت هاي XML ، تمايز و تفکيک سندهاي Html از داده هاي مربوطه است . با استفاده از يک پارسر XML ، موجود در مرورگرها ، يک صفحه وب قادر به ايجاد محتوياتي پويا است . در اين زمينه مي توان از پتانسيل هاي جاوااسکريپت بمنظور توليد و ارائه محتويات پويا نيز استفاده کرد . در همين راستا ، امکان استفاده از ASP برا ي ايجاد محتويات پويا با تاکيد بر نقش سرويس دهنده وب نيز وجود دارد . برنامه زير ، داده هاي موجود در يک سند XML را خوانده و آنها را با فرمت Html در خروجي نمايش خواهد داد .

نمايش داده هاي موجود در يک سند XML با استفاده از جاوااسکريپت

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
nodes = xmlDoc.documentElement.childNodes
to.innerText = nodes.item(0).text
from.innerText = nodes.item(1).text
header.innerText = nodes.item(2).text
body.innerText = nodes.item(3).text

دستيابي به المان ها از طريق نام
رنامه زير داده هاي موجود در يک سند XML را خوانده و آنها را با فرمت Html در خروجي نمايش خواهد داد .

دستيابي به المان ها د ر يک سند XML از طريق نام و بکمک جاوااسکريپت

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
document.write(xmlDoc.getElementsByTagName("from") .item(0).text)

منبع سخاروش
07-04-2005, 03:32
Nesta

تقريبا تمام كساني كه با طراحي صفحات وب و يا HTML سروكار دارند باCSS (Cascading Style Sheets) آشنايي دارند. با استفاده از CSS نحوه نمايش اطلاعات درون صفحه وب مشخص ميشود. با استفاده از CSS تعيين نحوه نمايش اطلاعات بسيار راحتتر ازHTML است. همچنين انجام بعضي از انواع قالب بندي هايي كه با CSS امكان پذير است با دستورات HTML امكان پذير نيست.
يكي از امكانات جالبي كه CSS در اختيار ما ميگذارد خصوصيتي بنام Filter ميباشد. كه بوسيله آن ميتوان به تصاوير و متنهاي درون صفحه وب افكتهاي متفاوتي را اضافه كرد. بطور مثال شما قادر خواهيد بود درون يك صفحه وب يك متن سايه دار داشته باشيد بدون اينكه از عكس بجاي متن استفاده كنيد. كه اين خود باعث ميشود كه ويرايش كردن متن مورد نظر شما نيز به راحتي صورت گيرد، چون ديگر شما با يك سري تصاوير كار نداريد، بلكه متن مورد نظر خود را به راحتي ويرايش ميكنيد. همچنين شما قادر خواهيد بود كه شفافيت يك عكس را كم كنيد يا آن را وارونه كنيد. اينها فقط چند نمونه از امكانات خصوصيت Filter در CSS بود. در ادامه امكانات و نحوه استفاده از خصوصيت Filter را بيان خواهيم كرد.

بايد دقت داشت كه براي كار كردن ----- ها هميشه بايد خصوصيت wtihd را براي تگ مورد نظر تنظيم كنيد. در غير اين صورت اين ----- ها از كار خواهند افتاد.
براي اضافه كردن ----- ها از تگDIV استفاده شده است. براي راحتي كار با نوشتن دستورات زير خصوصيت width براي تگ DIV تنظيم شده است. توجه داشته باشيد كه اين دستورات بايد در قسمت head صفحه وب و قبل از تگ نوشته شود.
< style>
< !--
div{width:100%;}
-->
< /style>

همچنين براي اضافه كردن ----- ها از روش زير استفاده شده است.

----- مورد نظر">
محتوياتي كه قرار است ----- بر روي آن اعمال شود
اين محتويات ميتواند هرچيزي باشد مثلا متن يا تصوير

بطور مثال
< div style="filter: alpha(opacity=30);">
< img src="images/art11361.jpg" width="100" height="100">
< /div>

براي مشخص شدن خصوصيتهاي مختلف دستورfilter و نتايج استفاده از هركدام از جدول زير استفاده شده است.
در جدول زير سعي شده دستورات مربوط به خصوصيت filter با تنظيمات مختلف نشان داده شود. همچنين اين كدها به عنوان نمونه هستند و خود شما با تغيير هركدام از پارامترها ميتوانيد جلوه هاي متفاوتي را ايجاد كنيد.
در قسمت مربوط به توضيحات هم سعي شده پارامترهاي اصلي هركدام از ----- ها را بطور مختصرمعرفي شود.

filter: alpha(opacity=30); alpha : با اين ----- ميتوان ميزان نمايان بودن يك تصوير را مشخص نمود
opacity : مقدارد نمايان شدن تصوير را مشخص مكند كه مقداري بين 0 تا 100 را مي پذيرد.

filter:alpha(opacity=0, finishopacity=100, style=1, startx=0, starty=0, finishx=100, finishy=100); در اين قسمت تمام پارامترهاي خصوصيت alpha نشان داده شده است. كه با استفاده از اين پارامترها ميتوان ميزان نمايش داده شدن يك شكل را از كم به زياد تعيين نمود.

filter:alpha(opacity=100, finishopacity=10, style=2, startx=0, starty=0, finishx=100, finishy=100); اين مثال با همان پارامترهايي كه در مثال قبل آمده بود بيان شده و فقط مقادير پارامترهايي كه بصورت رنگي در آمده اند تغيير كرده اند.
همچنين پاراتر style‌ ميتواند مقاديري بين 0 تا 3 داشته باشد.

filter:blur(add=false, direction=90, strength=7); با اين ----- ميتوان تصوير را محو كرد.
direction : زاويه محو شدن شكل
strength: ميزان تاثيراين -----

filter:blur(add=true, direction=90, strength=7); add : اين پارامتر مشخص ميكند كه آيا تصوير اوليه نيز با تصوير ايجاد شده جديد تركيب شود يا خير

filter:fliph; چرخش بصورت افقي

filter:flipv; چرخش بصورت عمودي

filter:gray; ايجاد جلوه سياه و سفيد

filter:xray; ابتدا شكل را سياه و سفيد و سپس ميزان رنگها و روشنايي را معكوس ميكند.

filter:invert; ميزان رنگها و روشنايي را معكوس ميكند.
Test mask picture
filter: mask(color=#ffffff); اين ----- به اين صورت عمل ميكند كه محتويات مورد نظر را با يك رنگ خواص به صورت شفاف در ميآورد در اينجا عكس مورد نظر به عنوان زمينه (backgroung) تعيين شده و با تنظيم رنگ با رنگ زمينه دلخواه (در اينجا سفيد) در اصل ما رنگ متن را با يك تصوير پر كرده ايم.

Glow
filter:glow(color=#0099CC, strength=4); ايجاد حالت روشنايي با رنگ و ميزان دلخواه در اطراف متن مورد نظر

Blur
filter:blur; همان ----- blur اما بدون پارامتر

Shadow
filter:shadow(color=#999999, direction=135); ايجاد جلوه سايه با رنگ و زاويه دلخواه
Drop Shadow
filter:dropshadow(color=#999999, offx=3, offy=3, positive=true); نمايش سايه يك متن با رنگ دلخواه در موقعيت دلخواه

Wave
filter:wave(strength=3); ايجاد جلوه موجي شكل به اندازه دلخواه

Flip H
filter: fliph(); چرخش بصورت افقي

Flip V
filter: flipv(); چرخش بصورت عمودي

دقت داشته باشيد كه براي مشاهده جلوه هاي بيان شده به مرورگر Internet Explorer 4.0 يا بالاتر از آن نياز است.

منبع : [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
07-04-2005, 03:33
Nesta

در اين يادداشت مي خواهم چگونگي ساخت منوهاي Drop Down را آموزش بدهم. البته منظورم کادرهاي Drop Down که با تگ <select> درست مي شوند نيست! شايد تا به حال سايتهايي را ديده باشيد که هنگامي که بر روي متني کليک مي کنيد، در زير آن يک ناحيه اي نمايان مي شود که در آن نوشته و يا عکسي مي باشد. اگر به Windows Explorer نگاهي بياندازيد، منظورم را متوجه مي شود. در آن پنجره به My Computer نگاه کنيد. در کنار آن يک علامت مثبت است که با کليک بر روي آن گزينه، علامت مثبت به علامت منفي و سپس هارد ديسک درايوها و CD-ROMها در زير آن به نمايش در مي آيند. اين کار هم توسط يک کد جاوااسکريپت در وب امکان پذير است. به ياد داشته باشيد که براي آن عکسها، من از نامهاي p.gif (براي علامت مثبت) و n.gif (براي علامت منفي) استفاده کرده ام. بقيه روش کار به صورت زير است:
ابتدا کد جاوااسکريپت زير را در قسمت Head صفحه (يعني در بين تگهاي </head> و <head>) کپي نماييد.

<script language="javascript">

</script>

پس از انجام اين کار، يک لايه به وسيله تگ <div> مي سازيم و به آن نامي را اختصاص مي دهيم.

<div id="other">

</div>

همان طور که مشاهده مي کنيد، من به اين لايه، نام other را اختصاص دادم. حال براي اين که اين لايه از صفحه ناپديد شود، مي بايست به وسيله CSS، و خاصيت display آن را مخفي کنيم. براي اين کار کد زير را به لايه خود اضافه کنيد.

style="display: none"

يعني بايد کد شما، چيزي شبيه به کد زير شود.

<div id="other" style="display: none">

</div>

پس از آنکه کار مخفي کردن لايه به اتمام رسيد، نوبت به لينکي مي رسد که اين لايه را نمايش دهد و يا آن را مخفي کند. همان طور که مي دانيد، لينکها در HTML توسط تگ <a> ساخته مي شوند. پس من هم به وسيله اين تگ، لينکي همانند لينک زير را مي سازم.

<a href="javascript:void(showLayer('other'));">Other& lt;/a>

همان طور که مشاهده مي کنيد، کلمه اي که درون پرانتزهاي showLayer نوشته شده است، دقيقا همان نامي است که به لايه مورد نظر خود اختصاص داده ايم. پس اگر خواستيد نام آن لايه را عوض کنيد، فراموش نکنيد که اينجا رو هم عوض کنيد.
تا به اينجاي کار تقريبا تمامي کارها انجام شده است. فقط تنها مسئله اي که مي ماند، آن شکلهاي مثبت و منفي است. براي وارد کردن يک عکس درون صفحه وب، از تگ <img> استفاده مي کنيم.

<img id="otherImage" border="0" width="9" height="9" src="http://blog.mojtaba.net/images/p.gif">

تنها نکته اي که در اينجا حائز اهميت است آن است که مقدار خاصيت ID براي اين عکس، برابر نام همان لايه+Image مي باشد. يعني اگر نام لايه را hidden انتخاب مي کرديد، نام اين عکس را بايد به صورت hiddenImage مي نوشتيد.
نکته ديگري که آن را مهم مي دانم به شما بگويم، آن است که بهتر است اين عکسهاي مثبت و منفي را، در هنگام بارگذاري صفحه، لود کنيد. اکثر افرادي که به وسيله اين روش، اين نوع منوهاي Drop Down را مي سازند، انجام اين کار آخري را فراموش مي کنند. اين کار باعث مي شود هنگامي که کاربر بر روي آن لينک کليک مي کند، بلافاصله علامت مثبت به علامت منفي تبديل شود. در غير اين صورت، کاربر بايد منتظر لود شدن علامت منفي شود. ولي اگر همزمان با لود شدن صفحه، علامت منفي را هم در حافظه پنهاني لود کنيد، همچين مشکلي پيش نمي آيد. در حقيقت، اين يکي از اصول طراحي عکسهاي Rollover به وسيله جاوااسکريپت است. با انجام اين کار، عکسهاي Rollover جذابيت بيشتري پيدا مي کنند. چرا که کاربر ديگر منتظر لود شدن عکس Hover نمي نشيند و همين که نشانه گر ماوس را بر روي عکس مي برد، عکس Hover را مشاهده مي کند.
براي لود کردن عکسهاي مورد نظر همزمان با لود شدن صفحه، از کد جاوااسکريپت زير استفاده مي کنيم.

label = new Image(h,w)
label.src = "path"

اين ساختار کلي کد مي باشد. کد مورد نظر ما به صورت زير در مي آيد.

p = new Image(9,9)
p.src = "http://blog.mojtaba.net/images/p.gif"
n = new Image(9,9)
n.src = "http://blog.mojtaba.net/images/n.gif"

در زير کد نهايي را مشاهده مي کنيد (من تگهاي <html> و <head> و <body> رو هم نوشتم)...

<html>

<head>
<title>Drop Down Menu</title>
<script language="javascript">

</script>
</head>

<body>
<a href="javascript:void(showLayer('other'));">
<img id="otherImage" border="0" width="9" height="9" src="http://blog.mojtaba.net/images/p.gif"> Other</a>
<div id="other" style="display: none">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
</body>

</html>

فقط به ياد داشته باشيد که در هنگام استفاده از اين کد، عکسهاي p.gif و n.gif را درون هاست خود کپي کنيد و به جاي استفاده از آدرسهاي [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] و [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] از آدرسهاي درون هاست خود استفاده کنيد. چرا که Bandwidth من محدوديت داره...
07-04-2005, 03:33
Nesta

حتما تا به حال در حين گشت زني در اينترنت، با منوهايي برخورد کرده ايد که هنگامي که ماوس بر روي آنها قرار مي گيرد، رنگ آنها عوض مي شود. به اين حالت اصطلاحا Rollover مي گويند. اين کار هم به وسيله جاوااسکريپت و هم به وسيله CSS انجام مي شود. اگر بخواهيد به وسيله جاوااسکريپت اين کار را انجام دهيد، کمي وقتتان گرفته خواهد شد. اما به وسيله CSS، انجام اين کار مثل آب خوردن است!
در زير کد HTML نهايي (و نه کد CSS) را مشاهده مي کنيد.

<div id="navigation">
<a href="#">Main Page</a>
<a href="#">Articles</a>
<a href="#">Tutorials</a>
<a href="#">Download</a>
<a href="#">Contact Me</a>
</div>

اين کد، تنها شما را به مقصود نهايي نمي رساند. مرحله اصلي در نوشتن کد CSS آن است. کد CSS را در زير مشاهده مي کنيد (فراموش نکنيد که براي استفاده از کد زير، مي بايست آن را در بين دو تگ </style> و <style type="text/css"> و در قسمت Head صفحه (يعني بين تگهاي </head> و <head>) قرار دهيد. همچنين مي توانيد از يک فايل CSS خارجي نيز استفاده کنيد.)

#navigation {
text-align: center;
font-family: tahoma;
font-size: 9pt;
}

#navigation a {
display: block;
padding: 5;
color: #ffffff;
width: 200px;
text-decoration: none;
background-color: #006699;
border: 1px solid #003366;
margin-top: 2;
margin-bottom: 2;
}

#navigation a:hover {
color: #000000;
background-color: #99cc00;
border: 1px solid #003366;
}

همچنين اگر مي خواهيد منو را به صورت افقي (Horizontal) داشته باشيد، مي توانيد خاصيت display: block را حذف کنيد. اين خاصيت سبب مي شود تا المنتهاي <a> به صورت Block-Level و نه Inline ظاهر شوند. بقيه کد هم که تقريبا براي CSSکارها خوانا مي باشد. اما اگر جايي براي شما نامفهوم بود، بهم بگيد تا توضيحش بدم... من اين کد را در سه مرورگر Opera 7, Netscape 7 و IE 6 تست کردم، خوشبختانه هر سه مرورگر به طور کامل از اين کد پشتيباني مي کنند...