- آموزش HTML و CSS و JS قسمت اول: مقدمه + ویدیو
- آموزش HTML و CSS و JS قسمت دوم: شروع قدرتمند با HTML
- آموزش HTML و CSS و JS قسمت سوم: شروع با CSS
- آموزش HTML و CSS و JS قسمت چهارم: HTML و CSS پیشرفته
- آموزش HTML و CSS و JS قسمت پنجم: آشنایی با برنامه نویسی JavaScript
- آموزش HTML و CSS و JS قسمت ششم: شروع قدرتمند با JQuery
در قسمت اول از این دوره آموزشی مثالی ساده از یک دستور ساده JavaScript به شما نشان دادیم.
همانطور که پیش از این گفتیم، اگر بخواهیم به عناصر حرکت دهیم و یا آن‌ها را تغییر دهیم باید از یک زبان سوم غیر از HTML و CSS استفاده کنیم. مثلا فرض کنید می‌خواهید به کاربر ساعت را نشان دهید، برای این کار نمی‌توان از HTML و یا CSS استفاده کرد و ساده ترین راه استفاده از کدهای جاوا اسکریپت است.
HTML و CSS در واقع زبان برنامه نویسی نیستند و می‌توان آن‌ها را زبان نشانه گذاری متن دانست. از این دو زبان برای نشانه گذاری متن‌ها برای قالب بندی صفحات استفاده می‌شود.
JavaScript یک زبان برنامه نویسی پیشرفته است که غیر از استفاده در طراحی صفحات وب چند وقتی است برای پیاده سازی سیستم‌های حرفه‌ای نیز مورد استفاده قرار می‌گیرد.
یادگیری JavaScript سخت تر از HTML و CSS است ولی در ادامه راه کارهای ساده تری برای استفاده از JavaScript برای پیاده سازی صفحات وب به شما معرفی می‌کنیم.
برای شروع مبحث برنامه نویسی JavaScript مثال زیر را در مرورگر مشاهده کنید:
<html>
<head>
<script>
function showtime() {
document.getElementById('time').innerHTML = Date();
}
</script>
</head>
<body onload="showtime()">
<p id="time"></p>
</body>
</html>در خط 9 و درون تگ body یک خاصیت با نام onload یک تابع با نام showtime() را صدا می‌زند.
تابع showtime در خط 4 و درون تگ script تعریف شده است. این تابع را برای بررسی بیشتر در پایین دوباره می‌آوریم:
function showtime(){
document.getElementById('time').innerHTML = Date();
}برای تعریف یک تابع در JavaScript از عبارت function استفاده می‌کنیم. مقابل نام تابع از دو پرانتز خالی استفاده کرده و کدها را درون کروشه باز و بسته قرار می‌دهیم.
در خط دوم کدهایی که می‌بینید برای درج زمان در تگی با idای با نام time استفاده می‌شوند. عبارت getElementById('time') تگ با شناسه time را انتخاب کرده و عبارت innerHTML درون این تگ انتخاب شده مقدار تابع Date() را قرار می‌دهد. تابع Date() تاریخ و زمان فعلی را به ما می‌دهد.
نتیجه اجرای کدهای فوق را در پایین می‌بینید:
کدهای فوق کمی پیچیده هستند، اساسا کار کردن با JavaScript سخت است، یکی از راه کارهایی که کار کردن با این زبان را ساده می‌کند استفاده از کتابخانه‌های جانبی است. یک کتابخانه جانبی JQuery نام دارد.
JQuery چیست
کدهای JavaScript پیچیده و طولانی هستند، JQuery راه کاری است که کد نویسی JavaScript را راحت تر انجام می‌دهد. برای فراخوانی این کتابخانه باید به ابتدای کدهای خود این کتابخانه را به صفحه خود اضافه کنید. مثلا:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body></body>
</html>برای اطمینان از فعال بودن این کتابخانه بعد از تگ script فوق یک تگ دیگر با محتوای زیر فراخوانی می‌کنیم:
<script>alert(jQuery.fn.jquery);</script>اگر کتابخانه JQuery فعال باشد حین اجرای کد فوق باید پنجره زیر به نمایش در آید:
حال قصد داریم مثال نمایش زمان با JavaScript را این بار با Jquery باز نویسی کنیم:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$('#time').html(new Date());
})
</script>
</head>
<body>
<p id="time"></p>
</body>
</html>در خط سوم کتابخانه JQuery را فراخوانی کردیم. در خط 5 تا 7 کدهای مربوط به نمایش زمان در تگ با شناسه time را می‌بینید. این کدها را دوباره در پایین برای بررسی بیشتر می‌آوریم:
$(document).ready(function(){
$('#time').html(new Date());
})در خط اول با عبارت $(document).ready اعلام می‌کنیم اگر صفحه به طور کامل لود شد کدهای زیر آن اجرا می‌شوند.
در خط دوم در $('#time') اعلام می‌کنیم که تگی با شناسه time را انتخاب کن و با .html اعلام می‌کنیم محتوای خاص درون پرانتز را در تگ با شناسه time قرار بده. new Date() نیز به سادگی زمان را به تگ مورد نظر می‌دهد.
نتیجه اجرای کدهای فوق را در پایین می‌بینید:
همانطور که در بالا دیدید با JQuery فرایند برنامه نویسی ساده تر و البته قدرتمندتر خواهد بود. در قسمت بعدی قصد داریم به صورت تخصصی تر به آموزش JQuery بپردازیم.
تگ ها: htmljavascriptjquery
