در پاسخ باید بگم: نه! این دو کاملا متفاوتند چه بخواید از لحاظ روش نوشتن کد ها در هر یک آنها رو مقایسه کنید و چه بخواهید از نظر زمینه ای که هریک… ادامه مطلب
آیا جاوا اسکریپت و جاوا یکی اند؟
03
06
03
06
در پاسخ باید بگم: نه! این دو کاملا متفاوتند چه بخواید از لحاظ روش نوشتن کد ها در هر یک آنها رو مقایسه کنید و چه بخواهید از نظر زمینه ای که هریک… ادامه مطلب
19
01
جاوا اسکریپت |
جاوااسکریپت زبانی است که توسط NetScape تولید شده است. هدف از این زبان پویانمایی اشیا داخل صفحات HTML می باشد. جاوا اسکریپت کاملا با زبان برنامه نویسی جاوا فرق دارد. اگر چه ساختار این زبان به سی پلاس پلاس و جاوا شباهت دارد؛ که این امر برای سهولت یادگیری در نظر گرفته شده است. از همینرو دستورهای متداول مانند if, for, try..catch و … در این زبان هم یافت میگردند. کاربرد گسترده این زبان در سایتها و صفحات اینترنی میباشد و به کمک این زبان میتوان به اشیاء داخل صفحات HTML دسترسی پیدا کرد و آنها را تغییر داد. به همین علت برای پویا نمایی در سمت کاربر، از این زبان استفاده میشود.
کدهای جاوا اسکریپت در صفحات HTML داخل تگ script قرار می گیرند. از خصیصه type برای مشخص کردن زبان اسکریپت نوشه شده استفاه می شود. <script type="text/javascript">
محل شروع کدهای جاوا اسکرپیت و </script>
محل پایان کدهای جاوا اسکریپت را مشخص می کنند. مانند:
خروجی کد بالا نوشتهی !Hello World می باشد.
گاهی اوقات شما نیاز به اجرای یک کد جاوا اسکریپت در صفحات مختلف (بدون نگارش در تک تک صفحات) دارید. و یا کد شما بسیار طولانی است و هنگام کد نویسی در صفحه html شما را دچار مشکل می کند. در این صورت با استفاده از اسکریپت خارجی مشکل شما حل می شود. برای نگارش اسکریپت خارجی ابتدا یک فایل با فرمت js. ایجاد کنید. می توانید پسوند یک فایل txt را به js. تغییر دهید. سپس این فایل را توسط یک ویرایشگر متن مانند Notepad باز کنید. کدهای جاوا اسکریپت خود را بدون تگ <script>
در آن قرار دهید و سپس فایل را ذخیره کنید (با پسوند js.) برای فراخوانی اسکریپت خارجی از خصیصه src تگ <script>
استفاده کنید. مانند زیر که xxx.js آدرس فایل جاوا اسکریپت است:
(;)
، فضاهای سفید و حساس به حروف (Case Sensitive)در جاوا اسکریپت دستورات اجرایی با سمیکالن (Semicolon) یا همان ; از هم جدا می شوند. با وجود اینکه استفاده از سمیکولن، در صورتی که دستورات در خطوط جداگانه نوشته شده باشند، اختیاریست، نوشتن آن بسیار توصیه می شود. بد نیست مطلب «معاهدههای کدنویسی» را مطالعه کنید. فضاها سفید در جاوا اسکرپیت مانند اغلب زبانهای برنامه نویسی هنگام اجرا در نظر گرفته نمی شوند. مگر اینکه مقدار یک متغیر رشته ای (String) باشند. زبان جاوا اسکریپت به کوچکی و بزرگی حروف حساس می باشد. به عنوان مثال bgColor با bgcolor برای نیست.
توضیحات می توانند به صورت تک خطی و یا چند خطی باشند. مانند:
// این یک توضیح یک خطی است!
/*
این یک توضیح
چند خطی است.
*/
برای تعریف متغیر کافیست نام دلخواه خود را بنویسید. استفاده از کلمه var قبل از نام متغیر اختیاری است، مگر در موارد زیر:
x = 42
var x = 42
شما می تواند دادههایی از نوع زیر را در جاوا اسکریپ تعریف کنید:
در صورتی که متغییری تعریف نشده باشد، نوع آن متغیر undefined است. برای دستیابی به نوع یک متغیر می توانید از تابع typeof استفاده کنید. در زیر نمونه تعریف متغیرها و استفاده از تابع typeof را مشاهده می کنید:
var aDate = new Date()
var aPowerFunc = new Function("x", "return x * x")
var aString = "I am a string"
var aNumber = 42
var aBoolean = true
alert(typeof aPowerFunc); // typeof aPowerFunc is object
alert(typeof aDate); // typeof aDate is object
alert(typeof aString); // typeof aString is string
alert(typeof aNumber); // typeof aNumber is number
alert(typeof aBoolean); // typeof aBoolean is boolean
alert(typeof nonExistVar); // typeof nonExistVar is undefined
alert(typeof Date); // typeof Date is function. predefined object Date
روشهای مختلفی برای تعریف آرایه در جاوا اسکریپت وجود دارد. در زیر نمونههایی از تعریف آرایهها ارائه شده است:
beans = ["Java beans","Coffee beans","Cacao beans"];
myCars = new Array("Jaguar", "Mercedes", "Rolls Royce");
noOfEntries = myCars.length; // طول آرایه
myCD = new Array(42) // تعریف آرایه ای به نام myCD با 42 عضو
myCD[0] = "Queen" //اولین عنصر آرایه
myCD[1] = "Carlos Santana"
myCD[2] = "Mozart"
myCD[3] = "Chopin"
...
myCD[41] = "Shubidua" //آخرین عنصر آرایه
// تعریف آرایه با کلیدهای مشخص - Associative Array ویا همان Property Maps
assoarr = {color1: "green", color2: "yellow", color3: "white"};
تعریف یک شی مانند تعریف یک تابع می باشد. مانند:
function objDef(name) {
this.objvar = name
}
// creation of an instance of the above defined object "class" myObj = new objDef("Saeid")
متد همان تابع تعریف شده در یک شی و خصیصه، مقادیر متغیرهای آن میباشد. مانند:
//Property
//objectName.propertyName = value
//Method
//objectName.methodName = function
function calcArea(radius) {
return(radius * radius * Math.PI);
}
function circle(color, radius) {
this.fillColor = color;
this.area = calcArea(radius);
}
var myCircle = new circle('green', 2);
alert(myCircle.fillColor);
alert(myCircle.area);
در زیر عملگرها بر اساس نوع عملیات و داده مورد استفاده دستهبندی شدهاند.
عملگر | توضیحات |
---|---|
+ | جمع |
– | تفریق |
++ | افزایش مقدار متغییر به اندازه یک واحد |
— | کاهش مقدار متغییر به اندازه یک واحد |
* | ضرب |
/ | تقسیم |
% | باقیمانده |
عملگر | توضیحات |
---|---|
+ | الحاق دو یا چند رشته |
+= | الحاق محتوای یک رشته با یک یا چند رشته و اختصاص دادن مقدار به رشته اول |
عملگر | توضیحات |
---|---|
&& | و (AND) |
|| | یا (OR) |
! | خِلاف (NOT) |
== | مساوی با (equal) |
!= | نامساوی با (not equal) |
=== | دقیقا مساوی با (از نظر مقدار و نوع داده) |
!== | نامساوی با (از نظر ارزش) ویا نامساوی (از نظر نوع) |
> | بزرگتر از |
>= | بزرگتر از ویا مساوی با (بزرگترمساوی) |
< | کوچکتر |
<= | کوچکتر از ویا مساوی با (کوچکتر مساوی) |
عملگر | توضیحات |
---|---|
= | اختصاص دادن یک مقدار به متغیر |
+= | الحاق محتوای متغیر سمت چپ عملگر با یک متغیر و اختصاص دادن مقدار به متغیر سمت چپ |
-= | تفریق یک متغیر از متغیر سمت چپ عملگر و اختصاص دادن مقدار بدست آمده به متغیر سمت چپ |
*= | ضرب یک متغیر در متغیر سمت چپ عملگر و اختصاص دادن مقدار بدست آمده به متغیر سمت چپ |
/= | تقسیم متغیر سمت چپ عملگر و اختصاص دادن مقدار بدست آمده به متغیر سمت چپ |
%= | تقسیم متغیر سمت چپ عملگر و اختصاص دادن باقیمانده تقسیم به متغیر سمت چپ |
عملگر | توضیحات |
---|---|
new | ایجاد یک شی |
delete | حذف یک شی |
this | اشاره به شی جاری |
typeof | دستیابی به نوع متغیر عملوند |
void | ارزیابی یک عبارت بودن بازیابی مقدار آن |
در زیر نحوه نگارش عبارتهای شرطی با if و switch ارائه شده است.
// if ساده
if (condition) {
statements
}
// if همراه با else
if (condition) { statements
} else {
statements
}
// if خلاصه یک خطی
condition ? expr1 : expr2
switch (expression){ case label:
statement;
break;
case label2:
statement;
break;
default : statement;
}
در جاوا اسکریپت امکان نوشتن حلقه ها به چهار صورت امکان پذیر است.
for(var i=0; i < array.length; i++){
...
}
var i=0; do {
i+=1;
} while (i < 5)
n=8
while( n > 0) {
n--
}
این حلقه بر روی خصوصیات یک شی اعمالی را انجام می دهد:
student1 = new Student("Hans Christian", "Andersen", 1805); for (props in student1) {
document.write(student1.props)
}
مانند سایر زبانهای برنامهنویسی دستور break حلقه را قطع کرده و برنامه را به بعد از حلقه منتقل میکند. دستور continue نیز مانند break حلقه جاری را قطع میکند و در ادامه دور بعدی حلقه را اجرا می کند. مانند:
while(i > 0){ if(a[i]=="Orange")
break; i--;
}
while(i > 0){
if(a[i]!="Orange")
continue;
oranges++;
}
مهمترین آبجکتهای جاوا اسکریپت عبارتند از:
Date
Array
Boolean
Function
Math
Number
RegExp
String
در ادامه تعدادی از این اشیا بررسی شده اند.
متد | توضیحات |
---|---|
getDate() |
بازیابی روز ماه جاری (۱-۳۱) |
getDay() |
بازیابی شماره روز هفته جاری (۰-۶) |
getYear() |
سال جاری دو رقمی بین ۰ تا ۹۹ برای سالهای قبل از ۱۹۹۹ و چهار رقمی برای سالهای بعد از آن |
getFullYear() |
سال جاری چهار رقمی |
getHours() |
ساعت (۰-۲۳) |
getMonth() |
ماه (۰-۱۱) – این شماره از ماه جاری یک ماه کمتر است. |
getSeconds() |
ثانیه جاری (۰-۵۹) |
getTime() |
تعداد میلیثانیهای گذشته از تاریخ ۱ ژانویه ۱۹۷۰ |
setDate(), setHours(), . . . |
مقداردهی به تاریخ و زمان مورد نظر |
parse() |
دستیابی به زمان طی شده از ۱ ژانویه ۱۹۷۰ تا زمان مورد نظر در واحد میلیثانیه |
toString() |
تبدیل تاریخ به رشته |
برای استفاده از شی Date می توانید مانند زیر عمل کنید:
now = new Date // تاریخ جاری
nowDay = now.getDay() // (0-6)
nowHour = now.getHour() // (0-23)
استفاده از شی Boolean بسیار ساده می باشد. در زیر نمونه تعریف آن آمده است:
x = true; // مقدار منطقی true
y = false; // مقدار منطقی false
z = new Boolean(false); // مقدار این شی false است.
z2 = new Boolean("false"); // مقدار ای شی true است! دقت کنید که هر رشته ای که به شی Boolean پاس شود مقدار ای شی را true می کند.
z3 = new Boolean(true); // مقدار این شی true است.
همانطور که از اسم این شی مشخص است، کاربرد آن بیشتر در محاسبات و عبارتهای ریاضی است.
متد یا عبارت | توضیحات |
---|---|
abs |
قدرمطلق |
sin, cos, tan acos, asin, atan
|
توابع مثلثاتی |
min, max |
بدست آورن کمترین و بیشترین مقدار |
round |
گردکردن مقدار |
sqrt |
بدست آوردن جذر یک عدد |
pow |
توان. اولین مقدار، پایه توان و دومین مقدار نمای آن می باشد. به عنوان مثال Math.pow(x,y) برابر است با xy
|
random |
ایجاد یک عدد رندوم بین صفر و یک. |
Math.E |
مقدار ثابت عدد e (فرمول اولر یا اویلر) حدود ۲,۷۱۸ |
Math.PI |
مقدار ثابت عدد پی. حدود ۳,۱۴۱۵۹ |
نمونه استفاده از آبجکت Math:
a = Math.PI * r*r; with(Math){
a = PI * r*r;
x = sin(y);
}
متد | توضیحات |
---|---|
bold |
مانند تگ <bold> رشته را درشتتر میکند. |
italics |
مانند تگ <i> عمل می کند. |
concat |
الحاق ۲ یا چند رشته |
charAt |
دستیابی به کاراکتر از طریق ایندکس (اندیس) آن در رشته |
fontcolor |
مانند تگ <font> به صورت <font color=color> عمل میکند. |
fontsize |
مانند تگ <font> به صورت <font size=size> عمل میکند. |
indexOf |
پیدا کردن اولین محل یافت شده از یک رشته در رشته دیگر. در صورتی که این جستجو نتیجهای در بر نداشته باشد، مقدار -۱ بازگردانده خواهد شد. |
lastIndexOf |
مانند indexOf با این تفاوت که آخرین محل یافت شده در جستجو را نشان میدهد. |
length |
طول رشته را نشان میدهد. |
link |
برای ایجاد لینک مانند تگ <a> |
big |
مانند تگ <big> |
small |
مانند تگ <small> |
strike |
مانند تگ <strike> |
sub |
مانند تگ <sub> |
substring |
دستیابی به یک زیررشته از رشته مورد نظر. |
toLowerCase |
تبدیل رشته به حروف کوچک |
toUpperCase |
تبدیل رشته به حروف بزرگ |
replace |
برای جایگزینه یک رشته در رشته دیگر کاربرد دارد. |
split |
برای جداکردن رشته بر اساس یک الگو (جداکننده) کاربرد دارد. |
مثالهایی از استفاده شی String و متدهای آن در زیر ارائه شده است:
var message = "Simple String";
message[0]; // مقدار "S" باز میگرداند.
document.write(message.bold()); // محتوای متغییر را به صورت درشت چاپ میکند.
message.charAt(0); // همان message[0] میباشد.
message.concat(" enhanced"); // مقدار "Simple String enhanced" را باز میگرداند.
message.length; // طول عبارت که همان عدد ۱۳ می باشد را باز میگرداند
message.indexOf("Simple"); // عدد ۰ را باز میگرداند.
message.lastIndexOf("String"); // عدد ۷ را باز میگرداند.
message.substring(2,5); // رشته "mple" را باز میگرداند.
document.write(message.replace("Simple", "Complex")); // مقدار "Complex String" را باز میگرداند.
منظور از رویداد، انتفاقی است که در سمت کاربر و براساس فعالیتهای آن رخ میدهد. در زیر تعدادی از رویدادها مهم ارائه شدهاند. دقت نمایید که فراخوانی آنها در تگهای خاصی امکان پذیر است. به عنوان مثال رویداد onSubmit در تگ <form> فراخوانده میشود.
رویداد | زمان رخ دادن و فراخوانی |
---|---|
onSubmit |
هنگام ثبت شدن فرم |
onReset |
هنگام زدن دکمه reset فرم |
onChange |
هنگام تغییر یک مقدار |
onSelect |
هنگام انتخاب یک متن در تگ <input> یا <textarea> |
onBlur |
هنگام خارج شدن از فوکوس یک فیلد |
onFocus |
هنگام فوکوس (انتخاب) یک فیلد |
onKeydown |
هنگام فشردن یک کلید به پایین |
onKeyup |
بعد از فشردن و رها کردن یک کلید |
onKeypress |
هنگام فشردن یک کلید (مجموع onKeydown و onKeyup) |
onMouseover |
زمانی که نشانگر ماوس بر روی منطقه تگ مورد نظر می رود. |
onMouseout |
هنگامی که نشانگر ماوس از منطقه تگ مورد نظر خارج می شود. |
onMousemove |
هنگام حرکت دادن نشانگر ماوس در یک منطقه |
onClick |
هنگام کلیک کردن |
onDblclick |
هنگام دابل کلیک کردن |
onLoad |
هنگام بارگزاری صفحه |
onUnload |
هنگام بستن صفحه مورد نظر |
onResize |
هنگام تغییر دادن سایز صفحه (پنچره) مورد نظر |
onError |
هنگام رخ دادن یک خطا جاوا اسکریپتی |
همانطور که در ابتدای مقاله گفته شد این مقاله فقط به طور کلی جاوا اسکریپت و دستورات آن را معرفی کرده است. در صورتی که علاقمند به آشنایی بیشتر و دقیقتر این زبان هستید، می توانید به منابع معرفی شده در انتهای همین مطلب مراجعه نمایید.
شاد و پیروز باشید :)
19
01
سلام، امروزه با توجه به استفاده گسترده از زبان جاوا اسکریپت (JavaScript)، دانستن آن برای هر توسعه دهنده وبی لازم است. این مقاله در یک نگاه و به طور خلاصه زبان جاوا اسکریپت و مفاهیم وی را معرفی کرده و در ادامه نحوه نگارش (Syntax) کدهای آن را آموزش می دهد. همچنین برای درک بیشتر […]
مطالب مرتبط:
09
01
سلام :)
خیلی از ما با سرویس نقشه های گوگل (Google Maps) آشنا هستیم. این سرویس در ویکی پدیا اینگونه تعریف شده است:
گوگل مپس (به انگلیسی: Google Maps، به معنی: نقشههای گوگل) یک محصول وب از شرکت گوگل است. در گوگل مپس، نقشههای دقیق و کاملی از زمین ارائه میگردد. گوگل مپس از فنآوریهایی چون Tele Atlas استفاده میکند.
گوگل مپس این امکان را برای مدیران و برنامه نویسان وب سایت ها فراهم کرده است تا با استفاده از API آن، نقشه های موجود را به دلخواه در وب سایت خود نمایش دهند. در حال حاضر، گوگل رابط های زیر را ارائه می کند:
در ادامه شروع کار با Google Maps JavaScript API V3 را با هم بررسی می کنیم.
برای استفاده از این سرویس در وب سایت یا وبلاگ خود، قبل از هر چیز باید کلید لازم برای ارتباط دامنه خود با گوگل را بدست بیاورید. البته این کلید فقط در برخی مواقع ضروری است. دریافت این key با ثبت نام در Google Maps API براحتی از طرف گوگل برای شما نمایش داده می شود.
ساده ترین نوع پیاده سازی (برنامه Hello, World)
[html]
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”/>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>
<style type=”text/css”>
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map_canvas {
height: 100%
}
</style>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type=”text/javascript”>
function initialize() {
var myLatlng = new google.maps.LatLng(35.695964, 51.417704);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
}
</script>
</head>
<body onload=”initialize()”>
<div id=”map_canvas”></div>
</body>
</html>
[/html]
کدهای بالا خیلی گویا هستند ولی چند نکته برای توجه وجود دارد:
• با استفاده از <!DOCTYPE html> مشخص کردیم که مرورگر این صفحه را با استانداردهای html5 پردازش کند.
• کدهای مربوط به API را در داخل تگ script قرار دادیم.
• یک div با شناسه “map_canvas” برای نشان دادن نقشه در نظر گرفتیم.
• با استفاده از اتریبیوت onload تگ body، نقشه را initialize یا مقداردهی اولیه کردیم.
اطلاعات بیشتر در Google Maps Javascript API V3 Tutorial ارائه شده است.
همین مراحل برای نمایش نقشه زیر کافیست:
خطا، مرورگر شما از iframe پشتیبانی نمی کند.
یکی از کارهایی که در حال انجام آن هستم، پیاده سازی مراکز پوشش اینترنت توسط یکی از شرکت های ارائه دهنده خدمات اینترنتیست. نمونه اولیه این کار را در زیر مشاهده می فرمایید:
پیوندها
پی نوشت
در صورتی که موفق به دیدن نقشه ها نشدید، از فیلترشکن برای دیدن آنها استفاده کنید. به دلیل تحریم، بعضی از خدمات گوگل بر روی کاربران ساکن ایران، محدود می باشد.
همیشه شاد، و موفق باشید ;)
ادامه مطلب