افرا گرافیک

گروه مشاوران طراحی افرا در زمینه انواع امور طراحی ، چاپ، طراحی سایت و مالتی مدیا فعالیت می کند. 66120694 و 66120698 و 09122246022

افرا گرافیک

گروه مشاوران طراحی افرا در زمینه انواع امور طراحی ، چاپ، طراحی سایت و مالتی مدیا فعالیت می کند. 66120694 و 66120698 و 09122246022

محل قرار گیری کد اسکریپت|آموزش جاوا اسکریپت|آموزش وب سایت

محل قرار گیری کد اسکریپت                                                                قسمت دوم

تگ <script> :

در html  کد های جاوا اسکریپت بین تگ <script> قرار داده شوند

مثال :

<script>
   document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

توابع (Functions) و رویدادها (Events) در جاوا اسکریپت :

  • یک تابع (Functions) در جاوا اسکریپت یک بلوک از کد جاوا اسکریپت است که می تواند فراخوانی شود
  • برای مثال ، یک تابع زمانی که یک رویداد رخ می دهد اجرا می شود، مانند زمانی که کاربر یک دکمه را کلیک می کند
  •  در فصل های بعدی بیشتر به توابع و رویداد ها می پردازیم
 
شما می توانید هر تعداد از اسکریپت ها در یک سند HTML قرار دهید

اسکریپت ها می توانند در بخش <body> یا <head> یک صفحه html یا هر دو قرار گیرد

جاوا اسکریپت در بخش <head>  :

اسکریپت هایی که می خواهیم در هنگام بروز یک رویداد در صفحه وب سایت ، مثل کلیک بر روی یک دکمه خاص و ... اجرا شوند . به عبارت دیگر می خواهیم اجرای آنها کنترل شده باشد . در این حالت دستورات اسکریپت را در قسمت < head > صفحه و یا در یک فایل خارجی تعریف کرد .

  • کد زیر زمانی فراخوانی می شود که برروی دکمه Try it کلیک شود

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

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

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

 

جاوا اسکریپت در بخش <body>  :

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

<!DOCTYPE html>
<html>
<body> 

<h1>My Web Page</h1>

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

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

 

فایل جاوا اسکریپت خارجی :

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

 

 

مثال :

myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}

 

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

 

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

 

پایان بخش دوم

منابع : http://www.w3schools.com/js/js_whereto.asp

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

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

66912056  66562677 66120698   09122246022

http://afragraphic.ir

info@afragraphic.ir

https://telegram.me/afragraphic_ir

http://instagram.com/afragraphic1390

http://facebook.com/AfraGraphic

http://plus.google.com/104048725792771050756

http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ

http://twitter.com/afragraphic

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

http://aparat.com/afragraphic

http://Telegram.me/afragraphic_ir

http://cloob.com/name/afragraphic

 

محل قرار گیری کد اسکریپت آموزش ج
افرا گرافیک چهارشنبه 19 خرداد 1395 ساعت 15:53
0 نظر

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

آموزش 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

 

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

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

 

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

 

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

 

66912056  66562677 66120698   09122246022

 

http://afragraphic.ir

 

info@afragraphic.ir

 

https://telegram.me/afragraphic_ir

 

http://instagram.com/afragraphic1390

 

http://facebook.com/AfraGraphic

 

http://plus.google.com/104048725792771050756

 

http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ

 

http://twitter.com/afragraphic

 

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

 

http://aparat.com/afragraphic

 

http://Telegram.me/afragraphic_ir

 

http://cloob.com/name/afragraphic

 

 

 

JavaScriptآموزش طراحی سایت جاوااسکریپت بهینه سازی سایت
افرا گرافیک چهارشنبه 19 خرداد 1395 ساعت 15:05
0 نظر