صفحه 1:
Javascript » HTML: CSS
کارگاه کامپیوتر
گروه 6
صفحه 2:
Head, Body, Title and Meta Tags
<TBOSYRE WRAL PUBLIC] WIEST WANE EO ERS
“BGETELESCaves and Caverns in Swodonc/2IPLE>
<META name="description"
content-"This site gives an overview of
the most famous Swedish caves. ">
eugra name="keywords" content= "Sweden,
cave, cavern, speleology, Lummelunda’>
</HEAD>
<popy pccoLon=" #FFFFFF">
<wi>Caves and Caverns in Sweden</mi>
<p>The most famous Swedish cave is the
Lummelunda Cave on the Island of Gotland
in the Baltic Sea.
یو کج وود >
صفحه 3:
HTML
صفحه 4:
+ eos
نمایش متن
<br>
<b> <strong>
<i> <em>
<u>
<super> <sub>
<big> <small>
<strike>
⁢ >
<HR>
<img>
<center>
<H1>,<H2>,<H3>,<H4>
<P>
صفحه 5:
صفحه 6:
نام گذاری و ارجاع به نقاط دیگر سند
<A NAME="top">Top of Page</A>
<A HREF="#top">Retum to the top</A> return to the top
صفحه 7:
صفحه 8:
ارجاع به اسناد دیگر
* الا سند را به ۱۲۳6۲ نسبتیدهيم:
۶ پست الکترونیکی:
صفحه 9:
درج تصویر
صفحه 10:
جدول ها
<table border="1">
<tr> <td>row 1, cell 1</td>
<td>row 1, cell 2</td> </tr>
<tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr>
</table>
<table border="1">
<tr> <td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr> </table>
<table border="1">
<tr> <th>Heading</th> <th>Another Heading</th> </tr>
<tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr>
<tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr>
</table>
صفحه 11:
قسمت بندی صفحه
<frameset cols="25%,75%">
| <frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
صفحه 12:
فرم ها و اجزای آن ها
* قسمتی از صفحات وب که داده های وارد شده را نگه می دارند.
* اجزای فرم به کاربر اجازه وارد کردن اطلاعات را می دهد. مثل:
textarea fields, drop-down menus, radio buttons,
checkboxes
* این اطلاعات می تواند با فشردن Gl ali 2 SUBMIt F482 5248
سرور اجرا می شود فرستاده شود.
<FORM NAME="Order" METHOD="GET" ACTION="order.cgi*>
صفحه 13:
صفحه 14:
Radio Button
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
® Male
© Female
صفحه 15:
Checkboxes
<form>
| have a bike: <input type="checkbox" name="vehicle" value="Bike" >
<br >
| have a car: <input type="checkbox" name="vehicle" value="Car" >
<br>
| have an airplane: <input type="checkbox" name="vehicle"
value="Airplane" >
</form>
Thave a bike:
Thave a car:
Thave an airplane
صفحه 16:
The Form's Action Attribute
and the Submit Button
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
| </form>
صفحه 17:
Button
¢ type=SUBMIT
.- Causes the data in the form fields to be sent
to the CGI script.
* type=RESET
- Sets all the form fields back to their default
~ value, or blank.
* type=BUTTON
- Performs no action on its own, but you can
assign it one using JavaScript.
صفحه 18:
meta> tags>
* دادن اطلاعاتی مرتبط با مرورگرها یا موتورهای جست و جو مثل توصیف
لحترا |صفحة
This meta element defines a des:
tion of your page:
<meta name="description" content=
ree Web tutorials on Excel">
This meta element defines keywords for your page:
<meta name="keywords" content=“Excel, Microsoft, tutorial, XML">
صفحه 19:
Animating text
<FONT SIZE=' FAC! courier" COLOR=blue><MARQUEE
WIDTH=100% BEHAVIO! ALTERNATE BGColor=yellow>This is
an example of an alternating
marquee...</MARQUEE></FONT>
<FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE
WIDTH=100% BEHAVIOR=SCROLL BGColor=yellow
LOOP=3>This is an example of a scrolling
marquee...</MARQUEE></FONT>
صفحه 20:
Animating text
<FONT SIZE=' FAC! courier" COLOR=blue><MARQUEE
WIDTH=100% BEHAVIO! ALTERNATE BGColor=yellow>This is
an example of an alternating
marquee...</MARQUEE></FONT>
<FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE
WIDTH=100% BEHAVIOR=SCROLL BGColor=yellow
LOOP=3>This is an example of a scrolling
marquee...</MARQUEE></FONT>
صفحه 21:
Animating text
۰ جهت
<FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE
WIDTH=100% BEHAVIOR=SCROLL DIRECTION=RIGHT
-BGColor=yellow>This is an example of a marquee scrolling to
the right...</MARQUEE></FONT>
* سایز
<FONT SIZ! FACE="courier" COLOR=blue><MARQUEE
BEHAVIOR=SCROLL HEIGHT=25 WIDTH=300
BGColor=yellow>This is an example of a scrolling
marquee</MARQUEE></FONT> 1
صفحه 22:
<pre> » <xmp>
This text is
in a fixed-pitch
font, and it preserves
both spaces and
line breaks
3
3
م
deprecated
<xmp> *
tag های ۱۵۳0۱ در آن نادیده گرفته می شوند.
<xmp>
<A HREF="httpiliwww.idocs.com">Coolbude</A> <XMP>
<pre>
Git; HREF="http:/lmww.idocs.com'>Cool Dudesit;/A> </PRE>
صفحه 23:
Coo
۶ همه ی شما با 50۷۱6 ها در Microsoft Word کار کرده اید...
صفحه 24:
55 چیست
اسنا توائن نحوه نمایش ق
Si 11117 ان ۳
مختلف آن را تعیین می کنند ترکیب شوند.
زبان توصیف اين صفحات 655 نام دارد.
نحوه نمایش توسط 5۱6 ها تعیین می شود.
6 « در 5۱6۵1 5۷۱6 ارلئه میشوند.
استفاده از سبک مناسب نمایش برای کاربران مختلف
صفحه 25:
نحو 055
<style type="text/css">
<!--
Your CSS rules go here!
--> </style>
{ property: value; }
صفحه 26:
مکان 5۳66۱ 50۷۱6 ها
<style type="text/css"> Head (<STYLE></STYLE>) *
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head> bee alle
مزیت؟ ۲
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
صفحه 27:
فرانبن 5661 5۳۷7۱6 های خارجی
* باید متن ساده و بدون 129 های ab HTML
* فایل با پسوند .55 مرسوم است.
صفحه 28:
Javascript
صفحه 29:
۲ چیست
جاوا» اما ساده تر
برای ایجاد صفحات وب فعال
خطوطی از کدهای کامپیوتری قابل اجرا
قابل جاسازی در صفحات pole syntax b HTML
با قابلیت دسترسی به عناصر صفحه
تعامل با 6۷6۱۲ ها
- پس از 1020 شدن صفحه یا کلیک توسط کاربر
صفحه 30:
چرا ساده ثر از SJava
کامپایل نمی شود؛ تفسیر می شود.
نیازی به تعريف متغيرها و تعيين نوع آن ها نيست.
LS را نمی سازيم فقط از آن ها استفاده مى كنيم.
استفاده آسان از 0۵016۲ 6۷6۳۴ ها
صفحه 31:
SJavascript چرا
* محتوای پویا
* اعتبارسنجی فرم ها
* تعاملی کردن صفحات وب
صفحه 32:
طرز فراردادن 2۷356۳10۲[ در ۲۲۱/۲
<html>
<head>
<script type="text/javascript"> .... </script>
</head>
<body>
<script type="text/javascript"> .... </script>
</body>
<html>
<head> <script src="xxx.js"></script> </head>
<body> </body>
</html>
«*براى درج توضيحات: //يا /* */
صفحه 33:
If...Else
<script type="text/javascript">
— //\f the time is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
var. d = new Date()
var time = d.getHours()
‘if (time < 10)
{ document.write("Good morning!") }
else { document.write("Good day!") }
</script>
صفحه 34:
For Loop
<html>
| <body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
0
document.write("The number is " + i)
document.write("<br />")
1
</script>
</body>
</html>
صفحه 35:
While Loop
<html>
<body>
<script type="text/javascript">
var i=0
while (i<=10) {
document.write("The number is " + i)
document.write("<br />")
i=i+1
1
</script>
</body>
</html>
صفحه 36:
Popup Boxes
»* ‘alert("sometext")
* confirm("sometext")
* prompt("sometext","defaultvalue")
var d = new Date()
var time = d.getHours()
if (time < 10)
{ document.write("Good morning!") }
else { document.write("Good day!")
prompt("current time",d) }
صفحه 37:
* تعریف تابع
* فراخوانی تابع
Function
function prod(a,b)
{
x=a*b
return x
}
product=prod(2,3)
صفحه 38:
Function Example
<htmI>
<head>
<script type="text/javascript">
» function displaymessage()
1
alert("Hello World!")
+
</script>
</head>
<body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" >
</form>
</body>
</html>
صفحه 39:
رویدادها و مدیریت آن ها
* یکی از نقاط قوت 2۷357101[
Oceurs when the page (or an
image) finishes Ic
Oceurs when the mouse
pointer moves over an item
Oceurs when the mouse
| pointer moves off an item
Occurs when the user seleets
[text in atext area
Occurs when a submit button
is pressed
Oceurs when the user leaves
the document or exits
مهمه
jondicuseover
onMauseout
|Qceurs when the user aborts
th ofanimage
|Oceurs when an object on the,
page loses focus
Oceurs when a text field is
changed by the user
| Occurs when the user clicks |
jon an 1
Ocours when a document or |
Jimage can't load correctly
|
Occurs when an item gains
مدمه
onclick —
مط قوت
93
0
مع هدم
onocus
صفحه 40:
event handler
<a href="http://ce.sharif.edu"
“onmouseover="alert('HomePage Of CE
department')">
1
</a>
<img src=“a.jpg" width="100" height="30"
onmouseover="alert(‘'HomePage Of CE
department')">
صفحه 41:
Timing Events
<html>
<head>
<script type="text/javascript">
function timedMsg()
setTimeout("alert('5 seconds!')",5000)
1
</script>
</head>
<body>
<form>
<input type:
onclick=
</form>
</body>
</htmi>
button" value="Display timed alertbox!"
imedMsg()">
صفحه 42:
عبارات و عملگرها
حجى ع دخ عل دمو
Oy ef oF ۰+ محاسباتی:
رشته ای: +
منطقی: ,۰86 || !
>>> >> << A ‘| ۰8:
مقایسه ای: << > < ->. <<
ی
صفحه 43:
Objects
Window ٠
- نشان دهنده پنجره مرورگر
۶ ۱۱۵۷۱۵۵۲0۲
- حاوی اطلاعاتی راجع به مرورگر مشتری
۰ ۲۱۹۲۵۲۷
- حاوی اطلاعاتی در مورد 1( های بازدید شده در صفحه
صفحه 44:
window «5
<HTML>
<HEAD>
<TITLE>
‘The Amazing Status Line Changer=?TITLE>
</HEAD>
>
حلط>
Change the ماک 11512
Entet the text for the status line in the space below, then press the
chANGE button to change it<HR>
<FORM NAME="statform’
<INPUT TYPE="text” SIZE="65" NAME="inputl">
<BR>
uulion” VALUE="chANGE”
=Yocument, statform, inputl.valuey"=
صفحه 45:
window +4
* دسترسی به فریم های یک پنجره با استفاده از آرایه ی ۴۳۵۳065 امکان پذیر
ات
صفحه 46:
اجزای فرم ها
<htmi>
<form name="form1">
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female">
Female
<br>
</form>
<script type="text/javascript">
document.form1.sex[0].checked = true;
</script>
<html>
i
صفحه 47:
XML
صفحه 48:
/ XML
* EXtensible Markup Language
i \ جایگزینی برای ۳۱۲0/1 نمی باشد. ۶
rail برلی!هدلفتفاوتیطرلحیشده ۲۱۲ 5 XML *
ببسرلیتوصیفهاده طرلحیشده لستٍ 2/1 -
برائنمايشدادم طرلحیشدم لست HTML =
۶ باید نرم افزاری برای کار با آن نوشته شود.
- برای نمایش پیغام
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
