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 مطالب بیشتر:
» کار با پنجره pop up در جاوا اسکریپت (JavaScript)
» تعریف متغیرها، محاسبات و عملگرها در جاوا اسکریپت (javascript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
» توابع (Functions) در جاوا اسکریپت (JavaScript)
» کار با switch و case در جاوا اسکریپت (JavaScript)
commentنظرات (۷۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: بهنام
زمان: ۰۰:۰۰:۳۸ - تاریخ: ۱۳۹۳/۰۷/۱۶
با تشکر از شما
یه سوال داشتم چرا سایت وبگو به روز نمیشه؟ خوشحال میشم مطلب جدیدی و آموزش های جدیدتری ارسال کنید با تشکر
پاسخ: 
فعلا آموزش ها به همین روال خواهند بود تا روند تغییرات سایت تکمیل و به نسخه جدید به روزرسانی گردد!
نویسنده: بهنام
زمان: ۱۴:۴۸:۴۶ - تاریخ: ۱۳۹۳/۰۷/۱۷
سلام استاد بزرگوار خسته نباشین
امیدوارم موفق باشی من منتظر بروز رسانی سایتتون هستم
نویسنده: علی
زمان: ۱۳:۱۵:۴۱ - تاریخ: ۱۳۹۳/۰۹/۲۷
سلام خسته نباشید
خواستم بدونم سایت
www.symbaloo.com
هم با جاوا اسکریپت طراحی شده یا API و چطور می تونم چنین مربع هایی رو برای سایتم طراحی کنم!؟
متشکرم
پاسخ: 
سلام
سوالتان کلی است! طراحی این چنین سایتی صرفا مبتنی بر یک زبان و... نیست، باید مجموعه ای از دانش وب و تجربیات قبلی را به کار گیرید، به عبارتی باید برنامه نویس وب باشید!
نویسنده: علی
زمان: ۱۹:۴۵:۲۲ - تاریخ: ۱۳۹۳/۰۹/۲۸
ممنون از پاسخگویی!
به طور جزیی تر من می خوام بدونم اون مربع ها که با راست کلیک قابلیت تبدیل به لینک و تغییر تصویر به فاوآیکون دارند به چه روش یا زبانی ساخته می شوند؟ و اسم خاصی دارند؟
اگر هم امکان داره آموزشی در رابطه با این موارد که اخیرا در سایت ها رو به افزایشه قرار بدید!
با سپاس
پاسخ: 
رفتارهای تعاملی در وب به چند روش یا ترکیب این روش ها ایجاد می شوند:
- در اکثر موارد مبتنی بر JavaScript و فریم ورک jQuery.
- با استفاده از قابلیت های جدید HTML5 و CSS3.
در مورد سوال شما و سایت مورد نظر، این یک برنامه تحت وب است که با توجه به هدف برنامه نویس امکاناتی مانند Drag & Drop در جاوا اسکریپت (یا جی کئوری) و قاعدتا اسکریپت نویسی پیشرفته در آن استفاده شده (تا به فرض به مرورگر تفهیم کند اگر فلان بلاک کشیده شد چه اتفاقی رخ دهد و...)، در واقع هیچ روش کوتاه و قابل توضیحی وجود ندارد جزء اینکه خط به خط کدهای برنامه را تحلیل کنیم!
http://jqueryui.com/sortable

http://www.jqueryrain.com/?4qSzh9Yo
نویسنده: علی
زمان: ۱۲:۴۵:۳۲ - تاریخ: ۱۳۹۳/۰۹/۳۰
متشکرم.
نویسنده: بهنام
زمان: ۱۶:۴۸:۲۵ - تاریخ: ۱۳۹۳/۱۲/۱۴
سلام استاد.
یه سوال داشتم با چه کدی میشه مثلا هر بار روی یه دکمه ای کلیک کردی یه منو اضافه بشه
<ul>
<li></li>
<lli></li>
</ul>
<input type="button" onclick="">
به فرض بر روی دکمه ای کلیک میکنی یه ال آی اضافه بشه با مشخصاتی که ما تعیین میکنم مثلا کلاسش و ...
من خودم از روش InnerHTML استفاده میکنم راه بهتر و استاندارد تری هم وجود داره؟
پاسخ: 
سلام
راه حل جایگزین متد InnerHTML می تواند متد Document.createElement باشد، البته متد InnerHTML استفاده های خاص خودش را دارد و هیچ منعی از آن نیست، اما در شرایطی ممکن است نیاز به استفاده از متدهای پیچیده تری باشد، مثال:
var target = document.getElementById('a-tag-id');
var li = document.createElement('li');
li.id = 'li-id';
div.className = 'li-class';
target.parentNode.insertBefore(li, target);
اطلاعات بیشتر:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
نویسنده: محمد
زمان: ۲۳:۰۳:۴۴ - تاریخ: ۱۳۹۴/۰۱/۲۱
سلام و ممنون از خدمات سایتتون
میخواستم اگر امکانش هست توسط پلاگین کوکی یک کوکی برای این کد تعریف کنید تا عمل مخفی و آشکار شدن را ذخیره کند
حذف شد
ضمنا میخوام توسط آیدی (script) بصورت 1 و 2 و 3 درچندجای صفحه ازش استفاده کنم
بسیار بسیار سپاسگذار خواهم بود
پاسخ: 
سلام
دوست گرامی این نوع موارد که مستلزم صرف زمان زیاد جهت کدنویسی اختصاصی است، جزء خدمات متداول سایت نیست!
نویسنده: دانیال
زمان: ۱۸:۲۲:۴۲ - تاریخ: ۱۳۹۴/۰۴/۰۲
انجمن برنامه نویسان جاوااسکریپت
http://jsscript.blog.ir
نویسنده: ساسان
زمان: ۱۳:۴۱:۱۶ - تاریخ: ۱۳۹۴/۰۴/۱۸
درود بر شما
من یه مشکلی در وبلاگ میهن بلاگم دارم اگر میشه راهنماییم کنید وقتی میخوام در یک پست ، یک کد درگاه اینترنتی (مثلا پارس پال) قرار بدم ، بعد از اینکه مطلب را ارسال میکنم دیگه نمیشه ویرایشش کرد ، و وقتی میخوای ویرایشش کنی دکمه ثبت تغییرات کار نمیکنه
میشه راهنماییم کنید چطوری کد رو قرار بدم که قابل ویرایش باشه؟
پاسخ: 
سلام
شیوه درج کد معمولا به این نحو است که در محیط ارسال مطلب، گزینه ای جهت نمایش به صورت کدهای HTML وجود دارد، کدهای خود را باید در این حالت درج کنید، اما اگر مشکل ویرایش همچنان وجود داشت، دو علت احتمالی دارد:
- یا ایراد از ناسازگاری بخش ویرایش مطلب با مرورگر شما است که با تغییر مرورگر ممکن است رفع شود.
- یا ایراد اساسی تر و مربوط به خود میهن بلاگ است که باید با پشتیبانی سایت مذکور مطرح کنید.
نویسنده: mrm
زمان: ۱۶:۱۵:۱۱ - تاریخ: ۱۳۹۴/۰۵/۱۰
سلام
خدا قوت
عذر می خوام که اینقدر از شما سوال می پرسم یه مشکل دیگه برام پیش اومد می خوام یک سری دستور جاوا رو داخل یک فایل اچ تی ام ال ، فرا خوانی کنم . (می خوام دو تا بنر رندوم رو زیر هم ، نشون بدم) ولی مشکل اینجاست که کنار هم دیگه قرار می گیرند نه زیر هم . در کد اچ تی ام ال بالا، با تگ hr و یا br می شه اینکار رو کرد ولی در یک فایل js نمی دونم چه جوری میشه . ممنون میشم بفرمایید از چه کدی استفاده کنم این هم کدها ممنون
var image = [], index = 0;
image[0] = "<a target='_blank' href='http://www.YOUR_SITE.COM/LINK1.htm'><img src='http://www.yasell.biz/images/uploads/54_9310221421043962.gif' alt='BANNER1'></a>";
image[1] = "<a target='_blank' href='http://www.YOUR_SITE.COM/LINK2.htm'><img src='http://shop123.yasell.biz/images/uploads/212_9311031421987607.gif' alt='BANNER2'></a>";
image[2] = "<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>";
index = Math.floor(Math.random() * image.length);
document.write(image[index]);
var image = [], index = 0;
image[0] = "<a target='_blank' href='http://www.YOUR_SITE.COM/LINK1.htm'><img src='http://www.yasell.biz/images/uploads/54_9310221421043962.gif' alt='BANNER1'></a>";
image[1] = "<a target='_blank' href='http://www.YOUR_SITE.COM/LINK2.htm'><img src='http://shop123.yasell.biz/images/uploads/212_9311031421987607.gif' alt='BANNER2'></a>";
image[2] = "<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>";
index = Math.floor(Math.random() * image.length);
document.write(image[index]);
پاسخ: 
سلام
می توانید بعد از document.write اول، دستور زیر را قرار دهید:
document.write("<br>");
نویسنده: mrm
زمان: ۲۰:۰۴:۱۸ - تاریخ: ۱۳۹۴/۰۵/۱۰
سلام
خدا قوت
مهندس من فکر می کنم تقریبا 3 ساعت پیش بود این پیام رو نوشتم . واقعا خیلی سریع رسیدگی کردید
خدا خیرتون بده . درست شد
باز هم ممنون
یا علی مدد
پاسخ: 
سلام
خواهش، البته پاسخ به سوالات ممکن است تا 24 یا نهایتا 48 ساعت نیز زمانبر باشد.
نویسنده: mrm
زمان: ۲۰:۱۴:۰۴ - تاریخ: ۱۳۹۴/۰۵/۱۰
یک سوال دیگه هم در مورد این مطلب اینکه اگر ما هر فایل اچ تی ام ال ، رو که بخواهیم در فایل جاوا قرار بدیم ، اگر تگ ها را داخل
document.write("");
بگذاریم درست میشه؟
چون دیدم که شما تگ
<br>
رو داخل این کد گذاشتید
پاسخ: 
خیر، دستور document.write بیشتر برای چاپ موارد یک خطی (بدون line break) کاربرد دارد، یعنی اگر بخواهید چند خط کد HTML را چاپ کنید، باید به صورت نمونه زیر باشد (چند راه دیگر نیز وجود دارد، اما این روش متداول است):
var lines = '<div id="class">';
lines += '<p>';
lines += 'تست متد document.write';
lines += '</p>';
lines += '</div>';
document.write(lines);
نکته: این متد خیلی پیشرفته نیست، روش های دیگری در جاوا اسکریپت وجود دارد که در آموزش های مقدماتی توضیح داده شده است.
زمان: ۲۲:۴۱:۳۷ - تاریخ: ۱۳۹۴/۰۶/۱۶
بسیار خوب : )
نویسنده: محمد
زمان: ۱۳:۰۷:۳۰ - تاریخ: ۱۳۹۴/۰۷/۱۱
درود
یه سوال داشتم
در مورد سوالی که آقای بهنام در مورد فیلتر کلمات
داشتند و شما به این صورت به سوالشون پاسخ دادید
<form method="post" name="myform">
<input onchange="Pm();" onblur="Pm();" onfocus="Pm();" class="mmm" type="text" name="chat" />
</form>
<script type="text/javascript">
function Pm(){
var regex = new RegExp(/([\\s\\S]*?)(کلمات|مورد|نظر)(( )+([\\s\\S]*?)|$)/ig);
if(myform.chat.value.search(regex) != -1){
alert(\'عبارت غیر مجاز!\');
myform.chat.value = \'\';
}
}
</script>
ظاهرا این کدها ساخته شده برای اسکریپت چت می باشند
می خواستم بدونم میشه این کدهایی رو که نوشتید
خلاصه تر نوشت و بشود در فرم های دیگر استفاده کرد
پاسخ: 
سلام
برای استفاده از این نمونه کد برای موارد دیگر باید کمی جاوا اسکریپت بلد باشید، در این صورت خیلی سخت و پیچیده نیست و کاربرد عمومی دارد!
نویسنده: محمد
زمان: ۲۰:۱۶:۳۲ - تاریخ: ۱۳۹۴/۰۷/۱۶
باز هم درود بر شما
این کدی را که براتون نوشتم ، اسکریپت فرم به همراه پاپ آپ جی کوئری هستش می خوام بدونم میشه این فیلتر رو بر روی این اسکریپت ها اجرا کرد
ممنون
<script type="text/javascript" src="min.js"></script>
<span class="click"><div style="position:fixed;top:0px;right:0px;"><img src="ttt.png"></div></span>
<div class="box">
<div class="light"></div>
<div class="popup">
<div class="close">×</div>
<div id="content"><div class="cl"></div>
<form id="searchForm" method="post"><fieldset><legend>ثبت</legend>
<input id="s" type="text" /><input type="submit" value="Submit" id="submitButton" />
<ul class="icons"><li class="web" title="Web Search" data-searchType="web">1</li>
<li class="images" title="Image Search" data-searchType="images">2</li></ul>
</fieldset></form>
<div id="resultsDiv"></div>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</div>
</div>
</div>
پاسخ: 
سلام
همان طور که گفتیم کد مورد نظر استفاده عمومی دارد، منتها نباید انتظار داشته باشید که به سرعت و صرفا با کنار هم گذاشتن کدها، به هدف مورد انتظارتان دست پیدا کنید، در واقع باید متناسب با نیازتان و پس از درک نحوه عملکرد برنامه ای که قصد ویرایش آن را دارید، امکان جدید را به نحو صحیح اضافه کنید، قاعدتا انجام چنین کاری نیز تنها از عهده کسی برمی آید که پیش از این آموزش های مقدماتی لازم را فراگرفته باشد!
paged صفحه 4 از 5




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

6 × 4
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

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

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