
مفهوم اسکریپت در HTML - کاربرد جاوا اسکریپت در صفحات وب
قبل از هر چیز بهتر است با مفهوم اسکریپت در برنامه نویسی آشنا شوید ؛ یک اسکریپت قطعه ی کوچکی از برنامه است که می تواند به وب سایت شما اضافه شود . به عنوان مثال یک اسکریپت می تواند یک هشدار پاپ آپ باشد ، یا یک منوی رو به پایین ایجاد کند و غیره. این اسکریپت توسط javascript یا VBScript نوشته می شود.
شما می توانید با استفاده از هر زبان اسکریپتی، کارکردهای متنوع کوچکی به نام مدیریت رویداد (event handlers) بنویسید و سپس آن عملکرد ها را با استفاده از ویژگی های HTML اجرا کنید.
حالا نوبت به زبان جاوا اسکریپت رسید ؛ زبان جاوا اسکریپت چیست؟ اگر اطلاعاتی نسبی راجع به دنیای وب داشته باشید حتما بارها نام جاوا اسکریپت را شنیده اید ، خصوصا در توصیف حرکات عجیب و غریب برخی از سایت ها و وبلاگ ها ( مثلا لرزش صفحه وبلاگ ، تصویر دنباله روی نشانگر موس و...)
جاوا اسکریپت زبانی است که در صفحات html کاربرد دارد و قابلیت های بسیاری از قبیل : افزایش کیفیت طراحی صفحات , کنترل صفحات ، کنترل browser بازدید کننده ، ساخت و استفاده cookie ها و بسیاری چیزهای دیگر.
این روزها javascript و چارچوب های متناظر با آن توسط بسیاری از توسعه دهندگان وب استفاده می شوند و مورد استقبال چشمگیری واقع شده اند. متاسفانه VBScript توسط برخی مرورگرها پشتیبانی نمی شود که این باعث افزایش برتری استفاده از جاوا اسکریپت شده است.
برای شروع برنامه نویسی به زبان جاوا اسکریپت ، علاوه بر دارا بودن دید برنامه نویسی ، تسلط نسبی بر زبان HTML نیز لازم است. زبان برنامه نویسی جاوا اسکریپت زبانی شی گراست و سینتکس آن شباهت بسیاری با زبان C دارد.
شما می توانید کد javascript را در یک فایل مجزا نگهداری کرده و سپس هر زمان که لازم بود آن را وارد کنید، یا می توانید قابلیت را در داخل خود داکیومنت HTML تعریف کنید.
اجازه بدهید هر دو مورد را یکی یکی با مثال های مناسب بررسی کنیم.
معرفی جاوا اسکریپت خارجی (External JavaScript) :
اگر قصد دارید قابلیتی را تعریف کنید که در انواع داکیومنت های HTML استفاده می شود، بهتر است آن قابلیت را به صورت جاوا اسکریپت خارجی و به صورت یک فایل مجزای جاوا اسکریپت حفظ کرده و آن فایل را وارد داکیومنت های HTML خود کنید. یک فایل جاوا اسکریپت دارای ضمیمه هایی مانند js می باشد که با استفاده از تگ <script> وارد فایل های HTML می شود.
تصور کنید که با استفاده از جاوا اسکریپت در script.js یک عملکرد کوچک را تعریف می کنیم که دارای کد زیر می باشد :
function Hello() {
alert("Hello, World");
}
اکنون می خواهیم از فایل جاوا اسکریپت خارجی (External JavaScript) بالا در داکیومنت HTML خود استفاده کنیم، مانند زیر :
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>
این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن بر روی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.
جاوا اسکریپت درونی (Internal javaScript)
شما می توانید کد جاوا اسکریپت را مستقیما روی داکیومنت HTML خود بنویسید. معمولا کد اسکریپت را با استفاده از تگ <script> در سربرگ (header) داکیومنت نگهداری می کنیم در غیر این صورت هیچ محدودیتی وجود نداشته و می توانید کد خود را در هر جایی در داکیومنت به جز داخل تگ <script> نگه دارید.
مثال :
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>
برای دیدن خروجی روی دکمه ای ای که حاصل اجرای کد بالا است کلیک کنید.
مدیر رویداد ها (Event Handlers) :
قبل از آن که با مفهوم مدیریت رویداد ها آشنا شویم ، بهتر است مفهوم event را در زبان جاوا اسکریپت درک کنیم ؛ به طور ساده رویداد (event) در برنامه نویسی جاوا اسکریپت به معنی اتفاقی در یک صفحه وب است که می تواند عامل آن، کاربر یا به فرض بارگذاری کامل یک صفحه باشد، بعد از بروز این اتفاق (رویداد) ، مفسر جاوا اسکریپت مرورگر، آن را شناسایی کرده و متناسب با تابع تعریف شده، آن را اجرا می کند.
مدیریت رویداد ها عملکرد های تعریف شده ی ساده ای می باشند که می توانند در مقابل هر یک از عملکرد های ماوس یا صفحه کلید فرا خوانده شوند. شما می توانید عملکرد خود را در یک مدیر رویداد تعریف کنید که می تواند یک خط تا 1000 خط کد باشد.
در زیر مثالی را می بینید که چگونگی نگارش یک مدیریت رویداد را نشان می دهد. اجازه بدهید یک تیتر ساده ی ()EventHandler را در تیتر داکیومنت بنویسیم. هر زمان که کاربر ماوس را روی یک پاراگراف بیاورد، این عملگر را فرا خواهیم خواند.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>
مخفی کردن اسکریپت ها از مرورگر های قدیمی:
گرچه بیشتر مرورگر ها این روز ها جاوا اسکریپت را پشتیبانی می کنند، اما هنوز مرورگر های قدیمی تری هستند که این کار را نمی کنند. اگر مرورگری جاوا اسکریپت را پشتیبانی نکند، به جای اجرای اسکریپت ، کدی را به کاربر نمایش می دهد. برای جلوگیری از این مسئله می توانید کامنت های HTML را در اطراف جاوا اسکریپت قرار دهید، همانطور که در زیر می بینید.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
تگ < noscript> :
اگر مرورگر کاربری جاوا اسکریپت را پشتیبانی نکند یا کاربری گزینه ی script مرورگر خود را غیر فعال کرده باشد میتوان به جای آن یک سری اطلاعات جایگزین را برای وی به نمایش گذاشت . شما می توانید نمایش آن اطلاعات جایگزین را با استفاده از تگ < noscript> انجام دهید.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>
زبان پیش فرض اسکریپت (Default Scripting Language) :
ممکن است وضعیتی پیش بیاید که شما مجبور باشید از چندین اسکریپت در تگ های اسکریپت استفاده کنید. در این حالت میتوانید زبان اسکریپت پیش فرض را برای همه ی تگ های اسکریپت خود تعیین کنید.
مثال :
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانهگذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشنها محسوب میشود. در واقع HTML را عنصر کلیدی صفحات وب می…این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …