مباحث عمومی در javascript

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
فهرست مطالب:

  1. نوشتن مقداری کد در میان کدهای صفحه، با استفاده از روش document.write در javascript
  2. انتخاب یک عنصر دلخواه از صفحه بر اساس id آن عنصر، با استفاده از روش document.getElementById در javascript
  3. دریافت یک مقدار از کاربر، با روش window.prompt در javascript
  4. تعیین یک سری کد javascript برای اجرا شدن هنگام کلیک بر روی یک عنصر دلخواه از صفحه، در javascript
  5. حذف کردن مشخصه های (Properties) یک شیء (Object)، با عملگر delete در javascript
  6. ساخت یک دکمه (button) که با کلیک بر روی آن، یک سری کد javascript اجرا شود


منبع: کلیدستان
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
نوشتن مقداری کد در میان کدهای صفحه، با استفاده از روش document.write در javascript

نوشتن مقداری کد در میان کدهای صفحه، با استفاده از روش document.write در javascript

با استفاده از روش document.write در javascript ، می توانیم مقداری کد دلخواه را در میان کدهای صفحه قرار بدهیم. یعنی مثلا اگر بخواهیم مقداری کد HTML را با استفاده از javascript به کدهای صفحه اضافه کنیم، می توانیم از این روش استفاده نماییم.

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

[h=4]مثال :[/h]
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
     document.[COLOR=#006633]write[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"<p>This is a paragraph.</p>"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
در واقع با کدهای javascript ، قصد داشته ایم که کد زیر را به کدهای HTML صفحه اضافه کنیم (تگ های p برای نمایش یک پاراگراف) :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]This is a paragraph.[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :Untitled.jpg[/h]
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
انتخاب یک عنصر دلخواه از صفحه بر اساس id آن عنصر، با استفاده از روش document.getElementById در javascript

انتخاب یک عنصر دلخواه از صفحه بر اساس id آن عنصر، با استفاده از روش document.getElementById در javascript

همان طور که می دانید، در صفحه، می توانیم عناصر مختلف را با id های منحصربفرد، مشخص کنیم تا در بخش های دیگر کدها، به آتها ارجاع داده و مشخصاتشان را تغییر بدهیم (مثلا در CSS خیلی از این شیوه برای تغییر ویژگی های عناصر HTML صفحه استفاده می شود). در javascript نیز با استفاده از روش document.getElementById ، می توانیم به یک عنصر صفحه، بر اساس id آن، ارجاع داده و ویژگی های آن را تغییر بدهیم.

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

[h=4]مثال :[/h]ابتدا یک پاراگراف (تگ های p) را با id برابر paragraph1 مشخص می کنیم و سپس با کدهای javascript ، پس زمینه پاراگراف مورد نظر را به رنگ آبی در می آوریم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]p id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"paragraph1"[/COLOR][COLOR=#339933]>[/COLOR]
[B]This[/B] is a paragraph.
[COLOR=#339933]</[/COLOR]p[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
     document.[COLOR=#006633]getElementById[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"paragraph1"[/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]style[/COLOR].[COLOR=#006633]backgroundColor[/COLOR][COLOR=#339933]=[/COLOR][COLOR=#0000FF]"blue"[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :Untitled.jpg[/h]
[h=4]نکته مهم :[/h]همان طور که مشاهده می کنید، کدهای javascript را بعد از کدهای HTML عنصر مورد نظر نوشته ایم، چنانچه کدهای javascript قبل از کدهای عنصر قرار می گرفتند، دیگر رنگ پس زمینه عنصر هیچ تغییری نمی کرد. بنابراین همیشه به یاد داشته باشید که باید کدهای javascript ای که به یک عنصر اشاره دارند را بعد از کدهای تعریف آن عنصر (هر مکانی، اما بعد از کدهای آن عنصر) بنویسید.
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
دریافت یک مقدار از کاربر، با روش window.prompt در javascript

دریافت یک مقدار از کاربر، با روش window.prompt در javascript

با استفاده از روش window.prompt در javascript ، می توانیم یک مقدار را از کاربر دریافت نماییم. با این روش، یک پنجره کوچک باز می شود و مقداری را از کاربر دریافت می کند.

مثال :

یک پاراگراف با id برابر paragraph1 تعریف می کنیم و سپس با کدهای javascript ، یک پنجره جدید را باز می کنیم تا کاربر، رنگ مورد نظر خود را در آن وارد نماید و سپس پس زمینه پاراگراف، برابر همان رنگ تعیین شده توسط کاربر، نمایش داده شود :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]p id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"paragraph1"[/COLOR][COLOR=#339933]>[/COLOR]
[B]This[/B] is a paragraph.
[COLOR=#339933]</[/COLOR]p[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
    var colorName [COLOR=#339933]=[/COLOR] window.[COLOR=#006633]prompt[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"Enter a color."[/COLOR], [COLOR=#0000FF]""[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
    document.[COLOR=#006633]getElementById[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"paragraph1"[/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]style[/COLOR].[COLOR=#006633]backgroundColor[/COLOR][COLOR=#339933]=[/COLOR]colorName[COLOR=#339933];[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
نتیجه :

به لینک زیر بروید و سپس در صفحه ای که باز می شود، در پنجره کوچک نمایش داده شده، مقدار blue را بنویسید و سپس بر روی گزینه OK کلیک کنید تا پس زمینه پاراگراف، به رنگ آبی نمایش داده شود :

مشاهده نتیجه
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تعیین یک سری کد javascript برای اجرا شدن هنگام کلیک بر روی یک عنصر دلخواه از صفحه، در javascript

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

ممکن است قصد داشته باشیم که هنگام کلیک کاربر بر روی یک عنصر دلخواه از صفحه، یک سری کد javascript اجرا شوند. برای این منظور، مشخصه onclick برای آن عنصر دلخواه را برابر نام مربوط به تابعی تعریف شده قرار می دهیم (کدهای تابع، توسط javascript تعریف می شوند)، یعنی مشابه کدهای زیر :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
function clickHandler[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
    [COLOR=#666666][I]// your code[/I][/COLOR]
[COLOR=#009900]}[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]p onclick[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"clickHandler();"[/COLOR][COLOR=#339933]>[/COLOR]click here [COLOR=#339933]!</[/COLOR]p[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
که به جای عبارت // your code باید کدهای javascript مورد نظرمان را بنویسیم (همان کدهایی که می خواهیم بعد از کلیک کاربر بر روی عنصر، اجرا شوند). در کدهای فوق، عنصر را تگ p در نظر گرفته ایم، ولی شما می توانید این مورد را برای سایر عنصرها نیز به کار ببرید.

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

[h=4]مثال :[/h]
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
function clickHandler[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
    window.[COLOR=#006633]alert[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"www.www.www.iran-eng.ir"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]p onClick[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"clickHandler();"[/COLOR][COLOR=#339933]>[/COLOR]click here [COLOR=#339933]!</[/COLOR]p[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :[/h]Untitled.jpg
Untitled.jpg

با کلیک بر روی پاراگراف (تگ p برای ساخت پاراگراف است)، در یک پنجره جدید، پیامی با عنوان www.www.www.iran-eng.ir نمایش داده می شود (روش window.alert برای نمایش یک پیام در یک پنجره جدید به کار می رود).
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
حذف کردن مشخصه های (Properties) یک شیء (Object)، با عملگر delete در javascript

حذف کردن مشخصه های (Properties) یک شیء (Object)، با عملگر delete در javascript

در javascript ، عملگری (operator) با نام delete وجود دارد که با استفاده از آن می توانیم مشخصه های (Properties) یک شیء (Object) را حذف کنیم.

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

[h=4]مثال :[/h]
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
var values [COLOR=#339933]=[/COLOR] [COLOR=#009900]{[/COLOR]firstName[COLOR=#339933]:[/COLOR][COLOR=#0000FF]"Hamed"[/COLOR], age[COLOR=#339933]:[/COLOR][COLOR=#CC66CC]50[/COLOR], city[COLOR=#339933]:[/COLOR][COLOR=#0000FF]"Tehran"[/COLOR][COLOR=#009900]}[/COLOR][COLOR=#339933];[/COLOR]
delete values.[COLOR=#006633]city[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
ساخت یک دکمه (button) که با کلیک بر روی آن، یک سری کد javascript اجرا شود

ساخت یک دکمه (button) که با کلیک بر روی آن، یک سری کد javascript اجرا شود

فرض کنید بخواهیم یک دکمه (button) بسازیم که با کلیک کاربر بر روی آن دکمه (button)، یک سری کد javascript اجرا شود، برای این منظور، ابتدا یک تابع تعریف می کنیم که حاوی کدهای javascript مورد نظرمان باشد :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
function clickHandler[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
    [COLOR=#666666][I]// your code[/I][/COLOR]
[COLOR=#009900]}[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
نام تابع را برابر clickHandler انتخاب کرده ایم و به جای عبارت // your code ، کدهای javascript مورد نظرمان را باید بنویسیم.

سپس دکمه (button) را با کدهای زیر می سازیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]button type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"button"[/COLOR] onclick[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"clickHandler();"[/COLOR][COLOR=#339933]>[/COLOR]change color[COLOR=#339933]</[/COLOR]button[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
بنابراین با کلیک بر روی دکمه (button)، کدهای javascript نوشته شده در تابع، اجرا خواهد شد.

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

[h=4]مثال :[/h]یک دکمه (button) می سازیم که با کلیک کاربر بر روی آن، رنگ پس زمینه (Background) صفحه (قسمت body) به رنگ آبی (blue) تغییر داده شود :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
function clickHandler[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
    document.[COLOR=#006633]body[/COLOR].[COLOR=#006633]style[/COLOR].[COLOR=#006633]backgroundColor[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#0000FF]"blue"[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]button type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"button"[/COLOR] onclick[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"clickHandler();"[/COLOR][COLOR=#339933]>[/COLOR]change color[COLOR=#339933]</[/COLOR]button[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :Untitled.jpg[/h]
Untitled.jpg
 

Similar threads

بالا