افرا گرافیک

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

 
توابع جاوا اسکریپت | آموزش جاوا اسکریپت | برنامه نویسی سایت
نویسنده : افرا گرافیک - ساعت ۸:٤٦ ‎ب.ظ روز ۱۳٩٥/۳/٢٥
 

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

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

توابع جاوا اسکریپت :

  • همانطور که قبلا گفته شد برای یادگیری زبان جاوا اسکریپت باید با زبان html وهمچنین تگ script آشنایی پیدا کرده باشید زیرا همه ی دستورات اسکریپت درون تگ باز و بسته script تعریف می شود و به عبارتی محدوده کدهای اسکریپت را تعیین می کند.
  • یک تابع جاوا اسکریپت زمانی اجرا می شود که چیزی آن را فراخوانی کند یا صدا زده باشد

مثال :

<html>

<body>

    <p>This example calls a function which performs a calculation, and returns the           result:</p>

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

    <script>

        function myFunction(a, b) {

        return a * b;

      }

      document.getElementById("demo").innerHTML = myFunction(4, 3);

    </script>

</body>

</html>

خروجی : 12

قواعد دستوری توابع جاوا اسکریپت :

  • یک تابع جاوا اسکریپت است  با کلمه کلیدی function به همراه یک پرانتز باز و بسته در مقابل نام آن تعریف شده است
  • نام تابع می تواند شامل حروف، ارقام ، اهمیت ، و علائم دلار ( قوانین همان متغیر) .
  • پرانتز می تواند شامل یک یا چند پارامتر باشد که با کاما از هم جدا شده اند : (parameter1, parameter2, ...)
  •  کدی که توسط تابع اجرامی شود داخل کروشه قرار میگیرد

 

function name(parameter1, parameter2, parameter3) {
    code to be executed
}

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

 

فراخوانی توابع جاوا اسکریپت :

   کد درون تابع زمانی که تابع اعلان (تعریف) می شود، بلافاصله اجرا نمی گردد، بلکه تنها زمانی اجرا می گردد که تابع فراخوانی   (invoke) شود مانند :

  •    زمانی که یک رویداد رخ می دهد ( زمانی که کاربر یک دکمه را کلیک می کند )
  •    زمانی که درون کد های جاوا اسکریپت صدا زده می شود
  •    به صورت خودکار ( خود استناد )

مقدار بازگشتی تابع :

وقتی در تابع به دستور return  می رسیم و مقداری رو برگشت میده ، هر دستوری بعد از اون قرار بگیره اجرا نخواهد شد و به نوعی میشه گفت برنامه خاتمه پیدا می کنه.

مثال :

 

var x = myFunction(4, 3);      

function myFunction(a, b) {
    return a * b;    
}

خروجی  : 12

 

 

 

چرا توابع ؟

شما می توانید یک کد را یک بار تعریف کرده و چندین بار استفاده کنید

شما می توانید همان کد را چند بار با استدلال های مختلف به تولید نتایج مختلف استفاده کنید.

 

پایان قسمت هفتم

منابع : http://www.w3schools.com/js/js_functions.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


 
 
اپراتور typeof | آموزش جاوا اسکریپت | برنامه نویسی
نویسنده : افرا گرافیک - ساعت ۸:٤٥ ‎ب.ظ روز ۱۳٩٥/۳/٢٥
 

آموزش جاوا اسکریپت                                                              قسمت ششم

اپراتور typeof :

در این بخش از آموزشهای طراحی سایت به یک اپراتور ویژه در جاوااسکریپت میپردازیم.

در جاوا اسکریپت برای مشخص کردن نوع یک متغیر می توانید از اپراتور typeof استفاده کنید

 

 // Returns string

typeof "John" 

// Returns number

typeof 3.14 

// Returns boolean

typeof false

// Returns object

typeof [1,2,3,4]

// Returns object

typeof {name:'John', age:34}

مثال :

 

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

<script>

     document.getElementById("demo").innerHTML =

     typeof "john" + "<br>" +

    typeof 3.14 + "<br>" +

    typeof false + "<br>" +

    typeof [1,2,3,4] + "<br>" +

    typeof {name:'john', age:34};

</script>

خروجی :

string
number
boolean
object
object

آرایه ها در جاوا اسکریپت یک نوع خاص از شی هستند بنابراین اپراتور typeof نوع [typeof [1,2,3,4 را شی بر می گرداند

 

داده تعریف نشده (undefined ) :

در جاوا اسکریپت متغیر بدون مقدار دارای مقدار تعریف نشده است. بنابراین اپراتور typeof برگشتی undefined خواهد داشت.

 // Value is undefined, type is undefined

 var person;                  

هر متغیر را می توان با تنظیم مقدار تعریف نشده خالی کرد نوع آن نیز تعریف نشده می باشد

// Value is undefined, type is undefined

 

person = undefined;

 

مقادیر تهی  :

یک مقدار تهی با نوع داده تعریف نشده متفاوت است. هر متغیر رشته ای هم دارای نوع داده و هم مقدار است

// The value is "", the typeof is string

var car = ""; 

 

مثال :

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

<script>

   var car = "";

   document.getElementById("demo").innerHTML =

   "The value is: " +

   car + "<br>" +

   "The type is:" + typeof car;

</script>

خروجی :

The value is: 
The type is:string

Null (پوچ) :

 

  • متاسفانه در جاوا اسکریپت نوع داده null  یک شی است.
  • می توان این مسئله را یک bug در برنامه نویسی جاوا اسکریپت دانست.
  • در جاوا اسکریپت null برابر «هیچی» است یعنی چیزی است که وجود ندارد.

 

 // Value is null, but type is still an object

var person = null;

 

تفاوت بین تعریف نشده و Null :
به مثال زیر توجه کنید :
 

// undefined

typeof undefined  

// object

typeof null

 // false

null === undefined 

// true

null == undefined  

 

پایان قسمت ششم

منابع : http://www.w3schools.com/js/js_datatypes.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

 


 
 
داده در جاوا اسکریپت | آموزش جاوا اسکریپت | طراحی سایت
نویسنده : افرا گرافیک - ساعت ۸:٠٩ ‎ب.ظ روز ۱۳٩٥/۳/٢٤
 

آموزش جاوا اسکریپت                                                                                 قسمت پنجم

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

در این بخش از آموزشهای طراحی سایت به چند اپراتور ویژه در جاوااسکریپت میپردازیم.

StringNumberBooleanArrayObject

متغیرهای جاوا اسکریپت می توانند در انواع داده های اعداد، رشته ها ، آرایه ها، اشیاء و ... نگه داری شوند 
 

اعداد

var length = 16;

رشته

var lastName = "Johnson";

آرایه

var cars = ["Saab", "Volvo", "BMW"];

اشیاء

var x = {firstName:"John", lastName:"Doe"};

 

مفهوم انواع داده :
  •  در برنامه نویسی، انواع داده یک مفهوم مهم است
  • برای اینکه عملگر ها بتوانند بر روی متغیر ها عمل کنند نیاز است نوع آن ها مشخص شود
  • یک کامپیوتر عبارت زیر را نمی تواند درک کند :
var x = 16 + "Volvo";

 

این عبارت چه مفهمومی دارد؟آیا با یک خطا مواجه می شویم یا این عبارت دارای یک نتیجه می باشد؟
و اما راه حل جاوا اسکریپت برای اینکه کامپیوتر عبارت بالا رو درک کنه:

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

مثال :

<p id="demo"></p>
<script>
      var x = 16 + "Volvo";
     document.getElementById("demo").innerHTML = x;
</script>

خروجی : 16Volvo

 

 

 

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

به مثال های زیر توجه کنید :

مثال 1 :

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

   <script>

   var x = 16 + 4 + "Volvo ";

   document.getElementById("demo").innerHTML = x;

</script>

ابتدا از سمت چپ به راست 16 + 4 به صورت نوع عددی با هم جمع میشوند وسپس حاصل آن ها به صورت نوع رشته ای به Volvo  متصل می شود

خروجی : 20Volvo

مثال 2 :

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

<script>

    var x = 16 + 4 + "Volvo";

    document.getElementById("demo").innerHTML = x;

</script>

در مثال دوم عبارت با یک رشته شروع شده و جاوا اسکریپت بقیه عبارت را هرچه که باشد رشته در نظر میگیرد و دیگر اعداد را با یکدیگر تجمیع نمی کند.

خروجی : Volvo164

جاوا اسکریپت انواع پویا : 
انواع داده در جاوا اسکریپت پویا می بشاند ، این بدان مفهمو است که یک متغیر می تواند برای انواع مختلف 
داده مورد استفاده قرار گیرد

 

var x;               // نوع داده تعریف نشده
var x = 5;           // نوع داده عددی
var x = "John";      // نوع داده رشته ای

                                                         

رشته ها در جاوا اسکریپت:

  • یک رشته یا یک کلمه  یک سری از کاراکتر های پشت سر هم می باشد
  • رشته ها بین دو علامت کوتیشن " "  قرار میگیرند.شما می توانید از تک کوتیشن   ‘ ’ یا جفت کوتیشن استفاده کنید

var carName = "Volvo XC60";   // استفاده از دابل کوتیشن
var carName = 'Volvo XC60';   // استفاده از تک کوتیشن

شما میتوانید از علامت کوتیشن در بین رشته حروف خود نیز استفاده کنید با این شرط که اگر بین رشته از تک کوتیشن استفاده می کنید تمام رشته را بین جفت کوتیشن قرار دهید یا اگر بین رشته از جفت کوتیشن استفاده میکنید تمام رشته را بین تک کوتیشن قرار دهید

var answer = "He is called 'Johnny'";    // استفاده از کوتیشین درون جفت کوتیشن

 

اعداد جاوا اسکریپت :
                                                            
  • در جاوا اسکریپت فقط یک نوع داده عددی وجود دارد.
  • اعداد میتواند اعشاری یا صحیح باشند.

var x1 = 34.00;     // نوع داده اعشاری
var x2 = 34;        // نوع داده صحیح

  • اعداد خیلی بزرگ یا اعداد خیلی کوچک را میتوان با نماد e نوشت

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

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

نوع داده بولین فقط دو مقدار True  و  False  را دارا می باشد.

var x = true;
var y = false;

نوع داده بولین برای تست در شرط ها استفاده می شود

آرایه جاوا اسکریپت :
 
  • عناصر آرایه به وسیله علامت کاما از یکدیگر جدا می شوند.
  • اندیس آرایه در جاوا اسکریپت از صفر شروه می شود
  • آرایه جاوا اسکریپت درون براکت نوشته می شود

 

مثال 2 :

var cars = ["Saab", "Volvo", "BMW"];

یک آرایه سه عنصری به نام cars

اشیاء جاوا اسکریپت :
در جاوا اسکریپت آبجکت یا همان اشیاء بین علامت آکولاد نوشته می شود.
اشیا در جاوا اسکریپت به صورت نام و مقدار (مقدار خصیصه : نام خصیصه) می باشد
 

مثال  : یک شی با نام person شامل چهار خصیصه  firstName و  lastName و  age و eyeColor می باشد

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

<script>

   var person = {

       firstName : "John",

       lastName  : "Doe",

       age       : 50,

       eyeColor  : "blue"

    };

   document.getElementById("demo").innerHTML =

   person.firstName + " is " + person.age + " years old.";

</script>

خروجی : John is 50 years old

 

پایان قسمت پنجم

منابع : http://www.w3schools.com/js/js_datatypes.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

 

 


 
 
قواعد دستوری (syntax) جاوا اسکریپت |آموزش جاوا اسکریپت|بهینه کردن سایت
نویسنده : افرا گرافیک - ساعت ۸:٠٤ ‎ب.ظ روز ۱۳٩٥/۳/٢٤
 

آموزش جاوا اسکریپت                                                                 قمست چهارم

قواعد دستوری(syntax)  جاوا اسکریپت :

به مجموعه قوانینی که چگونگی ساخت برنامه در جاوا اسکریپت را مشخص می کندد  نحوه دستور نویسی (syntax) گفته می شود.

در یک زبان برنامه نویسی به این دستورالعمل ها statements نامیده می شوند

جاوا اسکریپت یک زبان برنامه نویسی می باشد (که ما از آن در طراحی وبسایت استفاده می کنیم)

دستورات جاوا اسکریپت مانند برخی از زبان ها  از جمله C#,Vb  با (;) از هم جدا می شوند

<script>

   var x = 5;

   var y = 6;

   var z = x + y;

   document.getElementById("demo").innerHTML = z;

</script>

<script>

   var x = 5;

   var y = 6;

   var z = x + y;

   document.getElementById("demo").innerHTML = z;

</script>

دستورات (statemens) جاوا اسکریپت :

در زبان های برنامه نویسی به دستورالمل های برنامه اصطلاحا (statatements) جملات،دستورات گفته می شود.

 

دستورات  جاوا اسکریپت از موارد زیر تشکیل شده است : 

 

  1. Values  (مقادیر)
  2. Operators (عملگرها)
  3. Expressions  (اصطلاحات)
  4. Keywords (کلمات کلیدی)
  5. Comments (تفسیر نویسی)

 

 

جاوا اسکریپت  Values  (مقادیر) :

 

در نحوه کد نویسی در جاوا اسکریپت دو نوع روش برای مقدار دهی معین شده است:

  1. مقادیر ثابت (Fixed Values) که به آنها لیترال ها (Literals) یا مقادیر تحت اللفظی گفته می شود.
  2. مقادیر متغیر  (Variable Values)

لیترال ها (Literals) یا ثابت  (Fixed) :

مهم ترین قوانین برای نوشتن مقادیر ثابت : 
 

   ۱- استفاده از اعداد (ساده یا اعشار) مانند   :  10.50و 1001
   ۲-استفاده از رشته ها (متن) که بین سینگل کوتیشن یا دابل کوتیشن نوشته میشود.مانند “afra” و ‘afra’

جاوا اسکریپت  متغیرها (Variables):

در تمامی زبان های برنامه نویسی از متغیر ها برای ذخیره موقت داده استفاده می گردد.
در جاوا اسکریپت برای تعریف یک متغیر از کلمه کلیدی var استفاده می شود.
از علامت “=” مساوی  برای معرفی مقداری که میخواهیم در متغیر ذخیره کنیم استفاده میکنیم.
مثال :

در مثال زیر یک متغیر x تعریف شده و مقدار 6 به آن انتصاب داده شده است

 

<script>

   var x;

   x = 6;

   document.getElementById("demo").innerHTML = x;

</script>

جاوا اسکریپت  Operators (عملگرها) :

  • جاوا اسکریپت از عملگر = برای انتساب مقدار به متغیر استفاده می کند

مثال : 

var x = 5 ;

var y = 6 ;

  • جاوا اسکریپت از عملگر های محاصباتی  (+ - *  /)  برای محاصبه مقادیر استفاده می کند

مثال : 

 

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

<script>

    document.getElementById("demo").innerHTML = (5 + 6) * 10;

</script>

 

جاوا اسکریپت  Expressions  (اصطلاحات) :

یک اصطلاح از ترکیب مقادیر (Values) ، متغیر ها (Variables) و عملگرها (Operators) که در یک مقدار (Value) محاسبه شده است گفته میشود

مثال : 

5 * 10

x * 10

"John" + " " + "Doe"

جاوا اسکریپت  Keywords (کلمات کلیدی) :

 

از کلمات کلیدی در جاوا اسکریپت برای شناختن عمل های از پیش تعریف شده استفاده می شود.
بطور مثال var یک کلمه کلیدی می باشد که برای ایجاد یک متغیر استفاده می شود.

جاوا اسکریپت  Comments (تفسیر نویسی) :

برخی عبارات در جاوا اسکریپت اجرا نمی شوند.
عباراتی که بعد از علامت ” // ” یا بین دو علامت /*  و  */ تفسیر نویسی یا کامنت گفته میشود و اجرا نمی شوند.

نوشتن کانت یا تفسیر نویسی اختیاری می باشدو فقط به خواناتر شدن بهینه سازی کدها و کارایی آنها کمک میکند

var x = 5;   // I will be executed

// var x = 6;   I will NOT be executed

جاوا اسکریپت  شناسه ها (Identifiers):

  • شناسه ها همان نام ها هستند.
  • در جاوا اسکریپت از شناسه ها برای نام گذاری متغیرها ، کلمات کلیدی ، فانکشن ها و برچسب ها(labels) استفاده میشود

 

  • قوانین نام گذاری در جاوا اسکریپت همانند دیگر زبان های برنامه نویسی می باشد:

 

           اولین کارکتر در نام گذاری یا باید یکی از حروف لاتین یا آندرلاین “_” یا علامت دلار $ باشد.

           کارکتر های بعدی میتوانند یکی یا ترکیبی از حروف لاتین یا علائم ریاضی یا آندرلاین یا علامت دلار باشد.

 

نکته : تمامی شناسه ها در جاوا اسکریپت حساس به کوچکی و بزرگی حروف هستند و براشون حرف  A و a متفاوته.

پایان قسمت چهارم

منابع : http://www.w3schools.com/js/js_output.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

 


 
 
خروجی جاوا اسکریپت|آموزش جاوا اسکریپت|طراحی سایت
نویسنده : افرا گرافیک - ساعت ٩:٥٢ ‎ب.ظ روز ۱۳٩٥/۳/٢۳
 

 

 

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

 

  • جاوا اسکریپت می تواند داده ها را در روش های مختلف نمایش می دهد :
  1. نمایش خروجی در یک کادر هشدار با استفاده از () window.alert
  2. نمایش خروجی در سند  html  با استفاده از  () document.write 
  3. نمایش خروجی در یک عنصر html با استفاده از () innerHTML 
  4. نمایش خروجی در کنسول مرورگر با استفاده از () console.log

خروجی با استفاده از () window.alert :
 
شما می توانید از یک جعبه هشدار برای نمایش داده ها استفاده کنید

مثال :

<!DOCTYPE html>
<html>
<body>
  <h1>My First Web Page</h1>
  <p>My first paragraph.</p>
  <script>
    window.alert(5 + 6);
  </script>
</body>
</html>

خروجی :

 

خروجی با استفاده از ()document.write :
برای تست کردن وب سایت راحت ترین روش استفاده از  ()document.write می باشد .
مثال :
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.write(5 + 6); </script> </body> </html>

 خروجی :

 استفاده از ()document.write بعد از لود شدن کامل صفحه وب سبب پاک شدن کل سند html  صفحه شما می شود

 
مثال :
 

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="document.write(5 + 6)">Try it</button>
</body>
</html>

خروجی : پس از کلیک بر روی button کل صفحه html پاک شده و 11 در خروجی نمایش داده می شود

 
 
نکته : از روش ()document.write باید تنها برای تست وب سایت استفاده شود
خروجی با استفاده ازinnerHTML :

 برای دسترسی به یک عنصر HTML در جاوا اسکریپت می توانیدازکد (document.getElementById(id 

استفاده کنید.

مثال :
 
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body>
</html>

 

خروجی :

 

خروجی با استفاده از ()console.log :

 

شما می توانید از روش ()console.log برای نمایش داده ها در مرورگر شما ، استفاده کنید.
 
مثال :
 
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> console.log(5 + 6); </script> </body> </html>

 

 

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

منابع : http://www.w3schools.com/js/js_output.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

 


 
 
محل قرار گیری کد اسکریپت|آموزش جاوا اسکریپت|آموزش وب سایت
نویسنده : افرا گرافیک - ساعت ۱:٢٠ ‎ق.ظ روز ۱۳٩٥/۳/٢٠
 

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

تگ <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

 


 
 
مقدمه-آموزش ساده جاوا اسکریپت|آموزش جاوا
نویسنده : افرا گرافیک - ساعت ۱٢:٢٢ ‎ق.ظ روز ۱۳٩٥/۳/٢٠
 

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

 

 

 


 
 
هزینه ی طراحی سایت | قیمت طراحی سایت | هزینه ساخت وب سایت
نویسنده : افرا گرافیک - ساعت ٤:٢۱ ‎ب.ظ روز ۱۳٩٤/۱۱/٢۳
 

هزینه ی طراحی سایت | قیمت طراحی سایت | هزینه ساخت وب سایت

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

نکات مهم  در تعرفه ها:

- تمامی قیمت ها با در نظرگرفتن 10 درصد تخفیف تا پایان این ماه محاسبه شده است.
- در صورتی که قبلا مشتری ما بوده اید ، سفارش های جدید شما شامل 10 درصد تخفیف ویژه مشتریان میگردد.
- در صورتی که مشتری ما بوده باشید و مشتری جدیدی را معرفی نمایید ، 10 درصد از هزینه سفارش برای شما در نظر گرفته شده و به حساب شما واریز میگردد.

نکاتی در مورد هزینه ها :
به دلیل کلی بودن جدول تعرفه ها و بنا به درخواست مشتریان ، در این بخش اطلاعات جزئی تری از امکانات وب سایت در اختیار شما کاربران عزیز قرار میگیرد.

انتخاب طرح ظاهری + درخواست تغییر در طرح اولیه

درجه آ : طرح متوسط + امکان درخواست برای تغییر عناوین + امکان درخواست برای جا به جایی بخش بندی ها + امکان تغییر در منو های سایت + امکان تغییر در بخش های موجود + آموزش عمومی
پنل حرفه ای : طرح با کیفیت بالا + امکان درخواست برای تغییر عناوین + امکان درخواست برای جا به جایی بخش بندی ها + امکان تغییر در منو های سایت + امکان تغییر در بخش های موجود + کم یا اضافه کردن بخش ( در صورتی که به هزینه سایت اضافه گردد قبل از انجام به اطلاع مشتری خواهد رسید . ) + آموزش عمومی
پنل ویژه : طرح اختصاصی + امکان درخواست برای تغییر عناوین + امکان درخواست برای جا به جایی بخش بندی ها + امکان تغییر در منو های سایت + امکان تغییر در بخش های موجود + کم یا اضافه کردن بخش ( در صورتی که به هزینه سایت اضافه گردد قبل از انجام به اطلاع مشتری خواهد رسید . ) + آموزش اختصاصی

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

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

گرافیک ( ظاهر سایت)
درجه آ : گرافیک خوب + امکان تغییر در رنگ بندی سایت + طراحی هدر+طراحی فوتر+طراحی اسلاید شو
پنل حرفه ای: گرافیک عالی + امکان تغییر در رنگ بندی سایت + طراحی هدر + طراحی گرافیکی برای 2 الی 3 بخش از سایت+طراحی فوتر+طراحی اسلاید شو
پنل ویژه : گرافیک حرفه ای + امکان تغییر در رنگ بندی های سایت + طراحی هدر + طراحی گرافیکی برای تمامی بخش های سایت+طراحی فوتر+طراحی اسلاید شو

نکته : تمامی درخواست ها فقط برای یک بار قابل انجام میباشند. 
توجه : در صورت درخواست کارفرما ، هرگونه درخواست خارج از شرایط و ضوابط تعرفه ها شامل هزینه میباشد که متعاقبا به اطلاع خواهد رسید.: دارد

امکانات سفارشی
درجه آ : داری 3-4 بخش اختصاصی
پنل حرفه ای : دارای 4-6 بخش اختصاصی
پنل ویژه : تمامی بخش ها میتوانند به صورت اختصاصی طراحی شوند.

توجه : در صورت درخواست کارفرما ، اضافه شدن هرگونه بخش اختصاصی افزون بر بخش های موجود طبق جدول تعرفه ها شامل هزینه بوده که این هزینه متعاقبا به کارفرما اعلام خواهد شد.

نکاتی در مورد هزینه های وبسایت :

- در صورتی که کاربر یکی از درجه های فوق را انتخاب کند اما به بعضی از امکانات آن درجه نیاز نداشته باشد هزینه ای بابت آن کسر نمی گردد . البته ممکن است بنابر شرایطی شرکت افراگرافیک برای مشتری تخفیف در نظر بگیرد .

- پشتیبانی برای تمام درجه های طراحی برای یک سال به رایگان انجام می گردد . اما برای پنل های ویژه و حرفه ای پشتیبانی ویژه انجام خواهد شد . برای اطلاع از خدمات پشتیبانی با مسئول پشتیبانی تماس بگیرید .
هاست و دامنه (دویست مگابایت هاست و یک دامنه .ir ) برای تمام درجه ها غیر از درجه A برای یک سال به رایگان هدیه داده می شود و در صورتی که به آن نیاز نداشته باشید هزینه ای کسر نمی گردد.
- امکانات و طرح ظاهری مهمترین ملاکهای تعیین قیمت دقیق می باشند و تا این موارد به طور دقیق مشخص نگردد امکان تعیین هزینه های دقیق وجود ندارد . به همین دلیل هزینه ها در جدول تعرفه های بالا به صورت تقریبی درج شده اند .
- در بخش گرافیک و ظاهر سایت معمولا هرچقدر طرح ظاهری سایت دارای موقعیت های (پازیشن) بیشتر , افکتهای بیشتر , طراحی استاندارد و مدیریت قالب حرفه ای , استفاده از اصول رنگشناسی , اسلایدر و اسلایدشو ها و در نهایت زیبایی و کارایی و کاربر پسندی بیشتر باشد سطح گرافیک به سمت سطح حرفه ای و در نتیجه هزینه بالاتر نزدیک تر میشود.
- در بخش امکانات مورد نیاز هر چقدر امکانات دارای ارتباط بیشتر با کاربر , پیچیدگی ساخت و مدیریت , زمان بر بودن ساخت و در نهایت هر چقدر اختصاصی تر و سفارشی تر باشد به سمت وب سایت حرفه ای و هزینه بالاتر نزدیکتر خواهد شد .


 
 
← صفحه بعد