آموزش Html؛ آموزش جاوا اسکریپت در HTML

0 دیدگاه

در جلسه پانزدهم مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش جاوا اسکریپت در HTML از وب سایت آموزش برنامه نویسی سورس باران.

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

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

JavaScript makes HTML pages more dynamic and interactive.

آموزش تگ <script> در HTML

تگ <script> برای تعریف جاوا اسکریپت در سمت کلاینت به کار برده می‌شود. عنصر <script> یا حاوی دستورات (statement) جاوا اسکریپت است یا از طریق خصوصیت src به یک فایل خارجی اسکریپت اشاره می‌کند. استفاده‌های رایج از جاوا اسکریپت شامل تغییرات عکس، تایید اعتبار فرم و تغییرات داینامیک محتوا است. جاوا اسکریپت اغلب برای انتخاب یک عنصر HTML از روش document.getElementById(id) استفاده می‌کند. مثال جاوا اسکریپتی زیر عبارت “Hello JavaScript!” با id=”demo” در یک عنصر HTML نوشته می‌شود:

The <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains script statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

To select an HTML element, JavaScript most often uses the document.getElementById() method.

This JavaScript example writes “Hello JavaScript!” into an HTML element with id=”demo”:

 <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

پیشنمایش

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

در ادامه چند نمونه از کارهایی که می‌توان با جاوا اسکریپت انجام داد را مشاهده می‌کنید. جاوا اسکریپت می‌تواند محتوای HTML را تغییر دهد :

 document.getElementById("demo").innerHTML = "Hello JavaScript!";

1	document.getElementById("demo").innerHTML = "Hello JavaScript!";

پیشنمایش

جاوا اسکریپت می‌تواند استایل‌های HTML را تغییر دهد:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

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

document.getElementById("demo").style.color = "red";

document.getElementById("demo").style.backgroundColor = "yellow";

پیشنمایش

جاوا اسکریپت می‌تواند خصوصیت‌های HTML را تغییر دهد:

 document.getElementById("image").src = "picture.gif";

1	document.getElementById("image").src = "picture.gif";

پیشنمایش

آموزش تگ <noscript> در HTML

تگ <noscript> برای ایجاد محتوای جایگزین برای کاربرانی به کار می‌رود که اسکریپت‌ها در مرورگرشان غیرفعال بوده و یا از مرورگری استفاده می کنند که از اسکریپت های سمت کاربر (کلاینت) پشتیبانی نمی‌کند:

 <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

پیشنمایش

آموزش استفاده از جاوا اسکریپت در قسمت Head یک صفحه وب

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

<!DOCTYPE html>
<html>
<head>
 
<script>
function myFunction() {
document.getElementById("test").innerHTML = "sourcebaran";
}
</script>
 
</head>
<body>
 
<p id="test"></p>
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

function myFunction() {

document.getElementById("test").innerHTML = "sourcebaran";

}

</script>

</head>

<body>

<button type="button" onclick="myFunction()">اینجا کلیک کن</button>

</body>

</html>

آموزش استفاده از جاوا اسکریپت در قسمت Body یک صفحه وب

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

<!DOCTYPE html>
<html>
<body>
 
<p id="test"></p>
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
<script>
function myFunction() {
document.getElementById("test").innerHTML = "sourcebaran";
}
</script>
 
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<button type="button" onclick="myFunction()">اینجا کلیک کن</button>

function myFunction() {

document.getElementById("test").innerHTML = "sourcebaran";

}

</script>

</body>

</html>

آموزش فراخوانی فایل جاوا اسکریپت خارجی در HTML

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

<!DOCTYPE html>
<html>
<head>
 
<script src="test.js"></script>
 
</head>
<body>
 
<p id="test"></p>
 
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button type="button" onclick="myFunction()">اینجا کلیک کن</button>

</body>

</html>

در مثال زیر نحوه چگونگی فراخوانی فایل خارجی جاوا اسکریپت را در قسمت Body یک صفحه HTML مشاهده خواهید نمود.

2
3
4
5
6
7
8
9
	
<body>
 
<p id="test"></p>
 
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
<script src="test.js"></script>
 
</body>

<body>

<button type="button" onclick="myFunction()">اینجا کلیک کن</button>

</body>

لیست جلسات قبل آموزش Html

آموزش اصول اولیه و عناصر HTML

آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

آموزش کار با پاراگراف و استایل در Html

آموزش کار با قالب بندی متن در Html

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

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

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

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

آموزش کار با لینک در HTML

آموزش کار با جدول در HTML

آموزش کار با لیست ها در HTML

آموزش کار با عناصر Block و Inline در HTML

آموزش کار با عنصر Class در HTML

آموزش Html؛ آموزش iframe در HTML

آموزش Html؛ آموزش جاوا اسکریپت در HTML

آموزش کار با عنصر Head در HTML

آموزش Layout در HTML

آموزش طراحی سایت ریسپانسیو در HTML

آموزش عناصر کد کامپیوتر در HTML

آموزش موجودیت (Entities) در HTML

آموزش نمادها (Symbols) در HTML

آموزش کار با Character (کاراکترهای رزرو شده) در HTML

آموزش رمزگذاری URL در HTML

آموزش کامل کار با فرم ها در HTML

آموزش انواع ورودی (Input) در HTML

آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: html, JavaScript, آموزش اچ تی ام ال, آموزش برنامه نویسی, آموزش کامل Html, آموزش مقدماتی Html, اچ تی ام ال

صابر بوستانی

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

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

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۱۵ مرداد ۱۳۹۸

آموزش Html؛ آموزش جاوا اسکریپت در HTML

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

آموزش تگ <script> در HTML

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

آموزش تگ <noscript> در HTML

آموزش استفاده از جاوا اسکریپت در قسمت Head یک صفحه وب

آموزش استفاده از جاوا اسکریپت در قسمت Body یک صفحه وب

آموزش فراخوانی فایل جاوا اسکریپت خارجی در HTML

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط