ورود

نسخه کامل مشاهده نسخه کامل : طراحی یک صفحه با نرم افزار Macromedia Dreamweaver 8 به کمک جاوا اسکریپت


Ship Storm
06-10-2008, 20:04
سلام دوستان
رفتیم امتحان جاوا بدیم با نرم افزار Macromedia Dreamweaver 8 خلاصه چنان سوالی داد که هیچکس بلد نبود حالا گفتم اینجا مطرح کنیم ببینم کسی از دوستان میتونه کمکم کنه برای نوشتم اون البته باید بگم که ما در اصل جاوا رو نیمیخونیم HTML هستش ولی با دشتور زیر اون رو تو محیط جاوا معرفی میکنیم:


برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

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

یک جدول داریم با 2 تا خونه در خانه اول نوشته شده Speed Up حالا در خانه دوم یک متن از گوشه سمت راست می آید و از گوشه سمت چپ خانه دوم خارج میشود و دوباره این عمل تکرار میشود حالا ما وقتی روی خانه اول که نوشته شده Speed Up کلیک میکنیم سرعت حرکت متن درخانه دوم بیشتر میشود با با هر بار کلیک این سرعت بیشتر و بیشتر میشود.

اینم یک نمونه عکس:

[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

ممنون میشم دوستان برای نوشتم این برنامه بنده رو کمک کنید.
با تشکر از همگی دوستان عزیز :11:
neopersia
06-10-2008, 21:27
سلام
برای اون متن متحرک میتونی از marquee استفاده کنی که سرعتش هم قابل تنظیمه برای قسمت speedup هم میتونی هر دفعه سرعت تگ marquee رو بخونی و بهش اضافه کنی تا سرعتش زیاد شه
یه کم روش کار کنی چیز سختی نیست. اگه نشد کدش رو برات مینویسم
neopersia
06-10-2008, 22:27
اینم از کد (براش ترمز هم گذاشتم یه وقت از کنترل خارج نشه :دی):

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

چیز پیچیده ای هم نداره 90% کد HTML ساده هست و ربطی به قسمت اصلی نداره!
برای توضیحات مربوط به تگها و شناسه هاش میتونی کلمه مورد نظرت رو انتخاب کنی و Shift+F1 بزنی تا رفرنس دریم ویور رو برای اون کلمه باز کنه.
Ship Storm
07-10-2008, 19:54
neopersia جان یه دنیا ممنون بابت این موضوع
فقط خواهشا اگه امکانش هست این یک مورد رو با استفاده از تابع SetInterval زحمتش رو بکشید
یادمه خود استاد میگفت یکی یکی به Left اون متنه اضافه میشه تا سرعت حرکت اون متنه با هربار کلیک زیاد تر میشه
neopersia
08-10-2008, 11:03
اینم با اینتروال:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
با فایرفوکس و اپرا که تست کردم مشکلی نداشت ولی اینترنت اکسپلورر 6 یه مشکل کوچیک داره! متن خارج از جدول رو نشون میده!
** هر کی تونست این مشکل رو حل کنه همینجا جواب رو بده که خیلی ذهنمو مشغول کرده **
neopersia
08-10-2008, 11:40
یافتم [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
این دیگه مشکل نداره:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Ship Storm
08-10-2008, 19:06
neopersia جان اسم شریفتون رو هم نمیدونم فقط میتونم بگم خیلی خیلی زحمت افتادی و دست گلت دردنکنه
واقعا یه دنیا ممنونم ازت خیلی خیلی لطف کردی

[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
Ship Storm
08-10-2008, 19:12
neopersia جان یک چیز رو امروز تو دانشگاه گفتن دوستان اونم این بود که این متنه تا زمانی که ما Active X بالای صفحه رو فعال نکنیم نباید هیچ متنی رو نشون بده به نظر خودم باید متن توی قسمت :


<body onload...>

بنویسیم که وقتی Active X بالای صفحه وب رو فعال کردیم متن نمایش داده بشه

یک مطلب دیگه ای هم هست اونم اینکه نمیشه متن رو با استفاده از یک ابزار دیگه مثل Label یا هرچیز دیگری که متن رو توش نگه داره به حرکت در اورد و از marquee استفاده نکرد چون استاده گفته بود از marquee استفاده نکنید.

خیلی خیلی شرمنده و ممنون
neopersia
09-10-2008, 01:21
شما لطف داری کار حاصی نکردم که یه کم با جاوا اسکرپت بازی کردم :31:

اون information bar تو اینترنت اکسپلورر فقط برای فایلهایی میاد که از تو هارد اجرا میشن و تا وقتی تأیید نشه جاوا اسکرپت صفحه اجرا نمیشه. برای اینکه بخوایم متن تا تأیید کاربر نمایش داده نشه باید متن رو با جاوا اسکرپت نوشت یا اینکه به صورت پیشفرض نامرئی باشه و با جاوا اسکرپت قابل مشاهده بشه که به نظر من کار بی خودیه!
برای اینکه جاوا اسکرپت صفحه بدون اینکه information bar نمایش داده بشه اجرا بشه کافیه یه کامنت به اول صفحه اضافه بشه (بعد از خط DOCTYPE ). مثلاً این:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
فقط اون عدد تعداد حروف آدرس هست که باید دقیق باشه!


یک مطلب دیگه ای هم هست اونم اینکه نمیشه متن رو با استفاده از یک ابزار دیگه مثل Label یا هرچیز دیگری که متن رو توش نگه داره به حرکت در اورد و از marquee استفاده نکرد چون استاده گفته بود از marquee استفاده نکنید.
تو کد آخری که نوشتم از marquee استفاده نشده که! فقط اون آی دی marquee داره که فقط یه اسمه و میتونی عوضش کنی.
Ship Storm
09-10-2008, 09:25
بازم یه دنیا ممنون
حالا اگه بخوایم اون متنه تا زمانی که information bar تو اینترنت اکسپلورر رو فعال نکردیم نشون داده نشه باید چکار کنیم؟
neopersia
10-10-2008, 00:18
ببخشید دیر رسیدم.
اول اینو بگم کهقبلاً فراموش کرده بودم:
window.onload همون <" "=body onload>خودمونه فقط یه کم تر و تمیز تره!

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

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

ولی من هنوز نفهمیدم این کار برای چیه!
Ship Storm
10-10-2008, 08:50
neopersia جان واقعا ممنون


ولی من هنوز نفهمیدم این کار برای چیه!

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

فقط چند تا سوال دارم چون چند قسمتش برام نامفهمومه و مطمئا استاده سوال میپرسه این چکار میکنه و اون چکار میکنه:


<span id="my_marquee" style="position:relative; z-index:-10"></span>

Span کارش چیه؟ Span چی هستش؟
z-index:-10 یعنی چی؟



&raquo; Speed Down &raquo;

&raquo رو چجوری اضافه کردی ؟چه دکمه ای رو زدید؟



<table border="1" cellpadding="0" cellspacing="0">

cellpadding یعنی چی؟


marquee_interval = setInterval(Move, 10);

marquee فقط یک اسم هستش درسته؟ بخوایم عوضش کنیم که مشکلی ایجاد نمیشه؟


document.getElementById('my_marquee').innerHTML = 'متن مورد نظر';

innerHTML یعنی چی و کارش چیه؟
چرا getElementById کردید؟


document.getElementById("my_marquee").style.right = r + 'px';

r + 'px' یعنی هر دفعه به Right اون px رو اضافه کن دیگه درسته؟
اونوقت شما px رو اومدی تو :


<style type="text/css">
th {
cursor:pointer;
padding:10px;
background:#eee;
/* width:200px; */
}
</style>

تعریف کردید؟

ممنون میشم یه توضیحی هم روی این قسمت بدیدکه چجوری نوشتیدش
اصلا این رو خودتون تایپ کردید یا به روشی دیگه این رو گذاشتید اینجا



var r = -200;
var i = 1;
function Move() {
if(r > 200) {
r = -200
} else if (r < -200) {
r = 200
} else {
r += i
}

var r = -200; چرا -200 شده؟ و سایر متغییر ها


شرمنده بخدا هی مزاحمت مشم ولی اگه این ها رو دقیقا ندونم فردا به مشکل میخورم
بازم یه دنیا ممنون
neopersia
10-10-2008, 13:20
مثل اینکه کد اشتباهی رو انتخاب کردید. کدی که تو پست شماره 6 نوشتم کامله و کار میکنه از هشون هم ساده تره!


Span کارش چیه؟ Span چی هستش؟
در هر حال span هیچی نیست! فقط یک المنت از نوو اینلاین هست که برای اختصاص یک سری ویژگیهای css و یا بعضی از صفات عمومی مثل lang و id به یه قسمت از متن (یا مجموعه ای از یک سری المنتهای اینلاین دیگه) استفاده میشه. من ازش استفاده کردم و بهش یک id دادم تا بتونم قسمت مربوط به متن متحرک رو با جاوا اسکرپت از طریق همون id کنترل کنم.


z-index:-10 یعنی چی؟
ترتیب نمایش المنتهایی رو که روی هم قرار میگیرن مشخص میکنه. البته المنتها باید به صورت absolute یا relative موقعیت دهی شده باشن. به این ترتیب که هر المنتی که z-index بیشتری داره المنتهای زیر خودش رو میپوشونه!

overflow:hidden هم کاری میکنه که متنی که موقعیتش خارج از منطقه سلول وسطی هست مخفی بشه.


&raquo رو چجوری اضافه کردی ؟چه دکمه ای رو زدید؟
دکمه ای رو نزدم فقط همون کد ;raquo & رو نوشتم و مرورگر کاراکتر مربوط به اون کد رو نشون میده!


cellpadding یعنی چی؟
شناسه cellpadding مشخص میکنه که محتوای هر سلول از دیواره داخل سلول چقدر باید فاصله بگیرن!
شناسه cellspacing مشخص میکنه که سلولهای جدول چه مقدار باید با هم فاصله داشته باشن!


marquee فقط یک اسم هستش درسته؟ بخوایم عوضش کنیم که مشکلی ایجاد نمیشه؟
آره فقط یه اسمه. میشه عوضش کرد ولی باید حواستون باشه که اگه عوض کردید همه اسمهای مشابه رو عوض کنید وگرنه کار خراب میشه. راسی تو این مورد marquee_interval اگه کلاً اسم رو هم حذف کنید مشکلی پیش نمیاد چون ازش استفاده نشده. فقط برای روز مبادا گذاشتم گفتم شاید بخواید اینروال رو غیرفعال کنید به درد بخوره!


innerHTML یعنی چی و کارش چیه؟
مشخصه دیگه! یه مقدار html رو به عنوان محتوای المنت انتخاب شده قرار میده.


چرا getElementById کردید؟
برای اینکه بتونم المنتی رو که میخوام روش کار کنم انتخاب کنم. بااخره با یه روش و مشخصه ای باید به جاوا اسکرپت حالی کنیم که رو کدوم المنت قرار کار کنه


r + 'px' یعنی هر دفعه به Right اون px رو اضافه کن دیگه درسته؟
تو اون قسمت با استفاده از جاوا اسکرپت یک ویژگی css به المنت اختصاص داده میشه. چون مقدار ویژگی right باید عدد + واحد باشه مثلاً 12px باید هر دفعه که با جاوا اسکرپت عددی رو به این ویژگی اختصاص میدیم واحدش رو هم مشخص کنیم.


ممنون میشم یه توضیحی هم روی این قسمت بدیدکه چجوری نوشتیدش
اصلا این رو خودتون تایپ کردید یا به روشی دیگه این رو گذاشتید اینجا
منظورتونو متوجه نشدم


var r = -200; چرا -200 شده؟ و سایر متغییر ها
چون میخواستم متن از خارج از محدوده قابل رویت شروع به حرکت کنه.مقدار پیشفرض right صفر هست و -200 یعنی متن به مقدار 200 پیکسل نسبت به موقعیت پیش فرضش در سمت چپ نمایش داده بشه. چون عرض مجدوده قابل روین 200 پیکسل هست و عرض متن متحرک هم 200 در نظر گرفتم وقتی که مقدار ویژگی right المنت بین -200 و +200 باشه همه متن و یا قسمتی از اون قابل مشاهده هست در غیر این صورت متن خارج از دید قرار داره و باید اسکرپت براش طوری مقدار دهی کنه که وارد بشه
البته خوب من از right استفاده کردم. میشه از left هم استفاده کرد فقط یه مقدار باید عدد ها رو جابجا کنی.

کلیت کار اینه که اول به متن متحرک مقدار right رو -200 دادم تا کل متن در سمت راست خارج سلول وسط قرار بگیره. بعدش با selinterval هر 10 میلی ثانیه به مقدار i به right اضافه میشه و در نتیجه به نظر میرسه که متن به سمت چپ حرکت میکنه. وقتی هم که فاصله متن نسبت به موقعیت اصلیش (وقتی که right مساوی 0 هست) به اندازه عرض متن یعنی +200 رسید مشخصه که کل متن از کادر خارج شده برای همین دوباره موقعیت اولیه -200 رو بهش میدم تا یه دور دیگه بره سمت راست کادر و شروع به حرکت کنه.
اولش میخواستم با تغییر زمان اینتروال سرعت متن رو تغییر بدم که زیاد قدرت مانور نداشت. بعدش برای تغییر سرعت تعداد پیکسلی رو که متن در هر دور اینتروال باید جابجا بشه با متغیر i وارد کردم. یعنی هر بار که سرعت زیاد میشه مثلاً به جای اینکه متن هر 10 میلی ثانیه 1 پیکسل به چپ حرکت کنه، 2 پیکسل حرکت میکنه و به نظر میاد سرعتش بیشتر شده.

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

---------------------------------------------------
گذشته از همه این حرفا هنوز نمیدونم روش بهتری هم برای انجام این کار وجود داره یا نه ولی مطمئنم اگه تو گوگل سرچ کنید موارد مشابه زیادی پیدا میکنید که شاید منطق بهتری داشته باشن.
Ship Storm
10-10-2008, 19:54
واقعا ممنون و یه دنیا تشکر بابت این همه زحمتی که انداختم گردنت و وقتتون رو گرفتم
پس پست 6 تکمیل شده همه این هاست

تو قسمت :


<style type="text/css">
th {
cursor:pointer;
padding:10px;
background:#eee;
}

که گفتید متوجه نشدید منظور من رو منظورم این بود که این تکه کد رو خودتون نوشتید و یا با استفاده از Design این کد به Surce برنامه اضافه شده؟
مثلا خودتون بک گراند رو برابر background:#eee قرار دادید یا اینکه مثلا در Design کاری کردید که این کد خود به خود اینجا بصورت اتوماتیک اضافه شده


position:relative

کارش چیه؟ دقیق متوجه نشدم


پس خط :


marquee_interval = setInterval(Move, 10);

اضافه نوشته شده و کاربردی فعلا نداره؟



.container

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

واقعا ممنون
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
neopersia
10-10-2008, 23:56
خوب من اصلاً تو قسمت Design کار نمیکنم! ولی میدونم که میشه از اون طریق هم این خواص رو به المنت داد.

کار position: relative هم اینه که اجازه میده تا محل نمایش المنت مربوطه رو نسبت به موقعیت فعلی اون تغییر بدیم. برای اینکه ویژگی right رو بشه تغییر داد نیاز داشتیم که موقعیت دهی المنت رو به صورت نسبی یا همون relative تعیین کنیم.

در ضمن همه این که زیادی نیست فقط هندل تابع اضافیه:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
یعنی میتونی به جای کد بالا این رو بنویسی:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

.container هم یه کلاس هست که من برای اون المنت انتخاب کردم تا با استفاده از اون بتونم خواص css مورد نظرم رو به اون المنت اختصاص بدم (اسمش هم مهم نیست و میشه تغییرش داد)