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

saalek110 · Apr 7, 2023

کد جاوا اسکریپت را می توان در بدنه سایت هم گذاشت

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>

saalek110 · Apr 7, 2023

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

اینو گذاشته توی یک فایل:

JavaScript:

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

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

بعد باید بگیم از چه فایلی استفاده می کنیم:

JavaScript:

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

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

فواید گذاشتن کد جاوا اسکریپت در فایل خارجی:

External JavaScript Advantages

Placing scripts in external files has some advantages:

It separates HTML and code
It makes HTML and JavaScript easier to read and maintain
Cached JavaScript files can speed up page loads

میگه خوبه کدهای html و جاوا اسکریپت جدا باشه
باعث خوانایی بهتر کدهای html و اوا سکریپت میشه

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

saalek110 · Apr 7, 2023

مشکل کچ شدن فایل های css و جاوا اسکریپت

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

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

البته اینها راههایی بود که به ذهن من رسید،
می تونید در گوگل سرچ کنید ، نظر دیگران را بخوانید. من هم اگر دیدم اینجا میگم.

saalek110 · Apr 7, 2023

این روش دادن نام فایل جاوا اسکریپت خارجی است

JavaScript:

<script src="myScript1.js"></script>

کد:

JavaScript:

<script src="https://www.w3schools.com/js/myScript.js"></script>

خوب اگر در یک پوشه کنار فایل باشه اول اسم پوشه را بیاورید و سپس ممیز بزارید و بعد اسم فایل.

saalek110 · Apr 7, 2023

چهار روش خروجی دادن:

Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().

در پستهای بعد مثال می زنیم.

saalek110 · Apr 7, 2023

JavaScript:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

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

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</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>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

نتیجه اجرا
متن ...
۱۱

saalek110 · Apr 7, 2023

JavaScript:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</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

saalek110 · Apr 7, 2023

JavaScript:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</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>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</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>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

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

saalek110 · Apr 7, 2023

JavaScript:

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Print this page</button>

</body>
</html>

مربوط به پرینتر است.

saalek110 · Apr 7, 2023

خوب این قسمت تمام شد.

saalek110 · Apr 7, 2023

JavaScript:

let x, y, z;    // Statement 1
x = 5;          // Statement 2
y = 6;          // Statement 3
z = x + y;      // Statement 4

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

JavaScript:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer.</p>

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

<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>

</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:

const PI = 3.14159265359;

saalek110 · Apr 7, 2023

تعریف تابع

JavaScript:

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

تابع فوق دو ورودی دارد که درون تابع اون دو تا را در هم ضرب کرده و پس می فرستد. با مثالهای بعدی می فهمید یعنی چه.

saalek110 · Apr 7, 2023

JavaScript:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation and returns the result:</p>

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

<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
  return a * b;
}
</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>
<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
</script>

</body>
</html>

محاسبات این تابع کمی پیچیده تره
و دیگه متغیر هم نساختیم ، همین جوری تابع را چاپ کردیم.

saalek110 · Apr 7, 2023

دامنه متغیرها

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>

یک متغیر درون تابع تعریف شده. اون یک متغیر محلی است که در بیرون تابع معنایی ندارد.

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>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

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

</body>
</html>