آشنایی با JavaScript
جاوا اسکریپت یک زبان برنامه نویسی است که قابلیت های زیادی را به صفحه شما اضافه میکند.
برای مثال میتوانید چندین رنگ مختلف را برای صفحه وب خود اختصاص دهید که تنها با انتخاب دکمه و بدون لود شدن دوباره صفحه، تغییرات اعمال شوند.
میتوان با فشردن یک المان، یک المان دیگر را لود کنیم. و یا یک نوشته را بدون لود شدن دوباره صفحه و فقط با فشردن بر روی آن نوشته تغییر دهیم.
برای درک بیشتر به مثال زیر دقت کنید.
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="lesson.css"> </head> <body> <div> <p>آموزش رایگان جاوا اسکریپت</p> </div> </body> </html>
@keyframes number1{
۰%{transform: scale(1);}
۵۰%{transform: scale(1.5);}
}
div{
background-color: blue;
height: 100px;
position: relative;
transition: all 1s;
}
p{
text-align: center;
padding: 20px;
background-color: aqua;
width:50%;
margin-left: 20%;
margin-top: 20px;
position: absolute;
border-radius: 20px;
animation-name: number1;
animation-duration: 10s;
animation-iteration-count: infinite;
}
برای شروع کار در آخر صفحه html خود از تگ <script></script> استفاده میکنیم.
در کد زیر document اشاره به کل داکیومنت دارد. پس از آن نقطه میبیند که بعد از نقطه میتوانید function های مورد نظر خود را انتخاب کنید. در اینجا از getElementById() استفاده میکنیم که المان با id مربوطه را میگیریم تا تغییرات ایجاد کنیم. و در اینجا نمیخواهیم css را تغییر دهیم به همین دلیل از .innerHTML استفاده کردیم.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
<div>
<p id="changeText">آموزش رایگان جاوا اسکریپت</p>
</div>
</body>
<script type="text/javascript">
document.getElementById('changeText').innerHTML = "WwW.farkiantech.com"
</script>
</html>
در اینجا فقط متن تغییر میکند و css همچنان اعمال میشود.
کار دیگری هم میتوانیم انجام دهیم که با click کردن بر روی متن آن را تغییر دهیم.
میتوانید یک تابع در بخش onclick تعریف کرده و تغییراتی که لازم داریم را در این تابع و در بخش script بنویسیم.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
<div>
<p id="changeText" onclick="change_text()">آموزش رایگان جاوا اسکریپت</p>
</div>
</body>
<script type="text/javascript">
function change_text(){
document.getElementById('changeText').innerHTML = "WwW.farkiantech.com"
}
</script>
</html>
حال بر روی متن کلیک کرده تا متن تغییر کند.
تا اینجای کار ما با JavaScript internal کار کردیم. میتوانیم آن را به external تغییر دهیم. یک فایل ایجاد کنید با پسوند .js و آن را در script خود فراخوانی کنید.
پس از آن function که در فایل html خود نوشتید را در فایل .js منتقل کنید.
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="lesson.css"> </head> <body> <div> <p id="changeText" onclick="change_text()">آموزش رایگان جاوا اسکریپت</p> </div> </body> <script type="text/javascript" src="test.js"></script> </html>
function change_text(){
document.getElementById('changeText').innerHTML = "WwW.farkiantech.com"
}
در این قسمت میبینید که همچنان تغییرات اعمال میشود.
برای دیدن آموزش های بیشتر جزوات JavaScript را دنبال کنید.
