• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

آموزش کم کم جاوا اسکریپت

C

Cube

متخصص بخش هاستینگ و دامین
سلام

هر چند روز میام ، آموزش ها رو ادامه میدم

سوالاتی که به درس تاپیک "آموزش کم کم جاوا اسکریپت" مربوط میشه رو اینجا بپرسین : http://www.iranjoman.com/thread-30383.html#post125215

به به .... این زبون یک زبون کویتیه که نگو ....

یاد بگیری .... عاشقش میشی .....


البته اینم بگم که پیاده سازی این زبون تو مرورگرهای مختلف داستان ها داره .....

مثلا فلان کد رو فایرفاکس نمیشناسه و ie میشناسه و .....

کاربرد جاوا اسکریپت خیلی زیاده مثلا سایت زیر رو ببینید :
رخداد، نخستین پایگاه خبری چند رسانه ای استان البرز

این سایت کاملا کلاینت سایده و هر چیز متحرک و ... که می بینین با جاوا اسکریپت کار کردم .... (طراح این سایت خودمم)


ولی از جاوا نهایت برای منو های متحرک استفاده میشه یا مثلا بستن یک قسمت استفاده میشه (مثل صفحه اصلی سایت که بخش های انجمن رو میشه بست)

آموزش ها همزمان در وبلاگ بنده نیز قرار داده می شود .... : netnic.ir

خوب بریم سر اصل مطلب
 
آخرین ویرایش:
C

Cube

متخصص بخش هاستینگ و دامین
خوب
از اونجایی که جاوا اسکریپت زبون کویتیه .... موقع تعریف متغیر ، نوع متغیر رو نمی خواد مشخص کنین

نکته مهم : اولین دیتایی که درون متغیر ریخته بشه ، متغیر نوع اون دیتا رو به خودش می گیره و از اون به بعد دیگه نوع متغیرتون همونه ....
کد: 
var a
a=11

var  b

b = "netnic"
 
C

Cube

متخصص بخش هاستینگ و دامین
دستور alert :

کد بعدی که قرا یاد بگیریم :

کد نمایش پیغام به کاربر است :
کد: 
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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>tamrin 1</title>
<script language="javascript" type="text/javascript">

//  کد های جاوا اسکریپت را درون این تگ خواهیم نوشت

</script>
</head>

<body>
<!--  تمرین اول درس جاوا اسکریپت  -->

<!--     http://Amoozesh.in     -->
</body>

</html>
 
آخرین ویرایش:
C

Cube

متخصص بخش هاستینگ و دامین
خوب کدی که در بالا قرار دادم ، کد پایه صفحات وب است و هیچ چیز خاصی نداره ... فقط به تگ اسکریپت دقت کنین ...

از این پس وقتی میگم فلان برنامه رو بنویسید ...... منظورم اینه که کدتونو داخل تگ اسکریپتی که در کد بالا قرار دادم بنویسید


نکته ، فایل هایی که می نویسید رو با پسوند .html ذخیره کنید و همیشه اونها رو با IE باز کنید....

در زمان باز شدن صفحه ، از شما اجازه اجرای کد جاوا اسکریپت خواسته می شود که می بایست با ان موافقت نمایید ...
اول رو متن شماره 1 کلیک راست کنین و بعد گزینه اول (شماره 2) رو بزنین و در مرحله سوم هم ok رو بزنید


​

تمرین اول :
کدی بنویسید که یک پیغام رو به کاربر نمایش بده :
این برنامه به صورت بالا خواهد شد ....
صفحه رو ذخیره کنید و با مرورگر IE اون رو باز کنید و نتیجه رو ببینید.
کد: 
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>tamrin 1</title>
<script language="javascript" type="text/javascript">

alert('سلام این اولین برنامه من است');

</script>
</head>

<body>
<!--  تمرین اول درس جاوا اسکریپت  -->

<!--     http://Amoozesh.in     -->
</body>

</html>
 
آخرین ویرایش:
C

Cube

متخصص بخش هاستینگ و دامین
نکته مهم : در جاوا اسکریپت همانند سی شارپ ، در پایان دستورات علامت ; می بایست قرار دهید.
نکته مهم 2 : تمامی دستورات در جاوا اسکریپت کاملا مثل زبان سی شارپ است .

حلقه for:
این حلقه در مواردی که تعداد تکرار حلقه مشخص باشد استفاده می شود.
کد: 
for(i=0;i<24;i++)
{
    دستوراتی که باید تکرار شوند//
}
درا ین حلقه مشخص نموده ایم که حلقه دارای یک متغیر با نام i باشد و i در ابتدا با مقدار 0 مقدار دهی شود و در هر بار تکرار حلقه یکی اضافه شود و حلقه تا زمانی که مقدار i کمتر از عدد 24 است تکرار شود.
پس این حلقه 24 بار تکرار می شود .....
چرا 24 بار ؟
چون در اولین اجرای حلقه ، مقدار i=0 می شود و خواهید دید که خود 0 هم حسابه + 23 بار تکرا حلقه (تا i<24) جمعا میشه 24 بار...


تمرین 2 : برنامه ای بنویسید که اعداد 1 تا 10 را به کاربر نمایش دهد ....
کد: 
<script language="javascript" type="text/javascript">

for(i=0;i<11;i++)
{
    alert(i);
}
</script>
 
آخرین ویرایش:
C

Cube

متخصص بخش هاستینگ و دامین
دستور prompt :

کد: 
prompt('Please Insert Your Number',0)
به به ...... این دستور یکی از دستورات خوب در جاوا اسکریپت است ....
این دستور این امکان رو به شما میده که یک مقدار عددی یا حرفی رو از کاربر دریافت کنین....

کشل این دستور بصورت بالاست و یک عبارت برای نمایش به کاربر ازتون میگیره و یک مقدار که اگر کاربر هیچی وارد نکرد و اینتر رو زد .... این مقدار برای شما بر میگرده که از روی اون می تونین متوجه بشین که آیا کاربر چیزی وارد کرده با نه ...

مثلا اسم کاربر رو از ش بپریسین .... یا ازش بخواین یک عدد رو وارد کنه ..... و یا ...

نکته مهم : دقت کنین که مقداری که توسط دستور مذکور از کاربر دریافت می نمایید بصورت string (مثل اسم یا یک جمله) است ، پس در صورتی که قراره از کاربر عدد دریافت کنین ، باید مقدار دریافتی رو بوسیله دیتور زیر به int (مقدار عددی) تبدیل کنین .

کد: 
parseInt()
----------------------------------

دستور while :

این دستور در مواقعی استفاده میشه که تعداد دفعات تکرار مشخص نیست و زمان پایان یافتن حلقه ، بر اساس مقدار یک متغیر مشخص میشه ....

مثلا :
برنامه ای بنویسید که یک عدد از کاربر دریافت کند و فاکتوریل آن عدد را حساب کنه .... و جواب رو به کاربر نمایش بده ... و مجدد عدد بعدی را از کاربر بگیرد ... و این سیکل ادامه پیدا کنه تا زمانی که کاربر هیپ عددی رو وارد نکنه ...


جواب :
کد: 
<script language="javascript" type="text/javascript">

var a=0;

var b=1;
var result=0;

while (true)
{
    a=parseInt(prompt('Please Insert Your Number',0));
    
    if (a==0)
    break;
    
    while (b<=a)
    {
        result+=b;
        b++;
    }
    alert(result);
    a=0;
    result=0;
    b=0;
}
</script>
خوب این کد چند تا نکته مهم داره :
1- اگر دستورات داخل شرط if شما ، یدونه بیشتر نیست ، می تونین علامتای { } رو نذارین ...
2- کاربرد خیلی زیاد while در حلقه های بی نهیات است ..... مثلا
کد: 
while(true)
یا
کد: 
 while(1==1)
و ....
3- برای خروج از حلقه ها از دستور break استفاده می شود ...
4- در پایان هر بار محاسبه ، می بایست کلیه متغیر ها رو خالی کنین و به حالت اول برگردونین ....
5- کدی مثل
کد: 
result+=b;
در اصل خلاصه شده اینه :
کد: 
result=result+b;

موفق باشید ...
 
C

Cube

متخصص بخش هاستینگ و دامین
نکته بسیار مهم : جاوا اسکریپت به حروف بزرگ و کوچک حساسه .... پس دقت کنین که مثلا این دستور رو دقیقها به همین صورت بنویسین ....
کد: 
parseInt()

یعنی حرف I باید بزرگ نوشته بشه ....
 
C

Cube

متخصص بخش هاستینگ و دامین
[HIGHLIGHT][/HIGHLIGHT]


[HIGHLIGHT]ایجاد تغییر در عناصر صفحه :[/HIGHLIGHT]

یکی از کارهایی که با جاوا اسکریپت می توان انجام داد ، ایجاد تغییر در عناصر صفحه است.
بعنوان مثال می توان یک متن را درون یک تگ div یا تگ p و یا .... نوشت :

مثال : برنامه ای بنویسید که با کلیک بر روی یک تگ div متن سلام در یک تگ p نمایش داده شود

کد جاوا :
​
کد: 
[LEFT]function myfunction(){document.getElementById('netnic').innerText='salam';}
[/LEFT]
​
کد html :
کد: 
<div onclick="myfunction()"> clik on me ...</div>

<p id="netnic"></p>
 
آخرین ویرایش:
C

Cube

متخصص بخش هاستینگ و دامین
[HIGHLIGHT]آموزش کم کم جاوا اسکریپت_درس7[/HIGHLIGHT]​


[HIGHLIGHT]نامرئی کردن عناصر صفحه : (مرئی و غیر مرئی کردن عناصر)
[/HIGHLIGHT]
خوب امروز یه جور شعبده بازی بهتون یاد میدم !

حتما تا حالا شده که روی منوی یک سایت موس رو حرکت دادین و دیدین که زیر گزینه های منو یک بخش ظاهر میشه که لینک بخش های زیر محموعه رو نشون میده و ....

خوب امروز راز این شعبده بازی رو یادتون میدم :

مثال : برنامه ای بنویسید که با کلیک کردن روی یک تگ div یک div با رنگ آبی در صفحه نمایش داده بشه و با کلیک روی یک div دیگر ، div آبی رنگ محو بشه ؟

کد جاوا :
کد: 
[LEFT]function HiddenTag(){
document.getElementById('MyTag').style.display='none';
}

function ShowTag(){
document.getElementById('MyTag').style.display='block';
}[/LEFT]

کد html :
کد: 
<div onclick="HiddenTag()" style="border:2px black solid;width:150px;height:25px">click to hide ...</div>
<div onclick="ShowTag()" style="border:2px black solid;width:150px;height:25px">click to show ...</div>

<p id="MyTag" style="background-color:#3399FF;display:block;height:100px;width:400px">netnic.ir <br/> این تگ قراره غیب بشه</p>
 
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا