سبد (0)

تبلیغات

شروع کار با JavaScript

JavaScript بطور معمول برای دستکاری عناصر HTML استفاده می شود.


تغییر محتوای عناصر HTML

Wiki

در JavaScript برای دسترسی به یک عنصر HTML از طریق ID می توان از دستور ()document.getElementById استفاده کرد.

این متد بوسیله شناسه یا (ID) یک عنصر، به آن دسترسی پیدا می کند.

در مثال زیر، محتوای عنصر با شناسه "demo" به مقدار جدید، تغییر می کند:

مثال (شروع کار با JavaScript)

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

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


</body>
</html>
خودتان امتحان کنید »

همچنین در مثال زیر، تاریخ جاری سیستم، داخل عنصری با شناسه "demo" نوشته می شود (عنصر <p>):

مثال (شروع کار با JavaScript)

<html>
<body>

<h1>My First Web Page</h1>

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

<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>


</body>
</html>
خودتان امتحان کنید »

دستور ()document.write

Wiki

در مثال زیر، یک عنصر <p> با محتوی "My First JavaScript" در ادامه فایل HTML نوشته می شود:

مثال (شروع کار با JavaScript)

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
document.write("<p>My First JavaScript</p>");
</script>


</body>
</html>
خودتان امتحان کنید »

توجه: در کدهای JavaScript واقعی، از دستور ()document.write استفاده نکنید. چون تمام صفحه دوباره نوشته می شود. با این وجود در اینجا دستور ()document.write یک راه ساده برای ایجاد خروجی در JavaScript را نشان می دهد. (به مثال زیر توجه نمایید)

مثال (شروع کار با JavaScript)

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

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

<script>
function myFunction()
{
document.write("Oops! The document disappeared!");
}
</script>


</body>
</html>
خودتان امتحان کنید »

JavaScript در Windows 8

Wiki

Microsoft در Windows 8 برای ایجاد برنامه های تحت ویندوز، JavaScript را پشتیبانی می کند.

در آینده بطور قطع، JavaScript هم در اینترنت و هم در ویندوز استفاده خواهد شد.

دیدگاه‌ها  

0 # maryam.sh 1396-05-17 18:49
سلام .خیلی خیلی ممنون از زحمات بی دریغتون.
یک انتقادی که از سایتتون دارم این هست که دقیقا خود کدهای جاوا اسکریپتو توضیح ندادید و فقط کاربردهایشان را توضیح داده اید.
و انتقاد دیگرم هم این هست که خیلی از آموزش ها را باید در کامنت ها یاد بگیریم!!!!. یعنی اگر در جایی توضیح کافی نبوده و دیگران سوال پرسیده باشند شما در کامنت ها توضیحات تکمیلی را برایشان قرار می دهید و این باعث می شود مجبور شویم مدام کامنت ها را چک کنیم
و در کامنت ها به دنبال جواب سوالمان بگردیم.اقلا یک صفحه ای قرار دهید و توضیحات تکمیلی در مورد مسائلی که بیشترین سوال را داشتند در آن قرار دهید.
و می خواستم من را راهنمایی کنید که با توجه به اینکه زبان های php،css،html و جاوااسکریپتو حدودا بلدم برای حرفه ای شدن و طراحی سایت حرفه ای چکار کنم و از کجا و با چه چیزهایی شروع نمایم؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-05-21 08:41
عرض سلام و ادب
همان طور که می دانید یکی از عوامل موفقیت یک مقاله، کوتاه و مختصر بودن آن است، در واقع اکثر افراد، حوصله خواندن مقالات طولانی را ندارند و انتظار دارند که با کمترین زمان ممکن یک موضوع را یادبگیرند، از طرف دیگر، مطالب ارائه شده در بیاموز ترجمه سایت بزرگ و موفق W3schools است.
برای قسمت دوم سوالتون، پیشنهاد می کنم برای طراحی سایت از سیستم مدیریت جوملا استفاده کنید. سیستم مذکور تقریبا تمامی نیازهای راه اندازی یک سایت را پوشش می دهد. می توانید سه درس اول آموزش جوملا را در لینک زیر مشاهده فرمایید:
http://beyamooz.com/product/amoozesh-joomla/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AC%D9%88%D9%85%D9%84%D8%A7-3
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # rrramin 1396-04-31 03:03
سلام و ارادت
فک کنم مثال اول و دوم این درس یکی هستن
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1396-04-31 08:18
سلام و عرض ادب ... ضمن تشکر از شما، اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # محمدبیگ زاده 1396-03-19 21:35
سلام من می خوام یه کد جاوا بنویسم که با هر بار کلیک روی یه دکمه به یک واحد به یه عدد اضافه بشه.
من اینجوری کار کردم ولی جواب نداد:
function b(){
i = 0;
document.getElementById("b").innerHTML=i;
++i
}

اگر جای چیزی رو باید عوض کرد یا هر مشکل دیگه لطقا جواب بدید!
ممنون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1396-03-19 22:01
سلام. باید متغیر i رو به بیرون از تابع ببرید. به مثال زیر که برای شما ایجاد کردیم، توجه کنید:
www.codepen.io/sbaloot/pen/awdKaK
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # salar5075 1396-02-09 19:06
سلام خسته نباشید.
من با سایت شما html,css,bootst rap رو یاد گرفتم. حالا هم دارم جاوااسکریپت رو آموزش می بینم.
1- مراحل طراحی یک front-end و سایت خوب رو به ترتیب بگید. و این که آیا من باز هم به php نیاز پیدا میکنم؟
2- از پایتون چه کمک هایی در طراحی وب، میشه گرفت؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-02-10 08:49
سلام
1- برای طراحی سایت دو تا مسیر مختلف رو می توانید طی کنید ...!
مسیر a: در این روش تمام کارها، اعم از طراحی پایگاه داده، برنامه نویسی سمت سرور و طراحی صفحات باید توسط شما انجام گیرد. بنابراین باید SQL و PHP/ASP.NET و HTML و CSS و JavaScript و اکثر مواردی که در منوی "بخوان و بیاموز" وجود دارد را آموزش ببینید.
مسیر b: در این روش برای طراحی سایت، نیازی به دانش برنامه نویسی وجود ندارد و در واقع از سیستم مدیریت محتوای رایگانی مثل جوملا استفاده می کنید. برای اطلاعات بیشتر به لینک زیر مراجعه فرمایید: (مدت زمان: 11 ساعت)
http://beyamooz.com/product/amoozesh-joomla/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AC%D9%88%D9%85%D9%84%D8%A7-3
2- از پایتون برای برنامه نویسی صفحات وب استفاده می شود. (بعنوان مثال کدهایی که برای بخش عضویت سایت نیاز است)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # خسرو 1395-09-23 08:49
وای شما چقدر خوبید.
توضیح دادن بعضی چیزا به بعضی از افراد خیلی سخته. چقدر خوب و صبورانه توضیح میدید.
درود بر شما.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # دانیال699 1395-06-20 13:19
سلام
1- منظور از کد واقعی جاوا اسکریپت چیست؟
2- چرا باید از document.write استفاده کنیم؟ به چه دردی میخوره؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-06-20 13:58
سلام
1- شاید اگر در مورد مزیت های جاوااسکریبت در اینجا صحبت شود شما متوجه شوید. تصور بفرمایید که یک فرم اطلاعاتی شامل فیلدهای زیر داریم:
1- کد ملی 2- ایمیل و ...
همان طور که می دانید کد ملی فقط شامل کاراکترهای عددی است و همچنین فیلد ایمیل نیز باید از یک فرمت استانداردی پیروی کند، بعنوان مثال ایمیلی که کاربر وارد کرده باید حتما شامل کاراکتر @ باشد. اینکه چک کنیم که کاربر در فیلد کد ملی، حتما عدد وارد کرده باشد و یا ایمیل را با فرمت استاندارد وارد کرده را "اعتبار سجی" یا Validation می نامیم.
اعتبار سنجی را می توانیم به دلخواه در چند سطح انجام دهیم:
1- اعتبار سنجی سمت کاربر (با استفاده از JavaScript)
2- اعتبار سنجی سمت سرور (با استفاده از #C)
3- اعتبار سنجی سمت پایگاه داده (با استفاده از تعریف Constraint)
خوب تصور بفرمایید که اعتبار سنجی سمت کاربر را انجام ندهیم و اطلاعاتی نادرست به سمت سرور ارسال می شود، حالا این وظیفه کدهای سمت سرور است که کاربر را از اشتباهی که مرتکب شده باخبر کند، اما همان طور که می دانید اطلاعات فرم باید به سرور ارسال شود و سپس نتیجه نادرست بودن فیلدهای کد ملی و ایمیل دوباره به کاربر گزارش شود که این کار زمان بر است و مثلا بعد از گذشت 5 ثانیه کاربر متوجه اشتباه خود می شود....!
اما اگر قبل از ارسال مقادیر کدملی و ایمیل به سرور از طریق JavaScript، کاربر را متوجه اشتباهش می کردیم، برنامه ما خیلی حرفه ای تر و جذاب تر می شد.
توجه داشته باشید که کدهای سمت کاربر (JavaScript) توسط مرورگر خود شخص اجرا خواهد شد و پاسخ در لحظه به کاربر نمایش داده می شود.
2- دستور document.write برای چاپ یک رشته دلخواه استفاده می شود و در دنیای واقعی کاربرد خاصی ندارد ...! اما در آموزش بالا فقط از جهت آموزشی از دستور مذکور استفاده شده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر نساجی 1394-09-23 14:31
همانطور که گفتید اگر documet.write در هنگام لود صفحه خوانده شود آنجه درونش است را به صفحه html ما ضمیمه می کند اما اگر پس از لود کامل صفحه این دستور اجرا شود باعث پاک کردن کلیه تگ های html صفحه شده و تنها قطعه کدی که در درونش قرار گرفته را به در صفحه html جایگزین می کند
به نظرم مثال زیر به خوبی نشان می دهد که چگونه document.write باعث پاک شدن صفحه می شود
// Write a heading
document.write("This is a heading");
// Write two paragraphs:
document.write("This is a paragraph.");
document.write("This is another paragraph.");

function fn(){
document.write( "as you see everything in the page has been deleted");
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-09-23 20:50
با سلام و احترام.
علت اینکه با استفاده از دستور document.write( "content"); //comment محتویات صفحه پاک میشه، به این خاطر هست که شیء document در واقع محتویات کل صفحه رو در خودش داره و وقتی ما با استفاده از دستور write اقدام به چاپ یک نوشته می‌کنیم،‌در واقع روی تمامی محتویات که شامل تگ‌های صفحه هم می‌شود، قرار می‌گیرد. اینطوری میشه که صفحه پاک میشه.
در واقع با استفاده از دستور write محتوای نوشته جایگزین محتوای داخل صفحه می‌شه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # azadeh ahmadi 1394-08-17 08:27
توضیح میدین چرا دستور
document.writ e
باعث میشه کدهای اچ تی ام ال ناپدید بشند؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-17 09:22
document کل سند html رو در بر میگیره و وقتی با استفاده از دستور write متنی رو برای نمایش میفرستیم، روی کل سند نوشته میشه. به همین خاطر متن و تگهای قبلی از بین رفته و متن جدید جایگزین آنها میشود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # moji 1393-12-18 16:02
سلام متوجه نمی شم چرا نباید از دستور ()document.writ e استفاده کنیم یعنی چی تمام صفحه دوباره نوشته میشود تو مثال که این اتفاق نمی افته
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+9 # مظاهر نصوحی 1393-12-19 07:47
()document.writ e زمانی که صفحه به صورت کامل load نشده است، متن یا تکه کد داخل آرگومانش را به html می چسباند. اگر شما آن را بعد از اینکه صفحه load شده بود صدا بزنید، صفحه مجدداً توسط مرورگر نمایش داده می شود اما این بار با کدهای html متفاوت در مثال بالا بعد از کلیک روی دکمه اگر source صفحه را مرور کنیم ( در مرورگر فایرفاکس بعد از کلیک روی دکمه متن Oops! The document disappeared! را انتخاب کنید و روی آن کلیک راست و سپس view selection source را انتخاب کنید) تگ های صفحه به صورت زیر است:
<html><head></head><body>Oops! The document disappeared!</body></html>
تگ های بالا به طور کامل با تگ های اول متفاوت هستند. این بدین معناست که صفحه بازنویسی شده است.
یک نکته ی منفی دیگر در مورد ()document.writ e نگه داشتن صفحه است. اگر ()document.writ e در وسط صفحه باشد، و بعد از آن در صفحه یک سری عناصر دیگر مانند عکس در صفحه وجود داشته باشد، این عناصر تا زمانی که کدها یا متن داخل ()document.writ e رندر نشده باشند، load نمی شود و صفحه منتظر ()document.writ e می ماند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # سارا 1393-12-19 12:51
اگه از document.write نباید استفاده کنیم پس چیکار کنیم جایگزینی براش هست ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مظاهر نصوحی 1393-12-20 07:22
به مثال زیر توجه نمایید:
<script type="text/javascript">
document.write('<p>Hello World.<br> ;Here I am.</p>');
</script>

می خواهیم این مثال را بدون استفاده از ()document.writ e پیاده کنیم ابتدا یک دیو ایجاد کنید و id آن را hello قرار دهید:
<div id="hello"></div>
و سپس با استفاده از خصوصیت InnerHtml داخل این دیو عنصر اضافه می کنیم:
<script type="text/javascript">
document.getElementById('hello').innerHTML =
'<p>Hello World.<br> ;Here I am.</p>';
</script>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # سارا 1393-12-20 10:13
ببخشید متوجه نشدم خب تو مثالها اینهمه document.write استفاده شده یعنی هردفعه بخواهیم دستوری رو چاپ کنیم باید دیو بسازیم و از .innerHTML استفاده کنیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مظاهر نصوحی 1393-12-20 10:50
بحثی که همواره من و همکارام داریم دقیقاً مثل سوال شماست.
در این جور مسائل باید چند تا فاکتور را در نظر گرفت. اینکه بتونیم مطلق صحبت کنیم و از منطق صفر و یک پیروی کنیم، کمکی به ما نمی کنه.
باید با توجه به شرایط تصمیم گیری کرد مثلاً اگر صفحه خیلی سنگین باشه و دائم از document.write استفاده کنیم، مرورگر همش درگیر رندر کردن صفحه می شه. پس درست نیست که صفحه دوباره رندر شه.
در برخی حالات پیدا کردن عنصر با توابع مربوط به DOM سخت می شه راحت ترین کار استفاده از document.write هستش.
شرایط را ارزیابی کنید و تصمیم گیری کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیرکیان 1393-12-16 12:42
در جاوا اسکریپت این قابلیت وجود دارد که از خاصیت های css هم استفاده بشود.
منظورم این است مثلاً اگر روی یک div کلیک شد خاصیت display برابر None بشه .
آیا می شود این کار را انجام داد ؛لطفاً راهنمایی کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مظاهر نصوحی 1393-12-16 13:48
این سوال را چندین بار مطرح کرده اید، در نقل قول های قبلی به این سوال پاسخ داده شده است، لطفاً به لینک زیر و سوال خودتون توجه بفرمایید:
http://beyamooz.com/javascript/185-dom/576
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # mohsen moardi 1393-10-12 20:30
خسته نباشيد...ببخشيد مثال دوم تو اين صفحه ايراد داره!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1393-10-13 08:11
ممنون، اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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