۸ مطلب با کلمه‌ی کلیدی «آموزش طراحی سایت تحلیل داده» ثبت شده است

فرم های html

۱۷ خرداد۰۰

فونت ها

فونت ها نقش مهمی در زیبا ساختن و خواناتر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود، اما شما می توانید از برچسب < font>در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب< basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size، color و face می باشد که فونت شکا را به دلخواه در می آورد. برای تغییر هرکدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب < font> استفاده کنید. متنی که دنبال می کند، تغییر یافته با قی می ماند تا زمانی که شما آن را با < /font> برچسب ببندید. شما می توانید یکی از ویژگی ها یا همه ی ویژگی های داخل برچسب < font> را تغییر دهید.

نکته:

برچسب های font و basefont استفاده نمی شوند و احتمال می رود که در ورژن های بعدی HTML حذف شوند. بنابراین نباید مورد استفاده قرار بگیرند، پیشنهاد می شود که برای اجرای فونت های خود از استایل های CSS استفاده کنید. اما برای رسیدن به هدف این فصل برچسب های font و basefont رابا جزئیات توضیح می دهد.

تنظیم اندازه ی فونت

شما می توانید با استفتده از ویژگی size اندازه فونت محتوا را تنظیم کنید. دامنه ی مقادیر قابل قبول از 1 (کوچکترین) تا 7 (بزرگترین) می باشد. اندازه ی فونت پیش فرض 3 می باشد.

مثال:

نمونه یک

<!DOCTYPE html>

<html>

<head>

<title>Setting Font Size</title>

</head>

<body>

<font size="1">Font size="1"</font><br />

<font size="2">Font size="2"</font><br />

<font size="3">Font size="3"</font><br />

<font size="4">Font size="4"</font><br />

<font size="5">Font size="5"</font><br />

<font size="6">Font size="6"</font><br />

<font size="7">Font size="7"</font>

</body>

</html>

اندازه ی فونت مربوط

شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند. می توانید آن را مانند< font size="+n"> or < font size="-n"> مشخص کنید.

مثال:

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>Relative Font Size</title>

</head>

<body>

</body>

</html>

تنظیم ظاهر فونت

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

مثال:

نمونه سه

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<font face="Times New Roman" size="5">Times New Roman</font><br />

<font face="Verdana" size="5">Verdana</font><br />

<font face="Comic sans MS" size="5">Comic Sans MS</font><br />

<font face="WildWest" size="5">WildWest</font><br />

<font face="Bedrock" size="5">Bedrock</font><br />

</body>

</html>

تعیین ظاهر فونت جایگزین

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

< font face="arial,helvetica">

< font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

اگر هیچکدام از فونت های ارائه شده نصب نشده باشند، بنابراین فونت پیش فرض Times New Roman نمایش داده خواهد شد.

تنظیم رنگ فونت

شما می توانید با استفاده از ویژگی color هر رنگی رابرای فونت تنظیم کنید. شما می توانید رنگ مورد نظر خود را یا با استفاده از نام رنگ و یا با استفاده از کد هگزادسیمال برای آن رنگ تعیین کنید.

مثال:

نمونه چهار

<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="#FF00FF">This text is in pink</font><br />
<font color="red">This text is red</font>
</body>
</html>

عنصر < basefont>

انتظار می رود که عنصر < basefont> یک اندازه، رنگ و ظاهر پیش فرض برای هر بخشی از داکیومنت که در برچسب < font>قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر < font>استفاده کنید تا تنظیمات < basefont> را انجام دهید.
برچسب < basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از 1+ برای فونت های بزرگتر و کمتر از 2- برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.

مثال:

نمونه پنج

<!DOCTYPE html>

<html>

<head>

<title>Setting Basefont Color</title>

</head>

<body>

<p>This is the page's default font.</p>

<h2>Example of the <basefont> element</h2>

<p>

This is darkgray text with two sizes larger

</font>

</p>

<p>

It is a courier font, a size smaller and black in color.

</font>

</p>

</body>

</html>

ویژگی ها

در زیر لیستی از ویژگی های دکمه ی رادیو را می بینید.

Attribute	Description
type	نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی چک باکس با عنوان radio تنظیم می شود.
name	برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور ارسال می شود.
value	مقداری که radio box انتخاب شود، استفاده خواهد شد.
checked	اگر می خواهید آن را به عنوان پیش فرض استفاده کنید، به checked تنظیم کنید.

کنترل Select Box

یک Select Boxکه منوی رو به پایین نیز نامیده می شود، گزینه ای را برای ارائه ی گزینه های مختلف به شکل یک لیست رو به پایین ارائه می دهد، که کاربر می تواند از آن یک یا بیشتر از یک گزینه را انتخاب کند.

مثال:

در اینجا مثالی از کد HTML برای یک فرم با یک جعبه ی رو به پایین می بینید.

نمونه شش

<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>

فایل آپلود باکس

اگر می خواهید به کاربر اجازه دهید تا فایلی را روی وب سایت شما آپلود کند، به یک کنترل فایل آپلود احتیاج خواهید داشت، که Select Boxنیز نامیده می شود. این ویژگی با استفاده از برچسب < input> نیز ایجاد می شود، اما نوع ویژگی با file تنظیم می شود.

مثال:

در اینجا مثالی را می بینید از کد HTML برای یک فرم با یک فایل آپلود باکس.

نمونه هفت

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>

کنترل های مخفی شده ی فرم

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

مثال:

در اینجا مثالی از کد HTML برای نمایش کاربرد کنترل مخفی شده می بینید.

نمونه نه

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>

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

۰ نظر

افشین رفوآ

آموزش طراحی سایت - آموزش ساخت جدول در html

۲۹ ارديبهشت۰۰

آموزش طراحی سایت - آموزش ساخت جدول در html

آموزش Table در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.

مثال:

نمونه یک

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

ویژگی های colspan و rowspan

اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.

مثال:

نمونه سه

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>

</html>

پس زمینه ی جدول

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

ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.

همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.

مثال:

نمونه چهار

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.

نمونه پنج

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

آموزش html css

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.

مثال:

نمونه شش

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.

مثال:

نمونه هفت

<title>HTML Table Caption</title>

<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td>
<td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, columnn 2</td>
</tr>
</table>

تیتر، بدنه و پاورقی جدول

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

< thead> - برای ایجاد یک تیتر مجزا
< tbody>- برای نشان دادن بدنه ی اصلی جدول
< tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول

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

مثال:

نمونه هشت

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>

جدول های تودرتو

آموزش طراحی سایت با html

شما می توانید از یک جدول در داخل جدولی دیگر استفاده کنید. نه تنها جدول ها، بلکه می توانید تمام برچسب ها را در داخل برچسب داده ی استفاده کنید.

مثال:

در زیر مثالی را از استفاده ی یک جدول و برچسب های دیگر در داخل یک سلول مشاهده می کنید.

<a class="btn btn-danger" href="/Try/441/9" target="_blank">امتحان کنید</a><p> </p><p class="MsoNormal" style="unicode-bidi: embed; direction: rtl; margin: 0in 0in 10pt; line-height: 17pt;" dir="rtl"><span style="line-height: 18pt; mso-bidi-language: fa;" lang="FA"><span style="font-size: 12pt; color: #000000;">

<br></span></span></p><div class="row" style="padding-top: 10px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul class="bookMoreInfo">

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">

<span class="VisitCountHolder">

<span class="fa fa fa-eye"> </span>
<span id="BodyContent2_UVVisitCount1_VisitCountSeparator" class="VisitCountSeparator"> </span>
<span id="BodyContent2_UVVisitCount1_VisitCountCount" class="VisitCountNumber">1945</span>
</span>
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<em class="fa fa-download"> </em>
<span id="BodyContent2_Lbl_dlcount">424</span>
</li>

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">تاریخ ارسال:
<span id="BodyContent2_Lbl_createdate">1394/07/27</span>
</li>

</ul>
</div>

</div><div id="BodyContent2_dlPDF">

<div class="row" style="padding-top: 10px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

</div></div></div><table style="width: 100%;" border="1">
<tbody><tr>
<td>
<table style="width: 100%;" border="1">
<tbody><tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</tbody></table>
</td>
</tr>

</tbody></table><table class="table-striped table-bordered UserPassTable" style="width: 100% !important; margin: 0 !important;">
<tbody><tr>
<td class="text-center">

<em class="fa fa-download fa-2x text-center"> </em>

</td>
<td class="text-center">
<a id="BodyContent2_Lnk_dl" href="/UserControls/CNTDL.aspx?Type=ARTA&ID=441">


<span class="text-fa">دریافت این مقاله بصورت PDF</span>
</a>
<a id="BodyContent2_Lnk_source" href="/UserControls/CNTDL.aspx?Type=ARTS&ID=441">

<span class="text-fa">دریافت سورس کد مقاله</span>
</a>
</td>
</tr>
<tr>

<td colspan="2">

<br>
پس از دانلود فایل رمز آن را به دقت وارد نمایید .فایل ها دارای رمز عبور می باشند.

</td>
</tr>
<tr>
<td class="text-center">
<em class="fa fa-key fa-2x"> </em>

</td>
<td class="text-danger">tahlildadeh.com
یا
www.tahlildadeh.com

</td>
</tr>
</tbody></table>
<div class="ipShow">
</div>

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

۰ نظر

افشین رفوآ

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

۲۸ آبان۹۹

امروز با پست جدیدی از سری پست های آموزش طراحی سایت همراه شما هستیم. در این پست دستورات if .. else در جاوا اسکریپت را مورد بررسی قرار می دهیم.

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

دستورات شرطی (conditional statements)

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

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

دستور else if : اگر شرط درست باشد دستور مقابل if اجرا می شود در غیر این صورت دستور مقابل else اجرا می گردد (در صورت غلط بودن شرط اول، شرط دیگری را برای امتحان کردن مشخص می کند).

دستور Switch : برای گزینش و اجرای یک دستور از میان چندین دستور مختلف بکار می رود.

دستور شرطی if

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

آموزش طراحی سایت دستور نگارش (syntax)

نکته:

توجه داشته باشید که دستور شرطی if با حروف کوچک نوشته می شود. نوشتن آن با حروف بزرگ If یا IF باعث ایجاد خطا می شود.

مثال:

در صورتی که زمان هنوز مرز ساعت 18:00 را رد نکرده، رشته ی "Good day" را نشان بده.

if (hour < 18)

{

greeting = "Good day";

‎}

نمونه یک

if (new Date().getHours() < 18) {

document.getElementById("demo").innerHTML = "Good day!";

}

امتحان کنید:

Display "Good day!" if the hour is less than 18:00:

Good Evening!

if (new Date().getHours() < 18) {

document.getElementById("demo").innerHTML = "Good day!";

}

دستور شرطی else

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

دستور if (شرط) { قطعه کدی که در صورت برقرار بودن شرط باید اجرا گردد

دستور } else {

قطعه کدی که در صورت غلط یا برقرار نبودن شرط اول اجرا می گردد {

اگر زمان از مرز ساعت 18 نگذشته، رشته ی "Good day" را نشان بده و در غیر این صورت "Good evening" را

if (hour < 18) {

‎ greeting = "Good day";

‎} else {

‎ greeting = "Good evening";

‎}‎

نتیجه:

نمونه دو

function myFunction() {

var hour = new Date().getHours();

var greeting;

if (hour < 18) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

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

}

امتحان کنید:

body>

Click the button to display a time-based greeting:

Try it

function myFunction() {

var hour = new Date().getHours();

var greeting;

if (hour < 18) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

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

}

دستور شرطی else if

اگر شرط درست باشد دستور مقابل if اجرا می شود در غیر این صورت دستور مقابل else اجرا می گردد (در صورت غلط بودن شرط اول، شرط دیگری را برای امتحان کردن مشخص می کند).

دستور نگارش

دستور if (شرط اول) { قطه کدی که در صورت صحیح بودن شرط اول باید اجرا گردد

دستور } else if (شرط دوم) { قطعه کدی که در صورت غلط بودن شرط اول و صحیح بودن شرط دوم باید اجرا شود

دستور } else { قطعه کدی که در صورت غلط بودن هر دو شرط اول و دوم باید اجرا شود }

مثال:

در صورتی که زمان حاضر مرز ساعت 10:00 را پشت سر نگذاشته، رشته ی "Good morning" نمایش داده می شود و چنانچه زمان از ساعت 20:00 عبور نکرده رشته ی "Good day" و در غیر این صورت نیز "Good evening".

if (time < 10) {

‎ greeting = "Good morning";

‎} else if (time < 20) {

‎ greeting = "Good day";

‎} else {

‎ greeting = "Good evening";

‎}‎

نتیجه:

نمونه سه

function myFunction() {

var greeting;

var time = new Date().getHours();

if (time < 10) {

greeting = "Good morning";

} else if (time < 20) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

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

}

امتحان کنید:

Click the button to get a time-based greeting:

Try it

function myFunction() {

var greeting;

var time = new Date().getHours();

if (time < 10) {

greeting = "Good morning";

} else if (time < 20) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

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

}

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

۰ نظر

افشین رفوآ

آموزش طراحی سایت-رنگ و گرادینت در CSS3

۱۴ مهر۹۹

سلام دوستان...

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

آموزش رنگها در CSS3

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند . اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

رنگ های RGBA (red, blue, green و alpha)
رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)
رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)
درجه ی شفافیت و کدری Opacity

رنگ های RGBA شامل (red, blue, green و alpha)

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

آموزش طراحی سایت : رنگ های HSL

اچ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد .

یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

0 (یا 360) کاملاً قرمز است
120 سبز محسوب می شود
240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

مفهوم Opacity (درجه ی تیرگی و شفافیت)

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

آموزش گرادینت در css

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند .

اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

رنگ های RGBA (red, blue, green و alpha)
رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)
رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)
درجه ی شفافیت و کدری Opacity

رنگ های RGBA (red, blue, green و alpha)

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

رنگ های HSL

رنگ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد . یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

0 (یا 360) کاملاً قرمز است
120 سبز محسوب می شود
240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

درجه ی تیرگی و شفافیت Opacity

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

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

۰ نظر

افشین رفوآ

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

۶ مهر۹۹

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

آموزش کاربرد روش Flex در Bootstrap 4

بوت استرپ 4، از کلاس های Flex برای کنترل چیدمان (layout) اجزای صفحه استفاده می کند.

آموزش FlexBox با بوت استرپ 4:

بزرگترین تفاوت بین Bootstrap 3 و Bootstrap 4 این است که بوت استرپ 4 از FlexBox به جای شناورسازی (floats) جهت مدیریت و چیدمان قرارگیری عناصر صفحه، استفاده می کند.

ماژول قالب بندی Flexible Box، روش ساده تری جهت ایجاد قالب ریسپانسیو و واکنش گرا، بدون استفاده از خاصیت های شناوری (float) و موقعیت (Position)، در اختیارمان قرار داده است. اگر با ماژول Flex آشنا نیستید، به بخش آموزش FlexBox در سایت تحلیل داده بروید.

نکته :

ماژول FlexBox در نسخه های IE9 و قبلتر پشتیبانی نمی شود.

اگر نیاز دارید تا از پشتیبانی مرورگرهای IE9 و IE8 بهره گیرید، از Bootstrap 3 استفاده نمایید. بوت استرپ ورژن 3، پایدارترین نسخه بوت استرپ تا سال 2019 بوده و همچنان توسط تیم تولید کننده جهت رفع باگ های احتمالی و پشتیبانی و آموزش، مورد حمایت است اما ویژگی های جدید بوت استرپ 4، به آن اضافه نشده است!

برای ایجاد یک عنصر دربرگیرنده (Container) ماژول FlexBox و قرار دادن عناصر فرزند مورد نظر در آن، از کلاس d-flex، استفاده نمایید.

مثال: در کد مثال عملی زیر، یک عنصر FlexBox ایجاد کرده ایم که 3 عنصر دیگر درون آن قرار گرفته است.

آموزش طراحی سایت : مثال 1

Bootstrap Example

Flex

To create a flexbox container and transform direct children into flex items, use the d-flex class:

Flex item 1

Flex item 2

Flex item 3

خروجی :

Flex

To create a flexbox container and transform direct children into flex items, use the d-flex class:

برای ایجاد یک عنصر درون خطی inline flexbox، از کلاس d-inline-flex به صورت زیر استفاده کنید :

مثال 2

Bootstrap Example

Inline Flex

To create an inline flexbox container, use the d-inline-flex class:

Flex item 1

Flex item 2

Flex item 3

خروجی :

Inline Flex

To create an inline flexbox container, use the d-inline-flex class:

آموزش طراحی سایت : آموزش چینش افقی Horizontal Direction در FlexBox:

از کلاس flex-row برای نمایش افقی (Horizontal) عناصر به صورت کنار هم استفاده نمایید (این حالت، روش پیش فرض نمایش flexBox است).

نکته :

برای نمایش عناصر از راست به چپ (برعکس حالت پیش فرض)، از کلاس flex-row-reverse استفاده نمایید.

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

مثال 3

Bootstrap Example

Horizontal Direction

Use .flex-row to make the flex items appear side by side (default):

Flex item 1

Flex item 2

Flex item 3

Use .flex-row-reverse to right-align the direction:

Flex item 1

Flex item 2

Flex item 3

خروجی :

Horizontal Direction

Use .flex-row to make the flex items appear side by side (default):

Use .flex-row-reverse to right-align the direction:

آموزش چینش عمودی عناصر Vertical Direction در FlexBox:

از کلاس flex-column برای نمایش عناصر به صورت عمودی (بر روی هم) استفاده کنید. همچنین کلاس flex-column-reverse، عناصر را به صورت عمودی، ولی با ترتیب برعکس از پایین به بالا، نشان می دهد. همانند کد مثال عملی زیر :

مثال 4

Bootstrap Example

Vertical Direction

Use .flex-column to display the flex items vertically (on top of each other):

Flex item 1

Flex item 2

Flex item 3

Use .flex-column-reverse to reverse the vertical direction:

Flex item 1

Flex item 2

Flex item 3

خروجی :

Vertical Direction

Use .flex-column to display the flex items vertically (on top of each other):

Use .flex-column-reverse to reverse the vertical direction:

آموزش طراحی سایت : آموزش ترازبندی خطی (Justify) عناصر در FlexBox:

از کلاس های justify-content-* برای تنظیم ترتیب قرارگیری افقی (Justify) عناصر FlexBox استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته باشد :

مقدار start : حالت پیش فرض. در این حالت عناصر از سمت چپ به راست مرتب می شوند.
مقدار end : در این حالت، عناصر در سمت راست عنصر دربرگیرنده تراز می شوند.
مقدار Center: در این حالت عناصر در وسط عنصر دربرگیرنده قرار می گیرند.
مقدار between: در این حالت، عنصر اول و آخر به لبه های عنصر مادر چسبیده و سایر عناصر در بین آن ها با فاصله تراز می شوند.
مقدار around: در این حالت، عناصر به همراه فضای خالی به صورت مساوی درون عنصر مادر قرار می گیرند.

تمامی موارد فوق را در کد مثال عملی زیر نشان داده ایم :

مثال 5

Bootstrap Example

Justify content

Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

خروجی :

Justify content

Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:

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

۰ نظر

افشین رفوآ

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

۱۲ شهریور۹۹

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

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

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

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

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

مثال 1

<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>

<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>

آموزش کار با کلاس های کاربردی 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>

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

۰ نظر

افشین رفوآ

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

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

۰ نظر

افشین رفوآ

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

۶ تیر۹۹

معرفی زبان برنامه نویسی تحت وب JavaScript

جاوا اسکریپت (JavaScript) زبان برنامه نویسی HTML و وب است.
با استفاده از برنامه نویسی می توان کامپیوتر را قادر به انجام کارها یا وظایف مورد نظر کرد.
یادگیری این زبان اسکریپتی بسیار آسان و در عین حال لذت بخش است.
جاوا اسکریپت از آموزش طراحی سایت در حال حاضر یکی از محبوب ترین و پرکاربردترین زبان های برنامه نویسی است.

جاوا اسکریپت JavaScript قادر است محتوای HTML را تغییر دهد

یکی از متدهای زبان طراحی وب HTML، تابع getElementById() است.
این مثال با استفاده از متد بالا، یک المان HTML را با شناسه ی"demo" یافته و محتوای المان (innerHTML) را به "Hello JavaScript" تغییر می دهد.

مثال:

document.getElementById("demo") = "Hello JavaScript"‎

جاوا اسکریپت قادر است استایل های (HTML(Style را تغییر دهد (CSS)

اصلاح استایل (style) یک المان HTML، در واقع همان تغییر خصیصه ی یک HTML است.

مثال:

document.getElementById("demo").style.fontSize = "25px"‎

یکی از کاربرد های زبان جاوا اسکریپت اعتبار سنجی ورودی (input) است.

توجه:

لازم به ذکر است که زبان JavaScript یک زبان اسکریپتی ساده برای وب و HTML است مبتنی بر اشیا که توسط NetScape تولید و عرضه شده‌ است. این زبان، یک زبان شی‌گرا است که بر اساس استاندارد ECMA-262 Edition 3 نوشته شده‌ است در حالی که زبان برنامه نویسی Java یک زبان برنامه نویسی شی گرای قدرتمند و کارامد برای برنامه سازی ویژه ی محیط ها و پلت فرم های گوناگون می باشد.

مرور کلی بر زبان جاوا اسکریپت

جاوا اسکریپت JavaScript زندگی خود را با نام Live Script آغاز نمود، اما شرکت Netscape نام آن را، احتمالا به دلیل هیجانی که می توانست از سوی زبان Java به خود بگیرد، به JavaScript تغییر داد. جاوا اسکریپت برای اولین بار در مرورگر Netscape 2.0 با عنوان Live Script به کار گرفته شد.
جاوا اسکریپت یک زبان سبک و مفسر، همراه با قابلیت های شی گرایی (Object Oriented) است که به شما این امکان را داده تا به صفحات ایستاتیک و ساده HTML ، حالت واکنش گرا و تعاملی بدهید.
به طور کلی می توان جاوا اسکریپت را در موارد زیر خلاصه کرد.
جاوا اسکریپت یک زبان سبک و مفسر می باشد (معنای مفسر این است که برنامه دستورات را به صورت خط به خط خوانده و در پایان هر خط آن را اجرا می کند. بر خلاف کامپایلر که ابتدا کل دستورات را خوانده و اشکال یابی کرده، سپس آنها را یکباره اجرا می کند).
این زبان برای ساخت نرم افزارهای میانی شبکه ( واسط ) استفاده می شود.
جاوا اسکریپت یک زبان مکمل برای HTML می باشد.
این زبان یک پلتفرم باز می باشد.
جاوا اسکریپت یک زبان طرف کاربر (Client Side) است .
زبان جاوا اسکریپت یک زبان طرف مشتری (Client Side) می باشد، به این معنی که دستورات آن در کامپیوتر کاربر و در مرورگر وی اجرا می شود. دستورات جاوا اسکریپت را مستقیما می توان درون اسناد HTML وارد کرده و یا آنها را در یک فایل مجزا قرار داد و سپس آن فایل را به صفحه HTML پیوند زد.
وجود زبان جاوا اسکریپت باعث می شود تا صفحات HTML از حالت Static و ساده درآمده و بتوانند با کاربر ارتباط برقرار کرده، مرورگر را کنترل نموده و به صورت پویا محتویات HTML تولید و به صفحه اضافه کنند.
کدهای سمت کلاینت جاوا اسکریپت، قابلیت انجام بسیاری از کارهایی که توسط کد های سمت سرور انجام می شوند را دارا هستند. برای مثال، می توانید کد جاوا اسکریپتی نوشته تا مقدار ورودی کاربر در یک کادر متن را کنترل نموده و در صورتی که وی یک آدرس ایمیل با فرمت صحیح را وارد کرده باشد، اجازه ارسال فرم و اطلاعات درون آن را بدهد.
کد های جاوا اسکریپت در صورتی که کاربر تمامی مقادیر مورد نیاز را به درستی در فرم وارد نموده باشد، پس از Submit فرم در صفحه، اجرا می شوند.
جاوا اسکریپت می تواند اعمال کاربر، مثل فشردن یک دکمه فرمان، کلیک بر روی یک لینک و... را تشخیص داده و دستورات مورد نظر را پس از انجام این رخدادها، اجرا کند.

مزایای استفاده از جاوا اسکریپت

استفاده از زبان جاوا اسکریپت، مزایای خاصی دارد که از آن جمله می توان به موارد زیر اشاره کرد.

کاهش عملکرد و درگیر نمودن سرور :

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

پاسخ سریع و لحظه ای به کاربر :

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

بالا رفتن قدرت تعامل با کاربر :

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

رابط کاربری قوی تر :

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

محدودیت در کار با جاوا اسکریپت

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

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

ساختار دستوری جاوا اسکریپت

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

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

تگ JavaScript دو خاصیت مهم زیر را می تواند داشته باشد.

مفهوم Language :

این خاصیت تعیین می کند که شما از چه زبان اسکریپتی برای نوشتن کدهای خود استفاده نموده اید که قاعدتا بایستی javascript باشد. به همین دلیل مرورگرهای جدید، از این خاصیت صرف نظر می کنند.

مفهوم Type :

این خاصیت نیز نوع دستورات تعیین شده در اسکریپت را تعیین می کرده که رایج ترین مقدار برای آن “ text/javascript “ می باشد. به معنای اینکه به زبان جاوا اسکریپت و به صورت متنی هستند.
بنابراین تگ JavaScript شما در حالت کاملتر بایستی به صورت زیر باشد.

وجود فاصله ( جای خالی ) بین کاراکترها و رفتن به خط بعدی را در دستورات جاوا اسکریپت

جاوا اسکریپت به طور کلی، فواصل خالی بین کاراکترها، Tab ها و رفتن به خط بعدی را در دستورات نادیده گرفته و تاثیری بر روی خروجی کد ندارند.
به همین دلیل می توانید با مرتب کردن و دادن فواصل لازم به خطوط کدهای خود، آنها را بسیار خوانا و قابل فهم نمایید.

به کار بردن کاراکتر ; اختیاری است

معمولا هر خط کد یا دستور در جاوا اسکریپت، همانند آنچه در C++ یا Java دیده اید، با یک کاراکتر ; به پایان می رسد. اما در جاوا اسکریپت، چنانچه هر کد دستوری شما در یک خط جدا Line باشد، می توانید از به کار بردن کاراکتر; خودداری کنید. برای مثال در قطعه کد زیر، می توانید از به کار بردن ; در پایان هر دستور اجتناب نمایید.

بهتر است عادت کرده از ; در کدهای خود استفاده نمایید.

جاوا اسکریپت یک زبان حساس به بزرگ یا کوچک بودن حروف می باشد. این بدان معناست که که کلمات کلیدی زبان، نام متغیرها یا توابع و هر واژه دیگری بایستی با رعایت بزرگ یا کوچک بودن حروف نوشته شوند.
بنابراین کلمات Time، TIME و یا TiMe در این زبان با هم متفاوت می باشند.

قرار دادن توضیحات کدنویسی (comment) در جاوا اسکریپت

از توضیحات یا کامنت ها، برای تشریح کدهای خود و یا غیر فعال کرد موقت آنها استفاده می کنیم. این دستورها و متون توسط موتور جاوا اسکریپت اجرا نشده و خروجی بر روی صفحه ندارند.
زبان جاوا اسکریپت از روشی همانند زبان C++ برای قرار دادن توضیحات در کدهای خود استفاده کرده و قانون های کلی زیر را داراست.
هر متنی که بین یک // و پایان یک خط دستور قرار بگیرد، یک توضیح حساب می شود.
هر متنی که بین یک /* و */ قرار بگیرد، توضیح حساب شده و می تواند حتی شامل چندین خط دستور باشد.
جاوا اسکریپت، از کاراکتر ویژه زبان HTML جهت توضیحات پشتیبانی می کند. این کاراکتر به صورت

محل قرارگیری دستورات جاوا اسکریپت

دستورات JavaScript را می توان در بخش های < body >
و همچنین
< head >
یک سند HTML جای گذاری کرد.

تگ< script >

در HTML، کدهای جاوا اسکریپت را باید بین تگ های < script > و < /script > درج کرد (وارد کرد).

مثال:

< script >

document.getElementById("demo") = "My First JavaScript"

< /script >

نکته:

در مثال های پیشین خصیصه ی typeبرای تگ< script >بکار برده شده مانند این نمونه

< script type="text/javascript" >

در 5 ،HTMLکلیه ی مرورگر های موجود زبان پیش فرض اسکریپت نویسی JavaScript می باشد و از این رو نیازی به خصیصه ی (attribute) type نیست.

توابع و رخدادهای JavaScript

یک تابع / function در جاوا اسکریپت در واقع یک ساختمان یا مجموعه (block) ای از کدها است، که درست زمانی که لازم است اجرا می شوند.
برای مثال، یک تابع ممکن است زمانی اجرا شود که رخدادی / event معین روی دهد درست مثل زمانی که کاربر موس را کلیک می کند.

قرار دادن کدهای جاوا اسکریپت در بخش< head >یا< body >

می توان هر تعداد اسکریپت که لازم است در سند HTML قرار داد.
اسکریپت ها را می توان در بدنه ی HTML یا قسمت < body >قرار داد و یا آن ها را در بخش< head >صفحه HTML گنجاند.

نکته:

توصیه می کنیم تمامی کدهای خود را در یک مکان واحد نگه دارید.

قراردهی کد جاوا اسکریپ در بخش< head >

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

مثال:

< !DOCTYPE html >

< html >

< head >

< script >

function myFunction() {

document.getElementById("demo") = "Paragraph changed."

}

< /script >

< /head >

< body >

< h1 >My Web Page< /h1 >

< p id="demo" >A Paragraph< /p >

< button type="button" ="myFunction()" >Try it< /button >

< /body >

< /html >

جای گذاری کدهای جاوا اسکریپت در بدنه ی HTML / قسمت < body >

در این مثال، یک تابع جاوا اسکریپت بین تگ های باز و بسته ی < body > صفحه ی HTML قرار داده می شود.
تابع مربوطه با کلیک روی تنها یک دکمه فراخوانده می شود.

مثال:

< !DOCTYPE html >

< html >

< body >

< h1 >My Web Page< /h1 >

< p id="demo" >A Paragraph< /p >

< button type="button" ="myFunction()" >Try it< /button >

< script >

function myFunction() {

document.getElementById("demo") = "Paragraph changed."

}

< /script >

< /body >

< /html >

توصیه می شود اسکریپت ها (Script) را در پایین (انتهای) المان < body > قرار دهید. این کار در حقیقت به بارگذاری هر چه بهتر صفحه کمک می کند، زیرا که نمایش HTML با بارگذاری اسکریپت ها مسدود نمی گردد.

قراردادن اسکریپت ها در فایل های خارجی

همچنین می توان اسکریپت ها را در فایل های خارجی جای گذاری کرد.
اسکریپت های خارجی (external scripts) زمانی بیشترین کارایی را دارند که یک کد یکسان در بسیاری از صفحات وب بکار گرفته شده است.
فایل های جاوا اسکریپت همگی دارای پسوند .jsهستند.
جهت استفاده از یک اسکریپت که در فایل خارجی قرار داده شده باشد، کافی است اسم فایل اسکریپت را داخل خصیصه ی src (source) در تگ < script > قرار دهید.

مثال:

< !DOCTYPE html >

< html >

< body >

< script src="myScript.js" >< /script >

< /body >

< /html >

می توانید ارجاع (reference) به اسکریپت خارجی را مطابق میل خود در تگ های < head > یا < body > قرار دهید.
اسکریپت مربوطه درست همانگونه عمل خواهد کرد که گویی دقیقاً همان جایی که تگ < script > قرار گرفته، جای گذاری شده.

توجه:

اسکریپت های خارجی نمی توانند دربردارنده ی تگ های < script > باشند.

مزایای استفاده از خاصیت قراردهی کدهای جاوا اسکریپت در فایل های خارجی

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

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

۰ نظر

افشین رفوآ

آموزش برنامه نویسی

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

آموزشگاه تحلیل داده

آموزش جاوا

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

آموزش پایتون

آموزش Sql Server

آموزش react native

آموزش سی شارپ

آموزش ASP.NET Core

آموزش داده کاوی و یادگیری ماشین

آموزشگاه برنامه نویسی

دوره آموزش فرانت اند-ری اکت

Node.JS

دوره آموزش UI | UX

دوره آموزش میکروسرویس

هوش مصنوعی

آموزش برنامه نویسی به کودکان

آموزش رباتیک به کودکان

داده کاوی

دوره آموزش جنگو

۸ مطلب با کلمه‌ی کلیدی «آموزش طراحی سایت تحلیل داده» ثبت شده است

فونت ها

فونت ها

تنظیم اندازه ی فونت

نمونه یک

اندازه ی فونت مربوط

نمونه دو

تنظیم ظاهر فونت

نمونه سه

تعیین ظاهر فونت جایگزین

تنظیم رنگ فونت

نمونه چهار

عنصر < basefont>

نمونه پنج

ویژگی ها

کنترل Select Box

نمونه شش

فایل آپلود باکس

نمونه هفت

کنترل های مخفی شده ی فرم

نمونه نه

آموزش طراحی سایت - آموزش ساخت جدول در html

آموزش Table در HTML

نمونه یک

ویژگی های colspan و rowspan

نمونه سه

پس زمینه ی جدول

نمونه چهار

نمونه پنج

طول و عرض جدول

نمونه شش

شرح جدول

نمونه هفت

تیتر، بدنه و پاورقی جدول

نمونه هشت

جدول های تودرتو

Flex

Inline Flex

Horizontal Direction

Vertical Direction

Justify content