i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
parsgreen.com
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)

javascript

یکی از زبان های انعطاف پذیر و در عین حال قدرتمندی که در کنار تگ های ساده HTML و استایل CSS مورد استفاده برنامه نویسان وب قرار می گیرد، زبان برنامه نویسی جاوا اسکریپت (JavaScript) است، البته شاید تصورمان از شنیدن عنوان جاوا اسکریپت بیشتر معطوف به کدهای کاربردی وبلاگ ها و سایت ها شود، اما در واقع باید گفت قدرت این زبان برنامه نویسی خیلی بیشتر از نمودهای ظاهری است که می بینیم و احیانا به عنوان مدیر وبلاگ یا سایت با آنها سر و کار داریم، در دنیای حرفه ای بیشتر سایت ها و صفحات وب برای ایجاد انواع قابلیت های تعاملی سمت کاربر، بررسی اعتبار فرم ها، ارتباط با سرور، شناسایی قابلیت های مرورگر کاربران، کار با کوکی ها (Cookie) و مواردی از این دست از جاوا اسکریپت استفاده می کنند، البته با همه این تفاسیر به دلیل سمت کاربر (Client-side) بودن این زبان (یعنی جاوا اسکریپت تنها روی مرورگر کاربران قابل اجراست و برای تفسیر آن از مفسر مرورگر استفاده می شود نه سرور سایت)، در عین قدرتمندی محدودیت هایی نیز وجود خواهد داشت که جزء ویژگی های ذاتی هر زبان برنامه نویسی محسوب می شود.

اهمیت آموزش جاوا اسکریپت و چند مثال


همان طور که اشاره شد فراگیری جاوا اسکریپت جهت تکمیل روند آموزش مهارتهای برنامه نویسی وب گام سوم محسوب می شود، یعنی پس از آشنایی و تسلط بر HTML و CSS، نیاز به یک زبان اسکریپت نویسی داریم تا بتوانیم با قدرت بیشتری صفحات وب خود را خلق نمائیم، این زبان اسکریپتی در وب همان جاوا اسکریپت است که البته کاربرد آن منحصر به وب نیست و گستره وسیعی دارد، منظور از اسکریپتی بودن جاوا اسکریپت این است که این زبان صرفا در مرورگر تفسیر (Interprete) شده و توسط ماشین کامپایل (Compile) نمی شود، با توجه به اهمیت درک جاوا اسکریپت و گستره وسیع استفاده از آن، اغلب به علاقمندان برنامه نویسی توصیه می شود این زبان را در کنار سایر زبان های تخصصی مورد نظرشان بیاموزند، برای شروع آموزش های این قسمت، بد نیست یک مثال از قابلیت های اسکریپت نویسی این زبان را بررسی کنیم، در زیر کدی ساده را جهت نمایش یک هشدار ایجاد کرده ایم.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد یک هشدار در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    text-align:justify;
    font-size:12px;
    direction:rtl;
}
</style>
<script type="text/javascript">
//نمایش یک پیام
window.alert("سلام! این یک پیام جاوا اسکریپت است");
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>
<hr>
کدهای جاوا اسکریپت بین تگ script نوشته می شوند.
</body>
</html>
پیش نمایش
همانطور که می بینید شیوه نوشتاری (Syntax) این زبان به طور کلی به صورت زیر است:
object.method(argument1, argument2);
آبجکت ها در جاوا اسکریپت می توانند به طور مثال document یا window و متد نیز به فرض write، alert باشند، در صورتی که با این مفاهیم (آبجکت، متد) آشنایی قبلی ندارید جای نگرانی نیست، در این مرحله نیازی به درک عمیق این مفاهیم نیست و همین که بدانیم چگونه از نمونه کدها مطابق با نیازمان پیروی کنیم، کافی خواهد بود!

مثالی دیگر با جاوا اسکریپت


همانطور که گفتیم، کدهای جاوا اسکریپت توسط مفسر مرورگر اجرا یا به عبارت صحیحتر تفسیر (Interprete) می شوند، لذا ویژگی هایی مانند تاریخ یا زمان، مبتنی بر تاریخ و زمان مرورگر و در واقع تاریخ و زمان سیستم عامل خواهند بود، مثالی برای ایجاد یک متن همراه تاریخ (در جاوا اسکریپت نیز مانند CSS می توان دستورات را به شکل یک فایل خارجی در صفحه وارد کرد، کدهای این مثال نیز از یک فایل خارجی در صفحه ایمپورت شده اند):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد یک پاراگراف در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<script type="text/javascript" src="docwrite.js"></script>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    text-align:justify;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>
<hr>
کدهای این صفحه به صورت یک فایل خارجی ایمپورت شده است.
</body>
</html>
کد ایمپورت شده در صفحه:
document.write("کد جاوا اسکریپت، ایجاد یک پاراگراف و نمایش تاریخ:<br>");
document.write("<p>" + Date() + "</p>");
پیش نمایش
توضیح:
- همان طور که اشاره شد، کدهای جاوا اسکریپت را می توان به صورت فایل خارجی نیز در صفحه ایمپورت کرد، اغلب برای کاهش حجم صفحات وب و افزایش سرعت بارگذاری، دستورات جاوا اسکریپت را تا حد امکان در یک یا چند فایل تجمیع می کنند.
- توصیه می شود کدها را بین تگ head قرار دهید مگر در مواردی که نیاز باشد آنها را در انتهای صفحه یا در قسمت دیگری درج نمائید، البته این توصیه بیشتر برای مواقعی است که به فرض یک فایل یا کتابخانه حجیم را در صفحه وارد می کنید.
- Date یک تابع درونی جاوا اسکریپت است (یعنی این تابع و ویژگی های آن از قبل در مفسر تعریف شده)، از تابع Date برای موارد مربوط به تاریخ و زمان استفاده می شود (در آموزش های پیش رو در این رابطه بیشتر خواهیم گفت).
- از تگ noscript برای نمایش پیام هشدار به کاربر در صورت فعال نبودن جاوا اسکریپت در مرورگر استفاده نمائید، اگرچه در اغلب مرورگرها امکان جاوا اسکریپت جزء ملزومات اولیه بوده و به صورت پیش فرض فعال است، اما ممکن است به دلایلی خواسته یا ناخواسته این امکان غیرفعال شده باشد، پس بهتر است با نمایش یک پیام هشدار، کاربر را نسبت به این موضوع آگاه کنیم.
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» کار با پنجره pop up در جاوا اسکریپت (JavaScript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
» مقایسه (Comparison) و شرط (If و Else) در جاوا اسکریپت (JavaScript)
» کار با switch و case در جاوا اسکریپت (JavaScript)
» رویداد ها (events) در جاوا اسکریپت (JavaScript)
commentنظرات (۷۲ یادداشت برای این مطلب ارسال شده است)
نویسنده: محمد
زمان: ۱۰:۴۹:۱۶ - تاریخ: ۱۳۹۳/۰۴/۰۳
چطوری میشه با جاوا اسکریپت یک چیزی مثل عکس رو حرکت داد؟
پاسخ: 
سوال کلی است! بسته به نوع حرکت (به طور مثال پرش از بالا به پائین یا انتقال آزاد و...) و رویداد مورد نظر (به فرض کلیک کاربر، استفاده از دکمه های صفحه کلید و...)، روش کار نیز متفاوت خواهد بود که البته معمولا نوشتن کد آن به دلیل پیچیده بودن ماهیت کار زمانبر است.
نویسنده: بهنام
زمان: ۱۴:۵۵:۴۸ - تاریخ: ۱۳۹۳/۰۴/۲۲
سلام استاد عزیزم
چطور میشه با جاوا اسکریپت یه بلاک div را در صفحه با کلیک کردن ماوس و کشاندن این بر و آن بر حرکتش داد؟
حد امکان اگر کدهاش زیاده نمونه کد را در قسمت نظرات کد اماده بفرستید ممنون
پاسخ: 
این نمونه آماده را بررسی کنید، واضح است:
http://jsfiddle.net/tovic/Xcb8d/light
نویسنده: بهنام
زمان: ۱۱:۲۹:۳۹ - تاریخ: ۱۳۹۳/۰۴/۲۳
سلام
ممنون
لینکی که دادین کد های آن را در صفحه ی تو لوکال هاست میریزم اما با کلیک ماوس بلاک تکان نمیخورد ولی در لینکی که شما دادین تکان میخورد دقیقا همان کد ها را کپی کردم کار نکرد چرا؟
پاسخ: 
سعی کنید پلاگین مربوط به نمایش خطاهای جاوا اسکریپت را در مرورگر داشته باشید، به طور مثال پلاگین Web Developer Toolbar برای فایرفاکس، مشکل از این قسمت است:
document.getElementById('draggable-element').onmousedown = function () {
_drag_init(this);
return false;
};
که خطای
TypeError: document.getElementById(...) is null
می دهد، این قسمت زمانی باید اجرا شود که پیشتر بلاک div در HTML DOM پردازش شده باشد، به عبارتی یا باید بلاک div قبل از تکه کد اسکریپت قرار گیرید، یا بخش مورد نظر اسکریپت به صورت زیر ویرایش شود:
window.onload = function(){
document.getElementById('draggable-element').onmousedown = function () {
_drag_init(this);
return false;
};
}
نویسنده: بهنام
زمان: ۱۲:۴۸:۲۷ - تاریخ: ۱۳۹۳/۰۴/۲۳
یه سوال دیگه داشتم
نمیدونم سی اس اس بود یا جاوا اسکریپت یا پی اچ پی ولی این امکان رو میداد:
در تگ table مثلا ستون چند تا ستون داریم فکر کنم سی اس اس اس بود که میشد ستون های فرد و ستون های زوج را هرکدام یه استایلی بدیم لطفا آن کد را معرفی کنید؟
پاسخ: 
این کار با PHP و CSS انجام می شود، با PHP به صورت زوج و فرد تگ های tr با دو کلاس CSS متفاوت خروجی داده می شوند و نتیجه جدولی با ستون های زوج و فرد دیده می شود، مثال در قسمت PHP:
<?php
$class = "color-1";
while($row = mysql_fetch_array($result)){
if($class == "color-1"){
echo "<tr class='$class'>";
$class = "color-2";
}
else{
echo "<tr class='$class'>";
$class = "color-1";
}
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "</tr>";
}
?>
و در قسمت CSS:
<style type="text/css">
tr.color-1{
background-color:#FFF;
}
tr.color-2{
background-color:#CCC;
}
</style>
نتیجه فرضی:
<table>
<tr class="color-1">
<td>FirstName</td>
<td>LastName</td>
</tr>
<tr class="color-2">
<td>FirstName</td>
<td>LastName</td>
</tr>
<tr class="color-1">
<td>FirstName</td>
<td>LastName</td>
</tr>
</table>
نویسنده: بهنام
زمان: ۲۳:۳۳:۰۶ - تاریخ: ۱۳۹۳/۰۴/۲۳
سلام
خیلی تشکر می کنم بابت جواب.
لطفا ایمیلتون رو چک کنید.
نویسنده: بهنام
زمان: ۰۴:۵۰:۵۴ - تاریخ: ۱۳۹۳/۰۴/۲۵
سلام
از جواب دقیق شما بسیار ممنون، کامل فرا گرفتم فقط چند سوال جزئی مانده:
x_pos = document.all ? window.event.clientX : e.pageX;
1. شرط document.all چه موقع ای اعمال میشه؟ یعنی چه موقع ای window.event.clientX اجرا میشود؟
2. و document.all یعنی چه؟
3. چرا window.event.clientX آره ؟ چرا e.clientX نه؟ چرا از window.event استفاده شده است؟
4. اگر کد:
x_pos = document.all ? window.event.clientX : e.pageX;
را به کد زیر تغییر دهیم مشکلی از نظر من پیش نمیاید و فرقشون چیه؟ چه اتفاقی بعد ها میفته؟
x_pos = e.pageX;
پاسخ: 
در یک توضیح می توان پاسخ تمام سوالتتان را داد:
document.all شرط نیست، متدی برای دسترسی به تمام عناصر موجود در صفحه HTML یا HTML DOM است، البته این متد قدیمی و مخصوص مرورگر IE است که اگر توسط مرورگر پشتیبانی شود (یعنی مرورگر نسخه قدیمی IE باشد)، قسمت window.event اجرا و در غیر این صورت e اجرا می شود (e مخفف Event و معرفی برای بروز یک رویداد در مرورگرهای جدید است)، لذا در مرورگرهای جدید اگر قسمت نخست را حذف کنید اتفاق خاصی نمی افتد!
نویسنده: بهنام
زمان: ۰۰:۵۶:۰۸ - تاریخ: ۱۳۹۳/۰۴/۲۶
سلام
نهایت تشکر را از شما دارم امیدوارم در این دنیا و آخرت خیر ببینی با تشکر !
لطف بفرمایید لینک لیست رویدادها در جاوا اسکریپت را بدین به طور اتفاقی تو سایتتون پیدا کردم دیگه یادم رفت کجا بود!
پاسخ: 
تشکر، می توانید برای دسترسی به لیست رویدادها در جاوا اسکریپت از لینک زیر استفاده کنید:
http://webgoo.ir/example/javascript/javascript-event-list.html
نویسنده: بهنام
زمان: ۲۳:۵۲:۱۲ - تاریخ: ۱۳۹۳/۰۴/۲۸
سلام و عرض ادب.
سوالی داشتم : چرا در کد زیر کد:
eighteenth = document.getElementById('nineteenth').innerHTML;
را قبلش با var شروع کنیم کد دچار مشکل میشود و دیگر تایپ نمیکند؟ یعنی کد بالا را به این صورت ویرایش کنیم
var eighteenth = document.getElementById('nineteenth').innerHTML;
در کد زیر:
var seventeenth = 0;
window.onload = function(){
eighteenth = document.getElementById('nineteenth').innerHTML;
document.getElementById('nineteenth').innerHTML = '';
sixth();
}
function sixth(){
document.getElementById('nineteenth').innerHTML += eighteenth.charAt(seventeenth);
if(seventeenth < eighteenth.length){
seventeenth++;
setTimeout('sixth()', 100);
}
else return true;
}
پاسخ: 
از متغیر eighteenth در توابع دیگر استفاده شده، لذا نمی تواند درون تابع با عبارت var تعریف شود، چون دامنه شمول (Scope) آن محدود به تابع می شود و از بیرون تابع قابل فراخوانی نیست، اگر متغیر بدون عبارت var (یا با عبارت var ولی بیرون از توابع) تعریف شود، دامنه سراسری یا Global Scope می گیرد و در همه جای کدها قابل دسترسی است.
نویسنده: مهدی
زمان: ۱۴:۳۹:۱۶ - تاریخ: ۱۳۹۳/۰۴/۳۰
با سلام. آیا امکان دارد متغییری را تعریف کرد. سپس متن یک text را به آن مقدار دهی کرد. سپس محتوای این متغییر را با قسمت خاصی از متن یک textarea جایگزین کرد؟؟
یا حداقل به قسمت مشخصی از متن textarea اضافه کرد. اگر می شود لطفا توضیحاتی درباره آن ها بدهید.
پاسخ: 
سوال مبهم و کلی است! در مجموع این کار در شرایطی شدنی است منتها بسته به هدف و سورس صفحه، ممکن است نیاز به کدنویسی خاصی باشد به طور مثال استفاده از عبارات باقاعده (Regex) و متدهای مربوطه.
نویسنده: بهنام
زمان: ۲۳:۲۲:۵۴ - تاریخ: ۱۳۹۳/۰۴/۳۰
سلام
کد اسکی یعنی چه؟ آیا کد اسکی همان کی کد است؟
document.write('w'.charCodeAt(0));
در کد فوق معنی اینکه کد اسکی w 119 است یعنی چه؟
پاسخ: 
عبارت ASCII مخفف American Standard Code for Information Interchange است که در اصطلاح به مجموعه ای از کاراکترهای تعریف شده در قالب یک استاندارد جهت تفهیم علایم به سیستم ها در قالب جدول اعداد گفته می شود، به عبارتی در این استاندارد هر عدد معادل یک حرف یا کاراکتر خاص است، این استاندارد به این دلیل که کامپیوترها اغلب تنها قادر به پردازش اعداد بودند شکل گرفت و امروزه کاربردهای مختلف دارد، اطلاعات بیشتر:
http://www.asciitable.com
نویسنده: بهنام
زمان: ۰۹:۱۸:۳۶ - تاریخ: ۱۳۹۳/۰۵/۰۲
سلام
خسته نباشید
نویسنده: بهنام
زمان: ۲۰:۴۹:۱۴ - تاریخ: ۱۳۹۳/۰۵/۰۵
سلام
در کد زیر میخواهم پنجره ی پیغام در صورتی که فیلدی خالی بود ظاهر شه و بین دو تا + + ها کدی بنویسید که اگر فیلد های 2 و 3 خالی بود بگه لطفا فیلد 2 را خالی نگذارید یک بار دیگه برای فیلد 3 همچین پیغامی را بده در واقع قسمت آرایه هارو میخوام برگردانه
var elm = new Array();
function myFunction(){
var elm = new Array();
elm[0] = myform.name;
elm[1] = myform.famil;
elm[2] = myform.sen;
elm[3] = myform.about;
for(var i = 0; i <= 3; i++){
if(elm[i].value.length < 1){
alert('لطفا فیلد ' + + ' را خالی نگذارید');
}
}
}
پاسخ: 
اگر درست متوجه سوال شده باشیم، هر دور از حلقه مخصوص به یک عضو آرایه است، لذا متغیر i یا i + 1 می تواند بین دو + + استفاده شود.
نویسنده: بهنام
زمان: ۱۵:۲۰:۳۸ - تاریخ: ۱۳۹۳/۰۷/۱۵
سلام و عرض ادب عید قربان رو بهتون تبریک و تهنیت عرض میکنم
function NewDaste(){
document.getElementById('page').style.display = 'none';
var elm = document.getElementById('newpage').style;
elm.display = 'block';
elm.margin = 'auto';
}
من یه کد نوشتم و وقتی فانکشن را صدا میزنم در مرورگر فایرفاکس به خوبی عمل میکند و در گوگل کروم کار نمیکنه چرا؟
<option value="newcat" onclick="NewDaste();">ایجاد یک دسته جدید</option>
در ضمن موقع فراخوانی تابع به این صورت هست
ولی اگه به تگ دیگه ای onclick بدم تو کروم هم کار میکنه تو تگ آپشن کار نمیکنه
پاسخ: 
تشکر، رویداد onclick برای تگ option پشتیبانی نمی شود، به جای آن از onchange برای تگ select استفاده کنید و برای برگرداندن مقدار انتخاب شده، در قسمت آرگومان تابع، this.value قرار دهید.
<script type="text/javascript">
function alertValue(value){
alert(value);
}
function alertText(element){
var text = element.options[element.selectedIndex].text;
alert(text);
}
</script>
<select onchange="alertValue(this.value)">
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>
<select onchange="alertText(this)">
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>
نویسنده: بهنام
زمان: ۰۰:۰۰:۳۸ - تاریخ: ۱۳۹۳/۰۷/۱۶
با تشکر از شما
یه سوال داشتم چرا سایت وبگو به روز نمیشه؟ خوشحال میشم مطلب جدیدی و آموزش های جدیدتری ارسال کنید با تشکر
پاسخ: 
فعلا آموزش ها به همین روال خواهند بود تا روند تغییرات سایت تکمیل و به نسخه جدید به روزرسانی گردد!
نویسنده: بهنام
زمان: ۱۴:۴۸:۴۶ - تاریخ: ۱۳۹۳/۰۷/۱۷
سلام استاد بزرگوار خسته نباشین
امیدوارم موفق باشی من منتظر بروز رسانی سایتتون هستم
paged صفحه 3 از 5




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 6
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)