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 هم در اینترنت و هم در ویندوز استفاده خواهد شد.
تشکر از زحماتتون
سوا من اینه که وقتی ما با تگ p میتونیم متنی در صفحه بنویسیم دیگه چه لزومی داره که برای ایجاد یک پاراگرافت از document.write استفاده می کنیم؟
ممنون میشم راهنمایی کنید
اما توجه فرمایید که هدف ما در اینجا آموزش است و مجبوریم که با موارد بسیار ساده آموزش مان را شروع کنیم تا آرام آرام با دستورات اصلی جاوااسکریپت آشنا شوید.
یک انتقادی که از سایتتون دارم این هست که دقیقا خود کدهای جاوا اسکریپتو توضیح ندادید و فقط کاربردهایشان را توضیح داده اید.
و انتقاد دیگرم هم این هست که خیلی از آموزش ها را باید در کامنت ها یاد بگیریم!!!!. یعنی اگر در جایی توضیح کافی نبوده و دیگران سوال پرسیده باشند شما در کامنت ها توضیحات تکمیلی را برایشان قرار می دهید و این باعث می شود مجبور شویم مدام کامنت ها را چک کنیم
و در کامنت ها به دنبال جواب سوالمان بگردیم.اقلا یک صفحه ای قرار دهید و توضیحات تکمیلی در مورد مسائلی که بیشترین سوال را داشتند در آن قرار دهید.
و می خواستم من را راهنمایی کنید که با توجه به اینکه زبان های 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
}
اگر جای چیزی رو باید عوض کرد یا هر مشکل دیگه لطقا جواب بدید!
ممنون.
www.codepen.io/sbaloot/pen/awdKaK
من با سایت شما html,css,bootstrap رو یاد گرفتم. حالا هم دارم جاوااسکریپت رو آموزش می بینم.
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 برای چاپ یک رشته دلخواه استفاده می شود و در دنیای واقعی کاربرد خاصی ندارد ...! اما در آموزش بالا فقط از جهت آموزشی از دستور مذکور استفاده شده است.
به نظرم مثال زیر به خوبی نشان می دهد که چگونه 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
باعث میشه کدهای اچ تی ام ال ناپدید بشند؟!
<html><head></head><body>Oops! The document disappeared!</body></html>
تگ های بالا به طور کامل با تگ های اول متفاوت هستند. این بدین معناست که صفحه بازنویسی شده است.
یک نکته ی منفی دیگر در مورد ()document.write نگه داشتن صفحه است. اگر ()document.write در وسط صفحه باشد، و بعد از آن در صفحه یک سری عناصر دیگر مانند عکس در صفحه وجود داشته باشد، این عناصر تا زمانی که کدها یا متن داخل ()document.write رندر نشده باشند، load نمی شود و صفحه منتظر ()document.write می ماند.
<script type="text/javascript">
document.write('<p>Hello World.<br>Here I am.</p>');
</script>
می خواهیم این مثال را بدون استفاده از ()document.write پیاده کنیم ابتدا یک دیو ایجاد کنید و 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 استفاده کنیم، مرورگر همش درگیر رندر کردن صفحه می شه. پس درست نیست که صفحه دوباره رندر شه.
در برخی حالات پیدا کردن عنصر با توابع مربوط به DOM سخت می شه راحت ترین کار استفاده از document.write هستش.
شرایط را ارزیابی کنید و تصمیم گیری کنید
منظورم این است مثلاً اگر روی یک div کلیک شد خاصیت display برابر None بشه .
آیا می شود این کار را انجام داد ؛لطفاً راهنمایی کنید.
beyamooz.com/javascript/185-dom/576