جاوا اسکریپت.

 HTML، CSSو Javascript کارگاه کامپیوتر گروه 4 Head, Body, Title and Meta Tags HTML نمایش متن • • • • • • • • • • • • • <br> <b> <strong> <i> <em> <u> <super> <sub> <big> <small> <strike> &nbsp; &lt; &gt; <HR> <img> <center> <H1>,<H2>,<H3>,<H4> <P> لیست ها نام گذاری و ارجاع به نقاط دیگر سند تعیین قلم >"FONT FACE=“Arial" size="4" color="#0033FF< ارجاع به اسناد دیگر : نسبت می دهیمhref سند را بهURL • <a href="http://www.ComputersofTomorrow.com"> :پست الکترونیکی <A HREF= "mailto:faghih@ce.sharif.edu?subject= CW-Assignment"> Send your assignment. </A> • درج تصویر <img src="mycomputer.gif" width="70" height="55" alt="computr73.gif “> جدول ها <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> قسمت بندی صفحه <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> فرم ها و اجزای آن ها • قسمتی از صفحات وب که داده های وارد شده را نگه می دارند. • اجزای فرم به کاربر اجازه وارد کردن اطالعات را می دهد. مثل: ‏textarea fields, drop-down menus, radio buttons, ‏checkboxes • این اطالعات می تواند با فشردن دکمه ی submitبه برنامه ای که در سرور اجرا می شود فرستاده شود. >“<FORM NAME="Order" METHOD="GET" ACTION="order.cgi Textfield <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> Radio Button <form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form> Checkboxes <form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" > <br > I have a car: <input type="checkbox" name="vehicle" value="Car" > <br > I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" > </form> The Form's Action Attribute and the Submit Button <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> Button • type=SUBMIT – Causes the data in the form fields to be sent to the CGI script. • type=RESET – Sets all the form fields back to their default value, or blank. • type=BUTTON – Performs no action on its own, but you can assign it one using JavaScript. meta> tags< ،• دادن اطالعاتی مرتبط با مرورگرها یا موتورهای جست و جو مثل توصیف محتوای صفحه This meta element defines a description of your page: <meta name="description" content="Free Web tutorials on Excel"> This meta element defines keywords for your page: <meta name="keywords" content=“Excel, Microsoft, tutorial, XML"> Animating text <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE BGColor=yellow>This is an example of an alternating marquee...</MARQUEE></FONT> <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=SCROLL BGColor=yellow LOOP=3>This is an example of a scrolling marquee...</MARQUEE></FONT> Animating text <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE BGColor=yellow>This is an example of an alternating marquee...</MARQUEE></FONT> <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=SCROLL BGColor=yellow LOOP=3>This is an example of a scrolling marquee...</MARQUEE></FONT> Animating text • جهت <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=SCROLL DIRECTION=RIGHT BGColor=yellow>This is an example of a marquee scrolling to the right...</MARQUEE></FONT> • سایز <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE BEHAVIOR=SCROLL HEIGHT=25 WIDTH=300 BGColor=yellow>This is an example of a scrolling marquee</MARQUEE></FONT> >pre< > وxmp< >pre< • >xmp< • . در آن نادیده گرفته می شوندhtml هایtag <XMP> <A HREF="http://www.idocs.com">CoolDude</A> </XMP> <PRE> &lt;A HREF="http://www.idocs.com“&gt;Cool Dude&lt;/A&gt; </PRE> – CSS • همه ی شما با styleها در Microsoft Wordکار کرده اید...  CSSچیست؟ • • • • اسناد HTMLمی توانند با Style Sheetهایی که نحوه نمایش قسمت های مختلف آن را تعیین می کنند ترکیب شوند. زبان توصیف این صفحات CSSنام دارد. نحوه نمایش توسط styleها تعیین می شود. Styleها در style sheetارائه می شوند. • استفاده از سبک مناسب نمایش برای کاربران مختلف CSS نحو  هاStyle Sheet مکان <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> Head (<STYLE></STYLE>) • فایل مجزا – مزیت؟ <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> • قوانین Style Sheetهای خارجی • باید متن ساده و بدون tagهای HTMLباشند. • فایل با پسوند css.مرسوم است. Javascript  Javascriptچیست؟ • • • • • • شبیه جاوا ،اما ساده تر برای ایجاد صفحات وب فعال خطوطى از کدهاى کامپیوترى قابل اجرا قابل جاسازی در صفحات HTMLبا syntaxساده با قابلیت دسترسی به عناصر صفحه تعامل با eventها – پس از Loadشدن صفحه یا کلیک توسط کاربر چرا ساده تر از Java؟ • • • • کامپایل نمی شود ،تفسیر می شود. نیازی به تعریف متغیرها و تعیین نوع آن ها نیست. اشیا را نمی سازیم ،فقط از آن ها استفاده می کنیم. استفاده آسان از event handlerها چرا Javascript؟ • محتوای پویا • اعتبارسنجی فرم ها • تعاملی کردن صفحات وب HTML درJavascript طرز قراردادن <html> <head> <script type="text/javascript"> .... </script> </head> <body> <script type="text/javascript"> .... </script> </body> ------------------------------------------------------------------------------------------<html> <head> <script src="xxx.js"></script> </head> <body> </body> </html> /* */ یا// :• برای درج توضیحات If…Else <script type="text/javascript"> //If the time is less than 10, //you will get a "Good morning" greeting. //Otherwise you will get a "Good day" greeting. var d = new Date() var time = d.getHours() if (time < 10) { document.write("Good morning!") } else { document.write("Good day!") } </script> For Loop <html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { document.write("The number is " + i) document.write("<br />") } </script> </body> </html> While Loop <html> <body> <script type="text/javascript"> var i=0 while (i<=10) { document.write("The number is " + i) document.write("<br />") i=i+1 } </script> </body> </html> Popup Boxes • alert("sometext") • confirm("sometext") • prompt("sometext","defaultvalue") var d = new Date() var time = d.getHours() if (time < 10) { document.write("Good morning!") } else { document.write("Good day!") prompt("current time",d) } Function • تعریف تابع function prod(a,b) { x=a*b return x } • فراخوانی تابع product=prod(2,3) Function Example <html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!") } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" > </form> </body> </html> رویدادها و مدیریت آن ها • یکی از نقاط قوت Javascript event handler <a href="http://ce.sharif.edu" onmouseover="alert('HomePage Of CE department')"> CE! </a> <img src=“a.jpg" width="100" height="30" onmouseover="alert('HomePage Of CE department')"> Timing Events <html> <head> <script type="text/javascript"> function timedMsg() { setTimeout("alert('5 seconds!')",5000) } </script> </head> <body> <form> <input type="button" value="Display timed alertbox!" onClick="timedMsg()"> </form> </body> </html> عبارات و عملگرها • • • • • • • انتساب%= ،/= ،*= ،-= ، += ،= : محاسباتی% ،/ ،* ،- ، + : رشته ای+ : منطقی! ،|| ،&& : بیتی<<< ،<< ،>> ،^ ،| ،& : مقایسه ای<= ،>= ،< ،> ،== : -- ،++ Objects • Window – نشان دهنده پنجره مرورگر • Navigator – حاوی اطالعاتی راجع به مرورگر مشتری • History – حاوی اطالعاتی در مورد URLهای بازدید شده در صفحه window شیء شیء window • دسترسی به فریم های یک پنجره با استفاده از آرایه ی frames امکان پذیر است. اجزای فرم ها <html> <form name="form1"> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female <br> </form> <script type="text/javascript"> document.form1.sex[0].checked = true; </script> <html> XML XML • EXtensible Markup Language • جایگزینی برای HTMLنمی باشد. • XMLو HTMLبرای اهداف متفاوتی طراحی شده اند: – XMLبرای توصیف داده طراحی شده است. – HTMLبرای نمایش داده طراحی شده است. • باید نرم افزاری برای کار با آن نوشته شود. – برای نمایش پیغام ><note ><to>Tove</to ><from>Jani</from ><heading>Reminder</heading ><body>Don't forget me this weekend!</body ></note