معرفی JavaScript

جاوا اسکریپت یک زبان مربوط به طراحی صفحات وب می باشد که دستورات آن را می توان در یک فایل جداگانه با پسوند js و یا در داخل یک فایل html نوشته و توسط مفسر کد یعنی مرورگر ( Browser ) لود کرد. شما می توانید با استفاده از این خط در یک فایل html مقادیر مربوط به جاوا را لود کنید.


برای استفاده از جاوا اسکریپت در طراحی صفحه بایستی کدها را در میان عبارت زیر به جای ... قرار داد البته بهتر است تا از حالت دوم استفاده کرد.


<script>...</script>
<script type="text/javascript">...</script>

شما مجاز هستید از کدهای جاوا اسکریپت در هر 2 قسمت کدهای صفحه یعنی body و head استفاده کنید به کد نمونه زیر نگاه کنید البته در ادامه توضیح خواهم داد که این کد چه نتیجه ای را برای شما نمایش خواهد داد ولی در حال حاضر به نحوه قرار گرفتن کد در صفحه توجه کنید :

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>

 در اینجا من مستقیماً کد جاوا اسکریپت را صفحه قرار دادم و به محض نمایش صفحه کد اجرا و نتیجه نمایش داده خواهد شد ولی ما می توانیم کد را به صورت یک تابع تعریف کنیم و تحت یک عملگر ( یعنی مثلاً با زدن یک کلید) خاص آن را فراخوانی کنیم.

نکته : توجه کنید بهترین مکان برای قرارگیری کدهای جاوا اسکریپت در قسمت head می باشد و یا در پایان مطالب یعنی دقیقاً قبل از تگ </body> ، که اگر می خواهید سرعت لود مطالب صفحه را بالا ببرید بهتر است قبل از تگ </body> باشد.

جاوا اسکریپت می تواند همانند کدهای css به 2 صورت inline و یا external در صفحه قرار بگیرد ، ابتدا به 2 صورت زیر نگاه کنید.

 

نحوه قرار گیری inline :

 در این حالت دستورات را مستقیماً در فایل اصلی می نویسید :


<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
</body>
</html>

نحوه قرار گیری external :

در این حالت شما کد جاوا اسکریپت را در یک فایل دیگر با پسوند js ذخیره می کنید و سپس آن فایل را فراخوانی می کنید به مثال زیر توجه کنید :

<!DOCTYPE html>
<html>
<head>
<script src="/myScript.js"></script>
</head>
<body>

</body>
</html>

زمانی بایستی از حالت مستقیم نوشتن کد یعنی inline استفاده کرد که تعداد سطر کدها ناچیز باشد ولی در صورتی که دستورات طولانی هستند بایستی در فایل جداگانه ذخیره شوند ( و اگر بدانید این برای شما بهتر است D-: ) علت این امر سادست به خاطر اینکه کدهای زیاد موجب بالا رفتن حجم صفحه شما میشود هر چند فراخوانی از طریق یک فایل خارجی هم باعث ایجاد یک درخواست به سمت سرور می شود و این نیز می تواند باعث ایجاد یک وقفه در لود صفحه شود ولی به هر حال استفاده از یک فایل خارجی برای کدهای طولانی بهتر است.

خروجی در html :

دستور document.write در واقع هر آنچه را که به عنوان مقدار داشته باشد در خروجی یا همان صفحه مرورگر نمایش می دهد شما می توانید تگ های html از قبیل img و یا br را نیز در این دستور نمایش بدهید به عنوان مثال این کد را امتحان کنید :

document.write("<h1<This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

ناحیه کاربری