HTML JavaScript

آموزش جاوا اسکریپت در HTML به زبان ساده

اساطیر زبان

اسکریپت (script) برنامه کوچکی است که همراه با HTML برای ساخت صفحات وب جذاب تر، پویاتر و واکنش گرا استفاده می شود؛ مانند باز شدن پنجره هشدار با کلیک بر روی ماوس. در حال حاضر مشهورترین زبان برنامه نویسی اسکریپتی مورد استفاده برای وب سایت ها جاوا اسکریپت می باشد.

مثال

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Date and Time example</h1>

<button type=”button”

onclick=”document.getElementById(‘demo’).innerHTML = Date()”>

Click me to display Date and Time.</button>

<p id=”demo”></p>

</body>

</html>

خروجی

word image 12

تگ <script> در HTML

تگ <script> در HTML برای مشخص کردن یک اسکریپت سمت کاربر استفاده می شود. جاوا اسکریپت می تواند داخلی یا خارجی باشد که حاوی دستورات اسکریپتینگ است، بنابراین می توانیم تگ <script> را در قسمت <body> یا <head> قرار دهیم.

 


برنامه نویسی شبکه معماری کامپیوتر هوش مصنوعی و تجاری

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


 

اسکریپت ها اغلب برای دستکاری تصاویر، اعتبارسنجی فرم و تغییر محتوا به صورت پویا مورد استفاده قرار می گیرند. جاوا اسکریپت برای انتخاب یک عنصر HTML از متد ()document.getElementById استفاده می کند.

مثال

<!DOCTYPE html>

<html>

<body>

<h2>Use JavaScript to Change Text</h2>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML = “Hello JavaTpoint”;

</script>

</body>

</html>

خروجی

word image 13

رویدادهای HTML با JavaScript

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

HTML دارای ویژگی های کنترل کننده رویداد می باشد که همراه با کد JavaScript کار می کنند و می توانند اقداماتی را روی رخداد یک رویداد انجام دهند.

ساختار

<element event = “JS code”>

مثال

<input type=”button” value=”Click” onclick=”alert(‘Hi, how are you’)”>

خروجی

word image 14

HTML دارای رویدادهایی مانند رویدادهای زیر می باشد:

  • رویدادهای فرم: تنظیم مجدد، ارسال و … .
  • رویدادهای انتخاب: فیلد متن، متن چند خطی و … .
  • رویداد تمرکز: فوکوس یا تمرکز، برداشتن فوکوس و … .
  • رویدادهای ماوس: انتخاب، حرکت ماوس، رها کردن ماوس، نگه داشتن ماوس، کلیک، دابل کلیک و …. .

در لیست زیر ویژگی های رویداد Window آورده شده است:

زمان رخداد نام منبع رویداد نام رویداد
وقتی که تمرکز از روی یک ورودی فرم برداشته می شود، کاربر از ورودی خارج می شود. Blur onBlur
هنگامی که کاربر روی یک عنصر فرم یا یک لینک کلیک می کند. click onClick
هنگامی که کاربر یک فرم را به سرور ارسال می کند. submit onSubmit
هنگامی که صفحه در مرورگر بارگذاری می شود. Load onLoad
هنگامی که کاربر روی یک قسمت ورودی تمرکز می کند. focus onFocus
هنگامی که کاربر یک ورودی فرم را انتخاب می کند. select onSelect

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

جاوا اسکریپت چه کارهای می تواند انجام دهد:

۱) جاوا اسکریپت می تواند محتوای عنصر را تغییر دهد.

مثال

<!DOCTYPE html>

<html>

<body>

<p>JavaScript can change the content of an HTML element:</p>

<button type=”button” onclick=”myFunction()”>Click Me!</button>

<p id=”demo”></p>

<script>

function myFunction() {

    document.getElementById(“demo”).innerHTML = “Hello JavaTpoint!”;

}

</script>

</body>

</html>

۲) جاوا اسکریپت می تواند سبک عنصر را تغییر دهد.

<!DOCTYPE html>

<html>

<body>

<p id=”demo”>JavaScript can change the style of an HTML element.</p>

<script>

function myFunction() {

    document.getElementById(“demo”).style.fontSize = “۲۵px”;

    document.getElementById(“demo”).style.color = “brown”;

    document.getElementById(“demo”).style.backgroundColor = “lightgreen”;

}

</script>

<button type=”button” onclick=”myFunction()”>Click Me!</button>

</body>

</html>

۳) جاوا اسکریپت می تواند صفات عنصر را تغییر دهد.

<!DOCTYPE html>

<html>

<body>

<script>

function light(sw) {

    var pic;

    if (sw == ۰) {

        pic = “pic_lightoff.png”

    } else {

        pic = “pic_lighton.png”

    }

    document.getElementById(‘myImage’).src = pic;

}

</script>

<img id=”myImage” src=”pic_lightoff.png” width=”100″ height=”180″>

<p>

<button type=”button” onclick=”light(1)”>Light On</button>

<button type=”button” onclick=”light(0)”>Light Off</button>

</p>

</body>

</html>

استفاده از اسکریپت خارجی

فرض کنید، شما چندین فایل HTML مختلف با یک اسکریپت مشابه دارید، بنابراین می توانیم کد جاوا اسکریپت خود را در یک فایل جداگانه قرار داده و آن را در فایل HTML فراخوانی کنیم. فایل های خارجی جاوا اسکریپت را با پسوند js. ذخیره می شوند.

نکته: در فایل جاوا اسکریپت خارجی، تگ <script> را استفاده نکنید و مسیر فایل جاوا اسکریپت را در فایل HTML قرار دهید.

ساختار:

<script type=”text/javascript” src=”URL “></script>

مثال

<!DOCTYPE html>

<html>

   <head>

    <script type=”text/javascript” src=”external.js”></script>

    </head>

     <body>

      <h2>External JavaScript Example</h2>

       <form onsubmit=”fun()”>

         <label>Enter your name:</label><br>

      <input type=”text” name=”uname” id=”frm1″><br>

       <label>Enter your Email-address:</label><br>

      <input type=”email” name=”email”><br>

      <input type=”submit”>

  </form>

 </body>

 </html>

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

function fun() {

       var x = document.getElementById(“frm1”).value;

        alert(“Hi”+” “+x+ “you have successfully submitted the details”);

    }

خروجی

HTML JavaScript

تگ <noscript> درHTML

تگ < <noscript، اسکریپت را در مرورگر غیرفعال می کند. متن نوشته شده در جفت تگ <noscript> </noscript> در مرورگر نمایش داده نمی شود.

مثال

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;

</script>

<noscript>This text is not visible in the browser.</noscript>

</body>

</html>

تفاوت پک های حرفه ای ما با آموزشهای رایگان: بطور خلاصه از زمین تا آسمان! 1-پکها، جدیدترین نسخه نرم افزارها را آموزش می دهند با قابلیت های بسیار بیشتر. 2-پکها توسط متخصص آن نرم افزار، به صورت کاملا پروژه محور و با حل چالش هایی که در مسیر کار عملی و حرفه ای با آن روبرو می شوید تهیه شده اند و بعد از استفاده، کاملا برای بازار کار آماده اید! 3- متد این پکها کاملا کار شده و تا ماهها، در ذهن تان ماندگارند و یادگیری بسیار سریعتر و کاملتری خواهید داشت. آموزشهای رایگان فقط دستورات نرم افزارها را (آنهم ناقص) بیان می کنند و تازه برای ورود به بازار باید ماهها تجربه عملی هم کسب کنید !!

turned_in,

چرب زبان

با این اپلیکیشن ساده، هر زبانی رو فقط با 5 دقیقه در روز، توی 80 روز مثل بلبل حرف بزن! بهترین متد روز، تقویت حافظه، آموزش تصویری. یادگیری زبان کلید یادگیری هر مهارتی در قرن 21 !


حتما بخوانید!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست