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

saalek110

saalek110

Well-Known Member
بسم الله الرحمن الرحیم
۱۰۰ پست زدیم ، با کدهایی آشنا شدید.
در اینجا می خواهیم جمع بندی کنیم و بحث ها را مرتب کنیم.



خروجی دادن
در چند پست اول با کد زیر
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 اون ، محتوای پاراگراف را تغییر دادیم.
یک دکمه داشتیم که وقتی می زدیم محتوای پاراگراف تغییر می کرد.
شاید برای این ،سایت w3school این کد را اول آموزش گفته , چون خروجی دادن است و در بحث های بعدی نیاز داشته با خروجی دادن نشان بدهد کدها چه کاری انجام می دهد.

خروجی دادن با تغییر عکس
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>

تغییر یک عکس هم نوعی خروجی دادن است، مثلا عکس نوشته ای دارد یا علامت خاصی روی آن است که پیامی را به کاربر می دهد.

و این خروجی دادن ها خوب است.چون ارتباط با کاربر است.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
کد زیر:
JavaScript: 
document.getElementById("demo").style.fontSize = "35px";

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

محو کردن یک پاراگراف:
JavaScript: 
document.getElementById("demo").style.display = "none";

و ظاهر کردن یک پاراگراف:
JavaScript: 
document.getElementById("demo").style.display = "block";


بعدش با تگ اسکریپت آشنا شدیم:

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>
و دیدیم که باید کدهای جاوا اسکریپت در میان تگ های اسکریپت باشد.

پس تا اینجا با تغییر محتوا یا صفات پاراگراف و یا عکس آشنا شدیم و تگ اسکریپت را هم شناختیم.
 
saalek110

saalek110

Well-Known Member
در برنامه بعدی یک تابع جا ا اسکریپت را در هدر گذاشته است:
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>

تابع مقداری کد است که با آوردن اسم تابع اون کدها اجرا می شود.


تا اینجا خلاصه صفحه اول تاپیک بود.
 
saalek110

saalek110

Well-Known Member
ساختار سه جزئی:

JavaScript: 
<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

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

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

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

در کد بالا، یک پاراگراف داریم که قراره تغییر کنه
یک دکمه داریم که بیرون تگ های اسکریپت است و تابعی که داخل تگ های اسکریپت است را صدا می زند.

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

اون پاراگراف نقش مونیتور ما را دارد، اتفاقات را روی اون می توانیم نمایش دهیم
می توانیم چند پاراگراف id دار بسازیم ، مثل خودروهایی که ۳ مونیتور روی داشبورد خود دارند یا حتی می توانید ۱۰ یا بیشتر پاراگراف برای نمایش اتفاقات بسازید ، ، مثل کابین خلبان


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

saalek110

Well-Known Member
بعدش ساختن فایل خارجی را گفته که برای نظم و انضباط است و جنبه فنی ندارد.
این طور کارها، گستراندن محیط کار است تا محیط کار برای کار مناسب باشد.


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

JavaScript: 
<script>
document.write(5 + 6);
</script>
این هم نوعی چاپ است ولی ایرادی که دارد همه نوشته های قبلی پاک می شود:نتیجه اجرا در لینک زیر
www.w3schools.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com www.w3schools.com
پس باید ببینیم کاربرد این نوع خروجی دادن چیست. ولی بهرحال اینجا ذکر کردم تا در لیست ابزارهای ما باشد.


کد زیر ، کد آلرت است ، یعنی پنجره ای که روی صفحه اصلی باز می شود و چیزهایی را چاپ می کنیم. باید دید آلرت کجا کاربرد دارد.
JavaScript: 
<script>
window.alert(5 + 6);
</script>

خوب بحث خروجی دادن تمام شد.

حالا می رویم به بحث کدنویسی جاوا اسکریپت
 
saalek110

saalek110

Well-Known Member
اولین بحث متغیر است.
متغیر محلی از حافظه است که چیزی اونجا ذخیره میشه...
فرض کنید روی زمین در حال کار هستید ، بعد از کار با هر چیز اون را در نقطه ای روی زمین می گذارید تا دستتان خالی شود تا بتوانید با چیز دیگری کار کنید....


همان طور که نقطه ای از زمین را برای قرار دادن چیزی انتخاب می کنید ، تعریف کردن متغیر هم چنین نقشی دارد تا حاصل کار خود را اونجا قرار دهید و بعدا به اونجا مراجعه می کنید...

پس یک قسمت مهم کدنویسی ، ایجاد متغیرها و استفاده از اون هاست.

JavaScript: 
<script>
let x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";
</script>

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

شرح کد : چند متغیر تعریف شده ، دو متغیر مقدار داده شده و با هم جمع شده اند و حاصل جمع در پاراگراف چاپ شده.

این هم طرز تعریف مقدار ثابت:
JavaScript: 
const PI = 3.14159265359

فرق مقدار ثابت با متغیر اینه که مقدار یک مقدار ثابت را تغییر نمی دهند ، اصلا قابل تغییر نیست. مثل عدد معروف پی که باهاش محیط و مساحت دایره را حساب می کردند ، کسی عدد پی را تغییر نمی دهد.فقط ازش استفاده می کنند.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
طرز تعریف کردن تابع:

JavaScript: 
function myFunction(p1, p2) {
  return p1 * p2;
}

پی ۱ و پی ۲ ، ورودی های تابع هستند ، موقع صدل زدن تابع ورودی هایش داخل پرانتز نوشته می شود و این جوری بهش ارسال میشه ، این جوری؛
JavaScript: 
Esme_tabe(vorodi1,vorodi2);

در تابع بالا دو ورودی در هم ضرب شده اند و به عنوان خروجی برگردانده شدند ، پس باید یک متغیر برای دریافت خروجی تدارک ببینیم، این طوری:
JavaScript: 
$yek_moteghayer=esme_tabe(vorodi1,vorodi2);
 
saalek110

saalek110

Well-Known Member
دامنه متغیرها:
متغیریکه داخل تابع تعریف بشه ، فقط داخل تابع شناخته شده است و بیرون تابع شناخته شده نیست.

سالک : توجه کنید که باید بدانید قلمروی هر متغیر کجاست، مثلا قایق فقط داخل آب راه میره ، و در خشکی نمی تونه بیاید.....
خوب شما باید بدونید حد و حدود هر متغیری که می سازید کجاست و تا کجا زنده است ،
در بحث های بعدی من به این قضیه حساس هستم تا متغیرها را خوب بشناسیم......
 
saalek110

saalek110

Well-Known Member
کد زیر خواسته نشون بده چطور یک متغیر درون تابع بیرون تابع بی معنی است::

JavaScript: 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>Outside myFunction() carName is undefined.</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>
myFunction();

function myFunction() {
  let carName = "Volvo";
  document.getElementById("demo1").innerHTML =
  typeof carName + " " + carName;
}

document.getElementById("demo2").innerHTML =
typeof carName;
</script>

</body>
</html>

نتیجه اجرا :
www.w3schools.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com www.w3schools.com
 
saalek110

saalek110

Well-Known Member
شاید یک نفر بگه شما داری کدها را باز تکرار می کنی،
بله ولی با دید جدیدتر به کدها نگاه می کنیم و در آخر قصد دارم جمع بندی بکنم.



در ادامه بحث می رسیم به تابع تاریخ که در اینجا هیچ کاری با تاریخ نداریم ، چون ما داریم ساختار جاوا اسکریپت را بررسی می کنیم و تاریخ یک چیز جزئی است ، پس فقط اسمش را اوردم و رد میشیم، در صورتی که یک صفحه کامل تاپیک یعنی ۲۰ پست را به خود اختصاص داده بود. صفحه چهارم تاپیک کلا تاریخ بود.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
JavaScript: 
JavaScript:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>

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

saalek110

Well-Known Member
کد طول رشته:
JavaScript: 
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;

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


به بحث آرایه هم به موقعش می پردازیم.
رفتن به خط بعدی. انشا الله بعدا استفاده می کنیم ، یاد می گیرید
\nNew line
 
saalek110

saalek110

Well-Known Member
رسیدیم صفحه ۵ تاپیک ، تابع راندوم کاربرد خاص خود را داد و اینجا باهاش کار نداریم.


شرط را هم که اونجا صفحه ۵ دیدید.
 
saalek110

saalek110

Well-Known Member
باز به کد ساختاری می رسیم:

JavaScript: 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparisons</h2>

<p>Input your age and click the button:</p>

<input id="age" value="18" />

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

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

<script>
function myFunction() {
  let voteable;
  let age = Number(document.getElementById("age").value);
  if (isNaN(age)) {
    voteable = "Input is not a number";
  } else {
    voteable = (age < 18) ? "Too young" : "Old enough";
  }
  document.getElementById("demo").innerHTML = voteable + " to vote";
}
</script>

</body>
</html>




فرق این کد با اون کد ساختار ۳ جزئی ، پاراگراف ، دکمه ، تابع اینه که جای پاراگراف یک ورودی داریم.

ساختار ۳ جزئی جدید
پس کارکرد کد وابسته به ورودی کاربر است ، اون ساختار ۳ جزئی اصلا با کاربر کار نداشت ، کاربر فقط دکمه را می زد

ولی اینجا کاربر اول ورودی می دهد و بعد دکمه را می زند،
ممکن است ده تا ورودی بدهد بعدش دکمه را بزند ، مثل فرم ثبت نام در سایتها...

سالک : چرا من دارم روی ساختارها تاکید می کنم؟
چون شما مثل یک مهندس عمران باید بدانید قراره چی بسازید ، با کلی کد متفرق که سایت درست نمیشه ،



شما باید با کاربر کار کنید
باید ازش ورودی دریافت کنید و با کدها روی اون ورودی کار کنید

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

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

در گهم های بعدی هر توده کد دو مسیر ، باز از کاربر ممکن است ورودی دریافت کنیم، مثلا اگر بالای ۱۸ سال بود بگیم آیا ورزش می کنی ، و اگر ورزش بکند یک کدهایی اجرا می شود و اگر ورزش نکند یک کدهایی اجرا می شود.
 
saalek110

saalek110

Well-Known Member
یک قسمت ترمینال کار ، یعنی یک قسمت نهایی کار ، ثبت در دیتابیس است
مثلا از کاربر آزمون می گیریم و نمره اش را در پرونده اش در دیتابیس چاپ می کنیم.باید بفهمیم چطور از کدهای جاوا اسکریپت به کدهای php پاس می دهیم.رابطه جاوا اسکریپت و php را باید خوب بشناسیم ، وقتی می روید اداره کارمند اونجا بعد صحبت با شما پرونده شما را از بایگانی می گیرد.می خواند و چیزهایی هم در اون ثبت می کند.

وقتی هم دارید با کاربر مراوده می کنید ممکنه قسمتی از دیتابیس را بخوانید و به کاربر نشان بدهید.(با php)

همچنین بحث متغیرها و دامنه متغیرها باید خوب بحث بشه که بعدا بحث می کنیم.

مرور ۵ صفحه تاپیک تمام شد و کلش را در صفحه ۶ مرور کردیم.
مباحثی از سایت w3school هنوز بحث نشده که بعدا به اونها خواهیم پرداخت.
 
saalek110

saalek110

Well-Known Member
کاربر فرمی را پر می کند و دکمه را می زند ، مثلا بنا به انتخاب ها یا اطلاعات پر شده در فرم توسط کاربر ، اطلاعاتی از دیتابیس به نمایش درمی اید و باز سوالاتی با ایجاد فرم پرسیده می شود و الی آخر ... و نتیجه کار در آخر در دیتابیس ذخیره می شود.


حین کار هم از متعیرهای سراسری می توانیم استفاده کنیم که در پست بعدی بحث شده.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member

متغیرهای سراسری​

متغیرهایی که در بیرون تابع تعریف می‌شوند از نوع سراسری هستند. به مثال زیر توجه کنید:
سالک: من برنامه ایشان را کمی تغییر دادم.

JavaScript: 
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p id="demo">This is a paragraph.</p>


<script>
var firstNumber  = 10;
  var secondNumber = 5;
  var Sum;       
 
function GlobalVariable()
     {
   
        Sum = firstNumber + secondNumber;

    }
 
     GlobalVariable ();
    document.getElementById("demo").innerHTML =Sum;

</script>


</body>
</html>


محدوده متغیر

متغیرها در جاوا اسکریپت دارای محدوده (scope) هستند. محدوده یک متغیر به شما می‌گوید که در کجای برنامه می‌توان از متغیر استفاده کرد و یا متغیر قابل دسترسی است.
www.w3-farsi.com www.w3-farsi.com

سالک: در سایت بالا گفته شده متغیرهایی که بیرون تابع تعریف شوند سراسری هستند.
داخل تابع اومده متغیرهای بیرون تابع را جمع زده و درست درومده


ولی یک تست ، اگر چند بار تگ جاوا اسکریپت را باز و بسته کنیم ، متغیرهای تکه اول در تکه های بعدی قابل اسنفاده است؟

JavaScript: 
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p id="demo">This is a paragraph.</p>


<script>
var firstNumber  = 10;
  var secondNumber = 5;
    var Sum;       
 
       function GlobalVariable()
        {
        Sum = firstNumber + secondNumber;
               }
                    
              GlobalVariable ();
    document.getElementById("demo").innerHTML =Sum

   </script>

<p id="demo2"> 22222   </p>


<script>
    
 
       function GlobalVariable2()
          {
                 Sum = firstNumber + secondNumber+2;
   
          }
                    
 GlobalVariable2 ();
      document.getElementById("demo2").innerHTML =Sum;

 </script>


 </body>
 </html>


نتیجه اجرا : یک ۱۵ و یک ۱۷ چاپ میشه
من به تابع دومی یک عدد ۲ اضافه کردم تا مطمئن بشم Sum از تابع دومی ساخته شده.

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

saalek110

Well-Known Member
سالک: در پستهای قبلی دیدم که با جاوا اسکریپت می توانیم محتوای یک input را بخوانیم
من یک انتخابگر رنگ داشتم که در یک input عدد رنگ را نشان می داد و می خواستم با اون رنگ های سایت خود را انتخاب کنم
ولی قبل ارسال به دیتابیس با php . می خواستم بی سر و صدا رنگ روی صفحه ام تست بشه تا ببینم سایت چه شکلی میشه.
بدون اینکه تگ اسکریپت باز کنم توانستم با قرار دادن دو خط دستور در یک باتون در مرحله اول از input رنگ را بخوانم و با خط بعدی سایت را رنگ کنم
اگر از رنگ خوشم میومد در دیتابیس ذخیره می کردم. برای این بود که کاربران سایت من بتوانند خودشان رنگ صفحات را تغییر دهند.

JavaScript: 
<button type="button" onclick='     
      
    let color = document.getElementById("id_e_input").value;
   document.getElementById("id_e_td").style.backgroundColor=color;
  
     '>Click Me!</button>

این هم تیبل من بود:
PHP: 
     echo"<table border=1>";
echo"<tr><td id='esm' >"; echo"hi"; echo"</td>";    echo"</tr>";
echo"<tr><td id='esm2' >"; echo"hi2"; echo"</td>";    echo"</tr>";
echo"</table>";

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

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا