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 مطالب بیشتر:
» توابع (Functions) در جاوا اسکریپت (JavaScript)
» حلقه for و while در جاوا اسکریپت (JavaScript)
» آرایه (Array) در جاوا اسکریپت (JavaScript)
» تعریف متغیرها، محاسبات و عملگرها در جاوا اسکریپت (javascript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
commentنظرات (۷۲ یادداشت برای این مطلب ارسال شده است)
نویسنده: محمد
زمان: ۰۲:۱۷:۱۸ - تاریخ: ۱۳۹۴/۰۷/۳۰
سلام
وقت بخیر و ممنون از شما و سایت خوبتون
یه سوال دارم در این کد به محض کلیک بر روی باکس ، کل نوشته ها ، هایلایت میشه من می خوام 3 عدد باکس کنار هم قرار بدم ولی قبول نمیکنه و فقط باکس بالایی هایلایت میشه
لطفا راهنمایی کنید ممنون
<script type="text/javascript">
function SelectAll(id){
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>
Textarea:<br>
<textarea rows="3" id="txtarea_1" onClick="SelectAll(this.id);" style="width:200px" >This text you can select all by clicking here </textarea>
<br>
Textarea:<br>
<textarea rows="3" id="txtarea_2" onClick="SelectAll(this.id);" style="width:200px" >This text you can select all by clicking here </textarea>
<br>
Textarea:<br>
<textarea rows="3" id="txtarea_3" onClick="SelectAll(this.id);" style="width:200px" >This text you can select all by clicking here </textarea>
پاسخ: 
باید برای هر باکس یک ID اختصاصی در نظر بگیرید و آن را به عنوان آرگیومنت به تابع بدهید، کد بالا اصلاح شد!
نویسنده: محمد
زمان: ۰۳:۲۳:۵۲ - تاریخ: ۱۳۹۴/۰۸/۰۱
سلام
خدا خیرتون بده ممنون کارم راه افتاد ولی یک سوال در همین مورد دارم.
بنده قبلا این کار رو به این صورت انجام داده بودم ولی درست نمی شد
Textarea:<br>
<textarea rows="3" id="txtarea" onClick="SelectAll('txtarea');" style="width:200px" >This text you can select all by
clicking here </textarea>
Textarea:<br>
<textarea rows="3" id="txtarea1" onClick="SelectAll('txtarea');" style="width:200px" >This text you can select all by
clicking here </textarea>
پس برای اختصاص آیدی ، حتما باید از کاراکتر آندرلاین (_) استفاده کنیم؟
پاسخ: 
آرگیومنت ارسال شده به تابع باید برای هر فیلد، ID همان فیلد باشد، در کدهای شما آرگیومنت ها مشترک هستند!
onClick="SelectAll('txtarea');"
نویسنده: محمد
زمان: ۰۲:۲۳:۳۳ - تاریخ: ۱۳۹۴/۰۸/۰۳
سلام مهندس
عذر می خوام باز هم مزاحم شدم ببینید در کد بالا من مشکلم این هست که نوشته ها (sample) زیر عکس ها میاد ولی بنده می خوام نوشته ها کنار عکس باشند
لطفا راهنمایی کنید
باز هم ممنون
پاسخ: 
کدی درج نشده؟!
نویسنده: محمد
زمان: ۲۰:۰۶:۴۳ - تاریخ: ۱۳۹۴/۰۸/۰۳
سلام
من محمد هستم
قبلا کدها رو براتون ارسال کرده بودم
می خواستم داخل این کدها تیبل قرار بدم (به خاطر اینکه می خواستم عکس ها کنار نوشته ها باشند نه زیرشان) که فرمودید نمیشه حالا می خوام بدونم ، بدون تیبل میشه نوشته ها به جای اینکه زیر عکس ها باشند کنارشان باشند
کد:
حذف شد
(البته کدها را قبلا به ایمیلتان فرستاده بودم)
ممنون
یاعلی
پاسخ: 
کدی که ارسال کرده اید صرفا یک صفحه وب خالی با یک فایل CSS است که قاعدتا با توجه به خالی بودن صفحه وب از کد، نمی توان تست خاصی کرد! لطفا یک آدرس آنلاین که کد فعلی در آن درج شده و فعال باشد را به همراه اسکرین شات از حالت مد نظرتان ارسال کنید تا امکان پاسخگویی وجود داشته باشد.
نویسنده: محمد
زمان: ۲۲:۲۰:۳۰ - تاریخ: ۱۳۹۴/۰۸/۰۳
سلام مهندس
عذر می خوام که وقتتون رو می گیرم این کد کامل صفحه است
http://www.webkaran.com/javascript_codes.html
(اسکریپت گالری تصاویر با قابلیت صفحه بندی)
ممنونم
پاسخ: 
این یک کد آماده است و تغییر سفارشی این موارد جزء خدمات سایت نیست! صرفا جهت راهنمایی:
باید یک استایل به صفحه خود اضافه کنید، مانند:
#photogallery-1 td, #photogallery-1 td img{
position:relative
}
#photogallery-1 td img{
z-index:-1
max-width:100%;
}
#photogallery-1 td div{
position:absolute;
bottom:0;
background:rgba(0,0,0,0.5);
color:#fff;
width:auto;
margin-left:40px;
}
سپس فایل photogallery.js را ویرایش کرده و در خط 43 کد را به صورت زیر تغییر دهید:
imageHTML+='<br /><div>'+imgparts[1]+'</div>';
با این کار نوشته داخل یک بلاک div داخل تگ td چاپ می شود که با توجه به استایل CSS اختصاص داده شده، بر روی تصاویر قابل نمایش است، البته قاعدتا تنظیم این موارد مطابق با نیاز و سلیقه، زمانبر است که باید با توجه به راهنمایی خودتان برای رفع ایرادات احتمالی اقدام کنید.
نویسنده: محمد
زمان: ۰۰:۲۳:۴۸ - تاریخ: ۱۳۹۴/۰۸/۰۵
سلام و درود بر شما
ممنون از راهنماییتون وقتی که کد بالا را قرار دادید این کار را انجام دادم ولی به نتیجه دلخواه نرسیدم اما با آزمون و خطا ، سرانجام به این نتیجه رسیدم که اگر همان تگ
<br />
را بردارم مشکلم حل میشه و نوشته ها کنار عکس ها قرار می گیرند . اما این کار را بعد از خدا حاصل زحمات شما استاد گرامی می دانم که بنده متوجه شدم چه جور میشه این کار رو انجام داد
خدا به شما خیر بده که کار مردم را راه می اندازید
یا علی مدد
پاسخ: 
خواهش، خوشحالیم که مشکل بر طرف شد.
نویسنده: بهنام
زمان: ۱۸:۲۱:۰۶ - تاریخ: ۱۳۹۴/۰۹/۱۳
سلام استاد عزیز
یه سوالی از جاوا اسکریپت داشتم
این عملگرهای تو جاوا اسکریپت چرا دو عدد رو جمع نمیکنن یا ضرب نمیکنند مثلا من گفتم یه عدد از اینپوت بگیر و با دو ضرب کن ولی مقداری که از اینپوت میگیره استرینگ هستش چطوری اونو تبدیل به اینتجر کنم
مثلا
document.getElementsByTagName("input")[0].value = document.getElementsByTagName("input")[0].value * 2;
مقدار 2 اینتجر هستش و خود اینپات استرینگ چطور اونو به اینتجر تبدیل کنم و ضرب کند؟
جوابو اینگونه نمایش میده مثلا داخل اینپوت بنویسیم 15 و ضرب در 2 که نوشتم باید بشه 30 ولی اون 152 نشون میده دو عدد و کنار هم میگذاره
پاسخ: 
برای پردازش یک مقدار به شکل عددی از تابع parseInt استفاده کنید، مثال:
document.getElementsByTagName("input")[0].value = parseInt(document.getElementsByTagName("input")[0].value) * 2;
نویسنده: صابری
زمان: ۰۹:۰۸:۲۹ - تاریخ: ۱۳۹۴/۰۹/۱۶
سلام
اموزشتون عالی
فقط یه مشکل دارم
من هرکدوم از (css,html,js) به طور فایل جدا ذخیره کردم الان دقیقا تو js باید چی بنویسم که به دو تای دیگه متصل بشه
ممنون اگه پاسخ بدین.
پاسخ: 
سلام
اگر منظور وارد کردن فایل js درون صفحه HTML است، کافی است ترجیحا در قسمت تگ head از تگ script به صورت نمونه زیر استفاده کنید:
<script type="text/javascript" src="http://yoursite.com/path/to/file.js"></script>
در قسمت src باید آدرس مطلق یا نسبی محل قرارگیری فایل js را وارد کنید.
نویسنده: malihe
زمان: ۲۰:۳۰:۳۵ - تاریخ: ۱۳۹۴/۰۹/۲۵
خیلی روان و سلیس بود توضیحات .. مرسی
نویسنده: بنیامین
زمان: ۱۳:۲۴:۵۴ - تاریخ: ۱۳۹۴/۱۰/۰۹
بهتر نیست آموزش هاتونو در حد مبتدی بزارید // خوب اینطوری آدم یاد نمیگیره که.
پاسخ: 
یادگیری جاوا اسکریپت مستلزم این است که پیش از این آشنایی با HTML و CSS داشته باشید، به عبارتی دیگر نباید شروع فراگیری دانش وبتان با این زبان باشد، همچنین به جهت گسترده بودن موضوعات، به مطالب یک منبع اکتفا نکنید!
نویسنده: محمد
زمان: ۰۹:۵۷:۴۴ - تاریخ: ۱۳۹۴/۱۲/۲۵
سلام دنبال یک کتاب یا مقاله آموزش جاوا اسکریپت هستم که کامل باشد شما چیزی سراغ داردی؟
پاسخ: 
با توجه به گستردگی مباحث، چیزی به عنوان مقاله یا کتاب کامل وجود ندارد! باید سعی کنید اصول کار را از یک منبع مناسب فرا بگیرید (معمولا منابع وب کافی خواهد بود) و در مورد جزئیات و نکات پیچیده تر، با توجه به نیازتان مباحث را جستجو و به صورت موردی مطالعه و تمرین کنید.
نویسنده: محسن(مبتدی)
زمان: ۱۹:۳۹:۴۲ - تاریخ: ۱۳۹۵/۰۴/۲۱
استاد میشه بگید ما کدهای ایمپورت شده رو دقیقا باید کجای قالب بالایی قرار بدیم چون من هرچی میزنم تقویم نمیاد و چن تا نوشته درهم رو مینویسه
پاسخ: 
در صفحه پیش نمایش این مطلب، با توجه به مرورگر، گزینه نمایش Source کد HTML را انتخاب کنید، مشخص است!
paged صفحه 5 از 5




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

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

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

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