آموزش جاوا اسکریپت قسمت هفتم
در این بخش از آموزشهای طراحی سایت به توابع موجود در جاوا اسکریپت میپردازیم
توابع جاوا اسکریپت :
مثال :
<html>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
خروجی : 12
قواعد دستوری توابع جاوا اسکریپت :
function name(parameter1, parameter2, parameter3) {
code to be executed
}
فراخوانی توابع جاوا اسکریپت :
کد درون تابع زمانی که تابع اعلان (تعریف) می شود، بلافاصله اجرا نمی گردد، بلکه تنها زمانی اجرا می گردد که تابع فراخوانی (invoke) شود مانند :
مقدار بازگشتی تابع :
وقتی در تابع به دستور return می رسیم و مقداری رو برگشت میده ، هر دستوری بعد از اون قرار بگیره اجرا نخواهد شد و به نوعی میشه گفت برنامه خاتمه پیدا می کنه.
مثال :
var x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
}
خروجی : 12
چرا توابع ؟
شما می توانید یک کد را یک بار تعریف کرده و چندین بار استفاده کنید
شما می توانید همان کد را چند بار با استدلال های مختلف به تولید نتایج مختلف استفاده کنید.
پایان قسمت هفتم
منابع : http://www.w3schools.com/js/js_functions.asp
کانون تبلیغاتی افراگرافیک
آدرس: تهران-میدان انقلاب-خ آزادی-خ اسکندری-نبش کلهر-دفتر افرا گرافیک
66912056 66562677 66120698 09122246022
https://telegram.me/afragraphic_ir
http://instagram.com/afragraphic1390
http://facebook.com/AfraGraphic
http://plus.google.com/104048725792771050756
http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ
http://twitter.com/afragraphic
http://ir.linkedin.com/in/afragraphic
آموزش جاوا اسکریپت قسمت ششم
اپراتور typeof :
در این بخش از آموزشهای طراحی سایت به یک اپراتور ویژه در جاوااسکریپت میپردازیم.
در جاوا اسکریپت برای مشخص کردن نوع یک متغیر می توانید از اپراتور typeof استفاده کنید
// Returns string | typeof "John" |
// Returns number | typeof 3.14 |
// Returns boolean | typeof false |
// Returns object | typeof [1,2,3,4] |
// Returns object | typeof {name:'John', age:34} |
مثال :
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof false + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'john', age:34};
</script>
خروجی :
string
number
boolean
object
object
آرایه ها در جاوا اسکریپت یک نوع خاص از شی هستند بنابراین اپراتور typeof نوع [typeof [1,2,3,4 را شی بر می گرداند
// Value is undefined, type is undefined | var person; |
// Value is undefined, type is undefined
| person = undefined; |
// The value is "", the typeof is string | var car = ""; |
The value is:
The type is:string
در جاوا اسکریپت null برابر «هیچی» است یعنی چیزی است که وجود ندارد.
// Value is null, but type is still an object | var person = null; |
تفاوت بین تعریف نشده و Null :
به مثال زیر توجه کنید :
// undefined | typeof undefined |
// object | typeof null |
// false | null === undefined |
// true | null == undefined |
پایان قسمت ششم
منابع : http://www.w3schools.com/js/js_datatypes.asp
کانون تبلیغاتی افراگرافیک
آدرس: تهران-میدان انقلاب-خ آزادی-خ اسکندری-نبش کلهر-دفتر افرا گرافیک
66912056 66562677 66120698 09122246022
https://telegram.me/afragraphic_ir
http://instagram.com/afragraphic1390
http://facebook.com/AfraGraphic
http://plus.google.com/104048725792771050756
http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ
http://twitter.com/afragraphic
http://ir.linkedin.com/in/afragraphic
http://Telegram.me/afragraphic_ir
http://cloob.com/name/afragraphic
آموزش جاوا اسکریپت قسمت پنجم
انواع داده در جاوا اسکریپت :
در این بخش از آموزشهای طراحی سایت به چند اپراتور ویژه در جاوااسکریپت میپردازیم.
String, Number, Boolean, Array, Object
متغیرهای جاوا اسکریپت می توانند در انواع داده های اعداد، رشته ها ، آرایه ها، اشیاء و ... نگه داری شوند
اعداد | var length = 16; |
رشته | var lastName = "Johnson"; |
آرایه | var cars = ["Saab", "Volvo", "BMW"]; |
اشیاء | var x = {firstName:"John", lastName:"Doe"}; |
مفهوم انواع داده :
var x = 16 + "Volvo";
این عبارت چه مفهمومی دارد؟آیا با یک خطا مواجه می شویم یا این عبارت دارای یک نتیجه می باشد؟
و اما راه حل جاوا اسکریپت برای اینکه کامپیوتر عبارت بالا رو درک کنه:
زمانی که یک عدد ویک رشته را با هم جمع میکنیم جاوا اسکریپ نوع عدد را تبدیل به رشته میکند
مثال :
<p id="demo"></p>
<script>
var x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
خروجی : 16Volvo
محاسبه و ارزیابی اطلاعات در جاوا اسکریپت از چپ به راست می باشد.تفاوت در محل قرار گیری ، باعث نتایج متفاوت نیز می شود
به مثال های زیر توجه کنید :
مثال 1 :
<p id="demo"></p>
<script>
var x = 16 + 4 + "Volvo ";
document.getElementById("demo").innerHTML = x;
</script>
ابتدا از سمت چپ به راست 16 + 4 به صورت نوع عددی با هم جمع میشوند وسپس حاصل آن ها به صورت نوع رشته ای به Volvo متصل می شود
خروجی : 20Volvo
مثال 2 :
<p id="demo"></p>
<script>
var x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
در مثال دوم عبارت با یک رشته شروع شده و جاوا اسکریپت بقیه عبارت را هرچه که باشد رشته در نظر میگیرد و دیگر اعداد را با یکدیگر تجمیع نمی کند.
خروجی : Volvo164
جاوا اسکریپت انواع پویا :
انواع داده در جاوا اسکریپت پویا می بشاند ، این بدان مفهمو است که یک متغیر می تواند برای انواع مختلف
داده مورد استفاده قرار گیرد
var x; // نوع داده تعریف نشده
var x = 5; // نوع داده عددی
var x = "John"; // نوع داده رشته ای
رشته ها در جاوا اسکریپت:
var carName = "Volvo XC60"; // استفاده از دابل کوتیشن
var carName = 'Volvo XC60'; // استفاده از تک کوتیشن
شما میتوانید از علامت کوتیشن در بین رشته حروف خود نیز استفاده کنید با این شرط که اگر بین رشته از تک کوتیشن استفاده می کنید تمام رشته را بین جفت کوتیشن قرار دهید یا اگر بین رشته از جفت کوتیشن استفاده میکنید تمام رشته را بین تک کوتیشن قرار دهید
var answer = "He is called 'Johnny'"; // استفاده از کوتیشین درون جفت کوتیشن
اعداد جاوا اسکریپت :
var x1 = 34.00; // نوع داده اعشاری
var x2 = 34; // نوع داده صحیح
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
Booleans در جاوا اسکریپت :
نوع داده بولین فقط دو مقدار True و False را دارا می باشد.
var x = true;
var y = false;
نوع داده بولین برای تست در شرط ها استفاده می شود
آرایه جاوا اسکریپت :
مثال 2 :
var cars = ["Saab", "Volvo", "BMW"];
یک آرایه سه عنصری به نام cars
اشیاء جاوا اسکریپت :
در جاوا اسکریپت آبجکت یا همان اشیاء بین علامت آکولاد نوشته می شود.
اشیا در جاوا اسکریپت به صورت نام و مقدار (مقدار خصیصه : نام خصیصه) می باشد
مثال : یک شی با نام person شامل چهار خصیصه firstName و lastName و age و eyeColor می باشد
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
خروجی : John is 50 years old
پایان قسمت پنجم
منابع : http://www.w3schools.com/js/js_datatypes.asp
کانون تبلیغاتی افراگرافیک
آدرس: تهران-میدان انقلاب-خ آزادی-خ اسکندری-نبش کلهر-دفتر افرا گرافیک
66912056 66562677 66120698 09122246022
https://telegram.me/afragraphic_ir
http://instagram.com/afragraphic1390
http://facebook.com/AfraGraphic
http://plus.google.com/104048725792771050756
http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ
http://twitter.com/afragraphic
http://ir.linkedin.com/in/afragraphic
http://Telegram.me/afragraphic_ir
http://cloob.com/name/afragraphic
آموزش جاوا اسکریپت قمست چهارم
قواعد دستوری(syntax) جاوا اسکریپت :
به مجموعه قوانینی که چگونگی ساخت برنامه در جاوا اسکریپت را مشخص می کندد نحوه دستور نویسی (syntax) گفته می شود.
در یک زبان برنامه نویسی به این دستورالعمل ها statements نامیده می شوند
جاوا اسکریپت یک زبان برنامه نویسی می باشد (که ما از آن در طراحی وبسایت استفاده می کنیم)
دستورات جاوا اسکریپت مانند برخی از زبان ها از جمله C#,Vb با (;) از هم جدا می شوند
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
دستورات (statemens) جاوا اسکریپت :
در زبان های برنامه نویسی به دستورالمل های برنامه اصطلاحا (statatements) جملات،دستورات گفته می شود.
دستورات جاوا اسکریپت از موارد زیر تشکیل شده است :
جاوا اسکریپت Values (مقادیر) :
در نحوه کد نویسی در جاوا اسکریپت دو نوع روش برای مقدار دهی معین شده است:
لیترال ها (Literals) یا ثابت (Fixed) :
مهم ترین قوانین برای نوشتن مقادیر ثابت :
۱- استفاده از اعداد (ساده یا اعشار) مانند : 10.50و 1001
۲-استفاده از رشته ها (متن) که بین سینگل کوتیشن یا دابل کوتیشن نوشته میشود.مانند “afra” و ‘afra’
جاوا اسکریپت متغیرها (Variables):
در تمامی زبان های برنامه نویسی از متغیر ها برای ذخیره موقت داده استفاده می گردد.
در جاوا اسکریپت برای تعریف یک متغیر از کلمه کلیدی var استفاده می شود.
از علامت “=” مساوی برای معرفی مقداری که میخواهیم در متغیر ذخیره کنیم استفاده میکنیم.
مثال :
در مثال زیر یک متغیر x تعریف شده و مقدار 6 به آن انتصاب داده شده است
<script>
var x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>
جاوا اسکریپت Operators (عملگرها) :
مثال :
var x = 5 ;
var y = 6 ;
مثال :
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>
جاوا اسکریپت Expressions (اصطلاحات) :
یک اصطلاح از ترکیب مقادیر (Values) ، متغیر ها (Variables) و عملگرها (Operators) که در یک مقدار (Value) محاسبه شده است گفته میشود
مثال :
5 * 10
x * 10
"John" + " " + "Doe"
جاوا اسکریپت Keywords (کلمات کلیدی) :
از کلمات کلیدی در جاوا اسکریپت برای شناختن عمل های از پیش تعریف شده استفاده می شود.
بطور مثال var یک کلمه کلیدی می باشد که برای ایجاد یک متغیر استفاده می شود.
جاوا اسکریپت Comments (تفسیر نویسی) :
برخی عبارات در جاوا اسکریپت اجرا نمی شوند.
عباراتی که بعد از علامت ” // ” یا بین دو علامت /* و */ تفسیر نویسی یا کامنت گفته میشود و اجرا نمی شوند.
نوشتن کانت یا تفسیر نویسی اختیاری می باشدو فقط به خواناتر شدن بهینه سازی کدها و کارایی آنها کمک میکند
var x = 5; // I will be executed
// var x = 6; I will NOT be executed
جاوا اسکریپت شناسه ها (Identifiers):
اولین کارکتر در نام گذاری یا باید یکی از حروف لاتین یا آندرلاین “_” یا علامت دلار $ باشد.
کارکتر های بعدی میتوانند یکی یا ترکیبی از حروف لاتین یا علائم ریاضی یا آندرلاین یا علامت دلار باشد.
نکته : تمامی شناسه ها در جاوا اسکریپت حساس به کوچکی و بزرگی حروف هستند و براشون حرف A و a متفاوته.
پایان قسمت چهارم
منابع : http://www.w3schools.com/js/js_output.asp
کانون تبلیغاتی افراگرافیک
آدرس: تهران-میدان انقلاب-خ آزادی-خ اسکندری-نبش کلهر-دفتر افرا گرافیک
66912056 66562677 66120698 09122246022
https://telegram.me/afragraphic_ir
http://instagram.com/afragraphic1390
http://facebook.com/AfraGraphic
http://plus.google.com/104048725792771050756
http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ
http://twitter.com/afragraphic
http://ir.linkedin.com/in/afragraphic
http://Telegram.me/afragraphic_ir
http://cloob.com/name/afragraphic
آموزش جاوا اسکریپ قسمت 3
خروجی جاوا اسکریپت :
خروجی با استفاده از () window.alert :
شما می توانید از یک جعبه هشدار برای نمایش داده ها استفاده کنید
مثال :
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
خروجی :
خروجی با استفاده از ()document.write :
برای تست کردن وب سایت راحت ترین روش استفاده از ()document.write می باشد .
مثال :
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.write(5 + 6); </script> </body> </html>
خروجی :
استفاده از ()document.write بعد از لود شدن کامل صفحه وب سبب پاک شدن کل سند html صفحه شما می شود
مثال :
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
خروجی : پس از کلیک بر روی button کل صفحه html پاک شده و 11 در خروجی نمایش داده می شود
نکته : از روش ()document.write باید تنها برای تست وب سایت استفاده شود
خروجی با استفاده ازinnerHTML :
برای دسترسی به یک عنصر HTML در جاوا اسکریپت می توانیدازکد (document.getElementById(id
استفاده کنید.
مثال :
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body>
</html>
خروجی :
خروجی با استفاده از ()console.log :
شما می توانید از روش ()console.log برای نمایش داده ها در مرورگر شما ، استفاده کنید.
مثال :
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> console.log(5 + 6); </script> </body> </html>
پایان قسمت سوم
منابع : http://www.w3schools.com/js/js_output.asp
کانون تبلیغاتی افراگرافیک
آدرس: تهران-میدان انقلاب-خ آزادی-خ اسکندری-نبش کلهر-دفتر افرا گرافیک
66912056 66562677 66120698 09122246022
https://telegram.me/afragraphic_ir
http://instagram.com/afragraphic1390
http://facebook.com/AfraGraphic
http://plus.google.com/104048725792771050756
http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ
http://twitter.com/afragraphic
http://ir.linkedin.com/in/afragraphic
http://Telegram.me/afragraphic_ir
http://cloob.com/name/afragraphic