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 مطالب بیشتر:
» آرایه (Array) در جاوا اسکریپت (JavaScript)
» تعریف متغیرها، محاسبات و عملگرها در جاوا اسکریپت (javascript)
» کار با switch و case در جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
» حلقه for و while در جاوا اسکریپت (JavaScript)
commentنظرات (۷۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: محمد
زمان: ۱۳:۱۷:۱۰ - تاریخ: ۱۳۹۳/۰۳/۳۰
ببخشید. لطفا به
http://xzn.ir/hosting/free
آدرس بروید. نوشته هاست رایگان 20 گیگابایت. درسته؟ میشه از آن استفاده کرد.؟
پاسخ: 
استفاده از هاست های رایگان تنها برای موارد آزمایشی توصیه می شود!
نویسنده: محمد
زمان: ۱۲:۴۹:۲۵ - تاریخ: ۱۳۹۳/۰۳/۳۱
با جاوا نسخه و اسم مرورگر رو بدست می آوردم. ولی راهی برای بدست اوردن ip هست؟
پاسخ: 
خیر، صرف جاوا اسکریپت این امکان را ندارد، مگر اینکه با Ajax و PHP ترکیب شود.
نویسنده: محمد
زمان: ۱۰:۴۹:۱۶ - تاریخ: ۱۳۹۳/۰۴/۰۳
چطوری میشه با جاوا اسکریپت یک چیزی مثل عکس رو حرکت داد؟
پاسخ: 
سوال کلی است! بسته به نوع حرکت (به طور مثال پرش از بالا به پائین یا انتقال آزاد و...) و رویداد مورد نظر (به فرض کلیک کاربر، استفاده از دکمه های صفحه کلید و...)، روش کار نیز متفاوت خواهد بود که البته معمولا نوشتن کد آن به دلیل پیچیده بودن ماهیت کار زمانبر است.
نویسنده: بهنام
زمان: ۱۴:۵۵:۴۸ - تاریخ: ۱۳۹۳/۰۴/۲۲
سلام استاد عزیزم
چطور میشه با جاوا اسکریپت یه بلاک 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 لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

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

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