Download
1 / 16
160 likes | 223 Views
HTML scripts. تگ <script>. این تگ برای نوشتن کدهایی که در سمت مشتری ( client ) اجرا میشوند ، مانند Javascript ، Vbscript و ...، استفاده می شود. این تگ حاوی اجزای اسکریپتی است و یا شامل پیوندی به یک فایل اسکریپتی خارجی از طریق مشخصه src است.
E N D
تگ <script> • این تگ برای نوشتن کدهایی که در سمت مشتری (client) اجرا میشوند ،مانند Javascript، Vbscript و ...، استفاده می شود. • این تگ حاوی اجزای اسکریپتی است و یا شامل پیوندی به یک فایل اسکریپتی خارجی از طریق مشخصه src است. • معمولترین استفاده های javascriptدستکاری تصاویر، تصدیق فرمها و تغییر پویای متن می باشد.
مثال • در این مثال متن “Hello World!” در صفحه html نوشته خواهد شد. <script type="text/javascript">document.write("Hello World!")</script>
<noscript> • از این تگ برای نمایش یک جایگزین محتویات تگ <script> در مرورگرهایی که از اسکریپتها پشتیبانی نمی کنند و یا خاصیت نمایش اسکریپتها را خاموش کرده اند استفاده می شود. <script type="text/javascript"> document.write("Hello World!") </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> <p>A browser without support for JavaScript will show the text in the noscript element.</p>
javascript • جاوااسکریپت برای افزودن تعامل به صفحات وب ساخته شده است. • یک زبان بسیار سبک است. • معمولا در میان دستورات htmlنوشته می شود. • زبان Javascript کاملا با زبان Java متفاوت است. زبان Java بسیار پیچیده تر و قویتر می باشد.
Javascript چه کارهایی می تواند انجام دهد؟ • جاواسکریپت می تواند اعمال خاصی را بعد از رویدادهای خاصی انجام دهد. به عنوان مثال هنگامی که کاربر برروی عنصر html خاصی کلیک می کند. • می تواند محتویات html را بعد از بارگزاری صفحه به صورت پویا تغییر دهد. • می تواند درست یا غلط بودن عبارات وارد شده در فرمها را چک کند. • می تواند برای شناسایی مرورگر بیننده صفحه استفاده شود و از این طریق صفحه متناسب با آن مرورگر را نمایش دهد. • می تواند برای ذخیره و بازیابی برخی اطلاعات برروی کامپیوتر بیننده استفاده شود.
به طور کلی به سه طریق می توانیم از جاوا اسکرپت در یک صفحه استفاده کنیم: • وارد کردن اسکرپت در بخش <head>صفحه • وارد کردن جاوا اسکرپت در بخش <body>صفحه • استفاده از فایل اسکریپت خارجی <script language="javascript" type="text/javascript" src="external.js"></script>
قواعد <body> <script type="text/javascript"> userName = prompt("What is your name?", ""); userAge = prompt("Your age?", ""); userAge = parseFloat(userAge); document.write("Hello " + userName + ".") if (userAge < 18) { document.write(" Do your parents know " + "you are online?"); } </script> <p>The rest of the page... </body> • جاواسکریپت از حیث قواعد بسیار شبیه c++ است. • برای توضیحات از // یا /* */ استفاده می شود.
انواع متغیرها • سه نوع متغیر می توان تعریف کرد: • عدد • رشته • بولین strings : "foo" 'howdy do' "I said 'hi'." "" numbers : 12 3.14159 1.5E6 booleans: true false <html> <!-- Dave Reed js02.html 2/01/04 --> <head> <title>Data Types and Variables</title> </head> <body> <script type="text/javascript"> x = 1024; document.write("<p>x = " + x + "</p>"); x = "foobar"; document.write("<p>x = " + x + "</p>"); </script> </body> </html>
عملگرها • +, -, *, /, %, ++, --, … • ==, !=, <, >, <=, >= • &&, ||, ! • if, if-else, while, do, … <html> <!-- Dave Reed js03.html 2/01/04 --> <head> <title>Folding Puzzle</title> </head> <body> <script type="text/javascript"> distanceToSun = 93.3e6*5280*12; thickness = .002; foldCount = 0; while (thickness < distanceToSun) { thickness *= 2; foldCount++; } document.write("Number of folds = " + foldCount); </script> </body> </html>
تعامل با کاربر <html> <!-- Dave Reed js05.html 2/01/04 --> <head> <title>Interactive page</title> </head> <body> <script type="text/javascript"> userName = prompt("What is your name?", ""); userAge = prompt("Your age?", ""); userAge = parseFloat(userAge); document.write("Hello " + userName + ".") if (userAge < 18) { document.write(" Do your parents know " + "you are online?"); } </script> <p>The rest of the page... </body> </html> • تابع prompt برای دریافت اطلاعات
alert <!DOCTYPE html><html><head><script type="text/javascript">function myFunction(){alert("I am an alert box!");}</script></head><body><input type="button" onclick="myFunction()" value="Show alert box" /></body></html> • از alert برای هشدار به کاربر استفاده می شود.
توابع • با استفاده از javascript نیز می توان توابعی را تعریف کرد. <!DOCTYPE html><html><head><script type="text/javascript">function myFunction(){alert("Hello World!");}</script></head><body><button onclick="myFunction()">Click me</button></body></html>
آرایه ها • برای ساخت آرایه می توان از new استفاده کرد. • items = new Array(10); // allocates space for 10 items • items = new Array(); // if no size, will adjust dynamically • items = [0,0,0,0,0,0,0,0,0,0]; // can assign size & values [] • برای دسترسی به عناصر آرایه از []استفاده می شود. • for (i = 0; i < 10; i++) { • items[i] = 0; // stores 0 at each index • } • خاصیت length تعداد عناصر آرایه را نشان می دهد. • for (i = 0; i < items.length; i++) { • document.write(items[i] + "<br>"); // displays elements • }
رویدادها • Event یا رویداد بر اثر اتفاقی خاص در مرورگر رخ میدهد. • به عنوان مثال اگر کاربر روی یک المان کلیک کند، یا کلیدی را فشار دهد و یا بارگزاری صفحه تمام شود. • می تواند دستورات یا توابعی را در صورت رخ دادن یک رویداد (firing event) فراخوانی کرد. • در مثال بعدی هنگام کلیک کاربر روی دکمه، تاریخ الآن در یک المان html خاص نوشته می شود.
رویدادها • <!DOCTYPE html><html><head><script type="text/javascript">function displayDate(){document.getElementById("demo").innerHTML=Date();}</script></head><body><h1>My First Web Page</h1><p id="demo"></p><input type=“button" onclick="displayDate()">Display Date</input></body></html>
