افرا گرافیک

http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ

اپراتور typeof | آموزش جاوا اسکریپت | برنامه نویسی

:: برچسب‌ها: توابع جاوا اسکریپت ,آموزش جاوا اسکریپت,برنامه نویسی سایت ,

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

سه شنبه 25 خرداد 1395 ساعت 7:40 | بازدید : 132 | نوشته ‌شده به دست افرا گرافیک | ( نظرات )

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

اپراتور 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://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ

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

:: برچسب‌ها: اپراتور typeof,آموزش جاوا اسکریپت,برنامه نویسی,طراحی سایت,طراحی وب سایت,آموزش وب سایت ,

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

دو شنبه 24 خرداد 1395 ساعت 7:8 | بازدید : 136 | نوشته ‌شده به دست افرا گرافیک | ( نظرات )

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

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

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

String, Number, Boolean, Array, Object

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

اعداد	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 :

var x = 16 + 4 + "Volvo ";

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

</script>

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

خروجی : 20Volvo

مثال 2 :

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 می باشد

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://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ

قواعد دستوری (syntax) جاوا اسکریپت |آموزش جاوا اسکریپت|بهینه کردن سایت

:: برچسب‌ها: داده در جاوا اسکریپت , آموزش جاوا اسکریپت , طراحی سایت , آموزش برنامه نویسی , بهینه سازی وب سایت ,

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

دو شنبه 24 خرداد 1395 ساعت 7:3 | بازدید : 135 | نوشته ‌شده به دست افرا گرافیک | ( نظرات )

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

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

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

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

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

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

var x = 5;

var y = 6;

var z = x + y;

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

</script>

var x = 5;

var y = 6;

var z = x + y;

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

</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

var x;

x = 6;

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

</script>

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

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

مثال :

var x = 5 ;

var y = 6 ;

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

مثال :

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://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ

خروجی جاوا اسکریپت|آموزش جاوا اسکریپت|طراحی سایت

:: برچسب‌ها: آموزش جاوا اسکریپت , طراحی سایت , قواعد دستوری جاوا اسکریپت , جاوا اسکریپت ,

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

یک شنبه 23 خرداد 1395 ساعت 8:46 | بازدید : 107 | نوشته ‌شده به دست افرا گرافیک | ( نظرات )

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

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

جاوا اسکریپت می تواند داده ها را در روش های مختلف نمایش می دهد :

نمایش خروجی در یک کادر هشدار با استفاده از () window.alert
نمایش خروجی در سند html با استفاده از () document.write
نمایش خروجی در یک عنصر html با استفاده از () innerHTML
نمایش خروجی در کنسول مرورگر با استفاده از () 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://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ

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

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

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

چهار شنبه 19 خرداد 1395 ساعت 12:20 | بازدید : 105 | نوشته ‌شده به دست افرا گرافیک | ( نظرات )

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

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

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

</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://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ

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

:: برچسب‌ها: محل قرار گیری کد اسکریپت,آموزش جاوا اسکریپت,جاوا,آموزش وب سایت,سایت بهینه,کدنویسی بهینه,بهینه سازی سایت ,

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

چهار شنبه 19 خرداد 1395 ساعت 11:22 | بازدید : 88 | نوشته ‌شده به دست افرا گرافیک | ( نظرات )

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

اجرا :

قبل از کلیک

بعد از کلیک

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>

اجرا :

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

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

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

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

66912056 66562677 66120698 09122246022

http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ

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

:: برچسب‌ها: آموزش JavaScript , آموزش جاوااسکریپت , جاوااسکریپت , طراحی سایت , طراحی وب سایت , طراحی سایت , بهینه سازی سایت ,

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

سه شنبه 18 خرداد 1395 ساعت 13:5 | بازدید : 89 | نوشته ‌شده به دست افرا گرافیک | ( نظرات )

آموزش JavaScript بخش 1

مقدمه :

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

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

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

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

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

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

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

    1.  HTML برای تعریف محتوای صفحات وب

    2.  CSS برای مشخص کردن طرح صفحات وب

    3.  جاوا اسکریپت برای مشخص کردن رفتار صفحات وب

1. جاوا اسکریپت می تواند محتوای HTML را تغییر دهد :

یکی از روش های دسترسی به المان های داخل html گرفتن id با استفاده از متد () getElementById می باشد.

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

مثال :

<body>

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

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>

اجرا :

قبل از کلیک

بعد از کلیک

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

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

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

مثال :

<body>

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

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

function myFunction()

{

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

x.style.fontSize = "25px";

x.style.color = "red";

}

</script>

</form>

</body>

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

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

مثال :

<body>

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

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>

اجرا :

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

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

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

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

66912056 66562677 66120698 09122246022

http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ