شروع کار با JavaScript
JavaScript بطور معمول برای دستکاری عناصر HTML استفاده می شود.
تغییر محتوای عناصر HTML
در JavaScript برای دسترسی به یک عنصر HTML از طریق ID می توان از دستور ()document.getElementById استفاده کرد.
این متد بوسیله شناسه یا (ID) یک عنصر، به آن دسترسی پیدا می کند.
در مثال زیر، محتوای عنصر با شناسه "demo" به مقدار جدید، تغییر می کند:
مثال (شروع کار با JavaScript)
<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)
<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
در مثال زیر، یک عنصر <p> با محتوی "My First JavaScript" در ادامه فایل HTML نوشته می شود:
مثال (شروع کار با JavaScript)
<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)
<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
Microsoft در Windows 8 برای ایجاد برنامه های تحت ویندوز، JavaScript را پشتیبانی می کند.
در آینده بطور قطع، JavaScript هم در اینترنت و هم در ویندوز استفاده خواهد شد.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 37653
دیدگاه‌ها
سلام وقتتون بخیر
تشکر از زحماتتون
سوا من اینه که وقتی ما با تگ p میتونیم متنی در صفحه بنویسیم دیگه چه لزومی داره که برای ایجاد یک پاراگرافت از document.write استفاده می کنیم؟
ممنون میشم راهنمایی کنید
سلام، بله حق با شماست و لزومی نداره که از document.write استفاده کنیم و حتی می توان گفت که document.write باعث می شود که تمام صفحه دوباره Refresh یا بارگذاری شود.
اما توجه فرمایید که هدف ما در اینجا آموزش است و مجبوریم که با موارد بسیار ساده آموزش مان را شروع کنیم تا آرام آرام با دستورات اصلی جاوااسکریپت آشنا شوید.
سلام .خیلی خیلی ممنون از زحمات بی دریغتون.
یک انتقادی که از سایتتون دارم این هست که دقیقا خود کدهای جاوا اسکریپتو توضیح ندادید و فقط کاربردهایشان را توضیح داده اید.
و انتقاد دیگرم هم این هست که خیلی از آموزش ها را باید در کامنت ها یاد بگیریم!!!!. یعنی اگر در جایی توضیح کافی نبوده و دیگران سوال پرسیده باشند شما در کامنت ها توضیحات تکمیلی را برایشان قرار می دهید و این باعث می شود مجبور شویم مدام کامنت ها را چک کنیم
و در کامنت ها به دنبال جواب سوالمان بگردیم.اقلا یک صفحه ای قرار دهید و توضیحات تکمیلی در مورد مسائلی که بیشترین سوال را داشتند در آن قرار دهید.
و می خواستم من را راهنمایی کنید که با توجه به اینکه زبان های php،css،html و جاوااسکریپتو حدودا بلدم برای حرفه ای شدن و طراحی سایت حرفه ای چکار کنم و از کجا و با چه چیزهایی شروع نمایم؟
با تشکر
عرض سلام و ادب
همان طور که می دانید یکی از عوامل موفقیت یک مقاله، کوتاه و مختصر بودن آن است، در واقع اکثر افراد، حوصله خواندن مقالات طولانی را ندارند و انتظار دارند که با کمترین زمان ممکن یک موضوع را یادبگیرند، از طرف دیگر، مطالب ارائه شده در بیاموز ترجمه سایت بزرگ و موفق W3schools است.
برای قسمت دوم سوالتون، پیشنهاد می کنم برای طراحی سایت از سیستم مدیریت جوملا استفاده کنید. سیستم مذکور تقریبا تمامی نیازهای راه اندازی یک سایت را پوشش می دهد. می توانید سه درس اول آموزش جوملا را در لینک زیر مشاهده فرمایید:
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
سلام و ارادت
فک کنم مثال اول و دوم این درس یکی هستن
سلام و عرض ادب ... ضمن تشکر از شما، اصلاح شد.
سلام من می خوام یه کد جاوا بنویسم که با هر بار کلیک روی یه دکمه به یک واحد به یه عدد اضافه بشه.
من اینجوری کار کردم ولی جواب نداد:
function b(){
i = 0;
document.getElementById("b").innerHTML=i;
++i
}
اگر جای چیزی رو باید عوض کرد یا هر مشکل دیگه لطقا جواب بدید!
ممنون.
سلام. باید متغیر i رو به بیرون از تابع ببرید. به مثال زیر که برای شما ایجاد کردیم، توجه کنید:
www.codepen.io/sbaloot/pen/awdKaK
سلام خسته نباشید.
من با سایت شما html,css,bootst rap رو یاد گرفتم. حالا هم دارم جاوااسکریپت رو آموزش می بینم.
1- مراحل طراحی یک front-end و سایت خوب رو به ترتیب بگید. و این که آیا من باز هم به php نیاز پیدا میکنم؟
2- از پایتون چه کمک هایی در طراحی وب، میشه گرفت؟
با تشکر
سلام
1- برای طراحی سایت دو تا مسیر مختلف رو می توانید طی کنید ...!
مسیر a: در این روش تمام کارها، اعم از طراحی پایگاه داده، برنامه نویسی سمت سرور و طراحی صفحات باید توسط شما انجام گیرد. بنابراین باید SQL و PHP/ASP.NET و HTML و CSS و JavaScript و اکثر مواردی که در منوی "بخوان و بیاموز" وجود دارد را آموزش ببینید.
مسیر b: در این روش برای طراحی سایت، نیازی به دانش برنامه نویسی وجود ندارد و در واقع از سیستم مدیریت محتوای رایگانی مثل جوملا استفاده می کنید. برای اطلاعات بیشتر به لینک زیر مراجعه فرمایید: (مدت زمان: 11 ساعت)
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- از پایتون برای برنامه نویسی صفحات وب استفاده می شود. (بعنوان مثال کدهایی که برای بخش عضویت سایت نیاز است)
وای شما چقدر خوبید.
توضیح دادن بعضی چیزا به بعضی از افراد خیلی سخته. چقدر خوب و صبورانه توضیح میدید.
درود بر شما.
سلام
1- منظور از کد واقعی جاوا اسکریپت چیست؟
2- چرا باید از document.write استفاده کنیم؟ به چه دردی میخوره؟
سلام
1- شاید اگر در مورد مزیت های جاوااسکریبت در اینجا صحبت شود شما متوجه شوید. تصور بفرمایید که یک فرم اطلاعاتی شامل فیلدهای زیر داریم:
1- کد ملی 2- ایمیل و ...
همان طور که می دانید کد ملی فقط شامل کاراکترهای عددی است و همچنین فیلد ایمیل نیز باید از یک فرمت استانداردی پیروی کند، بعنوان مثال ایمیلی که کاربر وارد کرده باید حتما شامل کاراکتر @ باشد. اینکه چک کنیم که کاربر در فیلد کد ملی، حتما عدد وارد کرده باشد و یا ایمیل را با فرمت استاندارد وارد کرده را "اعتبار سجی" یا Validation می نامیم.
اعتبار سنجی را می توانیم به دلخواه در چند سطح انجام دهیم:
1- اعتبار سنجی سمت کاربر (با استفاده از JavaScript)
2- اعتبار سنجی سمت سرور (با استفاده از #C)
3- اعتبار سنجی سمت پایگاه داده (با استفاده از تعریف Constraint)
خوب تصور بفرمایید که اعتبار سنجی سمت کاربر را انجام ندهیم و اطلاعاتی نادرست به سمت سرور ارسال می شود، حالا این وظیفه کدهای سمت سرور است که کاربر را از اشتباهی که مرتکب شده باخبر کند، اما همان طور که می دانید اطلاعات فرم باید به سرور ارسال شود و سپس نتیجه نادرست بودن فیلدهای کد ملی و ایمیل دوباره به کاربر گزارش شود که این کار زمان بر است و مثلا بعد از گذشت 5 ثانیه کاربر متوجه اشتباه خود می شود....!
اما اگر قبل از ارسال مقادیر کدملی و ایمیل به سرور از طریق JavaScript، کاربر را متوجه اشتباهش می کردیم، برنامه ما خیلی حرفه ای تر و جذاب تر می شد.
توجه داشته باشید که کدهای سمت کاربر (JavaScript) توسط مرورگر خود شخص اجرا خواهد شد و پاسخ در لحظه به کاربر نمایش داده می شود.
2- دستور document.write برای چاپ یک رشته دلخواه استفاده می شود و در دنیای واقعی کاربرد خاصی ندارد ...! اما در آموزش بالا فقط از جهت آموزشی از دستور مذکور استفاده شده است.
همانطور که گفتید اگر 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");
}
با سلام و احترام.
علت اینکه با استفاده از دستور document.write( "content"); //comment محتویات صفحه پاک میشه، به این خاطر هست که شیء document در واقع محتویات کل صفحه رو در خودش داره و وقتی ما با استفاده از دستور write اقدام به چاپ یک نوشته می‌کنیم،در واقع روی تمامی محتویات که شامل تگهای صفحه هم میشود، قرار می‌گیرد. اینطوری میشه که صفحه پاک میشه.
در واقع با استفاده از دستور write محتوای نوشته جایگزین محتوای داخل صفحه میشه.
توضیح میدین چرا دستور
document.writ e
باعث میشه کدهای اچ تی ام ال ناپدید بشند؟!
document کل سند html رو در بر میگیره و وقتی با استفاده از دستور write متنی رو برای نمایش میفرستیم، روی کل سند نوشته میشه. به همین خاطر متن و تگهای قبلی از بین رفته و متن جدید جایگزین آنها میشود.
سلام متوجه نمی شم چرا نباید از دستور ()document.writ e استفاده کنیم یعنی چی تمام صفحه دوباره نوشته میشود تو مثال که این اتفاق نمی افته
()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 می ماند.
اگه از document.write نباید استفاده کنیم پس چیکار کنیم جایگزینی براش هست ؟
به مثال زیر توجه نمایید:
<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>
ببخشید متوجه نشدم خب تو مثالها اینهمه document.write استفاده شده یعنی هردفعه بخواهیم دستوری رو چاپ کنیم باید دیو بسازیم و از .innerHTML استفاده کنیم؟
بحثی که همواره من و همکارام داریم دقیقاً مثل سوال شماست.
در این جور مسائل باید چند تا فاکتور را در نظر گرفت. اینکه بتونیم مطلق صحبت کنیم و از منطق صفر و یک پیروی کنیم، کمکی به ما نمی کنه.
باید با توجه به شرایط تصمیم گیری کرد مثلاً اگر صفحه خیلی سنگین باشه و دائم از document.write استفاده کنیم، مرورگر همش درگیر رندر کردن صفحه می شه. پس درست نیست که صفحه دوباره رندر شه.
در برخی حالات پیدا کردن عنصر با توابع مربوط به DOM سخت می شه راحت ترین کار استفاده از document.write هستش.
شرایط را ارزیابی کنید و تصمیم گیری کنید
در جاوا اسکریپت این قابلیت وجود دارد که از خاصیت های css هم استفاده بشود.
منظورم این است مثلاً اگر روی یک div کلیک شد خاصیت display برابر None بشه .
آیا می شود این کار را انجام داد ؛لطفاً راهنمایی کنید.
این سوال را چندین بار مطرح کرده اید، در نقل قول های قبلی به این سوال پاسخ داده شده است، لطفاً به لینک زیر و سوال خودتون توجه بفرمایید:
beyamooz.com/javascript/185-dom/576
خسته نباشيد...ببخشيد مثال دوم تو اين صفحه ايراد داره!
ممنون، اصلاح شد.