آموزش طراحی سایت-JQuery

​

  

سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید

 

جی کوئری Jquery چیست؟

برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.

آموزش طراحی سایت : با توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع، jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار بالایی داشته باشید. تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه (plugin) پیدا کنید. قدرت و کارایی بالا، دامنه ی وسیع افزونه های پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر کتابخانه های jQuery تمایز بخشیده است.

 

آموزش طراحی سایت : آموزش انتخاب یک ویرایشگر مناسب برای jQuery

می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند. بهترین ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به یاری شما می آید.

داشتن لیستی از property ها، متدها و پارامترهای احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery یک تازه وارد هستید. در زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد: تصویر زیر توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.

​

 

​

 

این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.

 

 

آموزش استفاده از jQuery در صفحات وب

جهت استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی "Development" . نسخه ی "Production" برای وب سایت ها live و آماده می باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید مشاهده کنید خطا در کجا رخ داده است.

پس از دانلود فایل jQuery JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار ="text/javascript" src="jquery-1.5.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):

 

اکنون بخشی از صفحه ی شما به شکل زیر خواهد:

 

jQuery test

 

یک روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان (cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند، وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود. می توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید، مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد. برای نمونه، جهت اضافه کردن ویرایش jQuery 3.5.1 از سرورهای Google به صفحه ی وب مورد نظر، دستور زیر را وارد می کنید:

 

 

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت-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 رقم و همیشه به صورت دقیق مطرح می شوند.

 

 

مثال:

 

نمونه یک

<script>

function myFunction() {

var x = 999999999999999;

var y = 9999999999999999;

document.getElementById("demo").innerHTML = x + "<br>" + y;

}

</script>

حداکثر تعداد اعشار، 17 رقم است، اما حساب ممیز شناور همیشه 100% دقیق نیست.

 

نمونه دو

<script>

function myFunction() {

var x = 0.2 + 0.1;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

</script>

به منظور حل مشکل بالا، انجام عمل ضرب و تقسیم کمک زیادی می کند.

مثال:

 

نمونه سه

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 + "<br>";

}

document.getElementById("demo").innerHTML = txt;

}

در صورت تقسیم عددی بر 0 نیز مقدار بی نهایت برگردانده می شود.

مثال:

 

نمونه هفت

function myFunction() {

var x = 2 / 0;

var y = -2 / 0;

document.getElementById("demo").innerHTML = x + "<br>" + 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 + "<br>" + 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;

آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت-Bootstrap 4

​

  

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

آموزش تعیین جهت شناوری Float عنصر در بوت استرپ 4:

در قسمت قبل با کار با کلاس های کاربردی Utility Classes در Bootstrap 4 آشنا شدید

در شکل زیر، انواع حالت شناوری یک عنصر یا float آن در عنصر دربرگیرنده را نشان داده ایم :

​

 

به وسیله کلاس float-right می توانید عنصر را در جهت راست و با کلاس float-left، عنصر را در جهت چپ، تراز نمایید.

همچنین به وسیله کلاس clearfix می توانید اعمال هرگونه float به عنصر را از بین برده و حالت پیش فرض را نمایش دهید.

مثال : در کد مثال عملی زیر، انواع حالت float را با مثال و سورس کد نشان داده ایم :

 

مثال

 

 

Float left

Float right

 

 

 

آموزش طراحی سایت : آموزش تعیین float به صورت ریسپانسیو Responsive:

می توانید به وسیله کلاس هایی خاص، شناوری یا Float عنصر را بر حسب سایز صفحه نمایش تغییر دهید. برای این منظور از کلاس float-*-left/right استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته و جهت هم بایستی یا چپ (left) و یا راست (right) باشد :

• اندازه sm برای صفحه نمایش های بزرگتر از 576 پیکسل.

• اندازه md برای صفحه نمایش های بزرگتر از 768 پیکسل.

• اندازه lg برای صفحه نمایش های بزرگتر از 992 پیکسل.

• اندازه xl برای صفحه نمایش بزرگتر از 1200 پیکسل و ... .

مثال : در کد مثال عملی زیر، نحوه استفاده از انواع کلاس های ریسپانسیو responsive float را در عمل نشان داده ایم :

 

مثال

 

Float right on small screens or wider

 

 

 

 

Float right on medium screens or wider

 

 

 

 

Float right on large screens or wider

 

 

 

 

Float right on extra large screens or wider

 

 

 

 

Float none

 

 

آموزش طراحی سایت : آموزش تعیین چیدمان وسط Center Align در Bootstrap 4:

نحوه تراز شدن مرکزی یک عنصر در صفحه به شکل زیر است :

​

 

با اعمال کلاس mx-auto به یک عنصر (که باعث می شود مارجین چپ و راست آن برابر صفر شود)، وسط چین شده و در مرکز صفحه یا عنصر دربرگیرنده خود، قرار می گیرد. همانند کد مثال عملی زیر :

 

مثال

 

Centered

 

 

آموزش تعیین عرض (width) یک عنصر در Bootstrap 4:

در بوت استرپ 4، می توانید با کلاس های خاصی، عرض یک عنصر را سریع تعیین نمایید، همانند شکل زیر :

​

 

برای تعیین عرض عناصر در Bootstrap 4، می توانید از کلاس w-* استفاده نمایید که در آن * نشان دهنده میزان درصد عرض عنصر از 100 درصد عرض ممکن است. برای مثال کلاس هایی مثل w-25، w-50، w-100 و یا mw-100 که مورد آخر خلاصه حداکثر عرض مجاز یا max width است.

مثال : در کد مثال عملی زیر، چندین عنصر با عرض های 25 درصد تا 100 درصد، ایجاد کرده ایم :

 

مثال

 

Width 25%

 

 

Width 50%

 

 

Width 75%

 

 

Width 100%

 

 

Max Width 100%

 

 

آموزش تعیین ارتفاع (Hight) عنصر در بوت استرپ 4:

به وسیله کلاس های خاصی در Bootstrap 4، می توانید ارتفاع یک عنصر را بسیار ساده تعیین نمایید، مثل شکل زیر :

​

 

برای تعیین ارتفاع عناصر در Bootstrap 4، می توانید از کلاس h-* استفاده نمایید که در آن * نشان دهنده میزان درصد ارتفاع عنصر از 100 درصد ارتفاع ممکن است. برای مثال کلاس هایی مثل h- 25، h-50، h-75 و یا mh-100 که مورد آخر خلاصه حداکثر ارتفاع مجاز یا Max height است.

مثال : در کد مثال عملی زیر، چندین عنصر با ارتفاع های بین 25 درصد تا 100 درصد را به وسیله کلاس های جدید بوت استرپ 4، ایجاد کرده ایم :

 

مثال

 

 

 

Height 25%

 

 

Height 50%

 

 

Height 75%

 

 

Height 100%

 

 

Max Height 100%

 

 

 

 

آموزش تعیین فاصله (Spacing) در Bootstrap 4:

بوت استرپ 4، دارای رنج گسترده ای از کلاس های کمکی ویژه جهت تعیین فاصله بیرونی (margin) و حاشیه درونی (padding) می باشد.

این کلاس ها برای سایزهای مختلف صفحه نمایش به صورت زیر عمل می کند :

• حالت xs برای صفحات کوچکتر از عرض 576 پیکسل.

• حالت sm برای صفحات یزرگتر از عرض 576 پیکسل.

• حالت md برای صفحات بزرگتر از عرض 768 پیکسل.

• حالت lg برای صفحات بزرگتر از عرض 992 پیکسل.

• حالت xl برای صفحات یزرگتر از عرض 1200 پیکسل.

این کلاس با فرمت های زیر، برای انواع اندازه صفحه نمایش به کار می روند :

• فرمت حالت xs: {properts} {sides} -{size} = {خاصیت} {جهت ها}- {اندازه}

• - فرمت حالت های sm، md، lg و xl :

• دستور {property} {sides} -{brealpoint} -{size} = {خاصیت} {جهت ها}{سایز صفحه نمایش}- {اندازه}

در فرمول فوق، property یا خاصیت می تواند یکی از دو مقدار زیر را داشته باشد :

• مقدار m که تنظیم کننده حاشیه بیرونی یا margin است.

• مقدار p که تنظیم کننده حاشیه درونی یا padding است.

همچنین مقدار sides یا جهت ها هم می تواند یکی از مقادیر زیر را داشته باشد :

• مقدار t که تنظیم کننده حاشیه درونی بالا padding-top یا حاشیه بیرونی بالا margin-top است.

• مقدار b که تعیین کننده حاشیه درونی پایین padding-bottom یا حاشیه بیرونی پایین margin-bottom است.

• مقدار l که تنظیم کننده حاشیه درونی چپ padding-left و حاشیه بیرونی چپ margin-left است.

• مقدار r که تعیین کننده حاشیه درونی راست padding-right و حاشیه بیرونی راست margin-right است.

• مقدار x که می تواند هر دو حاشیه درونی راست و چپ (padding-right و padding-left) و هر دو حاشیه بیرونی راست و چپ (margin-right و margin-left) را تنظیم نماید.

• مقدار y که می تواند هر دو حاشیه درونی بالا وپایین (padding-top و padding-bottom) و هر دو حاشیه بیرونی بالا و پایین (margin-top و margin-left) را تنظیم نماید.

• مقدار خالی، اگر مقداری برای آن تعیین نشود، حاشیه درونی (padding) و حاشیه بیرونی (margin) هر 4 طرف عنصر را به اندازه تعیین شده، به صورت یکسان تنظیم می کند.

همچنین پارامتر اندازه یا Size نیز می تواند یکی از مقادیر زیر را داشته باشد :

• مقدار 0، که حاشیه درونی (padding) و حاشیه بیرونی (margin) را برابر صفر، تنظیم می کند.

• مقدار 1، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 0.25rem یا معادل 4 پیکسل در حالتی که اندازه فوت 16 پیکسل باشد، تنظیم می کند.

• مقدار 2، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر با مقدار 0.5rem یا معادل 8 پیکسل، در حالتی که اندازه فونت 16 پیکسل باشد، تنظیم می کند.

• مقدار 3، که حاشیه بیرونی (margin) و حاشیه درونی (padding) عنصر را برابر مقدار 1rem یا معادل 16 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.

• مقدار 4، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 1.5rem یا معادل 24 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.

• مقدار 5، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 3rem یا معادل 48 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.

• مقدار auto که مارجین و padding عنصر را به صورت اتوماتیک تنظیم می کند.

نکته :

حاشیه بیرونی یا margin می تواند مقادیر منفی نیز داشته باشد. برای این منظور بایستی عدد n را در مقابل سایز هدف، قرار دهید، به صورت زیر :

• مقدار n1، که مارجین را برابر مقدار منفی 0.25 rem یا منفی 4 پیکسل تعیین می کند.

• مقدار n2، که مارجین را برابر مقدار منفی -0.5 rem یا منفی 8 پیکسل تعیین می کند.

• مقدار n3، که مارجین را برابر مقدار منفی -1 rem یا منفی 16 پیکسل تعیین می کند.

• مقدار n4، که مارجین را برابر مقدار منفی 1.5 rem یا منفی 24 پیکسل تعیین می کند.

• مقدار n5، که مارجین را برابر مقدار منفی 3 rem یا منفی 48 پیکسل تعیین می کند.

مثال : در کد مثال عملی زیر، چند مثال از کلاس کاربردی ویژه تعیین فاصله را به کار برده و خروجی آن را نشان داده ایم :

 

مثال

 

I only have a top padding (1.5rem = 24px)

 

 

I have a padding on all sides (3rem = 48px)

 

 

I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)

 

 

سایر کلاس های تعیین مارجین و Padding در بوت استرپ 4، به صورت زیر هستند :

​

 

 

آموزش طراحی سایت : آموزش تعیین سایه Shadow برای عنصر در Bootstrap 4:

شکل زیر، انواع حالت های ایجاد سایه برای یک عنصر را در بوت استرپ 4، نشان می دهد :

​

 

از کلاس های shadow-*، می توانید برای تعیین سایه یک عنصر در Bootstrap 4 استفاده نمایید که در آن، * می تواند یکی از مقادیر زیر باشد :

• مقدار none: در این حالت عنصر فاقد سایه یا shadow خواهد بود.

• مقدار sm: در این حالت عنصر دارای سایه ی کوچک خواهد بود.

• بدون مقدار : حالت پیش فرض بوده و عنصر دارای سایه یا shadow با اندازه معمول است.

• مقدار Lg: در این حالت، عنصر دارای سایه ی بزرگتر از حالت معمول می شود.

مثال: در کد مثال عملی زیر : نحوه مختلف تعیین سایه یا shadow را برای یک عصنر آموزش داده ایم :

 

مثال

 

No shadow

 

 

Small shadow

 

 

Default shadow

 

 

Large shadow

 

 

آموزش ترازبندی عمومی Vertical Align در بوت استرپ 4:

به وسیله کلاس های align-*، می توانید ترازبندی عمودی عناصر را در یک خط، تعیین نمایید (این کلاس ها فقط بر روی عناصر درون خطی Inline، درون خطی تمام عرض inline-block، درون خطی جدولی Inline-table و عناصر درون خانه های جدول اثر دارد). مقدار * می تواند یکی از مقادیر زیر باشد :

​

 

مثال

baseline

top

middle

bottom

text-top

text-bottom

 

آموزش ایجاد فایل های embed ریسپانسیو در Bootstrap4:

در بوت استرپ 4، می توانید فایل های الحاق شده به صفحه یا embed، مثل ویدیو یا اسلاید شو را به صورت ریسپانسیو و بر حسب عرض عنصر مادر آن نمایش دهید.

برای این منظور بایستی کلاس embed-responsive-item را به عنصر الحاق شده (embed) مثل تگ video یا iframe اضافه کرده آن را در یک عنصر مادر یا دربرگیرنده که دارای کلاس embed-responsive-* قرار دهید. علامت * هم تعیین کننده نسبت نمایش عرض و طول مثلا 16 در 9 یا 4 در 3 و ... می باشد.

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

 

مثال

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

آموزش نمایش یا عدم نمایش آیتم (Visibility) در Bootstrap 4:

به وسیله کلاس های visible (نمایان) و invisible (مخفی)، می توانید نمایش یا عدم نمایش عنصر را در بوت استرپ 4، کنترل نمایید.

نکته :

کلاس های visible و invisible، مقدار خاصیت CSS display را تغییر نمی دهند. آن ها فقط حالت عنصر را به visibility برابر visible یا hidden تغییر می دهند.

مثال : در کد مثال زیر، عنصر اول را نمایان و عنصر دوم را مخفی کرده ایم :

 

مثال

 

I am visible

 

 

I am invisible

 

 

آموزش تعیین موقعیت Position عنصر در بوت استرپ 4:

می توانید با استفاده از کلاسfixed-top در بوت استرپ 4 ، کاری کنید که عنصر به بالای صفحه چسبیده و همواره (حتی با اسکرول صفحه به پایین)، در جای خود ثابت نشان داده شود.

در کد مثال زیر، منوی navbar را با کلاس fixed-top، در بالای صفحه ثابت کرده ایم :

 

مثال

 

 

...

 

 

همچنین با استفاده از کلاس fixed-bottom، می توانید یک عنصر را در پایین صفحه چسبانده و همواره (حتی با اسکرول صفحه به بالا)، به طور ثابت در انتهای صفحه نمایش دهید.

در کد مثال دوم، منوی navbar را به انتهای صفحه، چسبانده ایم :

 

مثال

 

 

...

 

 

در حالت سوم، به وسیله کلاس sticky-top، می توانید کاری کنید تا یک عنصر، هنگامی که موقعیت اسکرول صفحه به آن رسید، به بالای صفحه چسبیده و تا زمان برگشت به موقعیت اسکرول آن، ثابت در بالای صفحه بماند.

نکته :

این کلاس در مرورگر IE 11 کار نمی کند.

مثال : در کد مثال زیر، به منوی navbar کلاس sticky-top داده ایم. هنگامی که کاربر به پایین اسکرول کرده و موقعیت صفحه به آن می رسد، به بالای صفحه پرش کرده و به صورت ثابت در آنجا نمایش داده می شود :

 

 

...

 

 

می توانید از کلاس close، برای ایجاد یک دکمه بستن استفاده کنید. معمولا از این دکمه ها در کادرهای هشدار alert یا پیام modal، استفاده می شود.

اگر به مثال عملی زیر دقت نمایید، ما از کاراکتر ویژه × برای ایجاد یک ضربدر (×) که نمایانگر دکمه بستن است، استفاده کرده ایم. همچنین، علامت × به صورت پیش فرض، در سمت راست عنصر قرار می گیرد :

 

مثال

×

 

آموزش تعیین متن برای دستگاه های نابینایان Screen readers :

می توانید از کلاس sr-only برای مخفی کردن یک عنصر یا نوشته، در کلیه دستگاه ها و صفحه نمایش ها به جز صفحه نمایش های Screen Reader که مختص نابینایان است، استفاده نمایید. همانند کد مثال عملی زیر :

 

مثال

I will be hidden on all screens except for screen readers.

 

آموزش کار با رنگ ها Colors در بوت استرپ 4:

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

این کلاس ها به همراه توضیح مختصری راجع به آن ها، عبارتند از :

​

 

مثال

 

 

 

Contextual Colors

 

 

Use the contextual classes to provide "meaning through colors":

 

 

This text is muted.

 

 

This text is important.

 

 

This text indicates success.

 

 

This text represents some information.

 

 

This text represents a warning.

 

 

This text represents danger.

 

 

Secondary text.

 

 

This text is dark grey.

 

 

Default body color (often black).

 

 

This text is light grey (on white background).

 

 

This text is white (on white background).

 

 

 

کلاس های رنگی متنی ویژه بوت استرپ 4 را می توانید درون لینک ها (تگ a یا Link) نیز به کار ببرید. در این صورت، در هنگام عبور موس از روی نوشته (hover)، رنگ نوشته لینک کمی تیره تر هم می شود. همانند مثال عملی زیر :

 

مثال

 

 

 

Contextual Link Colors

 

 

Hover over the links.

 

Muted link.

Primary link.

Success link.

Info link.

Warning link.

Danger link.

Secondary link.

Dark grey link.

Body/black link.

Light grey link.

 

 

همچنین می توانید با استفاده از کلاس های text-black-50 و text-white-50 به نوشته های سیاه یا سفید، پس زمینه و مقدار وضوح 50 درصد بدهید. نحوه کاربرد این کلاس ها را در کد مثال عملی زیر، نشان داده ایم :

 

مثال

 

 

 

Opacity Text Colors

 

 

Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

 

 

Black text with 50% opacity on white background

 

 

White text with 50% opacity on black background

 

 

 

 

آموزش کار با رنگ های پس زمینه background Colors در بوت استرپ 4:

از کلاس های متنی رنگی ویژه بوت استرپ، برای تعیین رنگ پس زمینه عناصر می توانید استفاده نمایید. این کلاس ها استفاده از رنگ های محبوب را سریع کرده و همچنین بر حسب رنگ خود، پیام های مفهومی به کاربران القا می کنند. فقط توجه داشته باشید که کلاس های رنگ پس زمینه، رنگ نوشته عنصر را تعیین نمی کنند، بنابراین لازم است تا گاهی آن ها را به همراه یک کلاس text-* برای تعیین رنگ نوشته به کار ببرید.

کلاس های رنگی مخصوص پس زمینه در بوت استرپ 4 به همراه توضیح مختصر آن ها به شرح زیر هستند :

​

 

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

 

مثال

 

 

 

Contextual Backgrounds

 

 

Use the contextual background classes to provide "meaning through colors".

 

 

Note that you can also add a .text-* class if you want a different text color:

 

 

This text is important.

 

 

This text indicates success.

 

 

This text represents some information.

 

 

This text represents a warning.

 

 

This text represents danger.

 

 

Secondary background color.

 

 

Dark grey background color.

 

 

Light grey background color.

 

 

 

 

بررسی کلاس کار با متن و فن چاپ در بوت استرپ 4 :

همانطور که در بخش آموزش کار با متن و فن چاپ در Bootstrap 4 نشان داده ایم، از کلاس های ویژه typography برای کار با متن و نوشته در بوت استرپ 4 استفاده می شود. لیست زیر، تمامی این کلاس ها را به ترتیب معرفی کرده است :

​

 

​

 

 

آموزش کار با عناصر تمام عرض (Block) در بوت استرپ 4:

برای این که یک عنصر به صورت تمام عرض در صفحه یا عنصر دربرگیرنده آن نمایش داده شود، بایستی کلاس d-block را به آن اضافه کنید. همچنین می توانید از کلاس های d-*-block برای کنترل نمایش تمام عرض عنصر در هر یک از سایزهای صفحه نمایش نیز استفاده کنید که در آن * می تواند یکی از مقادیر sm، md، Lg یا xl باشد.

مثال : در کد مثال عملی زیر، یک عنصر تمام عرض (Block) و چند عنصر دیگر که در صفحه نمایش های مختلف تمام عرض هستند را ایجاد کرده ایم :

مثال

d-block

d-sm-block

d-md-block

d-lg-block

d-xl-block

 

معرفی سایر کلاس های نمایش Display عنصر در Bootstrap 4 :

سایر کلاس های کنترل نمایش (Display) عناصر در بوت استرپ 4 را در جدول زیر معرفی کرده ایم :

​

 

 

آموزش طراحی سایت : آموزش کار با Flex در Bootstrap 4 :

می توانید از کلاس flex-* برای کنترل نحوه نمایش و قالب بندی (layout) یک عنصر توسط FlexBox، استفاده کنید.

برای دریافت اطلاعات بیشتر، به بخش آموزش کاربرد FlexBox در سایت تحلیل داده بروید.

علامت * در کلاس فوق می تواند یکی از مقادیر sm، md، lg و یا xl را داشته باشد که تعیین کننده سایز صفحه نمایش است.

در عکس زیر ، مثال های مختلفی از تراز بندی عناصر با FlexBox را نشان داده ایم :

​

 

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت-آموزش 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

1. ممیز شناور با دو رقم اعشار در JavaScript.

2. فرمت Octal (هشت هشتی) و hexadecimal (شانزده شانزدهی) در آن استفاده نمی شود.

3. حرف NaN یا Infinity در Number بکار نمی رود.

جدول زیر انواع عددی را به نمایش می گذارد:

​

 

ساختار نگارشی (Syntax):

var json-object-name = { string : number_value, .......}

مثال:

در مثال زیر نوع داده ای Number را مشاهده می کنید. دقت داشته باشید که مقدار نباید داخل "" قرار داده شود:

var obj = {marks: 97}

 

نوع داده ی String

1. دنباله ای از کاراکترهای Unicode محصور شده در "" با کاراکتر گریز backslash.

2. کارکتر Character رشته ای با طول یک و در واقع متشکل از تنها یک کاراکتر است.

3. جدول زیر کاراکترهایی که در رشته بکار می روند را نمایش می دهد:

​

 

ساختار نگارشی:

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}

 

نوع داده ای آرایه

1. دنباله یا مجموعه ای از مقادیر مرتب شده است.

2. المان ها یا مقادیر آن داخل براکت باز و بسته محصور می شوند.

3. مقادیر داخل آن توسط ویرگول از هم جدا می شوند.

4. اندیس آرایه می تواند از 0 یا 1 شروع شود.

5. اندیس آرایه دنباله ای از اعداد صحیح است.

ساختار نگارشی

[ value, .......]

نمونه ی زیر آرایه ای را نشان می دهد که چندین شی در آن جای گرفته است:

{

"books": [

{ "language":"Java" , "edition":"second" },

{ "language":"C++" , "lastName":"fifth" },

{ "language":"C" , "lastName":"third" }

]

}

 

نوع داده ای Object

1. مجموعه ای نامرتب از جفت های اسم و مقدار.

2. اشیا داخل {} محصور می شوند.

3. پس از هر اسم یک دو نقطه قرار گرفته و جفت های اسم و مقدار توسط ویرگول از هم جدا می شوند.

4. کلیدها باید از نوع رشته بوده و با یکدیگر فرق داشته باشند.

ساختار نگارشی (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;

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت-افزونه ها در 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

آموزش طراحی سایت ادامه دارد

 

 

 

​

آموزش طراحی سایت-کلاس های کاربردی در بوت استرپ 4

​

  

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

 

آموزش کار با Scrollspy در بوت استرپ 4:

از کامپوننت Scrollspy در Bootstrap 4 برای ایجاد لینک های پرشی در صفحات وب استفاده می شود. در صورت کلیک بر روی هر لینک محتوای مرتبط به آن لینک در صفحه یا عنصر دربرگیرنده، نمایش داده خواهد شد و صفحه به آن نقطه پرش می کند.

 

آموزش نحوه ایجاد یک Scrollspy در بوت استرپ 4:

از کد زیر برای ایجاد یک Scrollspy در Bootstrap 4 استفاده می شود. به کد دقت نمایید، سپس به تشریح نکات مهم آن پرداخته ایم :

 

مثال 1

<!-- The scrollable area -->

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

...

<ul class="navbar-nav">

<li><a href="#section1">Section 1</a></li>

...

</ul></nav>

<!-- Section 1 -->

<div id="section1">

<h1>Section 1</h1>

<p>Try to scroll this page and look at the navigation bar while scrolling!</p>

</div>

...

خاصیت data-spy=” Scroll” را به المنتی که دربرگیرنده منطقه اسکرول و پرش لینک ها و درواقع عنصر حاوی محتویات هدف است، اعمال کنید.

سپس خاصیت data-target را که مقدار آن برابر با Id یا کلاس عنصر منوی Navigation Bar است، اضافه کنید (کلاس navbar).

این کار برای اطمینان از اتصال منوی navbar به منطقه اسکرول شونده و دربرگیرنده محتوی است.

دقت کنید که المنت های اسکرول شونده دارای id ای معادل خاصیت href لینک لیست آیتم های درون منوی navbar باشند، مثلا تگ div دارای id معادل “section1” بوده که با خاصیت href تگ a معادل #section1 برابر است.

در نهایت خاصیت اختیاری data-offset تعیین کننده تعداد پیکسل فاصله از بالای عنصر اسکرول شونده است که در هنگام محاسبه موقعیت آن، لحاظ خواهد شد. این خاصیت زمانی کاربرد دارد که شما احساس می کنید لینک های درون منوی navbar، حالت فعال بودن (active state) خود را در هنگام پرش به عناصر اسکرول شونده، خیلی زود، تغییر می دهند. مقدار پیش فرض آن 10 پیکسل است.

نکته :

المنت با خاصیت data-spy=”scroll” نیازمند خاصیت موقعیت CSS Position برابر با حالت relative است تا درست کار کند.

 

ایجاد Scrollspy عمودی در آموزش طراحی سایت

در کد مثال عملی زیر، از دکمه های pills بوت استرپ 4، برای ایجاد Scrollspy عمودی استفاده کرده ایم. به کد مثال و تفاوت آن با کد قبل دقت نمایید :

مثال 2

<div class="container-fluid">

<div class="row">

<nav class="col-sm-3 col-4" id="myScrollspy">

<ul class="nav nav-pills flex-column">

<li class="nav-item">

<a class="nav-link active" href="#section1">Section 1</a>

</li>

...

</ul>

</nav>

<div class="col-sm-9 col-8">

<div id="section1">

<h1>Section 1</h1>

<p>Try to scroll this page and look at the menu while scrolling!</p>

</div>

...

</div>

</div>

</div>

 

آموزش کار با کلاس های کاربردی Utility Classes در Bootstrap 4

بوت استرپ 4، دارای تعداد زیادی کلاس کاربردی / کمکی موسوم به Utility Classes است که به شما امکان می دهد بدون استفاده از هیچ کد یا استایل CSS، قالب مورد نظرتان را به المنت هدف، اعمال کنید.

 

آموزش کار با کلاس خطوط حاشیه border در بوت استرپ 4:

به وسیله کلاس border در بوت استرپ 4، می توانید خطوط حاشیه برای یک المنت اضافه یا حذف نمایید.

شکل زیر، مدل های مختلف تعیین خطوط حاشیه در Bootstrap 4 را نشان می دهد.

​

 

مثال : در کد مثال عملی زیر، نحوه تعیین خطوط حاشیه به دور یک عنصر را نشان داده ایم. در مثال اول، المنت span در هر چهار طرف دارای خطوط حاشیه خواهد بود ولی در مثال های بعد با اعمال عدد صفر و تعیین جهت، خطوط حاشیه مورد نظر را حذف کرده ایم :

 

مثال 1

<span class="border"></span>

<span class="border border-0"></span>

<span class="border border-top-0"></span>

<span class="border border-right-0"></span>

<span class="border border-bottom-0"></span>

<span class="border border-left-0"></span>

 

آموزش تعیین رنگ خطوط حاشیه با کلاس border در بوت استرپ 4:

به وسیله کلاس اصلی border و کلاس های متنی رنگی ویژه بوت استرپ 4، می توانید رنگ های خاص و مفهومی را برای خطوط حاشیه المنت تعیین نمایید. در عکس زیر، مدل های مختلف تعیین رنگ برای خطوط حاشیه عنصر، نشان داده شده است :

​

 

مثال: در کد مثال عملی زیر : برای چندین المنت Span خطوط حاشیه رنگی با استفاده از کلاس متنی رنگی ویژه بوت استرپ 4، تعیین کرده ایم :

 

مثال 2

<span class="border border-primary"></span>

<span class="border border-secondary"></span>

<span class="border border-success"></span>

<span class="border border-danger"></span>

<span class="border border-warning"></span>

<span class="border border-info"></span>

<span class="border border-light"></span>

<span class="border border-dark"></span>

<span class="border border-white"></span>

 

تعیین خطوط حاشیه گرد Border Radius در آموزش طراحی سایت:

در شکل زیر نحوه تعیین و ایجاد گوشه های گرد برای خطوط حاشیه یک عنصر را در حالت های مختلف نشان داده ایم :

​

 

به وسیله کلاس rounded و سایر کلاس های وابسته می توانید تعیین کنید گوشه های خطوط حاشیه یک عنصر به صورت گرد باشد. با اعمال کلاس rounded، هر چهارگوش عنصر گرد خواهد شد، اما با تعیین جهت بالا (top)، پایین (bottum) و چپ (left) و راست (right) می توانید گرد شدن هر طرف را به صور مجزا مشخص نمایید.

همچنین به وسیله اضافه کردن مقادیری مثل sm یا Lg تعیین کنید فقط در برخی سایز صفحه های نمایش، خطوط حاشیه گرد شوند. انواع حالت های مختلف و خروجی آن ها را در کد مثال عملی زیر، نشان داده ایم :

 

مثال 3

<span class="rounded-sm"></span>

<span class="rounded"></span>

<span class="rounded-lg"></span>

<span class="rounded-top"></span>

<span class="rounded-right"></span>

<span class="rounded-bottom"></span>

<span class="rounded-left"></span>

<span class="rounded-circle"></span>

<span class="rounded-0"></span>

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت-رشته ها در جاوا اسکریپت

سلام عزیزان با آموزش جاوا اسکریپت در خدمت شما دوستان هستیم

 

رشته ها (string) در آموزش طراحی سایت

از رشته (string) به منظور ذخیره سازی و دستکاری نوشته یا متن در جاوا اسکریپت استفاده می شود. رشته در جاوا اسکریپت اصولا جهت ذخیره ی یک سری کاراکتر بکار می رود، مانند این مثال : "John Doe". رشته می تواند هر نوشته ی داخل علامت نقل و قول باشد. امکان استفاده از هر دو نوع " " یا ' ' وجود دارد.

مثال:

 

نمونه یک

<script>

    var carName1 = "Volvo XC60";

    var carName2 = 'Volvo XC60';

    document.getElementById("demo").innerHTML =

    carName1 + "<br>" + carName2;

</script>

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

مثال:

 

نمونه دو

var answer1 = "It's alright";

var answer2 = "He is called 'Johnny'";

var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML =

answer1 + "<br>" + answer2 + "<br>" + answer3;

 

طول رشته (string length)

جهت بدست آوردن طول یک رشته، کافی است از خاصیت (property) length بهره ببرید.

مثال:

 

نمونه سه

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

document.getElementById("demo").innerHTML = txt.length;

 

کارکترهای ویژه ی (Special Characters) در آموزش طراحی سایت

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

مثال:

var y = "We are the so-called "Vikings" from the north."‎

بدین معنا که رشته به صورت زیر کوتاه شده و بقیه ی آن درنظر گرفته نمی شود.

‎"We are the so-called ".‎

جهت اجتناب از بروز مشکلاتی از این دست، باید از کاراکتر"\ " استفاده کنید. علامت (\) برای وارد کردن کاراکترهای ویژه مانند: (")، (') و یا رفتن به خط جدید در یک رشته، استفاده می شود.

مثال:

 

نمونه چهار

var x = 'It\'s alright';

var y = "We are the so-called \"Vikings\" from the north.";

 

document.getElementById("demo").innerHTML = x + "<br>" + y;

جدول زیر تمامی کاراکترهایی که امکان درج آن ها در رشته با استفاده از (\) فراهم می آید را فهرست کرده.

 

 

شکستن خطِ کدهای طولانی (قرار دادن کد در خط بعدی)

به منظور بهبود خوانایی کد، برنامه نویسان تا حد ممکن از قرار دادن بیش از 80 کاراکتر داخل یک خط اجتناب می کنند. در صورتی که دستور جاوا اسکریپت داخل یک خط جا نمی گیرد، بهترین مکان برای شکستن آن خط پس از عملگر خواهد بود.

مثال:

 

نمونه پنج

<h1>My Web Page</h1>

 

<p>

The best place to break a code line is after an operator or a comma.

</p>

 

<p id="demo">false</p>

 

<script>

document.getElementById("demo").innerHTML =

"Hello Dolly.";

</script>

همچنین می توان یک خط کد را از وسط یک رشته ی متنی (text string) قطع کرد و بقیه ی آن را در خط بعدی قرار داد، این امر با استفاده از کاراکتر" \ " امکان پذیر می شود.

مثال:

 

نمونه شش

<script>

document.getElementById("demo").innerHTML = "Hello\

Dolly.";

</script>

توجه:

استفاده از کاراکتر مذکور به گونه ی که تشریح شد یک استاندارد ECMAScript (JavaScript) نیست. برخی از مرورگرها فاصله ی قبل از کاراکتر \ را نمی پذیرند.

روش امن تر و پرکاربرد تر، به هم وصل کردن رشته های شکسته شده توسط " + " می باشد.

مثال:

 

نمونه هفت

<script>

document.getElementById("demo").innerHTML = "Hello" +

"Dolly.";

</script>

اجازه ی نصف کردن (شکستن) خط کد با استفاده از کاراکتر \ به شما داده نمی شود.

مثال:

 

نمونه هشت

<script>

document.getElementById("demo").innerHTML = \

"Hello Dolly.";

</script>

به طور معمول رشته های جاوا اسکریپت مقادیر اولیه ی هستند که از literal ها ساخته می شوند.

var firstName = "John"‎

اما می توان رشته ها را با استفاده از کلید واژه ی new به عنوان شی تعریف کرد.

var firstName = new String("John")‎

مثال:

 

نمونه نه

<script>

var x = "John"; // x is a string

var y = new String("John"); // y is an object

 

document.getElementById("demo").innerHTML =

typeof x + "<br>" + typeof y;

</script>

توجه:

سعی کنید تا حد ممکن از ایجاد رشته به عنوان اشیا خودداری کنید، زیرا که سرعت اجرا را کاهش داده و باعث بوجود آمدن اثار جانبی ملال آوری زیادی می شود.

اگر از عملگر == استفاده کنید، رشته های (که مقادیر یکسان دارند) یکسان تلقی می گردند.

مثال:

 

نمونه ده

<script>

var x = "John"; // x is a string

var y = new String("John"); // y is an object

document.getElementById("demo").innerHTML = (x == y);

</script>

اما چنانچه از عملگر === استفاده کنید، رشته هایی که فقط مقادیر یکسان دارند دیگر کاملا یکسان محسوب نمی شوند زیرا که عملگر ذکر شده انتظار دارد رشته ها از نظر مقدار و نوع با هم یکی باشند.

مثال:

 

نمونه یازده

<script>

var x = "John"; // x is a string

var y = new String("John"); // y is an object

document.getElementById("demo").innerHTML = (x === y);

</script>

حتی بدتر اشیا هستند که نمی توان آن ها را با هم مقایسه کرد.

مثال:

 

نمونه دوازده

<script>

var x = new String("John"); // x is an object

var y = new String("John"); // y is an object

document.getElementById("demo").innerHTML = (x == y);

</script>

مهم : اشیا را نمی توان با هم مقایسه کرد.

 

خصوصیت ها و متدهای رشته

مقادیر اولیه مانند "John Doe" قادر به گرفتن خصوصیت و متد نیستند (زیرا که این مقادیر اولیه شی محسوب نمی شوند). اما در جاوا اسکریپت این امکان برای مقادیر اولیه وجود دارد که متد و خصوصیت دریافت کنند، زیرا که جاوا اسکریپت هنگام اجرای متدها و خاصیت ها (property) با مقادیر اولیه مانند شی برخورد می کند.

 

خاصیت های شی string

خاصیت های شی string

آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت-event در جاوا اسکریپت

سلام عزیزان با آموزش جاوا اسکریپت در خدمت شما دوستان هستیم

 

آموزش رخدادادها event در جاوا اسکریپت

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

 

رخدادهای HTML در آموزش طراحی سایت

رخداد HTML ممکن است چیزی باشد که هم از طرف مرورگر و هم از طرف کاربر روی می دهد. نمونه هایی از رخدادهای HTML به ترتیب زیر می باشند. بار گذاری یک صفحه ی وب HTMLبه پایان رسیده یکی از فیلدهای ورودی (input field) HTML تغییر یافته یا اصلاح شده یک دکمه ی HTML روی صفحه کلیک شده اغلب پس از اینکه رویدادی (event) رخ می دهد، عملیات خاصی را می خواهیم پیاده کنیم. جاوا اسکریپت به مجرد اینکه رخدادی را شناسایی کند، اجازه ی اجرای کد مورد نظر را به برنامه نویس می دهد. HTML به خصیصه های event handler (کنترل گر و مدیریت کننده ی رخداد ها) که به کد جاوا اسکریپت (javascript code) الحاق شده اند اجازه ی متصل یا ضمیمه شدن به عناصر HTML را می دهد.

 

با تک کوتیشن (' ')

<some-html-element some-event='some JavaScript'>

 

با دابل کوتیشن (" ")

<some-html-element some-event="some JavaScript">

در مثال زیر خصیصه (attribute) onClick (به همراه کد)، به المان دکمه (تگ </button>) افزوده می شود.

مثال:

 

نمونه یک

<button onclick="getElementById('demo').innerHTML=Date()">The time is?</button>

همان طور که در مثال بالا مشاهده می کنید، کد جاوا اسکریپت محتوای المان مربوط را به وسیله ی شناسه ی "demo" تغییر می دهد. حال توجه خود را به نمونه ی بعدی جلب کنید که در آن کد محتوای المان خود را با استفاده از this.innerHTML تغییر می دهد.

مثال:

 

نمونه دو

<button onclick="this.innerHTML=Date()">The time is?</button>

نکته:

کد جاوا اسکریپت معمولا چندین خط ادامه دارد. رایج تر این است (بیشتر می بینید) که خصیصه ی رخدادها (event attribute) توابع را فراخوانی کنند.

مثال:

 

نمونه سه

<script>

function displayDate() {

document.getElementById("demo").innerHTML = Date();

}

</script>

 

رخدادهای معمول و پرکاربرد HTML

 

جاوا اسکریپت چه نقشی را ایفا می کند؟

اداره کننده ی رخدادها Event handler ها به منظور کنترل، بررسی، تایید درستی ورودی کاربر (user input) و عملیاتی که توسط کاربر انجام می شود و همچنین عملیات مرورگر مورد استفاده قرار می گیرد. کارهایی که باید با هر بار بارگذاری صفحه، انجام شود. کارهایی که باید با بسته شدن صفحه / هنگامی که صفحه بسته می شود، انجام گیرد. عملیاتی که باید پس از اینکه کاربر یک دکمه را فشار داد، پیاده شوند. محتوا (content) که باید به هنگام وارد شدن داده توسط کاربر، بررسی و تایید درستی شود و غیره..... روش های مختلفی هست که از طریق آن ها می توان به جاوا اسکریپت امکان همکاری و انجام عملیات با رخداد ها را داد، از جمله خصیصه های رخداد HTML خود می توانند (به طور) مستقیم کد جاوا اسکریپت را اجرا کنند. خصیصه های رخداد HTML می توانند توابع جاوا اسکریپت را صدا بزنند.(فراخوانی کنند) برنامه نویس می تواند توابع اداره کننده ی رخداد خود را به المان های HTML تخصیص دهد. برنامه نویس می تواند از ارسال، مدیریت و دستکاری رخدادها جلوگیری کند و غیره.....

 

 

آموزش حوزه ی دسترسی در جاوا اسکریپت / JavaScript Scope

 

در جاوا اسکریپت توابع (functions) و اشیا (objects) نیز متغیر تلقی می شوند. در زبان مبتنی بر اشیا جاوا اسکریپت، scope به مجموعه ی از متغیرها، اشیا و توابع گفته می شود که شما به آن ها دسترسی دارید. حوزه یا scope جاوا اسکریپت توابع هستند و اینscope ها داخل تابع تغییر یافته و تعریف می شوند.

 

متغیرهای محلی جاوا اسکریپت

متغیرهایی که داخل یک تابع تعریف می شوند، در واقع متغیرهای محلی / local آن تابع محسوب می شوند. متغیرهای محلی (local variables)، حوزه دسترسی یا scope آن ها نیز محلی تلقی می گردد، بدین معنا که دسترسی به آن ها تنها داخل خود تابع امکان پذیر می باشد.

مثال:

 

نمونه یک

<script>

myFunction();

document.getElementById("demo").innerHTML =

"I can display " + typeof carName;

 

function myFunction() {

var carName = "Volvo";

}

</script>

 

از آنجایی که متغیرهای محلی تنها داخل توابع مختص به خود شناخته می شوند، متغیرهایی که با متغیرهای محلی (داخل تابع مربوط) هم نام هستند، می توانند در توابع دیگر بکار گرفته شوند، به عبارتی روشن تر شما می توانید در توابع مختلف، متغیرهای محلی با نام های یکسان داشته باشید.(متغیرهای محلی تنها توسط آن تابعی که آنها را معرفی کرده شناخته می شوند). متغیرهای محلی زمانی ایجاد می شوند که تابعی راه اندازی شود (کار خود را آغاز کند) و هنگامی نیز حذف می گردند که تابع عملیات خود را به پایان رسانده باشد / متغیرهای محلی مجرد اینکه عملیات تابع تکمیل شد، خود به خود حذف می گردند.

 

متغیرهای سراسری / عمومی (global variables)

متغیری که بیرون یک تابع تعریف شود، متغیر Global (سراسری) نامیده می شود. یک متغیر سراسری دارای حوزه ی دسترسی سراسری است، بدین معنا که کلیه ی اسکریپت ها و توابع موجود در یک صفحه ی وب امکان دستیابی به آن را دارند.

مثال:

 

نمونه دو

var carName = "Volvo";

myFunction();

 

function myFunction() {

document.getElementById("demo").innerHTML =

"I can display " + carName;

}

اگر به متغیری که هنوز تعریف یا اعلان نشده مقداری تخصیص دهیم، آن متغیر خودکار یک متغیر سراسری (global) تلقی می گردد. در نمونه کد ذیل با اینکه carName داخل یک تابع تعریف شده، اما یک متغیر سراسری تلقی می گردد (زیرا که متغیر مورد نظر از پیش اعلان نگردیده است).

مثال:

 

نمونه سه

<script>

myFunction();

document.getElementById("demo").innerHTML =

"I can display " + carName;

 

function myFunction() {

carName = "Volvo";

}

</script>

 

طول عمر متغیرها (Lifetime of varabiles)

طول عمر یک متغیر جاوا اسکریپت درست از زمانی که آن متغیر اعلان می گردد، آغاز گشته و حساب می شود. همان طور که پیش تر ذکر شد عمر یک متغیر محلی محدود به زمان شروع اجرا و تکمیل عملیات تابع است، یعنی بمحض اینکه تابع تکمیل شود متغیر محلی نیز عمرش به پایان رسیده و حذف می شود. متغیرهای سراسری یا عمومی نیز هنگامی که صفحه ی وب بسته می شود، همگی حذف می گردند.

 

آرگومان های تابع (function arguments)

آرگومان (پارامتر) های یک تابع به عنوان متغیرهای محلی داخل آن تابع عمل می کنند.

 

متغیرهای سراسری در HTML

حوزه دسترسی سراسری (global scope) در جاوا اسکریپت شامل کل محیط جاوا اسکریپت می شود (از هرجای جاوا اسکریپت یا نقطه ی صفحه می توان به متغیرها دسترسی پیدا کرد). در HTML، حوزه ی عمومی یا سراسری (Global Scope) شی window را شامل می شود: تمامی متغیرهای سراسری متعلق به شی window هستند و از این رو می توان از هر نقطه ی از شی window به متغیرهای عمومی دسترسی پیدا کرد.

مثال:

 

نمونه چهار

<script>

myFunction();

document.getElementById("demo").innerHTML =

"I can display " + window.carName;

 

function myFunction() {

carName = "Volvo";

}

</script>

توجه:

آیا می دانستید که متغیرها (یا توابع) سراسری می تواند متغیرها و توابع متعلق به شی window را بازنویسی / overwrite کنند؟ هر تابعی، حتی خود شی window، قادر است متغیرها و توابع سراسری را بازنویسی کند.

در قسمت بعد رشته ها در جاوا اسکریپت را فرا می گیرید

آموزش طراحی سایت-آموزش HTML5

آموزش طراحی سایت : من معتقدم HTML5 دستاورد بزرگی خواهد بود (بسیاری از مردم هم چنین اعتقادی دارند.). این برنامه ممکن است روش لباس پوشیدن و غذا خوردن ما را تغییر ندهد، اما مطمئنا روش توسعه ی برنامه های وب و طراحی صفحات وب را در 10 سال آینده تغییر خواهد داد. به هرحال این صفحه آموزش HTML نمی باشد. HTML5 چیز کاملا جدیدی نمی باشد. بسیاری از ویژگی های HTML5 از HTML4 یا HTML1.0 گرفته شده اند. با زمان و انرژی محدودم می توانم فقط آنچه را در HTML5 جدید است و تمرینات قدیمی که دیگر مورد استفاده نیستند را پوشش دهم.

این یک سایت HTML5 می باشد. هنگامی که در حال کشف و یادگیری HTML5 هستم، امیدوارم بتوانم آنچه را که یاد گرفته ام با شما به اشتراک بگذارم.

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

بهترین زنگی، آن زندگی میباشد که انگیزه های خلاقانه بیشترین نقش را داشته و انگیزه های مالی کمترین را.

برتراند راسل (1872 –1970)

با توجه به این نوشته HTML5 یک نسخه ی در حال کار می باشد. به عبارت دیگر HTML5 هنوز یک کار در حال پیشروی می باشد. ویژگی های آن در W3C منتشر شده و روز به روز تغییر می کند.

 

چرا HTML5 مهم است؟

حتمالا تاکنون در مورد HTML5 شنیده اید، فکر می کنم محبوب ترین برنامه ای که فیلم را بدون Adobe Flash اجرا می کند، باید از آقای استیو جابز برای تبدیل آن به یک فن آوری معروف تشکر کرد. علاوه بر این ممکن است در مورد ایجاد انیمیشن بدون پلاگین، کنترل ورودی غنی مانند دیت پیکر، کالرپیکر، اسلایدر بدون جاوااسکریپت و در انتها ذخیره ی داده ی برون خطی (آفلاین) نیز شنیده باشید. به هرحال این هم فقط بخشی از HTML5 می باشد. چه وقت؟ WC3 در فوریه ی 2011 اعلام کرد که جولای 2014 تاریخی است که HTML5 پیشنهاد رسمی برای استاندارد وب می شود. زمان را فراموش کنید: واقعیت این است که جدول زمانی پیشنهادی از طرف WHATWG واقعا اتفاق نیفتاد. توسعه ی وب در دستان دو گروه از مردم واقع شده است. اولین گروه کمپانی های مرورگر معروفی مانند Mozilla، مایکروسافت، اپل، گوگل و اپرا می باشند. گروه دوم نیز طراحان و توسعه دهندگان وب در این زمینه می باشند. ضعفHTML1.1 و HTML 2 خیلی ساده است، کمپانی های مرورگر فکر می کردند که ایده ی احمقانه است، بنابراین درهای خود را به روی آن بستند. امروزه بسیاری از مرورگرها به شدت تمایل دارند که از HTML5 پشتیبانی کنند.

هیچ دلیلی وجود ندارد که طراحان تحت تاثیر HTML5 قرار نگیرند، زیرا که زندگی را از همیشه برای ما آسانتر کرده است.

آموزش طراحی سایت : DocType

اعلام نوع داکیومنت در HTML5 هم ساده و هم جالب می باشد. این کار به سادگی زیر میباشد:

‎<!DOCTYPE html>

و ‎بر خلاف doctype در HTML1 و HTML4 که با آن آشنا هستیم:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ‎‎"HTTP>

/www.w3.org/TR/html4/loose.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ‎‎"HTTP>

/www.w3.org/TR/html4/frameset.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ‎‎"HTTP>

/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ‎‎"HTTP>

/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">‎

 

برخی از آنها حتی در یک خط نوشته نمی شوند. این اولین دلیلی است که نشان می دهد کار طراحان وب با HTML5 راحت تر شده. یک صفحه ی HTML5 می تواند به سادگی زیر باشد:

<!DOCTYPE html>‎

<html>‎

<head> ‎

<title>HTML5 is rocks!</title> ‎

</head>‎

<body>

‎ <h1>HTML5 Rocks!</h1> ‎

</body>‎

</html>‎

 

آموزش کن وس Canvas

آموزش طراحی سایت : یکی از داغ ترین موضوعات HTML5 موضوع canvas می باشد، اما دقیقا canvas چیست؟ canvas یک پارچه ی ساده بافته شده ی سنگین می باشد که برای ساختن قایق، چادر، کوله پشتی، خیمه و دیگر ابزاری که استحکام لازم دارند، استفاده می شود. و همچنین توسط نقاشان به عنوان سطح نقاشی که روی چارچوب چوبی نصب شده باشد، استفاده می شود. شاید این جوابی که شما به دنبال آن بودید، نباشد.به هرحال canvas در HTML5 از کاربرد آن توسط هنرمندان تقلید می کند و بوم نقاشی نامیده می شود.بوم نقاشی یک فضای خالی بدون رنگ ( حتی بدون سفید) است، که قرار است با مداد و قلم موی جاوااسکریپت تبدیل به یک کار هنری شود. البته که وجود بوم نقاشی تنها برای یک تصویر ثابت نیست. تصویر ثابت می تواند به سادگی به وسیله ی عنصر قدیمی img مورد بررسی قرار بگیرد. با جاوااسکریپت به عنوان قلم موی خود، می توانید یک انیمیشن شاد و یا حتی بازیهای تکرار شونده ایجاد کنید. اگر قبلا انیمیشن های درخشانی ایجاد کرده اید و امید دارید که یک ورژن HTML5 ایجاد کنید، ابزاری وجود دارند که در انجام آن به شما کمک می کنند. یکی از آنها Flash to HTML5 می باشد.HTML5 مقوله ی خیلی بزرگی است، آنقدر بزرگ که می توانید در مورد آن یک کتاب بنویسید. هدف من در این آموزش تحت پوشش قرار دادن جزئیات مربوط به بوم نقاشی نیست، بلکه تنها معرفی مختصری از آن است. به یاد داشته باشد که این تنها شروع آن است. برای ایجاد بوم نقاشی، کد ساده ی زیر لازم است.

‎<canvas width="200" height="200"></canvas>‎

به هرحال به یاد داشته باشید که مرز یک بوم نقاشی یک آبجکت ناپیداست. این برنامه فضایی را می گیرد اما شما آن را نمی بینید. اجازه دهید یک سبک مرزی اضافه کرده و از ID برای مرجع استفاده کنیم. هدف از ID این است که با استفاده از DOM (document object model) آن را قابل دسترس کنیم. بدون مرجع ID، جاوا اسکریپت، در این مورد قلم موی شما، هیچ ایده ای برای نقاشی روی بوم ندارد.

‎<canvas id="Canvas1" width="200" height="200" style="border:solid 1px #000000"</canvas>‎

 

کن وس Rectangle در آموزش طراحی سایت

ابتدا روی دکمه ی قرمز کلیک کنید. اگر دکمه ی قرمز در بوم نقاشی نمی بینید، احتمالا تمایل داشته باشید مرورگر درستی برای ادامه بگیرید.

 

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas>

‎<button onclick="draw_square();return true;">Red Square</button>

<script>

function draw_square() {

‎ var c1 = document.getElementById("c1");

‎ var c1_context = c1.getContext("2d");

‎ c1_context.fillStyle = "#f00";

‎ c1_context.fillRect(50, 50, 100, 100);

‎}

‎</script>‎

برای کشیدن هرچیزی در بوم نقاشی، چیزی بین برچسب opening و برچسب closing از <canvas> قرار ندهید، مرورگرهایی که بوم نقاشی را پشتیبانی می کنند، آن را نادیده خواهند گرفت. شما می توانید فقط از جاوااسکریپت برای انجام نقاشی خود استفاده کنید. قانون شماره یک، عنصر بوم نقاشی شما باید دارای یک ID باشد، بنابراین می توانیم از جاوااسکریپت برای قراردادن آن استفاده کنیم. قانون شماره دو، هر بوم نقاشی دارای یک کانتکست می باشد. در واقع کانتکست بوم نقاشی آن چیزی است که قرار است روی آن نقاشی بکشیم، نه خود بوم.

var c1 = document.getElementById("c1");

var c1_context = c1.getContext("2d");‎

ز لحاظ نگارش، نه تنها کانتکست های دو بعدی، بلکه سه بعدی آن نیز در دسترس می باشند. به هرحال کانتکست سه بعدی که webGL نامیده می شود، برای شما توسط W3G یا WHATWG آورده نمی شودبلکه توسط یک شرکت غیرانتفاعی به نام Khronos Group ارائه می شود. علاوه بر آن گوگل هم در دسامبر 2010 برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد. اجازه دهید از رنگ قرمز (fillStyle="#f00";) استفاده کرده و یک مربع قرمز با اضلاع 100px بکشیم.

c1_context.fillStyle = "#f00";

c1_context.fillRect(50, 50, 100, 100);‎

جدول زیر روش های کشیدن مستطیل را نشان می دهد.

 

<div>

<canvas id="Canvas2" width="200" height="200" style="border:solid 1px #000000;"></canvas>

‎ <div>

‎ <button onclick="blue_square_2();return true;">Blue Square</button>

‎ <button onclick="red_stroke_2();return true;">Red Square</button>

‎ <button onclick="clear_rect_2();return true;">Erase Everything</button>

</div>

</div>

<script>

‎ var c2 = document.getElementById("c2");

‎ var c2_context = c2.getContext("2d");

‎ function blue_square_2() { //Blue color square

‎ c2_context.fillStyle = "#00f";

‎ c2_context.fillRect(50, 50, 100, 100);

‎ }

‎ function red_stroke_2() { //Red color edges

‎ c2_context.strokeStyle = "#f00";

‎ c2_context.strokeRect(45, 45, 110, 110);

‎ }

‎ function clear_rect_2() { //Clear all

‎ c2_context.clearRect(40, 40, 120, 120);

‎ }

‎</script>‎

 

آموزش طراحی سایت ادامه دارد