آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100آموزش طراحی سایت-BackGround در CSS3
سلام دوستان...
با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشید
آموزش BackGround در CSS3
خاصیت های مربوط به پس زمینه در CSS 3:
با CSS 3 تعدادی خاصیت جدید مربوط به پس زمینه در اختیار طراح وب قرار می دهد که امکان کنترل و مدیریت پس زمینه را در سطح پیشرفته تری فراهم می کند. در این فصل شما را با نحوه ی افزودن چندین تصویر پس زمینه به تنها یک المان آشنا می سازیم. همچنین با خاصیت های جدید زیر که در CSS3 عرضه شده آشنایی پیدا می کنید:
background-size background-origin background-clip
مرورگرهایی که در این جدول ارائه شده از این خاصیت نوین پشتیبانی می کنند
آموزش طراحی سایت : افزودن چندین پس زمینه در CSS 3
سی اس اس CSS3 به شما این امکان را می دهد با استفاده از خاصیت background-image چندین تصویر پس زمینه به المان خود اضافه کنید. تصاویر پس زمینه متمایز با استفاده از کاراکتر ویرگول از هم جدا شده و بر روی هم انباشته می شوند (قرار می گیرند) به گونه ای که اولین تصویر به بیننده از دیگر تصاویر نزدیک تر است. مثال زیر دارای دو تصویر پس زمینه است که اولین آن ها تصویر یک گل (که در پایین سمت راست تراز بندی شده و قرار گرفته) و دیگری یک پس زمینه ی کاغذ است (که در بالا سمت چپ قرار داده شده).
مثال:
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
می توان چندین تصویر پس زمینه را یا با خاصیت مختصر نویسی (مقداردهی در تنها یک تعریف و به صورت خلاصه / به صورت خاصیت چند مقداری) به المان اضافه کرد و یا به صورت جداگانه (تعیین به صورت خاصیت تک مقداری( تصویر پس زمینه را به المان اضافه کرد مانند مثال فوق. مثال زیر از روش اول برای این منظور بهره می گیرد:
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
آموزش طراحی سایت : خاصیت background-size در CSS 3
پیش از CSS3, تصویر پس زمینه همان اندازه ی اولیه و اصلی خود تصویر باقی می ماند. CSS3 این قابلیت را فراهم می کند که تصاویر پس زمینه را مجدداً در کانتکست ها و زمینه های مختلف بکار ببرید. اندازه ی تصاویر را می توان بر حسب پیکسل (بر حسب واحد length) , درصد (percentage) یا یکی از دو کلیدواژه ی contain یا cover تعریف کرد. مثال زیر تصویر پس زمینه را بسیار کوچکتر از اندازه ی اصلی آن تنظیم می کند (بر حسب پیکسل): تصویر اصلی:
زیر همان تصویر را مشاهده می کنید که مجدداً اندازه بندی شده است:
کد لازم برای عملیات فوق:
#div1 {
background: url(css3.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
همان طور که پیش تر ذکر شد دو مقادیر ممکن دیگر برای تعیین اندازه ی تصویر پس زمینه وجود دارند, کلید واژه های "contain" و "cover". کلید واژه ی "contain" تصویر پس زمینه را تا حد ممکن بزرگ مقیاس دهی و اندازه بندی می کنند (البته طول و عرض هر دو باید داخل کادر و محدوده ی محتوا جای گیرد). به عبارتی دیگر, عکس پس زمینه به اندازه محتویات درون عنصر بزرگ خواهد شد، تا ارتفاع وعرض آن اندازه المان شود. از این رو, بسته به نسبت و اندازه ی تصویر پس زمینه و همچنین مکان قرار گیری تصویر پس زمینه, ممکن است بخش هایی از پس زمینه توسط تصویر مربوطه پوشش داده نشود. کلید واژه ی "cover" تصویر پس زمینه را گونه ای مقیاس دهی می کند که کلاً ناحیه یا محدوده ی محتوا را تحت پوشش قرار دهد (هر دو عرض و ارتفاع تصویر باید با ناحیه ی محتوا برابر بوده یا از آن بیشتر شود). در حقیقت, عکس پس زمینه به اندازه محتویات درون عنصر کوچک خواهد شد، تا ارتفاع وعرض آن اندازه عنصر شود. از این رو, بخش هایی از تصویر ممکن است در محل موقعیت دهی قابل رویت نباشند. مثال زیر استفاده از این دو کلید واژه را در تنظیم اندازه ی تصویر پس زمینه, نمایش می دهد:
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
اندازه ی چندین تصویر پس زمینه را به طور همزمان مقداردهی کنید
خاصیت background-size همچنین قادر است هنگام کار با چند پس زمینه, چندین مقدار برای تصویر پس زمینه بپذیرد (برای این منظور لازم است از لیستی که توسط ویرگول ایتم ها را از هم جدا می کند استفاده کنید). مثال زیر سه تصویر پس زمینه ی منحصر به فرد مشخص کرده, و برای هر تصویر یک مقدار background-size متمایز در نظر می گیرد:
مثال:
#example1 {
background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
تصویر پس زمینه ی تمام صفحه
اکنون می خواهیم تصویر پس زمینه ی روی وب سایت خود پیاده کنیم که همواره (در همه شرایط) کل فضای موجود در پنجره ی مرورگر را پوشش دهد. شرایط لازم برای چنین تصویر به شرح زیر می باشد:
کل صفحه را با تصویر بپوشاند (هیچ گونه فضای سفیدی نباید وجود داشته باشد)
تصویر را متناسب با نیاز مقیاس دهی و اندازه بندی کند
تصویر در مرکز صفحه قرار گیرد
سبب ایجاد نوار پیمایش (scrollbar) برای مشاهده ی کل تصویر نشود
مثال زیر نحوه ی انجام عملیات مزبور را تشریح می کند. برای انجام این مثال کافی است از تگ html بهره بگیرید (زیرا که عنصر html همیشه حداقل از نظر ارتفاع با پنجره ی مرورگر مطابقت دارد). سپس یک پس زمینه ی وسط چین شده و ثابت روی آن مقدار دهی کنید. در مرحله ی نهایی عملیات اندازه ی تصویر را با استفاده از خاصیت background-size تنظیم کنید:
html {
background: url(img_flower.jpg) no-repeat center center fixed;
background-size: cover;
خاصیت background-origin در CSS3
خاصیت background-origin تعیین می کند تصویر پس زمینه در کدام موقعیت قرار بگیرد (نقطه ی شروع مکان قرار گیری پس زمینه ی المان مورد نظر را مشخص می کند). این خاصیت سه مقدار مقدار متفاوت می گیرد:
مثال زیر کاربرد خاصیت background-origin را نمایش می دهد:
#example1 {
border: 10px solid black;
padding:35px;
background:url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
خصوصیت background-clip در CSS3
این ویژگی به منظور تعیین مکان و نحوه قرار گیری پس زمینه در عنصر مورد نظر بکار گرفته می شود. خاصیت background-clip سه مقدار متفاوت می پذیرد که به شرح زیر است:
مثال زیر این خاصیت را کاربردی نمایش می دهد:
#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
کلیه ی خصوصیات مربوطه به پس زمینه در جدول زیر با ذکر شرح آن ارائه گردیده:
آموزش طراحی سایت ادامه دارد
آموزش طراحی سایت-اعداد در جاوا اسکریپت
سلام عزیزان با آموزش جاوا اسکریپت از دوره آموزش طراحی سایت در خدمت شما دوستان هستیم
آموزش اعداد در جاوا اسکریپت
اعداد در جاوا اسکریپت
آموزش طراحی سایت : زبان جاوا اسکریپت فقط یک نوع متغیر عددی دارد. متغیرهای عددی می توانند از نوع عددی یا اعشاری باشند.
مثال:
var x = 34.00; // A number with decimals
var y = 34; // A number without decimals
اعداد بسیار کوچک یا کوچک را می توان با نماد علمی نوشت
مثال:
var x = 123e5; // 12300000
var y = 123e-5; // 0.00123
اعداد جاوا اسکریپت همیشه 64 بیتی و با ممیز شناور (در مبنای 10) هستند. برخلاف بسیاری از زبان های برنامه نویسی، جاوا اسکریپت انواع عددی از قبیل : integer (عدد صحیح)، short، long و floating-point تعریف نمی کند و این نوع اعداد در جاوا اسکریپت استفاده نمی شوند. در جاوا اسکریپت اعداد همیشه به صورت ممیز شناور با دو رقم اعشار (double precision floating-point number) ذخیره می شوند که در حقیقت دنبال رو استاندارد بین المللی IEEE 754 می باشد. در این نوع قالب دهی یا فرمت اعداد در 64 بیت ذخیره می گردند، به گونه ای که کسر (fraction) در بیت های 0 تا 51، نما یا توان (exponent) در بیت های 52 تا 62 و علامت (sign) در بیت 63 ذخیره می گردد.
دقت اعشار (precision)
اعداد صحیح integer در حداکثر 15 رقم و همیشه به صورت دقیق مطرح می شوند.
مثال:
نمونه یک
function myFunction() {
var x = 999999999999999;
var y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "
" + y;
}
حداکثر تعداد اعشار، 17 رقم است، اما حساب ممیز شناور همیشه 100% دقیق نیست.
نمونه دو
function myFunction() {
var x = 0.2 + 0.1;
document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;
}
به منظور حل مشکل بالا، انجام عمل ضرب و تقسیم کمک زیادی می کند.
مثال:
نمونه سه
function myFunction() {
var x = (0.2 * 10 + 0.1 * 10) / 10;
document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;
}
آموزش طراحی سایت : اعداد شانزده شانزدهی (hexadecimal)
جاوا اسکریپت ثابت های عددی (اعداد ثابتی) را که با 0x شروع می شوند به عنوان اعداد در مبنای شانزده در نظر می گیرد (تفسیر می کند).
مثال:
نمونه چهار
function myFunction() {
document.getElementById("demo").innerHTML = "0xFF = " + 0xFF;
}
توجه:
هیچگاه یک عدد را با صفر مقدم ننویسید (مانند این مثال 07(.
بعضی از ویرایش های جاوا اسکریپت یک عدد را در صورتی که با صفر مقدم نوشته شوند، به صورت octal / هشت هشتی تفسیر می کند. به صورت پیش فرض، جاوا اسکریپت اعداد را به صورت اعشاری و در مبنای 10 نمایش می دهد، اما شما می توانید با استفاده از تابع toString() اعداد را به صورت مبنای 16، مبنای 8 یا مبنای 2 (دودئی) (به عنوان خروجی) نمایش دهید.
مثال:
نمونه پنج
function myFunction() {
var myNumber = 128;
document.getElementById("demo").innerHTML = "128 = " +
myNumber + " Decimal, " +
myNumber.toString(16) + " Hexadecimal, " +
myNumber.toString(8) + " Octal, " +
myNumber.toString(2) + " Binary."
}
Infinity (مقدار بی نهایت)
چنانچه عددی را که بزرگتر از بیشینه ی حد ممکن اعداد در جاوا اسکریپت است محاسبه کنید، مقدار infinity برگردانده می شود.
مثال:
نمونه شش
function myFunction() {
var myNumber = 2;
var txt = "";
while (myNumber != Infinity) {
myNumber = myNumber * myNumber;
txt = txt + myNumber + "
";
}
document.getElementById("demo").innerHTML = txt;
}
در صورت تقسیم عددی بر 0 نیز مقدار بی نهایت برگردانده می شود.
مثال:
نمونه هفت
function myFunction() {
var x = 2 / 0;
var y = -2 / 0;
document.getElementById("demo").innerHTML = x + "
" + y;
}
توضیح : infinity یک عدد است : typeOf infinity یک عدد برمی گرداند.
مثال:
نمونه هشت
function myFunction() {
document.getElementById("demo").innerHTML = typeof Infinity;
}
عبارت NaN- عبارت رزرو شده ی Not a Number
عبارت NaN یک کلمه ی رزرو شده (reserved word) است که بیان می کند یک مقدار از نوع عدد نیست. چنانچه سعی کنید با رشته ی غیر عددی عملیات محسابه ی انجام دهید، جاوا اسکریپت عبارت رزرو شده ی Not a Number را بر می گرداند.
نمونه نه
document.getElementById("demo").innerHTML = 100 / "Apple"
اما چنانچه رشته دربردارنده ی یک مقدار عددی باشد، نتیجه نیز یک عدد خواهد بود.
مثال:
نمونه ده
document.getElementById("demo").innerHTML = 100 / "10";
می توانید از تابع سراسری (global function) isNaN() برای کشف این مسئله که آیا مقدار یک عدد است یا خیر استفاده کنید.
مثال:
نمونه یازده
var x = 100 / "Apple";
document.getElementById("demo").innerHTML = isNaN(x);
اگر در محاسبات ریاضی از NaN استفاده کنید، نتیجه نیز NaN خواهد بود.
مثال:
نمونه دوازده
var x = NaN;
var y = 5;
document.getElementById("demo").innerHTML = x + y;
نمونه سیزده
var x = NaN;
var y = "5";
document.getElementById("demo").innerHTML = x + y;
دستور NaN یک عدد است : typeOf NaN عدد بازمی گرداند.
مثال:
نمونه چهارده
document.getElementById("demo").innerHTML = typeof NaN;
اعداد می توانند شی باشند. به طور معمول اعداد مقادیر اولیه ی هستند که از literal ها ایجاد می گردند.
var x = 123
اما اعداد را می توان با استفاده از کلیدواژه ی new به عنوان شی (object) تعریف کرد، بدین ترتیب
var y = new Number(123)
مثال:
نمونه پانزده
document.getElementById("demo").innerHTML = typeof x + "
" + typeof y;
از ایجاد شی number خودداری کنید، زیرا که سرعت اجرا را کاهش داده و عوارض جانبی فراوانی را منجر می شوند. عملگر == برای اعدادی بکار می رود که از لحاظ مقدار برابر باشند.
مثال:
نمونه شانزده
var x = 500; // x is a number
var y = new Number(500); // y is an object
document.getElementById("demo").innerHTML = (x == y);
توجه داشته باشید که در صورت استفاده از عملگر === دیگر اعداد با مقدار یکسان مساوی یا برابر محسوب نمی شوند زیرا که این عملگر انتظار دارد اعداد هم از نظر نوع و هم از نظر مقدار با هم برابر باشند.
نمونه هفده
var x = 500; // x is a number
var y = new Number(500); // y is an object
document.getElementById("demo").innerHTML = (x === y);
بخاطر داشته باشید که مقایسه ی اشی با هم امکان پذیر نمی باشد.
مثال:
نمونه هجده
var x = 500; // x is a number
var y = new Number(500); // y is an object
document.getElementById("demo").innerHTML = (x === y);
خواص (properties) و متدهای مربوط به اعداد در جاوا اسکریپت
مقادیر اولیه ی مثل 3.14 یا 2014، نمی توانند متد یا خاصیت داشته باشند (زیرا که در اصل این ها شی نیستند که بتوانند خاصیت یا متد داشته باشند). اما در رابطه با جاوا اسکریپت این امر صادق نیست. به این خاطر که زبان بیان شده هنگام اجرای متدها و خصوصیت ها با مقادیر اولیه به مثابه ی شی برخورد می کند. از این رو مقادیر اولیه همچنان قادر هستند در زبان جاوا اسکریپت متد و خاصیت داشته باشند.
مثال:
نمونه نوزده
document.getElementById("demo").innerHTML = Number.MAX_VALUE;
خاصیت های مربوط به اعداد در جاوا اسکریپت متعلق به دبرگیرنده یا wrapper شی number هستند که خود Number نامیده می شوند. دسترسی به خاصیت های نام برده تنها از این طریق ممکن می باشد.
Number.MAX_VALUE
استفاده از myNumber.MAX_VALUE در جایی که myNumber یک متغیر، عبارت یا مقدار است، باعث برگردانده شدن undefined می شود.
مثال:
نمونه بیست
var x = 6;
document.getElementById("demo").innerHTML = x.MAX_VALUE;
آموزش طراحی سایت ادامه دارد
آموزش طراحی سایت-افزونه ها در JQuery
با آموزش جدید Jquery از دوره آموزش طراحی سایت همراه ما باشید.
آموزش افزونه sliderbars.js در JQuery
اسلاید Slidebars یک افزونه jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت شما است. Slidebars 2 پر از ویژگی های جذاب میباشد. تعداد نامحدودی از اسلایدها - دیگر فقط یک سمت چپ ، یک راست وجود ندارد.
اسلایدهای بالا و پایین.
آموزش طراحی سایت : رویدادها - نمایش اسلایدها رویدادهایی را نشان می دهد که نشان دهنده رفتار آن است.
سبک انیمیشن شیفت جدید.
مدت زمان بهبود انیمیشن.
سبک های چاپ
سبک وزن تنها 1.69kb gzipped
جهت استفاده از این افزونه لازم است ، ابتدا فایلهای cssو js لازم را در پروژه اضافه میکنیم.
< link href="css/slidebars.css" rel="stylesheet" >
< script src="js/jquery.js" >< /script >
< script src="js/slidebars.js" >< /script >
در بخش body صفحه Html ، صفحه به دو بخش محتوای اصلی و منو تقسیم میکنیم و محتوا دلخواه در آنها قرار میدهیم
< div canvas="container" >
< h1 >welcome to my website< /h1 >
< p > introduction of slidebars.js< /p >
< p >
< button class="js-open-left-slidebar" >open left< /button >
< button class="js-close-left-slidebar" >CLOSE left< /button >
< button class="js-toggle-left-slidebar" >toggle left< /button >
< /p >
< /div >
< div off-canvas="slidebar-1 left shift" >
< p >menu left< /p >
< /div >
جهت و مدل باز و بسته شدن منو ، با استفاده از پارامتر off-canvas مشخص میشود برای فراخوانی افزونه روی این بخش ، قطعه کد جیکوئری زیر را مینویسیم
$ (document).ready(function(){
var controller = new slidebars();
controller.init();
بعد از ایجاد یک نمونه جدید از شی ، برای رویداد کلیک روی دکمه ی منو ، متد باز کردن منو را اجرا میکنیم.
$ ('.js-open-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.open('slidebar-1');
})
با کلیک روی دکمه با کلاس مشخص ، متد بستن منو را فراخوانی میکنیم.
$('.js-close-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.close('slidebar-1');
})
متد toggle ، دو متد close و open را با یکدیگر اجرا میکند
$('.js-toggle-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.toggle('slidebar-1');
})
//event
رویدادها:
رویدادهای ایجاد نمونه جدید، اعمال css روی منو که شامل shift و overlay ،push و reveal میباشد. مدل رفتاری منو در زمان باز و بسته شدن را نشان میدهد. رویداد باز و بسته شدن منو نیز از رویدادهای این افزونه میباشد.
$ ( controller.events ).on( 'init', function () {
console.log( 'Init event' );
} );
$ (controller.events).on('css',function () {
console.log('css')
})
$ (controller.events).on('exit',function () {
console.log('exit')
})
$ (controller.events).on('opening',function (event,id) {
console.log('opening'+id);
})
$ (controller.events).on('opened',function (event,id) {
console.log('opened'+id);
})
$ (controller.events).on('closing',function (event,id) {
console.log('closing'+id);
})
$ (controller.events).on('closed',function (event,id) {
console.log('closed'+id);
})
آموزش طراحی سایت : آموزش کار با افزونه Alertify
پلاگین alertify ، پلاگینی سبک برای توسعه دیالوگ باکس و هشدارهای زیبا در مرورگر ها میباشد. از ویژگی های این پلاگین میتوان به قابلیت گسترش و سفارشی سازی آن ، واکنشگرا بودن ، قابلیت اعمال قالب روی آنها و راست چین بودن آنها اشاره کرد.
آدرس صفحه وبی که میخواهید نمایش دهید را Paste کنید
این پلاگین درواقع جایگزینی برای دیالوگ باکسهای پیش فرض مرورگرها است و استفاده ی بسیار آسانی دارد.
در ادامه قطعه کدهای استفاده از این پلاگین را به ازای هشدارهای متفاوت مرورگرها مشاهده میکنیم
نمایش پیام و یا هشدار:
if(!alertify.myAlert){
//define a new dialog
alertify.dialog('myAlert',function(){
return{
main:function(message){
this.message = message;
},
setup:function(){
return {
buttons:[{text: "cool!", key:27/*Esc*/}],
focus: { element:0 }
};
},
prepare:function(){
this.setContent(this.message);
}
}});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");
آموزش راه اندازی پلاگین alertify
.alert("This is an alert dialog.", function(){
alertify.message('OK');
});
دریافت تاییدیه از کاربر
alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});
Run Example Documentation
دریافت ورودی از کاربر
alertify.prompt("This is a prompt dialog.", "Default value",
function(evt, value ){
alertify.success('Ok: ' + value);
},
function(){
alertify.error('Cancel');
})
نمایش پیام موفقیت آمیز
// success notification
// Shorthand for:
// alertify.notify( message, 'success', [wait, callback]);
alertify.success('Success message');
نمایش پیام خطا
// error notification
// Shorthand for:
// alertify.notify( message, 'error', [wait, callback]);
alertify.error('Error message');
نمایش هشدار
// alertify.notify( message, 'warning', [wait, callback]);
alertify.warning('Warning message');
Run Example Documentation
نمایش هشدار به کاربر
// default notification
// Shorthand for:
// alertify.notify( message, [type, wait, callback]);
alertify.message('Normal message');
Run Example Documentation
آموزش طراحی سایت ادامه دارد
آموزش طراحی سایت-آموزش JSON
سلام عزیزان با آموزش JSON از دوره آموزش طراحی سایت همراه ما باشید.
آموزش JSON
جیسون JSON سرنام واژگان JavaScript Object Notation یک استاندارد سبک، باز ، متنی و خوانا برای انسان جهت انتقال داده و جایگزینی برای xml است. قراردادهای مورد استفاده ی JSON برای تمامی برنامه نویسان از جمله برنامه نویس C، C++، Java، Python، Perl شناخته شده است که به شرح زیر می باشد:
جیسون JSON مخفف JavaScript Object Notation است.
فرمت آن برای اولین بار توسط Douglas Crockford معرفی شد.
برای انسان خوانا بوده و ویژه ی انتقال داده طراحی شده است.
از زبان اسکریپت نویسی JavaScript مشتق شده است.
پسوند فایل های با فرمت جی سن .json می باشد.
مدیا Media type این فرمت انتقال داده application/json است.
شناسه ی متحدالشکل نوع (UTI) آن public.json است.
آموزش طراحی سایت :موارد استفاده ی JSON
به هنگام نوشتن برنامه های تحت وب مبتنی بر جاوا اسکریپت که افزونه هایی برای مرورگر و وب سایت ها را شامل می شوند بکار می رود.
برای serialize کردن و انتقال داده های ساخت یافته از طریق اتصال شبکه بکار می رود.
عمدتا برای انتقال داده بین سرور و برنامه های تحت وب بکار می رود.
وب Web service ها و API ها از فرمت JSON برای ارائه ی داده های public بهره می گیرند.
تمامی زبان های برنامه نویسی روز از آن پشتیبانی می کنند.
ویژگی های JSON
خواندن و نوشتن در آن آسان است.
یک فرمت متنی تبادل داده سبک و کم حجم است.
با اینکه از زبان JavaScript مشتق شده، از این زبان کاملا مستقل است و مفسر (parser) آن برای تمامی زبان ها موجود می باشد.
نمونه ی ساده از JSON
مثال زیر نحوه ی استفاده از JSON را برای ذخیره ی اطلاعات مربوط به مجموعه ای از کتاب ها بر اساس موضوع و ویرایش هر یک، نمایش می دهد:
{
"book": [
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id":"07",
"language": "C++",
"edition": "second",
"author": "E.Balagurusamy"
}
]
}
نمونه ی دیگری را در زیر مشاهده می کنید. این کد را با پسوند json.htm ذخیره می کنیم:
language = "javascript" >
var object1 = { "language" : "Java", "author" : "herbert schildt" };
document.write("
JSON with JavaScript example
");
document.write("
");
document.write("
Language = " + object1.language+"
");
document.write("
Author = " + object1.author+"
");
var object2 = { "language" : "C++", "author" : "E-Balagurusamy" };
document.write("
");
document.write("
Language = " + object2.language+"
");
document.write("
Author = " + object2.author+"
");
document.write("
");
document.write(object2.language + " programming language can be studied " + "from book written by " + object2.author);
document.write("");
حال با مرورگر IE یا هر مرورگر دیگری که JavaScript در آن فعال سازی شده، فایل json.htm را باز می کنیم. نتیجه ی زیر را بدست می دهد:
ساختار نگارشی JSON
جیسون JSON –انواع داده ای (Data types)
فرمت JSON از انواع داده ای زیر پشتیبانی می کند:
نوع داده ای number
ممیز شناور با دو رقم اعشار در JavaScript.
فرمت Octal (هشت هشتی) و hexadecimal (شانزده شانزدهی) در آن استفاده نمی شود.
حرف NaN یا Infinity در Number بکار نمی رود.
جدول زیر انواع عددی را به نمایش می گذارد:
ساختار نگارشی (Syntax):
var json-object-name = { string : number_value, .......}
مثال:
در مثال زیر نوع داده ای Number را مشاهده می کنید. دقت داشته باشید که مقدار نباید داخل "" قرار داده شود:
var obj = {marks: 97}
نوع داده ی String
دنباله ای از کاراکترهای Unicode محصور شده در "" با کاراکتر گریز backslash.
کارکتر Character رشته ای با طول یک و در واقع متشکل از تنها یک کاراکتر است.
جدول زیر کاراکترهایی که در رشته بکار می روند را نمایش می دهد:
ساختار نگارشی:
var json-object-name = { string : "string value", .......}
مثال:
نمونه ای از نوع داده ای رشته را در زیر مشاهده می کنید:
var obj = {name: 'Amit'}
(نوع داده ای بولی)Boolen
مقدار true یا false را شامل می شود.
var json-object-name = { string : true/false, .......}
مثال:
var obj = {name: 'Amit', marks: 97, distinction: true}
نوع داده ای آرایه
دنباله یا مجموعه ای از مقادیر مرتب شده است.
المان ها یا مقادیر آن داخل براکت باز و بسته محصور می شوند.
مقادیر داخل آن توسط ویرگول از هم جدا می شوند.
اندیس آرایه می تواند از 0 یا 1 شروع شود.
اندیس آرایه دنباله ای از اعداد صحیح است.
ساختار نگارشی
[ value, .......]
نمونه ی زیر آرایه ای را نشان می دهد که چندین شی در آن جای گرفته است:
{
"books": [
{ "language":"Java" , "edition":"second" },
{ "language":"C++" , "lastName":"fifth" },
{ "language":"C" , "lastName":"third" }
]
}
نوع داده ای Object
مجموعه ای نامرتب از جفت های اسم و مقدار.
اشیا داخل {} محصور می شوند.
پس از هر اسم یک دو نقطه قرار گرفته و جفت های اسم و مقدار توسط ویرگول از هم جدا می شوند.
کلیدها باید از نوع رشته بوده و با یکدیگر فرق داشته باشند.
ساختار نگارشی (syntax)
نحوه ی نگارش آن به شکل زیر می باشد:
{ string : value, .......}
مثال:
مثال زیر نمونه ای از نوع داده ای object را نمایش می دهد:
{
"id": "011A",
"language": "JAVA",
"price": 500,
}
Whitespace
می تواند بین هر جفت توکنی قرار بگیرد. اغلب از آن به منظور بهبود خوانایی کد استفاده می شود.
ساختار نگارشی
{string:" ",....}
مثال:
var i = null;
if(i == 1){
document.write("
value is 1
");
else{
document.write("
value is null
");
}
نوع داده ای Value در JSON
می تواند هر نوعی را در خود ذخیره کند، از قبیل:
ساختار نگارشی
String | Number | Object | Array | TRUE | FALSE | NULL
مثال:
var i = 1;
var j = "sachin";
var k = null;
آموزش طراحی سایت ادامه دارد