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

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

javascript

یکی از زبان های انعطاف پذیر و در عین حال قدرتمندی که در کنار کدهای ساده HTML، مورد استفاده برنامه نویسان وب قرار می گیرد، جاوا اسکریپت (Javascript) است، البته شاید تصور شما از شنیدن عنوان کدهای جاوا اسکریپت بیشتر معطوف به کدهای کاربردی وبلاگ ها باشد، اما واقعیت این است که قدرت این زبان برنامه نویسی، خیلی بیشتر از نمودهای ظاهری است که می بینیم، بیشتر سایت ها و صفحات وب برای بررسی اعتبار فرم ها، ارتباط با سرور، شناسایی قابلیت های مرورگر کاربران، کار با کوکی ها (cookie) و خیلی چیزهای دیگر از آن استفاده می کنند، البته با همه این تفاسیر به دلیل سمت کاربر (Client side) بودن این زبان (یعنی جاوا اسکریپت تنها روی مرورگر کاربران قابل اجراست و برای تفسیر آن از مفسر مرورگر استفاده می شود نه مفسر سرور سایت)، در عین توانایی محدودیت هایی نیز وجود خواهد داشت.

شروع آموزش جاوا اسکریپت با یک مثال


برای شروع آموزش جاوا اسکریپت، بد نیست با هم یک مثال از قابلیت های این زبان اسکریپت نویسی را ملاحظه کنیم، در زیر یک کد ساده را جهت نمایش یک هشدار ایجاد کرده ایم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد یک هشدار در جاوا اسکریپت</title>
<!-- http://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 و... باشند.

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


همانطور که گفتیم، کدهای جاوا اسکریپت توسط مفسر مرورگر اجرا می شوند، لذا ویژگی هایی مثل تاریخ یا زمان، مبتنی بر تاریخ و زمان مرورگر و در واقع تاریخ و زمان سیستم عامل خواهند بود، مثالی برای ایجاد یک  متن همراه تاریخ (کدهای این مثال از یک فایل خارجی در صفحه ایمپورت شده اند):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد یک پاراگراف در جاوا اسکریپت</title>
<!-- http://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>
کد ایمپورت شده در صفحه:
// JavaScript Document
document.write("کد جاوا اسکریپت، ایجاد یک پاراگراف و نمایش تاریخ:<br />");
document.write("<p>" + Date() + "</p>");
پیش نمایش
توضیح:
- کدهای جاوا اسکریپت را می توان به صورت فایل خارجی نیز در صفحه ایمپورت کرد (شیوه استاندارد).
- توصیه می شود کدها را بین تگ head قرار دهید.
- ()Date یک تابع درونی جاوا اسکریپت است (یعنی این تابع و ویژگی های آن از قبل تعریف شده).
- از تگ noscript برای ایجاد پیام به کاربر در صورت فعال نبودن جاوا اسکریپت در مرورگرشان استفاده نمائید.
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» حلقه for و while در جاوا اسکریپت (JavaScript)
» رویداد ها (events) در جاوا اسکریپت (JavaScript)
» کار با switch و case در جاوا اسکریپت (JavaScript)
» مقایسه (Comparison) و شرط (If و Else) در جاوا اسکریپت (JavaScript)
» توابع (Functions) در جاوا اسکریپت (JavaScript)
commentنظرات (۷۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: علی
زمان: ۱۵:۲۶:۱۴ - تاریخ: ۱۳۹۴/۰۷/۱۷
درود بر شما
بله ممنون متوجه شدم
پس بنده آموزش ها رو دنبال خواهم کرد
یاعلی
نویسنده: محمد
زمان: ۰۳:۴۱:۲۷ - تاریخ: ۱۳۹۴/۰۷/۲۹
سلام مهندس جان
عذر می خوام قبلا این سوال رو از خدمتتون پرسیده بودم ولی چون نمی دونستم در کجاست دوباره می پرسم این کد رو من دارم
//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_destinationurl","opt_linktarget"]

var myvacation=new Array()
myvacation[0]=["../images/js_prev_pics/img3.jpg", "sample 1", "http://www.google.com"]
myvacation[1]=["../images/js_prev_pics/img3.jpg", "sample 2", "http://www.google.com"]
myvacation[2]=["../images/js_prev_pics/img3.jpg", "sample 3", "http://www.google.com"]
myvacation[3]=["../images/js_prev_pics/img1.jpg", "sample 4", "http://www.webkaran.com"]
myvacation[4]=["../images/js_prev_pics/img2.jpg", "sample 5", "http://www.yahoo.com"]
myvacation[5]=["../images/js_prev_pics/img3.jpg", "sample 6", "http://www.google.com"]
myvacation[6]=["../images/js_prev_pics/img1.jpg", "sample 7", "http://www.webkaran.com"]
myvacation[7]=["../images/js_prev_pics/img2.jpg", "sample 8", "http://www.yahoo.com"]
myvacation[8]=["../images/js_prev_pics/img3.jpg", "sample 9", "http://www.google.com"]

//initiate a photo gallery
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
var thepics=new photogallery(myvacation, 1, 1, '700px', '200px')

//----------------------------- راهنمایی ---------------------------------
// 1: تعداد تصاویر در هر ردیف
// 1: تعداد تصاویر در هر ستون
// 700: پهنای فضای گالری
// 200: ارتفاع فضای گالری
//--------------------------------------------------------------------------
//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
//DELETE everything below to disable
//Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
thepics.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
return false //cancel default action when clicking on image, by returning false instead of true
}
حالا می خوام در داخل این کد به جای از تیبل استفاده چون می خوام نوشته و عکس ها کنار هم باشند اگر بدون تیبل هم می شود عکس و تصویر رو مرتب کنار هم قرار داد مشکل من حل میشه کد جدول هم اینه
document.write("<table border='0' width='100%'>")
{document.write("<tr>")
document.write("<td><a target='_blank' href='http://www.YOUR_SITE.COM/LINK3.htm'><img src='http://www.yasell.biz/images/uploads/37_9310221421036074.gif' alt='BANNER3'></a></td>")
document.write("</tr>")}
document.write("</table>")
باز هم ممنون و سپاسگذارم
پاسخ: 
سلام
معمولا به این سبک سوالات به دلایل زیر هیچ پاسخی داده نمی شود:
- دو قسمت از کدی را درج کرده اید که هیچ ارتباطی با هم ندارند!
- امکان تست سریع و گرفتن خروجی به علت ناقص بودن کد وجود ندارد!
- با فرض ارائه پاسخ به این سوال، باید میزان زیادی کدنویسی اختصاصی انجام شود که از چارچوب خدمات معمول سایت خارج است!
اگر می خواهید برای این نوع سوالات به پاسخ برسید، کدها را در یک صفحه وب به صورتی که قابل تست باشد درج و حالت خروجی مد نظرتان را نیز به شکل اسکرین شات در فتوشاپ طراحی کنید، سپس لینک صفحه و تصاویر را در یک مطلب مرتبط (و اگر نبود از طریق قسمت تماس با ما) ارسال نمائید تا بررسی و پاسخ به ایمیل شما ارسال گردد.
نویسنده: محمد
زمان: ۰۲:۱۷:۱۸ - تاریخ: ۱۳۹۴/۰۷/۳۰
سلام
وقت بخیر و ممنون از شما و سایت خوبتون
یه سوال دارم در این کد به محض کلیک بر روی باکس ، کل نوشته ها ، هایلایت میشه من می خوام 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) زیر عکس ها میاد ولی بنده می خوام نوشته ها کنار عکس باشند
لطفا راهنمایی کنید
باز هم ممنون
پاسخ: 
سلام
کدی درج نشده؟!
نویسنده: محمد
زمان: ۲۰:۰۶:۴۳ - تاریخ: ۱۳۹۴/۰۸/۰۳
سلام
من محمد هستم
قبلا کدها رو براتون ارسال کرده بودم
می خواستم داخل این کدها تیبل قرار بدم (به خاطر اینکه می خواستم عکس ها کنار نوشته ها باشند نه زیرشان) که فرمودید نمیشه حالا می خوام بدونم ، بدون تیبل میشه نوشته ها به جای اینکه زیر عکس ها باشند کنارشان باشند
کد:
حذف شد
(البته کدها را قبلا به ایمیلتان فرستاده بودم)
ممنون
یاعلی
پاسخ: 
سلام
اگر دقت کنید قبلا به سوال مشابه شما پاسخ داده شده!، کدی هم که ارسال کردید صرفا یک صفحه وب خالی (در قسمت body که اصل کدها باید باشند، هیچ چیزی وجود ندارد!) با یک فایل 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 × 4
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

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

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