صفحه 1:
به نام خدا طراحی وب رشته مهندسی کامپیوتر و فناوری اطلاعات

صفحه 2:
نحوه نمره دهی “ميان ترم 00م #تمرینات کلاسی ۳ © حضور منظم و موثر در كلاس *يروزه 3 #پایان ترم ۷ #غیبت غیر مجاز- حذف| جمع ۲۱ نمره

صفحه 3:
نحوه نمره دهی “ميان ترم 00م #تمرینات کلاسی ۳ © حضور منظم و موثر در كلاس *يروزه 3 #پایان ترم ۷ #غیبت غیر مجاز- حذف| جمع ۲۱ نمره

صفحه 4:
اطلاعات تماس محمد على آراسته کارشناس ارشد فناوری اطلاعات ‎Ma.arasteh@gmail.com‏ ‏موضوع ایمیل: 9۷۵01-۷60[ ‎Www.arasteh.persiangig.com‏ جزوات و اسلایدهای درسی درون سایت قرار می گیرد تماس بیرون کلاس فقط از طریق ایمیل

صفحه 5:
IIR #نوع: پیاده سازی #عنوا : ساختن صفحات شخصی #آخرين مهلت تحويل: هفته آخر كلاس ‎ops?‏ ارائه: حضوری و در کارگاه ‏هر گونه کپی برداری صرف و بدون تحقیق صفر تلقی می شود. ‏نحوه ارائه حتما بایدحضوری بوده و از کدهای نوشته شده سوال پرسیده می شود. ‎ ‎

صفحه 6:
فصل اول

صفحه 7:
?Internet And Web ‎J&ex «<2 (International networking) cs =.!°‏ )5 هزاران کامپیوتر که به یکدیگر متصل اند می باشد که با زبانی یکسان وتحت پروتکل اینترنت با یکدیگر سخن میگویند. ‏وب با (۷۷60 ۷۷۱06 ۷۷۵۲۱۵) ۷۷۷۷۷۷ یکی از مهمترین سیستم های ارتباطی و اطلاع رسانی است که یکی از مهمترین قسمت های اینترنت نیز میباشد ‏گاینترنت مجموعه ای از شبکه های کامپیوتری مرتبط به هم است در حالی که وب میتواند روی کامپیوتر جدا از شبکه هم اجرا شود ‎ ‎ ‎

صفحه 8:
Web Interactive .__.<. Web® * ارسال اطلاعات توسط صفحات ایجاد شده و به کاربران ارسال می شود ودریافت اطلاعات از طریق فرم ها و توسط برنامه هایی نظیر ات6 صورت می گیرد. #صفحات وب شامل :۳۱۷06۲۱۱۳5 و ۲۱۷۵۵۲۲65 و 8 می باشد.

صفحه 9:
Client / Server #مدل 5/) بر اساس کلاینت , سرور و شبکه می باشد. #نرم افزار كلاينت نقش 067]366] یا رابط را بین سیستم کاربر و سیستم سرور دارد , به نرم افزار ۷۷60 , ‎Web Client‏ ۲ ایا مرورگر وب گفته می شود. La ۰ ‏لمكم‎ Response (Information)

صفحه 10:
Web Browser یک مرورگر با کمک یک 60(165] درخواستی برای خواندن یک صفحه از وب سرور میکند. “اين 860165 با درخواست بر اساس استاندارد ارتباطی يا پروتوکل ۳ بوده و شامل آدرس صفحه مورد نظر میباشد. Uniform) . ‏#الابه آدرس‌صفحانوبگفته میشود‎ (Resource Location http://www. apple.ir/student/lesson.html :Ju.® ال آ د ما ‎pa LB pl‏ آدرس سرويس دهنده بروتكل دستيابي ‎ ‎ ‎

صفحه 11:
Static Wab Pages © صفحات وب ایستا شامل کدهای |۲۱۲۲ بوده که قبل از اینکه هر نوع درخواستی برای آن وجود داشته باشد به طور کامل محتویات آن مشخص شده است. شکل ظاهری همواره یکسان خواهد بود صرف نظر از اینکه چه کسی در چه زمانی و با چگونه صفحه را مشاهده خواهد کرد. © مزایا : طراحی آسان و به کارگیری سریع در شبکه معایب : عدم امنیت و نداشتن صفحات سفارشی وب

صفحه 12:
>) Static Wab Pages WEB SERVER 3,Web server locates .html file 4, HTML stream (irom .htm| page) retumed to browser 2. Client requests) Web page 5. Browser processes HIML| ‘and displays page CLIENT 4. Author writes HTML

صفحه 13:
Client-Side Dynamic Page #صفحه پویا صفحه ای است که بر اساس نیاز ما تغییر کند #تکنولوژی که پویایی صفحه از جایگاه سرویس گیرنده (16۳/)) تحقق ‎shh os‏ #ماژول هایی به مرورگر ملحق میشود که تمام عملیات ایجاد صفحات پویا را انجام مى دهد. JavaScript TTT ‏ا‎ * ActiveX Controls ° Java Applet ° flash °

صفحه 14:
Client-Side Dynamic Page WEB SERVER 3.Web server locates HTML and instructions file 1. Author writes instructions 4, HTML and instructions are retumed to browser 5. A module in the browser processes instructions and tums them into HTML 2, Client requests web page CUENT 6. Browser processes HTML and displays page

صفحه 15:
Java Script #زبان دستوری 3۷356101[ دارای امکانات متعدد جهت کنترل و مدیریت رفتار و محتویات یک مرورگر میباشد. #قدرت انجام عملیات بر روی فایل را ندارد. زبانی 5605/11۷6 ۵56 است.

صفحه 16:
VB Script 1 فقط تن وسط مرورگر های‌ش رک هایکروساف قابلتسفسیر هستند حساس به حروف بزرگ و کوچک نیست. ©

صفحه 17:
ActiveX Controls #به عنصری ‎C++ , C#, Java Lig us‏ بياده سازى شود. #امکان استفاده 8۲۴) , ۲1۳06۲ تایید کاربر و یا دستیابی به بانک اطلاعاتی را فراهم می آورد. گاز طریق تگ <00[661> به صفحات وب اضافه شده. #امکان عملیات روی فایل و رجیستری را دارد.

صفحه 18:
Java Applet #یک زبان مستقل از ۱۵1۳0۳۲۳ است. #هدف استفاده از جاوا برای ۸۵0016 ها میباشد که توسط تگ <00۱6> به صفحه وب ملحق میشود. ۷ توسطمرورگر 00۷۷۲۱۱0۵0 شده وتوسط ماشیرمجایی جاوا (8۷2/) موجود در مرورگر تسفسیر ميشود.

صفحه 19:
flash فایلهایی هستند که اطلاعاتی را به صورت گرافیکی متحرک به ما نمایش می دهند

صفحه 20:
Server-Side Dynamic Page #تکنولوژی که پویایی صفحه از جایگاه سرویس دهنده (56۳۷6۲) تحقق می یابد. #سرویس دهنده وب نرم افزاری است که مدیریت صفحات وب رابر عهده گرفته و آن ها را برای سرویس گیرندگان مجهز به مرورگر ها آماده میکند. مانند : ۱5 ۶ Apache °

صفحه 21:
Server-Side Dynamic Page WEB SERVER 3.Web server locates instructions file 1. Author writes instructions 4. Web server processes instructions to create HTML 5, HTML stream retumed to browser == | 6. Browser processes HTML .| _ and displays page

صفحه 22:
Server-Side Dynamic Page * مزایا : کاربر صرفا شاهد کد های ‎Gls gu oy dale HTML‏ صفحات وب مخفی نگهداری میشود * معایب : با هر در خواست برای هر کاربر بایستی فایل |۳۱۲۱ مجددا تولید شود. CGI(Common Gateway Interface) * ASP(Active Server Pages) ° PHP(Personal Home Page) ° JSP(Java Server Pages) ° ASP.NET °

صفحه 23:
Web Design 0۵۰ ۵ © 0

صفحه 24:
Web Development © > © © ©

صفحه 25:
فصل دوم

صفحه 26:
Html درا لچ تیلم ال و یالچتمل_خولنید ‎al ji, html (Hypertext Markup Language)®‏ به عنولن‌زبانعاهگناروباد می‌شود که با هدفلیجاد سهولستر تنظیم محلقرار گرفترعناصر مختله ویلیجاد شدما #یک فایل ۲1۲۱ فایلی از نوع 66166 میباشد که ‎jets‏ از ‎markup tag‏ ها ميباشد. #وظیفه اصلی تگ های اچتمل ( 1305 8۳۷۷0 ) بیان چگونگی نمایش اطلاعات میباشد.

صفحه 27:
Html at html yy htm Ce! sho 4b HTML ‏©#يك فايل‎ #به هيج کامپایلری احتیاج ندارد و در اکثر سیستم ها مورد استفاده قرار می #ساختار زبان در قالب 30 تعریف ميشود. #مرورگر با 8۲0۷۷56۲ از روی 99 ۲۱۵۲۲0 ها می فهمد که چگونه باید صفحه را نمایش بدهد.

صفحه 28:
Html #تعيين استاندارد هاى وب ربطى به شركتهاى مايكروسافت و يا نت اسکیپ ندارد. © لمانا 0050۳ ۷۷۵۵ ۷۷۱۵06 ۷۷۵۲۱۵ با م6 ۷3 تعیی‌کنندم لستانداردهای‌وبلست ۴ 2۳0 55 ,راا ]۳1 از مهمتریرستانداردهایت صویب آخرین استاندارد ۲1۲0/1 استاندارد 1.0 206۳1۲01 میباشد .

صفحه 29:
Tag ۴ ۱( دستورلتا۱]۳۳]) به عنولنباگیاز عناصر که دارلی‌عولص ان‌میباشند (تگهایلچتملم لاب صورووج ظاهر میشوند به صورتویر تعریفصيشود : ‎<Tag name —Parameters>‏ ‎Element content‏ 8۴ ۴۳۱0۳۷: تگیکه تگپایانیندارد. ما 213162 138> به محضرمشاهدم آن‌ادلمه متردر جط بعد نوشته میشود. This is first line <br> This is a second line Result in ۶

صفحه 30:
Tag #با كمى تك هاى اجتمل عناصر و يا ‎zie acl. Elements‏ در زبان اچتمل حدود ۸۰ عنصر تعریف شده است. تگ های اچتمل بوسیله دو نویسه (63۲.) > و < ساخته ميشوند. ‎fatal gh BE‏ را میتوانید بوسیله حروف لاتین کوچک (10۷/6۲ 6 و يا بزرگ (6856 ‎case ; 1... (upper‏ ‎<b> S 5. J cl, sey sensitive‏ 5 <8 > معادل هستند ولی شدیدا توصیه میشود که به خاطر سازگاری با -|/26۳/۲ از حروف كوجك استفاده شود.

صفحه 31:
Tag Sample <۳>:رسم خط افقی <Hr> <Hr Size=10> <Hr Size=20 Width=300> <Hr Size=20 Width=300 color="Blue”> :H1/>Sample Text<<H1>® <H1> Header 1 <H1> <H2> Header2 </h2> <H6>_ test </h6>

صفحه 32:
Html : ‏نگ های اصلی صفحات وب‎ <body> <title> <head> <html> <body/> stitle/> <head/> <html/> u (Notepad,Wordpad) <+),,. html 1. seu! si® ‏نرم افزار ساخت صفحات وب ۳۲0۲۱۲۳396) يا‎ ‏احتیاج داریم.‎ ) Dreamweaver #سند |۳۱۲۲۲۱ از دو بخش سر و بدنه تشکیل شده است.

صفحه 33:
Html Html ‏#سند‎ <html> <head> stitle>Title of page</title> <head/> <body> <This is my first html page. <b>This text is bold</b <body/> <html>

صفحه 34:
>) Tag Attributes نگ ها میتوانند حاوی اطلاعات اضافی دیگر باشند. به این اطلاعات شناسه يا 861181066 ميكويند و وظيفه آنها بيان دیگر اطلاعات یک عنصر يا ۱6۲6/۱۲ ‎tl.‏ # مثال: در مورد تگ <۵00> شناسه ای به نام 096010۲ وجود دارد که رنگ زمینه متن (03610۲0۱10) را تعیین میکند برای نمونه اگر میخواهید که رنگ زمینه صفحه اچتملتان سیاه باشد کافی است كه به شكل زير عمل كنيد : <"body bgcolor="black> <body>

صفحه 35:
>) Tag Attributes #شناسه ها به صورت کلی "مقدارحنام " یا "۵۲۳6۵۷6" نوشته میشوند و هميشه به نگ شروع یک عنصر يا 1610061۱ ] اضافه میشوند. #اكر در يك عنصر يا 2161796101 شناسه ها قید نشوند از مقادیر قراردادی یا 0672۱01 آنها استفاده خواهد شد مثلا در تگ 000۷ اگر ‎bgcolor us‏ نوشته نشود از رنگ سفید برای زمینه صفحه استفاده خواهد شد. #مقدار یک شناسه را میتوانید داخل نویسه های " و یا " بنویسید و اختیار دست شما است فقط در مواردی که مقدار یک شناسه شامل نویسه " هم میشنورد بایل از تویسه: استفادهدشود:

صفحه 36:
Tag Attributes ‎la Tag Attribute 5) 13°‏ یک فضای خالی لازم است. #ترتیب نوشتن ‎geal Attribute‏ ندارد. ‏#یک ]2۵۲۲10۱0 نباید دو بار مقدار دهی کرد. ‏قبل از اسم 739 نبایستی فضای خالی باشد. ‎ ‎ ‎

صفحه 37:
Html #توضیحات در |۲۱۲۲ (یادداشتهایی که مرورگر آنها را تفسیر نمی کند) به صورت زير است. <!- Comment -- > : ‏#مثال‎ First line <!-examplel -- > <br> <!- example2 -- > Second Line

صفحه 38:

صفحه 39:
فصل سوم

صفحه 40:
Character Entities #در اچ تی ام ال بعضی از نویسه ها دارای معنی خاصی بوده و برای نمایش آنها در صفحاتتان باید از 6۳165 103۲3616۲ ها استفاده کنید. ‎ood a ji Character entities < ®‏ تشکیل میشود: ‎ampersand (&) «5-1‏ 2- نام 600136۷ يا نویسه #و سپس شماره عددی 69 3 - ونهايتا نويسه ‎G semicolon‏ ‏© براى نمايش نويسه > دو روش وجود دارد. باید از ‎FIRE‏ یا | استفاده کنید. در اين مثال ]| نام 6۳۱۸362 و ‎٩۰‏ شماره عددی آز ‎ ‏۴ هابه کوچکو بزرگی‌حروف حساس‌هستند و در ولقع ‎Case‏ ‎st» Sensitive‏ ‎ ‎ ‎

صفحه 41:
Character Entities

صفحه 42:
Formatting #وظیفه گروهی از تگ های اچتمل فرمت دهی و تعیین شکل نمایش متون ( مثلا ضخیم و 0010 بودن و یا مورب و ایتالیک بودن ) میباشد . <0>:متن داخل به صورت پاراگراف در می آید. <۲>: به محض مشاهده ادامه مطارب در خط بعد نوشته می شود. ۲۲<6>:متن را به صورت ۲0۳ ۲۱0۳05031۳9 نمایش می دهد. 6<>: متنی که در آن نوشته شود پردازش نمی شود. ©<8> : متن رابه صورت ضخيم نمايش مى دهد. © <1> : متن رابه صورت كج نمايش مى دهد.

صفحه 43:
Formatting

صفحه 44:
مم <غمهع > : برا إل دقيق تر بر روى نحوه به نمايش در آمدن متن در وب از اين تك استفاده مى شود كه داراى ويؤكى هاى زير ميباشد ‎Si, spin tel: Face Attribute ©‏ حدلکثر سه مقار میتولندب‌گیرد. Font> <"face="nazanin,Lotus,Arial your text must type here! rh isl:Size Attribute ° </Font> <Font size=N> <!- 1<=N <=7 your text must type here! </Font> pial. isl.:Color Attribute © <Font color="Red”> your text is Red! </Font>

صفحه 45:
Formatting #روش های مشخص کردن )5 در ‎s Html‏ 3. استفاده ازاسم رنگ. 0. استفاده ازفرمت 828 مبنای ۱۰: با تنظیم شدت (۱0]65[09) هر یک از رنگ های قرمز, سبز و آبی . ”Color=“Rgb(Red Intensity , Grean Intensity , Blue Intensity) ©. استفاده از فرمت ‎ste RGB‏ 15 Color=#6HexDigit

صفحه 46:
Formatting WebSafe) oss padi cle S, " (Color O% ‏7ع202‎ ‎06000 ‎0/6 ‎90۸ (۳06

صفحه 47:
Formattiong © <411011>: براى تراز بندى استفاده ميشود . سه مقدار زیر را می گیرد: ‎Right ©‏ ‎left ©‏ ‎Center *‏ ‎Justify ©‏ ۲ ‎<h1 align=center> Sample </h1>‏ #ترکیب تگ ها در |۲۱۲۲۷۱ به صورت تو در تو (65160) میباشد یعنی اگر تگی در داخل تگ دیگری باز شود ابتدا بایستی بسته شود و حق تقدم در تاژیر گذاری با تگ داخلی است. <B> <B> <i> <i> <B> <i>

صفحه 48:
Exmaple <Htmi> <head> <title>Sample Formattiong 1</title> </head> <body> <p>hello word</p> <p><i>hello word</i></p> <p><b>hello word</b></p> <p><b> <i> hello word </i> </b></p> <body> <html>

صفحه 49:
Exmaple 2 <Htmi> <head> <title>Sample Formattiong 2</title> </head> <body> <font color="Yellow"> <br>Hello word With Yellow </font> <font color="rgb(255,0,127)"> <br> Hello word With Color </font> <br> <font color="rgb(100%,0%,50%)"> Hello word With Color </font> <font color=#FFOO7f> <br> Hello word With Color </font> </body>

صفحه 50:
Exmaple 3 <Htmi> <head> <title>Sample Formattiong 3</title> </head> <body> <font color="black"> This text has black color <font color="Red" size=4> <br>This text has red color and size is Four <font size=7 font="nazanin"> <br>This Text write with nazanin font and 7 size ,What about Color? </font> <font> <br> Hello word!, what is color? ‘Unknowe,arial" color="rgb(100%,0%,50%)"> Hello word With Color </font> </body> @ <item?

صفحه 51:
Exmaple 4 <Htmi> <head> <title>Sample Formattiong 4</title> </head> <body> if (x=4) then <br><strong>a<sub>2</sub></strong>=x<sup >3</sup>-4; </body> </Htmi>

صفحه 52:
روش های ادرس دهی ‎(Absolute) jl: (2 5) .١‏ آدرس دهي روي کامپیوتر محلي (0681) ‎D:\Image\pic.bmp 5 5‏ ‎File:///d:/Image/pic.bmp‏ ‏آدرس دهي روي شبكه اينترنت ‎Url)‏ http://www.apple.ir/Image/ (Relative) soe ‏آدرس‎ 4 pic.bmp <htmi> ‏ود‎ ‎800 < = i <"BackGround=“Picl.bmp BerkGround=: ../Image/Pic2.bmp <Body/> “Spody/> © <Htmi/> <Htmi/>

صفحه 53:
Image © در زبان اجتمل تصاویر را با کمک تگ <1۳09> تعریف میکنند. تگ <۳79]> از نو تگهای خللی است. بدین معنا که فقط دارای یک یا چند شناسه و عالطا برده رت آرای oe </img> CAN ‏تگ انتهائی‎ © مهمترين شناسه براى درج و تعریف یک تصویر 5۳6 یا 5001۲66 نام دارد و مقدار این شناسه آدرسر | آخالا تصوير ميباشد <“img src=“Address> # شناسه های ۷۷۲06 و 0619۴ در تگ 1۳9 کاربرد شناسه های ]۷۷10 و 6190۴ تعيين عرض و ارتفاع نمایش تصویر است. اگر از این شتامنه ها استفاده: نکنید, مزورگر ابعدا تضنزیر را لود کرده و سپس طول و عرضن آنرا در نهایت نمایش میدهد. ng src="http://www.google.com/images/logo.gif" width="276" height=' ‏شناسه ۸۵1 با 6۷۳ ۵۱66۲۳۵۴6" یا متن جایگزین‎ © # اگر مرورگر به هر دلیلی نتواند که یک تصویر را نمایش دهد ‎images/Unkonow.jpg" alt="Fake Pic>‏ o"™ src j =! 1

صفحه 54:
Image #شتاسه های ۳۱5036 , ۷5036 تنظیم حاشیه افقی و عمودی را به عهده دارند. #اگر در یک صفحه اچتمل از ۱۰ تصویر استفاده شده باشد. مرورگر باید ۱۱ فایل را لود کند.( خود صفحه به علاوه ۱۰ تصویر) استفاده از تصاوی سرعت لود شدن صفحات را پایین می آورد.با احتیاط از تصاویر استفاده کنید و به اندازه و حجم تصویر توجه داشته ب #لود تصویری با حجم ۵۰ کیلوبایت برای کسی که از مودمی با سرعت 5 استفاده میکند حداقل ۱۵ ثانیه طول خواهد ک #برای دیدن مشخصات تصاویر در وب کافی است که روی تصویر 9 >ا©1ا© کرذه و سپس در بخش 0۲0۳06۲1165 آدرس.ابعاد و ظرفیت تصویر را ببینید.

صفحه 55:
HTML Links اد صفحات اچتمل با کمک بیوندها به یکدیگر ‎tite LINK) bom‏ در هبوت اجتملٍ ‎er)‏ ) با کمک بوندها متوان متن به هر صفحه دیگر در وب متصل شد.این کار ‎Rn chor vA 7‏ ف ‎an ent‏ و ‎wuts #‏ ۵06ل: با کمک شناسه 03106 میتوانید پیوندها را نام گذاری کا ‎ ‏بوندهاى نامكذار: ‏امکان حرکت مین تسمتها ‎Wes,‏ فراهم میکنند. برت مثلا أن یک مر ‎ee‏ يو ۳295 با ‎th‏ مهد ‎we‏ ‎ ‎ ‎ ‎ ‎jabel01">Text to be displayed</a> Label Guu, ‎ ‎! </a> < Goto Label! </a> ‎‘#label01"> Goto Lab ‘default.aspx#label01" ‎ ‎ ‎ ‎

صفحه 56:
HTML-Links

صفحه 57:
HTML Links : Image Link® : Email ‏#ارسال‎ <a.> <img .... Border=‘0’> </a> <p> Mailto: <a href=“mailto:info@aviny.com? cc=someoneelse@microsoft.com& bcc=andsomeoneelse2”> MY Mail</a> <p>

صفحه 58:
Lists ‎(unordered list)—s pt sie,¢ .۱‏ 2 تهائی هستند از یک یا چند قلم اطلاعات که معمولا با دایرهای کوچک و سیاه رنگ ‎cig aaah tee‏ انوع ‎PGE‏ و با نگ ‎ae <li>‏ مبکردد. ‏شرو لا> شروع شده و هر رقم ‎to‏ 8 ‎ ‎٩‏ داخل تگهای <أ]> میتوانید از پاراگرافهه تگهای ۰/0۲ تصاویر و حتی فهرستهای دیگر استفاده کنید ‎ ‎

صفحه 59:
Lists (Ordered list) ‏فهرستهاى مرتب‎ ۲ اين نوع فهرست بسیار شبیه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمایش اقلام اطلاعاتی از اعداد به جای دایره های کوچک سیاه رنگ استفاده میکند. یک فهرست از نوع مرتب با تك <01> د شده و همانند فهرستهای نامرتب هر رقم اطلاعات با تگ <h4>A nested List:</h4> <ol start=3 type=i> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ol>

صفحه 60:
Lists (Definition list) 4 5 se. ۳ ‏فهرست تعریفی فهرستی است از اصطلاح ها و تشریح و توصیف آنها.‎ فهرستهای تعریفی با <0[1> شروع شده و هر ذوج اصطلاح و تعریف مربوط به آن با تگهای <أل> و <00> تعریف میشوند.

صفحه 61:
فارسی نویسی در ‎Html‏ ‏#روش کدگزاری 8: 1۳ ترای تأیت ق.نمایش متزا 8- لا اسفاد ‎ae‏ سی از استاندارد بونیکد و روش کدگزاری كته مهم در نماي يش صحيح متون ثارسی تین نوع کدگزاری یا 6160109 صفحات فارسی است که برای اینکار باید از متانگ خاصی به نام ۱10-6010[۷] در بخش 1680] صفحات اچتمل به شکل زیر استفاده شود:

صفحه 62:
Html ‏فارسی نویسی در‎ Attribute dir® جهن ‎eb‏ متو نلالتينبنه صور رلست(]]) میباشددر مورد مت شرفرضو ]الا ]06 از چیسه جمات ‎th‏ ایدباک جه شمیش یپ یث‌فرض را بسه "رلستسه چپ تسغییر دهید شناسه ‎<attribute L‏ — نام 11۲ یا همن0 01۲61 لیرکار لنجام میدهد * این شناسه دارای دو مقدار ممکن میباشد : ‎dir="Itr" , Left-to-right text‏ - چپ به راست ‎Right-to-left text‏ , "11" >01. - راست به جب

صفحه 63:
فارسی نویسی در ۳۱۲۳۱ #مثلا برای نمایش جمله فارسی "سلام بر دنیای وب!" با کمک عناصر 0 يا 01۷ کافی است که به یکی از شکلهای زیر عمل شود: ©<1غ]" >0 م" > سلام بر دنياى وب </0> <div/> ‏أل" > سلام بر دنياى وب‎ dir="rtl>@ #در بسيارى از عناصر و تك هاى اجتمل امكان استفاده از شناسه 01 ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد: ‎p>, <div>, <html>, <body>, <table> ,>®‏ <tr> , <td>, <hl...h6>, <input>, <pre>, ..,<<select> , <span

صفحه 64:
فصل چهارم

صفحه 65:
7 >) Tables & برای تعریف جداول از تگ <۵016> استفاده میشود. یک جدول از یک یا چند سطر که با کمک تگ ‎<tr>‏ تعریف میشوند. تشکیل ميشود. هر ردیف يا ۲0۵۷۷ از یک یا چند سلول. خانه یا |6) تشکیل گردیده که با کمک نگ <01]> ایجاد ميشوند. نام های 00 و 81 به ترتیب خلاصه شده ۲0۷۷ 016اح] و ‎att. table data‏ © محتوی یک سلول میتواند متن. تصویر فهرستها: جداول دیگر. پاراگرافها و ... باشد ساده ترین جدول ممکن در اچتمل, جدولی است با یک سطر و یک ستون! ‎table border="1">‏ ‎<"dir="rtl‏ ‎<tr>‏ <۲/>ردیفا. سلول0<۱] > ‎wis </td>‏ سلول۲< > سلول0<۲ > ‎ayaa‏ هه تاه راد سییر ‎</tr>‏ ‏ارف 2 سلول 3 | رديف 2, سلول 2 ردیف 2 سلول 2 ‎<tr>‏ <td> Jue tis </td>

صفحه 66:
Tables < "table border="1> <teHeadings) Jolie 52 oe 1" <th>A</th> "" سرستونها در جداول با کمک تگ < 2 کوجطا> <th>C</th> ee ee ‏رستونها‎ ‎<tr> ‏میشوند‎ سر ستونها مانند سلولهای معمولى جة الع يض يفو دوعر میشوند و فقط به جای 00 از 0 استفلدو عيدج ,تالجهع> نمایش محتوای سر ستونها 0010 5/398 ۵<1,3:> نمایش داده خواهند شد. 2 ‎<td>2,1</td> a‏ ‎<td>2,2</td> 0 6 ©‏ ‎<td>2,3</td: oC ec‏ ‎wae 10,6 ۱46 ۸۵‏ stbler ‏مح‎ ۱۵,6 ۸

صفحه 67:
Tables ع 57 ‎<HTML>‏ ‏تغییر اندازه جدول ‎<HEAD>‏ ‏<1>/۲۱۲۱۶ ۲۱۲۱۶<۲۷۵۲۳۵۱۵ > ‎<HEAD/>‏ <BODY> <TABLE WIDTH=50% BORDER=1> <TR> <TD>Cell Row1 Coll</TD> <TD>Cell Row1 Col2</TD> <TR/> <TR> <TD>Cell Row2 Coll</TD> <TD>Cell Row2 Col2</TD> <TR/> <TABLE/> <BODY/> <HTML/>

صفحه 68:
Tables Empty Cell® <HTML> <HEAD> <TITLE>Example 4</TITLE> </HEAD>a <BODY> <TABLE WIDTH=400 HEIGHT=100 BORDER=3> <TR> <TD WIDTI <TD WIDTI </TR> <TR> <TD>&nbsp;</TD> <TD>BOTTOM RIGHT</TD> </TR> </TABLE> </BODY> </HTML> 140>TOP LEFT</TD> 260>;</TD>

صفحه 69:
Tables Cell padding : You can specify two other important size® parameters for a table. Cell padding is the space between cell borders and table contents <HTML> <HEAD> <TITLE>Example 5</TITLE> </HEAD> <BODY> Cell padding effect : <BR><BR> <TABLE BORDER=3 CELLPADDING=20> <TR> <TD>TOP LEFT</TD> <TD>TOP RIGHT</TD> </TR> <TR> <TD>BOTTOM LEFT</TD> <TD>BOTTOM RIGHT</TD> </TR> </TABLE> 68۰00۲ </HTML>

صفحه 70:
Tables Column Span & sometimes you need to join two cells in a row to® each other. For example in a 2*3 table we may want to join two cells with each other . In this way we will have two cells in first row and three cells in second row <HTML> -parameter COLSPAN=2 it means that it is <HEAD> ‘equal to two cells. Therefore you must have <TITLE>Example 6</TITLE> three calle ‘</HEAD> in next row (three <TR> tags) or you may <BODY> use COLSPAN to create cells that when you <TABLE BORDER=1> gad the, <TR> ‎ie wl be equal to previous row or 3 in this‏ > ارا ‎<TD>B</TD>‏ ‎</TR> ‎<TR> ‎<TD>A</TD> ‎<TD>B</TD> ‎<TD>C</TD> ‎</TR> ‎</TABLE> ‎</BODY> ‎</HTML> ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

صفحه 71:
Tables RowSpan ۶ ۲۳۰ time we want to join two cells in a column (from® different rows). This is the same as previous section with the difference that we will join cells from different rows rather than cells in different columns. This time we must use ROWSPAN instead of COLSPAN <HEAD> -Again you must be careful that when you ‘<TITLE>Example 7</TITLE> have for example a cell in first column </HEAD> that you have joined two cells to create it <BODY> using the option ROWSPAN=2 then your <TABLE BORDER="1" WIDTH="200table must have two rows and you must <TR> take this in mind in next parts of your <TD ROWSPAI ">A</TD> table. <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> </TR> </TABLE> </BODY> HTML ۳2

صفحه 72:
Tables :Color® <HTML> <HEAD> <TITLE>Example 8</TITLE> <HEAD/> <BODY> <TABLE width="300" BORDER=1> <TR BGCOLOR=black> 1 0%“ BGCOLOR=yellow>A</TD> 50%" >B</TD> <TD width <TR/> <TR> <TD width <TD width: <TR/> <TABLE/> <BODY/> </HTML> ۱096۲" 0 '50%" BGCOLOR=red>D</TD>

صفحه 73:
Tables Nested Tables® '50%">2-</TD> '50%">C Prog.</TD> </TR> <TR> <TD width="50%">3-</TD> <TD width="50%">/Script</TD> </TR> </TABLE> </TD> <TD width="25%">&nbsp;</TD> </TR> </TABLE> </BODY> HTML <HTML> <HEAD> <TITLE>Example 9</TITLE> </HEAD> <BODY> <TABLE border= <TR> <TD width="25%">&nbsp;</TD> idth="25%">&nbsp;</TD> "25%" > " width="750"> "50%"'>1-</TD> 0%" >HTML </TD>

صفحه 74:
Flash animation, Movie, Music Mpeg,Avi au: si. : <IMG>® “IMG dynsrc="mymovie.mpeg: Width="400" height="300 c+! eli! 6 flash, music, movie si. : <EMBED>® اه ‎Gre‏ ‏نت تنظيم عرض 0 تنظیم طول ‎boo‏ تکرار اتوماتیک مدیا وهی تعیین وضعیت کنترلهای رتم شناخته نشدن فرمت مدیا س ۸0#0) جهت نصب توسط مرورگر

صفحه 75:
Flash animation, Movie, Music <EMBED src=“movie.mwv” width="300"> </EMBED> فرمت های تصویری : ‎Avi, Mwa, Asf, Mov,Mpeg‏ فرمت های صوتی : ۱۵ ,۷۷۲۸۸۵ ,۸۵۱ ‎Mp3,‏ <EMBED src=“filel.fla” width="300"> </EMBED> <EMBED src=“sound1.mid” loop=“-1"> </EMBED> ‎pe ayils (Sey Lu Streaming Audio And Video’‏ قابل پخش است. که اين تکنولوزی علاوه بر توسط سرویس دهنده بایستی فراهم شده باشد. ‎ ‎ ‎

صفحه 76:
Forms از طریق استفاده از عنصر ‎SS te 9 <FOFM>‏ مرتبط 3 اطلاعات از بازدیدکنندگان صفحاتتان و یا تبادل اطلاعات بین خواهید شد. #تمامى تكهاى مربوط به فرمها بايد ‎</form> <form> cS os‏ قرار ميكيرند. © با كمك اين كروه از تك ها قادر به نمايش باكسهاى ورود اطلاعات متن ‎ctext fields)‏ . چک باکسها (6۳6-00(65) . راديو باتونها ‎Games y etd... » (Fadio-buttons)‏ امکان گذاشتن دکمه های ارسال ‎,(submit button)‏ و یا حذف (۲656۵) را خواهید داشت. © توجه داشته باشید كه برای پردازش اطلاعات دریافتی از کاربر باید با يکي از زبانهای 9 از 1.3 ‎ASP.NET. perl. PHP. CFM .JSP‏ ,۵5 آشنانی داشته باشید.

صفحه 77:
Forms * تگ 80016] :یه عنوان پر مصرف ترین نگ مربوط یه ورود اطلاعات باید از تگ <]ألا0]> نام برد. در این تك شناسه اى به نام ©0لا6 به تعبين نوع اطلاعا ‎text , checkbox , radio , password , hidden , submit , reset , button , file ,‏ ‎image‏ ‏* وروديهاى 2 ‎(Text Fields)‏ ررردی اختصاص دارد. مقادیر ممکن برای این شتاسه به قرار زیرند اگر میخواهید که بازدیدکننده اطلاعاتى از قبيل متن؛ اعداد و ... را وارد كند از شناسه اى با مقدار 6606" استفاده ميشود. ‎<form>‏ First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="Lastname"> </form> <form dir="rtl" > — {Ginput type="text" ‏لد‎ name="Arstname"> <br> Sasi: Cinpat type="text" name="lastname">

صفحه 78:
Forms #ورودیهای 56۲۵۳5 ۳2010 #اكر میخواهید که بازدیدکننده گزینه ای را از بین چند انتخاب كند, از مقدار "۲۵00" برای شناسه 906 استفاده كنيد ای 6۱۵6103665 : اگر میخواهید كه بازديدكننده يك يا جند گزینه راز بين جند كزينه محدود انتخاب كندء از متدار "6176160014" ببراى شناسه ©0 لإ استقاده كنيد Aa

صفحه 79:
Form's Ac Attribute & «isu, SUbmit Button کاییر بسرویابدکمه ۰۹5690 لطلهانتدر یشم بسهفسالی ‎ng fe‏ شد بسرلئ ةمير قصد ‎apo ALN‏ ‎j forms:‏ شتا لیب نام 366308 لادم کید مقر شسناسه 3681080 آدیس‌ا الا فابلاستکتهبسه دباشتو سپ پسردازشطاه دبای خولهدپسردلخت. form name: put" action="form_action.aspx“ metho: <"autocomplete: Username ser" tabindex=1> br>Password> < Input type=password maxlength=? tabindexe2> ext" name: <input type: clear" tabinde: <form >| “reset" value:

صفحه 80:
Forms Sample® <FORM METHOD="get" ACTION=“http://www.apple.com/someplace.aspx"> Computer Experience:<br> <SELECT NAME="choice" > <OPTION VALU! Less 1">Less than 1 year. : Computer Experience <OPTION VALU! 1-5.">1-5 years. Less thas d year: <OPTION VALUE="More than 5">More than 5 years. </SELECT> Nour ba 2 <br> <textarea name="text1">Your Text</textarea> <BR> <INPUT TYPE="reset"> <INPUT TYPE="submit" NAME="submit" VALUE=" </FORM>

صفحه 81:
Frame #با کمک فریمها قادر به نمایش همزمان بیش از یک صفحه وب در پنجره مرورگر خواهید شد. هر صفحه یا دریچه. فريم (©1310]) نامیده شده و فریمها کاملا مستقل از هم میباشند. محتوای هر فریم هم میتواند هر صفحه یا وب سايتي باشد. هر چند که فریمها طراحی سایتهای کوچک و متوسط را بسیار آسان میکنند ولی استفاده از آنها در کارهای حرفه ای توصیه نمیشود.(به جز در موارد خاص) #معایب استفاده از فریمها: #موتورهای جستجو با صفحات طراحی شده با فریمها مشکل دارند. #چاپ و ]0۲1۳ صفحاتی که از فریمها استفاده میکنند مشکل است.

صفحه 82:
Frame ‎<frameset> Ge‏ 4 تعريف فريمها و تقسيم بندی پنجره مرورگر میپردازد. ‎gl epee <frameset> ve‏ از رديفها يا ستونها را تعریف میکند. #داخل هر فریم میتواند ۳3۲۳06561] دیگری قرار دهید. ‏# با کمک شناسه های ۲0۷۷5 و ۲015 ابعاد و نسبت هر فریم تعیین میگردد. ‏#تگ <۲۵۳06561]> درون تگهای <۱۲۳۱> و 200 قرار میگیرد. (نیازی به قید تگ 000۷ هنگام معرفی یک ‎(cd frameset‏ ‎ ‎ ‎

صفحه 83:
Frame

صفحه 84:
Frame * اگر فریمهای طراحی شده برای جلوگیری از ت تک < ۲۵/6 > استفاده شود اهید که فریمها |56۲0 مثال 1 <html> <frameset cols="25%, 50%, 25%" <frame src="frame_3.html"> <frame src="frame_2.html"> <frame src="frame_1.html"> </frameset> </html> ای قابل مشاهده دارند توسط کاربر قابل تغییر اندازه (۲65/26) خواهند اندازه فریمها توسط کاربر باید از شناسه ای به نام 0065/26 در دا فریمها توسط کاربر ی اخل تگ 1۲۵۳06 صفحه توسط ماوس) پاید منال 2 <html> <frameset cols="*,200"> <frame src="frame_2.html"> <frame src="frame_1.html"> </frameset> </html>

صفحه 85:
فصل سوم

صفحه 86:
GSS ‎se IE ly cH! 4, Cascading Style Sheet sist #‏ 3 طراحی اجزای صفحه از قبیل متن» تصویر, زمینه صفحه. کادرها و هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای ۳۱۲۷/1 از طریق ایر می توانیم از دوباره نویسی کدهای ۲۱۲۷/1 که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در ایترنت می شود جلوگیری كنيم. ‎Se‏ لوس ار تعدا تعيين كنيم و ‏ديكر مجبور نباشيم كد مربوط به فونت را در صفحه به كار ‎ ‎ ‎ ‏همچنین می توانیم از اين ابزار قدرتمند در مواردی به جای و اسكريت نيز استفاده کنیم و چون مشکلات جاوا اسكريت مثلاً غير فعال بودن جاوا اسكريت در مروركر را ندارد با خيالى آسوده تر مى توانيم از آن استفاده كنيم. ‎ ‎ ‎

صفحه 87:
© 255 هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. # در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. #مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم. حالا اگر بخواهيم رنگ متن همه این صفحات را تغیبر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.

صفحه 88:
GSS ‎sie Cascading Style Sheets (CSS)®‏ های استیل گذاشته شده آبشاری برای تعیین اینکه هر یک از ‎HTML Ul‏ چگوته دیده شوند. یعنی با تغییر محتویات صفحه سرو کار داریم. ‏#باعث شده محتویات صفحه از روش ارائه محتویات صفحه جدا شود. ‏#جدید ترین نسخه آن 2 55/) است که توسط مرور گر ها پشتیبانی می ‎Sig‏ ‎ ‎ ‎

صفحه 89:
Style Sheets در نسخه جدید اچتمل امکان جداسازی کامل فرمت دهی از ساختار صفحات اچتمل فراهم شده نسخه توصیه میشود که تمامی اطلاعات مربوط به نمایش و ترازبندی به فایلهانی مجزا منتقل شوند. بخشی از صقحات اچتمل که مربوط به نمایش. ترازبندی و فرمت دهی است. استایل شیت با ‎Sheet"‏ 6 نامید شده و معمولا به صورت فایلی مجزا <۱680]> صفحات اچتمل معرفی میگردند است. در أ © جكونكى استفاده از استايل شيتها: مروركرها توسط استايل شيتها به فرمت دهى و نمايش اطلاعات درون صفحه اجتمل ميبردازند. تعريف و استفاده از استايل ها در صفحات اجتمل به سه روش مختلف ممكن ميباشد: (0 استايل شيتهاى خارجى ‎external style sheet‏ (2) استايل شيتهاى داخلى 566 56۷۱6 ۱۸۲۵۲8۵۱ (3) استایل شیتهای درجا ‎Inline Styles‏

صفحه 90:
Inline Styles * كاربرد : این روش در مواردی است که باید برای یک المان (يا گروهی) خاص استایلی اعمال شود. در این حالت باید از شناسه ای به نام 50016 که تقریبا در تمامی تگها قابل اعمال است استفاده شود. jTag ... Style=“property1:value1; property2:value2> {Property n:value n ... <p styl lor! Féd; margin-left! 20px"S This is a paragraph</p> <p align=“Left"><font color="red">This is a paragraph</font></p>

صفحه 91:
Internal Style Sheet © كا به ادر حا! که صفحه نیازمند تعریف استایلی منحصر به فرد | بوده و استایل طراعی 2 ‎nS a 1 te‏ ايلى قود مرا بوهم يي ن تك هلي <ه التاق > ر <هالاأ5 > قرار كرفه ‎ls <isty Se See‏ در اين حال ‎gl.‏ یف استایل در ‎pt See‏ © مثال. 1 > > > ۱

صفحه 92:
Selector pt :TAG b 1 margin-left: 20px } BAL Color:Navy; BackGround_Colo1 <Htmi> <head> Selectoraijs «Class 2 <style> -ClassName1 { color: red 1 </style> </head> <Body> <p> TEST1 </p> <p Class=“ClassName1”> Colored Test </p> <A... Class=“ClassName1”> Colored Link </A> </Body>

صفحه 93:
پذیرد. ‎Stylel Style2> “7‏ 01355 ‏ترکیب تگ و‎ + <Htmi> <head> <style> P.Stylec { color: red </style> </head> <Body> <p> TEST1 </p> <p Class=“StyleC”> Colored Test StyleC“> Link </A>

صفحه 94:
<HtmI> 5616610۲ ‏نام 0 به عنوان‎ + <head> <style> #StyleR { color: red </style> </head> <Body> <p> TEST1 </p> <p id=“StyleR”> Colored Test </p> eas «. id=“StyleR“ > Colored Link Id ۳ & os 3 biel : Selector x ‏برای‎ ٩۷۱6 ‏يك‎ © #StyleR, P.Class1, A { color: Navy

صفحه 95:
external style sheet #در اين روش تمامی استیلها و تعاریف نمایشی درون فایلی جداگانه قرار گرفته . کاربرد : استایلی به بیش از یک صفحه اچتمل اعمال شود. روش سهولت در تغییر ظاهر صفحات یک وب سایت میباشد و کلی در سایت کافی است که فایل استایل شیت کل سایت که معمولا یک فایل واحد است تغییر داده شود. # استایل شیتهای خارجی توسط تگ <>۱1۳۱> که درون بخش ۱۵۵0 صفحات اچتمل قرار میگیرد. معرفی ميشوند. <head> link rel="stylesheet" type="text/css"> <"href="mystyle.css <head/>

صفحه 96:
GSS

صفحه 97:

صفحه 98:
جاوااسکرییت جیست؟ برای یادگیری جاوااسکریپت. نیاز به دانستن زبان 1۷/1 و درک کاملی از طراحی و ساخت صفحات وب است. چون جاواسکرییت یک زبان مجزا از اچ تی ام ال نیست و باید همراه با کدهای ۲۱۲۷/1 در یک صفحه بکار رود تا کارآیی داشته باشد. «#اچ تی ام ال به تنهایی جوابگوی نیاز بینندگان وب سایتها نمی باشد چون آنها علاقه خاصی به جذابیتها و ارتباط متقابل میان خود و صفحات وب دارند که اچ تی ام ال نمی تواند جذابیت قابل توجهی به یک صفحه بدهد ویا با یک کاربر ارتباط برقرار کند. © پس برای برطرف کردن این مشکلات. صفحات وب نیازمند یک زیان قوی تر می باشد که به همین منظور زبان جاوااسکریپت خلق شد.

صفحه 99:
جاوااسکرییت جیست؟ جاواسکریپت توسط شرکت 656806 اختراع شد و به عنوان اولین زبان اسکریپت نویسی در ور #در حال حاضر پرکاربردترین و محبوب ترین زبان اسکریپت نویسی در دنيا مى باشد که یکی از دلایل آن. پشتیبانی دو مرورگر معروف وب. ۲ ۱۱۲۵۲۳۱۵ و ۱۵۷۱9۵10۲ ۸656206 از اين زبان می باشد. ‎٩‏ نا گفته نماند که شرکت مایکروسافت هم برای اینکه از نت اسکیپ در این زمینه عقب نماند. نسخه مربوط به خود را بنام 56۲10[ تولید کرد. ‎ ‏توسعه یافت ‎ ‎ ‎ ‎ ‎

صفحه 100:
تفاوت جاوااسکریپت با جاوا #خيلى ها فکر می کنند که اين دو زبان(جاوااسکرییت و جاوا) با هم یکی بوده یا حداقل اینکه جاوااسکریپت ساده شده زبان جاوا برای کاربرد در وب مى باشد كه اصلاً اين - 1 #جاوااسکریپت متعلق به شركت نت اسكيب مى باشد اما زبان جاوا متعلق به شركت ۷۱۱6۳۵5۱5۲6۲۲5 ‎Sun‏ !+« #جاوااسکریپت در اصل یک زبان اسکریپت نویسی است نه یک زبان برنامه نویسی کامپیوت شاید بتوان اسکریپتها را یک نوع زبان برنامه , نویسی خیلی سبک و ساده نامید اما جاوا یک زبان برنامه نویسی کاملا پیچیده مانند زبان ن) است.

صفحه 101:
تفاوت جاوااسکریپت با جاوا #تفاوت دیگر آنها اینست که جاوااسکریپت توسط یک برنامه مفسر یعنی ۲ در مرورگر تعریف و تفسیر شده تا قابل اجرا باشد و حتماً هم اين کار در مرورگر انجام می شود اما برنامه های جاوا پاید توسط یک ‎Compiler tus‏ كاميايل شده که کامپایل شدن یعنی جمع آوری اطلاعات مورد نظر و ترجمه آن اطلاعات به زبان قابل فهم برای کامپیوتر و تبدیل آن به یک برنامه کاربردی واحد و مستقل برای کاربر را گویند. #به همین دلیل برنامه های جاوا را که اپلت. 20016 می نامند. مستقل اجرا می شوند. البته اپلتهای جاوا را می توان در صفحات وب هم گنجاند. #در یک جمله می توان گفت که جاوااسکریپت فقط در صفحات وب تأثیر گذار است اما زبان جاوا برای خلق برنامه های پیچیده در کامپیوتر ساخته شده است.

صفحه 102:
>) قابلیتهای جاوااسکریپت #جاوااسکریپت یک ابزار برای طراحان وب و نویسندگان کدهای ‎HTML‏ ‏می باشد. #جاوااسکریپت دارای ترکیباتی ساده نسبت به زبانهای برنامه نویسی است كه براحتی می توان آنها را داخل کدهای اچ تی ام ال یک صفحه قرار داد و از آنها استفاده کرد. گیکن از قابليتهاى ويزه جاوااسكريبت رايكان بودن آن است که اگر شما زبان ۲/1 را بدانید می توانید با کمی دانستن جاوااسکریپت کدهای آماده که بیش از ۲۰۰۰ نوع از آنها در وب وجود دارد را در صفحات خود بكار كيريد.

صفحه 103:
قابلیتهای جاوااسکریپت با استفاده از این زبان می توانید متنهای پویا و متحرک در صفحات و در نقاط مختلف مرورگرها مانند نوار وضعیت آنها خلق کنید. یکی دیگر از قابلیتهای این زبان عکس العمل نشان دادن به وقایع و اتفاقات می باشد بطور مثال واکنش نسبت به کلیک یکی از دکمه های موس يا فشردن یک کلید بر روی کیبورد و یا انجام عملی هنگام بسته شدن صفحه مرورگر. #جاواسکریپت حتی می تواند کدهای اچ تی ام ال را بخواند و یا تولید کند که توسط این خاصیت می توانید در هر زمان خاص یک متنی را تولید یا تغییر دهید و یا در زمانی مشخص عکسی را جایگزین عکسی دیگر کنید.

صفحه 104:
>) قابلیتهای جاوااسکریپت یکی از بهترین ویژگیهای جاوااسکریپت. اعتبار بخشیدن به اطلاعات می باشد ‎٩‏ مثلا شما یک فرمی برای ارتباط با کاربر خود ساخته اید و می خواهید قبل از اينکه آن اطلاعات به سرور فرستاده شود بازبینی شده تا اگر مشکلی وجود داشته باشد به کاربر اطلاع داده شود تا در صدد رفع آن برآید. چون ‎ay cI Client Side bos) oy Soil‏ در سیستم کاربر اجرا شده و مستقل از وب سرور است می تواند ترافیک روی سرور را کم کرده که این موضوع یک امتیاز مثبت برای میزبانان وب محسوب می شود.

صفحه 105:
>) تگ اسکریپت # جاوااسکریپت. هم مانند زبان ]۳۱۲1 از یکسری دستور و گرامر حاص خود پیروی می کند. * البته اين زبان به سادگی اج تى ام ال نیست و بسیار هم حساس است ‎Se‏ دراج تى ام ال فاصله بين تكها اهميتى ندارد و مروركر آنرا نلديده مى كيرد اما در جاوااسکریپت فاصله باید متناسب باشد که اگر رعایت نشود با پیغام خطا روبرو خواهید ‎a‏ ‏# کدهای جاوااسکریپت را باید در میان تگهای ۲1۲/1 قرار گیرد. به همین دلیل یک تگدبرای آن در نظر گرفته شده است: ‎<script> ... </script>®‏ # که کلیه دستورات جاواسکریپت باید مابین آنها قرار گیرد. اين تگهای اچ تى ام ال به مرورگر می فهمانند که در کجا این زبان آغاز شده تا مفسر جاوااسکریپت مرورگر فعال شود و در کجا پایان می پذیرد که برنامه مفسر هم کار خود یا خلتمه دهد.

صفحه 106:
language اما تگ 56۲101 مانند بقیه تگها دارای خصوصیاتی می باشد. یکی از آنها 6 اسست که مقدار آنرا باید برابر با 3۷35۲101[ قرار دهیدء script language="javascript">>® <</script #برای مقدار 3۷35۲101[ می توانید نسخه آن را هم بنویسید. اين زبان هم مانند اچ تی ام ال دارای نسخه های مختلفی است که هر کدام آنها با قابلیتهای جدیدی در وب توسعه یافتند. نسخه های این زبان عبارتند از ۰ ۳۵۵ و آخرين نسخه حال حاضر هم ‎١.5‏ مى باشد

صفحه 107:
type تگ اسکرییت خصوصیت 906 هم دارد كه براى اين زبان بايد آنرا برابر با 350۳101 6(1/[3۷] قرار دهید. * نكته قابل توجه اینست که اگر این حصوصیت را به اين نگ اضافه کنید. مرورگر اینترنت اکسپلورر نسخه ۱.۵ این زبان را نادیده می گیرد و کد را اجرا مى كن #د. شما مى توانيد با اجراى كد زير هم اولين اسكرييت خود را تجربه كنيد ‎type cps pet ety‏ در ]1 امتحان کنید. خب مانند زبان اچ تی ام ال می توانید از یک ویرایشگر متن مانند برنامه 0 استفاده کرده و کد زیر را در آن وارد کنید:

صفحه 108:
type ® <html> <head> <title> My JavaScript </title> </head> <body> <script language="javascript1.5" type="text/javascript"> document.write(" Hello my friends ") </script> </body> </html>

صفحه 109:
>) document.write(" Hello my friends ") © 00017611 يعنوهمان سند و فليل|18111 كه در آنليزعملياتبايد لنجام شود و مرويكر به محضبرخورد بالميزع ماده موشود برل نجام كايىكه بعد از یبکنقطه نوشته می‌شود. طبق قرارداد باید هر چیزی که د مایین دو علامت نقل قول یعنی بیایند. * 5611119 يعنىيكوشته كاراكتر كه مىتولندهم حرفباشد هم‌علد و هم عاصتو خاصيت5611190 در لي رإستكه هرجيزىهابيزدو عاهت" " قرار گرفتیاً بايددر ‎spd aby nie‏ # در جاوااسکریپت به 006۱0۳06۳۴ یک 00[66 یعنی شی می گویند و هنگامی که یک نقطه بعد از آن گذاشته می شود آن شی منتظر ۲61/00 خود می شود که در اینجا همان ۷۷۲106۵ است. به عبارت ساده اين خط می گوید که آن شی را بردار و در آن توسط متد نوشتن چیزی بنویس. پرانتز هست را بنویسد و چون محتوای داخل پرانتز قرار گرفته پس باید بصورت یک 5۲19 در

صفحه 110:
src * تى 561106 يكد خصوصيت ديكر هم داید که 5۳6 است و برای آدرس دهی است. # کدهای جاواسکرییت. را هم مانند استایل شیت می توانید در یک فایل جداگانه نوشته و با يسوند 15 ذخيره كنيد سپس با خصوصیت 5۳6 آدرس آن فایل را توجه داشته باشید که در آن فایل نباید دیگر تگ 56۲10 را بنویسید. #معمولاً در این حالت تگ اسکریپت در قسمت 7630 گنجانده می شود نا با شروع صفحه فایل جاوااسکریپت فراخوانی شود. © <html> <head> <script language="javascript" src type="text/javascript"> </script> </head> files/name.js"

صفحه 111:
#جكونكى دريافت بيغام خطا #يكى از مواردى كه در نوشتن كدهاى جاوااسكريبت ممكن است زياد با آن برخورد کنید. دریافت پیغام های خطا هنكام اجراى كدها در مروركر مى باشد خطاهای جاوااسکریپت. را به دو صورت متوجه می شوید یکی ظاهر شدن مثلثی زرد با یک علامت تعجب. در سمت چپ نوار وضعیت مرورگر مانند B) done ‏شکل زیر:‎ #در بعضی از مرورگرها اين نوار مشاسته نمی سود آن به متوی ۷16۷ مرورگر رفته و روی گزینه ‎cs Status Bar‏ کنیا

صفحه 112:
#حالت دیگر دیدن پیفامهای خطاء باز شدن یک پنجره در وسط مرورگر است که در این حالت جزئیات خطای ایجاد شده را هم می توانید مشاهده کنید. مانند شکل زیر: ‎om eg Send ety‏ سس ‎an ac me‏ ‎ema ۳‏ تنم رس سل تست بیدا 2 ‏مع دح ‎5 ‎4 ‎0 ‎5 ‎ ‎ ‎

صفحه 113:
توجه داشته باشید. در نسخه های جدید مرورگر اینترنت اکسپلورر این پنجره مشاهده نمیشود و ابتدا آنرا باید فعال کنید. برای فعال کردن آن به منوی ۲0015 مرورگر رفته و گزینه ۱۳6۲۳6۲ 5 را انتخاب کنید. در پنجره باز شده به قسمت ‎Advanced‏ ,343 ‎Display a notification about script error «3s‏ ,1< نیده سپس دکمه 21 را زده تا کار شما تأیید شود. * بهتر است كه قبل از شروع کد نویسی جاوااسکرییت این عمل را انجام دهید تا هنكام بروز خطا در صدد رفع آن برآييد كه به اين کار اشکال زدایی یا 2600199109 می گریند * اگر هم اين كزينه را فعال نکردید. هنكام بروز خطا می توانید بر روی آن مثلث زرد رنگ در نوار وضعیت رفته و دوبار کلیک کنید که همان پنجره اعلان خطا باز خواهد شد.

صفحه 114:
انواع خطاها #اساساً دو نوع خطا برای جاواسکریپت وجود دارد. خطاهای نحوی یا 5 5۷۲۱۵۶ و خطاهای زمان اجرا یا ‎Run time‏ ‎errors‏ ‏* در خطاهای نحوی یک مشکلی در ترکیبات کدها بوجود آمده ‎٩‏ مثلاً یک غلط املائی در یک دستور یا جا اندا در خطاهای زمان اجرا احتمالاً یک دستور بطور نوشته شده است که د یک حروف يا علامت و باه جای یک دستور دیگر هنگام اجرای کد» مفسر مرورگر نمی تواند این دستور را تجزیه تحلیل کند وخطا را اعلام می کند.

صفحه 115:
کدهای جاوااسکریپت به سه دسته تقسیم میشوند. یک سری از آنها در قسمت سر یعنی 1630] جای می گیرند و یک سری در قسمت بدنه کدهای تی ام ال و دسته سوم هم در یک فایل جداگانه و خارج از کدهای ‎hens‏ با پسوند 5[ قرار می گیرند # در ادامه به توضیح هر دسته خواهیم پرداخت.

صفحه 116:
>) نوشتن اسکریپت در قسمت ‎head‏ کلیه کدهای جاوااسکریپت به محض باز شدن یک صفحه وب در مرورگر اجرا می شوند اما گاهی اوقات ما نیاز داریم تا یک اسکریپت زودتر از کدهای دیگر اجرا شده و یا آماده باشد تا در صورت لزوم فراخوانى.شقة #اينكونه كدها را بايد در قسمت سر و ما بين تك 2630 بنويسيم. * بطور مثال شما نياز به اين داريد كه به محض ورود كاربر به صفحه در همان ابتدا بيغامى ظاهر شود و تا كاربر آنرا تأييد نكرده است صفحه تكميل # اسكرييتهاى قسمت سر هميشه آماده اجرا و يا آماده ياسخ به اتفاقى در صفحه وب هستند. که در این مورد شما مطمئن هستید اسكرييت مورد نظر قبل از هر چیزی در صفحه, اجرا خواهد شد.

صفحه 117:
نوشتن اسکریپت در قسمت ‎head‏ برای نوشتن کدهای جاوااسکریپت بصورت زیر عمل می کنید: © <html> <head> <title> ... </title> <script language="javascript" type="text/javascript"> wea javascript codes ...... </script> </head>

صفحه 118:
نوشتن اسکرییت در قسمت بدنه #هنگامیکه نیاز داشته باشيد تا کدهای جاوااسکریپت در بدنه فایل ۳0 اجرا شود آنها را در قسمت. 000 صفحه وارد می کنید. ‎<html>‏ © ‎<head>‏ ‎</head>‏ ‎<body>‏ ‎<script language="javascript"‏ ‎type="text/javascript">‏ ‎javascript codes ......‏ 55 ‎</script>‏ ‎</body>‏ ‎</html>‏

صفحه 119:
#شما حتی می توانید توسط کدهای جاوااسکریپت قسمتی از یک صفحه را بسازید یعنی با ترکیب جاوااسکرییت و تگهای اچ تی ام ال در 00019 یک عنصر در صفحه وارد کنید. کدهای زیر را بنویسید و اجرا کنید: © <html> <head> </head> <body> <script language="javascript" type="text/javascript"> document.write("<h1 align='center'> Hello my friends! </h1>"); </script> </body> </html> ‏توانید برای نظم داد‎ ge Lat Sal Sh gS ® ‏در تسمت 2680 تعريف كنيد‎ 0 و جلوگیری از شلوغی قسمت بدنه یک اسکرییت بصورت قسمت بدنه آنرا فراخوانی کنید

صفحه 120:
فايل خارجى حاوااسکرییت #مى توانيد برای حفظ نظم تگهای اچ تى ام ال در يك صفحه وب و يا برای جلوگیری از تکرار یک اسکریپت در صفحات یک وب سایت. کدهای جاواسکریپت را در یک فایل جداگانه نوشته و با يسوند 5[ آنها را ذخيره كنيد سپس در هر قسمت و هر صفحه ای که لازم بود وارد #خط زیر را در برنامه ‎testjs wie lj! ses; Notepad‏ ذخیره کنید: document.write(" JavaScript external file ")®

صفحه 121:
*حلا یک فال اج 2 ‎og‏ ام ال بسازید و تگهای زیر را در آن وارد کنید سپس با یک اسم دلخواه آنرا در همان پوشه که فایل جاوااسکریپت. را ذخیره کرده اید قرار. دهید: ‎<html>‏ © <head> </head> <body> <script language="javascript" type="text/javascript" src="test js"> </script> </body> </html> جمله زیر را در مرورگرتان مشاهده خواهید کرد. 6۱6۲۳1 ‎JavaScript‏ ‎file‏ دقت. کنید که اگر فایل جاوااسکریپت. را در پوشه ای جدا از فایل ‎co JA AEM‏ دهید حتماً در خصوصیت. 576 آدرس آنرا بنویسید.

صفحه 122:
#متغیرها یا ۷2۲130165 مانند یک ظرف و مخزن برای ذخیره سازی اطلاعات هستند * این اطلاعات می تواند یک کلمه یا جمله . عدد و یا حتی یک شیم باشد. #متغيرهاء كد نويسى را راحت تر کرده و نظم خاصی به اسکریپت ما می #بطور مثال ما یک متن را می خواهیم در چند نقطه از کد وارد کنیم که بجای آن می توانیم از يك كلمه كوتاه كه اين متن در آن ذخیره شده استفاده کنیم تا از تکرار جلوگیری کرده و اسکریپت هم شلوغ نشود.

صفحه 123:
#به مثال زیر توجه کنید تا وط یک متغیر را ببینید: ‎<script language="javascript" type="text/javascript">‏ ‎var strTest = "This is an example for variable."‏ ‎document.write(txtTest)‏ ‎</script>‏ ‏اصطلاح ۲ از کلمه ۷۵۲۱۵016 می آید که نوشتن آن اختیاری می باشد. یعنی می توانید یک متغیر را بدون نوشتن آن هم تعریف کنید ولی اگر می خواهید کد شما خوانا تر باشد بهتر است که از ۷۵۲ استفاده کنید. #قسمت بعدی یعنی 51۳1651 نامی است که شما برای آن متغیر انتخاب می کنید و سپس علامت مساوی است که متغیر را برابر با یک مقدار قرار می دهد و در آخر هم مقدار تعیین شده برای متفیر که در اینجا یک رشته متنی است يا یک 19 ۲6۲ میباشد که به همین دلیل باید آ تا عیتاً محتویات آن:در مرورگر نوشته شود. ن دو علامت " " قرار دهیم

صفحه 124:
انتخاب نام متغير #براى انتخاب نام متغير بايد نكات زير را رعايت كنيد #نام يك متغير مى تواند از مجموع حروف. اعداد و علامت ۱۱۱۵6۲1166 یا زیرین خط یعنی _ تشکیل شود که آغاز کننده نام نباید یک عدد باشد و همچنین هیچگونه فاصله ای هم در آن نباید باشد. در جاوااسکریپت حروف کوچک با بزرگ متفاوت می باشند یعنی 50۲۲651 با 561665 كاملاً تفاوت دارد كه اصطلاحاً مى كويند جاوااسکریپت 560510۷6 6856 است.

صفحه 125:
#دو نوع متغیر وجود دارد که تفاوت این دو مدل در محل استفاده از آنها مى باشد. : #متغیرهای کلی و سراسری که به آنها ۵01003 گفته می شود. این متفیرها در سراسر یک فایل اچ تی ام ال کاربرد دارند یعنی یکبار آنرا در ابتدای اسکریپت تعریف و مقدار دهی می کنید ولی در هر کجا از کد که مورد نیاز باشد از آنها بهره می گیرید. ‎es?‏ دیگر آن متفیرهای محلی یا »۱0 هستند که فقط در یک قسمت از اسکریپت کارآیی دارند که ممکن است در قسمت دیگری همان متغیر با یک مقدار د #معمولاً متغیر های محلی در توابع با ‎b function‏ 34,15 2 © يك متغيرمحلى در هر تابع مى تواند مقادير متفاوت داشته باشد بدون اينكه بيغام خطايى توليد كند

صفحه 126:
string.length ‏غيل نا رو‎ 17 string.toLowerCase abcdefghijkimnopq 0 ABCDEFGHIJKLMNOP 7 9 oe ppsicese ‏دس‎ abedefghijkimnop q string.bold () | abcdefghijklmnopq abcdefghijkimnopq abcdefghijkimnopq string. italics () string.fontsize (3) string.fontcolor oo cdef (tred") : cdefgh 8 9 مس ‎string bigi() ”* bbcdefghijkimnopq‏ ‎string.substring ieee era 2‏ 117- )2,6( ‎abcdefghijkimnopq‏ درم مسر )2,6( ‎string.substr‏ ‏۳ سس و ‎abedefghijkimnop‏ مسقم ‎string.replace‏ ‎("a","b") 9‏ ‎string.indexOf abcdefghijklmnopq )‏ __ ete abcdefghijkimnopq ——~

صفحه 127:
دستور ۲...۵156۵]] ۴...6156] eif(t<=10 ){ document.write ("<b> Good morning </b>" ) } else if(t>10&&t<13){ document.write ("<b> Hello friends </b>" ) } else if(t >= 13 &&t<18){ document.write ("<b> Good afternoon </b>" ) } else { document.write ("<b> Good evening </b>" ) 1

صفحه 128:
#مثلا اگر رنگ پس زمینه صفحه ماء سفید بود. بنویسد سفید: ‎if (document.bgColor == "#ffffff")‏ ® { ‎alertui") “)‏ ‎i‏

صفحه 129:
switch ® <script language="javascript" type="text/javascript"> var d = new Date () var weekday = d.getDay () switch ( weekday ) {case 0: document.write ("Sunday“) break case 1: document.write ("Monday“) break case 2: document.write ("Tuesday“) break case 3: document.write ("Wednesday“) break case 4: document.write ("Thursday“) break case 5: document.write ("Friday“) break default: document.write ("Saturday") 1 </script>

صفحه 130:
#می‌خواهيم برنامه‌ای بسازیم که در هر روز از هفته. یک پیام دهد. * اين برنامه؛ بسیار مهم و پرکاربرد است با آن می‌توانید مثلا برای مود يك تقویم بسازید که مناسبتهای هر روز را به شما نشان دهد؛ پا یک برنامه که هر روز یک حدیث. شعر یا جملات زیبا را بنویسید. © var Now = new Date() var Week = Now.getDay() switch (Week) { case 0: alert(“ «2: break;

صفحه 131:
۶( "دیشنبه ")۵16۳1 : 1 56وع ‎break;‏ ‏۶( سه‌ضنه 16۳۲10۲ : 2 6ووع ‎break;‏ ‏۶( "چهایشنبه ۵16۲10۳ : 3 8356© ‎break;‏ ‎case 4: alert(" 2");‏ ‎break;‏ ‎case 5: alert("a.=");‏ ‎break;‏ ‎case 6: alert("«‏ ‎break;‏ ‎default : break;‏ ۳

صفحه 132:
۲۵۲ ‏حلقه‎ ‎©» <script language="javascript" type="text/javascript"> for (i= 0;i <= 10; i++) { document.write (" Number " + i + "<br />") 1 </script> © for (var x in object) { document.write ("<li>object." + x + "=" + object Ix);

صفحه 133:
حلقه ۷/۱۲۱6 ®vari=0 while (i <= 10) 1 document.write(" Number " + i + "<br />") i++ } ®vara=0; while (a < 10) { document.write ("..", a ,"<br>"); at++; }

صفحه 134:
Do...while ® var i=0 do { document.write(" Number " + i + "<br />") i=it+1 } while (i <= 10)

صفحه 135:
ارايه ۰ ۷۱۵۲ ۷۷۵۵۱۵۵۷5 ‏ع‎ ۱۵۷ ۸۵۲۲۵۷)7( weekdays[0] = "Shanbeh" weekdays[1] = "Yekshanbeh" weekdays[2] = "Doshanbeh" weekdays[3] = "Seshanbeh" weekdays[4] = "Chaharshanbeh" weekdays[5] = "Panjshanbeh" weekdays[6] = "Jomeh“ © var weekdays = new Array ("Shanbeh","Yekshanbeh".,...)

صفحه 136:
تابع #تابع يا همان فانکشین ‎JS te LL jl clas pene (Function)‏ است که در یک جا جمع شده و داراى نام شده‌اند. ‎<Script>‏ ® ‎function funAlert()‏ { ‎alert ("5")‏ </Script>

صفحه 137:
صدا کردن تابع یکی از راه‌های صدا زدن توا اگر می‌خواهید فلان کد. به هنگام باز شدن صفحه اجرا شود. از رویداد 0۳1030 استفاده کنید. از رویدادهاست. © اكر مى خواهيد با کلیک کردن بر روی چیزی, برنامه‌ای اجرا شود از 0۳1161 استفاده کنید. #مثال: می‌خواهم تابع +11 1انا که در مثال بالا درست کرده‌ام, به هنگام باز شدن صفحه اجرا شود. براى اين كار بايد به تك بدنه (لا800 - بادى) رفته و اين كد را بنويسم: ‎<Body onLoad="funAlert()"‏ © #اگر خواستید با کلیک بر روی عکسی, پیامی نمایش داده شود؛ بايد كد زیر را در تگ عکس قرار دهید. به این صورت: > © <img onClick="funAlert()" ‏نقطه چین, یعنی بقیه کدهای مربوط به عکس.‎ #

صفحه 138:
أشنياء *يكى از ويزكى هايى كه جاوااسكريبت دارد جمع آورى اطلاعات از سيستم كاربر و نمايش انها در صفحات وب است. © همانطور كه ميدانيد زبان اج تى ام ال به تنهايى قادر به انجام جنين كارى نيست اما با كمك زبانهاى ديكر تحت وب مانند أ31/356©110[؛ مى تواند تا حدودى اين مشكل را برطرف كند. #شئ هليى در جاوااسكرييت وجود دارند كه توسط متدهاى مختلف. اطلاعات مورد نياز را از سيستم كرفته و در اختيار كاربران قرار مى دهند. #یکی از این 6 ©00[6 ها و شئ هاء 10366 می باشد که به کمک آن می توانيم تاريخ و زمان سیستم را هنگام اجرای کد دریافت کنیم. سپس آنرا نمایش دهیم و پا اینکه در یک متغیر ذخیره کنیم تا در صورت لزوم از آن بهره گیره

صفحه 139:
اشیاء این 00[6 بصورت زیر تعریف می شود: ‎new Date()‏ »© ‎5b‏ نوشتن آن دقت کنید که غیر از این باشد با پیفام خطا روبرو خواهید شد #چون جاوااسکریپت زبان حساسی است پس هر جا که حروف بزرگ است باید بزرگ و هر جا کوچک است باید کوچک نوشته شود. در آخر هم پرانتز می گذارید که در قسمتهای بعدی همین صفحه کارآیی آنها را درک خواهید کرد. شی یک رشته متنی شامل روز ماه سال. ساعت. دقیقه. ثانیه و اختلاف زمانی با نآلا را برمیگرداند. ‎Coordinated Wiis. UTC‏ 6 ۱۱۱۷6۲5۵۱ می باشد که به آن 1۳06 لاالا2 هم می گویند و مطابق با استاندارد جهانی زمان است.

صفحه 140:
کد زير را در يك سند اج تى ام ال وارد كنيد و يس از ذخيره؛ آنرا اجرا كنيد: ‎<script language="javascript"‏ ® ‎type="text/javascript">‏ ‎document.write ( new Date() )‏ ‎</script>‏

صفحه 141:
متدهای شیم ۱3866 #بعد از ساختن شی جدید 0۵16] ۰ می توانید توسط متدهای مربوط به 1 ت دیگری از این شی دریافت کنید. * اين شیم دارای هفت متد اصلی میباشد که بیشترین کاربرد را دارند. اين متدها عبارتند از: ® getDate(), getDay(), getMonth(), getYear(), getHours(), getMinutes(), getSeconds() برای تعریف و استفاده از اين متدها باید ابتدا شیع را نوشته. سپس یک نقطه بگذاریم و بعد از نقطه متد مورد نظر را بنویسیم.

صفحه 142:
شی. 0316 برای درک بهتر مطالب گفته شده یک تمرین را با هم انجام می دهیم. در یک صفحه وب. می خواهیم زمان ورود یک کاربر به همان صفحه را اعلام کنیم. بطور مثال: #شما دقیقاً درساعت :۹:۳۳ وارد این صفحه شدید. که اسکریپت آن برای برگرداندن زمان مورد نظر به صورت زیر می باشد: ‎<script language="javascript"‏ © ‎type="text/javascript">‏ ‎var vorood = new Date()‏ ‎document.write( vorood.getHours() + ":" +‏ ‎vorood.getMinutes() + ":" +‏ ‎vorood.getSeconds() )‏ ‎</script>‏

صفحه 143:
(—) Object #شی‌:همان طور که قبلا نیز گفته شد هر چیزی که در صفحه ما وجود دارد. یک شی حساب می‌شود و می‌توان از آن استفاده کرد و تغییرش داد. #اولين شی موجود. خود صفحه و سند (006©10176176) استء كه قبلا با آن آشنا شده‌اید. ۴۴ (خصوصیاگ هر شی ی کم شخصانو خصوصیلتی دارد که بسیانگر کمینتو کیفیلنست #مثلا یک سند. داراى اين حصوصیات است: پس زمینه, عنوان (1116» نوار وضعیت (5لا6]9) نوار پیمایش (/66۳0۱) متن (۲6)؛ لینک ‎(Link)‏

صفحه 144:
طریقه نوشته: ابندا نام شی را نوشته, و بعد از یک نقطه نام خصوصیت مورد نظر را وارد کنید. گاهی اوقات؛ آن خصوصیت هم دارای چند خحصوصیت دیگر است که باید بعد از یک نقطف نوشته شود. COT adi ‏تن‎ ae ‏تلبت با تن‎ document.bgColor COL ee oe document.linkColor CTT eel lg document.vlinkColor

صفحه 145:
۴ سرس«ته کاری که اشیاء می‌توانند انجام دهند. متد نامیده می‌شود؛ مانند باز کردن یا بستن پنجره. شالوده و اصل یک زبان برنامه نویسیء متدهای آن استء كه ما بايد آنها را به خوبى ياد كرفته و در جای مناسب استفاده نماييم. متدهاء توسط سازندكان زبان برنامه نويسى؛ نوشته و تهیه می‌شود و ممكن است در نسخههاى جديد آن زبان؛ تغییر داده شده اضافه و تكميل شود. مثال: متد بسته شدن صفحه: ® window.close()

صفحه 146:
۴ ررییداد) گرویداه عملیاتی است که کارب در یک صفحه انجام می‌دهد. بعضی از رویدادها مشترک و عمومی هستند و بعضی مخصوص یک شی. بعضی از اين رويدادها را برای شما دسته بندی کرده‌ام که تما ذخیره نموده و به مرور آنرا کامل کنید. #طريقه نوشتن: رويدادها را با كلمه 017 شروع مىكنند و به اين صورت مى خوانند: 0110116016 - هنگام کلیک کردن.

صفحه 147:
صفحه كليد موس عمومى ‎onload ab onMouse 5 onKeydo eat‏ ‎ae move o> wn 05‏ onMouse onKeypre x onUnload = sah es ave ‏افشردن كليد 0 ورود موس‎ onMouse ۳ بالا آمدن کلیک ‎onkeyup‏ خروج موس ‎oti‏ انصراف ‎onAbort‏ کلیک . نرکوس, زوم ۰ 00۴06۱56 دوبار كليى سیر ‎onBlur‏ كشيدن ۳ خحطا ‎OnError‏ art

صفحه 148:
new Date () ۳ Tue Dec 21 2010 toLocaleString 9 ‏زمان کامل‎ 13:42:47 GMT+0330 toLocaleDateString so lb ‏فقط‎ (Iran Standard 0 8 ,51 ‏(11506اسقائاء, ميسمير‎ toLocaleTimeString 7 7 ‏ب.ظ‎ ۰۱:۵۲:۷ ۰ 0 ‏الثلاثاء, ديسمير ۲۱ ۲۰۱۰ جيعد‎ toGMTString() ‏زمان بين‎ a bees 9 ‏زمان بين المللى‎ Tue, 21 Dec 0 getYear() ‏سال‎ 10:12:47 GMT getMonth() ‏ملو‎ ig getDay() ‏روز هنته‎ ۲ getDate() ‏روز ماه‎ W getHours() ‏ماعت‎ We getMinutes() ‏دقیقه‎ ١ getSeconds() ‏ثانیه‎

صفحه 149:
A نمونه ‎<script>‏ © ‎function funFor()‏ { ‎document.writeln("<Table Border=1>");‏ ‎for(a = 1; a <= 10; a++)‏ { ‎document.writeln("<TR>")‏ ‎for(b = 1; b <= 10; b++)‏ if ((at+b) % 2) {

صفحه 150:
AS aya ® document.writeln("<TD bgcolor=blue>"+ a* b+" </TD>") } else { document.writeln("<TD>"+ a*b+" </TD>") 1 + document.writeln("</TR>"); 1 document.writeln("</Table>"); } funFor(); </script>

صفحه 151:
3 نمونه کد۲: اسکرول صفحه (حرکت صفحه از بالا به پایین) ©. يك تابع (1000۷۷۲]) برای پایین یفتن, و یک تابع ‎Ye ste FUNUP)‏ آمدن. این توابع, به صورت مستقل, اجرا می‌شوند. در قسمت بدنه, دو دکمه (یا چیزی شبیه آن) قرار می‌دهیم. یکی برای فعال کردن تابع اول: و دیگری برای تابع دوم. به هنكام كليك بر روى دكمدهاء توابع, اجرا مىشوند؛ يعنى بايد از رويداد »01100111 استفاده كنيم. © <script> function funDown() // ‏تابعی‌که صفحه را بسه طرفپییرمیپرد‎ { for (a = 1; a <= 600; ‏حلقه‌لیک» لفزلیش// (++ج‎

صفحه 152:
>) نمونه کد ۲: اسكرول صفحه (حركت صفحه از بالا به پایین) متدلسکریل‌صفحه // :(۵ ,1) ۱۸/۱۴۵۵۷۷۰56۲۵۱ ۰ ۷ 1 function funUp() // >. u3 b |) ‏تابعی‌که صفحه‎ { for (a = 600; a >= 1; a--) // sols ‏حلقملىكه‎ 1 window.scroll (600, a); } دارد 0 </script>

صفحه 153:
® function funTime() { var Time = new Date (); var H = Time.getHours(); var M = Time.getMinutes(); var S = Time.getSeconds(); var Clock =H + ":"+M+":" +S; Font.innerText = eL.: " + Clock; setTimeout ("funTime()", 1000);// ‏بالميزتليس‎ ‏دوبارد خولنیمیبسود‎ Hiss ppp bal

صفحه 154:
نمونه کد۳: © 0۳6۲۲6 با این دستون متن یک تگ در قسمت بدنه - مانند محتویات نگ پاراگراف - نمایش داده می‌شود؛ و می‌توانیم آنرا تغییر داده و ‎Ales‏ کنیم- ۲ ألاع 1 اع - ۱۳۱۳۵۲۳۱۲۳۱۱ - /0116۲۳۱۲۱: اين ۳ متد. شبیه دستور قبلی است؛ البته با کمی تفاوت. 561۳۳6011 دستور تایمر و زمان شمار است. بعد از آن» یک جفت پرانت قرار دارد که داخلش+ دو پارامتر نوشته می‌شود: ‎A)‏ اسم 4 ۲. زمانی که تایمر در آن فعال خواهد شد. واحد زمان, میلی ثائیه است. (۱۰۰۰ < یک ثانیه) 16۳۷۱ دستور تایمر و زمان شمار است. مانند دستور قبل. عمل می‌کند. ی است که قرار است اجرا شود؛ مانند یک تابع.

صفحه 155:
معرفی جند ‎er‏ (سایت) : ‎JavaScript o1,1¢‏ 8 سایت‌های فارسی زبان که تخصصا درباره این زبان. فعالیت می‌کند. قسمتی از آن به آموزش, و قسمتی به بیان مثال, می‌پردازد استاد آنلاین: فارسی. علوم مختلف رایانه‌ای را به شما آموزش می‌دهد که جاوا یکی از آنهاست. 60۲۳ |: لنگلیسی #سایت ۰۷۷3560015 مرجع بسیار جامع و جالبی است از امکانات جالب آن, ایجاد محیطی بای تمرین آنلا. هی‌درنی زا تفرین: جرا وابتجه آنرا ند 5۵ 8[ لنگلیسی * یک مخزن عالی با مقادیر زیادی اسکریپت و مسألهای فراوان برای یادگیری جاوا اسکریپت. ® ۳896۲6 لنگلیسی #هرآنچه را که برای طراحی وب. لازم است. در چند بخش, به شما آموزش می‌دهد. ای بسیاری از علوم رایانه‌ای. یکی است. یعنی در همین سایت. می‌توانید

صفحه 156:
#خود آموز جاوا اسکریپت در ۲۶ ساعت Teach yourself Java Script in 24 hours نویسنده: مایکل مانکر مترجم: مهندس على ناصح ناشر: موسسه فرهنگی هنری دیباگران تهران نوبت : اول قيمت: ۳۳۰۰ تومان تلفن: ۲۰۹۰۰۰۱ الی ۵ پایگاه اینترنتی: ۰5۷۷۵۲۱6۱۵0۰60۲۲ ۱۲۵۰//۷۷۷۷۷۷ این سایت. دارای نکات آموزنده و جالب در علوم مختلف طراحی وب. بالاخص جاوا اسکریپت می‌باشد. می‌توانید مثالهای کتاب را در این آدرس با آدرس دانلود کنید. توضیح دیده و از اٍ

صفحه 157:
معرفی کتاب #نام:خود آموز سریع جاوا اسکریپت ‎Java Script For The World Wide Web 2003‏ نویسندگان: تام نگرینو و دوری اسمیت مترجم: مهندس حمید رضا ذوقی انتشارات: ذوقی نوبت چاپ: اول قیمت: ۳۹۵۰ تومان يايكاه اينترنتى: 0177© 0110.6 الاج ذا 31/35 [. الالاثالانا//: محا در اين ‎lb‏ علاوه بر مثالهاى كتاب, يايكادهاى كمكى براى زبانهاى وب. نيز معرفى شده است.مى توانيد مثالهاى كتاب را در اين آدرس با ن آدرس دانلود كنيد.

صفحه 158:

به نام خدا طراحی وب رشته مهندسي کامپيوتر و فناوری اطالعات 1 نحوه نمره دهی 5 ‏میان ترم ‏تمرینات کالسی 3 ‏حضور منظم و موثر در کالس 4 ‏پروژه 7 ‏پایان ترم ‏غیبت غیر مجاز= حذف! 2 جمع 21نمره 2 نحوه نمره دهی 5 ‏میان ترم ‏تمرینات کالسی 3 ‏حضور منظم و موثر در کالس 4 ‏پروژه 7 ‏پایان ترم ‏غیبت غیر مجاز= حذف! 2 جمع 21نمره 3 اطالعات تماس محمد علی آراسته کارشناس ارشد فناوری اطالعات ‏Ma.arasteh@gmail.com موضوع ایمیلjavad-web : ‏Www.arasteh.persiangig.com جزوات و اسالیدهای درسی درون سایت قرار می گیرد تماس بیرون کالس فقط از طریق ایمیل 4 پروژه ‏نوع :پیاده سازی ‏عنوان :ساختن صفحات شخصی ‏آخرین مهلت تحویل :هفته آخر کالس ‏نحوه ارائه :حضوری و در کارگاه هر گونه کپی برداری صرف و بدون تحقیق صفر تلقی می شود. نحوه ارائه حتما بایدحضوری بوده و از کدهای نوشته شده سوال پرسیده می شود. 5 مقدمه فصل اول 6 ?Internet And Web ‏اينترنت ( )International networkingشبکه متشکل از هزاران کامپيوتر که به يکديگر متصل اند مي باشد که با زباني يکسان وتحت پروتکل اينترنت با يکديگر سخن ميگويند. ‏وب يا ) www (World Wide Webيکي از مهمترين سيستم هاي ارتباطي و اطالع رساني است که يکي از مهمترين قسمت هاي اينترنت نيز ميباشد ‏اينترنت مجموعه اي از شبکه هاي کامپيوتري مرتبط به هم است در حالي که وب ميتواند روي کامپيوتر جدا از شبکه هم اجرا شود 7 Web WebيکسYYيستم .Interactive ارسال اطالعات توسط صفحات ايجاد شده و به کاربران ارسال مي شود ودريافت اطالعات از طريق فرم ها و توسط برنامه هايي نظير CGI صورت مي گيرد. ‏صفحات وب شامل Hyperlinks:و HyperTextsو Multimediaمي باشد. 8 Client / Server ‏مدل C/Sبر اساس کالينت ,سرور و شبکه مي باشد. ‏نرم افزار کالينت نقش Interfaceيا رابط را بين سيستم کاربر و سيستم سرور دارد ,به نرم افزار Web Client , Web Browserيا مرورگر وب گفته مي شود. ‏Requst ‏Response )(Information 9 Web Browser ‏يک مرورگر با کمک يک Requestدرخواستي براي خواندن يک صفحه از وب سرور ميکند. ‏اين Requestيا درخواست بر اساس استاندارد ارتباطي يا پروتوکل HTTPبوده و شامل آدرس صفحه مورد نظر ميباشد. (Uniform URLبYYYه آدرYسصYYفحاتوYبگYYفته مYيشود . )Resource Location ‏مثالhttp://www.apple.ir/student/lesson.html : نام فايل مسير آدرس سرويس دهنده پروتکل دستيابي 10 Static Wab Pages ‏ ‏ ‏ ‏ صفحات وب ايستا شامل کدهاي Htmlبوده که قبل از اينکه هر نوع درخواستي براي آن وجود داشته باشد به طور کامل محتويات آن مشخص شده است. شکل ظاهري همواره يکسان خواهد بود صرف نظر از اينکه چه کسي در چه زماني و يا چگونه صفحه را مشاهده خواهد کرد. مزايا :طراحي آسان و به کارگيري سريع در شبکه معايب :عدم امنيت و نداشتن صفحات سفارشي وب 11 Static Wab Pages 12 Client-Side Dynamic Page ‏صفحه پویا صفحه ای است که بر اساس نیاز ما تغییر کند ‏تکنولوژِي که پويايي صفحه از جايگاه سرويس گيرنده ( )Clientتحقق بي يابد. ‏ماژول هايي به مرورگر ملحق ميشود که تمام عمليات ايجاد صفحات پويا را انجام مي دهد. • JavaScript • VBScript • ActiveX Controls • Java Applet • flash 13 Client-Side Dynamic Page 14 Java Script ‏زبان دستوري JavaScriptداراي امکانات متعدد جهت کنترل و مديريت رفتار و محتويات يک مرورگر ميباشد. ‏قدرت انجام عمليات بر روي فايل را ندارد. ‏زباني Case Sensitiveاست. 15 VB Script ‏YتYYابYلتYYفسير ‏YرکYتYايکروYساف ق VBScriptفYYYقطتYYوسYطمYرورYگر هايش Yم هستند. ‏حساس به حروف بزرگ و کوچک نيست. 16 ActiveX Controls ‏به عنصري که Yتوسط C++ , C# , Javaپياده سازي شود. ‏امکان استفاده Timer , Chartتاييد کاربر و يا دستيابي به بانک اطالعاتي را فراهم مي آورد. ‏از طريق تگ < >Objectبه صفحات وب اضافه شده. ‏امکان عمليات روي فايل و رجيستري را دارد. 17 Java Applet ‏يک زبان مستقل از PlatFormاست. ‏هدف استفاده از جاوا براي Appletها ميباشد که توسط تگ < >Appletبه صفحه وب ملحق ميشود. AppletتYYوسYطمYرورYگر downloadشYYده YوYتوسYطمYاشYينمYجازYي جYاوا ( )JavaمYوجود در مYرورYگر تYYفسير مYيشود. 18 flash ‏فایلهایی هستند که اطالعاتی را به صورت گرافیکی متحرک به ما نمایش می دهند 19 Server-Side Dynamic Page ‏تکنولوژِي که پويايي صفحه از جايگاه سرويس دهنده ( )Serverتحقق مي يابد. ‏سرويس دهنده وب نرم افزاري است که مديريت صفحات وب رابر عهده گرفته و آن ها را براي سرويس گيرندگان مجهز به مرورگر ها آماده ميکند .مانند : • IIS • Apache 20 Server-Side Dynamic Page 4 21 Server-Side Dynamic Page خواهد بود يعني منطقHTML کاربر صرفا شاهد کد هاي: مزايا صفحات وب مخفي نگهداري ميشود مجدداHtml با هر در خواست براي هر کاربر بايستي فايل: معايب .توليد شود CGI(Common Gateway Interface) ASP(Active Server Pages) PHP(Personal Home Page) JSP(Java Server Pages) ASP.NET 22 • • • • • • • Web Design Psychology Flash Graphics Web Design … Dhtml Site Designer Programs 23 Web Development ASP.net ADO.net Databasees Web Development … Xml Server Side Scripts 24 Html فصل دوم Html ‏Yل و يا اYچYتملبYYYخواYنYيد. HTMLرا "اYچ تYYياYم ا"Y , html (Hypertext Markup Language)از آYن هدفYيجاد سYYهYولYتدر بYYYه عYنواYنزYبانعYالمYتگ YذارYيياد مYيشYYود کYYه بYYا ا ‏Yت ‏YبYيجاد شYYده YاYس . مYختلفوYيصYYفحه و ا ر تYYنظيم مYحلقYYرار گYYرفYتنعYناصر ‏يک فايل HTMLفايلي از نوع textميباشد که متشکل از markup tagها ميباشد. ‏وظيفه اصلي تگ هاي اچتمل ( ) markup tagsبيان چگونگي نمايش اطالعات ميباشد. 26 Html ‏يک فايل HTMLبايد داراي انشعاب htmو يا htmlباشد. ‏به هيچ کامپايلري احتياج ندارد و در اکثر سيستم ها مورد استفاده قرار مي گيرد. ‏ساختار زبان در قالب tagتعريف ميشود. ‏مرورگر يا Browserاز روي markup tagها مي فهمد که چگونه Yبايد صفحه را نمايش بدهد. 27 Html ‏تعيين استاندارد هاي وب ربطي به شرکتهاي مايکروسافت و يا نت اسکيپ ندارد. World Wide Web Consortiumيا W3CتYعيينكنندهY ‏Yت ‏Yبس . اYسYتانداردYهايو اY مYهمترينYسYتانداردYهايتYYصويب ا HTML, CSS and XMLاز شYYده YوYبمYيباشYند. ‏آخرين استاندارد HTMLاستاندارد XHTML 1.0ميباشد . 28 Tag صYواYيخYه داراYYناصر کYياز عYالکYYYنبYنواYه عY ) بhtmlتYتوراYسY ( دTag هYYيشوند) کYاهر مYج ظYتزوYصورYYYعموال بYتملمYچYهاي گ اYYند (تYيباشYيکسانم : يشودYريفمYعYYير تYتزYورYYه صYYYب <Tag name Parameters> Element content </Tag name> هYY> کBR<ثلY م.داردYينYايانYYگپYYه تYYگيکYY ت: Empty Tag .يشودYته مYوشYد نYعYYYطبYتندر خYه مYمYناداY آYشاهدهYحضمYه مYYYب This is first line <br> This is a second line Result in IE 29 This is first line This is secinf line Tag ‏با کمک تگ هاي اچتمل عناصر و يا Elementsساخته ميشوند. ‏در زبان اچتمل حدود 80عنصر تعريف شده است. ‏تگ هاي اچتمل بوسيله دو نويسه ( > ).charو < ساخته ميشوند. ‏تگ هاي اچتمل را ميتوانيد بوسيله حروف التين کوچک (lower )caseو يا بزرگ ( )upper caseبنويسيد و case sensitiveنيستند .براي مثال دو تگ < >bو < >Bمعادل هم هستند ولي شديدا توصيه ميشود که به خاطر سازگاري با XHTMLاز حروف کوچک استفاده شود. 30 Tag Sample رسم خط افقي: >HR< <Hr> <Hr Size=10> <Hr Size=20 Width=300> <Hr Size=20 Width=300 color=“Blue”> : H1/>Sample Text<<H1< <H1> Header 1 <H1> <H2> Header 2 </h2> <H6> test </h6> 31 Html ‏تگ هاي اصلي صفحات وب : <>html <>html/ <>head <>head/ <>title <>title/ <>body <>body/ ‏براي ايجاد سند htmlبه ويرايشگر ( )Notepad,Wordpadيا نرم افزار ساخت صفحات وب )FrontPageيا ) Dreamweaverاحتياج داريم. ‏سند Htmlاز دو بخش سر و بدنه تشکيل شده است. 32 Html Html سند >html< >head< >title>Title of page</title< >head/< >body< >This is my first html page. <b>This text is bold</b >body/< >html/< 33 Head Body Tag Attributes ‏تگ ها ميتوانند حاوي اطالعات اضافي ديگر باشند ،به اين اطالعات شناسه يا Attributeميگويند و وظيفه آنها بيان ديگر اطالعات يک عنصر يا Elementميباشد. مثال :در مورد تگ < >bodyشناسه اي به نام bgcolorوجود دارد که رنگ زمينه Yمتن ( )backgroundرا تعيين ميکند براي نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافي است که به شکل زير عمل کنيد : <>"body bgcolor="black <>body/ 34 Tag Attributes ‏شناسه ها به صورت کلي "مقدار=نام" يا " "name=valueنوشته ميشوند و هميشه به تگ شروع يک عنصر يا Elementاضافه ميشوند. ‏اگر در يک عنصر يا Elementشناسه ها قيد نشوند از مقادير قراردادي يا defaultآنها استفاده خواهد شد مثال در تگ bodyاگر شناسه bgcolorنوشته نشود از رنگ سفيد براي زمينه صفحه استفاده خواهد شد. ‏مقدار يک شناسه را ميتوانيد داخل نويسه هاي " و يا ' بنويسيد و اختيار دست شما است فقط در مواردي که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود. 35 Tag Attributes ‏قبل از Tag Attributeحداقل يک فضاي خالي الزم است. ‏ترتيب نوشتن Attributeاهميتي ندارد. ‏يک Attributeنبايد دو بار مقدار دهي کرد. ‏قبل از اسم Tagنبايستي فضاي خالي باشد. 36 Html ‏توضيحات در ( Htmlيادداشتهايي که مرورگر آنها را تفسير نمي کند) به صورت زير است. ‏مثال : > Comment -- <!-- >First line <!– example1 -- > <br <!– example2 -- > Second Line 37 تمرین(ساخت اولین صفحه) Html فصل سوم Character Entities در اچ تي ام ال بعضی از نويسه ها دارای معنی خاصی بوده و برای نمايش آنها در صفحاتتان بايد از character entitiesها استفاده کنيد. يک character entitiesاز سه قسمت تشکيل ميشود: -1نويسه )&( ampersand -2نام entityيا نويسه #و سپس شماره عددی entity - 3و نهايتا نويسه );( semicolon برای نمايش نويسه > دو روش وجود دارد ،بايد از & ;ltيا از &;60# استفاده کنيد .در اين مثال ltنام entityو 60شماره عددی آن ميباشYد. Entity ها بYYYه کYYوچYکو بYYزرYگYيحYروYفحYساسهستند و در واYقYع Case SensitiveمYيباشYند. 40 Character Entities 41 Formatting ‏وظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ( مثال ضخیم و boldبودن و يا مورب و ايتاليک بودن ) ميباشد . : >p<متن داخل به صورت پاراگراف در مي آيد. : >Br<به محض مشاهده ادامه مطارب در خط بعد نوشته مي شود. : >TT<متن را به صورت monospacing fontنمايش مي دهد. :>Pre<متني كه در آن نوشته شود پردازش نمي شود. : >B<متن را به صورت ضخيم نمايش مي دهد. : >I<متن را به صورت كج نمايش مي دهد. 42 Formatting 43 Formatting براي كنترل دقيق تر بر روي نحوه به نمايش در آمدن متن در وب از اين تگ استفاده: >Font< : مي شود كه داراي ويژگي هاي زير ميباشد  .گيردYYYند بYيتواYقدار مYه مYYكثر سYداYتكه حYونYYوع فYYعيينYYت ن يYراYY ب: Face Attribute  Font< >”face=“nazanin,Lotus,Arial ا يYراYY ب: Size Attribute your text must type here! . لمYY قYهYندازYعيينYYت </Font>  <Font size=N> <!– 1 <= N <=7 your text must type here! </Font> <Font color=“Red”> your text is Red! </Font> 44 . لمYY قYهYندازYعيينYYت ا يYراYY ب: Color Attribute  Formatting ‏روش هاي مشخص كردن رنگ در : Html .aاستفاده ازاسم رنگ. .bاستفاده ازفرمت RGBمبناي :10با تنظيم شدت ( )Intensityهر يك از رنگ هاي قرمز ،سبز و آبي . )”Color=“Rgb(Red Intensity , Grean Intensity , Blue Intensity .cاستفاده از فرمت RGBمبناي 16 ‏Color=#6HexDigit 45 Formatting 46 WebSafe( رنگ هاي تضمين شده )Color Hex RG B Intensity 0 51 0% 20% 00 33 102 153 20 4 40% 60% 80% 66 99 cc 25 100% ff Formattiong :>Align<براي تراز بندي استفاده ميشود ،سه مقدار زير را مي گيرد: ‏Right  ‏Left  ‏Center  ‏Justify  ><h1 align=center> Sample </h1 ‏تركيب تگ ها در Htmlبه صورت تو در تو ( )Nestedميباشد يعني اگر تگي در داخل تگ ديگري باز شود ابتدا بايستي بسته شود و حق تقدم در تاژير گذاري با تگ داخلي است. <>B < >i …. < >i <>B <>B < >i … <>B < >i 47 Exmaple 1 <Html> <head> <title>Sample Formattiong 1</title> </head> <body> <p>hello word</p> <p><i>hello word</i></p> <p><b>hello word</b></p> <p><b> <i> hello word </i> </b></p> <body> <html> 48 Exmaple 2 <Html> <head> <title>Sample Formattiong 2</title> </head> <body> <font color="Yellow"> <br>Hello word With Yellow </font> 49 <font color="rgb(255,0,127)"> <br> Hello word With Color </font> <br> <font color="rgb(100%,0%,50%)"> Hello word With Color </font> <font color=#FF007f> <br> Hello word With Color </font> </body> Exmaple 3 50 <Html> <head> <title>Sample Formattiong 3</title> </head> <body> <font color="black"> This text has black color <font color="Red" size=4> <br>This text has red color and size is Four <font size=7 font="nazanin"> <br>This Text write with nazanin font and 7 size ,What about Color? </font> <font> <br> Hello word!, what is color? </font> <br> <font face="Unknowe,arial" color="rgb(100%,0%,50%)"> Hello word With Color </font> </body> </Html> Exmaple 4 <Html> <head> <title>Sample Formattiong 4</title> </head> <body> if (x=4) then <br><strong>a<sub>2</sub></strong>=x<sup >3</sup>-4; </body> </Html> 51 روش هاي آدرس دهي )Absolute( آدرس دهي مطلق D:\Image\pic.bmp File:///d:/Image/pic.bmp )Local( آدرس دهي روي كامپيوتر محلي http://www.apple.ir/Image/ pic.bmp 52 >html< Body< >”BackGround=“Pic1.bmp .… >Body/< >Html/< .1 )Url( آدرس دهي روي شبكه اينترنت )Relative( آدرس دهي نسبي .2 >html< Body< BackGround=“../Image/Pic2.bmp >” .… >Body/< >Html/< Image در زبان اچتمل تصاوير را با کمک تگ < >imgتعريف ميکنند .تگ < >imgاز نوع تگهای خالYی است ،بدين معنا که فقط دارای يک يا چند شناسه و attributeبوده و دارای تگ انتهائی يا < >/imgنيست. مهمترين شناسه برای درج و تعريف يک تصوير srcيا sourceنام دارد و مقدار اين شناسه آدرس يا URLتصوير ميباشد <>"img src=“Address شناسه های widthو height Dدر تگ img کاربرد شناسه های widthو heightتعيين عرض و ارتفاع نمايش تصوير است .اگر از اين شناسه ها استفاده نکنيد ،مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. "=mg src="http://www.google.com/images/logo.gif" width="276" height شناسه Altيا " "alternate textيا متن جايگزين اگر مرورگر به هر دليلی نتواند که يک تصوير را نمايش دهد <>"img src="images/Unkonow.jpg" alt="Fake Pic 53 Image شتاسه هاي Vspace , Hspaceتنظيم حاشيه افقي و عمودي را به عهده دارند. اگر در يک صفحه اچتمل از 10تصوير استفاده شده باشد ،مرورگر بايد 11فايل را لود کند (.خود صفحه به عالوه 10تصوير) استفاده از تصاوير ،سرعت لود شدن صفحات را پايين می آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد . لود تصويری با حجم 50کيلوبايت برای کسی که از مودمی با سرعت 28kbpsاستفاده ميکند حداقل 15ثانيه طول خواهد کشيد. برای ديدن مشخصات تصاوير در وب کافی است که روی تصوير Right clickکرذه و سپس در بخش properitiesآدرس،ابعاد و ظرفيت تصوير را ببينيد. 54 HTML Links در محيط وب ،صفحات اچتمل با کمک پيوندها به يکديگر متصل ( )Linkميشوند .در يک متن مختلط ( )Hyperبا کمک پيوندها ميتوان از يک متن به هر صفحه ديگر در وب متصل شد.اين کار با کمک عنصري به نام Aيا Anchorميسر ميگردد. شناسه :))href hyerlinkبرای ايجاد پيوند به صفحات ديگر از تگ < >aاستفاده ميشود .پيوندها ميتوانند به بخش ديگری از همان صفحه ،صفحات ديگر وب ،تصاوير ،فايلهای صوتی يا حتی فيلم ها و ... اشاره کنند. <>a href="url">Some Text</a <a href="http://www.google.com/">Visit ‏Google >Site</a ‏self, _blank, _top, _parent مقدار _ شناسه : targetچهار شناسه : Nameبا کمک شناسه nameميتوانيد پيوندها را نام گذاری کنيد.پيوندهای نامگذاری شده امکان حرکت ميان قسمتهای مختلف يک صفحه يا pageرا فراهم ميکنند .در اينصورت مثال برای رفتن به آخر يک متن ديگر نيازی به Scrool downکردن تمامی صفحه نيست پرش به Label  ><a name="label01">Text to be displayed</a <>a href="#label01"> Goto Label! </a <>a href="default.aspx#label01"> Goto Label! </a 55 HTML Links کاربرد حالتهای مختلف شناسه target ‏Target Attributes مرورگر پيوند را در يک پنجره جديد باز ميکند. "target="_blank مرورگر پيوند را همان پنجره باز ميکند( .حالت پيش فرض يا )default "target="_self مرورگر پيوند را فريم parentباز ميکند( .کاربرد د{ر مبحث فريمها) "target="_parent مرورگر پيوند را در فريم مادر و اصلی باز ميکند(.روشی خوب برای نجات از شر فريمها ) "target="_top 56 HTML Links : Image Link <a ….> <img …. Border=‘0’> </a> : Email ارسال <p> Mailto: <a href=“mailto:info@aviny.com? cc=someoneelse@microsoft.com& bcc=andsomeoneelse2”> MY Mail</a> <p> 57 Lists .1فهرستهای نامرتب()unordered list فهرستهائی هستند از يک يا چند قلم اطالعات که معموال با دايرهای کوچک و سياه رنگ در شروع نمايش داده ميشوند .يک فهرست از نوع نامرتب با تگ < >ulشروع شده و هر رقم اطالعات با تگ < >liمشخص ميگردد. ‏HTML code نمايش توسط مرورگر •red •Blue •Green •قهوه •شير •چای ><ul ><li>Red</li ><li>Blue</li ><li>Green</li ></ul > "<ul dir="rtl ></liقهوه><li ></liشير><li ></liچای><li ></ul داخل تگهای < >liميتوانيد از پاراگرافها ،تگهای ، brتصاوير و حتي فهرستهای ديگر استفاده کنيد 58 Lists .2 ‏ فهرستهای مرتب ()Ordered list اين نوع فهرست بسيار شبيه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمايش اقالم اطالعاتی از اعداد به جای دايره های کوچک سياه رنگ استفاده ميکند .يک فهرست از نوع مرتب با تگ < >olشروع شده و همانند فهرستهای نامرتب هر رقم اطالعات با تگ < >liمشخص ميگردد. ><h4>A nested List:</h4 ><ol start=3 type=i ><li>Coffee</li <li>Tea ><ul ><li>Black tea</li ><li>Green tea</li ></ul ></li ><li>Milk</li ></ol 59 Lists .3 فهرستهای تعريفی()Definition list فهرست تعريفی فهرستی است از اصطالح ها و تشريح و توصيف آنها. فهرستهای تعريفی با < >dlشروع شده و هر ذوج اصطالح و تعريف مربوط به آن با تگهای < >dtو < >ddتعريف ميشوند. نمايش توسط مرورگر ‏HTML code ‏HTTP ‏Hypertext Transfer Protocol ‏FTP ‏File Transfer Protocol ‏IP ‏Internet Protocol ><dl ><dt>HTTP</dt ><dd>Hypertext Transfer Protocol</dd ><dt>FTP</dt ><dd>File Transfer Protocol</dd ><dt>IP</dt ><dd>Internet Protocol</dd ></dl مقدمه خالصه ای از مقدمه فصل 1 خالصه ای از فصل 1 فصل 2 خالصه ای از فصل 2 > "<dl dir="rtl ></dtم قدم ه> <dt ></ddخالصه ایاز م قدم ه><dd ></dtف صل<dt>2 ></ddخالصه ایاز ف صل<dd>1 ></dtف صل<dt>2 ></ddخالصه ایاز ف صل<dd>2 ></dl 60 فارسي نويسي در Html ‏روش کدگزاری UTF-8 برای تايپ و نمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8اسنفاده شود .نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoingصفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equivدر بخش headصفحات اچتمل به شکل زير استفاده شود: <;meta http-equiv="Content-Type“ content="text/html >"charset=utf-8 BrowserقYYبلاز نYYمايشصYYفحه از روYیمYتاتYگفYYوقنYوع کYYدگزارYی ( )Encodingرا تYYشخيصدادYه. Y 61 فارسي نويسي در Html ‏Attribute dir جYهتنYYمايشمYتونالYتYينبYYYه صYYورYتپYYYيشفYYرضو defaultاز چYپبYYYه ‏Yت )ltrمYيباشد.در مYورد مYتونو جYمالتفYYارYسYیبYYايد بYYا کYYمکروYشYی راYس ( ‏Yپ تYYغيير دYهيد .شYYناسYه جYهتنYYمايشپYYYيشفYYرضرا بYYYه "راYسYتبYYYه چ " يا attributeی بYYYه نYام dirيا همان directionاYينکYYار اYنYجام مYيدهد. اين شناسه دارای دو مقدار ممکن ميباشد : - .dir="ltr" , Left-to-right textچپ به راست - .dir="rtl" , Right-to-left textراست به چپ 62 فارسي نويسي در Html ‏مثال برای نمايش جمله فارسی "سالم بر دنيای وب!" با کمک عناصر p يا divکافی است که به يکی از شکلهای زير عمل شود: >"p dir="rtl<سالم بر دنيای وب <>p/ >"div dir="rtl<سالم بر دنيای وب <>div/ ‏در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد: ‏p> , <div> , <html> , <body> , <table> ,<  <tr> , <td> , <h1 ... h6> , <input> , <pre> , ... , ><select> , <span 63 Html فصل چهارم Tables برای تعريف جداول از تگ < >tableاستفاده ميشود .يک جدول از يک يا چند سطر که با کمک تگ < >trتعريف ميشوند ،تشکيل ميشود .هر رديف يا rowاز يک يا چند سلول، خانه يا cellتشکيل گرديده که با کمک تگ < >tdايجاد ميشوند .نام های tdو trبه ترتيب خالصYه شده table rowو table dataميباشند. محتوی يک سلول ميتواند متن ،تصوير ،فهرستها ،جداول ديگر ،پاراگرافها و ...باشد. ساده ترين جدول ممکن در اچتمل ،جدولی است با يک سطر و يک ستون! رديف ،1سلول 3 رديف ،2سلول 3 رديف ،1سلول 2 رديف ،1سلول 1 رديف ،2سلول 2 رديف ،2سلول 1 <"table border="1 >"dir="rtl ><tr ></tdردYيف ،1سYYلول<td>1 ></tdردYيف ،1سYYلول<td>2 ></tdردYيف ،1سYYلول<td>3 ></tr ><tr ></tdردYيف ،2سYYلول<td>1 ></tdردYيف ،2سYYلول<td>2 ></tdردYيف ،2سYYلول<td>3 ></tr 65 Tables <> "table border="1 <>tr <>th>A</th <>th>B</th <>th>C</th <>tr/ <>tr <>td>1,1</td <>td>1,2</td <>td>1,3</td <>tr/ <>tr <>td>2,1</td <>td>2,2</td <>td>2,3</td <>tr/ <>table/ سرستون در جداول ()Headings سرستونها در جداول با کمک تگ < >thتعريف ميشوند سر ستونها مانند سلولهای معمولی جداول تعريف ميشوند و فقط به جای tdاز thاستفاده شده ولی در نمايش محتوای سر ستونها boldيا توپر نمايش داده خواهند شد. ‏B ‏C ‏A 1,1 1,2 1,3 2,1 2,2 2,3 66 Tables >HTML< >HEAD< >TITLE>Example 1</TITLE< >HEAD/< >BODY< >TABLE WIDTH=50% BORDER=1< >TR< >TD>Cell Row1 Col1</TD< >TD>Cell Row1 Col2</TD< >TR/< >TR< >TD>Cell Row2 Col1</TD< >TD>Cell Row2 Col2</TD< >TR/< >TABLE/< >BODY/< >HTML/< 67 تغيير اندازه جدول Start Tag Purpose کاربرد >table< Defines a table تعريف جدول >th< Defines a table header تعريف سرستون در جداول >tr< Defines a table row تعريف رديف ها در جداول >td< Defines a table cell تعريف سلول يا خانه های يک جدول >caption< Defines a table caption تعريف عنوان جدول Tables <HTML> <HEAD> <TITLE>Example 4</TITLE> </HEAD>a <BODY> <TABLE WIDTH=400 HEIGHT=100 BORDER=3> <TR> <TD WIDTH=140>TOP LEFT</TD> <TD WIDTH=260>;</TD> </TR> <TR> <TD>&nbsp;</TD> <TD>BOTTOM RIGHT</TD> </TR> </TABLE> </BODY> </HTML> 68 Empty Cell Tables Cell padding : You can specify two other important size  parameters for a table. Cell padding is the space between cell borders and table .contents <HTML> <HEAD> <TITLE>Example 5</TITLE> </HEAD> <BODY> Cell padding effect : <BR><BR> <TABLE BORDER=3 CELLPADDING=20> <TR> <TD>TOP LEFT</TD> <TD>TOP RIGHT</TD> </TR> <TR> <TD>BOTTOM LEFT</TD> <TD>BOTTOM RIGHT</TD> </TR> </TABLE> 69 </BODY> </HTML> Tables Column Span : Sometimes you need to join two cells in a row to each other. For example in a 2*3 table we may want to join two cells with each other . In this way we will have two cells in first row and three cells in second .row 70 <HTML> <HEAD> <TITLE>Example 6</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR> <TD COLSPAN=2>A</TD> <TD>B</TD> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> </TABLE> </BODY> </HTML> •parameter COLSPAN=2 it means that it is equal to two cells. Therefore you must have three cells in next row (three <TR> tags) or you may use COLSPAN to create cells that when you add them, it will be equal to previous row or 3 in this example. Tables RowSpan : This time we want to join two cells in a column (from different rows). This is the same as previous section with the difference that we will join cells from different rows rather than cells in different columns. This time .we must use ROWSPAN instead of COLSPAN 71 <HEAD> •Again you must be careful that when you <TITLE>Example 7</TITLE> have for example a cell in first column </HEAD> that you have joined two cells to create it <BODY> using the option ROWSPAN=2 then your <TABLE BORDER="1" WIDTH="200"> table must have two rows and you must <TR> take this in mind in next parts of your table. <TD ROWSPAN="2">A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> </TR> </TABLE> </BODY> </HTML> Tables : Color 72 >HTML< >HEAD< >TITLE>Example 8</TITLE< >HEAD/< >BODY< >TABLE width="300" BORDER=1< >TR BGCOLOR=black< >TD width="50%“ BGCOLOR=yellow>A</TD< >TD width="50%">B</TD< >TR/< >TR< >TD width="50%" BGCOLOR=blue>C</TD< >TD width="50%" BGCOLOR=red>D</TD< >TR/< >TABLE/< >BODY/< </HTML> Tables Nested Tables 73 <HTML> <TR> <HEAD> <TD width="50%">2-</TD> <TITLE>Example 9</TITLE> <TD width="50%">C </HEAD> Prog.</TD> <BODY> </TR> <TABLE border="0" width="750"> <TR> <TR> <TD width="50%">3-</TD> <TD width="25%">&nbsp;</TD> <TD <TD width="25%">&nbsp;</TD> width="50%">JScript</TD> <TD width="25%"> </TR> <TABLE border="2" width="100%"> </TABLE> <TR> </TD> <TD width="50%">1-</TD> <TD <TD width="50%">HTML</TD> width="25%">&nbsp;</TD> </TR> </TR> </TABLE> </BODY> </HTML> Flash animation, Movie, ‏Music : >IMG<  براي نمايش Mpeg,Avi ”IMG dynsrc=“mymovie.mpeg: Width=“400” height=“300 : >EMBED<  براي flash, music, movieقابل استفاده است. ‏Attribute ‏Comment ‏Src آدرس فايل مديا ‏Width تنظيم عرض نمايش مديا ‏Height تنظيم طول نمايش مديا ‏Loop تكرار اتوماتيك مديا ‏Controller تعيين وضعيت كنترلهاي پخش كننده ‏PluginSpace در صورت شناخته نشدن فرمت مديا آدرس Pluginجهت نصب توسط مرورگر 74 Flash animation, Movie, Music >EMBED src=“movie.mwv” width=“300”> </EMBED< Avi, Mwa, Asf, Mov,Mpeg : فرمت هاي تصويري Mp3, Au, WMA, Mid : فرمت هاي صوتي >EMBED src=“file1.fla” width=“300”> </EMBED< >EMBED src=“sound1.mid” loop=“-1”> </EMBED< كه اين. فايل در هنگام دانلود هم قابل پخش است:Streaming Audio And Videoُ .تكنولوزي عالوه بر توسط سرويس دهنده بايستي فراهم شده باشد 75 Forms از طريق استفاده از عنصر < >formو چند تگ مرتبط قادر به دريافت اطالعات از بازديدکنندگان صفحاتتان و يا تبادل اطالعات بين صفحات مختلف خواهيد شد. تمامی تگهای مربوط به فرمها بايد درون تگهای < >formو <>/form قرار ميگيرند. با کمک اين گروه از تگ ها قادر به نمايش باکسهای ورود اطالعات متن ( ، )text fieldsچک باکسها ( ، )check-boxesراديو باتونها ( )radio-buttonsو ...شده و همچنين امکان گذاشتن دکمه های ارسال ( )submit buttonو يا حذف ( )resetرا خواهيد داشت. توجه داشته باشيد که برای پردازش اطالعات دريافتی از کاربر بايد با يکی از زبانهای cgiاز قبيل ASP,ASP.NET، perl، PHP، CFM ، JSPيا Javaآشنائی داشته باشيد. 76 Forms تگ : Inputبه عنوان پر مصرف ترين تگ مربوط به ورود اطالعات بايد از تگ < >inputنام برد .در اين تگ شناسه ای به نام typeبه تعيين نوع اطالعات ورودی اختصاص دارد .مقادير ممکن برای اين شناسه به قرار زيرند: ‏text , checkbox , radio , password , hidden , submit , reset , button , file , ‏image وروديهای متن ()Text Fields اگر ميخواهيد که بازديدکننده اطالعاتی از قبيل متن ،اعداد و ...را وارد کند از شناسه ای با مقدار " "textاستفاده ميشود. ><form ‏First name: >"<input type="text" name="firstname ><br ‏Last name: >"<input type="text" name="lastname ></form > "<form dir="rtl :نـــــــــــــــام "<input type="text >"name="firstname ><br :نام خانوادگی "<input type="text >"name="lastname ‏First name: ‏Last name: نـــــــــــــــام: :نام خانوادگی 77 Forms Radio Buttons وروديهای اگر ميخواهيد که بازديدکننده گزينه ای را از بين چند گزينه محدود : استفاده کنيدtype " برای شناسهradio" از مقدار،انتخاب کند <form> <input type="radio" name=“r1" value="male"> Male <br> <input type="radio" name=“r1" value="female"> Female </form> <form dir="rtl"> <input type="radio" name=“r2" value="male"> مرد <br> <input type="radio" name=“r2" value="female"> زن </form> 78 اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از: Checkboxes وروديهای استفادهtype " برای شناسهcheckbox" از مقدار،بين چند گزينه محدود انتخاب کند کنيد Forms Form's Action  Attribute & ليکDDثر کD در اSubmit Button Username: Password: Se nd Cle a r ايلیDDه فDDرم بDDنفDالعاتدروDطD ا، "Send“ مهDکDيندDیاDروDDبر بDارDک نDايد دروDDالعاتبDطDلDساD قصد ار اDعيينمDDیتDراDD ب.دDهند شDواDلخDساDيگر ارDد قدارD م.نيدDD کDهDتفادDسD اaction امDه نDDیبDه اDناسDD از شformگDDت پسDDتو سDيافDه درDDه بDDتکDسDايلیاDD فurl سياD آدرaction هDناسDDش تDخDرداDDهد پDواDتیخDيافDالعاتدرDطDشاDردازDDپ form name="input" action="form_action.aspx“ method="get"< >"autocomplete="on :Username >input type="text" name="user" tabindex=1< :br>Password< > input type=password maxlength=7 tabindex=2< >input type="submit" value="Send" checked tabindex=3< > input type="reset" value="clear" tabindex=4< >form/< 79 Forms Sample <FORM METHOD=“get" ACTION=“http://www.apple.com/someplace.aspx"> Computer Experience:<br> <SELECT NAME="choice" > <OPTION VALUE="Less 1">Less than 1 year. Computer Experience <OPTION VALUE="1-5.">1-5 years. Less t han 1 year. <OPTION VALUE="More than 5">More than 5 years. Yo ur Te xt </SELECT> <br> <textarea name="text1">Your Text</textarea> <BR> <INPUT TYPE="reset"> Re se t <INPUT TYPE="submit" NAME="submit" VALUE="Submit"> </FORM> 80 Submit Frame ‏با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد .هر صفحه يا دريچه ،فريم ()frame ناميده شده و فريمها کامال مستقل از هم ميباشند. ‏محتوای هر فريم هم ميتواند هر صفحه يا وب سايتی باشد .هر چند که فريمها طراحی سايتهای کوچک و متوسط را بسيار آسان ميکنند ولی استفاده از آنها در کارهای حرفه ای توصيه نميشود(.به جز در موارد خاص) ‏معايب استفاده از فريمها: ‏موتورهای جستجو با صفحات طراحی شده با فريمها مشکل دارند. ‏چاپ و printصفحاتی که از فريمها استفاده ميکنند مشکل است. 81 Frame تگ < >framesetبه تعريف فريمها و تقسيم بندی پنجره مرورگر ميپردازد. هر تگ < >framesetمجموعه ای از رديفها يا ستونها را تعريف ميکند. داخل هر فريم ميتواند framesetديگری قرار دهيد. با کمک شناسه های rowsو colsابعاد و نسبت هر فريم تعيين ميگردد. تگ < >framesetدرون تگهای < >htmlو < >/htmlقرار ميگيرد. (نيازی به قيد تگ bodyهنگام معرفی يک framesetنيست). مقدار شناسه شناسه کارکرد تعيين تعداد و اندازه ستونها در فريم ست عرض پنجره بر اساس پيکسل ،درصد يا عالمت * ‏cols تعيين تعداد و اندازه رديفها در فريم ست عرض پنجره بر اساس پيکسل ،درصد يا عالمت * ‏rows 82 Frame 83 Start Tag Purpose کاربرد >frameset< Defines a set of frames تعريف مج{موعه ای از فريم ها >frame< Defines a sub window (a frame) تعريف يک فريم >noframes< Defines a noframe section for browsers that do not handle frames تعريف جايگزين برای مرورگرهائي .که از فريم ها پشتيبانی نميکنند >iframe< Defines an inline sub window (frame) )inline( تعريف فريم های درجا Frame * اگر فريمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغيير اندازه ( )resizeخواهند بود و برای جلوگيری از تغيير اندازه فريمها توسط کاربر بايد از شناسه ای به نام noresizeدر داخل تگ < >frameاستفاده شود. * اگر ميخواهيد که فريمها scrollنشوند (باال و پايين بردن صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrollingرا برابر " "noقرار دهيد( .مقادير ممکن " "yes" ، "noو ""auto ميباشند). * اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frameمقدار شناسه frameborderرا برابر " "0قرار دهيد. مثال 1 ><html >"<frameset cols="25%,50%,25% >"<frame src="frame_3.html >"<frame src="frame_2.html >"<frame src="frame_1.html ></frameset ></html مثال 2 ><html >"<frameset cols="*,200 >"<frame src="frame_2.html >"<frame src="frame_1.html ></frameset ></html 84 CSS فصل سوم CSS یا همان Cascading Style Sheetروشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن ،تصویر ،زمینه صفحه ،کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای .HTML از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTMLکه باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. ‏برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکالت جاوا اسکرپت مث ً ال غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم. 86 CSS css هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه Yها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. ‏مث ً ال فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم ،حاال اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم. 87 CSS : Cascading Style Sheets )CSS(صفحه هاي استيل گذاشته شده آبشاري براي تعيين اينكه هر يك از اشيا HTMLچگوته ديده شوند .يعني با تغيير محتويات صفحه سرو كار داريم. ‍باعث شده محتويات صفحه Yاز روش ارائه محتويات صفحه جدا شود. ‏جديد ترين نسخه آن ‍CSS 2است كه توسط مرور گر ها پشتيباني مي شود. 88 Style Sheets در نسخه جدید اچتمل امکان جداسازی کامل فرمت دهی از ساختار صفحات اچتمل فراهم شده است .در این نسخه توصیه میشود که تمامی اطالعات مربوط به نمایش و ترازبندی به فایلهائی مجزا از صفحه اچتمل منتقل شوند .بخشی از صقحات اچتمل که مربوط به نمایش ،ترازبندی و فرمت دهی است ،استایل شیت یا " "Style Sheetنامید شده و معموال به صورت فایلی مجزا درون بخش < >headصفحات اچتمل معرفی میگردند چگونگی استفاده از استایل شیتها: مرورگرها توسط استایل شیتها به فرمت دهی و نمایش اطالعات درون صفحه اچتمل میپردازند .تعریف و استفاده از استایل ها در صفحات اچتمل به سه روش مختلف ممکن میباشد: ( )1استایل شیتهای خارجی external style sheet ) (2استایل شیتهای داخلی Internal Style Shee ) (3استایل شیتهای درجا Inline Styles 89 Inline Styles ) این روش در مواردی است که باید برای یک المان (یا گروهی: کاربرد کهstyle در این حالت باید از شناسه ای به نام.خاص استایلی اعمال شود .تقریبا در تمامی تگها قابل اعمال است استفاده شود ;Tag … Style=“property1:value1; property2:value2 < }Property n:value n … : مثال >p style="color: red; margin-left: 20px">This is a paragraph</p< >p align=“Left"><font color="red">This is a paragraph</font></p< 90 Internal Style Sheet در حالتهائی که صفحه اچتمل نیازمند تعریف استایلی منحصر به فرد و مجزا بوده و استایل: کاربرد .طراحی شده فقط بدرد آن صفحه خواهد خورد > قرار گرفته/style< > وstyle< در این حالت باید کدهای حاوی تعریف استایل درون تگ های . صفحه اچتمل گذاشته میشودhead و معموال نتیجه درون بخش : مثال 91 >Html< <Html> >head< <head> >style< <style type="text/css"> { body Selector1 { background-color: red Property:Value } } {p Selector2 { margin-left: 20px Property1:Value1; Property2:Value2;} >style/< Property3:Value3 >head/< } >Html/< </style> </head> .... </Html> Selector p{ margin-left: 20px } p, A{ Color:Navy; BackGround_Color:red } 92 <Html> <head> : SelectorنYنواYع <style> .ClassName1 { color: red } </style> </head> <Body> <p> TEST1 </p> <p Class=“ClassName1”> Colored Test </p> <A … Class=“ClassName1”> Colored Link </A> </Body> : TAG نام .1 هYYY بClass .2 >”… A … Class=“Style1 Style2< .… </A> 93 . تگ از چند كالس تاثير مي پذيرد <Html> <head> <style> P.StyleC { color: red } </style> </head> <Body> <p> TEST1 </p> <p Class=“StyleC”> Colored Test </p> <A … Class=“StyleC“> Link </A> </Body> </Html> Class تركيب تگ و .3 Selector به عنوانId نام <Html> <head> <style> #StyleR { color: red } </style> </head> <Body> <p> TEST1 </p> <p id=“StyleR”> Colored Test </p> <A … id=“StyleR“ > Colored Link </A> </Body> </Html> .4 .Id تركيب تگ و.5 : Selector براي چندStyle يك #StyleR, P.Class1, A { color: Navy } 94 external style sheet در این روش تمامی استیلها و تعاریف نمایشی درون فایلی جداگانه قرار گرفته . كاربرد :استایلی به بیش از یک صفحه اچتمل اعمال شود. مزیت :این روش سهولت در تغییر ظاهر صفحات یک وب سایت میباشد و برای یک تغییر کلی در سایت کافی است که فایل استایل شیت کل سایت که معموال یک فایل واحد است تغییر داده شود. استایل شیتهای خارجی توسط تگ < >linkکه درون بخش head صفحات اچتمل قرار میگیرد ،معرفی میشوند. <>head <"link rel="stylesheet" type="text/css >"href="mystyle.css <>head/ 95 CSS مثالهائی از نح{وه استفاده از رنگها 96 16 استفاده از مقدار د{ر مبنای <p style="color:#FF00FF">Hello!</p> 10 استفاده از مقدار د{ر مبنای <p style="color:rgb(255,0,255)">Hello! </p> استفاد{ه از نام رنگ <p style="color:Fuchsia">Hello!</p> تعیین رنگ نوشته المانbody درStyle sheet ها body{ color: #444400; } تعیین رنگ زمینه صفحه درStyle sheet ها body{ background-color:#FFFFFF; } تعیین رنگ خطوط افقی د{رStyle sheet ها HR { color : #EEEECC;} تعیین رنگ پیوندها درStyle sheet ها a:link {color:#c00B09;} تعیین رنگ متون پاراگرافها درStyle sheet ها p {color:Yellow;} Java script جاوااسکريپت چيست؟ ‏براي يادگيري جاوااسکريپت ،نياز به دانستن زبان HTMLو درک کاملي از طراحي و ساخت صفحات وب است ،چون جاوااسکريپت يک زبان مجزا از اچ تي ام ال نيست و بايد همراه با کدهاي HTMLدر يک صفحه بکار رود تا کارآيي داشته باشد. ‏اچ تي ام ال به تنهايي جوابگوي نياز بينندگان وب سايتها نمي باشد چون آنها عالقه خاصي به جذابيتها و ارتباط متقابل ميان خود و صفحات وب دارند که اچ تي ام ال نمي تواند جذابيت قابل توجهي به يک صفحه بدهد و يا با يک کاربر ارتباط برقرار کند. پس براي برطرف کردن اين مشکالت ،صفحات وب نيازمند يک زبان قوي تر مي باشد که به همين منظور زبان جاوااسکريپت خلق شد. جاوااسکريپت چيست؟ ‏جاوااسکريپت توسط شرکت Netscapeاختراع شد و به عنوان اولين زبان اسکريپت نويسي در وب توسعه يافت ‏در حال حاضر پرکاربردترين و محبوب ترين زبان اسکريپت نويسي در دنيا مي باشد که يکي از داليل آن ،پشتيباني دو مرورگر معروف وب، Internet Explorerو Netscape Navigatorاز اين زبان مي باشد. نا گفته نماند که شرکت مايکروسافت هم براي اينکه از نت اسکيپ در اين زمينه عقب نماند ،نسخه مربوط به خود را بنام Jscriptتوليد کرد. تفاوت جاوااسکريپت با جاوا ‏خيلي ها فکر مي کنند که اين دو زبان(جاوااسکریپت و جاوا) با هم يکي بوده يا حداقل اينکه جاوااسکريپت ساده شده زبان جاوا براي کاربرد در وب مي باشد که اص ً ال اين چنين نيست. ‏جاوااسکريپت متعلق به شرکت نت اسکيپ مي باشد اما زبان جاوا متعلق به شرکت Sun Microsystemsاست. ‏جاوااسکريپت در اصل يک زبان اسکريپت نويسي است نه يک زبان برنامه نويسي کامپيوتر ،شايد بتوان اسکريپتها را يک نوع زبان برنامه نويسي خيلي سبک و ساده ناميد اما جاوا يک زبان برنامه نويسي کام ً ال پيچيده مانند زبان Cاست. تفاوت جاوااسکريپت با جاوا ‏تفاوت ديگر آنها اينست Yکه جاوااسکريپت توسط يک برنامه مفسر يعني interpreterدر مرورگر تعريف و تفسير شده تا قابل اجرا باشد و حتماً هم اين کار در مرورگر انجام مي شود اما برنامه هاي جاوا بايد توسط يک کامپايلر ، Compilerکامپايل شده که کامپايل شدن يعني جمع آوري اطالعات مورد نظر و ترجمه آن اطالعات به زبان قابل فهم براي کامپيوتر و تبديل آن به يک برنامه کاربردي واحد و مستقل براي کاربر را گويند. به همين دليل برنامه هاي جاوا را که اپلت applet Yمي نامند ،مستقل اجرا مي شوند .البته اپلتهاي جاوا را مي توان در صفحات وب هم گنجاند. ‏در يک جمله مي توان گفت که جاوااسکريپت فقط در صفحات وب تأثيرگذار است Yاما زبان جاوا براي خلق برنامه هاي پيچيده در کامپيوتر ساخته شده است. قابليتهاي جاوااسکريپت ‏جاوااسکريپت يک ابزار براي طراحان وب و نويسندگان کدهاي HTML مي باشد. ‏جاوااسکريپت داراي ترکيباتي ساده نسبت به زبانهاي برنامه نويسي است که براحتي مي توان آنها را داخل کدهاي اچ تي ام ال يک صفحه قرار داد و از آنها استفاده کرد. ‏يکي از قابليتهاي ويژه جاوااسکريپت رايگان بودن آن است که اگر شما زبان HTMLرا بدانيد ،مي توانيد با کمي دانستن جاوااسکريپت کدهاي آماده که Yبيش از 2000نوع از آنها در وب وجود دارد را در صفحات خود بکار گيريد. قابليتهاي جاوااسکريپت ‏با استفاده از اين زبان مي توانيد متنهاي پويا و متحرک در صفحات و در نقاط مختلف مرورگرها مانند نوار وضعيت آنها خلق کنيد. يکي ديگر از قابليتهاي اين زبان عکس العمل نشان دادن به وقايع و اتفاقات مي باشد بطور مثال واکنش نسبت به کليک يکي از دکمه هاي موس يا فشردن يک کليد بر روي کيبورد و يا انجام عملي هنگام بسته شدن صفحه مرورگر. ‏جاوااسکريپت حتي مي تواند کدهاي اچ تي ام ال را بخواند و يا توليد کند که توسط اين خاصيت مي توانيد در هر زمان خاص يک متني را توليد يا تغيير دهيد و يا در زماني مشخص عکسي را جايگزين عکسي ديگر کنيد. قابليتهاي جاوااسکريپت ‏يکي از بهترين ويژگيهاي جاوااسکريپت ،اعتبار بخشيدن به اطالعات مي باشد مث ً ال شما يک فرمي براي ارتباط با کاربر خود ساخته ايد و مي خواهيد قبل از اينکه آن اطالعات به سرور فرستاده شود ،بازبيني شده تا اگر مشکلي وجود داشته باشد به کاربر اطالع داده شود تا در صدد رفع آن برآيد .چون جاوااسکريپت اصطالحاً Client sideاست ،يعني در سيستم کاربر اجرا شده و مستقل از وب سرور است مي تواند ترافيک روي سرور را کم کرده که اين موضوع يک امتياز مثبت براي ميزبانان وب محسوب مي شود. تگ اسکريپت جاوااسکريپت Yهم مانند زبان HTMLاز يکسري دستور و گرامر خاص Yخود پيروي مي Yکند. البته اين زبان به سادگي اچ تي ام ال نيست و بسيار Yهم حساس است ‏مث ً ال در اچ تي ام ال فاصله بين تگها اهميتي ندارد و مرورگر آنرا ناYديده مي گيرد اما در جاوااسکريپت فاصله بايد متناسب باشد که اگر رعايت نشود با پيغام خطا روبرو خواهيد شد. کدهاي جاوااسکريپت Yرا بايد در Yميان تگهاي HTMLقرار گیرد .به همين دليل يک تگ Yبراي آن در نظر گرفته شده است: >script> ... </script<  که کليه دستورات جاوااسکريپت Yبايد مابين آنها قرار گيرد .اين تگهاي اچ Yتي Yام ال به مرورگر مي فهمانند که در کجا اين زبان آغاز شده تا مفسر جاوااسکريپت مرورگر فعال شود و در کجا پايان مي Yپذيرد که برنامه مفسر هم کار Yخود رYا خاتYمه دهد. language ‏اما تگ scriptمانند بقيه تگها داراي خصوصياتي مي باشد ،يکي از آنها languageاست که مقدار آنرا بايد برابر با javascriptقرار دهيد، ‏script language="javascript">< ></script ‏براي مقدار javascriptمي توانيد نسخه آن را هم بنويسيد .اين زبان هم مانند اچ تي ام ال داراي نسخه هاي مختلفي است که هر کدام آنها با قابليتهاي جديدي در وب توسعه يافتند .نسخه Yهاي اين زبان عبارتند از 1.4 ، 1.3 ، 1.2 ، 1.1 ، 1.0و آخرين نسخه حال حاضر هم 1.5مي باشد type ‏تگ اسکريپت خصوصيت typeهم دارد که براي اين زبان بايد آنرا برابر با text/javascriptقرار دهيد. نکته قابل توجه اينست که اگر اين خصوصيت را به اين تگ اضافه کنيد، مرورگر اينترنت اکسپلورر نسخه 1.5 Yاين زبان را ناديده مي گيرد و کد را اجرا مي کن ‏د .شما مي توانيد با اجراي کد زير هم اولين اسکريپت خود را تجربه کنيد و هم خصوصيت typeرا در IEامتحان کنيد. ‏خب مانند زبان اچ تي ام ال مي توانيد از يک ويرايشگر متن مانند برنامه Notepadاستفاده کرده و کد زير را در آن وارد کنيد: type <html> <head> <title> My JavaScript </title> </head> <body> <script language="javascript1.5" type="text/javascript"> document.write(" Hello my friends ") </script> </body> </html> document.write(" Hello my )" friends document يعنيهمانسYYند و فYYايل htmlکYYه در آYناYينعYملياتبYYايد اYنYجام شYYود ‏YيYنYجام کYYارYيکYYه بYYYعYد ‏YتYمادYه YمYيشYYود بYYرا ا و مYرورYگر بYYYه مYحضبYYرخورد بYYا اYينعYبار آ از يکنYYقطه نYوشYته مYيشYYود. طبق قرارداد بايد هر چيزي که در بين پرانتز هست را بنويسد و چون محتواي داخل پرانتز مابين دو عالمت نقل قول يعني " " قرار گرفته پس بايد بصورت يک stringدر بيايند. string يعنييکرYشYته کYYاراYکYتر کYYه مYيتYYواYند هم حYرفبYYاشد هم عYدد و هم عYالمYتو ‏YينYسYتکYYه هرچYيزيمYابYيندو عYالمYت" " قYYرار گYYرفYتعYين ًا بYYايد در خYاصYيت stringدر ا ا صYYفحه نYوشYته شYYود. در جاوااسکريپت به documentيک objectيعني شئ مي گويند و هنگامي که يک نقطه بعد از آن گذاشته مي شود آن شئ منتظر methodخود مي شود که در اينجا همان writeاست .به عبارت ساده اين خط مي گويد که آن شئ را بردار و در آن توسط متد نوشتن چيزي بنويس. src تگ scriptيک Yخصوصيت ديگر هم دارYد که srcاست و براي آدرس دهي است. کدهاي جاوااسکريپت Yرا هم مانند استايل شيت مي توانيد در يک Yفايل جداگانه نوشته و با پسوند jsذخيره کنيد سپس با خصوصيت srcآدرس آن فايل را مشخص کنيد. توجه داشته باشيد که در آن فايل نبايد ديگر تگ scriptرا بنويسيد. معموالً در اين حالت تگ اسکريپت در قسمت headگنجانده مي شود تا با شروع صفحه فايل جاوااسکريپت فراخواني شود. > <html ><head "<script language="javascript" src="jsfiles/name.js >"type="text/javascript ></script ></head چگونگي دريافت پيغام خطا ‏يکي از مواردي که در نوشتن کدهاي جاوااسکريپت ممکن است زياد با آن برخورد کنيد ،دريافت پيغام هاي خطا هنگام اجراي کدها در مرورگر مي باشد ‏خطاهاي جاوااسکريپت Yرا به دو صورت متوجه مي شويد يکي ظاهر شدن مثلثي زرد با يک عالمت تعجب Yدر سمت چپ نوار وضعيت مرورگر مانند شکل زير: در بعضي از مرورگرها اين نوار مشاهده نمي شود که مي توانيد براي مشاهده آن به منوي Viewمرورگر رفته و روي گزينه Status Barکليک کنيد. حالت ديگر ديدن پيغامهاي خطا ،باز شدن يک پنجره در وسط مرورگر است که در اين حالت جزئيات خطاي ايجاد شده را هم مي توانيد مشاهده کنيد .مانند شکل زير: توجه داشته باشيد ،در نسخه هاي جديد مرورگر اينترنت اکسپلورر اين پنجره مشاهده نميشود و ابتدا آنرا بايد فعال کنيد. براي فعال کردن آن به منوي Toolsمرورگر رفته و گزينه Internet Optionsرا انتخاب کنيد ،در پنجره باز شده به قسمت Advancedرفته و گزينه Display a notification about script errorرا تيک بزنيد ،سپس دکمه Okرا زده تا کار شما تأييد شود. بهتر است که قبل از شروع کد نويسي جاوااسکريپت اين عمل را انجام دهيد تا هنگام بروز خطا در صدد رفع آن برآييد که به اين کار اشکال زدايي يا Debuggingمي گويند. اگر هم اين گزينه را فعال نکرديد ،هنگام بروز خطا مي توانيد بر روي آن مثلث زرد رنگ در نوار وضعيت رفته و دوبار کليک کنيد که همان پنجره اعالن خطا باز خواهد شد. انواع خطاها ‏اساساً دو نوع خطا براي جاوااسکريپت وجود دارد ،خطاهاي نحوي يا Syntax errorsو خطاهاي زمان اجرا يا Run time ‏errors در خطاهاي نحوي يک مشکلي در ترکيبات کدها بوجود آمده مث ً ال يک غلط امالئي در يک دستور يا جا انداختن يک حروف يا عالمت و در خطاهاي زمان اجرا احتماالً يک دستور بطور اشتباه جاي يک دستور ديگر نوشته شده است که در هنگام اجراي کد ،مفسر مرورگر نمي تواند اين دستور را تجزيه تحليل کند وخطا را اعالم مي کند. کدهاي جاوااسکريپت به سه دسته تقسيم ميشوند ،يک سري از آنها در قسمت سر يعني headجاي مي گيرند و يک سري در قسمت بدنه کدهاي اچ تي ام ال و دسته سوم هم در يک فايل جداگانه و خارج از کدهاي htmlبا پسوند jsقرار مي گيرند در ادامه به توضيح هر دسته خواهيم پرداخت. نوشتن اسکريپت در قسمت head ‏کليه کدهاي جاوااسکريپت به محض باز شدن يک صفحه وب در مرورگر اجرا مي شوند اما گاهي اوقات ما نياز داريم تا يک اسکريپت زودتر از کدهاي ديگر اجرا شده و يا آماده باشد تا در صورت لزوم فراخواني شود. ‏اينگونه کدها را بايد در قسمت سر و ما بين تگ headبنويسيم. بطور مثال شما نياز به اين داريد که به محض ورود کاربر به صفحه در همان ابتدا پيغامي ظاهر شود و تا کاربر آنرا تأييد نکرده است صفحه تکميل نشود. اسکريپتهاي قسمت سر هميشه آماده اجرا و يا آماده پاسخ به اتفاقي در صفحه وب هستند ،که در اين مورد شما مطمئن هستيد اسکريپت مورد نظر قبل از هر چيزي در صفحه ،اجرا خواهد شد. head نوشتن اسکريپت در قسمت :براي نوشتن کدهاي جاوااسکريپت بصورت زير عمل مي کنيد <html> <head> <title> ... </title> <script language="javascript" type="text/javascript"> ...... javascript codes ...... </script> </head> نوشتن اسکريپت در قسمت بدنه هنگاميکه نياز داشته باشيد تا کدهاي جاوYااسکريپت در بدنه فايل html Yاجرا شود آنها را در قسمت body Yصفحه وارد مي کنيد، ><html ><head ></head ><body "<script language="javascript >"type="text/javascript ....... javascript codes ...... ></script ></body ></html شما حتي مي توانيد توسط کدهاي جاوااسکريپت قسمتي از يک صفحه را بسازيد يعني با ترکيب جاوااسکريپت و تگهاي اچ تي ام ال در bodyيک عنصر در صفحه وارد کنيد .کدهاي زير را بنويسيد و اجرا کنيد: > <html ><head ></head ><body >"<script language="javascript" type="text/javascript ;)">document.write("<h1 align='center'> Hello my friends! </h1 ></script ></body ></html الزم بذکر است که شما مي توانيد براي نظم دادن و جلوگيري از شلوغي قسمت بدنه يک اسکريپت بصورت functionدر قسمت headتعريف کنيد و در قسمت بدنه آنرا فراخواني کنيد فايل خارجي جاوااسکريپت ‏مي توانيد براي حفظ نظم تگهاي اچ تي ام ال در يک صفحه وب و يا براي جلوگيري از تکرار يک اسکريپت در صفحات يک وب سايت، کدهاي جاوااسکريپت را در يک فايل جداگانه نوشته و با پسوند jsآنها را ذخيره کنيد سپس در هر قسمت و هر صفحه اي که الزم بود ،وارد کنيد. ‏خط زير را در برنامه Notepadنوشته و آنرا به اسم test.jsذخيره کنيد: ‏document.write(" JavaScript external file ")  حاال يک فايل اچ Yتي Yام Yال بسازيد و تگهاي زير را در آن وارد کنيد سپس با يک اسم دلخواه آنرا در همان پوشه که فايل جاوااسکريپت Yرا ذخيره کرده ايد قرار Yدهيد: > <html ><head ></head ><body >"<script language="javascript" type="text/javascript" src="test.js ></script ></body ></html جمله زير را در مرورگرتان مشاهده خواهيد کردJavaScript external. ‏file دقت Yکنيد که اگر فايل جاوااسکريپت Yرا در پوشه اي جدا از فايل htmlقرار ميY دهيد حتماً در خصYوصYيت src Yآدرس دقيق آنرا بنويسيد. متغير چيست؟ ‏متغيرها يا Variablesمانند يک ظرف و مخزن براي ذخيره سازي اطالعات هستند اين اطالعات مي تواند يک کلمه يا جمله ،عدد و يا حتي يک شئ باشد. ‏متغيرها ،کد نويسي را راحت تر کرده و نظم خاصي به اسکريپت ما مي بخشند. ‏بطور مثال ما يک متن را مي خواهيم در چند نقطه از کد وارد کنيم که بجاي آن مي توانيم از يک کلمه کوتاه که اين متن در آن ذخيره شده استفاده کنيم تا از تکرار جلوگيري کرده و اسکريپت هم شلوغ نشود. به مثال زير توجه کنيد تا وظيفه يک متغير را ببينيد: >" <script language="javascript" type="text/javascript "var strTest = "This is an example for variable. )document.write(txtTest ></script اصطالح varاز کلمه variableمي آيد که نوشتن آن اختياري مي باشد، يعني مي توانيد يک متغير را بدون نوشتن آن هم تعريف کنيد ولي اگر مي خواهيد کد شما خوانا تر باشد بهتر است که از varاستفاده کنيد. قسمت بعدي يعني strTestنامي است که شما براي آن متغير انتخاب مي کنيد و سپس عالمت مساوي است که متغير را برابر با يک مقدار قرار مي دهد و در آخر هم مقدار تعيين شده براي متغير که در اينجا يک رشته متني است يا يک text stringميباشد که به همين دليل بايد آنرا بين دو عالمت " " قرار دهيم تا عيناً محتويات آن در مرورگر نوشته شود. انتخاب نام متغير ‏براي انتخاب نام متغير بايد نکات زير را رعايت کنيد: ‏نام يک متغير مي تواند از مجموع حروف ،اعداد و عالمت underline يا زيرين خط يعني _ تشکيل شود ،که آغاز کننده نام نبايد يک عدد باشد و همچنين هيچگونه فاصله اي هم در آن نبايد باشد. ‏در جاوااسکريپت حروف کوچک با بزرگ متفاوت مي باشند يعني strTestبا strtestکام ً ال تفاوت دارد که اصطالحاً مي گويند جاوااسکريپت case sensitiveاست. انواع متغيرها دو نوع متغير وجود دارد که تفاوت اين دو مدل در محل استفاده از آنها مي باشد: . متغيرهاي کلي و سراسري که به آنها globalگفته مي شود. ‏اين متغيرها در سراسر يک فايل اچ تي ام ال کاربرد دارند يعني يکبار آنرا در ابتداي اسکريپت تعريف و مقدار دهي مي کنيد ولي در هر کجا از کد که مورد نياز باشد از آنها بهره مي گيريد. نوع ديگر آن متغيرهاي محلYي يا localهسYتند که فقط Yدر يک قسYمت از اسYکريپت کارآيي دارند که ممکن است در قسمت ديگري همان متغير با يک مقدار ديگري تعريف شود. ‏معموالً متغير هاي محلي در توابع يا functionها کاربرد دارند يک متغيرمحلی در هر تابع مي تواند مقادير متفاوت داشته باشد بدون اينکه پيغام خطايي توليد کند خصوصيات رشته string.length طول (تعداد) حروف string.toLowerCase () تبديل حروف بزرگ به كوچك string.toUpperCase () تبديل حروف كوچك به بزرگ string.bold () ضخيم (بُلد) كردن حروف string.italics () كج (ايتاليك) كردن حروف string.fontsize (3) تغيير اندازه string.fontcolor ("red") تغيير رنگ string.big () string.substring (2,6) string.substr (2,6) string.charAt (4) string.replace ("a","b") string.indexOf بزرگ كردن حرف بعد از اول6 تا2 انتخاب حروف از حرف 2 حرف بعد از6 تا2 انتخاب حروف از حرف )انتخاب يك حرف (حرف چهارم )a باb تعويض دو حرف (حرف معين ّ بعد از عدد،جستجوي حرف مورد نظر 17 abcdefghijklmnopq ABCDEFGHIJKLMNOP Q abcdefghijklmnop q abcdefghijklmnopq abcdefghijklmnopq abcdefghijklmnopq abcdefghijklmnopq cdef cdefgh e bbcdefghijklmnopq 2 -1 17 abcdefghijklmnopq ABCDEFGHIJKLMNOP Q abcdefghijklmnop q abcdefghijklmnopq abcdefghijklmnopq if...else if...else دستور if ( t <= 10 ) { document.write ( "<b> Good morning </b>" ) } else if ( t > 10 && t < 13 ) { document.write ( "<b> Hello friends </b>" ) } else if ( t >= 13 && t < 18 ) { document.write ( "<b> Good afternoon </b>" ) } else { document.write ( "<b> Good evening </b>" ) } مثال اگر رنگ پس زمينه صفحه ما ،سفيد بود ،بنويسد سفيد: )"if (document.bgColor == "#ffffff { )“ )"سYYفيدalert ;} switch <script language="javascript" type="text/javascript"> var d = new Date () var weekday = d.getDay () switch ( weekday ) {case 0 : document.write ("Sunday“) break case 1: document.write ("Monday“) break case 2: document.write ("Tuesday“) break case 3: document.write ("Wednesday“) break case 4: document.write ("Thursday“) break case 5: document.write ("Friday“) break default: document.write ("Saturday") } </script> مي‌خواهيم برنامه‌اي بسازيم كه در هر روز اYز هفته ،يك پيام دهد. اين برنامه ،بسيار مهم Yو پركاربرد است با آن مي‌توYانيد مثال براي خYود يك تقويم بسازيد كه مناسبتهاي هر روز را به شما نشان دهد؛ يا يك برنامه كه هر روز ،يك حديث ،شعر يا جمالت زيبا را بنويسيد. )(var Now = new Date )(var Week = Now.getDay )switch (Week { ; )"يكشنبه“(case 0 : alert ;break case 1 : alert("نبهYشY;)"دو break; case 2 : alert("نبهYYه‌شYY;)"س break; case 3 : alert("نبهYشYارYهY;)"چ break; case 4 : alert("نجشنبهYYY;)"پ break; case 5 : alert("معهY;)"ج break; case 6 : alert("نبهYY;)"ش break; default : break; } for حلقه <script language="javascript" type="text/javascript"> for ( i = 0; i <= 10; i++ ) { document.write ( " Number " + i + "<br />") } </script> for (var x in object) { document.write ("<li>object." + x + " = " + object [x]); } while حلقه var i = 0 while (i <= 10) { document.write(" Number " + i + "<br />") i++ } var a = 0; while (a < 10) { document.write ("يامYYY"پ, a ,"<br>"); a++; } Do...while حلقه var i=0 do { document.write(" Number " + i + "<br />") i=i+1 } while (i <= 10) آرايه  var weekdays = new Array(7) weekdays[0] weekdays[1] weekdays[2] weekdays[3] weekdays[4] weekdays[5] weekdays[6] = = = = = = = "Shanbeh" "Yekshanbeh" "Doshanbeh" "Seshanbeh" "Chaharshanbeh" "Panjshanbeh" "Jomeh“  var weekdays = new Array ("Shanbeh","Yekshanbeh",...) تابع ‏تابع يا همان فان ِكشين ( ،)Functionمجموعه‌اي از يك يا چند كد است كه در يك جا جمع شده و داراي نام شده‌اند. ><Script )(function funAlert { )"سYYالم”( alert } ></Script صدا كردن تابع یكي از راه‌هاي صدا زدن توابع ،استفاده از رويدادهاست. اگر مي‌خواهيد فالن كد ،به هنگام باز شدن صفحه ،اجرا شود ،از رويداد onLoad استفاده كنيد. اگر مي‌خواهيد با كليك كردن بر روي چيزي ،برنامه‌اي اجرا شود ،از onClick استفاده كنيد. مثال :مي‌خواهم تابع ،funAlertكه در مثال باال درست كرده‌ام ،به هنگام باز شدن صفحه اجرا شود .براي اين كار بايد به تگ بدنه ( = Bodyبادي) رفته و اين كد را بنويسم: > <Body onLoad="funAlert()" ... اگر خواستيد با كليك بر روي عكسي ،پيامي نمايش داده شود ،بايد كد زير را در تگ عكس قرار دهيد .به اين صورت: > <img onClick="funAlert()" ... نقطه چين ،يعني بقيه كدهاي مربوط به عكس. اشیاء ‏يکي از ويژگي هايي که جاوااسکريپت دارد جمع آوري اطالعات از سيستم کاربر و نمايش آنها در صفحات وب است. همانطور که ميدانيد زبان اچ تي ام ال به تنهايي قادر به انجام چنين کاري نيست اما با کمک زبانهاي ديگر تحت وب مانند ، Javascriptمي تواند تا حدودي اين مشکل را برطرف کند. ‏شئ هايي در جاوااسکريپت وجود دارند که توسط متدهاي مختلف، اطالعات مورد نياز را از سيستم گرفته و در اختيار کاربران قرار مي دهند. ‏يکي از اين objectها و شئ ها Date ،مي باشد که به کمک آن مي توانيم تاريخ و زمان سيستم را هنگام اجراي کد دريافت کنيم ،سپس آنرا نمايش دهيم و يا اينکه در يک متغير ذخيره کنيم تا در صورت لزوم از آن بهره گيريم. اشیاء ‏اين objectبصورت زير تعريف مي شود: )(new Date به طرز نوشتن آن دقت کنيد که غير از اين باشد با پيغام خطا روبرو خواهيد شد ‏چون جاوااسکريپت زبان حساسي است پس هر جا که حروف بزرگ است بايد بزرگ و هر جا کوچک است بايد کوچک نوشته شود .در آخر هم پرانتز مي گذاريد که در قسمتهاي بعدي همين صفحه کارآيي آنها را درک خواهيد کرد. ‏اين شئ يک رشته متني شامل روز ،ماه ،سال ،ساعت ،دقيقه ،ثانيه و اختالف زماني با UTCرا برميگرداند UTC .مخفف Coordinated Universal Timeمي باشد که به آن Zulu timeهم مي گويند و مطابق با استاندارد جهاني زمان است. آنرا اجرا،کد زير را در يک سند اچ تي ام ال وارد کنيد و پس از ذخيره :کنيد <script language="javascript" type="text/javascript"> document.write ( new Date() ) </script> متدهاي شئ Date ‏بعد از ساختن شئ جديد ، Dateمي توانيد توسط متدهاي مربوط به آن جزئيات ديگري از اين شئ دريافت کنيد. اين شئ داراي هفت متد اصلي ميباشد که بيشترين کاربرد را دارند .اين متدها عبارتند از: ‏getDate(), getDay(), getMonth(), getYear(), )(getHours(), getMinutes(), getSeconds ‏براي تعريف و استفاده از اين متدها بايد ابتدا شئ را نوشته ،سپس يک نقطه بگذاريم و بعد از نقطه متد مورد نظر را بنويسيم. شیء date براي درک بهتر مطالب گفته شده يک تمرين را با هم انجام مي دهيم .در يک صفحه وب ،مي خواهيم زمان ورود يک کاربر به همان صفحه را اعالم کنيم .بطور مثال: شما دقيقاً درساعت 9:33:9وارد اين صفحه شديد. که اسکريپت آن براي برگرداندن زمان مورد نظر به صورت زير مي باشد: "<script language="javascript >"type="text/javascript )(var vorood = new Date ‏document.write( vorood.getHours() + ":" + ‏vorood.getMinutes() + ":" + ) )(vorood.getSeconds ></script ي ( Objectش ) D ‏شی:همان طور که قبال نیز گفته شد هر چيزي كه در صفحه ما وجود دارد ،يك شي حساب مي‌شود و مي‌توان از آن استفاده كرد و تغييرش داد. ‏اولين شي موجود ،خود صفحه و سند ( )documentاست ،كه قبال با آن آشنا شده‌ايد. شYYي يكمYشخصاتو خYصوصYياتYي ‏Dيات هر ، ( PropertiesخDصوص ): ‏Yست كيفيتن . آY دارد كه بYYYيانYگر ك ّميتو ‏مثال يك سند ،داراي اين خصوصيات است :پس زمينه ،عنوان ( ،)Titleنوار وضعيت ( ،)Statusنوار پيمايش ( ،)Scrollمتن ( ،)Textلينك (.)Link طريقه نوشته :ابتدا نام شي را نوشته‌،و بعد از يك نقطه ،نام خصوصيت مورد نظر را وارد كنيد .گاهي اوقات ،آن خصوصيت هم داراي چند خصوصيت ديگر است كه بايد بعد از يك نقطه ،Yنوشته شود. ‏document.title ‏document.URL ‏document.location ‏document.bgColor ‏document.fgColor ‏document.linkColor ‏document.alinkColor ‏document.vlinkColor عنوان آدرس آدرس رنگ پس زمينه رنگ متن رنگ لينك رنگ لينك فشرده شده رنگ لينك ديده شده ( MethodsمDتُد) ‏کاري که اشياء مي‌توانند انجام دهند ،متد ناميده مي‌شود؛ مانند باز كردن يا بستن پنجره .شالوده و اصل يك زبان برنامه نويسي ،متدهاي آن برنامه است ،كه ما بايد آنها را به خوبي ياد گرفته و در جاي مناسب استفاده نماييم .متدها ،توسط سازندگان زبان برنامه نويسي ،نوشته و تهيه مي‌شود و ممكن است در نسخه‌هاي جديد آن زبان ،تغيير داده شده ،اضافه و تكميل شود. مثال :متد بسته شدن صفحه: )(window.close ( EventروDيداد) ‏رويداد ،عملياتي است كه كاربر ،در يك صفحه انجام مي‌دهد .بعضي از رويدادها مشترك و عمومي هستند و بعضي مخصوص يك شي .بعضي از اين رويدادها را براي شما دسته بندي كرده‌ام كه حتما ذخيره نموده و به مرور آنرا كامل كنيد. ‏طريقه نوشتن :رويدادها را با كلمه onشروع مي‌كنند و به اين صورت مي‌خوانند = onClick :هنگام كليك كردن. رويدادها صفحه كليد عمومي موس پايين آمدن كليد ‏onKeydo ‏wn حركت موس ‏onMouse ‏move باز شدن ‏onLoad فشردن كليد ‏onKeypre ‏ss ورود موس ‏onMouse ‏over بسته شدن ‏onUnload باال آمدن كليك ‏onKeyup خروج موس ‏onMouse ‏out انصراف ‏onAbort كليك ‏onClick فوكوس ،زوم ‏onFocuse دوبار كليك ‏onDblclic ‏k برگشت از فوكوس ‏onBlur كشيدن ‏onDragst ‏art خطا ‏OnError متدهاي زمان new Date () زمان toLocaleString () زمان كامل toLocaleDateString () فقط تاريخ toLocaleTimeString () فقط ساعت toGMTString() زمان بين المللي getYear() سال getMonth() ماه getDay() روز هفته getDate() روز ماه getHours() ساعت getMinutes() دقيقه getSeconds() ثانيه Tue Dec 21 2010 13:42:47 GMT+0330 (Iran Standard ,21 يسمبرY د,لثالثاءYYاTime) ظ. ب01:42:47 2010 2010 ,21 ديسمبر,الثالثاء ظ. ب01:42:47 Tue, 21 Dec 2010 10:12:47 GMT 110 11 2 21 13 42 47 نمونه کد <script> function funFor() { document.writeln("<Table Border=1>"); for(a = 1; a <= 10; a++) { document.writeln("<TR>") for(b = 1; b <= 10; b++) { if ((a+b) % 2) { نمونه کد document.writeln("<TD bgcolor=blue>"+ a * b + " </TD>") } else { document.writeln("<TD>"+ a * b + " </TD>") } } document.writeln("</TR>"); } document.writeln("</Table>"); } funFor(); </script> نمونه کد :2اسكرول صفحه (حركت صفحه از باال به پايين) . يك تابع ( )funDownبراي پايين رYفتن ،و يك تابع ( )funUpبراي باال آمدن .اين توابع ،به صورت مستقل ،اجرا‌ مي‌شوند. در قسمت بدنه ،دو دكمه (يا چيزي شبيه آن) قرار مي‌دهيم .يكي براي فعال كردن تابع اول ،و ديگري براي تابع دوم .به هنگام كليك بر روي دكمه‌ها ،توابع ،اجرا مي‌YشوYند؛ يعYني بايد از رويداد onClickاستفاده كنيم. ><script ‌بYYرد function funDown() // تYYابYعيكه صYYفحه را بYYYه طYرفپYYايينمYي { حYلق ‌هاYيكه اYفزاYيشfor (a = 1; a <= 600; a++) // دارد { نمونه کد :2اسكرول صفحه (حركت صفحه از باال به پايين) مYتد اYسYكروYلصYYفحه window.scroll (1, a); // ‏ } } ‌بYYرد function funUp() // تYYابYعيكه صYYفحه را بYYYه طYرفبYYاYالمYي { حYلقه‌اYيكه كاهشfor (a = 600; a >= 1; a--) // دارد { ;)window.scroll (600, a } } ></script :3نمونه کد function funTime() { var Time = new Date (); var H = Time.getHours(); var M = Time.getMinutes(); var S = Time.getSeconds(); var Clock = H + ":" + M + ":" + S; Font.innerText = اعتY " Yس: " + Clock; setTimeout ("funTime()", 1000);// ،ايمرYYينتYا اYYب ودYY‌ش يYيمYنYواY خYهYبارY دو،يهYانYY در هر يكث،اYع مYابYYت } نمونه کد:3 :innerText با اين دسYتور ،متن يك تگ در قسمت بدنه -مانند محتويات تگ پاراگراف -نمايش داده مي‌شود؛ و مي‌توانيم آنرا تغيير داده و ويرايش كنيمY. :outerHTML - innerHTML - outerTextاين 3متد ،شبيه دستور قبلي است؛ البته با كمي تفاوت. :setTimeoutدستور تايمر و زمان شمار است .بعد از آن ،يك جفت پرانتز ،قرار دارد كه داخلش Y،دو پارامتر نوشته مي‌شYود: .1اسم چيزي است كه قرار است اجرا شود؛ مانند يك تابع. .2زماني كه تايمر در آن فعYال خواهد شد .واحد زمان ،ميلي ثانيه است1000( . = يك ثانيه) :setIntervalدستور تايمر و زمان شمار است .مانند دستور قبل ،عمل مي‌كند. معرفی چند مرجع (سايت) : ايران :JavaScriptفارسي. از سايت‌هاي فارسي زبان كه تخصصا درباره اين زبان ،فعاليت مي‌كند .قسمتي از آن به آموزش، و قسمتي به بيان مثال ،مي‌پردازد. استاد آنالين :فارسي .علوم مختلف رايانه‌اي را به شما آموزش مي‌دهد كه جاوا يكي از آنهاست. ‏Yگليسي . :Learn JavaScript اYن سايت ، w3schoolsمرجع بسيار جامع و جالبي است براي بسياري از علوم رايانه‌اي .يكي از امكانات جالب آن ،ايجاد محيطي براي تمرين آنالين است .يعني در همين سايت ،مي‌توانيد هر درسي را تمرين ،اجراء و نتيجه آنرا ببينيد. ‏Yگليسي . :JS Workshop اYن يك مخزن عالي با مقادير زيادي اسكريپت و مسألهاي فراوان براي يادگيري جاوا اسكريپت. ‏Yگليسي . :Pagere Source اYن هرآنچه را كه براي طراحي وب ،الزم است ،در چند بخش ،به شما آموزش مي‌دهد. معرفي كتاب خود آموز جاوا اسكريپت در 24ساعت ‏Teach yourself Java Script in 24 hours نويسنده :مايكل مانكر مترجم :مهندس علي ناصح ناشر :موسYسه فرهنگي هنري ديباگران تهران نوبت چاپ :اول قيمت 3300 :تومان تلفن 2090001 :الي 5 پايگاه اينترنتيhttp://www.jsworkshop.com : اين سايت ،داراي نكات آموزنده و جالب در علوم مختلف طراحي وب، باالخص جاوا اسكريپت مي‌باشد .مي‌توانيد مثالهاي كتاب را در اين آدرس با توضيح ديده و از اين آدرس دانلود كنيد. معرفي كتاب ‏نام:خود آموز سريع جاوا اسكريپت ‏Java Script For The World Wide Web 2003 نويسندگان :تام نگرينو و دوري اسميت مترجم :مهندس حميد رضا ذوقي انتشارات :ذوقي نوبت چاپ :اول قيمت 3950 :تومان پايگاه اينترنتيhttp://www.javascriptworld.com : در اين پايگاه ،عالوه بر مثالهاي كتاب ،پايگاه‌هاي كمكي براي زبانهاي وب ،نيز معرفي شده است.مي‌توانيد مثالهاي كتاب را در اين آدرس با توضيح ديده و از اين آدرس دانلود كنيد. پایان

51,000 تومان