جاوااسکریپت

آموزش بعدی ||||| آموزش قبلی

برای کار با پنجره ها در جاوااسکریپت از شی window استفاده می شود. برای مثال می توان تعیین کرد یک پنجره جدید باز شود. کد زیر این کار را انجام میدهد:

window.open("","","_blank")

از سوی دیگر می توان تعیین کرد که پنجره بسته شود که با متد close تعیین می شود. یا می توان تعیین کرد اندازه آن چقدر باشد که برای این منظر از متد resizeTo استفاده می شود:

win.resizeTo(800,100)

جهت جابجایی پنجره نیز از متد moveTo استفاده می شود:

win.moveTo(600,700);

مثال: صفحه وبی طراحی کنید که با کلیک بر دکمه پنجره جدیدی با اندازه ۸۰۰ در ۱۰۰ باز شود و به پیکسل ۶۰۰ و ۷۰۰ منتقل شود. با زدن دکمه دیگر پنجره باز شده بسته شود.

<head>
    <script type="text/javascript">
        var win;
       function btn_open(){
           win=window.open("","","_blank")
           win.moveTo(600,700);
           win.resizeTo(800,100)
       }
       function btn_close(){
           win.close()
       }
        
    </script>
</head>
<body>
    <input type="button" value="Open Window" onclick="btn_open()">
    <input type="button" value="close Window" onclick="btn_close()">
</body>

همانطوریکه در کد فوق مشاهده می شود با کلیک بر دکمه open window متد btn_open باز می شود. ابتدا یک متغیر بنام win تعریف می شود تا از نوع پنجره ای که باز شده باشد. سپس می توان مقادیر این متغیر را با متدهای moveTo و resizeTo و close تغییر داد.

آموزش بعد ||||| آموزش قبلی

برای تطابق الگو (pattern matching) با یک رشته ورودی از regular expression‌ استفاده می شود. علاوه بر این جهت جستجو در یک رشته نیز مورد استفاده قرار می گیرد. ساختار کلی regular expression بصورت زیر است:

var patt=/pattern/modifiers

همانطوریکه مشاهده می شود در کد بالا می توان بجای pattern الگو تعیین کرد. و بجای modifiers میتوان سوییچ تعریف کرد مثلا i به عنوان سوییچ برای این است که حروف بزرگ و کوچک را در نظر بگیرد.

مثال: الگویی تعریف کنید که بررسی کند آیا حداقل یکی از حروف acgm در رشته آمده یا نه:

var patt=/[acgm]/

مثال: صفحه وبی طراحی کنید که چنانچه رشته دارای کاراکتر غیر فارسی بود پیغام مناسب نمایش دهد:

<head>
    <script type="text/javascript">
        var patt=/[^ا-ی]/;
        var txt="سلامa";
        if(patt.test(txt)){
            alert("فارسی وارد کنید");
        }else{
            alert("معتبر است");
        }
        
    </script>
</head>

همانطوریکه در کد فوق مشاهده میشود در رشته txt کاراکتر a به صورت غیر فارسی درج شده در نتیجه خروجی فارسی وارد کنید نشان داده می شود.

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

<head>
    <script type="text/javascript">
        var patt=/\D/;

        var n=prompt("Enter a number:");
        if(patt.test(n)){
            alert("Your input is Not a Number(NaN)")
        }else{
            alert("Your input is a number")
        }
        
    </script>
</head>

در کد فوق ابتدا یک کاراکتر از ورودی دریافت می شود چنانچه عدد بود پیغام You input is a number نمایش داده می شود.

درس بعدی ||||| درس قبلی

جهت دسترسی به هر قسمت از صفحه وب از طریق id و با تابع getElemetById انجام می شود. برای نمونه برای دسترسی به یک div که مقدار d1 برای id آن تعریف شده است بصورت زیر عمل می شود:

document.getElementById('d1').innerHTML="Hello";

همانطوریکه مشاهده می شود مقدار Hello در ابزار با id با نام d1 قرار می گیرد.گاهی برخی از ابزارها نظیر ابزارهای div خود دارای ابزارهای دیگری هستند مانند زیر:

<div id="d1">
            <p>paragraph</p>
            <h1>Welcome</h1>
            <span>Hi</span>
            <p>aaa</p>
        </div>

همانطوریکه می بینید سه تگ p ، h1 و span در تگ div با id با نام d1 قرار گرفته اند. برای دسترسی به هریک از آنها از دستور getElementByTagName استفاده می شود. برای مثال دستور زیر لیست تگ های p موجود در div با id با نام d1 را در متغیر آرایه ای para ذخیره می کند:

var para=document.getElementById('d1').getElementsByTagName('p');

مثال: صفحه وبی طراحی کنید که با کلیک بر یک دکمه تمامی تگ های p موجود در دستور div با کد بالا به رنگ آبی تبدیل شوند:

<html>
   <head>
       <style>
           div{
               width: 200px;
               height: 200px;
               background-color: chartreuse;
           }
       </style>
       <script type="text/javascript">
            function change(){
                //document.getElementById('d1').innerHTML="Hello";
                var para=document.getElementById('d1').getElementsByTagName('p');
                for(var i=0;i<para.length;i++){
                    para[i].style.color="blue";
                }
                    
            }
            
       </script>
   </head>
   <body>
       <input type="button" value="change something" onclick="change()">
        <div id="d1">
            <p>paragraph</p>
            <h1>Welcome</h1>
            <span>Hi</span>
            <p>aaa</p>
        </div>
   </body>
</html>

آموزش بعدی ||||| آموزش قبلی

منظور از رکورد مجموعه ای از صفات و مقادیر مربوط به یک موجودیت است. برای نمونه برای موجودیت person رکورد به صورت زیر تعریف می شود.

 var person={fname:"ali",lname:"alavi",age:23};

همانطوریکه مشاهده می شود رکوردها در آکولاد قرار می گیرند. سه صفت fname ، lname و age مقادیری گرفته اند و تشکیل یک رکورد را داده اند. برای دسترسی به هر صفت از [] استفاده می شود.

مثال: صفحه وبی طراحی کنید که با در نظر گرفتن مدیریت استثنا تمام مقادیر رکورد فوق را نمایش دهد:

<html>
   <head>
       <script type="text/javascript">
            function printNumbers(){
                try{
                    var txt="";
                    var person={fname:"ali",lname:"alavi",age:23};
                    for(var x in person){
                        txt+=person[x]+" ";
                    }
                    alert(txt);
                }catch(e1){
                        alert(e1.message);
                }
                    
            }
            
       </script>
   </head>
   <body onload="printNumbers()">

   </body>
</html>

در کد فوق کدهای موجود در اکولاد try اجرا می شوند. از دستور foreach برای دسترسی به تمام مقادیر رکورد استفاده شده است. که مقادیر در متغیر txt ذخیره می شوند. چنانچه خطایی رخ دهد مثلا کاربر برای دستور alert به صورت alertt وارد کند. قسمت موجود در catch اجرا می شود.

درس بعدی ||||| درس قبلی

آرایه به معنای مجموعه ای از عناصر همنوع می باشد. جهت تعریف آرایه ها در جاوااسکریپت از [] براکت استفاده می شود. به عنوان مثال در زیر آرایه names شامل مجموعه ای از مقادیر رشته ای می باشد.

var names=["ali","hasan","hossein","hamid","nader"];

برای دسترسی به هرکدام از مقادیر آرایه از اندیس آن استفاده می شود که از صفر شروع میشود:

alert(names[1]);

کد فوق اندیس شماره ۱ یعنی hasan را چاپ می کند زیرا اندیس ها از صفر شروع می شوند.

مثال: صفحه وبی طراحی کنید که اسامی فوق را در یک آرایه names قرار دهد. سپس از کاربر یک نام درخواست شود. همه ی اسامی بجز نامی که کاربر وارد کرد نمایش داده شوند.

<html>
   <head>
       <script type="text/javascript">
            function printNumbers(name){
                
                    var names=["ali","hasan","hossein","hamid","nader"];
                    for(var i=0;i<names.length;i++){
                        if(names[i]==name){
                            continue;
                        }else{
                            alert(names[i]);
                        }
                    }
            }
            
       </script>
   </head>
   <body onload="printNumbers('hasan')">

   </body>
</html>

تابع length جهت تعیین تعداد عناصر آرایه به کار می رود.