استایل شیت و دیگر مباحث وب....منصور دهستانی... وزارت آموزش و پرورش (2)

خصوصيات شئ window

جدول زير خصوصيات اين شئ ميباشد، نسخه هاي دو مرورگر اينترنت اکسپلورر و نت اسکيپ که از اين خصوصيات پشتيباني مي کنند، مشخص شده است.

ie	nn	توضيح	خصوصيات
4	3	بررسي پنجره مرورگر که اگر باز باشد مقدار true را بر مي گرداند و اگر بسته مقدار false	closed
3.02	2	قراردادن يک متني که در نوار وضعيت مرورگر نمايان شود.	defaultStatus
4		کنترل بلندي پنجره جديد که روي پنجره اصلي باز خواهد شد.	dialogHeight
4		تعيين فاصله پنجره جديد از سمت چپ	dialogLeft
4		تعيين فاصله پنجره جديد از بالا	dialogTop
4		کنترل پهناي پنجره جديد	dialogWidth
5.5		کنترل شئ فريم يا iframe که در پنجره اصلي قرار دارند	frameElement
4	6	کنترل شماره فريم هاي داخل يک صفحه	length
3.02	2	ذخيره نام فريمهاي يک پنجره و برگرداندن آنها	name
4	3	کنترل پنجره اصلي که باز کننده يک پنجره جديد است	opener
3.02	2	پنجره اصلي مرورگر	parent
5		کنترل فاصله مرورگر از طرف چپ	screenLeft
5		کنترل فاصله مرورگر از بالا	screenTop
3.02	2	منظور همان پنجره مرورگر ميباشد	self
3.02	2	کنترل متن در نوار وضعيت مرورگر	status
3.02	2	کنترل پنجره اصلي مرورگر در فريمها	top

دقت کنيد که اين خصوصيات کاربرد کمي دارند و بيشتر متدهاي اين شئ هستند که مورد استفاده قرار مي گيرند. تنها خصوصيتي که کاربرد زيادي دارد status مي باشد که توسط آن مي توانيد متني را به نوار وضعيت مرورگر اضافه کنيد.

نکته: شما مي توانيد بجاي نوشتن window از self يا parent هم استفاده کنيد. خيلي ها براي راحتي نوشتن از اين دو کلمه استفاده مي کنند که در حقيقت منظور همان شئ window مي باشد. به اين صورت:

window. status =" Hello! "
self. status = " Hello! "
parent. status = " Hello! "

متدهاي شئ window

ie	nn	توضيح	متدها
3.02	2	کادر ارتباطي اعلام اخطاريه به کاربر	alert( )
4	3	برداشتن تمرکر يا focus از آن پنجره	blur( )
4	4	برداشتن مدت زماني که توسط متد setInterval تنظيم شده	clearInterval( )
3.02	2	برداشتن مدت زماني که توسط متد setTimeout تنظيم شده	clearTimeout( )
3.02	2	بستن پنجره مرورگر	close( )
3.02	2	کادر ارتباطي براي دريافت تأييد از کاربر	confirm("msg")
5.5		ساختن پنجره هاي popup	createPopup( )
4	3	متمرکز و فعال کردن پنجره	focus( )
4	4	جابجا کردن پنجره مرورگر به يک نقطه تعيين شده	moveBy(x,y)
4	4	کنترل فاصله پنجره از بالا و چپ	moveTo(x,y)
3.02		رفتن به يک آدرس مشخص	navigate("URL")
3.02		باز کردن يک پنجره جديد با يک آدرس مشخص	open("URL")
5	4	پرينت گرفتن از محتواي آن صفحه	print( )
3.02	2	کادر ارتباطي براي دريافت اطلاعاتي از کاربر	prompt( )
4		تغيير اندازه پنجره مرورگر	resizeTo(width, height)
4	4	جابجا کردن scroll bar مرورگر به نقطه تعيين شده	scrollTo(x,y)
4	4	تعيين مدت زماني براي فراخواني يک تابع و يا بررسي يک شرط. اين مدت بر حسب ميلي ثانيه ميباشد که آن عمل در اين مدت زمان خاص مرتب اجرا خواهد شد.	setInterval("code", millisec)
3.02	2	اجراي يک کد يا فراخواني يک تابع بعد از مدت زمان معين	setTimeout("code", millisec)
4		باز کردن يک پنجره روي پنجره مرورگر که کاربر ابتدا بايد آنرا ببندد تا بتواند با پنجره هاي ديگر کار کند.	showModaldialog("URL", list)

navigator يکي ديگر از اشياء DOM مي باشد که اطلاعاتي را در ارتباط با مرورگر کاربر مي دهد، مانند نوع مرورگر و يا نسخه آن. اين شئ جزو استانداردهاي نيست.

خصوصيات شئ navigator

IE	NN	توضيح	خصوصيت
3.02	2	بدست آوردن نام کد مرورگر*	appCodeName
4		دريافت نسخه فرعي مرورگر	appMinorVersion
3.02	2	نام مرورگر را نشان مي دهد	appName
3.02	2	نسخه مرورگر و نام Platform**	appVersion
4		زبان بکار گرفته شده در مرورگر	browserLanguage
4	6	بررسي قابليت دريافت کوکي در مرورگر	cookieEnabled
4		نوع طبقه بندي CPU سيستمي که مرورگر روي آن نصب است	cpuClass
4		بررسي ارتباط کاربر با اينترنت	onLine
4	4	نوع پلت فرم سيستم عامل	platform
4		زبان پيش فرض و فعال سيستم عامل را نشان مي دهد	systemLanguage
3.02	2	اطلاعاتي معيني که مرورگر دور از ديد کاربر به سرور منتقل مي کند	userAgent
4		نمايش نوع زبان سيستم عامل	userLanguage

*  منظور از کد مرورگر، اسم داخلي مرورگر مي باشد که در حال حاضر مرورگرهاي معروف مانند Internet Explorer ، Netscape ، Opera، Firefox همه از نام Mozilla استفاده مي کنند.

** Platform به استاندارد يک مجموعه و سيستم گفته مي شود که آن سيستم بر اساس آن طراحي و توسعه پيدا مي کند و افرادي که علاقمند به کار در آن زمينه هستند ملزم به اجراي آن استاندارد مي باشند تا در سيستم هماهنگي ايجاد شود. بطور مثال پلت فرم ويندوز XP ، ويندوز NT 5.1 و همچنين Win32 مي باشد.

کليه خصوصيات در يک مثال بکار رفته و اطلاعاتي که در آن خواهيد ديد، همگي متعلق به مرورگر و سيستم شما مي باشد.

متدهاي شئ navigator

اين شئ داراي دو متد مي باشد:

window.navigator.javaEnabled ( )
window.navigator.taintEnabled ( )

متد اول، قابليت اجراي اپلتهاي جاوا را در مرورگر کاربر بررسي مي کند و يکي از دو مقدار true يا false را بر مي گرداند. متد دوم براي taint کردن اطلاعات بکار مي رود يعني اطلاعاتي که taint مي شوند، بدون اجازه کاربر از مرورگر به سرور فرستاده نمي شوند. در حقيقت بعضي از اطلاعات را توسط اين متد علامت دار مي کنيد تا هنگام فرستاده شدن به سرور، شما با خبر شويد. لازم بذکر است اين متد در مرورگر اينترنت اکسپلورر از نسخه 5 به بعد فقط مقدار false را برميگرداند، يعني در اين مرورگر ديگر کارآيي ندارد.

شئ frame

اين شئ ، فريمهاي داخل پنجره مرورگر را کنترل مي کند. اگر داخل پنجره مرورگر چند فريم داشته باشيم، براي هر فريم يک شئ window در نظر گرفته مي شود بنابراين ما ديگر نمي توانيم براي ارتباط با پنجره اصلي که اين فريمها را در خود جاي داده است از شئ window استفاده کنيم چون اگر در هر کدام از فريمها شئ window را بنويسيم به همان فريم بر مي گردد. در اين حالت براي ارتباط برقرار کردن با پنجره اصلي که اين پنجره هاي فرزند را در خود جاي داده، از شئ parent بايد استفاده کنيم.  خصوصيات و متدهاي اين شئ به شرح زير مي باشند.

خصوصيات شئ frame

IE	NN	توضيح	خصوصيات
5	6	نمايش کادر دور فريم را کنترل مي کند	frameBorder
4		مشخصه واحد براي فريمها	id
6		آدرس يک صفحه وب براي توضيح بيشتر	longDesc
5	6	کنترل حاشيه فريم از بالا و پايين صفحه	marginHeight
5	6	کنترل حاشيه از چپ و راست	marginWidth
5	6	نام واحد براي فريمها	name
5	6	کنترل قابليت تغيير اندازه فريم	noResize
5	6	کنترل scroll bar براي فريمها	scrolling
5	6	آدرس صفحه وب که در فريم جاي مي گيرد	src

به غير از id بقيه خصوصيات، استاندارد W3C مي باشند.

 متدهاي شئ frame

اين شئ دو متد دارد که فقط در مرورگر اينترنت اکسپلورر اجرا مي شوند و در ضمن استاندارد هم نمي باشند:

blur( ), focus ( )

متد blur تمرکز را از روي فريم برمي دارد و focus دوباره تمرکز را روي فريم برميگرداند.

 شئ document يکي از مهمترين اشياء DOM مي باشد چون اين شئ قابليت دسترسي به عناصر HTML را دارد و به شما اجازه مي دهد تا از طريق جاوااسکريپت هم اين عناصر را کنترل کنيد. شما در طول آموزش جاوااسکريپت با يکي از پرکاربردترين متد اين شئ آشنا شده ايد يعني :

document.write( )

مجموعه عناصر اچ تي ام ال که توسط اين شئ قابل دسترسي هستند و مي توانيد با آنها ارتباط برقرار کنيد، به شرح زير مي باشند:

anchors, applets, attributes, embeds, forms, images, links, plugins, stylesheets

نکته : منظور از عنصر anchor کل تگهاي لينک مي باشد چه به داخل يک صفحه اشاره کنند چه به خارج از آن صفحه وب پيوند داده شوند و عنصر link همان تگي است که در قسمت head يک سند اچ تي ام ال قرار مي گيرد. دقت کنيد که ارتباط شئ document با attributes ، embeds ، plugins و style sheets جزو استانداردهاي W3C نمي باشد.

خصوصيات شئ document

IE	NN	توضيح	خصوصيات
3	2	تعيين رنگ لينک فعال	alinkColor *
3	2	تعيين يا برگرداندن رنگ زمينه صفحه	bgColor *
5	6	تعيين شروع و خاتمه قسمت بدنه	body
3	2	کنترل کوکي هاي ساخته شده آن صفحه	cookie
5	6	دريافت اطلاعات از شئ اصلي	documentElement
4	3	نشان دادن آدرس دامنه صفحه وب	domain
3	2	کنترل رنگ فونت داخل صفحه وب	fgColor *
3	2	نمايش زمان و تاريخ آخرين اصلاحات سند اچ تي ام ال	lastModified
3	2	کنترل رنگ لينک ها	linkColor *
3	2	نمايش آدرس سند اچ تي ام ال	referrer
3	2	نمايش نام تعيين شده در قسمت title	title
4	3	نمايش آدرس همان صفحه وب	URL
3	2	کنترل رنگ لينک هاي مشاهده شده	vlinkColor *

* استفاده از آنها توسط W3C توصيه نمي شود.

لازم بذکر است که documentElement و lastModified جزو استانداردهاي W3C نمي باشند.

متدهاي شئ document

IE	NN	توضيح	متدها
	2	پاک کردن همه عناصر صفحه وب	clear( )
3	2	خاتمه شئ document.open را اعلام مي کند	close( )
6	6	ساختن يک خصوصيت براي يک تگ با نام مشخص	createAttribute("name")
5	6	ساختن يک تگ	createElement("tag")
5	6	ساختن يک رشته متني	createTextNode("txt")
5	6	متمرکز کردن روي سند اچ تي ام ال	focus( )
5	6	برگرداندن و ذخيره کردن محتواي يک عنصر که با آن ID در صفحه مشخص شده است	getElementById("id")
5	6	کنترل يک عنصر توسط نام مشخص شده آن	getElementsByName("name")
5	6	کنترل يک عنصر توسط بکار بردن نام تگ	getElementsByTagName("tag")
3	2	باز کردن يک صفحه وب با محتواي جديد	open("mimetype"[,replace])
3	2	نوشتن هر متني داخل صفحه وب که در پرانتز مشخص شده باشد.	write("str")
3	2	نمايش متن داخل پرانتز به همراه تگهاي اچ تي ام ال	writeln("str")

رويدادهايي هم وجود دارد که براي اين شئ مي توانيد بکار بريد که الگوي استفاده از آنها مانند زير مي باشد:

document.event_name = "some javascript code"

اين رويدادها به شرح زير مي باشند که هيچ کدام از آنها استاندارد W3C نيستند.

onClick, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onResize

شئ location اطلاعاتي در مورد آدرس همان صفحه وبي که کاربر درحال مشاهده آن مي باشد را ذخيره کرده و در صورت لزوم مي توان از آنها استفاده کرد. کلاً اين شئ جزو استانداردهاي W3C نمي باشد.

خصوصيات شئ location

IE	NN	توضيح	خصوصيت
3	2	قسمتي از آدرس در خصوصيت href که بعد از علامت# مي آيد را بر ميگرداند	hash
3	2	اين خصوصيت hostname آن سند و پورت آن اگر به غير از 80 باشد را بر مي گرداند.	host
3	2	فقط hostname را برمي گرداند	hostname
3	2	کنترل آدرس صفحه وب	href
3	2	آدرس صفحه وب که اين شئ در آن قرار دارد	pathname
3	2	شماره پورت صفحه لود شده را برميگرداند اگر شماره پورت بصورت پيش فرض 80 باشد آنرا نشان نمي دهد.	port
3	2	پروتکل آدرس وب را نشان مي دهد	protocol
3	2	قسمتي از آدرس وب که بعد از علامت ? مي آيد را برمي گرداند	search

متدهاي شئ location

IE	NN	توضيح	متد
4	2	يک صفحه جديد لود مي کند	assign("URL")
4	2	صفحه را refresh ميکند	reload(false|true)
4	3	آدرسي جديد جايگزين آدرس همان صفحه مي کند	replace("URL")

شئ history

اين شئ يکي ديگر از اشياء DOM مي باشد که با history مرورگر ارتباط بر قرار مي کند. بطور مثال ممکن است شما قبل از اينکه وارد اين صفحه بشويد، چند صفحه را مشاهده کرده باشيد و يا بعد از اين صفحه به صفحات ديگر رفته و مجدداً به همين جا باز گرديد. دراين حالتها دکمه هاي back و forward مرورگرتان فعال مي شوند و مرورگر شما صفحاتي که قبل و بعد از اين صفحه را مشاهده کرديد، ذخيره مي کند و با زدن دکمه back به صفحات قبل و با زدن دکمه forward به صفحاتي جلوتر هدايت مي شويد.  هنگاميکه اين صفحات در مرورگر بصورت موقت ذخيره شدند، شما توسط شئ history مي توانيد به آنها دسترسي پيدا کنيد که اين دسترسي به شما اجازه مي دهد براي صفحه خود دکمه يا لينک، مشابه back و forward مرورگر را بسازيد. اين شئ تمام آدرسهاي مشاهده شده در آن لحظه را در يک آرايه ذخيره مي کند و با استفاده از خصوصيات و متدهاي اين شئ، مي توانيد با آنها ارتباط برقرار کنيد. لازم بذکر است که اين شئ، استاندارد W3C نمي باشد.

  خصوصيت اين شئ

اين شئ فقط يک خصوصيت دارد بنام length که توسط آن مي توانيد دريابيد، چه تعداد آدرس در آرايه اين شئ ذخيره شده است. اين خصوصيت در مرورگر IE نسخه 3 به بعد و در مرورگر نت اسکيپ از نسخه 2 به بعد قابل استفاده مي باشد

متدهاي شئ history

IE	NN	توضيح	متد
3	2	مانند دکمه back مرورگر به صفحه قبلي هدايت مي کند	back( )
3	2	مانند دکمه forward مرورگر عمل مي کند	forward( )
3	2	شماره صفحه بازديد شده را وارد مي کنيد	go( number)

براي متد go مي توانيد هم شماره صفحه را وارد کنيد و هم آدرس صفحه بازديد شده را که عدد بهتر و راحت تر از آدرس مي باشد. براي رفتن به صفحات که قبلاً مشاهده شده بايد از اعداد منفي استفاده کنيد. بطور مثال اگر مي خواهيد کاربر به يک صفحه قبل برود به صورت زير عمل مي کنيد:

history.go ( -1 )

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

Go Back

شئ screen:

اين شئ اطلاعاتي را در مورد صفحه نمايش کاربر در اختيار ما مي گذارد، اطلاعاتي مانند اندازه صفحه نمايش و يا عمق رنگ بکار گرفته شده در سيستم عامل کاربر. اين شئ جزو استانداردهاي W3C نمي باشد و همچنين متدي هم ندارد و فقط خصوصياتي دارد که در زير به آنها اشاره شده است.

 خصوصيات شئ screen

IE	NN	توضيح	خصوصيات
4	4	اندازه بلندي صفحه نمايش بدون در نظر گرفتن نوارهاي بالاي مرورگر	availHeight
4	4	پهناي صفحه را نشان مي دهد	availWidth
4	4	کيفيت رنگ سيستم	colorDepth
6		نمايش DPI افقي صفحه	deviceXDPI
6		نمايش DPI عمودي صفحه	deviceYDPI
4		بررسي font smoothing در سيستم	fontSmoothingEnabled
4	4	بلندي صفحه نمايش	height
6		DPI افقي صفحه نمايش	logicalXDPI
6		DPI عمودي صفحه نمايش	logicalYDPI
	4	وضوح رنگ صفحه نمايش	pixelDepth
4	4	پهناي صفحه نمايش	width

نکات مهم برای اسکريپت نويسی

قسمت مقدماتي آموزش جاوااسکريپت به پايان رسيد و همانطور که مشاهده کرديد دستورات اين زبان، توضيح داده شد تا با استفاده از آنها بتوانيد اسکريپتهايي براي صفحات وب خود بنويسيد و يا اگر با اسکريپتي برخورد کرديد، کاملاً آنرا درک کنيد و مطابق نياز خود آن را اصلاح کنيد. فراموش نکنيد که اين دستورات و کدها را مرتب تمرين کرده و اسکريپتهاي جديد و ساده براي خود بسازيد تا اين زبان در ذهن شما قرار گيرد. بهترين راه به خاطر سپردن دستورات جاوااسکريپت خلق کدهايي براي خودتان و ديگران است. هرگاه خواستيد که اسکريپتي خلق کنيد، ابتدا آنرا در ذهن خود بررسي کنيد که اين اسکريپت چه کاري بايد انجام دهد و چه نتيجه اي را مي خواهيد از آن بگيريد، سپس افکارتان را روي کاغذ پياده کنيد با جزئيات کامل که چه اطلاعاتي را بايد دريافت کنيد و توسط چه دستوراتي آنرا پيش ببريد و در آخر چه نتيجه اي بايد بدهد. هنگام خلق يک اسکريپت نکاتي را بايد در نظر داشته باشيد:

 سعي کنيد بعد از هر خط علامت ; را بگذاريد تا پايان آن خط مشخص شود.

document.write ( " text string " );
document.write ( myFunction ) ;

جاوااسکريپت case sensetive است يعني به حروف کوچک و بزرگ حساس است و بين آنها فرق مي گذارد. در جاوااسکريپت myFunction با myfunction تفاوت دارد.

دقت کنيد کليه علامتها مانند پرانتز، آکلاد و کروشه در هر جا که مي نويسيد بايد دوباره آنها را ببنديد.

( { [ ..... ] } )

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

var name="value";
var name = " value " ;

در نظر داشته باشيد که يک خط کد جاوااسکريپت حتماً بايد در يک خط نوشته شود و نمي توانيد ادامه آنرا در خط بعدي بنويسيد، مگر اينکه به انتهاي صفحه برسيد و خود به خود به ابتداي خط بعد هدايت شويد. اما در ميان رشته هاي متني با گذاشتن علامت \ مي توانيد به خط بعد رفته و ادامه دهيد.

document.write ( " Hello \
my friends! " ) ;

شما مي توانيد جلوي کدهاي خود يک توضيح و يا يک نظريه را وارد کنيد تا براي مراجعتهاي بعدي يک سر نخي داشته باشيد و سريع متوجه بشويد که آن قسمت از اسکريپت، چه کاري را انجام مي دهد و يا اينکه شما يک اسکريپت براي يک فرد مبتدي مي سازيد و مي خواهيد بعضي از قسمتهاي کد را توضيح دهيد که براي اين منظور ها مي توانيد در هر خط از اسکريپت که مي خواهيد علامت // گذاشته و سپس آن توضيح را بنويسيد.

document.write( " text " ) ;   //  your comment

اگر هم نظريه يا توضيح شما بيشتر از چند کلمه است مي توانيد به صورت زير عمل کنيد:

/* This is a comment
block. It contains
several lines */

لازم بذکر است که اين توضيحات و نظريات در صفحه نمايش داده نمي شوند.

در حال حاضر کليه مرورگرها از جاوااسکريپت پشتيباني مي کنند ولي بعضي ممکن است از مرورگرهاي قديمي استفاده کنند و يا مرورگرهايي که قابليت جاوااسکريپت را نداشته باشند، بکار برند. در اين حالت شما يک تگ بعد از مجموعه اسکريپت خود به تگهاي اچ تي ام ال صفحه اضافه مي کنيد به اسم noscript و متني را داخل آن مي نويسيد تا به آن کاربر نشان داده شود و کاربر از کدهاي جاوااسکريپت آن صفحه با خبر شود.

منابع:

http://www.iranw3.com

http://www.html.ir/

http://www.ostadonline.com/courses.asp?a=4

http://khaterat.com/www/