ساخت منو افقی و عمودی بوسیله HTML

​

  

در این مقاله از آموزش طراحی سایت می آموزیم که چطور یک Icon Bar ( نوار آیکون ) با استفاده از کد CSS ایجاد کنید.

قدم اول : کد HTML را اضافه کنید. مثال :

< div class="icon-bar">

< a class="active" href="#">< i class="fa fa-home">< /i>< /a>

< a href="#">< i class="fa fa-search">< /i>< /a>

< a href="#">< i class="fa fa-envelope">< /i>< /a>

< a href="#">< i class="fa fa-globe">< /i>< /a>

< a href="#">< i class="fa fa-trash">< /i>< /a>

< /div>

قدم دوم :  کد CSS را برای ساخت منو افقی اضافه کنید. مثال :

.icon-bar {

  width: 100%; /* Full-width */

  background-color: #555; /* Dark-grey background */

  overflow: auto; /* Overflow due to float */

}

 

.icon-bar a {

  float: left; /* Float links side by side */

  text-align: center; /* Center-align text */

  width: 20%; /* Equal width (5 icons with 20% width each = 100%) */

  padding: 12px 0; /* Some top and bottom padding */

  transition: all 0.3s ease; /* Add transition for hover effects */

  color: white; /* White text color */

  font-size: 36px; /* Increased font size */

}

 

.icon-bar a:hover {

  background-color: #000; /* Add a hover color */

}

 

.active {

  background-color: #4CAF50; /* Add an active/current color */

}

​

 

مثال (ایجاد منوی عمودی) : کد CSS را برای ساخت منو عمودی اضافه کنید.

.icon-bar {

width: 90px; /* Set a specific width */

background-color: #555; /* Dark-grey background */

}

.icon-bar a {

display: block; /* Make the links appear below each other instead of side-by-side */

text-align: center; /* Center-align text */

padding: 16px; /* Add some padding */

transition: all 0.3s ease; /* Add transition for hover effects */

color: white; /* White text color */

font-size: 36px; /* Increased font-size */

}

.icon-bar a:hover {

background-color: #000; /* Add a hover color */

}

.active {

background-color: #4CAF50; /* Add an active/current color */

}

​

 

​

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

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

• آموزش دستورات جاوا اسکریپت
• کلید واژه های جاوا اسکریپت
• آموزش متغیرها و انواع داده ای در زبان جاوا اسکریپت
• آموزش محل قرار گیری کدهای جاوا اسکریپت

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

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

زبان JavaScript هیچ گونه توابع توکار (built-in) مربوط به چاپ و نمایش (print،display) ندارد.

توانایی جاوا اسکریپت در نمایش داده ها به گونه های مختلف (با استفاده از توابع متفاوت)

جاوا اسکریپت قادر است داده را به شیوه های مختلف نمایش دهد.

1. با استفاده از تابع window.alert()، در پنجره ی هشدار (alert box) داده را نمایش می دهد.
2. با استفاده از تابع ()، متن مشخص (خروجی HTML) را در صفحه چاپ کرده و نمایش می دهد.
3. به وسیله ی خاصیت innerHTML، محتوای HTML را تعریف می کند و داخل آن کد می نویسید یا آن را دستکاری می کند.
4. به کمک متد console.log()، داده ی مورد نظر را در مرورگر به نمایش می گذارد.

استفاده از تابع ()window.alert

می توانید از یک پنجره ی هشدار (alert box) برای نمایش دادن خروجی (داده) استفاده کرد.

1< h1 >My First Web Page< /h1 >

1< p >My first paragraph.< /p >

1  

1< script >

1    window.alert(5 + 6);

1< /script >

استفاده از متد ()

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

مثال:

1< script >

1    (5 + 6);

1< /script >11

استفاده از () پس از اینکه سند HTML کاملاً بار گذاری شده، باعث می شود کلیه ی HTML های موجود از صفحه حذف گردند.

مثال:

< button type="button" ="(5 + 6)" >Try it< /button >

استفاده از خاصیت innerHTML

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

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

مثال:

1< script >

1    document.getElementById("demo") = 5 + 6;

1< /script >

استفاده از متد ()console.log

می توان در مرورگر با استفاده از متد console.log()، داده ی مورد نظر را نمایش داد.
دکمه ی F12 را فشار داده تا پنجره ی فرمان / کنسول مرورگر فعال شود، سپس "Console" را در منو انتخاب کنید.

مثال:

1< script >

1    console.log(5 + 6);

1< /script >

آموزش Syntax جاوا اسکریپت:

دستور گرامری Syntax در حقیقت یک سری قوانین است که به وسیله ی آن می توان فهمید برنامه های جاوا اسکریپت چگونه ساخته می شوند.

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

یک برنامه ی کامپیوتری / Computer program در واقع فهرستی از "دستورات / instructions" می باشد که باید توسط رایانه "اجرا / execute" شود.
در یک زبان برنامه نویسی به instruction های برنامه، Statement (دستور) گفته می شود.
جاوا اسکریپت نیز یک زبان برنامه نویسی محسوب می شود.
دستورات زبان جاوا اسکریپت توسط کاراکتر نقطه ویرگول (;) از هم جدا می شوند.

مثال:

1var x = 5; 

1var y = 6; 

1var z = x + y; 

نکته:

در HTML، برنامه های جاوا اسکریپت توسط مرورگر وب اجرا می شوند.

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

دستورات JavaScript

دستورات جاوا اسکریپت متشکل است از : values (مقادیر)، Operators (عملگرها)، Expressions (عبارات)، Keywords (کلیدواژه ها) و Comments (توضیحات).

لفظ ها یا لیترال های جاوا اسکریپت JavaScript literals:

مهمترین قوانین برای نوشتن مقادیر ثابت عبارتند از

اعداد Numbers – اعدادی که با اعشار (decimal) یا بدون اعشار نوشته می شوند، به ترتیب زیر

10.50

‎1001‎

رشته ها Strings – رشته ها متن یا نوشته هایی هستند که درون علامت های " " یا ' ' نوشته می شوند.

"John Doe" ‎

‎'John Doe'

عبارات Expressions – عبارات نیز می توانند نمایان گر مقادیر ثابت باشند.

5 + 6

‎5 * 10

متغیرهای جاوا اسکریپت (JavaScript Variables)

در یک زبان برنامه نویسی، متغیرها (variables) به منظور ذخیره سازی (store) مقادیر داده ها بکار می روند.
جاوا اسکریپت با استفاده از کلید واژه ی var متغیر تعریف (define) می کند.
علامت مساوی (=) را به منظور تخصیص مقادیر به متغیرها مورد استفاده قرار می دهیم.
در این مثال، x به عنوان متغیر تعریف شده، سپس به مقدار 6 به آن اختصاص داده شده است.

var x;

x = 6; ‎‏

عملگرهای جاوا اسکریپت (JavaScript Operators)

جاوا اسکریپت با استفاده از عملگر جایگزین / assignment operator(=) مقادیر را به متغیر ها نسبت (تخصیص / assign) می دهد.

var x = 5;

var y = 6;‎

جاوا اسکریپت با استفاده از عملگرهای محاسباتی (arithmetic operator) از جمله :+ - * / مقادیر را محاسبه (compute) می کند.

(5 + 6) * 10‎‏ ‏

کلیدواژه های جاوا اسکریپت (JavaScript Keywords)

واژه های کلیدی (Keyword) جاوا اسکریپت به منظور شناسایی عملیاتی که باید (انجام) پیاده شود مورد استفاده قرار می گیرد.
در واقع کلید واژه ی var به مرورگر دستور / اطلاع می دهد یک متغیر جدید ایجاد کند.

var x = 5 + 6;

var y = x * 10;‎‏

توضیحات در جاوا اسکریپت (JavaScript Comments)

تمامی دستورات جاوا اسکریپت لزوماً "اجرا" نمی شوند.
کدهایی که پس از کاراکتر // یا بین */ و /* قرار داده می شوند در حقیقت توضیح (comment) محسوب می شوند و از این رو در اجرا نادیده گرفته می شوند.

var x = 5; // I will be executed

‎// var x = 6; I will NOT be executed

جاوا اسکریپت، حساس به کوچک و بزرگی حروف (Case sensitive)

تمامی شناسه های (identifier) جاوا اسکریپت به کوچک و بزرگی حروف حساس هستند.
به عنوان مثال، lastName و lastname گرچه هر دو متغیر هستند ولی به دلیل تفاوت در کوچک و بزرگی حروف کاملاً از هم متمایز تلقی می گردند.

lastName = "Doe";

lastname = "Peterson";‎

برای جاوا اسکریپت VAR یا Var با کلید واژه ی var یکسان نیست.

JavaScript و Camel Case

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

خط تیره (hyphen)

first-name،‎ last-name،‎ master-card،‎ inter-city ‏

خط زیرین (underscore)

first_name،‎ last_name،‎ master_card،‎ inter_city

و

First Name،‎ LastName،‎ MasterCard،‎ InterCity‎

در زبان های برنامه نویسی، بخصوص جاوا اسکریپت، camel case اغلب با یک حرف کوچک (lower case) شروع می شود.

firstName،‎ lastName،‎ masterCard،‎ interCity

توجه:

در جاوا اسکریپت اجازه ی استفاده از خط تیره (hyphen) به برنامه نویس داده نمی شود مگر برای تفریق.

مجموعه کاراکترهای جاوا اسکریپت (JavaScript Character set)

جاوا اسکریپت از مجموعه کاراکترهای Unicode استفاده می کند.

یونیکد Unicodeتمامی کاراکترها، نشانه گذاری ها (punctuation) و علائم موجود را دربر می گیرد.

آموزش توضیحات در جاوا اسکریپت:

از Comment ها در جاوا اسکریپت برای توضیح کد و بهبود خوانایی آن ها استفاده می شود.
همچنین از توضیحات / comments می توانیم زمانی که می خواهیم کد جایگزینی را به جای کد اصلی امتحان کنیم، کمک بگیریم.

توضیحات تک خطی (single line comments)

توضیحات تک خطی با کاراکتر // آغاز می گردند.
جاوا اسکریپت هر متنی را که بین کاراکتر // و انتهای خط قرار بگیرد کاملاً نادیده می گیرد(اجرا نمی کند).
در این مثال از comment تک خطی پیش از هر خط به منظور تشریح کد مربوط استفاده شده.

مثال

1< script >

1    // Change heading:

1    document.getElementById("myH") = "My First Page"

1    // Change paragraph:

1    document.getElementById("myP") = "My first paragraph."

1< /script >

مثال زیر برای توضیح کد در انتهای هر خط یک comment تک خطی بکار گرفته.

1< script >

1    var x = 5;      // Declare x, give it the value of 5

1    var y = x + 2;  // Declare y, give it the value of x + 2

1  

1    document.getElementById("demo") = y; // Write y to demo

1< /script >

توضیحات چند خطی (multi-line comments)

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

کامنت Comment های چند خطی با */ آغاز شده و با کاراکتر /* خاتمه می یابند.
هر نوشته ی که بین دو کاراکتر گفته شده قرار گیرد کاملاً توسط جاوا اسکریپت نادیده گرفته می شود.
این مثال یک توضیح چند خطی (comment block یا مجموعه ی از توضیحات) را برای تشریح کد مورد نظر بکار می گیرد

مثال:

1< script >

1    /*

1    The code below will change

1    the heading with id = "myH"

1    and the paragraph with id = "myp"

1    in my web page:

1    */

1    document.getElementById("myH") = "My First Page"

1    document.getElementById("myP") = "My first paragraph."

1< /script >

نکته:

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

کامنت Comment block ها معمولا برای مستند سازی های رسمی بکار می روند.

استفاده از توضیحات برای جلوگیری از اجرای کد

با بهره گیری از توضیحات (comments) می توان از اجرای کد جلوگیری کرد که برای اجرای تست و امتحان کردن کد جایگزین بسیار کارامد تلقی می گردد.
افزودن کاراکتر // در ابتدای خط کد باعث می شود خط کد از حالت قابل اجرا به حالت comment تبدیل شود، بدین معنا که دیگر خط کد مورد نظر اجراشدنی نبوده و به یک توضیح ساده تبدیل گردد.
این مثال با استفاده از //، اجرای یکی از خط کدها را مانع می شود.

مثال:

1< script >

1    //document.getElementById("myH") = "My First Page"

1    document.getElementById("myP") = "My first paragraph."

1< /script >

حال مثال زیر را مشاهده می کنید که به کمک comment block از اجرای چندین خط کد جلوگیری می کند.

مثال:

1< script >

1     /*

1     document.getElementById("myH") = "Welcome to my Homepage"

1     document.getElementById("myP") = "This is my first paragraph."

1     */

1 < /script >

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

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

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

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

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

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

در جاوا اسکریپت statements، دستوراتی هستند که توسط مرورگر وب اجرا می شوند.

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

دستور زیر به مرورگر دستور می دهد عبارت "Hello Dolly." را داخل یک المان HTML با شناسه ی "demo" بنویسد.

document.getElementById("demo") = "Hello Dolly."

عبارات JavaScript

document.getElementById("demo") = "Hello Dolly." Try it Yourself »

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

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

دستورات یکی پس از دیگری به ترتیبی که نوشته شده اند اجرا می شوند.

در این مثال x، y و z هر یک مقداردهی شده اند که یکی پس از دیگری اجرا می شوند. همان طور که خود مشاهده می کنید z آخر از همه اجرا می گردند.

مثال:

var x = 5; var y = 6; var z = x + y; 1document.getElementById("demo") = z;

توجه:

برنامه های نوشته شده توسط جاوا اسکریپت (javascript programs) همگی کد جاوا اسکریپت خوانده می شوند.

نقطه ویرگول ;

نقطه ویرگول برنامه ها (دستورات) جاوا اسکریپت را از هم جدا می کنند.

در انتهای هر دستور قابل اجرا یک نقطه ویرگول لحاظ کنید.

a = 5;

b = 6;

c = a + b;‎

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

a = 5; b = 6; c = a + b;‎

نکته:

قرار دادن نقطه ویرگول در انتهای دستورات اگرچه کاملاً ضروری نیست، اما اکیداً توصیه می شود.

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

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

جاوا اسکریپت معمولاً فاصله ی بین بخش های مختلف کد را نادیده می گیرد. با این وجود می توان با استفاده از فاصله (white space) کد را به مراتب خواناتر کرد.

به عنوان مثال، دو نمونه ی زیر کاملاً یکسان هستند.

var person = "Hege";

var person="Hege";‎

توصیه می شود از فاصله در اطراف عملگرهای = + - * / استفاده کنید.

var x = y + z;‎

طول خط کد و شکستن آن (line length، line break)

به منظور خواناتر کردن کد، برنامه نویس ها اغلب سعی می کنند خطوط کدهایشان از 80 کاراکتر تجاوز نکند

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

مثال:

document.getElementById("demo") =

‎"Hello Dolly.";‎

مجموعه / گروهی از دستورات (code block)

می توان مجموعه ی از دستورات جاوا اسکریپت را داخل علامت های {...} جای گذاری کرد تا از این طریق امکان اجرای یکجا و همزمان کدها فراهم آید (به عبارتی آن ها را با قرار دادن داخل کاراکتر مزبور گروه بندی کرد).

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

یکی از جاهایی که در آن دستورات جاوا اسکریپت را به صورت گروه بندی شده مشاهده می کنید، داخل توابع (function) جاوا اسکریپت است.

مثال:

function myFunction() { 1‎ document.getElementById("demo") = "Hello Dolly." document.getElementById("myDIV") = "How are you?" ‎}‎

کلید واژه های جاوا اسکریپت

دستورات جاوا اسکریپت معمولاً با یک کلید واژه / keyword شروع می شود که نوع عملیاتی که در جاوا اسکریپت باید اجرا شود را تعیین می کند.

جدول زیر کلیدواژه هایی که در این سری آموزشی یاد می گیرید را فهرست می کند.

لطفاً توجه داشته باشید کلید واژه ها را نمی توان به عنوان اسم برای متغیرها مورد استفاده قرار داد.

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

انواع داده ای در جاوا اسکریپت

یکی از مشخصه های اساسی هر زبان برنامه نویسی، انواع داده ای (Data Types) است که توسط آن پشتیبانی می شود. جاوا اسکریپت امکان استفاده از سه نوع داده ای اساسی زیر را به کاربر می دهد.

اعداد (Numbers) مثل 123 ، 12.50 و....

متن (Strings) مثل “ Text “ و....

مقادیر صحیح یا غلط (Boolean) مثل true یا false.

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

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

نکته:

جاوا اسکریپت، تفاوتی بین نوع داده ای عددی (Integer) و اعداد بزرگتر (Flaot) قائل نشده و تمامی اعداد در این زبان در یک متغیر 64 بیتی از نوعfloat تعریف می شوند.

نحوه تعریف متغیرها در زبان جاوا اسکریپت

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

قبل از استفاده از یک متغیر در زبان جاوا اسکریپت، بایستی آن را در کد خود تعریف کنید. از واژه کلیدی var، همانند کد زیر برای تعریف متغیرها استفاده می شود. در مثال زیر، دو متغیر به نام های money و name را تعریف کرده ایم.

<script type="text/javascript">

‎‎

همچنین می توانید دو یا چندین متغیر را با استفاده از یک واژه کلیدی var و به صورت پشت سر هم تعریف کنید. همانند کد زیر

<script type="text/javascript">‎

‎‎

قرار دادن یک مقدار (Value) در متغیر را مقدار دهی اولیه می گویند. شما می توانید در زمان تعریف متغیر و یا در دستورات بعدی برنامه، آن را مقدار دهی کنید.

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

<script type="text/javascript">‎

‎‎

برای تعریف هر متغیر، فقط یکبار از واژه کلیدی var استفاده نمایید. در دفعات بعدی استفاده یا مقداردهی آن متغیر، دیگر نیازی با استفاده از کلمه var نیست.

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

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

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

میدان شعاع ( دید ) استفاده از متغیرها در جاوا اسکریپت

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

متغیرهای سراسری (Global Variables) :

این نوع متغیرها سراسری بوده و در کل قطعه کد و برنامه قابل فراخوانی و استفاده هستند.

متغیرهای محلی (Local Variables) :

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

نکته:

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

<script type="text/javascript">‎

‎‎

توصیح مثال : در مثال فوق، یک متغیر سراسری به نام myVar و یک متغیر محلی نیز به همان نام درون تابع ای تعریف نموده و هر دو را مقدار دهی کرده ایم.

در هنگام اجرای دستور (myVar); درون تابع، مقدار متغیر محلی خوانده شده و در خروجی چاپ می شود.

قواعد نام گذاری متغیرها در جاوا اسکریپت

در هنگام نامگذاری متغیرها در جاوا اسکریپت، بایستی موارد زیر را رعایت نمایید.

شما مجاز به استفاده از نام های ذخیره شده و کلمات کلیدی زبان جاوا اسکریپت برای یک متغیر نیستید. لیست نام های دخیره شده و کلمات کلیدی جاوا اسکریپت در بخش بعدی قرار داده شده است. برای مثال نام هایی مثال if یاBoolean برای نامگذاری، غیر مجاز است.

نام متغیرها در جاوا اسکریپت، نباید با یک عدد(9 -0) شده و برای آغاز نام حتما بایستی یک کاراکتر حروفی یا علامت _ قرار بگیرد. برای مثال نام های 123est غیر مجاز و نام_123est ممکن است.

نام متغیرها در زبان جاوا اسکریپت، به بزرگی یا کوچکی حروف حساس هستند. برای مثال متغیرهای Name ، name و یا NaMe با هم متفاوت خواهند بود.

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

لیست زیر، کلمات کلیدی ذخیره شده زبان جاوا اسکریپت را شامل می شود که از این واژه ها برای تعیین نام متغیرها نمی توانید استفاده کنید.

آموزش محل قرار گیری کدهای جاوا اسکریپت:

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

< head > … < /head >.

قرار دادن اسکریپت ها در تگ اصلی < body > … < /body > .

قرار دادن کدهای جاوا اسکریپت در یک فایل خارجی . js سپس لینک به آن فایل در بخش < head > صفحه.

در ادامه به تشریح هر یک از روش های بالا خواهیم پرداخت.

قرار دادن کدهای جاوا اسکریپت در تگ< head >صفحه

چنانچه بخواهید دستور یا دستورات اسکریپت مورد نظرتان، پس از اجرای یک رویداد مثل کلیک کاربر بر روی یک دکمه فرمان، اجرا شوند، بایستی کدهای خود را در یک تگ < script > و در بخش < head > صفحه قرار دهید.

در مثال زیر در صورت کلیک کاربر بر روی دکمه فرمان< input > ، تابع sayHello ( ) اجرا شده و پیام خود را در صفحه نمایش می دهد.

توجه داشته باشید که کدهای موجود در بخش < head > صفحه، تا زمانی که فراخوانی نشوند، اجرا نخواهند شد.

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

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

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

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

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

همانند مثال زیر. در مثال زیر کد < script > موجود در بخش < head > در صورت کلیک کاربر بر روی دکمه فرمان و کد < script > موجود در بخش < body > به محض لود صفحه اجرا می شوند.

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

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

1. جدا کردن بخش کدها از تگ های HTML برای خوانایی و کاهش حجم کد صفحه.
2. استفاده از یکسری کد مشترک جاوا اسکریپت در چندین فایل HTML با اتصال به فایل “.js” به جای نوشتن آن کدها به صورت جداگانه در هر صفحه.

برای این منظور، بایستی ابتدا کدها و توابع مورد نظر را در یک فایل متنی با نام مشخص و پسوند “.js” نوشته و سپس به وسیله یک تگ < script > در بخش < head > صفحه، آن فایل خارجی را به صفحه متصل کنید. همانند کد زیر < html >‎ ‎< head > ‎ < script type="text/javascript" src="filename.js" >< /script >‎ ‎ < /head >‎ ‎< body > ‎ ‎ .......‎ ‎ < /body >‎‎ < /html >‎

برای مثال شما می توانید تابع را در یک فایل خارجی “.js” تعریف کرده و سپس به وسیله یک تگ < script > و تابع sayHello ( )، در هر جای صفحه که می خواهید، آن را فراخوانی و اجرا کنید.

function sayHello() {‎ alert("Hello World")‎ }‎‏ ‏

همچنین می توانید این کد و فایل را برای هر چند فایل HTML دیگر که می خواهید، به کار ببرید.

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

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

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

در قسمت قبل با jQuery جی کوئری آشنا شدید و استفاده از jQuery در صفحات وب را یاد گرفتید در ضمن چند مثال هم زدیم و رخداد Ready در Jquery را یا دادیم.حال ادامه دوره :

آموزش فراخوانی متدها به صورت زنجیر وار در Jquery:

زنجیره سازی متدها یا فراخوانی متدها به صورت زنجیر وار (Method chaining):

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

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

مثال:

<div id="divTest1" style="color: blue;">Hello, world!</div>

<script type="text/javascript">

$("#divTest1").text("Hello, world!").css("color", "blue");

</script>

در این مثال، یک شی جدید jQuery نمونه سازی می کنیم و المانی که شناسه ی آن divTest1 می باشد را با کاراکتر $ انتخاب می نماییم. این علامت یک میانبر بوده و جایگزینی برای کلاس jQuery می باشد. در نتیجه یک شی jQuery دریافت می کنیم که به ما این امکان را می دهد تا المان انتخابی را مطابق نیاز ویرایش کنیم. ما از آن شی برای فراخوانی متدtext() استفاده می کنیم. این متد متن المان انتخابی را تنظیم می کند. متد ذکر شده بار دیگر شی jQuery را بازمی گرداند و به ما اجازه می دهد متد یا عملیات دیگری (متد css()) را بر روی مقدار برگشتی، اجرا کنیم. می توانیم بسته به نیاز خود توابع دیگری را به انتهای تابع دیگر متصل کرده و فراخوانی کنیم، اما در کل باید از طولانی کردن بیش از حد کد خودداری نمود. خوشبختانه، جاوا اسکریپت در خصوص دستور نگارشی (syntax) خیلی سخت گیر نیست، بنابراین شما می توانید آن را مطابق میل فرمت دهی کنید. به عنوان مثال، می توان دستور ذکر شده در بالا را به صورت زیر نیز نوشت:

مثال 2:

<div id="divTest2" class="bold" style="color: blue;">Hello, world!</div>

<script type="text/javascript">

$("#divTest2").text("Hello, world!")

.removeClass("blue")

.addClass("bold")

.css("color", "blue");

</script>

جاوا اسکریپت خود فضای های بی مورد در کد را در زمان تفسیر دور انداخته و آن را به عنوان یک خط طولانی کد با تعداد زیادی فراخوانی تابع (method call) اجرا می کند (کدی که تعداد زیادی تابع در آن صدا زده شده اجرا می کند). توجه داشته باشید که برخی از متدهای به عنوان نتیجه، شی برنمی گردانند. این درحالی است که برخی دیگر از متدها بسته به پارامترهای ارسالی به آن، یا شی برمی گرداند و یا هیچ شی ای برنمی گرداند. به عنوان نمونه، می توان به متد text() اشاره کرد. در صورت عدم ارسال آرگومان به آن، متن جاری المان انتخابی بجای شی بازگردانده می شود، اما اگر فقط یک پارامتر به آن پاس دهید، متن شی jQuery تنظیم شده و یک شی جدید jQuery بازگردانده می شود.

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

معرفی انتخابگرهای jQuery:

یکی از عملیات رایج که برای انجام آن از جاوا اسکریپت استفاده می شود، خواندن و ویرایش محتویات صفحه می باشد. برای این منظور، ابتدا بایستی المانی که قصد دستکاری آن را دارید پیدا کنید. در اینجا است که انتخابگر (selector) jQuery به کمک شما می آید. با کد خالص جاوا اسکریپت، پیدا کردن المان ها و تغییر آن ها بسیار دشوار می باشد. مگر اینکه قصد یافتن تنها یک المان را داشته باشید که دارای شناسه ی منحصربفرد باشد. jQuery به شما این امکان را می دهد تا المان ها را بر اساس شناسه، کلاس ها، نوع (type)، مقدار attribute ها و غیره گزینش نموده و بازیابی کنید. این روش در واقع مبتنی بر selector های jQuery می باشد. از آنجایی انتخاب المان ها با jQuery یک فعل بسیار رایج است، constructor در اشکال و فرم های مختلف به کار می آید، بدین صورت که سازنده با پذیرفتن یک selector query به عنوان آرگومان، با کم ترین میزان کد، المان مد نظر را یافته و بیشترین کارایی را ارائه می دهد. شما می توانید با نوشتن دستورjQuery() و یا درج میانبر و جایگزین آن $()، یک شی jQuery نمونه سازی نمایید. بنابراین، انتخاب یک مجموعه المان به آسانی نمونه ی زیر می باشد:

$(<query here="">) </query>

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

آموزش انتخاب المان ها بر اساس شناسه و کلاس در Jquery:

انتخابگر #id:

یکی از پرکاربردترین انواع selector، انتخابگر #id (گزینش المان ها بر اساس شناسه) می باشد، همان طور که در مثال "Hello, world" نظاره گر آن بودیم. در مثال نام برده، از خصیصه ی ID یک تگ HTML برای یافتن و انتخاب یک المان منحصربفرد استفاده کردیم. جهت مکان یابی یک المان با شناسه ی مشخص، یک کاراکتر هش و به دنبال آن ID المان مورد نظر را درج نمایید:

$("#divTest")

مثال:

<div id="divTest"></div>

<script type="text/javascript">

$(function () {

$("#divTest").text("Test");

});

</script>

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

انتخابگر .class (گزینش المان بر اساس کلاس آن)

المان هایی که دارای کلاس مشخص هستند را می توان با نوشتن کاراکتر نقطه " . " و اسم کلاس با کوئری منطبق نموده و انتخاب کرد و در نهایت به صورت شی برگرداند.

مثال:

<ul>

<li class="bold">Test 1</li>

<li>Test 2</li>

<li class="bold">Test 3</li>

</ul>

<script type="text/javascript">

$(function () {

$(".bold").css("font-weight", "bold");

});

</script>

انتخاب المان بر اساس اسم آن (element selector)

همچنین می توان المان ها را بر اساس اسم تگ آن ها انتخاب کرد. به عنوان مثال، می توانید تمامی لینک ها یک صفحه را بدین صورت (با ذکر اسم تگ آن ها) انتخاب کرد:

$("a")

و یا تمامی تگ های div را به شکل زیر انتخاب نمود:

$("div")

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

$("span.bold").css("font-weight", "bold");

این مثال تمامی المان های span که اسم کلاس آن ها bold می باشد را bold می کند. البته، این روش را می توان با دیگر selector ها نیز پیاده سازی کرد.

پیدا کردن و انتخاب المان ها بر اساس attribute:

در آموزش قبلی، دیدیم که چگونه می توان المان ها را با توجه به کلاس یا شناسه ی آن ها انتخاب کرد( به آموزش انتخاب عناصر وب بر اساس کلاس و شناسه با jquery مراجعه کنید). این دو خاصیت (property) به خاطر اینکه برای استایل دهی به المان ها با CSS مورد استفاده قرار می گیرند، با هم مرتبط می باشند. اما با کتابخانه ی jQuery، می توان المان ها را بر اساس هر نوع خصیصه (attribute) پیدا و انتخاب کرد. در کتابخانه ی jQuery چندین انتخابگر خصیصه (attribute selector) وجود دارد که در مقاله ی حاضر به شرح برخی از آن ها می پردازیم.

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

انتخاب المان بر اساس خصیصه ی معین

می توان المان ها را بر اساس attribute یکسان انتخاب کرد. دقت داشته باشید که مثال بعدی ایجاب نمی کند که attribute مقدار معینی داشته باشد یا حتی آن attribute اصلا مقداری داشته باشد. دستور نگارش برای نوشتن و استفاده از این selector به صورت زیر می باشد:

<span title="Title 1">Test 1</span><br>

<span>Test 2</span><br>

<span title="Title 3">Test 3</span><br>

<script type="text/javascript">

$(function () {

$("[title]").css("text-decoration", "underline");

});

</script>

بنابراین، یک [] درج کرده و داخل آن اسم attribute دلخواه را ذکر می کنید. در نمونه ی بالا، با استفاده از یک انتخاب گر خصیصه (attribute selector)، کلیه ی المان هایی که attribute آن ها title می باشد را گزنیش کرده و سپس با استفاده از تابع .css()به المان های مزبور underline اعمال می کنیم. همان طور که پیشتر گفته شد، این کوئری با تمامی المان هایی که خصیصه ی آن ها title می باشد، صرف نظر از مقدارشان، منطبق می شود. اما گاهی لازم است یک المان را که attribute آن دارای مقدار مشخص است، پیدا کنیم.

انتخاب المان هایی که attribute آن ها دارای مقدار مشخص می باشد

در زیر مثالی را مشاهده می کنید که همه ی المان هایی که خصیصه ی آن ها دارای مقدار مشخص است را پیدا می کند:

<a href="http://www.google.com" target="_blank">Link 1</a><br>

<a href="http://www.google.com" target="_self">Link 2</a><br>

<a href="http://www.google.com" target="_blank">Link 3</a><br>

<script type="text/javascript">

$(function () {

$("a[target='_blank']").append("[new window]");

});

</script>

سلکتور Selector صرفا به jQuery اعلان می کند تمامی لینک هایی (المان های a) که دارای خصیصه ی target هستند و مقدار آن ها برابر رشته ی "_blank" می باشد را پیدا کرده و سپس متن "[new window]" را به آن ها پیوست (append) نماید. حال اگر بخواهیم المان هایی که مقدار attribute آن ها برابر با مقدار ذکر شده نباشند، انتخاب کنیم، چه اقدامی را بایستی اتخاذ کنیم؟ در پاسخ به این سوال باید گفت که کافی است انتخاب گر را با استفاده از عملگر " ! " نقیض نمایید:

$("a[target!='_blank']").append(" [same window]");

تنها فرق این نمونه با مثال قبلی در استفاده از عملگر " ! " پیش از علامت = می باشد. نمونه های دیگر: پیدا کردن المان های input که مقدار خصیصه ی name آن ها با رشته ی معین (مثلا 'txt') شروع می شود (با استفاده از عملگر ^=):

$("input[name^='txt']").css("color", "blue");

پیدا کردن المان های input که مقدار خصیصه ی name آن با رشته ی معین (مثلا letter) پایان می یابد (با استفاده از عملگر $=):

$("input[name$='letter']").css("color", "red");

پیدا کردن المان های input که مقدار خصیصه ی name آن ها برابر با رشته ی 'txt' می باشد:

$("input[name*='txt']").css("color", "blue");

آموزش انتخاب المان ها بر اساس رابطه ی پدر و فرزندی:

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

$("div > a")

این selector تمامی لینک هایی که فرزند مستقیم المان div هستند را انتخاب می کند. حال اگر عملگر < را با یک جای خالی (space) جایگزین نمایید، تمامی لینک های داخل المان div که حتی فرزند غیرمستقیم آن محسوب می شوند نیز انتخاب می شوند.

$("div a")

در اینجا مثالی را می بینید که در آن تگ bold که فرزند مستقیم المان div با شناسه ی TestArea1 است، آبی رنگ می شود:

<div id="divTestArea1">

<b style="color: blue;">Bold text</b>

<i>Italic text</i>

<div id="divTestArea2">

<b style="color: blue;">Bold text 2</b>

<i>Italic text 2</i>

<div>

<b style="color: blue;">Bold text 3</b>

</div>

</div>

</div>

<script type="text/javascript">

$("#divTestArea1 > b").css("color", "blue");

</script>

اگر این مثال را اجرا کنید، می بینید که تنها تگ bold اول آبی رنگ می شود. حال، چنانچه این کد را با روش دوم پیاده سازی کنید، هر دو تگ bold آبی رنگ می گردند. همان طور که در نمونه ی زیر مشاهده می کنید، مثال فوق را با اعمال یک تغییر (جایگزین کردن عملگر < با space) بازنویسی کردیم که در آن هر دو تگ bold انتخاب و آبی رنگ می شوند (نوه یا فرزندان غیرمستقیم المان div نیز دستکاری می شوند):

<div id="divTestArea1">

<b style="color: blue;">Bold text</b>

<i>Italic text</i>

<div id="divTestArea2">

<b style="color: blue;">Bold text 2</b>

<i>Italic text 2</i>

<div>

<b style="color: blue;">Bold text 3</b>

</div>

</div>

</div>

<script type="text/javascript">

$("#divTestArea1 b").css("color", "blue");

</script>

جی کوئری jQuery با ارائه ی تابعی به نام parent() به شما این اجازه را می دهد تا در صورت لزوم به بالای سلسه مراتب (نمودار درختی وراثت) پیمایش کنید. با این تابع می توان پدر یک عنصر فرزند را یافت.

پایان بخش دوم آموزش جی کوئری jQuery

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

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

 

 

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

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

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

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

با توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع، jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار بالایی داشته باشید.
تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه (plugin) پیدا کنید.
قدرت و کارایی بالا، دامنه ی وسیع افزونه های پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر کتابخانه های jQuery تمایز بخشیده است.
پس فهمیدیم که jquery چیست( همچنین برخی افراد معادل فارسی آن یعنی جی کوئری را استفاده می کنند)... در مطالب آموزشی بعدی به بررسی سایر خصوصیات و موارد فنی 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-3.4.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):

<script type="text/javascript" src="jquery-3.4.1.js">

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

<title>jQuery test</title>

<script type="text/javascript" src="jquery-3.4.1.js">

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

1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

آموزش مثال Hello, world در Jquery:

در مبحث قبلی با نحوه ی اضافه کردن jQuery به صفحه ی وب برای بهره وری از امکانات فوق العاده زیاد آن آشنا شدید. پیش از شروع به استفاده از کتابخانه ی jQuery بایستی با مفاهیم پایه ای آن آشنایی پیدا کنید و نظر خود را به مثال ساده ی زیر جلب نمایید:

<div id="divTest1">Hello, world!</div>

<script type="text/javascript">

 $("#divTest1").text("Hello, world!");

همان طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند، استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:

<div id="divTest2">Hello, world!</div>

<script type="text/javascript">

 document.getElementById("divTest2") = "Hello, world!"

اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery اجرای این عملیات را نیز بسیار آسان ساخته است.
در مبحث بعدی به تشریح انتخابگرها (selector) خواهیم پرداخت.

آموزش رخداد Ready در Jquery:

همان طور که در درس قبلی ذکر شد، توصیه می شود تا اتمام بارگذاری صفحه و آماده شدن آن صبر کنید و سپس اقدام به کار با آن نمایید. این امر همچنین برای شما این امکان را فراهم می کند تا کد جاوا اسکریپت خود را در بخش head صفحه (یا به طور مستقیم و یا از طریق لینک به یک فایل جاوا اسکریپت خارجی) و قبل از تگ body قرار دهید. در jQuery این کار با قرار دادن کد در رخداد document ready امکان پذیر می باشد. در زیر، مثال درس قبلی را بکار می بریم، اما این بار داخل رخداد ready قرار داده شده است.

<div id="divTest1"></div>

<script type="text/javascript">

 function DocumentReady() {

 $("#divTest1").text("Hello, world!");

 }

 $(document).ready(DocumentReady);

در این مثال یک تابع ایجاد کرده و آن را DocumentReady نام گذاری می کنیم که به مجرد آماده شدن صفحه برای کار با DOM و دستکاری المان های آن، فعال می شود. در خط آخر کد، با استفاده از متد ready()، تابع خود را به رخداد ready تخصیص داده و بدین وسیله به jQuery اطلاع می دهیم که با آماده شدن صفحه می خواهیم که تابع را فراخوانی کند.
می توان با بهره گیری از قابلیت تعریف تابع بی نام (anonymous function) در جاوا اسکریپت، کد فوق را کوتاه تر نیز کرد. منظور این است که بجای اعلان تابع و تخصیص اسم به آن، فقط یک تابع ایجاد می کنیم و بلافاصله ارجاع به تابع ready() را به آن پاس می دهیم. اگر چندان آشنایی با زبان جاوا اسکریپت ندارید، در آن صورت استفاده از این روش کمی پیچیده بنظر می رسد. اما با آشنایی بیشتر خواهید دانست که در این روش، کد نویسی کاهش یافته و فضای کمتری نیز اشغال می شود.

<div id="divTest2"></div>

<script type="text/javascript">

 $(document).ready(function () {

 $("#divTest2").text("Hello, world!");

 });

با این وجود، تیم طراحان و توسعه دهندگان این کتابخانه احساس کردند که این کد را کوتاه تر هم می توانند بکنند. از اینرو یک نسخه ی overload از سازنده (constructor) ایجاد کردند که تابع ready را به عنوان پارامتر می پذیرد و کد را با این روش به مراتب کوتاه تر کردند.

<div id="divTest3"></div>

<script type="text/javascript">

 $(function () {

 $("#divTest3").text("Hello, world!");

 });

در مثال فوق، تابع بی نام مستقیما به سازنده ارسال می شود که آن را به رخداد ready تخصیص می دهد. اگر این کد را تست کنید، متوجه می شوید که به مجرد بارگذاری صفحه، event مربوطه اجرا می گردد. گاهی این رخداد چنین سریع فعال می شود که اصلا متوجه اجرای آن نمی شوید.
همان طور که قبلا گفته شد، توصیه می شود برای استفاده از jQuery در صفحه وب خود کدهای آن را داخل تابع رخداد ready قرار دهید. در بیشتر مثال های این آموزش همین رویه دنبال خواهد شد، مگر برای کوتاه تر شدن مثال که در تعدادی از نمونه ها این کد را لحاظ نمی کنیم.

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

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

سلام با آموزش طراحی سایت در خدمت شما هستیم .در قسمت قبل در مورد جاوا اسکرپیت صحبت کردیم , حال ادامه آموزش طراحی سایت در خدمت شما هستیم.

جاوا اسکریپت 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>) بگنجانی تگ به مرورگر اعلام می کند که کلیه دستورات درون این تگ را به صورت مفسر خوانده و اجرا کند. بنابراین ساده ترین کد جاوا اسکریپت می تواند به صورت زیر در صفحه تعریف شود.

<script...>‎

‎ ‎دستورات‎ ‎جاوا‎ ‎اسکریپت‎ JavaScript code //‎

‎‎

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

Language :

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

Type :

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

<script language="javascript" type="text/javascript">‎

‎ JavaScript code

‎‎

نوشتن اولین قطعه کد جاوا اسکریپت

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

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

<html>‎

‎<body> ‎

<script language="javascript" type="text/javascript">‎

‎ ‎ ‎

</body>‎‎

</html>‎

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

Hello World!

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

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

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

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

<script language="javascript" type="text/javascript">‎

‎‎

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

<script language="javascript" type="text/javascript">‎

‎‎

نکته:

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

 

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

 

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

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

 

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

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

 

جاوا اسکریپت و اینترنت اکسپلورر

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

1. از منوی اصلی مرورگر، گزینه Tools > Internet Option را کلیک نمایید.
2. از کادر باز شده، لبه Security را انتخاب کنید.
3. دکمه Custom Level را کلیک نمایید.
4. منوی فوق را تا رسیدن به گزینه “ Security Option “ به سمت پایین اسکرول کنید.
5. دکمه رادیویی Enable را در زیر بخش Active Scripting ، برای فعال شدن قابلیت جاوا اسکریپت کلیک نمایید.
6. در نهایت دکمه Ok را زده و از پنجره خارج شوید.

نکته:

برای غیر فعال نمودن قابلیت جاوا اسکریپت، بایستی دکمه رادیویی Disable را در همان بخش Active Scripting انتخاب کنید.

جاوا اسکریپت در مرورگر Firefox :

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

1. از منوی برنامه، مراحل زیر را دنبال کنید : Tools > Options
2. گزینه Content را از پنجره باز شده انتخاب کنید.
3. گزینه Enable JavaScript را انتخاب کنید.
4. در نهایت دکمه ok را زده و پنجره را ببندید.

برای غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگر Firefox ، بایستی تیک گزینه Enable JavaScript را بردارید.

Opera جاوا اسکریپت در مرورگر

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

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

1. از منوی اصلی مرورگر، مسیر زیر را طی کنید : Tools > Prefrences
2. گزینه Advanced را از پنجره باز شده انتخاب کنید.
3. از لیست آیتم های موجود، گزینه Content را انتخاب نموده و کادر انتخابی Enable JavaScript را علامت بزنید.
4. در نهایت دکمه Ok را زده و پنجره را ببندید.

برای غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگر اپرا، کافی است تیک گزینه Enable JavaScript را در منوی اشاره شده بردارید.

نحوه هشدار دادن به مرورگرهایی که از جاوا اسکریپت پشتیبانی نمی کنند

گاهی اوقات ممکن است به دلیل قدیمی بودن مرورگر مورد استفاده کاربر و یا غیر فعال بودن قابلیت جاوا اسکریپت، مرورگر کدهای جاوا اسکریپت را به درستی اجرا نکرده و باعث تولید خروجی نا مطلوب در صفحه شود. برای این منظور، می توان با استفاده از تگ <noscript> <span =""> یک اقدام احتیاطی انجام داد تا در صورت عدم اجرای دستورات <span=""><>، دستور آن تگ اجرا نشود. این تگ بایستی بلافاصله پس از تگ <span=""><> در صفحه تعیین شده و حاوی پیامی به کاربر با مفهوم عدم اجرای اسکریپت ها باشد. مثال زیر نحوه استفاده از این تگ را نشان می دهد.

< html >

< body >

‎ < script language="javascript" type="text/javascript" >

‎ < /script ‎>

< noscript >

متاسفانه دستورات جاوا اسکریپت، در این مرورگر اجرا نمی شوند.

< /noscript >‎‎

< /body >

< /html >‎

 

آموزش محل قرارگیری دستورات جاوااسکریپت-javascript

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

دستورات 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 را به مراتب آسان تر می سازد. فایل های جاوا اسکریپت که در حافظه ی پنهان ذخیره شده باشند.(به طور موقت ذخیره شده باشند) می توانند در افزایش سرعت بارگذاری صفحه کمک شایانی بکنند.

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

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

آموزش جاوا-آموزش متغیر Double در JAVA

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

در قسمت قبل از آموزش تصویری برنامه نویسی جاوا با متغیرهای جاوا آشنا شدیم

حال با ادامه آموزش جاوا همراه باشید:

آموزش متغیر Double

متغیر double می تواند اعداد خیلی بزرگ (یا کوچک) را در خود داشته باشد. حداکثر و حداقل مقادیر 17 می باشد که با 307 صفر دنبال می شود.

متغیر double برای نگهداری مقادیر ممیزی شناور نیز استفاده می شود. یک مقدار ممیزی شناور عددی مانند 8.7، 12.5، 10.1 و غیره می باشد. به عبارت دیگر این عدد ممیزی در انتها دارد. اگر سعی کنید یک مقدار ممیزی را در یک متغیر int ذخیره کنید، NetBeans زیر کد پیش فرض را خط خواهد کشید. اگر سعی کنید برنامه را اجرا کنید، کامپایلر یک پیغام خطا ارائه می دهد. اجازه بدهید با متغیرهای double کمی تمرین کنیم.

از بخش int را به double تغییر دهید. بنابراین این مورد را نیز تغییر دهید:

int first_number, second_number, answer;

به خط زیر:

double first_number, second_number, answer;

اکنون مقادیر ذخیره شده را تغییر دهید:

first_number = 10.5;

second_number = 20.8;

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

برنامه ی خود را مجددا اجرا کنید، پنجره ی خروجی باید مانند زیر باشد:

تغییر مقادیر ذخیره شده در first_number و second_number را امتحان کنید. از هر مقداری که تمایل دارید، استفاده کنید. برنامه ی خود را اجرا کرده و نتیجه را مشاهده کنید.

در بخش بعدی در مورد دو نوع متغیر دیگر جاوا فرا خواهید گرفت: short و float.

آموزش Java - آموزش متغیرهای Float و Short

دو نوع متغیر دیگری که می توانید استفاده کنید short و float می باشند. متغیر short برای ذخیره ی اعداد کوچکتر استفاده می شود و دامنه ی آن بین منفی 32768 و مثبت 32767 می باشد. به جای استفاده از int در کد خود مانند صفحات قبل، می توانستیم از متغیر short استفاده کنیم. اگر مطمئن هستید که متغیری را که مخواهید ذخیره کنید، بیشتر از 32767 و کمتر از -32768 نیست، باید فقط از متغیر short استفاده کنید.

متغیر double را که استفاده کردیم، می تواند اعداد ممیزی شناور واقعا بزرگ را ذخیره کند. به جای استفاهد از double، متغیر float نیز می تواند استفاده شود. هنگام ذخیره ی یک مقدار در یک متغیر float، نیاز به حرف f در انتهای آن دارید. مانند مورد زیر:

float first_number, second_number, answer;‎

first_number = 10.5f;

second_number = 20.8f;‎

بنابراین حرف f بعد از عدد اما قبل از نقطه ویرگول در انتهای خط قرار می گیرد. برای مشاهده ی تفاوت بین float و double مورد زیر را بررسی کنید.

حساب ساده ( Simple Arithmetic) با متغیرهایی که استفاده کرده اید، می توانید از نمادهای زیر نیز برای انجام محاسبت استفاده کنید: + (علامت جمع) _ (علامت منفی) *(علامت ضرب که یک ستاره است.) / (علامت تقسیم که یک اسلش رو به جلو می باشد.) این تمرین را امتحان کنید: علامت جمع را که برای اضافه کردن first_number و second_numberاستفاده می شود، حذف کنید. آن را با نمادهای بالا جایگزین کنید، ابتدا علامت منفی، سپس علامت ضرب و در نهایت علامت تقسیم. پاسخ به مورد آخر، تقسیم، باید یک عدد واقعا بزرگ به شما ارائه دهد. عددی که باید برای تقسیم ارائه دهید 0.5048076923076923 می باشد. این به این دلیل است که شما از متغیر نوع double استفاده کرده اید. به هرحال double را به float تغییر دهید. سپس حرف f را به انتهای اعداد اضافه کنید. بنابراین کد شما باید مانند زیر باشد:

وقتی که کد بالا را اجرا می کنید، اکنون پاسخ 0.5048077 می باشد. جاوا 6 عدد اول بعد از ممیز را گرفته و سپس بقیه را گرد کرده است. ( double یک عدد 64 بیتی است و float فقط 32 بیتی می باشد.)

در بخش بعد در مورد اهمیت Operator Precedence فرا خواهید گرفت.

آموزش Java - آموزش اولویت عمگرها

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

first_number = 100;

second_number = 75;

third_number = 25;

answer = first_number - second_number + third_number;

اگر محاسبه را از سمت چپ به راست انجام داده باشید، 75-100 می شود که پاسخ 25 است. سپس عدد سوم را که 25 است اضافه کنید. مجموع 50 خواهد بود. به هرحال اگر مد نظر شما این نباشد چطور؟ اگر تمایل داشته باشید اعداد دوم و سوم را با هم اضافه کنید و سپس مجموع را از اولین عدد کسر کنید، چطور؟ بنابراین 25+75 است که پاسخ 100 می باشد. سپس آن را از اولین عدد کسر کنید که 100 می باشد. اکنون مجموع 0 خواهد بود.

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

answer = (first_number - second_number) + third_number;

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

محاسبه دوم نیز به این شکل می باشد:

answer = first_number - (second_number + third_number);

پنجره ی کد آن را نیز در اینجا مشاهده می کنید:

اکنون اجازه بدهید چند عمل ضرب و جمع را امتحان کنیم.

نمادهای ریاضی خود را به (که اپراتور نامیده می شوند) به جمع و ضرب تبدیل کنید:

answer = first_number + second_number * third_number;

تمام آکولادها را حذف کرده و سپس برنامه ی خود را اجرا کنید.

بدون آکولا تصور می کنید که Java از چپ به راست محاسبه را انجام می دهد. بنابراین تصور می کنید که عدد اول را به عدد دوم اضافه می کند تا 175 به دست آورد. سپس تصور می کنید که در عدد سوم ضرب می شود که 25 می باشد. بنابراین پاسخ 4375 خواهد بود. سپس برنامه را اجرا کنید. پاسخ حقیقی را که شما به دست می آورید 1975 می باشد. پس جریان چیست؟

دلیل اینکه جاوا پاسخ اشتباه ارائه می دهد Operator Precedence است. جاوا برخی از نمادهای ریاضی را مهم تر از بقیه در نظر می گیرد. این برنامه ضرب را مقدم به جمع می داند، بنابراین عملیات ضرب را قبل از جمع انجام می دهد، سپس جمع را انجام می دهد. بنابراین جاوا در حال انجام عملیات زیر می باشد:

answer = first_number + (second_number * third_number);

با قرار دادن آکولادها در جای درست مشاهده می کنید که عدد دوم در عدد سوم ضرب شده است. سپس مجموع به اولین عدد اضافه می شود. بنابراین حاصل 75 در 25 عدد 1875 می باشد. عدد 100 را اضافه کنید، که 1975می باشد.

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

answer = (first_number + second_number) * third_number;

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

answer = first_number + second_number / third_number;

پاسخی که به دست می آورید 103 می باشد. اکنون چند آکولاد اضافه کنید:

answer = (first_number + second_number) / third_number;

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

در اینجا لیستی از Operator Precedence را مشاهده می کنید:

ضرب و تقسیم – به طور مساوی رفتار می شوند، اما نسبت به جمع و تفریق دارای اولویت هستند. جمع و تفریق – به طور مساوی رفتار می شوند اما نسبت به ضرب و تقسیم اولویت پایین تری دارند. بنابراین اگر فکر می کنید که جاوا پاسخ اشتباه به شما می دهد، به یاد داشته باشید که Operator Precedence مهم می باشد و چند آکولاد اضافه می کند. در قسمت بعدی به چگونگی ذخیره ی مقادیر با استفاده از Java نگاهی خواهیم داشت.

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

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

آموزش جاوا-از مقدماتی تا پیشرفته

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

در قسمت قبل از آموزش برنامه نویسی جاوا با مفهوم جاوا آشنا شدیم و JDK و نرم افزار IntelliJ IDEA را یاد دادیم و برنامه ای اجرا نمودیم

حال با ادامه آموزش جاوا همراه باشید:

آموزش متغیرهای جاوا:

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

برای ذخیره ی یک عدد در جاوا، باید گزینه های زیادی داشته باشید. تمام اعداد مانند 8، 10، 12 و غیره با استفاده از متغیر int ذخیره می شوند. ( int مخفف integer (عددصحیح) می باشد.). اعداد ممیز شناور مانند 8.4، 10.5، 12.8 و غیره با استفاده از متغیر دوگانه ذخیره می شوند. شما ذخیره سازی را با یک علامت تساوی ( = ) انجام می دهید. اجازه بدهید چند مثال را بررسی کنیم (می توانید از کد FirstProject برای این مثال ها استفاده کنید.)

برای تنظیم یک عدد کامل (عدد صحیح)، موارد زیر را به متود main از بخش قبل اضافه کنید:

public static void main(String[ ] args) {

int first_number;

System.out.println("My First Project");

}

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

نام متغیرها نباید با عدد شروع شود. بنابراین نام first_number درست می باشد اما نام 1st_number درست نیست. می توانید اعداد را در هرجایی از نام متغیر به جز ابتدای آن قراردهید.

نام های متغیرها نمی تواند مشابه لغات کلیدی Java باشد. موارد بسیاری از این گونه وجود دارد که در NetBeans به رنگ آبی در خواهند آمد، مانند int در بالا.

نمی توانید در نام های متغیرها فاصله داشته باشید. اطلاعیه ی متغیر int first number، خطایی را دریافت خواهد کرد. ما از متغیرهای تاکید شده استفاده کرده ایم، اما متداول این است که حرف اول با حروف کوچک انگلیسی و حرف بعدی یا بقیه ی حروف را با حرف بزرگ انگلیسی نوشته شوند: firstNumber, myFirstNumber

نام های متغیرها موارد هوشمندی هستند، بنابراین firstNumber و FirstNumber نام های متفاوتی برای متغیرها می باشند.

برای ذخیره ی موردی در متغیری به نام first_number، یک علامت تساوی و سپس مقداری مورد نظر برای ذخیره را تایپ کنید:

public static void main(String[ ] args) {

int first_number;

first_number = 10;

System.out.println("My First Project");

}

بنابراین این برنامه به جاوا می گوید که می خواهید مقداری از 10 را در متغیر عدد صحیح که first_number نامیده ایم، ذخیره کنید.

اگر تمایل دارید، می توانید تمام این کار را در یک خط انجام دهید:

public static void main(String[ ] args) {

int first_number = 10;

System.out.println("My First Project");

}

برای اینکه تمام موارد را در عمل ببینید، متد println را به این شکل تغییر دهید:

System.out.println( "First number = " + first_number );

آنچه ما اکنون در بین آکولادهای println داریم، متن های مستقیمی هستند که در علامت نقل قول محدود شده اند:

("First number = "

ما یک علامت به علاوه نیز داریم که با نام متغیرمان دنبال می شود:

+ first_number );

علامت به اضافه به معنای اتصال به یکدیگر "join together" می باشد. بنابراین ما متن و نام متغیر خود را به یکدیگر متصل می کنیم. این عملکرد به عنوان concatenation (الحاق) مطرح است.

پنجره ی شما اکنون باید مانند زیر به نظر برسد (دقت داشته باشید که هر خط با نقطه ویرگول به پایان می رسد.):

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

بنابراین عددی را که در متغیر ذخیره کرده ایم، به نام first_number ، خروجی می باشد پس از علامت تساوی.

اجازه بدهید چند جمع ساده را امتحان کنیم. چند متغیر int به کد خود اضافه کنید، یکی برای ذخیره ی رومین عدد و دیگری برای ذخیره ی پاسخ.

int first_number, second_number, answer;

دقت کنید که چگونه سه متغیر نام روی یک خط داریم. اگر متغیرها از یک نوع باشند، شما می توانید این کار را در جاوا انجام دهید (برای مورد ما نوع int). بنابراین نام هر متغیر با کاما (ویرگول) جدا می شود.

بنابراین می توانیم در متغیرهای جدید چیزی اضافه کنیم:

first_number = 10;

second_number = 20;

answer = first_number + second_number;

برای متغیر پاسخ، می خواهیم اولین عدد را به دومین عدد اضافه کنیم. جمع کردن با علامت به اضافه ( + ) انجام می شود. بنابراین Java مقادیر را در first_number و second_number به یکدیگر اضافه می کند. وقتی این کار تمام شد، مجموع را در متغیر واقع در سمت راست تساوی ذخیره می کند. بنابراین به جای اختصاص دادن 10 یا 20 به نام متغیر، عمل جمع را انجام خواهد داد و سپس اختصاص می دهد. در موردی که واضح نیست، اتفاقی مانند زیر رخ خواهد داد:

مورد بالا سازگار با این مورد می باشد:

answer = 10 + 20;

اما جاوا تقریبا می داند که در داخل دو متغیر first_number و second_number چه چیزی وجود دارد، بنابراین شما می توانید فقط از نام ها استفاده کنید.

اکنون متد println خود را مانند زیر تغییر دهید:

System.out.println("Addition Total = " + answer );

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

بنابراین برنامه ی ما موارد زیر را انجام داده است:

یک عدد ذخیره کرده است. یک عدد دوم ذخیره کرده است. این دو عدد را با یکدیگر جمع کرده است. نتیجه ی جمع را در یک متغیر سوم ذخیره کرده است. نتیجه را چاپ کرده است. شما مستقیما نیز می توانید از اعداد استفاده کنید. خط پاسخ را مانند زیر تغییر دهید: answer = first_number + second_number + 12; برنامه ی خود را مجددا اجرا کنید. چه چیزی چاپ شده است؟ همان موردی است که انتظار داشتید؟ می توانید اعداد کاملا بزرگی در متغیر نوع int ذخیره کنید. حداکثر مقدار 2147483647 می باشد. اگر یک عدد منفی مورد نظر شماست، کمترین مقداری که می توانید داشته باشید -2147483648 می باشد. اگر اعداد بزرگتر و یا کوچکتر می خواهید، می توانید از متغیر عددی دیگری استفاده کنید: double ، که آنها را در بخش بعدی مورد بررسی قرار می دهیم.

پایان بخش دوم آموزش برنامه نویسی JAVA

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

آموزش جاوا-آموزش متغیر String

سلام با قسمت چهارم آموزش جاوا JAVA در خدمت شما عزیزان هستم

در قسمت قبل از آموزش تصویری برنامه نویسی جاوا با متغیر Double و اولویت عمگرها آشنا شدیم

حال با ادامه آموزش جاوا همراه باشید:

آموزش متغیر String در جاوا

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

حال یک برنامه در محیط NetBeans می نویسیم , البته شما می تونید همین کد ها را در محیط IntelliJ IDEA

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

 

با کلیک کردن بر روی File > New Project از نوار منو در بالای NetBeans، یک پروژه ی جدید را آغاز کنید. وقتی دیالوگ باکس New Project ظاهر می شود، اطمینان حاصل کنید که آموزش Java و Java Application انتخاب شده اند:

 

روی Next کلیک کرده و StringVars را با عنوان نام پروژه تایپ کنید. اطمینان حاصل کنید که در قسمت Create Main Class یک تیک وجود دارد. سپس Main را پس از stringvars حذف کرده و در عوض StringVariables را تایپ کنید، مانند تصویر زیر:

 

بنابراین نام پروژه StringVars است و نام گروه نیز StringVariables می باشد. روی دکمه ی Finish کلیک کنید، پنجره ی برنامه نویسی شما مانند تصویر زیر خواهد بود ( ما تمام کامنت های پیش فرض را حذف کرده ایم.) دقت داشته باشید که تمام حروف مربوط به نام پوشه با حروف کوچک نوشته شده اند(stringvars)، اما نام پروژه StringVars می باشد.

 

برای برقراری یک متغیر string ، لغت String را تایپ کنید که پس از آن نام متغیر قرار می گیرد. توجه داشته باشید که در لغت String حرف S بزرگ نوشته شده است. مجددا خط با یک نقطه ویرگول به پایان می رسد:

String first_name;

با تایپ کردن یک علامت تساوی، یک مقدار جدید را به متغیر string خود اختصاص دهید. پس از علامت تساوی متنی را که می خواهید ذخیره کنید، بین دو علامت نقل قول (") قرار می گیرد:

first_name = "William";

اگر ترجیح می دهید، می توانید تمام آن را در یک خط داشته باشید:

String first_name = "William";

متغیر دوم string را برقرار کنید تا یک نام یا نام خانوادگی را حفظ کنید:

String family_name = "Shakespeare";

برای اینکه هر دو نام را چاپ کنید، println( ) زیر را اضافه کنید:

System.out.println( first_name + " " + family_name );

در بین آکولادهای println عبارت زیر را داریم:

first_name + " " + family_name

هر آنچه در متغیر به نام first_name وجود دارد، نسخه ی چاپی (print out) می نامیم. پس از آن یک علامت به علاوه وجود دارد که با یک فاصله دنبال می شود. این فاصله بین علامت های نقل قول احاطه شده است. به این روش جاوا در می یابد که ما قصد چاپ یک کاراکتر فاصله (space character) را داریم. پس از فاصله یک علامت به علاوه ی دیگر وجود دارد که با متغیر family_name دنبال می شود.

 

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

برنامه ی خود را اجرا کنید و پس از آن در پنجره ی Output تصویر زیر مشاهده خواهید کرد:

 

آموزش جاوا

 

اگر شما در حال ذخیره ی تنها یک کاراکتر مجزا هستید، متغیر مورد نیاز شما char ( با حرف کوچک) می باشد. برای ذخیره ی کاراکتر از علامت نقل قول (‘) به جای (“) استفاده می کنید. در اینجا مجددا برنامه را مشاهده می کنید، اما این بار با متغیر char:

اگر سعی کنید یک متغیر char را با علامت نقل قول جفت (“) ذخیره کنید، NetBeans زیر کد ناسازگار با قرمز خط خواهد کشید و خطای نوع ناسازگار (incompatible type) ارائه خواهد داد. به هرحال شما می توانید یک متغیر String تنها با یک کاراکتر مجزا داشته باشید. اما به علامت نقل قول دوگانه (“) نیاز دارید. بنابراین این مورد درست می باشد:

String first_name = "W";

اما مورد زیر درست نمی باشد:

String first_name = 'W';

ورژن دوم دارای یک علامت نقل قول مجزا می باشد، در حالیکه مورد اول دارای علامت نقل قول دوگانه (“) می باشد.

موارد بیشتری در مورد string ها وجود دارد و بعدها مجددا آنها را مشاهده خواهید کرد. اکنون اجازه دهید ادامه داده و چند ورودی از یوزر دریافت کنیم.

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

یکی از نقاط قوت Java، وجود کتابخانه های عظیمی از کدهای موجود برای شما می باشد. برای انجام کارهای خاص کدهایی نوشته شده است. تمام آنچه باید انجام دهید ارجاع به کتابخانه ی مورد نظر و سپس فراخوانی متد می باشد. گروه واقعا مفیدی که ورودی یک یوزر را کنترل می کند، گروه Scanner نامیده می شود. این گروه در کتابخانه ی java.util یافت می شود. برای استفاده از گروه Scanner لازم است به آن گروه در کد خود ارجاع کنید. این کار با لغت کلیدی import انجام می شود.

import java.util.Scanner;

عبارت import لازم است بالای عبارت عبارت Class قرار بگیرد.

import java.util.Scanner;

public class StringVariables {

}

این عبارت به جاوا می گوید که می خواهید از یک گروه خاص در یک کتابخانه ی خاص استفاده کنید – گروه Scanner که در java.util واقع شده است.

 

کار دیگری که باید انجام دهید ایجاد یک آبجکت از گروه Scanner می باشد. (یک گروه در واقع دسته ای از کدهاست. این کد تا زمانیکه یک آبجکت جدید از آن ایجاد نکنید، کاری انجام نمی دهد.)

برای ایجاد یک آبجکت Scanner جدید، کد مورد نیاز را در زیر مشاهده می کنید:

Scanner user_input = new Scanner( System.in );

عبارت import لازم است بالای عبارت عبارت Class قرار بگیرد.

import java.util.Scanner;

public class StringVariables {

}

این عبارت به جاوا می گوید که می خواهید از یک گروه خاص در یک کتابخانه ی خاص استفاده کنید – گروه Scanner که در java.util واقع شده است.

کار دیگری که باید انجام دهید ایجاد یک آبجکت از گروه Scanner می باشد. (یک گروه در واقع دسته ای از کدهاست. این کد تا زمانیکه یک آبجکت جدید از آن ایجاد نکنید، کاری انجام نمی دهد.)

برای ایجاد یک آبجکت Scanner جدید، کد مورد نیاز را در زیر مشاهده می کنید:

Scanner user_input = new Scanner( System.in );

بنابراین به جای متغیر int یا یک متغیر String ، در حال تنظیم یک متغیر Scanner می باشیم، که مورد ما user_input نامیده می شود. پس از یک علامت تساوی لغت کلیدی new را داریم که برای ایجاد آبجکت های جدید از یک گروه استفاده می شود. آبجکتی که در حال ایجاد آن هستیم از گروه Scanner می باشد. در بین آکولادها باید به جاوا اعلام کنید که از System Input (System.in) خواهد بود.

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

String first_name;

first_name = user_input.next( );

بنابراین پس از آبجکت user_input یک نقطه تایپ می کنیم. سپس لیستی از متدهای موجود مشاهده خواهید کرد. روی next دابل کلیک کنید و سپس در انتهای خط یک نقطه ویرگول تایپ کنید. برای به جلو بردن یوزر می توانیم متن نیز تایپ کنیم:

String first_name;

System.out.print("Enter your first name: ");

first_name = user_input.next( );

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

یک پیشروی برای نام خانوادگی نیز وارد می کنیم:

String family_name;

System.out.print("Enter your family name: ");

family_name = user_input.next( );

این همان کد است به جز اینکه اکنون جاوا هرآنچه را یوزر در قسمت متغیر family_name به جای متغیر first_name تایپ می کند، ذخیره می کند.

برای چاپ ورودی می توانیم مورد زیر را اضافه کنیم:

String full_name;

full_name = first_name + " " + family_name;

System.out.println("You are " + full_name);

یک متغیر String دیگر با عنوان full_name تنظیم می کنیم و هر آنچه در متغیرهای first_name و family_name است را ذخیره می کنیم. در بین این دو یک فاصله قرار می دهیم. خط آخر همه ی آن را در پنجره ی Output چاپ خواهد کرد.

بنابراین کد خود را طوری تطبیق دهید تا با تصویر بعدی هماهنگی داشته باشد:

 

برنامه ی خود را اجرا کنید تا اینکه پنجره ی Output تصویر زیر را نمایش دهد:

 

اکنون جاوا متوقف شده تا اینکه در صفحه کلید چیزی وارد کنید، و تا زمانیکه دکمه ی Enter صفحه کلید را فشار ندهید، پیشرفتی رخ نخواهد داد. بنابراین بعداز "Enter your first name:" را کلیک چپ کنید، مشاهده خواهید کرد که مکان نمای شما محو خواهد شد. یک نام تایپ کنید و سپس دکمه ی enter را فشار دهید.

پس از فشردن دکمه ی enter، جاوا هر آنچه را که در سمت چپ علامت تساوی در متغیر نام تایپ و ذخیره شده، خواهد گرفت. در مورد ما این متغیر first_name نامیده می شد.

سپس برنامه وارد خط بعدی کد می شود:

 

یک نام خانوادگی تایپ کرده و سپس مجددا دکمه ی Enter را فشار دهید:

 

اکنون ورودی یوزر به پایان رسیده است و بقیه ی برنامه اجرا می شود. این خروجی هردو نام می باشد. نتیجه ی نهایی باید مشابه تصویر زیر باشد:

 

بنابراین ما از گروه Scanner برای گرفتن ورودی از یک یوزر استفاده می کنیم. هر آنچه تایپ شد در متغیرها ذخیره شد. نتیجه نیز در پنجره ی Output چاپ شد. در بخش بعدی نگاه کوتاهی به Option Panes خواهیم داشت.

پایان قسمت چهارم آموزش جاوا

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

 

آموزش Bootstrap-کار با List Group در بوت استرپ 4

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل صفحه بندی Pagination و ایجاد چرخنده Sppiner در Bootstrap4 آشنا شدیم.

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

آموزش کار با لیست گروهی List Group در بوت استرپ 4

ساده ترین نوع لیست گروهی یک لیست بدون نشانه و ترتیب (Unordered list) با یک یا چندین آیتم درون آن است، همانند عکس زیر:

 

 

برای ایجاد یک لیست گروهی ساده در بوت استرپ 4، از یک تگ <ul> با کلاس list-group، استفاده می شود که هر آیتم درون آن با یک تگ <li> با کلاس list-group-item، تعیین خواهد شد، همانند کد مثال عملی زیر:

مثال

1

<ul class="list-group">

<li class="list-group-item">First item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

</ul>

آموزش فعال کردن یک آیتم در لیست Active Item:

اگر به یکی از آیتم های <li> درون یک لیست بوت استرپ 4، کلاس .active بدهید، آن آیتم به صورت فعال با پس زمینه رنگی (به صورت پیش فرض) و متمایز از بقیه نشان داده خواهد شد.

 

 

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

مثال2

<ul class="list-group">

<li class="list-group-item active">Active item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

</ul>

آموزش ایجاد لیست با آیتم های لینک در Bootstrap 4:

برای ایجاد یک لیست گروهی با آیتم های لینک، از یک تگ <div> به جای تگ <ul> استفاده کرده و به جای آیتم های <li>، درون آن آیتم های <a> تعریف کنیم. همچنین در صورت تمایل می توانید برای اینکه در هنگام عبور موس کاربر از روی لینک ها، پس زمینه آن ها به صورت خاکستری داشته و حالت hover پیدا کنند، از کلاس .list-group-item-action در تگ های <a> استفاده نمایید، همانند کد مثال عملی زیر:

مثال 3

<div class="list-group">

<a href="#" class="list-group-item list-group-item-action">First item</a>

<a href="#" class="list-group-item list-group-item-action">Second item</a>

<a href="#" class="list-group-item list-group-item-action">Third item</a>

</div>

آموزش ایجاد یک آیتم غیر فعال (Disabled) در لیست Bootstrap 4:

برای تعیین یک آیتم در لیست به صورت غیر فعال (Disabled) بایستی کلاس .disabled را به عنصر اضافه کنید. در این حالت، رنگ نوشته آیتم به صورت خاکستری و کم رنگ در می آید و غیر فعال خواهد بود. همچنین در لیست های لینکی، قابلیت hover آن ها نیز از بین می رود.

 

 

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

مثال 4

<div class="list-group">

<a href="#" class="list-group-item disabled">Disabled item</a>

<a href="#" class="list-group-item disabled">Disabled item</a>

<a href="#" class="list-group-item">Third item</a>

</div>

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

در صورت استفاده از کلاس .list-group-flush در عنصر مادر لیست تگ <ul>، خطوط حاشیه یا Border دور لیست حذف شده و دیگر نوشته های آن گرد نیز نخواهد بود، همانند کد عملی مثال زیر :

 

مثال 5

<ul class="list-group list-group-flush">

<li class="list-group-item">First item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

<li class="list-group-item">Fourth item</li>

</ul>

آموزش ایجاد لیست افقی Horizontal List در بوت استرپ 4:

دوره آموزش BootStrap 4

 

اگر می خواهید آیتم های لیست در بوت استرپ 4، به صورت افقی یا Horizontal به جای عمودی Vertical (در کنار هم به جای قرار گرفتن بر روی هم) نمایش داده شوند، کلاس .list-group-horizontal را به عنصر مادر لیست (تگ <ul> یا <div> با کلاس list-group)، اضافه نمایید، همانند کد مثال عملی زیر:

 

مثال 6

<ul class="list-group list-group-horizontal">

<li class="list-group-item">First item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

<li class="list-group-item">Fourth item</li>

</ul>

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

از کلاس های متنی رنگی ویژه بوت استرپ 4، یا کلاس های Contextual Classes که در بخش های قبل معرفی کردیم، برای تعیین رنگ پس زمینه آیتم های لیست استفاده نمایید. این رنگ ها مفهومی هستند و هریک پیام خاصی مثل موفقیت یا خطر را به کاربر نشان می دهد:

 

مثال: کلاس های رنگی متنی ویژه بوت استرپ 4، عبارتند از .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark و list-group-item-light، که از هریک از آن ها در لیست زیر برای تعیین رنگ یک آیتم لیست، استفاده کرده ایم :

مثال 7

<ul class="list-group">

<li class="list-group-item list-group-item-success">Success item</li>

<li class="list-group-item list-group-item-secondary">Secondary item</li>

<li class="list-group-item list-group-item-info">Info item</li>

<li class="list-group-item list-group-item-warning">Warning item</li>

<li class="list-group-item list-group-item-danger">Danger item</li>

<li class="list-group-item list-group-item-primary">Primary item</li>

<li class="list-group-item list-group-item-dark">Dark item</li>

<li class="list-group-item list-group-item-light">Light item</li>

</ul>

آموزش ایجاد لیست لینک دار رنگی در Bootstrap 4:

همانند مثال بخش های قبلی، می توانید از کلاس های رنگی ویژه بوت استرپ 4 در لیست های لینک دار هم استفاده کنید، با این تفاوت که در لیست های لینک دار از تگ های <div> به جای <ul> در عنصر مادر لیست و تگ <a> به جای تگ <li> برای تعریف هر آیتم استفاده می کنیم. کلاس رنگی را نیز بایستی به تگ <a> اعمال کنید و با به کار بردن کلاس .list-group-item-action در لینک ها، خاصیت hover یا تیره شدن رنگ در هنگام عبور موس بر روی آیتم، بدان اضافه خواهد شد.

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

<div class="list-group">

<a href="#" class="list-group-item list-group-item-action">Action item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>

</div>

آموزش ایجاد لیست های گروهی نشان دار Badges List در Bootstrap 4:

می توانید با ترکیب کلاس badge و چند کلاس کمکی دیگر در بوت استرپ 4، لیست هایی دارای نشانه های عمودی یا متنی (Badge List) ایجاد نمایید، همانند عکس زیر:

 

مثال: در کد مثال عملی زیر یک لیست نشان دار یا Badge List ایجاد کرده ایم. روال کار همانند یک لیست ساده بوت استرپ 4 است. با این تفاوت که برای اضافه کردن Badge یک تگ مثل <span> با کلاس .badge و یکسری کلاس کمکی دیگر، درون هر آیتم لیست قرار داده ایم:

مثال 9

<ul class="list-group">

<li class="list-group-item d-flex justify-content-between align-items-center">

Inbox

<span class="badge badge-primary badge-pill">12</span>

</li>

<li class="list-group-item d-flex justify-content-between align-items-center">

Ads

<span class="badge badge-primary badge-pill">50</span>

</li>

<li class="list-group-item d-flex justify-content-between align-items-center">

Junk

<span class="badge badge-primary badge-pill">99</span>

</li>

</ul>

نکته :

می توانید اعداد درون Badge را به صورت ایستاتیک تعریف کرده یا با استفاده از jQuery و Ajax آن را به صورت دینامیک نیز تغییر دهید.

آموزش بوت استرپ 4 ادامه دارد