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

saalek110

saalek110

Well-Known Member
قبلا من یک تاپیک داشتم به نام علاه مندان به جاوا اسکریپت

forum.majidonline.com

علاقه مندان به جاوا اسکریپت

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

در صفحه اول تاپیک بالا ، همین بحث دستکاری جاوا اسکریپت روی عناصر صفحه کار شده.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
تغییر محتوای پارگراف:
کپی از تاپیک علافه مندان به جاوا اسکریپت

JavaScript: 
<!DOCTYPE html>
<html>
<body>

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

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

در کد بالا ، در رویداد onclick باتون مستقیما کد نوشته ، و کدش تغییر عنصری با id مساوی demo است.‌
ولی برای پارگراف این کد کار می کند ، چون innerHtml به کار برده.
در کد بالا می توانست یک تابع تعریف کند و کد تغییر پاراگراف را درون اون بگذارد ولی مستقیما کد نوشته.
 
saalek110

saalek110

Well-Known Member
تغییر عکس با جاوا اسکریپت:

JavaScript: 
<!DOCTYPE html>
<html>
<body>

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

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>ً
</body>
</html>

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

saalek110

Well-Known Member
تغییر سایز فونت یک پاراگراف :
کلا کار با style یک عنصر


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



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


تغییر صفت displaye و عدم نمایش عنصر.

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

و ظاهر کردن آن:

JavaScript: 
document.getElementById("demo").style.display = "block";
 
saalek110

saalek110

Well-Known Member
کار با select:


یهو رفتیم سراغ select ، قبلش شاید خوب بود با text کار می کردیم...
ولی وقتی صحبت ، کار با id عناصر باشد...فرقی ندارد. به کد زیر نگاه کنید:

JavaScript: 
<!DOCTYPE html>
<html>
<body>

<form id="myForm">
  Select your favorite fruit:
  <select id="mySelect">
    <option>Apple</option>
    <option>Orange</option>
    <option >Pineapple</option>
    <option>Banana</option>
  </select>
</form>

<p>Click the button to return the id of the form the dropdown list belongs to.</p>

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

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

<script>
function myFunction() {
  var x = document.getElementById("mySelect").form.id;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>

www.w3schools.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com www.w3schools.com

با id از select اومده id فرم را خونده.
و در یک پاراگراف نمایش داده.

در پست های قبل چاپ در پاراگراف را یاد گرفه بودیم.
 
saalek110

saalek110

Well-Known Member
پست قبلی کار زیاد معمولی نکرده ، کد معمول خواندن select است:
JavaScript: 
var select_y =document.getElementById('id_ye_select').value

HTML: 
<form id="myForm">
  Yek matn:
    <select id="id_ye_select">
      <option>5</option>
        <option>4</option>
           </select>
            </form>

در برنامه بالا ، کاربر مثلا ۵ را انتخاب می کند یا ۴ را.
من در برنامه خودم یک باتون زیر سلکت ،گذاشتم و کد جاوا اسکریپت را داخل رویداد کلیک باتون قرار دادم.

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

saalek110

Well-Known Member
ایجاد باتون ، کد متصل کننده تابع به باتون ، تابع باتون:



JavaScript: 
document.getElementById("its_id").addEventListener("click", naame_taabe, false);

اگر خواستید برای پست قبل دکمه استفاده کنید ، کد بالا کارش اینه که id باتون شما را نگاه می کند و یک تابع برایش تعیین می کند. به بیانی رابط باتون شما و تابع مربوط به اون باتون است.
حالا باید یک فانکشن با نام naame_taabe. داشته باشید:

JavaScript: 
    function naame_taabe()
{
}

اینم کد دکمه:
HTML: 
<button id="id_ye_button"   style="width:70px; height:50px;">neveshteye roye dokme</button>

id_ye_button در کد بالا ، id دکمه یا باتون است.
 
آخرین ویرایش:
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا