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 مطالب بیشتر:
» توابع (Functions) در جاوا اسکریپت (JavaScript)
» کار با پنجره pop up در جاوا اسکریپت (JavaScript)
» مقایسه (Comparison) و شرط (If و Else) در جاوا اسکریپت (JavaScript)
» کار با switch و case در جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
commentنظرات (۷۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: مهدی
زمان: ۱۶:۳۳:۲۹ - تاریخ: ۱۳۹۱/۰۹/۲۴
سلام کدی هست با جاوا یا هرچی که بشه اسکرول مرورگر رو حذف کرد تو طراحی ؟
پاسخ: 
سلام
اگر منظور شما حذف نوار اسکرول مرورگر به طور کلی است، خیر، چنین چیزی در وب امکان پذیر نیست، اما اگر منظور جلوگیری از اسکرول شدن صفحه است، چند روش وجود دارد، در جاوا اسکریپت می توانید از کد نمونه زیر استفاده کنید:
window.onscroll = function (){
window.scrollTo(0, 0);
};
البته این شیوه استاندارد نیست و ممکن است در برخی مرورگرها هنگام اسکرول پرش داشته باشید.
در css هم می توانید برای عناصر body و html مقادیر hidden را برای overflow در نظر بگیرید:
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
در کل اگر لازم است، بهتر است صفحاتی طراحی کنید که ارتفاع آنها از ارتفاع صفحه نمایش تجاوز نکند تا اسکرول هم نداشته باشید.
نویسنده: amirchermahini
زمان: ۱۲:۰۵:۳۸ - تاریخ: ۱۳۹۱/۱۲/۲۲
سلام و عرض ادب و احترام
با تشکر از اموزشهای خوب و عالی شما
سوال
چرا وقتی اولین اموزش جاوا رو مینویسم مثل دموی اموزشی شما نمیشه و اون پنجره کوچولو باز نمیشه که نوشته روش
(سلام ! این یک پیام جاوا اسکریپت است)
منظورم پنجره alert هستش
در صورت امکان راهنمایی بفرمایین
با تقدیر و تشکر از لطف شما عزیز در خصوص گرداوری مطالب فوق العاده
پاسخ: 
سلام
سپاس از نظر لطف شما، در رابطه با مشکلی که مطرح کردید، اگر دقیقا نمونه کد را در یک فایل با پسوند html قرار داده و آن را اجرا کنید، نباید مشکلی باشد، مگر در مورد مرورگرهایی مانند اینترنت اکسپلورر که به صفحات آفلاین (صفحاتی که از روی هارد دیسک فراخوانی می شوند) اجازه اجرای جاوا اسکریپت را نمی دهد و باید این اجازه را به صورت دستی به صفحه بدهید.
نویسنده: amirchermahini
زمان: ۱۹:۲۴:۰۱ - تاریخ: ۱۳۹۱/۱۲/۲۲
باز هم سلام وعرض ادب
ممنونم بخاطر راهنمایی شما
من با سه مرورگر فایر فاکس کروم و اپرا امتحان کردم ولی جواب نداد متاسفانه
من واقعا علاقه زیادی دارم به این مباحث و اگر اجازه بفرمایین میخوام از روی مطالب شما اموزش جاوا رو شروع کنم یه اندکی به تازگی با html و css هم شروع کردم و از روی سایت اسا رایان کار کردم اما تازه سایت شما رو زیارت کردم و از اینکه جاوا و زبانهای دیگه هم اموزش میدین واقعا خوشحالم چون میخوام از پایه روی همه شون کار کنم
و خواهش میکنم در صورت امکان منو راهنمایی بفرمایین
تا یه استارت از پایه بزنم و اگه امکان داره یه اموزش خیلی مبتدیانه
پاسخ: 
سلام
کدهای آموزش تست شده اند، برای بررسی بیشتر فایل خود را از طریق آدرس ایمیل (در بخش تماس با ما وجود دارد) ارسال کنید تا مشکل مشخص شود.
در مورد آموزش ها، البته زبان جاوا با جاوا اسکریپت کاملا متفاوت است (جاوا اسکریپت زبان اسکریپت نویسی برای وب است، اما جاوا جهت نوشتن برنامه های کاربردی برای پلتفرم های مختلف مانند کامپیوترها، موبایل ها و... کاربرد دارد)، به هر صورت در اموزش ها سعی شده مباحث تا حد امکان ساده و قابل فهم باشند، اما اگر مشکلی بود می توانید مطرح کنید.
نویسنده: amirchermahini
زمان: ۲۰:۱۷:۱۶ - تاریخ: ۱۳۹۱/۱۲/۲۲
باز هم سلام و عرض ادب واحترام
استاد عزیزم از زحماتی که توی این روز اول بشما دادم واقعا عذر میخوام و از زحماتی هم که در خصوص جوابها و راهنمایی های شما واقعا ممنونم و سپاسگذار
جاوا فعال شد اون چند دفعه به علامت " " توجه نمی کردم اما همین که گذاشتم درست شد
ولی یه سوال من اگه بخوام وقتی وارد صفحه اول سایتم میشم یه خوشامد گویی بذارم به این شکل
این کدها را دقیقا به همین شکل باید توی صفحه اصلی ذخیره کنم ؟
پاسخ: 
سلام
خیر، مثال ها تنها یک نمونه هستند که نشان می دهد چگونه می توانید از جاوا اسکریپت در تگ های html استفاده کنید، قسمت html نیاز نیست، کافی است موارد مربوط به دستورات جاوا اسکریپت را قرار دهید.
نویسنده: ehsan
زمان: ۱۸:۱۷:۴۵ - تاریخ: ۱۳۹۱/۱۲/۲۴
سلام
من میخوام جدول لیگ برتر در این سایت رو در سایت خودم نمایش بدم.
http://www.varzesh3.com/leaguecomshow.do?lang=en&machesid=standing90-900076-900181-full
با php اومدم فایل رو ضمیمه کردم و قسمت های دیگه که نمی خواستم رو پنهان کردم.
میخواستم ببینم روش بهتری هم هست؟ چون اون روش باعث سنگینی سایت میشه.
پاسخ: 
سلام
روش دیگر دریافت اطلاعات صفحه با استفاده از توابعی مانند file_get_contents و تجزیه تگ ها با عبارات باقاعده (regular expression) و تابع preg_match است.
نویسنده: آرش
زمان: ۲۰:۲۴:۳۷ - تاریخ: ۱۳۹۲/۰۲/۲۷
سلام
میخوام کوکی ای که ساختم مقدارش در سرور سایت ذخیره و فراخوانی بشه نه در browser اگه ممکنه راهنمایی کنید
پاسخ: 
سلام
ذخیره نشدن کوکی در مرورگر با فلسفه آن تناقض دارد و با این کار استفاده از کوکی هیچ فایده ای نخواهد داشت! به هر حال برای هدف فوق باید از برنامه نویسی سمت سرور مانند PHP یا ترکیب سمت کاربر و سمت سرور مانند Ajax استفاده کنید و مقادیر کوکی را در دیتابیس یا به صورت فایل در سرور ذخیره نمائید.
نویسنده: خلیل
زمان: ۲۲:۴۹:۴۵ - تاریخ: ۱۳۹۲/۰۷/۲۶
مرسی از زحماتتون .
اگه میشه ایمپورت کردن جاوا را کامل توضیح بدین خیلی ممنون میشم . من تا این حد فهمیدم که یه فایل رو با کد جاوا و با پسوند js میسازیم و در کدی که مینویسیم برای مثال :
<script type="text/javascript" src="docwrite.js"></script>
در خصوصیت src ادرس همون فایلی که درست کردیم رو میدیم . ایا درست فهمیدم یا .. اگه میشه راهنمایی کنین .
پاسخ: 
توضیح شما برای ایمپورت فایل js خارجی کامل بود، یک روش دیگر نیز درج کدها در همان صفحه است، مثال:
<script type="text/javascript">
alert('JavaScript is powerful!');
</script>
نویسنده: ابوالفضل
زمان: ۱۳:۵۱:۲۰ - تاریخ: ۱۳۹۲/۱۰/۱۱
سلام بسیار ممنونم از سایت خیلی خوبتون و کمک هایی که به ما کاربران می کنید من مطالب سایتتون رو دارم دنبال می کنم خیلی آموزنده هست اکنون با یک مشکلی برخورد کرده ام
من می خوام زمانی که در تکست باکس متنی تایپ می شود همان زمان اون متن در تکست باکس دیگری هم نوشته شود لطف کنید کمکم کنید
بازم ممنون
پاسخ: 
سلام
هر چند که باید آموزش های مقدماتی را دنبال کنید و خودتان کدها را بنویسید، با این حال:
<script type="text/javascript">
function setText(id, value){
document.getElementById(id).value = value;
}
</script>
<input type="text" onkeyup="setText('test', this.value)"><br>
<input type="text" id="test">
نویسنده: قایق بادی
زمان: ۱۵:۰۸:۳۹ - تاریخ: ۱۳۹۲/۱۱/۲۷
با تشکر از مطالب خوبتون
نویسنده: کاناپه بادی
زمان: ۱۵:۰۸:۵۴ - تاریخ: ۱۳۹۲/۱۱/۲۹
با تشکر از مطالب مفیدتون
نویسنده: بهنام
زمان: ۱۷:۴۹:۰۹ - تاریخ: ۱۳۹۲/۱۲/۱۶
سلام
<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(){
if(myform.chat.value == 'a'){
alert('');
myform.chat.value = '';
}
}
</script>
بنده کد رو نوشتم میخوام وقتی که درون فیلد کلمه هایی که کاربر تایپ میکنه از نظر کلمات زشت یا هر چی سانسور بشه مثلا یه پنجره پیام نمایش بده لطفا این پیام رو تایپ نکنید سپس فیلد خالی بشه اما اینی که من نوشتم در صورتی عمل میکنه که تنها فقط همون کلمه باشه این عملیات انجام میشه ولی من میخوام در هر قسمت چه اول چه آخر و حتی وسط متن ها تایپ کرد این عملیات انجام بشه
مثلا کلمه ی 'نوچ' سانسور بشه اگر در فیلد همچین چیزی را تایپ کرد
من بهنام از سایت نوچ هستم
لطفا کدی را برام بنویسید ممنون میشم
پاسخ: 
سلام
می توانید از دستورات عبارات با قاعده استفاده کنید، نمونه کد:
<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>
در دستور بالا اگر کلمه وارد شده دقیقا مطابق با کلمات مورد نظر باشد (بدون حروف اضافه در ابتدا یا انتها) بررسی true خواهد شد، همچنین دستور طوری نوشته شده که فضای خالی برای کلماتی که در انتها قرار دارند در نظر گرفته نشود.
نویسنده: بهنام
زمان: ۱۹:۲۹:۱۵ - تاریخ: ۱۳۹۲/۱۲/۱۶
سلام
چطور میشه جاوا اسکریپت و پی اچ پی را این مدلی با هم ترکیب کرد به صورتی که اگه شرط جاوا اسکریپت درست بود کد های پی اچ پی عمل کنند ولی اینی که بنده نوشتم دستورات جاوا اسکریپت نادیده گرفته می شوند و کد های پی اچ پی با ریفرش شدن صفحه عمل می کنند و شرط نادیده گرفته می شود
<script type="text/javascript">
var name = prompt('نام شما در چت روم','');
//اگر فیلد پنجره را خالی نگذاشت و کنسل را نزد
if(name != '' && name != null){
<?php
$_SESSION['name'] = 'name';
?>
}else{
alert('لطفا یک اسم وارد کنید');
window.location.href = '';
}
</script>
لطفا کد را تصحیح کنید با تشکر
پاسخ: 
سلام
PHP زبان سمت سرور است و نمی تواند منتظر دستورات جاوا اسکریپتی باشد! به محض اجرای صفحه دستورات در سرور پردازش شده و خروجی ارسال می شود، در واقع خروجی به صورت HTML است و در سورس مرورگر اثری از PHP نمی بینید! راه حل این است که یا از Ajax استفاده کنید، یا اینکه سیستم ورود متداول تری داشته باشید، به فرض با استفاده از فرم HTML معمولی و ارسال اطلاعات به فایل PHP، روش دیگر ست کردن کوکی با جاوا اسکریپت است.
نویسنده: بهنام
زمان: ۲۳:۱۱:۳۷ - تاریخ: ۱۳۹۲/۱۲/۱۶
var name = prompt('نام شما در چت روم','تعداد کاراکتر های مجاز 15 تا میباشد');
if(name != '' && name != null && name.length <= 15){
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById('main').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST','ajaxphp.php',true);
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send('ok=mgprotpaqomdptq&name='+name);
window.location.href = '?chat';
}else{
alert('لطفا یک اسم کمتر از 15 کاراکتر وارد کنید');
window.location.href = '';
return false;
}
خیلی ممنون راجع به سوال آخری مشکلم همین بود که بعد از فرستادن آژاکس
xmlhttp.send('ok=mgprotpaqomdptq&name='+name);
صفحه ریفرش بشه اما فقط در مرورگر گوگل کروم کار میکنه و در مرورگر فایرفاکس صفحه ریفرش میشه و آژاکس ارسال نمیشه ولی در گوگل کروم ارسال میشه
اما اگه پایینش این کد رو نذاری تو همه مرورگر ها آژاکس ارسال میشه
window.location.href = '?chat';
ولی من واقعا نیاز دارم که این رو بزارم
و در فایل ajaxphp.php این کد ها موجود هست
<?php
session_start();
@$name = $_POST['name'];
@$ok = $_POST['ok'];
if($name != '' && $ok == 'mgprotpaqomdptq' && strlen($name) <= 15){
$_SESSION['name'] = $name;
}
?>
پاسخ: 
می توانید در قست زیر دستور رفرش را اجرا کنید:
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
این قسمت زمانی که درخواست ارسال و پاسخ دریافت شده باشد اجرا می شود (البته مشخص نیست هدف شما چیست، چه لزومی دارد که به محض دریافت پاسخ، صفحه رفرش شود و اطلاعات از دست برود؟!)
نکته: اگر هیچ کدام از روش های بالا جوابگو نبود، از تابع setTimeout برای ایجاد وقفه استفاده کنید.
نویسنده: بهنام
زمان: ۲۰:۵۶:۱۲ - تاریخ: ۱۳۹۲/۱۲/۱۸
سلام
هدف من این است که با ارسال آژاکس یک سشن ذخیره شود و محض ذخیره شدن سشن صفحه ریفرش شود و گفته بودم اگه سشن چک شد یک چیزی را نمایش دهد و حتما باید صفحه ریفرش شود ممنون از اینکه کمکم کردین بی نهایت تشکر می کنم از سایت مفیدتون امیدوارم همیشه در مراحل زندگیتون سربلند باشید با تشکر
نویسنده: بهنام
زمان: ۰۰:۱۶:۲۰ - تاریخ: ۱۳۹۲/۱۲/۲۷
سلام بازم تشکر از این که تمام سوالات من رو جواب میدین بی نهایت ممنونم
یه سوالی داشتم
چطوری میتونم نوع title یک لینک را عوض کنم مثلا وقتی ماوس روی یک لینک یا یه عکسی که میرود یه توضیحاتی درج میشود
<a title=""><img title="" />
میخوام آن توضیحاتی که درون یه کادر ظاهر میشه میخوام استایل بدم مثلا رنگ زمینه شو مشکی کنم یا انیمشن کنم که بخوام متن درونش حرکت کنه این با چه نوع برنامه نویسی امکان دارد سی اس اس یا جاوا اسکریپت ؟ یا جی کوئری؟
لطفا نمونه ش را برام نشون بدین ممنون میشم
پاسخ: 
سلام
بسته به سطح توقع شما از این امکان (که Tooltip نام دارد) می توان با ترکیب جاوا اسکریپت و CSS و یا ترکیب جی کئوری و CSS آن را ساخت، در تئوری رویداد onmouseover و onmouseout در جاوا اسکریپت بدین منظور به کار می روند، در هر صورت ساخت این ابزار نیازمند توضیحات زیادی است که شرح همه آنها در اینجا ممکن نیست، با یک جستجوی ساده در وب نمونه های زیادی وجود دارد.
نکته 1: با کمی آشنایی با جاوا اسکریپت و متدهایی مانند document.getElementById و همچنین آشنایی با نحوه ساخت بلاک ها به صورت position absolute و relative می توانید خودتان این امکان را به نحو سفارشی بنویسید.
نکته 2: عنصر اصلی یا دکمه شما (که همان بلاک والد با خاصیت relative است) باید با بردن ماوس روی آن، بلاک فرزند را با کدهای جاوا اسکریپت نمایش دهد و با خارج شدن ماوس، بلاک فرزند مخفی گردد.
paged صفحه 1 از 5




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

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

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