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

saalek110 · Jul 17, 2022

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

این تاپیک در مورد آلمان بود که ادیت کردم ،مدیریت محترم لطفا این تاپیک را به تالار مربوطه منتقل کنید.

در تاپیک زیر راهنمایی هایی برای ساخت سایت گفته شده:

سایت خود را بسازید

سایت خود را بسازید. من وسایل تمرین در گوشی را گفتم ، ویندوز که راحت تره.... تاپیک های آموزش htlm و php و دیتابیس و css هم زدم. علاقه مندان به Html https://forum.majidonline.com/threads/%D8%B9%D9%84%D8%A7%D9%82%D9%87-%D9%85%D9%86%D8%AF%D8%A7%D9%86-%D8%A8%D9%87-html.239345/post-1414581...

forum.majidonline.com

همچنین تاپیک علاقه مندان html و تاپیک علاقه مندان php من را بخوانید

در تاپیک زیر ، کار با هاست و طرز کار با دیتابیس گفته شده:

سایت خود را بسازید ، به روش saalek110

سایت خود را بسازید ، به روش saalek110 در این روش شما فقط html و css یاد می گیرید که خیلی خیلی ساده است و در همین تاپیک مقداریش آموزش داده می شود. کدهای php کدش به شکل آماده در اختیاز شما قرار می گیرد. جاوا اسکریپت هم خیلی کم استفاده شده و کدش آماده در پست ها قرار داده می شود. طرز استفاده از...

forum.majidonline.com

saalek110 · Jul 17, 2022

راهنمای تاپیک

صفحه ۱ : کار بر پاراگراف با زدن دکمه.
صفحه ۲ : ساختن فایل خارجی جاوا اسکریپت ، خروجی دادن ، تعریف متغیر، مقدار ثابت ، تعریف کردن تابع ، دامنه متغیرها
صفحه ۳ : رشته ها و اعداد
صفحه ۴ : تاریخ

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

saalek110 · Jul 17, 2022

دکمه های زیبا:

Beautiful CSS buttons examples - CSS Scan

Curated collection of 92 free beautiful CSS buttons, ready-to-use for your next projects. Click to copy.

getcssscan.com

انشا الله با دکمه های گرافیکی بعدا کار می کنیم.

saalek110 · Jul 17, 2022

سالک : یکی دو سال پیش یک سایت من ساختم ....
بعدش با جاوا اسکریپت تونستم کارهای جالبی روی اون سایت بکنم و کارایی اون را بالا ببرم.

به همین خاطر حالا که باز دارم سایت می سازم ، این تاپیک را باز کردم تا مباحث جاوا اسکریپت را اینجا جمع کنم.

saalek110 · Jul 17, 2022

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

saalek110 · Jul 17, 2022

من نمی خوام یک اموزش کامل جاوا اسکریپت بدهم اینجا،
بهتره برای توضیحات کامل آموزش های فارسی دیگر را ببینید ،
من اینجا سریع می روم سر اصل مطلب. و ممکنه مطالب تاپیک جابجا باشه ، یعنی یک کد ساده ته تاپیک باشه و یک کد پیشرفته اول تاپیک
اینها را گفتم تا بدونید در چه تاپیکی هستید.

saalek110 · Jul 17, 2022

.......

saalek110 · Jul 17, 2022

........

saalek110 · Jul 17, 2022

......

saalek110 · Jul 17, 2022

جاوا اسکریپت JavaScript یک زبان برنامه نویسی مفسری و سطح بالا است که برای ساخت صفحات تعاملی و واکنشگرا در وب استفاده می شود.” زبان اسکریپتی که در ساخت و کنترل محتوای پویای صفحات وب کاربرد دارد و می تواند بدون نیاز به بارگیری مجدد صفحه به طور دستی هر چیزی را در صفحه جابه جا یا به روزرسانی کند یا به عبارت دیگر تغییر دهد. ویژگی هایی مانند:

گرافیک های متحرک
اسلایدهای عکس
تکمیل خودکار متن
فرم های تعاملی

یک روش برای درک بهتر کار جاوا اسکریپت، فکر کردن درباره برخی از ویژگی های وب است که هر روز از آنها استفاده می کنید و احتمالاً آنها را بدیهی می دانید، مانند به روزرسانی خودکار جدول زمانی فیس بوک در صفحه یا پیشنهاداتی که گوگل هنگام جستجو با شروع تایپ به شما نشان می دهد. در هر دو مورد جاوا اسکریپت کاربرد دارد.

جاوا اسکریپت چیست؟ (کاربردها و تفاوت با جاوا) - سریع آسان

"جاوا اسکریپت JavaScript یک زبان برنامه نویسی مفسری و سطح بالا است که برای ساخت صفحات تعاملی و واکنشگرا در وب استفاده می شود." زبان اسکریپتی که در ساخت و

sariasan.com

saalek110 · Apr 7, 2023

توضیحات یا کامنت ها در برنامه نویسی نکاتی هستند که هر برنامه نویس برای درک بهتر و خوانایی بیشتر به برنامه اضافه می کند. موتورهای جاوا اسکریپت این توضیحات را کاملاً نادیده می گیرند و از آنها رد می شوند.

دو روش برای افزودن توضیحات وجود دارد:

// برای توضیحات تک خطی
/ * */ برای توضیحات چند خطی

توضیحات تک خطی

در جاوا اسکریپت هر خطی که با // شروع شود، نشان دهنده یک توضیح تک خطی است.
سالک : اول خط دو تا ممیز می گذاریم و بعدش هر چی بنوسیم توضیح است و اجرا نمی شود. فقط برای فهم خود برنامه نویس است.

توضیحات در جاوا اسکریپت - سریع آسان

در این آموزش با توضیحات در جاوا اسکریپت (JavaScript)، دلیل استفاده و کاربرد آنها آشنا خواهید شد. توضیحات یا کامنت ها در برنامه نویسی نکاتی هستند که هر برنامه

sariasan.com

saalek110 · Apr 7, 2023

از دبلیو۳ اسکول :

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

میگه html محتوای سایت است
و css شیوه چیدمان نوشته ها و عکس هاست.

سالک : فرض کنید تعدادی مهمان قرار است بیاید ، اون ها را روی زمین می نشانید یا روی مبل؟ اطراف اونها چی می گذارید. مهمان نوشته های سایت است و تزیین اتاق css

اما : جاوا اسکریپت رفتار سایت است.
سالک: در همون مهمونی صاحبخانه جاوا اسکریپت است که مدیریت می کنه رابطه با کاربر را.مثلا یکی در می زنه میگه فلانی را کار دارم. جاوا اسکریپت میاد اون مهمون را صدا می زنه ، میگه برو دم در کارت دارن.
بعدن می بینیم که جاوا اسکریپت حتی می تونه نوشته یک قسمترا عوض کنه.
پس برخلاف css که فقط تزیینات دور نوشته می کنه ، جاوا اسکریپت می تواند در محتویات سایت دخل و تصرف هم بکند.
سالک: حالا یکی میاد میگه اشتباه گفتی ، css قادر به فلان و فلان هم هست ، شاید باشه ولی من اینجا می خوام یک تصوری برای خواننده ایجاد کنم. فعلا که قرار نیست تمام کارایی های css را بشمریم.

و ماحصل نمایش به کاربر و مراوده با کاربر ،به سرور ارسال میشه که همان کد php است.

saalek110 · Apr 7, 2023

خوبی سایت اسکول اینه خودش اونجا کد را هم اجرا می کنه و می توانید نتیجه اجرا را ببینید.

W3Schools online HTML editor

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

www.w3schools.com

کد اول: تغییر یک پاراگراف با زدن دکمه

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>

در کد بالا ، اولا یک پاراگراف داریم که id داره ، id یک اسم است . اسم پاراگراف اینجا demo است.
بعد یک دکمه تعریف کردیم و در رویداد کلیک دکمه محتوای پارگراف تنظیم میشه.

یعنی با زدن دکمه یک پاراگراف سایت تغییر می کنه.

saalek110 · Apr 7, 2023

کد دوم : تغییر یک عکس با جاوا اسکریپت

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>

نتیجه اجرا را اینجا ببینید:

W3Schools online HTML editor

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

www.w3schools.com

یک عکس داریم که باز id داره یعنی یک اسم داره ،
در کد جاوا اسکریپت src این عکس عوض شده که همون نام عکس است.

saalek110 · Apr 7, 2023

تغییر سایز فونت یک پاراگراف :

HTML:

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

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

کد و اجرا در

W3Schools online HTML editor

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

www.w3schools.com

saalek110 · Apr 7, 2023

محو کردن یک پاراگراف

HTML:

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

کد و اجرا در

W3Schools online HTML editor

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

www.w3schools.com

saalek110 · Apr 7, 2023

ظاهر کردن یک پاراگراف

HTML:

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

کد و اجرا در

W3Schools online HTML editor

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

www.w3schools.com

saalek110 · Apr 7, 2023

در بالا دیدیم که بایک دکمه توانستیم روی پاراگراف کارهایی انجام بدهیم.

سالک : تصور کنید با تغییر نوشته یا عکس چه کارهایی می شود کرد
وقتی دکمه هایی را میزنید مثلا رنگ بک گراند یک پاراگراف عوض بشه
یا یک عکس بتونه چندین عکس را نمایش بده
بگذریم. بعدا شاید نمونه برنامه هایی برای نمایش این قابلیت ها گذاشتیم.

ثانیا ، تا اینجا ما تگ اسکریپت استفاده نکردیم
فقط یک دکمه بود که روی پاراگراف و عکس تغییر ایجاد می کرد
ولی حالا می خواهیم با تگ اسکریپت آشنا بشیم

saalek110 · Apr 7, 2023

JavaScript:

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

JavaScript:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

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

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

</body>
</html>

سالک: چون دکمه ای در کار نیست ، کد جاوا سکریپت اجرا شده و اون متن در پاراگراف گذاشته شده
کد آموزشی است وگرنه خوب از اول همون متن را در پاراگراف می گذاشت دیگه ،چه کاریه که پاراگراف را خالی بگذاره و بعد با جاوا اسکریپت پرش کنه.
متن هم اینه : اولین جاوا اسکریپت من.

نتیجه اجرا در:

W3Schools online HTML editor

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

www.w3schools.com

سالک : خوب پس با تگ اسکریپت آشنا شدیم.

saalek110 · Apr 7, 2023

جاوا اسکریپت در هدر

سالک : حالا که با تگ اسکریپت آشنا شدیم ، اجازه بدهید در هدر صفحه کد جاوا اسکریپت قرار بدهیم

JavaScript:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

یک تابع در هد سایت گذاشتیم
و دکمه واقع در بدنه ، اون تابع را صدا می زنه.

سالک: خیلی خوبه و جالبه که جاوا اسکریپت تابع داره
البته می دونم که به من الان ... میگید که چیزهای سخت را میگم جالب
ولی وقتی بعدا ببینید چه توابع کارآمدی جاوا اسکریپت داره که کافیه اسم تابع را بیاورید تا اون کار انجام بشه ، میگید چه دنیای خوب و زیبایی است.

اجرا در