آموزش طراحی سایت (HTML CSS Javascript) | آتریا

JavaScript

محل قرارگیری کدهای JavaScript

محل قرارگیری کدهای JavaScript
Wiki
کدهای JavaScript در صفحه HTML باید بین تگهای <script> و <script/> قرار داده شود.
کدهای JavaScript را می توان در بدنه صفحه HTML (بین تگهای باز و بسته <body> و <body/>) و یا در قسمت <head> صفحه قرار داد.
تگ <script>
Wiki
از تگ <script>، برای وارد کردن کدهای JavaScript در صفحه HTML استفاده می شود.
تگهای باز و بسته <script> و <script/> می گوید، کدهای JavaScript کجا شروع و کجا پایان یافته است.
خطوط بین <script> و <script/> شامل کدهای JavaScript است:
<script>
alert("My First JavaScript");
</script>
مرورگر، کد JavaScript بین <script> و <script/> را ترجمه و اجرا می کند.
توجه:بدون تگ های باز و بسته <script> و <script/> ، مرورگر با دستورات بین آنها مانند یک متن معمولی برخورد می کند و آنها را عیناً در صفحه HTML نمایش می دهد. (خودتان امتحان کنید)
توجه: ممکن است برای تگ <script> خصوصیت type را تنظیم کنیم ("text/javascript"). نیاز به انجام این کار نیست، چون در تمام مرورگرها و در HTML5 زبان اسکریپت پیشفرض، JavaScript است.
کدهای JavaScript در بدنه صفحه HTML
Wiki
در مثال زیر، هنگام بارگذاری صفحه یا (onload)،خروجی HTML در قسمت <body> چاپ می شود:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>
خودتان امتحان کنید »
همچنین در مثال زیر، تاریخ جاری سیستم، هنگام بارگذاری صفحه، داخل عنصر با شناسه "demo" نوشته می شود:
مثال (محل قرارگیری کدهای JavaScript)
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph.</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
خودتان امتحان کنید »
توجه: برای اطمینان بیشتر، کد JavaScript در پایین صفحه HTML قرار داده شده است (نباید قبل از ایجاد عنصر <p> کدمان اجرا شود)
توابع و رویدادها در JavaScript
Wiki
کدهای JavaScript در صفحه HTML، زمانی که صفحه بارگذاری شود (onload) اجرا خواهند شد. اما این چیزی نیست که ما همیشه نیاز داریم.
بعضی مواقع می خواهیم زمانی که یک رویداد خاص اتفاق می افتد، کدمان اجرا شود، مانند زمانی که کاربر روی یک دکمه کلیک می کند. در این مورد می توانیم کدمان را داخل یک تابع قرار دهیم.
رویدادها در حالت عادی با توابع ترکیب می شوند، مانند صدا زدن یک تابع هنگامی که رویداد رخ می دهد.
در آموزش های بعدی درباره توابع و رویدادهای JavaScript بیشتر خواهید آموخت.
اسکریبت ها در دو قسمت <body> و <head>
Wiki
می توان به صورت نامحدود، هر تعداد خط اسکریبت را در صفحه HTML قرار داد، و همچنین می توانید اسکریبت ها را همزمان در دو قسمت <body> و <head> بیاورید.
در حالت کلی، تمام توابع را در قسمت <head> صفحه و یا در پایین صفحه قرار می گیرد. این روش باعث می شود که تداخلی با محتویات صفحه پیش نیاید.
کدهای JavaScript در قسمت <head>
Wiki
در مثال زیر، زمانی که روی دکمه کلیک شود یا به عبارتی رویداد onclick عنصر مورد نظر رخ دهد، تابع ()displayDate صدا زده می شود:
مثال (محل قرارگیری کدهای JavaScript)
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
خودتان امتحان کنید »
همچنین در مثال ساده زیر، هنگامی که روی دکمه "Try it" کلیک شود، محتوای عنصر با شناسه "demo" تغییر می کند:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
خودتان امتحان کنید »
یک تابع JavaScript در قسمت <body>
Wiki
در این مثال، تابع "myFunction" در انتهای <body> قرار داده شده است و وقتی کاربر روی دکمه "Try it" کلیک کند، myFunction صدا زده می شود:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
خودتان امتحان کنید »
استفاده از یک فایل JavaScript خارجی
Wiki
کدهای JavaScript را همچنین می توان در یک فایل خارجی قرار داد.
فایل های خارجی JavaScript اغلب شامل کدهایی است که در چندین صفحه HTML مختلف استفاده می شود.
این فایل ها را باید با فرمت "js." ذخیره نمود.
توجه: اسکریبت خارجی نمی تواند شامل تگ های باز و بسته <script> و <script/> باشد.
برای استفاه از یک فایل اسکریبت خارجی در صفحه HTML، باید خصوصیت "src" تگ <script> را با آدرس فایل، تنظیم کنید:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<body>
<script src="/myScript.js"></script>
</body>
</html>
خودتان امتحان کنید »
مدیریت خطاها در JavaScript
دستور try، به شما اجازه می دهد تا، خطاهای یک بلاک از دستورات را تست کنید.
دستور catch، خطاهای اتفاق افتاده در قسمت try را بررسی می کند.
دستور throw، به شما اجازه می دهد تا خطاهای سفارشی ایجاد کنید.
دلیل اتفاقِ خطاها!
Wiki
زمانی که موتور JavaScriptکدها را اجرا می کند، ممکن است خطاهای زیر اتفاق بیافتد:
1. خطای املای دستورات (syntax error)، که معمولاً توسط برنامه نویس اتفاق می افتد.
2. خطای گم شدگی خصوصیت (missing feature)، که ممکن است بخاطر تفاوت های بین مرورگرها و یا خطای املایی باشد.
3. خطای ورودی اشتباه (wrong input)، که می تواند توسط یک کاربر باشد.
و البته این خطاها می تواند چیزهای غیرقابل پیشبینی دیگری نیز باشد.
پرتاب خطا (Throw Error)
Wiki
زمانی که خطایی اتفاق می افتد، به طور معمول، اجرای دستورات متوقف شده و یک پیغام خطا تولید می شود.
اصطلاح تکنیکی برای این عمل، عبارت throw است (به معنی پرتاب کردن، به اصطلاح یک پیغام خطا به سمت catch پرتاب می شود)
try و catch در JavaScript
Wiki
عبارت try، به شما اجازه می دهد تا، خطاهای یک بلاک از دستورات را تست کنید.
اگر خطایی در قسمت try اتفاق بیافتد، دستورات تعریف شده در قسمت catch اجرا می شوند. (catch به معنی گرفتن، به اصطلاح خطاهای پرتاب شده از قسمت try در قسمت catch گرفته می شوند)
try و catch ها همیشه جفت جفت می آیند.
نحوه استفاده
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
مثال
در مثال زیر، در قسمت try، عمداً یک خطای املایی ایجاد کرده ایم.
قسمت catch خطایی که در try اتفاق افتاده را می گیرد و پیغام مناسب را چاپ می کند:
مثال (مدیریت خطاها در JavaScript)
<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>
خودتان امتحان کنید »
دستور throw
Wiki
دستور throw، به شما اجازه می دهد تا خطاهای سفارشی ایجاد کنید.
اصطلاح تکنیکی صحیح برای ایجاد خطا: عبارت "throw an exception" است.
دستور throw باید همراه try و catch استفاده شود.
نحوه استفاده
throw exception
exception می تواند یک رشته، یک عدد، یک داده Boolean و یا یک Object باشد.
مثال
این مثال، مقدار ورودی متغیر را تست می کند. اگر مقدار اشتباه باشد، یک خطا (exception) به سمت catch پرتاب (throw) می شود. قسمت catch خطا را می گیرد و پیغام مناسب را چاپ می کند.
مثال (مدیریت خطاها در JavaScript)
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="")    throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10)     throw "too high";
if(x<5)      throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
خودتان امتحان کنید »
توجه داشته باشید که در مثال بالا اگر در تابع getElementById مشکلی رخ دهد، خطای مناسب با آن پرتاب (throw) خواهد شد.
واکشی اطلاعات فایل xml با ajax
با استفاده از AJAX، می توانید با یک فایل XML، ارتباط متقابل داشته باشید.
واکشی اطلاعات از یک فایل XML با استفاده از AJAX
Wiki
در مثال زیر، نحوه واکشی اطلاعات از یک فایل XML، با استفاده از AJAX نشان داده شده است:
مثال (واکشی اطلاعات فایل xml با ajax)

اطلاعات گزینه انتخاب شده، اینجا نمایش داده می شود
توضیح مثال - صفحه HTML
Wiki
زمانی که کاربر، یکی از آیتم های لیست کشویی بالا را انتخب می کند، تابع "()showCD" فراخوانی و اجرا می شود. این تابع توسط رویداد "onchange" راه اندازی می شود:
<html>
<head>
<script>
function showCD(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<div id="txtHint"><b>اطلاعات گزینه انتخاب شده، اینجا نمایش داده می شود</b></div>

</body>
</html>
تابع ()showCD کارهای زیر را انجام می دهد:
- چک می کند که یک گزینه انتخاب شده باشد. (اگر گزینه ای انتخاب نشده باشد، محتوی عنصر با شناسه "txtHint" خالی می شود)
- یک شیء XMLHttpRequest ایجاد می شود.
- زمانی که پاسخ سرور، آماده شده باشد یک تابع ایجاد و اجرا می شود. (وظیفه این تابع این است که پاسخ دریافت شده از سرور را در عنصر با شناسه "txtHint" قرار دهد)
- درخواست یک فایل به سرور ارسال می شود.
- توجه داشته باشید که یک پارامتر (q) به URL اضافه شده است (با محتوای گزینه انتخاب شده)
توضیح مثال - فایل PHP
Wiki
فایلی که توسط کد JavaScript بالا صدا زده می شود یک فایل PHP بنام "getcd.php" است.
در فایل "getcd.php"، یک سند XML بنام "cd_catalog.xml" بارگذاری می شود. در این فایل یک جستجو انجام شده و نتیجه بصورت HTML برگردانده می شود.
<?php
$q=$_GET["q"];

$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=($x->length-1); $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
  {
  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
    {
    $y=($x->item($i)->parentNode);
    }
  }
}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++)
{
//Process only element nodes
if ($cd->item($i)->nodeType==1)
  {
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br>");
  }
}
?>
توضیح: زمانی که درخواست از JavaScript به فایل PHP ارسال می شود، کارهای زیر اتفاق می افتد:
1. یک شیء XML DOM ایجاد می شود.
2. تمام عناصر <artist> که با نام ارسال شده از JavaScript تطابق داشته باشند، پیدا می شود.
3. یک خروجی مناسب چاپ می شود و در نهاییت در عنصر با شناسه "txtHint" قرار می گیرد.
برای مشاهده فیلم ها و آموزش های پروژه محور برنامه نویسی PHP کلیک کنید.