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

Printable View

06-10-2008, 20:04
Ship Storm

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

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

[HTML]<script language="javascript" type="text/javascript">[/HTML]

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

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

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

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

ممنون میشم دوستان برای نوشتم این برنامه بنده رو کمک کنید.
با تشکر از همگی دوستان عزیز :11:
06-10-2008, 21:27
neopersia

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

اینم از کد (براش ترمز هم گذاشتم یه وقت از کنترل خارج نشه :دی):
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
th {
cursor:pointer;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th onclick="document.getElementById('my_marquee').scr ollAmount++">Speed Up</th>
<td width="200" height="50"><marquee id="my_marquee" width="100%" direction="left" scrollamount="1" scrolldelay="25" truespeed="truespeed">This Is The New Sample</marquee>
</td>
<th onclick="document.getElementById('my_marquee').scr ollAmount--">Speed Down</th>
</tr>
</table>
</body>
</html>
[/html]

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

neopersia جان یه دنیا ممنون بابت این موضوع
فقط خواهشا اگه امکانش هست این یک مورد رو با استفاده از تابع SetInterval زحمتش رو بکشید
یادمه خود استاد میگفت یکی یکی به Left اون متنه اضافه میشه تا سرعت حرکت اون متنه با هربار کلیک زیاد تر میشه
08-10-2008, 11:03
neopersia

اینم با اینتروال:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
th {
cursor:pointer;
padding:10px;
background:#eee;
/* width:200px; */
}
</style>
<script type="text/javascript">
var r = -200;
var i = 1;
function Move() {
if(r > 200) {
r = -200
} else if (r < -200) {
r = 200
} else {
r += i
}
document.getElementById("my_marquee").style.right = r + 'px';
}
window.onload = function() {
marquee_interval = setInterval(Move, 10);
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th onclick="i++">« Speed Up «</th>
<td width="200" height="50" style="overflow:hidden;"><span id="my_marquee" style="position:relative; z-index:-10">This Is The New Sample</span></td>
<th onclick="i--">» Speed Down »</th>
</tr>
</table>
</body>
</html>
[/html]
با فایرفوکس و اپرا که تست کردم مشکلی نداشت ولی اینترنت اکسپلورر 6 یه مشکل کوچیک داره! متن خارج از جدول رو نشون میده!
** هر کی تونست این مشکل رو حل کنه همینجا جواب رو بده که خیلی ذهنمو مشغول کرده **
08-10-2008, 11:40
neopersia

یافتم [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
این دیگه مشکل نداره:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
th {
cursor:pointer;
padding:10px;
background:#eee;
}
#my_marquee {
position:relative;
z-index:-10;
width:200px;
}
.container {
overflow:hidden;
width:200px;
position:relative;
z-index:10
}
</style>
<script type="text/javascript">
var r = -200;
var i = 1;
function Move() {
if(r > 200) {
r = -200
} else if (r < -200) {
r = 200
} else {
r += i
}
document.getElementById("my_marquee").style.right = r + 'px';
}
window.onload = function() {
marquee_interval = setInterval(Move, 10);
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th onclick="i++">« Speed Up «</th>
<td><div class="container">
<div id="my_marquee">This Is The New Sample</div>
</div></td>
<th onclick="i--">» Speed Down »</th>
</tr>
</table>
</body>
</html>
[/html]
08-10-2008, 19:06
Ship Storm

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

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
08-10-2008, 19:12
Ship Storm

neopersia جان یک چیز رو امروز تو دانشگاه گفتن دوستان اونم این بود که این متنه تا زمانی که ما Active X بالای صفحه رو فعال نکنیم نباید هیچ متنی رو نشون بده به نظر خودم باید متن توی قسمت :

نقل قول:

<body onload...>

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

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

خیلی خیلی شرمنده و ممنون
09-10-2008, 01:21
neopersia

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

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

کد:



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

نقل قول:

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

تو کد آخری که نوشتم از marquee استفاده نشده که! فقط اون آی دی marquee داره که فقط یه اسمه و میتونی عوضش کنی.
09-10-2008, 09:25
Ship Storm

بازم یه دنیا ممنون
حالا اگه بخوایم اون متنه تا زمانی که information bar تو اینترنت اکسپلورر رو فعال نکردیم نشون داده نشه باید چکار کنیم؟
10-10-2008, 00:18
neopersia

ببخشید دیر رسیدم.
اول اینو بگم کهقبلاً فراموش کرده بودم:
window.onload همون <" "=body onload>خودمونه فقط یه کم تر و تمیز تره!

اگر منظورتون فقط متن هست که در صورت غیر فعال بودن جاوا اسکرپت نمایش داده نشه به نظرم راهش اینه که متن رو با جاوا اسکرپت بنویسید. یعنی متد onload رو اینطوری بنویسید:
[html]
window.onload = function() {
document.getElementById('my_marquee').innerHTML = 'متن مورد نظر';
marquee_interval = setInterval(Move, 10);
}
[/html]
بعد متن تو div با آی دی my_marquee رو حذف کنید. اینطوری اگر جاوا اسکرپت غیر فعال باشه (به هر دلیلی) تو سلول وسط جدول چیزی نمایش داده نمیشه.
اگر هم میخواید کل جدول در صورت غیر فعال بودن جاوا اسکرپت نمایش داده نشه راهش اینه که کدهای جدول رو با استفاده از متد document.write در جاوا اسکرپت بنویسید:
[html]
<script type='text/javascript'>
document.write('<table><tr>....');
</script>
[/html]

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

neopersia جان واقعا ممنون

نقل قول:

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

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

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

نقل قول:

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

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

نقل قول:

» Speed Down »

&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 شده؟ و سایر متغییر ها

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

مثل اینکه کد اشتباهی رو انتخاب کردید. کدی که تو پست شماره 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 تغییر داد

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

واقعا ممنون و یه دنیا تشکر بابت این همه زحمتی که انداختم گردنت و وقتتون رو گرفتم
پس پست 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

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

واقعا ممنون
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
10-10-2008, 23:56
neopersia

خوب من اصلاً تو قسمت Design کار نمیکنم! ولی میدونم که میشه از اون طریق هم این خواص رو به المنت داد.

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

در ضمن همه این که زیادی نیست فقط هندل تابع اضافیه:
[html]
marquee_interval = setInterval(Move, 10);
[/html]
یعنی میتونی به جای کد بالا این رو بنویسی:
[html]
setInterval(Move, 10);
[/html]

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