Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

مقدمه-آموزش ساده جاوا اسکریپت|آموزش جاوا

آموزش JavaScript                                                                                     بخش 1

مقدمه :

این آموزش درباره چگونگی کار کردن جاوا اسکریپت در طراحی وب سایت با html و css است

پیشنهاد نویسنده :

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

 

جاوا اسکریپت زبان برنامه نویسی HTML و طراحی وب است

جاوا اسکریپت محبوب ترین زبان برنامه نویسی در جهان است

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

 

.جاوا اسکریپت یکی از 3 زبانی است که همه توسعه دهندگان وب باید یاد بگیرند

    1.  HTML برای تعریف محتوای صفحات وب
    2.  CSS برای مشخص کردن طرح صفحات وب
    3.  جاوا اسکریپت برای مشخص کردن رفتار صفحات وب
 

 

1. جاوا اسکریپت می تواند محتوای HTML را تغییر دهد :
 
یکی از روش های دسترسی به المان های داخل html گرفتن id با استفاده از متد () getElementById می باشد.

این مثال از این روش برای پیدا کردن یک عنصر html با "id="demo  استفاده کرده و محتوای درون عنصر را به Hello JavaScript تغییر می دهد.

document.getElementById("demo").innerHTML = "Hello JavaScript";

مثال :

 

<body>

    <form id="form1" runat="server">

         <h1>What Can JavaScript Do?</h1>

         <p id="demo">JavaScript can change HTML content.</p>

         <button type="button"

            onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">

            Click Me!</button>

    </form>

</body>
 
 
2. جاوا اسکریپت می تواند ویژگی های HTML را تغییر دهید
 
این مثال با استفاده از جاوا اسکریپت ، خصوصیت src از تگ <img > یک تصویر HTML  را تغییر می دهد .
 

<body>

    <form id="form1" runat="server">

        <img src="pic_bulboff.gif" onclick="changeimg()" width="100" height="150"  id="myImage" />

        <script>

            function changeimg() {

                var image = document.getElementById('myImage');

                if (image.src.match("bulbon")) {

                    image.src = "pic_bulboff.gif";

                }

                else { image.src = "pic_bulbon.gif" }

            }

        </script>

    </form>

</body>
 
اجرا :

6360021531669198831.png

 قبل از کلیک

6360021533038277142.png

بعد از کلیک 

                                                                                                         

 
3. جاوا اسکریپت می تواند سبک ها یا استایل های (CSS) ، HTML را تغییر دهید 

در مثا ل زیر با استفاده از جاوا اسکریپت ،سبک یک عنصر  html را تغییر می دهیم

document.getElementById("demo").style.fontSize = "25px";

مثال :

<body>

    <form id="form1" runat="server">

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

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

        <script>

            function myFunction()

            {

                var x = document.getElementById('demo');

                x.style.fontSize = "25px";

                x.style.color = "red";

            }

        </script>

       

    </form>

</body>

 

4. جاوا اسکریپت می تواند داده ها را  اعتبارسنجی (Validate ) کند

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

مثال :

<body>

    <form id="form1" runat="server">

        <input id="numb" />

        <button type="button" onclick="myFunction()">Submit</button>

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

        <script>

            function myFunction() {

                var x, text;

                x = document.getElementById('numb').value;

                if(isNaN(x) || x<1 || x>10)

                {

                    text = "Input not valid";

                }

                else

                {

                    text = "Input OK";

                }

                document.getElementById('demo').innerHTML = text;

            }

        </script>

    </form>

</body>

اجرا :

 

 

                              6360021446982755043.png6360021447749598904.png

 

پایان قسمت اول

منابع : https://www.w3schools.com/js/default.asp

 

کانون تبلیغاتی افراگرافیک

 

 آدرس: تهران-میدان انقلاب-خ آزادی-خ اسکندری-نبش کلهر-دفتر افرا گرافیک

 

66912056  66562677 66120698   09122246022

 

https://afragraphic.ir

 

info@afragraphic.ir

 

https://telegram.me/afragraphic_ir

 

https://instagram.com/afragraphic1390

 

https://facebook.com/AfraGraphic

 

https://plus.google.com/104048725792771050756

 

https://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ

 

https://twitter.com/afragraphic

 

https://ir.linkedin.com/in/afragraphic

 

https://aparat.com/afragraphic

 

https://Telegram.me/afragraphic_ir

 

https://cloob.com/name/afragraphic

 

 

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.