آموزش و دوره های رایگان برنامه نویسی( طراحی وب و اندروید) سایتاپ سئو

در سایتاپ با آموزش های اندروید،asp.et MVC و همچنین SEO و بهینه سازی وب با همراه باشید.همچنین با اخبار روز در زمینه های امنیت و هک و اخبار روز تکنولوژی را در سایت ما میتوانید بخوانید.


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

سایتاپ سئو

تغییر استایل تگ ها به وسیله جاوا اسکریپت

به وسیله جاوا اسکریپت میتوان اتریبیوت های داخلی تگ را تغییر داد.

مثلا ما سایز فونت نوشته ای را به وسیله جاوا اسکریپت عوض میکنیم و سایز فونت آن را 35 میکنیم.به وسیله تکه کد زیر

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

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


 


<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>

</html>  

خروجی کد بالا تصویر زیر است:

تصویر شماره 1

 

 

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

تصویر شماره 2

 

مخفی کردن تگ با جاوا اسکریپت

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

document.getElementById("demo").style.display = "none";

حال کد زیر را امتحان کنید.


 

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>

</html>

خروجی کد بالا،تصویر زیر است:

حال اگر روی دکمه کلیک کنیم،خروجی تصویر زیر میشود.

تصویر شماره 4

 

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

 

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

در زبان html  محل قرار گرفتن کد های جاوا اسکریپت بین تگ باز و بسته <script> میباشد.
به صورت زیر:

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
<script>

که کد جاوا اسکریپتمان بین تگ باز و بسته <script> قرار رفته است.

 

 

 

مکان قرار گیری تگ <script>

تگ  <script> میتواند هم درون تگ <head> و هم درون تگ   <body>میتواند قرار بگیرد.

 

نحوه قرار دادن تگ <script> در قسمت <head>

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

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

 

 

خروجی کد بالا  تصویر زیر است.

بنابر کد بالا،باید بعد از کلیک کردن بر روی دکمه،المانی که آی دی برابر demo  دارد،یعنی همان خط دوم،تغییر کند.

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

میبینیم که تغییری که مد نظر ما بود،اتفاق افتاد و خروجی کد ما همان چیزی بود که انتظار داشتیم.

به پایان این قسمت از توضیحات جاوا اسکریپت  در " سایت آپ "رسیدیم.امیدواریم برایتان مفید واقع شده باشد.

دسته بندی
programming
جاوا-اسکریپت

برگشت به صفحه اصلی

سایتاپ درباره ما

#به نام یکتا برنامه نویس هستی


تلگرام من

alitaheri_4

بنده علی طاهری دانشجوی رشته نرم افزار و علاقه مند به برنامه نویسی هستم.اولین بار در 14 سالگی با وبلاگ نویسی پا در عرصه وب و سئو گذاشتم.در حال حاضر در برنامه نویسی اندروید با زبان جاوا و تحت وب با asp.net فعالیت دارم.همچنین بسیار علاقه مند به سئو هستم.