Upload
others
View
11
Download
0
Embed Size (px)
Citation preview
HTML
HTML
Fonts
ImagesLinks
TABLES
LISTS
FRAMES
FORMS
CSS
JavaScript
JavaScript
ArraysFunction
مقدمة إلى االنترنت
لمحة عن اإلنترنت
Internet "
International network "
PPrroottooccoollss
ملكية الشبكة
تاريخ االنترنت
.
1969 .
1972 Email.
.
Web Wide Word العالمية الويب شبكة
www w3 (web)
Hypertext
HTTPالمصطلح Hyper Text Transfer Protocol
URLالمصطلح Uniform Resource Locator
.
HTMLالمصطلح
Hyper Text Markup Language
خدمات االنترنت
Web
E-Mail Chatting Conferencing Video
FTP NNTP(Network News Transfer Protocol)
Browsing Searching Entertainment
E-commerce Internet Radios
.
mail-Eاإللكتروني البريد
Electronic Mail
FileTransfer Protocol (FTP) نقل الملفات والبرامج
FTP (Upload)
(Download).
Webالويب
Entertainmentالترفيه
Internet Radio Stationsاإلنترنت إذاعات
االتصال باالنترنت :
(Transmission Control Protocol/Internet Protocol)
TCP/IP
.
Modem
.
ISP (Internet Service Provider).
.
العنوان االلكتروني
(Uniform Resource
Locator - URL).
النطاقات
wwwwww..ggooooggllee..ccoomm..ssaa
o www .
o google .
o com
:
edu
gov
com
mil
net
org
sa
:
sa
ae
sd
jo
uk
صفحات الويب HTML
HTTP .
أنواع الصفحات.
HTML. (htm, html)
. (gif, jpeg, png)
. (ram, mid, wav, swf, avi, mpeg, mpg, mpe)
. (txt) ( ASCII)
لغات برمجة اإلنترنت
‘
:
Client Side Programming Languages
) Client Side(
HTML ,Java script ,VBScript
Server Side Programming Languages
ASP(Active Server Pages).
PHP(Personal Home Page).
HTMLأساسيات لغة
HTMLلغة Hyper Text Markup Language
HTMLتاريخ SGML
Standard Generalized Markup Language
بالمراحل التالية HTMLوقد مرت لغة o HTML
o HTML
o HTML2.0HTML
o HTML3.0
o HTML3.2
o HTML4.0
o HTML4.01
HTML5
HTMLخصائص لغة HTML
Notepad
Tags الوسوم األساسية لصفحة الويب
وسم النهاية وسم البداية
<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>
HTMLالعناصر األساسية في لغة
HtmlHTML/HTML
HEAD
TITLE/TITLE/HEAD
BODY
/BODY
فكرة امج المسنبدأ بتطبيق هذه المعلومات بصورة عمليه؟ قم بفتح برن واكتب ما يلي:
<HTML>
<HEAD>
<TITLE>
This is a Test Web Page
</TITLE>
</HEAD>
<BODY>
I'm Writing My First Web Page
</BODY>
</HTML>
HTMLhtmhtml
OpenFile
بعض المالحظات عند كتابة صفحات الويب
UPPERCASE
lowercase
<HTML><HEAD><TITLE> This is a Test Web Page
</TITLE></HEAD><BODY>
I'm Writing My First Web Page</BODY></HTML>
أو بالشكل التالي: <HTML>
<HEAD>
<TITLE>
This
is a
Test
Web Page
</TITLE>
</HEAD>
<BODY>
I'm
Writing
My First
Web Page
</BODY>
</HTML>
أو حتى بهذا الشكل: <HTML> <HEAD> <TITLE>
This is a Test Web Page
</TITLE>
</HEAD>
<BODY>
I'm Writing My First Web Page
</BODY>
</HTML>
BR
BR
<HTML>
<HEAD>
<TITLE>
This is a Test Web Page
</TITLE>
</HEAD>
<BODY>
<BR> I'm Writing My First <BR>
Web Page
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>
This is a Test Web Page
</TITLE>
</HEAD>
<BODY>
I'm <P> Writing My <P>
My First Web Page
</BODY>
</HTML>
Non Breakable Space
إذن لنعد إلى المفكرة ونكتب ملفنا بالشكل التالي:<HTML>
<HEAD>
<TITLE>
This is a Test Web Page
</TITLE></HEAD>
<BODY>
Hello,
I'm Writing
My Ffirst
Web Page
</BODY>
</HTML>
التنسيق
HTMLاأللوان و أنماط الخطوط في لغة
Colorsاأللوان
BODYخصائص الـ
<BODY>
.
<BODY> ...</BODY>
Attribute
<BODY BGCOLOR = "FFFFFF">
...
</BODY>
BGCOLOR <BODY>
FFFFFF
CC
-تالحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة التالية:
.
FFFFFF
A,B,C,D,E,F
FF
FF FF
FF
CC
التعامل مع اسم اللون بشكل صريح
<BODY BGCOLOR="#FFFFFF "
BACKGROUND="image path">
.. ………………………..
</BODY>
BACKGROUND
image path
BODYبعض خصائص الوسم
Links
لي: التا لجدولسنوضح الخصائص التي تقوم بالتحكم في ألوان النصوص با
TEXT="#rrggbb"
LINK="#rrggbb"
VLINK="#rrggbb" visited links
ALINK="#rrggbb" active links
نماط الخطوطأ
<B> ... </B>
<STRONG> ... </STRONG>
<B> Bold Text </B> This is Bold Text
<STRONG> Strong Text
</STRONG>
This is Strong
Text
Italic
<I> ... </I>
<EM> ... </EM>
<I> Italic Text </I> This is Italic Text
<EM> Emphasized Text
</EM>
This is Emphasized
Text
Under line
<U> ... </U>
<U> Underlined Text </U> nderlined UThis is
Text
<SUP> ... </SUP>
<SUP> Superscript Text
</SUP> Superscript TextThis is
<SUB> ... </SUB>
<SUB> Subscript Text
</SUB> Subscript TextThis is
<BIG> ... </BIG>
<BIG> Big Text </BIG> This is Big Text
<SMALL> ... </SMALL>
<SMALL> Small Text
</SMALL>
This is Small
Text
<STRIKE> ... </STRIKE>
<S> ... </S>
<del> ... </del>
STRIKE> Striked Text
</STRIKE Striked TextThis is
<S> Striked Text </S> Striked Texthis is T
< del > Striked Text </ del > Striked TextThis is
TeleType
<TT> ... </TT>
<TT> Tele Type Text </TT> This is Tele Type
Text
Monospaced Text
m,i
mi
iiiiiiiiii
mmmmmmmmmm
TT/TT
مثال يجمع بين عدة تنسيقات<B><I><U>
This is a Bold, Italic and Underlined Text
</U> </I> </B>
This is a Bold, Italic and Underlined Text
HTMLفي لغة التنسيق Fontsالخطوط
محتويات المحاضرة
–– FFoonnttss
•• FFoonntt SSiizzee
•• FFoonntt CCoolloorr
•• FFoonntt FFaaccee
••
––
••BBAASSEEFFOONNTT
•• HHRR
•• mmaarrqquueeee
Fontsالخطوط
Times New Roman
/FONTFONT
Face <FONT FACE="Traditional Arabic, Arabic
Transparent,
>"Simplified Arabic
... Text ...
</FONT>
Color
<FONT COLOR="#FF0000">
... Text ...
</FONT>
Size
<FONT SIZE="4">
... Text ...
</FONT>
<FONT SIZE="+4">
... Text ...
</FONT>
+
-
+5 .-
+
FONTأمثلة توضح كيفية استخدام الوسم
<FONT FACE="Traditional Arabic" SIZE="6"
COLOR="#FF0000">
Traditionalخط من نوع
Arabic ولون الخط أحمر 6بحجم
</FONT>
الناتج
<FONT FACE="Times New Roman" SIZE="5"
COLOR="#0000FF">
This font is Times New Roman, Size is 5, Color is Blue
</FONT>
الناتج
This font is Times New Roman, Size is 5, Color is Blue
) (
<font size="7" color="red"> C </font> ustomize your font
الناتج Customize your font
<BASEFONT>الوسم
BODY
FONT
NameFace
مثال<BASEFONT Name="Arial" COLOR="#FF0000"
SIZE="5">
Arial
FontFont
BASEFONT
TextBody
ColorBASEFONT
BASEFONT .
HR> Horizontal Rule(HR)> وسم المسطرة األفقية
SIZE
<HR SIZE="5">
<HR SIZE="1">
<HR SIZE="10">
WIDTH
<HR WIDTH="80%">
<HR WIDTH="400">
<HR SIZE="5" WIDTH="60%">
ALIGN
center, left, right
<HR WIDTH="80%" ALIGN="center">
<HR WIDTH="400" ALIGN="left">
<HR SIZE="5" WIDTH="60%" ALIGN="right">
NOSHADE
NOSHADE
<HR SIZE="5" WIDTH="60%" ALIGN="center"
NOSHADE>
COLOR
Internet Explorer
<HR SIZE="5" WIDTH="60%" ALIGN="center"
COLOR="#FF0000" NOSHADE>
marqueeوسم تحريك النص
mmaarrqquueeee
<< mmaarrqquueeee >>……tteexxtt……<<// mmaarrqquueeee >>
behavior
ssccrroollllaalltteerrnnaattee ,,sslliiddee,,
direction
uupp,, ddoowwnnrriigghhtt ,, lleefftt,,
scrolldelay
scrollamount
loop
-مثال:
<<mmaarrqquueeee bbeehhaavviioorr ==""ssccrroollll"" ddiirreeccttiioonn ==““lleefftt"" lloooopp==““33""
bbggccoolloorr==""##00006666CCCC"">>
IInn TThhee NNaammee OOff AAllllaahh
<<//mmaarrqquueeee>>
Links والروابط Imagesالصور
Imagesالصور
––
––
–– IIMMGG
SSRRCC
––
–– jjppgg ggiiff ppnngg
أمثلة <img src="win.gif">
HHTTMMLL
<img src="images/win.gif">
HHTTMMLL
iimmaaggeess
<img src="http://www.images.com/win.gif">
خصائص الصور IImmaaggee HHeeiigghhtt aanndd WWiiddtthh
aa hheeiigghhtt
b) WWiiddtthh
-مثال: <img src="sunset.jpg" height="50" width="100">
AALLIIGGNN
BOTTOM, TOP, MIDDLE, LEFT, RIGHT
aa
BOTTOM
<IMG SRC="image.jpg" ALIGN="BOTTOM">
b TOP
<IMG SRC="image.jpg" ALIGN="TOP">
cc MIDDLE
<IMG SRC="image.jpg" ALIGN="MIDDLE">
dd LEFT
<IMG SRC="image.jpg" ALIGN="LEFT">
ee RIGHT
<IMG SRC="image.jpg" ALIGN="RIGHT">
VVSSPPAACCEE
مثال:مثال: <<IIMMGG SSRRCC==""iimmaaggee..jjppgg"" AALLIIGGNN==""TTOOPP""
VVSSPPAACCEE==""2200"" >>
HHSSPPAACCEE
مثال:مثال: <<IIMMGG SSRRCC==""iimmaaggee..jjppgg"" AALLIIGGNN==""RRIIGGHHTT"" SSPPAACCEE==""2200"">>
BBOORRDDEERR
مثال:مثال:
<IMG SRC="image.jpg“ BORDER="5">
AALLTT
<<iimmgg ssrrcc==""iimmaaggee11..jjppgg"" aalltt==""wweellccoommee ttoo mmyy wweebb ssiittee "">>
أنوع الصور المستخدمة في صفحات الويب.
GGrraapphhiicc IInntteerrnneett FFoorrmmaatt ((GGIIFF))
JJooiinntt PPhhoottooggrraapphhiicc EExxppeerrttss GGrroouupp ((JJPPEEGG))
PPoorrttaabbllee NNeettwwoorrkk GGrraapphhiiccss ((PPNNGG))
..
Links الروابط
EE--mmaaiill
<A> …………………</A>
Anchor
ية الخاصHREF (Reference Hypertext ) UURRLL
HHRREEFF::
<<aa hhrreeff=="" UURRLL "" >>
<<//aa>>
انواع االرتباطات
http://www.ksu.edu.sa
<A HREF=" http://www.ksu.edu.sa ">
King Saud University
</A>
King Saud University
.
</A ... >
<A>
<A href="http:\\www.ksu.edu.sa">
<img src="Image Path">
</A>
Image Path .
:
/AA
HTML
HREF
a HTML
index.html
> /AA HREF="index.html">Main Page<<
Main Page
b
<a
href="http://faculty.ksu.edu.sa/images/logo.gif">
</a>
MAILTOHREF
EMAIL .
<A HREF="MAILTO:[email protected]">
My Email
> /A<
Email My
الخاصيةtarget
__sseellff
_blank
<<aa hhrreeff==""hhttttpp::////wwwwww..ttccrr..eedduu..ssaa"" ttaarrggeett==""__sseellff "">>
TTeeaacchheerrss CCoolllleeggee
<<//aa>>
والفيديو الصوت
Voice & Video
لصفحات الويب والفيديو الصوت تضمين
–– eemmbbeedd
..
–– ssrrcc
<embed src="alarifi.wmv " >
htmlيوضح كيفية ادراج الفيديو في صفحة مثال
<html dir ="rtl" >
<head>
<title> </title>
</head>
<body>
<embed src=" Wildlife.wmv">
<p>
</p>
</body>
</html> بطريقة العرض المتعلقة Embed الوسم خصائص
wwiiddtthh
hheeiigghhtt
hhiiddddeenn
يوضح كيفية استخدام خصائص العرض للفيديو -مثال:<html dir ="rtl" >
<head>
<title> </title>
</head>
<body>
<embed src=" Wildlife.wmv " width="300" height="350"
>
<p>
</p>
</body>
</html>
بعمل الفيديو المتعلقة Embed الوسم خصائص
aauuttoossttaarrtt
lloooopp
vvoolluummee
يوضح كيفية استخدام خصائص عمل الفيديو -مثال:
<html dir ="rtl" >
<head>
<title> </title>
</head>
<body>
<embed src=" Wildlife.wmv " autostart="true"
volume="50">
<p> </p>
</body>
</html>
يوضح كيفية تكرار تشغيل الفيديو -مثال:
<html dir ="rtl">
<head>
<title> </title>
</head>
<body>
<embed src=" Wildlife.wmv " loop="true">
<pre>
Loop
</pre>
</body>
</html>
<pre>
HTML
br
ة الفالشإضاف–– ..
مثال<embed src="flashname.swf" width="360" height="135">
يوضح كيفية تشغيل الفالش -مثال:
<html dir ="rtl">
<head>
<title> </title>
</head>
<body>
<embed src="computer-intro_exam.swf" height="90%"
width="80%">
</body>
</html>
إضافة الصوت كخلفية <bgsound> الوسم
lloooopp
<bgsound src="Al-Fatihah.mp3" loop="2">
<object>اضافة ملفات الوسائط باستخدام الوسم
–– ddaattaa
–– ttyyppee
""iimmaaggee//jjppeegg"",,""iimmaaggee//ggiiff""
""aauuddiioo//wwaavv"",,""aauuddiioo//bbaassiicc""
""vviiddeeoo//mmppeegg"",,""vviiddeeoo//qquuiicckkttiimmee""..
–– aalliiggnn
"" "" "" "" "" "" "" "" "" ""
–– wwiiddtthh
–– hheeiigghhtt
–– hhssppaaccee
–– vvssppaaccee
object يوضح كيفية استخدام الوسم -مثال:<html dir ="rtl" >
<body>
<html>
<body>
<object data=" computer-intro_exam.swf " width="90%"
height="90%" >
</object>
</body>
</html>
الجداول
Tables
HHTTMMLL
الوسوم األساسية الخاصة بالجداول
<TABLE>...</TABLE>
<TR>...</TR>
<TD> Cell Data </TD>
انشاء جدول مكون من ثالثة صفوف وعمودين -مثال:<TABLE>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
طريقة التعامل مع الجداول
..
..
)على <TABLE>...</TABLE> الخصائص التي تستخدم مع الوسوم .1 مستوى الجدول ككل(
BORDER <TABLE BORDER="5">
<TABLE BORDER="0">
WIDTH <TABLE WIDTH="600">
<TABLE WIDTH="80%">
HEIGHT <TABLE HEIGHT="500">
<TABLE HEIGHT="100%">
CELLSPACING <TABLE CELLSPACING="10">
CELLPADDING
<TABLE CELLPADDING="10">
ALIGN right ,left ,center
<TABLE ALIGN="Left">
<TABLE ALIGN="Right">
BGCOLOR <TABLE BGCOLOR="#00FFFF">
)على مستوى الصف( <TR>...</TR> الخصائص التي تستخدم مع الوسوم .2
ALIGN Right, Left, CenterLeft
VALIGN Middle, Bottom, Top
BGCOLOR TABLE
... مثال يوضح استخدام خصائص الوسوم
<TABLE BORDER="5" HEIGHT="300">
<TR ALIGN="Left " BGCOLOR="#808080" >
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR ALIGN="Right " BGCOLOR="#C0C0C0" >
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR ALIGN="Center">
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
على مستوى ( <TD> …. </TD>الخصائص التي تستخدم مع الوسوم .3 ) الخلية
ALIGN Left, Center, Right
VALIGN Top, Middle, Bottom
WIDTH
HEIGHT
BGCOLOR
COLSPAN <TD COLSPAN="n">
n
ROWSPAN <TD ROWSPAN="n">
n
BGCOLOR
BODY
WIDTH, HEIGHT
TABLE
<TABLE BORDER="5">
<TR>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
</TR>
</TABLE>
CCOOLLSSPPAANN,, RROOWWSSPPAANN
واالن نعيد كتابة شفرة الجدول السابق مع خاصيتي الدمج
<TABLE BORDER="5">
<TR>
<TD COLSPAN="2"> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD COLSPAN="2"> Data </TD>
</TR>
</TABLE>
مثال آخر: لنقم بدمج الخاليا الموجودة في العمود األول
<TABLE BORDER="5">
<TR>
<TD ROWSPAN="3"> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
</TR>
</TABLE>
CCAAPPTTIIOONNCCAAPPTTIIOONN
TTAABBLLEE
مثاًل: <TABLE BORDER="5">
<CAPTION> Table Caption </CAPTION>
القوائم
Lists
HHTTMMLL
OOrrddeerreedd LLiissttss
UUnnoorrddeerreedd LLiissttss
<<OOLL>> ...... <<//OOLL>>
<<UULL>> ...... <<//UULL>>
LLII
LLiisstt IItteemm
مثال علي القوائم المتسلسلة
<html dir="rtl">
<body>
<OL>
<LI>
<LI>
<LI>
<LI>
<LI>
</OL>
</body>
</html>
مثال علي القوائم غير المتسلسلة )غير المرتبة( <html dir="rtl">
<body>
<UL>
<LI>
<LI>
<LI>
<LI>
< UL>
</body>
</html>
TTYYPPEE
UULLOOLL
LLII
AAaaIIii
<OL
TYPE="A">
<OL
TYPE="a">
<OL
TYPE="I">
<OL
TYPE="i">
<UL
TYPE="circle">
<UL
TYPE="square">
A
B
C
D
E
a
b
c
d
e
I
II
III
IV
V
i
ii
iii
iv
v
o
o
o
o
SSttaarrtt
<<OOLL SSTTAARRTT==""55"">>
//UULLUULL
<DIR> ... </DIR>
<MENU> ... </MENU>
مثال علي القوائم غير المتسلسلة )غير المرتبة(
<html dir="rtl">
<body>
<DIR>
<LI>
<LI>
<LI>
</DIR>
</body>
</html>
DDeeffiinniittiioonn LLiissttss
//DDLLDDLL
DDTT
DDDD
مثال علي قوائم التعريف
<html >
<body>
<DL>
<DT>HTML <DD>Hyper Text Markup Language
<DT>WWW <DD>World Wide Web
<DT>FTP <DD>File Transport Protocol
</DL>
</body>
</html>
-والنتيجة هي :HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transport Protocol
( Headingsالعناوين )
HH11 HH66
مثال
<H1>Heading 1</H1> Heading 1
<H2>Heading 2</H2> Heading 2
<H3>Heading 3</H3> Heading 3
<H4>Heading 4</H4> Heading 4
<H5>Heading 5</H5> Heading 5
<H6>Heading 6</H6> Heading 6
.
مثال علي العناوين
<html >
<body>
<html >
<body>
<DL>
<DT><H1>HTML</H1> <DD><H3>Hyper Text Markup
Language</H3>
<DT><H1>WWW</H1> <DD><H3>World Wide
Web</H3>
<DT><H1>FTP</H1> <DD><H3>File Transport
Protocol</H3>
</DL>
</body>
</html>
-والنتيجة هي :
HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transport Protocol
االطارات
Frames
––
––
ffrraammee11..hhttmmll,, ffrraammee22..hhttmmll,, ffrraammee33..hhttmmll ,, ffrraammee44..hhttmmll,,
ffrraammee55..hhttmmll
––
<<FFRRAAMMEESSEETT>> ......
<<//FFRRAAMMEESSEETT>>
<<BBOODDYY>> ...... <<//BBOODDYY>>
BODY
<HTML>
<HEAD>
<TITLE>Master File</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
FRAMESETخصائص الوسم COLS
لخاصية :امثلة توضح هذه ا
<FRAMESET
COLS="50%,50%">
</FRAMESET>
<FRAMESET
COLS="20%,50%,30%">
</FRAMESET>
<FRAMESET
COLS="200,300,*">
</FRAMESET>
<FRAMESET
COLS="200,*,15%,20%">
</FRAMESET>
<FRAMESET
COLS="150,*,2*">
</FRAMESET>
ROWS
ية :امثلة توضح هذه الخاص
<FRAMESET
ROWS="50%,50%">
</FRAMESET>
<FRAMESET
ROWS="20%,50%,30%">
</FRAMESET>
<FRAMESET
ROWS="50,120,*">
</FRAMESET>
<FRAMESET
ROWS="50,*,15%,20%">
</FRAMESET>
<FRAMESET COLS="*,2*">
</FRAMESET>
<FRAME>الوسم <IMG>
<FRAMESET>SRC
االن سنقوم بإتمام الشيفرة لبعض األمثلة المذكورة أعاله.المثال األول:
<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>
المثال الثاني:
<FRAMESET COLS="200,400,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>
ثال الثالث: الم <FRAMESET ROWS="50,*,15%,20%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
المثال الرابع: <FRAMESET COLS="*,2*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>
<FRAME
SRC><IMG SRC>
<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
<FRAME SRC="Jellyfish.jpg">
</FRAMESET>
كيفية تقسيم الصفحة الى اطارات افقية وعمودية معًا
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>
HTML
<FRAMESET>
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAMESET COLS="200,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>
</FRAMESET>
<FRAMESET>خصائص اضافية للوسم
<FRAMESET ROWS="50,*,15%,20%"
FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
BORDER
BORDER="n"
BORDERCOLOR
BORDERCOLOR="rrggbb"
FRAMESPACING
FRAMESPACING="n"
<FRAME>خصائص الوسم
MARGINHEIGHT
MARGINHEIGHT="n"
MARGINWIDTH
MARGINWIDTH="n"
SCROLLING
yesnoauto
Windows
SCROLLING="yes"
SCROLLING="no"
SCROLLING="auto"
NORESIZE
>frame<امثلة عل خصائص الوسم
<FRAMESET COLS="50%,50%">
<FRAME SRC="Jellyfish.jpg"
MARGINHEIGHT="40">
<FRAME SRC="frame2.html">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC ="Jellyfish.jpg"
MARGINHEIGHT="40" MARGINWIDTH="30">
<FRAME SRC="frame2.html">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC ="Jellyfish.jpg"
MARGINHEIGHT="40" MARGINWIDTH="30"
SCROLLING="yes">
<FRAME SRC="frame2.html">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC ="Jellyfish.jpg"
MARGINHEIGHT="40" MARGINWIDTH="30"
SCROLLING="yes" NORESIZE>
<FRAME SRC="frame2.html">
</FRAMESET>
<NOFRAMES> ... </NOFRAMES>الوسم
Netscape, MS
Explorer
<HTML>
<HEAD>
<TITLE>Main File</TITLE>
</HEAD>
<FRAMESET ROWS="50,*,15%,20%"
FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
<NOFRAMES>
<BODY>
</BODY>
</NOFRAMES>
</HTML>
<frame>للوسم nameالخاصية FRAME
قبل تطبيق هذه الخاصية نستعرض شفرات الملفات السابقة التى قمنا بإنشائها وهي كما يلي
شفرة الملف الرئيسي الذي أسميته <html >
<head>
<title>Master File</title>
</head>
<frameset rows="40%,30%,30%" frameborder="1"
border="5"
bordercolor="green" >
<frame src="frame1.html" >
<frameset cols="25%,25%" frameborder="1">
<frame src="frame2.html" SCROLLING="yes" >
<frame src="frame3.html">
</frameset>
<frameset cols="25%,25%" frameborder="1">
<frame src="frame4.html" >
<frame src="frame5.html">
</frameset>
</frameset>
</html>
شفرة الملف <html dir="rtl" >
<head>
<title> </title>
</head>
<body>
<p align="center">
<b>
<font color="blue" size="6">
</font>
</b>
</p>
<body>
</html>
شفرة الملف <html dir="rtl">
<head>
<title> </title>
</head>
<body bgcolor="aqua">
<basefont size="5" >
<marquee behavior ="scroll" direction ="right" loop="5"
bgcolor="sky blue">
</marquee>
<pre>
<font face="Traditional Arabic" size="5" >
:-
</font>
</pre>
</body>
</html>
شفرة الملف <html dir="rtl">
<head>
<title> </title>
</head>
<body bgcolor="aqua">
<basefont size="5" >
<b>
<font face="Andalus" size="6" >
<center>
img
<br>
<img src="Jellyfish.jpg" border="2" height="50%"
width="40%">
</center>
</font>
</b>
</body>
</html>
شفرة الملف <html dir="rtl">
<head>
<title> </title>
</head>
<body >
<font face="Simple Indust Shaded" size="6" color="red">
<b>
<p align="center">
<u>
</u>
</p>
</font>
<font face="Traditional Arabic" size="5" color="blue">
<ol>
<li>
<font color="red">
<ol type="a">
<li>
<li>
<li>
<li>
</ol>
</font>
<li>
<font color="red">
<ol type="a">
<li>
<font color="green">
<ol type="circle">
<li>
<li>
</ol>
</font>
<li>
</ol>
</font>
<li>
<font color="red">
<ol type="a">
<li>
<li>
</ol>
</font>
<li>
<font color="red">
<ol type="a">
<li>
<li>
</ol>
</font>
<li>
<font color="red">
<ol type="a">
<li>
<li>
<li>
</ol>
</font>
</ol>
</font>
</b>
</body>
</html>
شيفرة الملف الذي يحتوي على الوصالت التشعبية والذي أسميته
<html>
<body>
<table border="10" align="center" bgcolor="white"
width=500
bordercolor="#3574EC">
<tr height=60 align="CENTER" valign="middle"
bgcolor=#56A5EC >
<td bgcolor="white" align="CENTER" valign="middle"
colspan="3">
<font face="Segoe Print" color=black size=4><b>
</b></font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td>
<font face="Traditional Arabic"color="black" size="5">
<a href="frame2.html" >
</a>
</font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td >
<font face="Traditional Arabic"color="black" size="5">
<a href="frame3.html" >
</a>
</font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td >
<font face="Traditional Arabic"color="black" size="5">
<a href="frame4.html">
</a>
</font>
</td>
</tr>
</table>
</body>
</html>
–– ffrraammee11..hhttmmll
–– NNAAMMEE
<<AA< ... >< ... >//AA>>
TTAARRGGEETT
–– NNAAMMEE
mmaaiinnwwiinnddooww
هي: إذن تصبح شفرة الملف األساسي <html >
<head>
<title>Master File</title>
</head>
<frameset rows="40%,30%,30%" frameborder="1"
border="5"
bordercolor="green" >
<frame src="frame1.html" name="mainwindow">
<frameset cols="25%,25%" frameborder="1">
<frame src="frame2.html" SCROLLING="yes" >
<frame src="frame3.html">
</frameset>
<frameset cols="25%,25%" frameborder="1">
<frame src="frame4.html" >
<frame src="frame5.html">
</frameset>
</frameset>
</html>
المرحلة االخيرة
TARGET
frame5.html
<html>
<body>
<table border="10" align="center" bgcolor="white"
width=500
bordercolor="#3574EC">
<tr height=60 align="CENTER" valign="middle"
bgcolor=#56A5EC >
<td bgcolor="white" align="CENTER" valign="middle"
colspan="3">
<font face="Segoe Print" color=black size=4><b>
</b></font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td>
<font face="Traditional Arabic"color="black" size="5">
<a href="frame2.html" target="mainwindow">
</a>
</font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td >
<font face="Traditional Arabic"color="black" size="5">
<a href="frame3.html" target="mainwindow">
</a>
</font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td >
<font face="Traditional Arabic"color="black" size="5">
<a href="frame4.html" target="mainwindow">
</a>
</font>
</td>
</tr>
</table>
</body>
</html>
النماذج
FROMS
HTML
––
––
––
––
––
JavaScript
ادراج النماذج في صفحات الويب يتم باستخدام الوسوم <FORM /FORM>
FORMخصائص الوسم :
ACTION
CGIServer
<FORM ACTION="mailto:[email protected]">
...
</FORM>
<FORM ACTION="name_and_address_of_CGI_script">
...
</FORM>
CGI Common Gateway Interface
.
METHOD
ACTION
a GETServer
b Post
<FORM ACTION="mailto:[email protected]"
METHOD="post">
...
</FORM>
<FORM ACTION="name_and_address_of_CGI_script"
METHOD="get">
...
</FORM>
a application/x-www-form-urlencoded
b text/plain
MIMEail Mnternet Ipurpose -ultiM
xtentionsE
أشكال البيانات
INPUT
inputخصائص الوسم
<input type="text">
<input
type="password">
<input type="hidden">
<input type="radio">
<input
type="checkbox">
<input type="submit">
<input type="reset">
<input type="button">
<FORM >
Please enter your address
<INPUT TYPE="text" NAME="address">
</FORM>
Please enter your address
NAME
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address" VALUE="
Riyadh, Saudi Arabia">
</FORM>
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address" VALUE="
Riyadh, Saudi Arabia" SIZE="40">
</FORM>
size
.
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address" VALUE="
Riyadh, Saudi Arabia" SIZE="40"
MAXLENGTH="30">
</FORM>
passwordالحقل
text
******
<FORM ...>
Please enter your name :
<INPUT TYPE="text" NAME="the name" VALUE=""
SIZE="40" MAXLENGTH="30">
Please enter your passwod :
<INPUT TYPE="password" NAME="the password"
VALUE="" SIZE="40" MAXLENGTH="30">
</FORM>
hiddenالحقل
والمثال التالي يوضح الحقل المخفي<FORM ...>
Please enter your name :
<INPUT TYPE="text" NAME="the name" VALUE=""
SIZE="40" MAXLENGTH="30">
<INPUT TYPE="hidden" NAME="my forms"
VALUE="form1">
Please enter your passwod :
<INPUT TYPE="password" NAME="the password"
VALUE="" SIZE="40" MAXLENGTH="30">
</FORM>
تي أطرح لك مثااًل أو حالة قد تواجهك ولكي أجيب على هذا السؤال دع كمصمم صفحات ويب...
في النموذج األول ...<INPUT TYPE="hidden" NAME="my forms"
VALUE="form1">
في النموذج الثاني ...<INPUT TYPE="hidden" NAME="my forms" VALUE="
form2">
في النموذج الثالث ...<INPUT TYPE="hidden" NAME="my forms" VALUE="
form3">
my forms=form1 my forms=form2 my forms=form3
<FORM ...>
<TABLE BORDER="0">
<TR>
<TD>Please enter your name : </TD>
<TD>
<INPUT TYPE="text" NAME="the name" VALUE=""
SIZE="40" MAXLENGTH="30">
</TD></TR>
<TR>
<TD>Please enter your password :</TD>
<TD>
<INPUT TYPE="password" NAME="the password"
VALUE="" SIZE="40" MAXLENGTH="30">
</TD></TR>
</TABLE>
</FORM>
الحقول الخاصة باالختيار من متعدد
Radioالنوع االول زر الخيار
-مثال :
Internet Explorer 5.0
Internet Explorer 6.0
Internet Explorer 7.0
Internet Explorer 8.0
:
<FORM>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
</FORM>
:
NAME
browser
<FORM>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
</FORM>
:
<FORM>
<INPUT TYPE="radio" NAME="browser" > Internet
Explorer 5.0 <BR>
<INPUT TYPE="radio" NAME="browser" > Internet
Explorer 6.0 <BR>
<INPUT TYPE="radio" NAME="browser" > Internet
Explorer 7.0 <BR>
<INPUT TYPE="radio" NAME="browser" > Internet
Explorer 8.0 <BR>
</FORM>
CHECKBOXالنوع الثاني مربع االختيار
CHECKBOXRADIORADIO
checkboxTYPE [TYPE="checkbox"]
NAME
-مثال :
<FORM>
<INPUT TYPE="checkbox" NAME="speed" >
<BR>
<INPUT TYPE="checkbox" NAME="thickness " >
<BR>
<INPUT TYPE="checkbox" NAME="non flexibility " >
<BR>
<INPUT TYPE="checkbox" NAME="accuracy " >
<BR>
</FORM>
Radio CheckBox
RADIOCHECKBOX
RADIOCHECKBOX
.
النوع الثالث قوائم االختيارINPUT
<SELECT>
<OPTION>
<OPTION>
<OPTION>
.....
.....
</SELECT>
SELECTSELECT
OPTION
SELECT
NAMESIZE
-مثال :
<FORM>
Department:
<SELECT NAME="browser" SIZE="1">
<OPTION> Computer
<OPTION> Mathematics
<OPTION> Science
<OPTION> English
</SELECT>
</FORM>
MULTIPLE
SIZE
<FORM>
Department:
<br>
<SELECT NAME="browser" SIZE="4" MULTIPLE >
<OPTION> Computer
<OPTION> Mathematics
<OPTION> Science
<OPTION> English
</SELECT>
</FORM>
)صندوق الرسائل( TEXTAREA الحقل
<TEXTAREA> ... </TEXTAREA>
ومن خصائصه NAME
<TEXTAREA> ... </TEXTAREA>
<TEXTAREA NAME="comments">
Hello, please write your comments here :-)
</TEXTAREA>
a COLS
b ROWS
<TEXTAREA NAME="comments" COLS="30"
ROWS="4">
Hello,please write your comments here
</ TEXTAREA >
WRAP
a virtual
<TEXTAREA NAME="comments" COLS="30"
ROWS="6" WRAP="virtual">
</TEXTAREA>
b physical
<TEXTAREA NAME="comments" COLS="30"
ROWS="6" WRAP="physical">
</TEXTAREA>
c off
<TEXTAREA NAME="comments" COLS="30"
ROWS="6" WRAP="off">
</TEXTAREA>
Submitالحقل
<INPUT TYPE="submit" VALUE="Press here to send the
form">
Resetل الحق
submit
<INPUT TYPE="reset" VALUE="Forget about it">
buttonالحقل
JavaScript
reset, submit
<INPUT TYPE="button" VALUE="This is a sample
button">
CSSأوراق األنماط المتعاقبة
Cascading Style Sheets
.ھ
:
––
––
––
––
––
––
––
مثالP { color : blue }
يمكن الجمع بين أكثر من محدد وذلك بالفصل بينهما بفاصلةSELECTOR1, SELECTOR2 { property : value }
مثالH1,P { color : blue }
يمكن الجمع بين أكثر من تصريح وذلك بالفصل بينهما بفاصلة منقوطةSELECTOR { property1 : value1 ; property2 : value2 }
مثال: B { color : green ; text-align: center }
األنماط المباشرة .Style
مثال<html>
<body>
<p style="background:blue; color: white; font-size:30
;font-family:Impact" >
King Saud University
</p>
<b style="background: yellow; color: green">
Teachers College
</b>
<br>
<h1 style=" background-image:url(Desert.jpg);
color:green">
Computer Department
</h1>
</body>
</html>
األنماط الداخلية <style></style> .
مثال<html dir rtl >
<head>
<style type text css >
B { background yellow; color green}
A link { color red ; text decoration none }
UL { margin right 75px ; color #ff0000 }
UL UL { margin right 15px ; color #0000ff }
< style>
< head>
<body>
<b> < b>
<br> <a href http\\www ksu edu sa >
< a> <br>
<ul>
<li>
<li>
<li>
<ul>
<li>
<li>
< ul>
<li>
<li>
< ul>
< body>
< html>
األنماط الخارجية
CSS CSS
.
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
style.css CSS
مثال
css css style.cssالملف االول
em { font-size : 25 ; font-weight : bold }
a:link { color: yellow ; text-decoration: none }
ol{ margin-right: 75px ; color : green }
p{background: blue; color: white}
b{color:aqua;text-decoration: underline}
marquee{background: red; color: yellow}
body{ background-image:url(Desert.jpg);background-
position: center right;
background-repeat: no-repeat}
الملف الثاني <html dir rtl >
<head>
<link rel stylesheet type text css
href style css >
< head>
<body>
<marquee> < marquee>
<br>
<b> < b>
<br>
<a href http \\www ksu edu sa >
< a>
<br>
<p> < p>
< body>
< html>
page1.html
الملف الثالث <html dir rtl >
<head>
<link rel stylesheet type text css
href style css >
< head>
<body>
<em> < em>
<br>
<ol>
<li>
<li>
<li>
< body>
< html>
page2.htmlDesert.jpg
مع الفئة تطبيق class
: H1
:كما يلي<html dir="rtl">
<head>
<style type="text/css">
H1.one {color : green}
H1.two {color : red}
</style>
</head>
<body>
<h1> </h1>
<h1 class="one"> </h1>
<h1 class="two"> </h1>
</body>
</html>
الفئات العامةCSS html
كالمثال التالي<html dir="rtl">
<head>
<style type="text/css">
.bb {color : red}
</style>
</head>
<body>
<b class="bb"> </b>
<br>
<u class="bb"> </u>
</body>
</html>
توريث الخصائص
مثال<html>
<head>
<style type="text/css">
i {color : red}
b {background: yellow}
</style>
</head>
<body>
<i> Cascading <b> Style </b> Sheets </i>
</body>
</html>
JavaScriptمدخل الى لغة
و لغة الفرق بين لغة ––
––
––
––
كتابة برامج لغة JavaScriptHTMLhead
bodyHTML
HTMLJavaScript
HTML
JavaScript
طرق كتابة كود
<script type = " text/javascript">
Write Code Here
</script>
<script language="JavaScript">
Write Code Here
</script>
اوامر لغة أمر الطباعة html
document.write(" ");
( html )
document.write("<h </h1>");
htmlstyle
document.write("<h1 style=\"color : red\">
</h1>");
document.write( sum );
document.write sum );
document.write(": " + sum + " ");
(document.writeln)
(document.write)
(<br >) .
document.write(" Computer <br >Department ");
كتب بها وهي خاصة في كائنات يروج نافذة للمستخدم نحدد نحن ما خ .2 مثل النافذة التالية النوافذ
alert
window.alert("Welcome to My Web Site");
بعض االوامر التي تستخدم داخل كود الـــــ
n\ n \window.alert("hi
");all
t\ t \window.alert("hi
");all
r\ r \window.alert("hi
");all
\\ \\window.alert("hi
");all
"\ " \lert("hi window.a
");all
'\ ' \window.alert("hi
");all
كتب بها " اي نافذة قراءة من لوحة يحدد هو ما يخروج نافذة للمستخدم .3 " وهي خاصة بكائنات النوافذ يحالمفات
( prompt )
window.prompt("Please Write Your Name","Name");
المتغيرات في الــ
JavaScriptvar
مثالvar name ;
( integer Or float )
.
التحويل لألعداد الصحيحة
parseInt ( );
مثالvar number = 55 ;
parseInt (number) ;
التحويل لألعداد ذات االرقام العشرية
parseFloat( );
مثالvar number = 5.4 ;
parseFloat (number) ;
.
مثلةأ االول المثال
<html>
<head><title> Java Script</title>
<script>
var name ;
name = window.prompt ( "Please Write Your Name"," Your
Name");
document.write( " Welcome : " + name ) ;
</script>
</head>
<body> </body>
</html>
المثال الثاني
<html>
<head><title> Java Script</title>
<script type = "text/javascript" >
window.alert( "Welcome");
</script>
</head>
<body></body>
</html>
أنواع المؤثرات في لغة : المؤثرات الحسابية .1
JavaScript
a+b a+b c=a+b
a-b a-b c=a-b
b
a a/b c=a/b
aXb a*b c=a*b
a%b c=a%b
مؤثرات المقارنة .2
TrueFalse
x == y ==
x != y ! =
x > y >
x < y <
x >= y >=
x <= y <=
المؤثرات المنطقية .3
& & and
|| or
! not
مؤثرات التعيين المركبة .4
(=,*=,/=,%=-+=, )
JavaScript
b=b+cb+=c
b=b-cb- =c
b=b*cb*=c
b=b/cb/=c
b=b%cb%=c
مؤثرات التزايد و التناقص .5
++JS : مثال
JS
JS +=1
JS = JS +1
JavaScriptجمل التحكم في لغة
––
––
––
Conditional Statementsالجمل الشرطية
(True
False
انواع الجمل الشرطية
if
if ……. statement
.
صيغتهاif (condition)
statement;
-مثال :
<html dir="rtl">
<head>
<script type ="text/javascript">
var pass_2="omar";
var user_pass;
user_pass = window.prompt(" );
if (pass_2 == user_pass)
document.write (" );
</script> </head>
<body></body>
</html>
if ……. else statement
صيغتهاif(condition)
statement1;
else
statement2;
-مثال :<html dir="rtl">
<head>
<script type ="text/javascript">
var pass_2="omar";
var user_pass;
user_pass = window.prompt(" );
if (pass_2 == user_pass)
document.write (" );
else
document.write (" ");
</script> </head>
<body></body>
</html>
- -
.
.
صيغتهاif (condition1)
statement1;
else if(condition2)
statement2;
else if(condition3)
statement3;
:
else if(condition n)
statement n;
else
statement;
-مثال :
<html dir="rtl">
<head>
<script type = "text/javascript">
var degree;
degree = window.prompt(" ");
if (degree>100 || degree<0 )
document.write(" ") ;
else
{
if (degree>=90)
document.write(" ") ;
else if (degree>=80)
document.write(" ") ;
else if (degree>=70)
document.write(" ") ;
else if (degree>=60)
document.write(" ") ;
else
document.write(" ") ;
}
</script> </head>
<body></body>
</html>
Switch
close condition
الصيغة العامة للجملة :switch(variable)
{
case value 1: statement; break;
case value 2: statement; break;
:
:
case value n: statement; break;
default :statement;
}
}
variable [value1-------
value n]
case
break
default[value1-------value
n]
<html dir="rtl">
<head>
<script type = "text/javascript">
var country ;
country=window.prompt( " ");
switch ( country )
{
case " " :
document.writeln("<h3> </h3>") ;
break ;
case " " :
document.writeln("<h3> </h3>") ;
break;
case " " :
document.writeln("<h3> </h3>") ;
break ;
case " " :
document.writeln("<h3> </h3>") ;
break ;
default :
document.writeln("<h3>
</h3>") ;
}
</script>
</head>
<body></body>
</html>
Iteration Statements الحلقات التكرارية )جمل التكرار(
الحلقات التكراريةانواع
for
صيغتها
for(counter=initial value;condition;step)
condition
Step
10الى 1اكتب برنامج لطباعة االعداد من -مثال :<html dir="rtl">
<head>
<script type = "text/javascript">
document.write(" <br>");
for (var i = 1 ; i <=10; i++ )
document.write(i+"<br>") ;
</script>
</head>
<body></body>
</html>
أي بشكل ( 1الى 10تدريب عدل البرنامج اعاله لطباعة االعداد من )تنازلي
while
صيغتها
while (condition)
{
statement 1 ;
statement n ;
}
10الى 1اكتب برنامج لطباعة االعداد من -مثال :
<html >
<head>
<script type = "text/javascript">
var i = 1 ;
while (i <= 10 )
{
document.write ( i+"<br>") ;
i++ ;
}
</script>
</head>
<body></body>
</html>
do-while
while
do while
صيغتها do
{
statement 1;
statement n ;
} while(condition)
10الى 1كتب برنامج لطباعة االعداد من ا -مثال :
<html >
<head>
<script type = "text/javascript">
var i = 1 ;
do {
document.write( i+"<br>" ) ;
i++ ;
}
while ( i <= 10 )
</script>
</head>
<body></body>
</html>
JavaScriptو htmlمستخدمًا لغتي -:مثال
لي :التا شكلانشي نموذج إلدخال تاريخ الميالد كما بال
علمًا بان 31الى 1ن القيم ميأخذ Day اليوم 12الى 1يأخذ القيم من Month الشهر
2013الى 1960 يأخذ القيم من Year السنة
<html>
<body>
<form>
<table border="1 align="center" bgcolor="aqua">
<tr>
<td ><b>Date of Birth :</b></td>
<td>
Day
<select name="Day" size="1" >
<script language="JavaScript">
for(i=1;i<=31;i++)
document.writeln("<option value=i>" + i +
"</option>");
</script>
</select> ,
Month
<select name="Month" size="1" >
<script language="JavaScript">
for(i=1;i<=12;i++)
document.writeln("<option value=i>" + i +
"</option>");
</script>
</select> ,
Year
<select name="Year" size="1" >
<script language="JavaScript">
for(i=1960;i<=2013;i++)
document.writeln("<option value=i>" + i +
"</option>");
</script>
</td>
</tr>
</table>
</form>
</body>
</html>
Functionsوالدوال Arraysالمصفوفات
Arraysالمصفوفات
االحادية تعريف المصفوفة
var name =new Array(size)
namesize
n n -1
-بناء المصفوفة :
الطريقة األوليvar family = new Array (4)
family [0] = "father"
family [1] = "mother"
family [2] = "brother"
family [3] = "sister"
الطريقة الثانيةVar family = new Array (4)
family = ["father","mother",borther","sister"]
الطريقة الثالثة
var family = new Array ("father", "mother", "borther",
"sister")
-: طباعة عناصر المصفوفة( )document.write
-مثال :
<html>
<head>
<script type="text/javascript">
var family = new Array (4);
family [0] = "father";
family [1] = "mother";
family [2] = "brother";
family [3] = "sister";
for(i=0;i<4;i++)
document.write(family[i]+"<br>");
</script>
</head>
<body>
</body></html>
document.write(family);
من العناصر في مصفوفة ثم طباعتها على nاكتب برنامج إلدخال -مثال : الشاشة
<html>
<head>
<script type="text/javascript">
var i,n;
n=window.prompt(" ");
var x=new Array(n);
for(i=0;i<n;i++)
{
var y=i+1;
x[i]=window.prompt(" "+y);
}
for(i=0;i<n;i++)
document.write("<b>"+x[i]+"</b><br>");
</script>
</head>
<body>
</body>
</html>
الثنائية تعريف المصفوفة
var arr=new Array(4)
var arr =new Array(4)
for (i=0; i <4; i++)
arr [i]=new Array(4)
arr
arr[0] arr [1]
arr[2]
arr[3]
برنامج إلدخال عناصر مصفوفة ثنائية مكونة من اربعة صفوف -مثال :
وأربعة اعمدة ثم طباعتها على شكل المصفوفة الثنائية
<html>
<head>
<script type="text/javascript">
var arr = new Array(4);
var i,j;
document.writeln("<h2> </h2>");
for (var i = 0; i < 4; i++)
{
arr[i] = new Array(4);
for (var j = 0; j < 4; j++)
{
arr[i][j]=window.prompt(" ","");
}
}
for (i=0 ;i< 4;i++)
{
for (j=0 ;j< 4;j++)
document.writeln(arr[i] [j] + " ");
document.writeln("<br>");
}
</script>
</head>
<body>
</body>
arr
arr [0] arr [1]
arr[2]
arr [3]
arr (4) arr (4) arr (4) arr (4)
</html>
-مثال : م واالسم والعنوان من الموظفين تشمل الرق nبرنامج إلدخال بيانات
على شكل جدول والراتب ثم طباعتها
<html dir="rtl">
<head>
<script type="text/javascript">
var i,j,n;
var employee = new Array(n);
n=window.prompt(" ","");
for (var i = 0; i < n; i++)
{
var x=i+1;
window.alert(" "+x);
employee[i] = new Array(4);
for (var j = 0; j < 4; j++)
{
if(j==0)
employee[i][j]=window.prompt(" ","");
else if(j==1)
employee[i][j]=window.prompt(" ","");
else if(j==2)
employee[i][j]=window.prompt(" ","");
else if(j==3)
employee[i][j]=window.prompt(" ","");
}
}
document.write("<table width='50%' bgcolor='green'
border='4'>");
document.write("<tr><td align='center' colspan='4'>
</td></tr>");
document.write("<tr><td > </td><td > </td>");
document.write("<td > </td><td > </td></tr>");
for (i=0 ;i< n;i++)
{
document.write("<tr>");
for (j=0 ;j< 4;j++)
document.write("<td>"+employee[i] [j]+"</td>");
document.write("<tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
Functionsالدوال
الفائدة من استخدام الدوال
الصيغة العامة للدالةfunction function _ name (par1,par2,….)
{
function statements;
return(expression);
}
o function
o : function name
o (par1,par2…
o function statements
o return expression
-مثال :
من قبل دخلينمين برنامج يحتوي على دالة تقوم بإيجاد حاصل جمع عدد المستخدم
<html>
<head>
<script type = "text/javascript">
var x,y,z ;
x=parseInt(window.prompt(" x",""));
y=parseInt(window.prompt(" y",""));
document.write ( x ) ;
document.write ( "<br>" + y ) ;
z = summation ( x , y ) ;
document.write ( " <br> " + z ) ;
function summation ( a , b )
{
var sum = 0 ;
sum= a + b ;
return sum ;
}
</script>
</head>
<body></body>
</html>
-مثال : ا( داخلهبله برنامج يحتوي على دالتين )دالة تقوم باستدعاء دا
لتي تقوم ا خرى اال الدالة االولى تقوم بإدخال عدد ثم استدعاء الدالة بحساب مكعب العدد
<html>
<head>
<script type = "text/javascript">
function output ( )
{
var x,t ;
x=parseInt(window.prompt(" x",""));
t = cube (x) ;
document.writeln ( t ) ;
}
function cube ( y )
{
return y*y*y ;
}
</script>
</head>
<body onload = " output ( ) " ></body>
</html>
onload = " output ( ) "
body output ( )
Java Scriptربط النماذج مع لغة -مثال :
تطبيقي يحتوي على برنامج نموذج بالشكل التالي : .1
هر ندها تظع يقوم المستخدم بتعبئة النموذج و الضغط على زر "اعرض" .2
:لي ما بالشكل التاالبيانات المدخلة في النموذج على جدول ك
بل من ق رفةعلمًا بان البيانات المدخلة في النموذج تقوم دالة مع
المستخدم بتخزينها في الجدول نص البرنامج :
<html dir="rtl">
<head>
<script type="text/javascript">
function information( )
{
var name=info.name.value;
var job=info.job.value;
var add=info.address.value;
var comm=info.comments.value;
document.writeln("<table cellpadding='5' border='1'
width='80%' align='center'");
document.writeln("dir='rtl' bgcolor='sky blue'
bordercolor='red'>");
document.writeln("<caption><h3>
</h3></caption>");
document.writeln("<tr><td width='30'><b>
:</b></td><td>" + name + "</td></tr>");
document.writeln("<tr><td width='30'><b>
:</b></td><td> " + job + "</td></tr>");
document.writeln("<tr><td width='30'><b>
:</b></td><td> " + add + "</td></tr>");
document.writeln("<tr><td width='30'><b>
:</b></td><td> " + comm + "</td></tr>");
document.writeln("</table>");
}
</script>
</head>
<body >
<form name="info" action="">
<table bgcolor="green" border="3" width="50%"
align="center">
<tr>
<td> : </td>
<td><input type="text" name="name" value=""
size="31"></td>
</tr>
<tr>
<td> :</td>
<td> <input type="text" name="address" value=""
size="45"></td>
</tr>
<tr>
<td> :</td>
<td><input type="text" name="job" value=""
size="20"></td>
</tr>
<tr>
<td> :</td>
<td>
<textarea name="comments" rows="4"
cols="50"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="show" value=" "
onclick="information( )">
<input type="reset" name="del" value=" " >
</td>
</tr>
</table>
</body>
</html>