آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100
آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100آموزش طراحی سایت-دستورات if .. else در جاوا اسکریپت
امروز با پست جدیدی از سری پست های آموزش طراحی سایت همراه شما هستیم. در این پست دستورات 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!";
}
امتحان کنید:
<body>
<p>Display "Good day!" if the hour is less than 18:00:</p>
<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}
</script>
</body>
دستور شرطی 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>
<p>Click the button to display a time-based greeting:</p>
<button type="Button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
دستور شرطی 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;
}
امتحان کنید:
<body>
<p>Click the button to get a time-based greeting:</p>
<button type="Button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
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;
}
</script>
آموزش طراحی سایت-آموزش JSON
سلام عزیزان با آموزش JSON از دوره آموزش طراحی سایت همراه ما باشید.
آموزش JSON
جیسون JSON سرنام واژگان JavaScript Object Notation یک استاندارد سبک، باز ، متنی و خوانا برای انسان جهت انتقال داده و جایگزینی برای xml است. قراردادهای مورد استفاده ی JSON برای تمامی برنامه نویسان از جمله برنامه نویس C، C++، Java، Python، Perl شناخته شده است که به شرح زیر می باشد:
جیسون JSON مخفف JavaScript Object Notation است.
فرمت آن برای اولین بار توسط Douglas Crockford معرفی شد.
برای انسان خوانا بوده و ویژه ی انتقال داده طراحی شده است.
از زبان اسکریپت نویسی JavaScript مشتق شده است.
پسوند فایل های با فرمت جی سن .json می باشد.
مدیا Media type این فرمت انتقال داده application/json است.
شناسه ی متحدالشکل نوع (UTI) آن public.json است.
آموزش طراحی سایت :موارد استفاده ی JSON
به هنگام نوشتن برنامه های تحت وب مبتنی بر جاوا اسکریپت که افزونه هایی برای مرورگر و وب سایت ها را شامل می شوند بکار می رود.
برای serialize کردن و انتقال داده های ساخت یافته از طریق اتصال شبکه بکار می رود.
عمدتا برای انتقال داده بین سرور و برنامه های تحت وب بکار می رود.
وب Web service ها و API ها از فرمت JSON برای ارائه ی داده های public بهره می گیرند.
تمامی زبان های برنامه نویسی روز از آن پشتیبانی می کنند.
ویژگی های JSON
خواندن و نوشتن در آن آسان است.
یک فرمت متنی تبادل داده سبک و کم حجم است.
با اینکه از زبان JavaScript مشتق شده، از این زبان کاملا مستقل است و مفسر (parser) آن برای تمامی زبان ها موجود می باشد.
نمونه ی ساده از JSON
مثال زیر نحوه ی استفاده از JSON را برای ذخیره ی اطلاعات مربوط به مجموعه ای از کتاب ها بر اساس موضوع و ویرایش هر یک، نمایش می دهد:
{
"book": [
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id":"07",
"language": "C++",
"edition": "second",
"author": "E.Balagurusamy"
}
]
}
نمونه ی دیگری را در زیر مشاهده می کنید. این کد را با پسوند json.htm ذخیره می کنیم:
language = "javascript" >
var object1 = { "language" : "Java", "author" : "herbert schildt" };
document.write("
JSON with JavaScript example
");
document.write("
");
document.write("
Language = " + object1.language+"
");
document.write("
Author = " + object1.author+"
");
var object2 = { "language" : "C++", "author" : "E-Balagurusamy" };
document.write("
");
document.write("
Language = " + object2.language+"
");
document.write("
Author = " + object2.author+"
");
document.write("
");
document.write(object2.language + " programming language can be studied " + "from book written by " + object2.author);
document.write("");
حال با مرورگر IE یا هر مرورگر دیگری که JavaScript در آن فعال سازی شده، فایل json.htm را باز می کنیم. نتیجه ی زیر را بدست می دهد:
ساختار نگارشی JSON
جیسون JSON –انواع داده ای (Data types)
فرمت JSON از انواع داده ای زیر پشتیبانی می کند:
نوع داده ای number
ممیز شناور با دو رقم اعشار در JavaScript.
فرمت Octal (هشت هشتی) و hexadecimal (شانزده شانزدهی) در آن استفاده نمی شود.
حرف NaN یا Infinity در Number بکار نمی رود.
جدول زیر انواع عددی را به نمایش می گذارد:
ساختار نگارشی (Syntax):
var json-object-name = { string : number_value, .......}
مثال:
در مثال زیر نوع داده ای Number را مشاهده می کنید. دقت داشته باشید که مقدار نباید داخل "" قرار داده شود:
var obj = {marks: 97}
نوع داده ی String
دنباله ای از کاراکترهای Unicode محصور شده در "" با کاراکتر گریز backslash.
کارکتر Character رشته ای با طول یک و در واقع متشکل از تنها یک کاراکتر است.
جدول زیر کاراکترهایی که در رشته بکار می روند را نمایش می دهد:
ساختار نگارشی:
var json-object-name = { string : "string value", .......}
مثال:
نمونه ای از نوع داده ای رشته را در زیر مشاهده می کنید:
var obj = {name: 'Amit'}
(نوع داده ای بولی)Boolen
مقدار true یا false را شامل می شود.
var json-object-name = { string : true/false, .......}
مثال:
var obj = {name: 'Amit', marks: 97, distinction: true}
نوع داده ای آرایه
دنباله یا مجموعه ای از مقادیر مرتب شده است.
المان ها یا مقادیر آن داخل براکت باز و بسته محصور می شوند.
مقادیر داخل آن توسط ویرگول از هم جدا می شوند.
اندیس آرایه می تواند از 0 یا 1 شروع شود.
اندیس آرایه دنباله ای از اعداد صحیح است.
ساختار نگارشی
[ value, .......]
نمونه ی زیر آرایه ای را نشان می دهد که چندین شی در آن جای گرفته است:
{
"books": [
{ "language":"Java" , "edition":"second" },
{ "language":"C++" , "lastName":"fifth" },
{ "language":"C" , "lastName":"third" }
]
}
نوع داده ای Object
مجموعه ای نامرتب از جفت های اسم و مقدار.
اشیا داخل {} محصور می شوند.
پس از هر اسم یک دو نقطه قرار گرفته و جفت های اسم و مقدار توسط ویرگول از هم جدا می شوند.
کلیدها باید از نوع رشته بوده و با یکدیگر فرق داشته باشند.
ساختار نگارشی (syntax)
نحوه ی نگارش آن به شکل زیر می باشد:
{ string : value, .......}
مثال:
مثال زیر نمونه ای از نوع داده ای object را نمایش می دهد:
{
"id": "011A",
"language": "JAVA",
"price": 500,
}
Whitespace
می تواند بین هر جفت توکنی قرار بگیرد. اغلب از آن به منظور بهبود خوانایی کد استفاده می شود.
ساختار نگارشی
{string:" ",....}
مثال:
var i = null;
if(i == 1){
document.write("
value is 1
");
else{
document.write("
value is null
");
}
نوع داده ای Value در JSON
می تواند هر نوعی را در خود ذخیره کند، از قبیل:
ساختار نگارشی
String | Number | Object | Array | TRUE | FALSE | NULL
مثال:
var i = 1;
var j = "sachin";
var k = null;
آموزش طراحی سایت ادامه دارد
آموزش طراحی سایت-آموزش جی کوئری
در قسمت قبل
با 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
آموزش طراحی سایت ادامه دارد
آموزش طراحی سایت-آموزش 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 نشان می دهد.
- از منوی اصلی مرورگر، گزینه Tools > Internet Option را کلیک نمایید.
- از کادر باز شده، لبه Security را انتخاب کنید.
- دکمه Custom Level را کلیک نمایید.
- منوی فوق را تا رسیدن به گزینه “ Security Option “ به سمت پایین اسکرول کنید.
- دکمه رادیویی Enable را در زیر بخش Active Scripting ، برای فعال شدن قابلیت جاوا اسکریپت کلیک نمایید.
- در نهایت دکمه Ok را زده و از پنجره خارج شوید.
نکته:
برای غیر فعال نمودن قابلیت جاوا اسکریپت، بایستی دکمه رادیویی Disable را در همان بخش Active Scripting انتخاب کنید.
جاوا اسکریپت در مرورگر Firefox :
مراحل زیر نحوه روشن یا خاموش نمودن فابلیت جاوا اسکریپت در مرورگرFirefox را نشان می دهد.
- از منوی برنامه، مراحل زیر را دنبال کنید : Tools > Options
- گزینه Content را از پنجره باز شده انتخاب کنید.
- گزینه Enable JavaScript را انتخاب کنید.
- در نهایت دکمه ok را زده و پنجره را ببندید.
برای غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگر Firefox ، بایستی تیک گزینه Enable JavaScript را بردارید.
Opera جاوا اسکریپت در مرورگر
مراحل زیر، نحوه روشن یا خاموش کردن قابلیت جاوا اسکریپت در مرورگر Opera را نشان می دهد.
- از منوی اصلی مرورگر، مسیر زیر را طی کنید : Tools > Prefrences
- گزینه Advanced را از پنجره باز شده انتخاب کنید.
- از لیست آیتم های موجود، گزینه Content را انتخاب نموده و کادر انتخابی Enable JavaScript را علامت بزنید.
- در نهایت دکمه 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 را به مراتب آسان تر می سازد. فایل های جاوا اسکریپت که در
حافظه ی پنهان ذخیره شده باشند.(به طور موقت ذخیره شده باشند) می توانند در
افزایش سرعت بارگذاری صفحه کمک شایانی بکنند.
این آموزش ادامه دارد
آموزش طراحی سایت-آموزش جاوا اسکریپت
سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل CSS در HTML را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:
یک
اسکریپت قطعه ی کوچکی از برنامه است که می تواند به وب سایت شما تعامل
اضافه کند. به عنوان مثال یک اسکریپت می تواند یک هشدار پاپ آپ مربوط به
باکس پیغام تولید کند، یا یک منوی رو به پایین ایجاد کند. این اسکریپت توسط
javascript یا VBScript نوشته می شود.
شما می توانید با استفاده از هر
زبان اسکریپتی، کارکردهای متنوع کوچکی به نام گردانندگان رویداد بنویسید و
سپس می توانید آن عملکردها را با استفاده از ویژگی های HTML اجرا کنید.
این
روزها فقط javascript و چارچوب های متناظر با آن توسط بسیاری از توسعه
دهندگان وب استفاده می شوند. VBScript حتی توسط برخی مرورگرها پشتیبانی هم
نمی شود.
شما می توانید کد javascript را در یک فایل مجزا نگهداری کرده و
سپس هرزمان که لازم بود آن را وارد کنید، یا می توانید قابلیت را در داخل
خود داکیومنت HTML تعریف کنید. اجازه بدهید هر دو مورد را یکی یکی با مثال
های مناسب بررسی کنیم.
جاوااسکریپت خارجی
اگر قصد دارید
قابلیتی را تعریف کنید که در انواع داکیومنت های HTML استفاده می شود، بهتر
است آن قابلیت را در یک فایل مجزای جاوااسکریپت حفظ کرده و آن فایل را
وارد داکیومنت های HTML خود کنید. یک فایل جاوااسکریپت دارای ضمیمه هایی
مانند js می باشد که با استفاده از برچسب< script>وارد فایل های HTML
می شود.
مثال:
تصور کنید که با استفاده از جاوااسکریپت در script.js یک عملکرد کوچک را تعریف می کنیم که دارای کد زیر می باشد.
function Hello()
{
alert("Hello, World");
}
اکنون اجازه بدهید از فایل جاوااسکریپت خارجی بالا در داکیومنت HTML خود استفاده کنیم، مانند زیر
این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.
جاوا اسکریپت درونی
شما
می توانید کد جاوااسکریپت را مستقیما روی داکیومنت HTML خود بنویسید.
معمولا کد اسکریپت را با استفاده از برچسب< script>در سربرگ داکیومنت
نگهداری می کنیم در غیر این صورت هیچ محدودیتی وجود نداشته و می توانید کد
خود را در هر جایی در داکیومنت به جز داخل برچسب < script>نگه
دارید.
نمونه یک
Javascript Internal Script
function Hello() {
alert("Hello, World");
}
این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.
گردانندگان رویدادها(()EventHandler)
گردانندگان رویدادها عملکردهای تعریف شده ی ساده ای می باشند که می توانند برعلیه هر یک از عملکردهای ماوس یا صفحه کلید فراخوانده شوند. شما می توانید عملکرد خود را در یک گرداننده ی رویداد تعریف کنید که می تواند یک خط تا 1000 خط کد باشد.
در زیر مثالی را می بینید که چگونگی نگارش یک گرداننده ی رویداد را نشان می دهد. اجازه بدهید یک تیتر ساده ی ()EventHandler را در تیتر داکیومنت بنویسیم. هر زمان که کاربر ماوس را روی یک پاراگراف بیاورد، این عملکر را فرا خواهیم خواند.
نمونه دو
Event Handlers Example