Transcript Document
آموزش زبان جاوا اسکریپت
درس مهندس ی اینترنت
فصل یازدهم
جاوا اسکریپت
تهیه کننده:
محمد نوسرائی
نام استاد:
مهندس حامد عدالتی فرد
دانشگاه پیام نور مشهد
سایت علمی پژوهشگران جوان ایران
مقایسه ی جاوا و جاوا اسکریپت
جاوا اسکریپت متعلق به شرکت نت اسکیپ و زبان جاوا
متعلق به شرکت سان میکروسیستم است.
جاوا اسکریپت در اصل یک زبان اسکریپت نویس ی است نه
یک زبان برنامه نویس ی کامپیوتر.
شاید بتوان اسکریپت ها را یک نوع زبان برنامه نویس ی خیلی
سبک و ساده نامید ،اما جاوا یک زبان برنامه نویس ی کامل
پیچیده مثل Cهست.
جاوا اسکریپت فقط در صفحات وب به کار می رود اما زبان
جاوا هم به صورت اپلت در صفحات وب و هم به شکل
برنامه های کاربردی در کامپیوتر استفاده می شود.
ویژگی های جاوا اسکریپت
با استفاده از این زبان می توانید متن های پویا و متحرک در
صفحات و نقاط مختلف مرورگر ها خلق کنید.
این زبان نسبت به وقایع و اتفاقات عکس العمل نشان
میدهد مثل کلیک یا حرکت ماوس یا فشردن کلید در
صفحه کلید.
جاوا اسکریپت می تواند کد های htmlرا بخواند یا تولید
کند.
جاوا اسکریپت در سیستم کاربر اجرا شده و مستقل از
سرویس دهنده ی وب است( .سمت مشتری است)
فاقد امکانات گرافیکی است.
به دالیل امنیتی اجازه ی خواندن و نوشتن در فایل را
نمیدهد.
تگ جاوا اسکریپت
تگ جاوا اسکریپت به صورت
میباشد.
دستورهای جاوا اسکریپت بین آن دو قرار می گیرد.
این تگ های htmlبه مرورگر می فهماند که از کجا این زبان
آغاز شده تا مفسر جاوا اسکریپت مرورگر فعال شود .و در
کجا پایان می یابد که برنامه مفسر هم کار خود را خاتمه
دهد.
پارامترهای این تگ عبارت اند از:
><script>…</script
:Languageبرای مشخص کردن زبان اسکریپت بکار
میرود.
:Typeبرای این زبان باید آن را text/javascriptقرار داد.
مکان قرار گرفتن کدهای جاوا اسکریپت
به طور کلی کدهای جاوا اسکریپت از نظر قرارگیری در کد
منبع به سه دسته تقسیم می شوند.
در قسمت head
در قسمت بدنه ی html
در یک فایل جداگانه با پسوند .js
کدهایی که در صفحات دیگر هم استفاده میشوند بهتر
هست در یک فایل جدا باشند و کدهایی که نیاز هست
زودتر از بقیه اجزای صفحه اجرا شود در قسمت head
نوشته می شوند .برای حفظ نظم و جلوگیری از شلوغی
صفحه هم بهتر هست کدهای طوالنی در یک فایل جدا
باشند.
ساختن قسمتی از صفحه با جاوا اسکریپت
می توان توسط کدهای جاوا اسکریپت قسمتی از یک
صفحه را بسازید یعنی با ترکیب جاوا اسکریپت و تگ های
htmlدر bodyیک عنصر در صفحه وارد کنید.
متغیرها در جاوا اسکریپت
کلمه ی varبرای تعریف متغیر است که نوشتن آن در جاوا
اسکریپت اختیاری می باشد .یعنی بدون آن هم می شود
متغیر تعریف کرد .ولی بهتر است از varاستفاده شود.
زبان جاوا اسکریپت حساس به حروف است یعنی حروف
کوچک با بزرگ فرق دارد Id .با idمتفاوت است.
نام یک متغیر باید از قوانین شناسه ها پیروی کند( .با عدد
آغاز نشود،فاصله نداشته باشد،از اعداد،حروف و _
استفاده شود)
عملگرها در جاوا اسکریپت
عملگرهای ریاض ی:جمع( ، )+تفریق( ، )-ضرب(*) ،خارج
قسمت( ، )/باقی مانده( ، )٪افزایش( ، )++کاهش()--
عملگرهای انتسابی:انتساب(=) ،جمع و انتساب(=، )+
تفریق و انتساب(= ، )-ضرب و انتساب(=*) ،خارج قسمت و
انتساب(= ، )/باقی مانده و انتساب(=)٪
عملگرهای مقایسه ای:برابری(==) ،نابرابری(=!) ،
بزرگتر(>) ،کوچکتر(<) ،بزرگتر مساوی(=>) ،کوچکتر
مساوی(=<) ،برابری مقدار و جنس متغیر(===)
عملگرهای منطقی:و(&&) ،یا(||) ،نقیض(!)
عملگرهای رشته ای:جمع رشته( ، )+جمع رشته و عدد()+
عملگرهای ویژه در جاوا اسکریپت
. این عملگر نوع داده را برگشت می دهد:typeof عملگر
:مثال
var temp=1;// typeof temp==number
var temp=“s”;//typeof temp==string
var temp=true;//typeof temp==boolean
var temp=null;//type of temp==object
. یک شرط را پیاده سازی میکند:عملگر شرطی
:مثال
کنx*4 کن در غیر این صورتx*3 آنگاهx<5 اگر
A=x<5?x*3:x*4
اشیاء در جاوا اسکریپت
ش ئ را می توان شبیه یک متغیر دانست اما بسیار کاملتر از
آن.
اشیاء خصوصیات و متدهایی دارند که با گذاشتن یک
نقطه بعد از ش ئ به کار برده می شوند و می توان مقادیر
مختلفی برای آنها در نظر گرفت.
روش تعریف ش ئ :نام ش ئ =Newنام متغیر ش ئ
برخی از اشیاء در جاوا اسکریپت به صورت داخلی ساخته
شده اند که به آنها درون ساخت می گویند.
می توان یک ش ئ را به صورت پیشفرض به همراه
خصوصیات و متدهایش با دستور withتعریف کرد.
}…کد جاوا اسکریپت…{ )with (name
اشیاء داخلی جاوا اسکریپت
در زبان جاوا اسکریپت سه ش ئ داخلی وجود دارند که می
توان از آن ها استفاده نمود.
ش ئ Dateدر جاوا اسکریپت
به کمک این ش ئ می توانید تاریخ و زمان سیستم را هنگام
اجرای کد دریافت نموده و استفاده کنید.
این ش ئ به صورت زیر تعریف می شود:
)پارامترها( = new Dateنام متغیر
این ش ئ یک رشته ی متنی شامل روز ،ماه ،سال ،ساعت
،دقیقه ،ثانیه و اختلف زمانی با استاندارد جهانی زمان
( )UTCرا بر می گرداند.
Date در ش ئget متد
، برای تعریف و استفاده از متدها باید ابتدا ش ئ را نوشته
و بعد از نقطه متد مورد نظر را.سپس یک نقطه بگذارید
.بنویسید
:مثال
Now.getDate()
Now.getDay()
Now= new
Date();
Now.getMinutes()
Now.getMonth()
Now.getSeconds()
Now.getTime()
Now.getTimezoneOffset()
Now.getYear()
Now.getFullYear()
Now.getMilliseconds()
Now.getUTCHours()
Now.getHours()
Date در ش ئset متد
توسط این متد می توان زمان و تاریخ را به صورت دلخواه
. و باید مقادیر معینی را در پرانتز وارد کنید.تنظیم کرد
:مثال
Now= new Date();
Now.setDate()
Now.setMonth()
Now.setHours()
Now.setMinutes()
Now.setMilliseconds()
Now.setSeconds()
Now.setTime()
Now.setFullYear()
Now.setYear()
متدهای دیگر در ش ئ Date
متدهای دیگری هم مانند ) Now.parse(July 1,1996وجود
دارند که تاريخ را به صورت رشته ای دريافت میکند و تعداد
ميلی ثانيه های سپری شده از زمان اول ژانويه سال 1970تا
آن تاریخ را بر می گرداند.
و یا متدهایی مثل toGMTStringیا toLocaleStringنیز برای
تبدیل متغیر به یک عبارت رشته ای بکار می رود.
نکته :برای استفاده از متد getباید توجه کنیم که روزهای
هفته از 0تا 6هستند و ماه های سال از 0تا .11
ش ئ Stringدر جاوا اسکریپت
این ش ئ برای کار روی رشته های متنی استفاده می شود.
این ش ئ به صورت زیر تعریف می شود:
)”Mytext = new String(“mohammad
این ش ئ دارای خصوصیت و متدهایی است که توسط آنها
می توان تسلط بیشتری روی رشته های متنی داشت.
این ش ئ داری خصوصیت lengthاست که به طول رشته
اشاره دارد .مثالdocument.write(Mytext.length) :
برای استفاده از خصوصیات و متدها فرقی نمی کند که
چگونه رشته تعریف می شود.
متد های تغییر قالب رشته
دارد که درhtml این ش ئ متدهایی برای تغییر قالب رشته در
.زیر مشاهده می کنیم
:مثال
Text= new String(“mohammad”);
Text.big()
Text.blink()
Text.bold()
Text.fixed()
Text.fontcolor(“red”)
Text.italics()
Text.small()
Text.fontsize(“9”)
Text.strike()
Text.sub()
Text.link(“google.com”)
Text.sup()
متدهای کار بر روی رشته
علوه بر متدهای تغییر قالب متدهایی وجود دارد که می
.توان با آن ها روی قسمت هایی از رشته کار نمود
:مثال
Text= new String(“mohammad”);
Text.charAt(n)
Text.charCodeAt()
Text.concat(“ p”,”n”)
Text.indexOf(‘m”)
Text.lastIndexOf(“m”)
Text.match()
Text.split(““,3)
Text.fromCharCode()
Text.slice(0,5)
Text.substr(1,4)
Text.toLowerCase()
Text.toUpperCase()
ش ئ Mathدر جاوا اسکریپت
این ش ئ هم یکی از اشیاء داخلی جاوا اسکریپت است و داری
خصوصیات و متدهایی هست.
از این ش ئ برای کاربرد های ریاض ی استفاده می شود.
این ش ئ به صورت زیر استفاده می شود:
)پارامترها(متدMath.
ثابتMath.
Math متد های ش ئ
.در زیر تعدادی از متدهای این ش ئ را مشاهده می کنید
Math.abs()
Math.sin()
Math.cos()
Math.tan()
Math.asin()
Math.acos()
Math.atan()
Math.ceil()
Math.floor()
Math.round()
Math.max()
Math.min()
Math.random()
Math.pow()
Math.log()
Math.sqrt()
Math.exp()
ثابت های ش ئ Math
ش ئ Mathهمچنین دارای خصوصیات و ثابت هایی است که
برای محاسبات عملیات پیچیده ی ریاض ی به کار می رود.
این ثابت ها هیچ عددی نمی گیرند و ورودی ندارند .در
نتیجه بدون پرانتز و با حروف بزرگ نوشته می شوند.
Math.LOG2E
Math.PI
Math.E
Math.LN10
Math.LN2
Math.LOG10E
Math.SQRT1_2
Math.SQRT2
اشیاء مربوط به HTML DOM
DOM رابطه ی بین عناصر HTMLمانند متن ها ،عکس ها و
..را با همان سند بیان می کند.
بنابراین این فرآیند به برنامه ها و اسکریپت ها اجازه ی
دسترس ی به محتوا و ساختار داخلی پنجره مرورگر را می دهد.
در همین رابطه زبانی به نام DHTMLبه وجود آمد که با
ترکیب عناصر HTMLبا شیوه نامه ها و اسکریپت ها می
تواند محتوای اسناد وب را به صورت متحرک و پویا در
آورد.
کل هر تغییری که نیاز به کد نویس ی مجدد برای آن سند را
نداشته باشد پویا بودن را می رساند.
پویا بودن فقط به این منظور نیست که متن ها حرکت
کنند.
اشیاء مربوط به HTML DOM
اشیائی که به طور مستقیم با خود مرورگر ارتباط برقرار
کنند BOMنامیده می شوند.
اشیائی که با صفحه ی وب در ارتباط هستند DOMهستند.
در حال حاضر کمتر صحبت اصطلح BOMمی شود و کل
این مجموعه را DOMمی گویند.
تمامی این اشیاء بر اساس سلسله مراتبی این ارتباط را
برقرار می کنند که در رأس آنها ش ئ windowمی باشد.
از ش ئ windowتا documentجزء دسته BOMمی باشد و
بعد از documentدر دسته DOMقرار دارند.
برای استفاده از این اشیاء باید سلسه مراتب رعایت شوند.
مثالwindow.document.form1 :
Window
screen
Navigator
Location
Style
History
Node
Event
Link
document
Image
textarea
Form
Select
Element
Option
Applet
Input
anchor
اشیاء مربوط به HTML DOM
Window
screen
Navigator
Location
History
Event
document
است و
مستقیما با
Window
رگر در ار
در
تباطصفحه
اینترنتی
پنجرهمورید مرآدورس
اطلعاتی در
location
ش ئ
خصوصیات و متدهای این ش ئ در تگ های bodyو
معموالنمایش دارد.
حال
کار می ر
framesetبه
شاملوند.اطلعاتی در رابطه با مرورگر کاربر
navigator
ش ئ
اطلعات,
آن هااین ،فرم ها
متدهایمتن
htmlمانند
تباط با عناصر
دسترس ی
که و ار
خصوصیات و
توسط
است
میسر .می شود.
می و ...
عکس ها
documentگیرند
طریقرشد ئاستفاده قرار
شونداز تا مو
ذخیره
تی
صفحه اریجاعمروکاربر
است برای
اطلعاتی
Historyدار
صفحاند
رگر بهکاربر مان
اطلعات
ای به
دستیابی
برای
شده
صفحه
که
است.استفاده می شود.
screen
مشاهدهش ئ
عرض هم از
آنل و
قبلیازطو
اندازه
دستورات کنترلی جاوا اسکریپت
دستورات کنترلی جاوا اسکریپت
با استفاده از این دستور می توان در شرایط
متفاوت عکس العمل های متفاوت انجام داد.
شکل این دستور به صورت زیر می باشد:
} گروه دستورات ) { 1شرایط( If
} گروه دستورات Else { 2
در دستور باال اگر شرایط ارزش درست داشته
باشند گروه دستورات 1اجرا می شود در غیر این
صورت گروه دستورات 2اجرا می شود.
این دستور را قبل از طریق عملگرها استفاده
کرده بودیم.
دستورات کنترلی جاوا اسکریپت
این دستور چندین شرط را برای متغیر ها مقایسه
می کند تا نتایج مختلف به دست بیاید.
شکل این دستور به صورت زیر می باشد:
{ )متغیر( switch
دستور : 1مقدار Case 1
دستور : 2مقدار Case 2
دستور Default : 3
}
در دستور باال اگر متغیر مقدار 1را داشته باشد
دستور 1و اگر متغیر مقدار 2را داشته باشد
دستور 2و در غیر این صورت دستور 3اجرا می
شود.
دستورات کنترلی جاوا اسکریپت
با استفاده از این دستور می توان یک مجموعه ی
کد را به تعداد مشخص تکرار کرد که تعداد تکرار
در ابتدای حلقه مشخص می شود.
شکل این دستور به صورت زیر می باشد:
دستورات کنترلی جاوا اسکریپت
این دستور هم مثل حلقه ی forگروهی از
دستورات را تکرار می کند و برای کاربردهایی
مناسب است که مقدار پایان حلقه مشخص
نیست.
شکل این دستور به صورت زیر می باشد:
} گروه دستورات { )شرایط( while
در دستور باال اگر شرایط ارزش درست داشته
باشند گروه دستورات به طور مرتب تکرار می
شود.
در این دستور اکثر اوقات باید شرایط حلقه را از
داخل حلقه کنترل کنیم و تغییر دهیم در غیر این
صورت حلقه بی نهایت بار تکرار می شود.
دستورات کنترلی جاوا اسکریپت
این دستور هم مثل حلقه ی whileگروهی از
دستورات را تکرار می کند و برای کاربردهایی
مناسب است که مقدار پایان حلقه مشخص
نیست.
شکل این دستور به صورت زیر می باشد:
)شرایط( } whileگروه دستورات { do
در دستور باال تا زمانی که شرایط ارزش درست
داشته باشند گروه دستورات تکرار خواهد شد.
تفاوتش با دستور whileاین است که در این
دستور گروه دستورات حداقل یک بار اجرا
خواهد شد در صورتی که در whileممکن بود
اصل اجرا نشود.
آرایه ها در جاوا اسکریپت
این ش ئ مانند یک متغیر هست که به چند قسمت تقسیم
شده و توسط اندیس آرایه می توان به هر قسمت دسترس ی
داشت.
یک آرایه صورت زیر تعریف می شود:
) = new Array(nنام متغیر آرایه ای Var
در عبارت باال nتعداد عناصر ارایه می باشد.
شماره گذاری عناصر در جاوا اسکریپت از 0شروع می
شود.
برای دسترس ی به عناصر آرایه از اسم آرایه و اندیس
استفاده می شود .به شکل زیر:
] [iنام متغیر آرایه ای
در عبارت باال iاندیس آرایه است.
مقدار دهی به عناصر آرایه
می توان در هنگام تعریف آرایه در عناصر آن را مقدار گذاری
کنیم.
همچنین می توانیم آرایه را تعریف کرده و بعد از آن عناصر
آرایه را مقدار دهی کنیم.
آرایه داری خصوصیت پر کاربردی به نام lengthاست که
تعداد عناصر آرایه را بر می گرداند.
متد آرایه ها در جاوا اسکریپت
)( concat
مقادیر دو یا چند آرایه را با هم ترکیب می کند و نمایش می
دهد .و هیچ چیزی را در آرایه تغییر نمی دهد.
)( toString
مقادیر یک ارایه را تبدیل به یک رشته ی متنی می کند.
)( join
این متد هم عناصر یک آرایه را به رشته تبدیل می کند و بین
آن می شود جداکننده ای افزود که به صورت پیشفرض کاما
است.
)( pop
آخرین عنصر آرایه را جدا کرده و بر می گرداند .این متد یکی از
تعداد عناصر آرایه کم می کند پس روی lengthتاثیر دارد.
متد آرایه ها در جاوا اسکریپت
)( shift
مثل popولی اولین عنصر آرایه را جدا کرده و بر می گرداند.
)( push
یک یا چند مقدار به آخر آرایه اضافه کرده و اندیس جدید را
بر می گرداند .پس روی طول آرایه تاثیر دارد مثل دوتای قبلی.
)( unshift
یک یا چند مقدار به اول آرایه اضافه کرده و اندیس جدید را بر
می گرداند.
)( reverse
ترتیب نمایش مقادیر یک آرایه را برعکس می کند.
متد آرایه ها در جاوا اسکریپت
)( sort
آرایه را به ترتیب حروف انگلیس ی و یا اعداد مرتب می کند.
)( slice
یک سری از مقادیر موجود در آرایه را جدا می کند که اندیس
ابتدا و انتها را به عنوان پارامتر می پذیرد و روی طول تاثیر
ندارد.
)( splice
برای افزودن و یا حذف کردن عناصر به آرایه به کار می رود.
پارامتر اول اندیس شروع است ،پارامتر دوم تعداد عناصر
حذف شونده و پارامتر های بعدی هم عناصری که باید اضافه
شوند می باشد .آرایه عناصر حذف شده را به عنوان خروجی
بر می گرداند.
توابع در جاوا اسکریپت
مجموعه ای از کدهای تکراری را به صورت یک تابع می
توان تعریف کرد و در جاهای الزم آن را فراخوانی نمود.
یک آرایه صورت زیر تعریف می شود:
}کد تابع{ )( نام تابع function
گاهی اوقات می توان هنگام تعریف تابع برای آن آرگومان و
پارامتری تعیین کرد تا هنگام صدا زدن تابع آن آرگومان
مقدار دهی شود.
اگر تابع مقداری برگرداند از دستور returnاستفاده
میکنیم.
می توان تابع را در فایل جدا با پسوند .jsذخیره کرد و در
چند صفحه از آن استفاده کرد.
popupها در جاوا اسکریپت
پنجره های کوچکی هستند که توسط آنها می توان پیغامی را
در صفحه برای کاربر نمایش داد یا اطلعاتی دریافت کرد و یا
اطلعاتی برای تایید به کاربر فرستاد.
پنجره ی Alert
حاوی یک اخطاریه برای کاربر است که در آن هشداری داده می
شود تا کاربر متوجه کاری که می کند باشد و فقط دارای دکمه
ی OKاست.
)”alert(“text
popupها در جاوا اسکریپت
پنجره ی Confirm
این پنجره برای گرفتن تایید از کاربر به کار می رود و در صورتی
که کاربر تایید کند آن مطلب ادامه پیدا کرده و در غیر این
صورت همانجا متوقف خواهد شد.
)”Var button=confirm(“press a button
در عبارت باال متغیر buttonدارای ارزش trueیا falseخواهد
شد.
popupها در جاوا اسکریپت
پنجره ی Prompt
از این پنجره زمانی استفاده می شود که نیاز به اطلعات
دریافتی از کاربر داشته باشید تا آن را در جایی مناسب نشان
دهید.
)”prompt (“your request”,”default value
در عبارت باال متن اولی سؤال یا درخواست هست و متن دومی
هم یک مقدار پیشفرض برای راهنمایی کاربر است.
چند نکته ی اسکریپت نویس ی
جاوا اسکریپت به حروف بزرگ و کوچک حساس است و
بین آن ها فرق می گذارد.
جاوا اسکریپت فاصله های اضافی را در نظر نمی گیرد .پس
می توانید برای خوانا بودن کد فاصله هایی را اضافه کنید.
یک خط کد جاوا اسکریپت حتما باید در یک خط نوشته
شود و نمی توان ادامه ی آن را در خط بعدی نوشت مگر
اینکه خود به خود به ابتدای خط بعد هدایت شود.
در رشته های متنی با گذاشتن علمت \ می توان به سطر
بعد رفت و ادامه داد.
برای توضیحات اضافی از /*…*/و //استفاده می شود.
رویداد ها در جاوا اسکریپت
یک رویداد شامل هر نوع اتفاقی است که در یک صفحه ی
وب می تواند رخ دهد.
یک رویداد روی یک دستور htmlتعریف می شود.
می توان توسط رویداد ها توابع را صدا زد و یا دستوری را
اجرا کرد .مثل هنگام کلیک روی صفحه کاربر اخطار دریافت
کند.
در مثال زیر اگر کاربر روی عکس کلیک کند یه پیغام می
گیرد.
>”)’<img src=“1.gif” onclick=“alert(‘ok
مواردی مثل کلیک ،حرکت ماوس و فشردن دکمه و ...
رویداد هستند.
انواع رویداد ها در جاوا اسکریپت
onload
onunload
onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmouseout
onmousemove
onfocus
onblur
onchange
onreset
onsubmit
onselect
onkeypress
onkeydown
onkeyup
onresize
onerror
onabort
......... زمانی این رویداد رخ می دهد که
پایان
امیدوارم که از این مطالب استفاده کرده باشید
و اگر نیاز شما را رفع نکرد بنده را عفو فرمایید