در جلسه پانزدهم مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش جاوا اسکریپت در HTML از وب سایت آموزش برنامه نویسی سورس باران.
آموزش جاوا اسکریپت در HTML
جاوا اسکریپت صفحات HTML را پویاتر و تعاملیتر میکند. با استفاده از جاوا اسکرییپت در صفحات HTML، کاربران میتوانند در بخشهایی از صفحه مشارکت کرده یا دستورالعملهایی را اجرا کنند.
JavaScript makes HTML pages more dynamic and interactive.
آموزش تگ <script> در HTML
تگ <script> برای تعریف جاوا اسکریپت در سمت کلاینت به کار برده میشود. عنصر <script> یا حاوی دستورات (statement) جاوا اسکریپت است یا از طریق خصوصیت src به یک فایل خارجی اسکریپت اشاره میکند. استفادههای رایج از جاوا اسکریپت شامل تغییرات عکس، تایید اعتبار فرم و تغییرات داینامیک محتوا است. جاوا اسکریپت اغلب برای انتخاب یک عنصر HTML از روش document.getElementById(id) استفاده میکند. مثال جاوا اسکریپتی زیر عبارت “Hello JavaScript!” با id=”demo” در یک عنصر HTML نوشته میشود:
The <script>
tag is used to define a client-side script (JavaScript).
The <script>
element either contains script statements, or it points to an external script file through the src
attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
To select an HTML element, JavaScript most often uses the document.getElementById()
method.
This JavaScript example writes “Hello JavaScript!” into an HTML element with id=”demo”:
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>پیشنمایش
مثال هایی از استفاده جاوا اسکریپت در Html
در ادامه چند نمونه از کارهایی که میتوان با جاوا اسکریپت انجام داد را مشاهده میکنید. جاوا اسکریپت میتواند محتوای HTML را تغییر دهد :
document.getElementById("demo").innerHTML = "Hello JavaScript!";پیشنمایش
جاوا اسکریپت میتواند استایلهای HTML را تغییر دهد:
document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow";پیشنمایش
جاوا اسکریپت میتواند خصوصیتهای HTML را تغییر دهد:
document.getElementById("image").src = "picture.gif";پیشنمایش
آموزش تگ <noscript> در HTML
تگ <noscript> برای ایجاد محتوای جایگزین برای کاربرانی به کار میرود که اسکریپتها در مرورگرشان غیرفعال بوده و یا از مرورگری استفاده می کنند که از اسکریپت های سمت کاربر (کلاینت) پشتیبانی نمیکند:
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>Sorry, your browser does not support JavaScript!</noscript>پیشنمایش
آموزش استفاده از جاوا اسکریپت در قسمت Head یک صفحه وب
در مثال زیر مشاهده خواهید کرد که دستورات جاوا اسکریپت میتوانند در قسمت هد یک صفحه ی HTML قرار بگیرند.
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("test").innerHTML = "sourcebaran"; } </script> </head> <body> <p id="test"></p> <button type="button" onclick="myFunction()">اینجا کلیک کن</button> </body> </html>
آموزش استفاده از جاوا اسکریپت در قسمت Body یک صفحه وب
در مثال زیر مشاهده خواهید کرد که دستورات جاوا اسکریپت میتوانند در قسمت Body یک صفحه ی HTML قرار بگیرند.
<!DOCTYPE html> <html> <body> <p id="test"></p> <button type="button" onclick="myFunction()">اینجا کلیک کن</button> <script> function myFunction() { document.getElementById("test").innerHTML = "sourcebaran"; } </script> </body> </html>
آموزش فراخوانی فایل جاوا اسکریپت خارجی در HTML
در مثال زیر نحوه چگونگی فراخوانی فایل خارجی جاوا اسکریپت را در قسمت Head یک صفحه HTML برای طراحی وب سایت مشاهده خواهید نمود.
<!DOCTYPE html> <html> <head> <script src="test.js"></script> </head> <body> <p id="test"></p> <button type="button" onclick="myFunction()">اینجا کلیک کن</button> </body> </html>
در مثال زیر نحوه چگونگی فراخوانی فایل خارجی جاوا اسکریپت را در قسمت Body یک صفحه HTML مشاهده خواهید نمود.
2 3 4 5 6 7 8 9 <body> <p id="test"></p> <button type="button" onclick="myFunction()">اینجا کلیک کن</button> <script src="test.js"></script> </body>
لیست جلسات قبل آموزش Html
- آموزش اصول اولیه و عناصر HTML
- آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
- آموزش کار با پاراگراف و استایل در Html
- آموزش کار با قالب بندی متن در Html
- آموزش کار با کامنت در HTML
- آموزش کار با کامنت در HTML
- آموزش کار با رنگ ها در HTML
- آموزش کار با تصاویر در HTML
- آموزش کار با لینک در HTML
- آموزش کار با جدول در HTML
- آموزش کار با لیست ها در HTML
- آموزش کار با عناصر Block و Inline در HTML
- آموزش کار با عنصر Class در HTML
- آموزش Html؛ آموزش iframe در HTML
- آموزش Html؛ آموزش جاوا اسکریپت در HTML
- آموزش کار با عنصر Head در HTML
- آموزش Layout در HTML
- آموزش طراحی سایت ریسپانسیو در HTML
- آموزش عناصر کد کامپیوتر در HTML
- آموزش موجودیت (Entities) در HTML
- آموزش نمادها (Symbols) در HTML
- آموزش کار با Character (کاراکترهای رزرو شده) در HTML
- آموزش رمزگذاری URL در HTML
- آموزش کامل کار با فرم ها در HTML
- آموزش انواع ورودی (Input) در HTML
- آموزش خصوصیات ورودی در HTML
حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی
حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۱۵ مرداد ۱۳۹۸
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس