HTML scripts
تگ <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> صفحه به طور کلی به سه طریق می توانیم از جاوا اسکرپت در یک صفحه استفاده کنیم: وارد کردن اسکرپت در بخش <head> صفحه وارد کردن جاوا اسکرپت در بخش <body> صفحه استفاده از فایل اسکریپت خارجی <script language="javascript" type="text/javascript" src="external.js"></script>
قواعد جاواسکریپت از حیث قواعد بسیار شبیه c++ است. <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"; </script> </body> </html>
عملگرها if, if-else, while, do, … +, -, *, /, %, ++, --, … ==, !=, <, >, <=, >= &&, ||, ! 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>
تعامل با کاربر تابع prompt برای دریافت اطلاعات <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 از 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>