آموزش متد write در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد write در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد write در DOM جاوااسکریپت
با استفاده از متد ()write همونطور که از اسمش هم مشخصه، میتونیم درون صفحه ( سند یا document ) بنویسیم، که منظور از این نوشتن میتونه ایجاد یک یا چندین دستور ( تگ ) HTML باشه و یا یک متن ساده و…
این متد ۱ پارامتر میگیره که اونم همون متن یا محتوا یا دستورات HTML می باشد که قراره در صفحه قرار بگیرند و در نهایت نمایش داده شوند.
اگه میخواهید از چندین مقدار متفاوت درون این متد استفاده نمایید باید هر یک از مقادیر رو با کاما ( , ) از همدیگه جدا نمایید. ( همانند مثال شماره ۳ )
توجه داشته باشید که محتوای document.write بروی تمامی محتوای درون صفحه میشیند، یعنی اگه مثلا خواستیم با کلیک بروی یک دکمه ، یک متن درون صفحه چاپ شود، محتوای قبلی همشون حذف میشن و محتوای جدید جایگزین میشه.( همانند مثال شماره ۲ )
| مقدار برگشتی | هیچی |
|---|---|
| نسخه DOM | Core Level 2 Document Object |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : چاپ متن ” سایت آموزشی فری لرن ” درون صفحه ( بصورت مستقیم )
|
1 2 3 4 5 |
<script> document.write("سایت آموزشی فری لرن"); </script> |
مثال شماره ۲ : چاپ متن ” سایت آموزشی فری لرن ” درون صفحه ( بصورت غیرمستقیم – یعنی با کلیک بروی یک دکمه محتوا چاپ میشه ولی خب گفتیم که در این حالت تمامی محتوای قبلی در صفحه پاک میشن )
|
1 2 3 4 5 6 7 |
<script> function myfun(){ document.write("سایت آموزشی فری لرن"); } </script> |
مثال شماره ۳ : استفاده همزمان از چندین مقدار ( با کاما ( , ) از همدیگه جدا میشن )
|
1 2 3 4 5 |
<script> document.write("متن 1" , "متن 2" , "متن 3"); </script> |
مثال شماره ۴ : استفاده از دستورات ( یا تگ های ) HTML ( لیست کامل تگ های HTML )
|
1 2 3 4 5 6 7 |
<script> document.write("<h1>سایت آموزشی فری لرن</h1>"); document.write("<h2>سایت آموزشی فری لرن</h2>"); document.write("<a href='https://free-learn.ir/'>سایت آموزشی فری لرن</a>"); </script> |
مثال شماره ۵ : ایجاد یک صفحه مجزا با استفاده از تگ های HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> function myfun(){ document.write( "<html>"+ "<head>"+ "<style>"+ "body{"+ "background-color:lightblue;"+ "color:#000;"+ "}"+ "h2{"+ "text-align:center;"+ "}"+ "</style>"+ "</head>"+ "<body>"+ "<h2>سایت آموزشی فری لرن</h2>"+ "<h2>سلام خوبی؟ به سایت فری لرن خوش اومدی</h2>"+ "</body>"+ "</html>" ); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()write | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.write( Dastoor1 , Dastoor2 , ... ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Dastoor1 , Dastoor2 | اون متن یا محتوایی که قراره در صفحه قرار بگیره. + متن عادی میتونه قرار بگیره ( مثال ) + تگ های HTML میتونه قرار بگیره ( مثال ) ( لیست کامل تگ های HTML ) + نام متغیر میتونه قرار بگیره ( مثال ) |
Free-Learn
نکات و توضیحات
- از این متد معمولا و بیشتر برای کارای تست یا آزمایشی استفاده میشه، و باید توجه داشته باشید که بعد از لود صفحه محتوای قبلی صفحه رو پاک میکنه و محتوای جدید رو جایگزین محتوای قبلی میکنه ( همانند مثال شماره ۲ )
- یک متد دیگه بنام document.writeln داریم که دقیقا شبیه متد document.write می باشد، فقط با این تفاوت که document.writeln با هربار چاپ محتوا در صفحه، بصورت خودکار خودش سطر رو میشکنه و به سطر جدید میره. ( مثه اینه که از تگ br استفاده کرده باشیم ) ( آموزش متد document.writeln در جلسه بعدی )
