وب (HTML-CSS)

جهت آموزش برنامه نویسی وب HTML CSS ارایه می شوند.

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

منظور از اعتبارسنجی فرم، بررسی این است که آیا کاربر فیلدها را درست وارد کرده یا خیر. برای این منظور باید در دستورات جاوااسکریپت به عناصر فرم دسترسی پیدا کرد. برای این منظور از تابع getElementById استفاده می شود. با توجه به اینکه تعداد عناصر فرم ممکن است زیاد باشد بهتر است از تگ div استفاده شود و برای دسترسی به هریک از عناصر تگ div، از getElementByTagName استفاده شود که خروجی آن یک آرایه است. به عنوان مثال فرم زیر را در نظر بگیرید:

<form>
  <div id="d1">
     <input type="text" id="name"><span></span><br />
     <input type="text" id="phone"><span></span><br />
     <input type="text" id="email"><span></span><br />
     input type="button" value="validation" onclick="validate()">
   </div>
</form>

در این فرم تگ div با id با نام d1 مشخص می شود و دارای ۳ کادر متنی یک دکمه و سه تگ span است. برای دسترسی به تگهای span در تگ div به صورت زیر عمل میکنیم:

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

با توجه به اینکه در فرم سه تگ span داریم بنابراین para یک آرایه است که [0]para نشان دهنده اولین تگ span است و [1]para نشان دهنده دومین تگ span است و الی آخر. مثلا می خواهیم در اولین کادر متنی که id آن name است چنانچه تعداد کاراکترها کمتر از ۳ بود پیغام مناسبی در اولین span با رنگ قرمز به کاربر نمایش داده شود. بنابراین از کد زیر استفاده می شود:

var txt=document.getElementById("name").value;
//alert(txt);
if(txt.length<3){
   para[0].style.color="red";
   para[0].innerHTML="Name must be more than 3 characters!";
   exit();
 }

یا چنانچه کاربر در کادر متنی که id آن phone است مقداری وارد کرد که با ۰۹ شروع نمی شود و یا ۱۱ رقمی نیست کد زیر باید نوشته شود:

var txt2=document.getElementById("phone").value;
 //alert(txt2);
 if(txt2.length!=11 || txt2.indexOf("09")!=0){
      para[1].style.color="red";
      para[1].innerHTML="Phone is not valid!";
      exit();
}

برای کادر متنی سوم که id آن email است چنانچه کاربر مقدار ایمیل نامعتبری وارد کرد پیغام خطایی نشان داده شود. مثلا باید حتما @ در آدرس ایمیل باشد و قبل از آن حداقل یک کاراکتر باید بیاید. در نتیجه از تابع lasIndexOf باید استفاده شود. به صورت زیر:

txt3.lastIndexOf('@')<=0

یا باید یک علامت @ در ایمیل داشته باشیم و بیشتر از یک علامت @ ایمیل نامعتبر است. برای این منظور از تابع split استفاده می شود که بر طبق @ رشته ایمیل را تقسیم می کند اگر بیشتر از دو باشد خطا دارد. به صورت زیر:

txt3.split("@").length>2

علاوه براین در یک ایمیل معتبر باید آخرین . بعد از @ باشد. برای این منظور از تابع lastIndexOf به صورت زیر استفاده می شود:

txt3.lastIndexOf('.')<txt3.lastIndexOf('@')

کل کد مربوط به اعتبارسنجی ایمیل بصورت زیر است:

var txt3=document.getElementById("email").value;
//alert(txt3);
if(txt3.lastIndexOf('@')<=0 || txt3.split("@").length>2 || 
  txt3.lastIndexOf('.')<txt3.lastIndexOf('@')){
       para[2].style.color="red";
       para[2].innerHTML="Email is not valid!";
       exit();
}

تمام کد مربوط به اعتبارسنجی فرم با جاوااسکریپت در زیر آمده است:

<html>
    <head>
        <script type="text/javascript">
            function validate(){
                var para=document.getElementById("d1").getElementsByTagName('span');
                var txt=document.getElementById("name").value;
                //alert(txt);
                if(txt.length<3){
                    para[0].style.color="red";
                    para[0].innerHTML="Name must be more than 3 characters!";
                    exit();
                }else{
                    para[0].innerHTML="";
                    var txt2=document.getElementById("phone").value;
                    //alert(txt2);
                    if(txt2.length!=11 || txt2.indexOf("09")!=0){
                        para[1].style.color="red";
                        para[1].innerHTML="Phone is not valid!";
                        exit();
                    }else{
                        para[1].innerHTML="";
                        var txt3=document.getElementById("email").value;
                        //alert(txt3);
                        if(txt3.lastIndexOf('@')<=0 || txt3.split("@").length>2 || 
                            txt3.lastIndexOf('.')<txt3.lastIndexOf('@')){
                            para[2].style.color="red";
                            para[2].innerHTML="Email is not valid!";
                            exit();
                        }else{
                            para[2].innerHTML="";
                            alert("All of fields are completed successfully")
                        }


                    }

                }
            }
        </script>
    </head>
    <body>
        <form>
            <div id="d1">
                <input type="text" id="name"><span></span><br />
                <input type="text" id="phone"><span></span><br />
                <input type="text" id="email"><span></span><br />
                <input type="button" value="validation" onclick="validate()">
            </div>
        </form>
    </body>
</html>

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

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

while(i<=max){
      document.write(i+"<br />");
      i+=2;
             }

در کد فوق حلقه تا زمانی تکرار می شود که مقدار i‌ کمتر از max باشد. کدی که قرار است تکرار شود شامل چاپ محتوای متغیر i هست و به خط بعد می رود. سپس متغیر i دو واحد افزوده می شود. این کار تا زمانی ادامه می یابد که i‌ کمتر از max است.

مثال۱: به کمک حلقه while مقادیر بین min و Max که از ورودی دریافت می شوند بصورت یکی در میان در خروجی چاپ شوند:

<html>
   <head>
       <script type="text/javascript">
            function printNumbers(min,max){
                 
                    var i=min;
                    while(i<=max){
                        document.write(i+"<br />");
                        i+=2;
                    }
            }
            
       </script>
   </head>
   <body onload="printNumbers(eval(prompt('min:')),eval(prompt('max: ')))">

   </body>
</html>

مثال۲: صفحه وبی طراحی کنید که اعدادی از ورودی به صورت نامحدود دریافت شوند و هنگامی که کاربر مقدار * را وارد کرد مجموع اعداد نمایش داده شود.

توضیح: شرطی که جلوی دستور while باید بنویسیم بررسی این است که آیا کاربر کاراکتر * را وارد کرده یا خیر. چنانچه وارد کرده بود مجوع اعداد نمایش داده می شود و در غیر اینصورت عدد جدید با مجموع اعداد وارد شده جمع می شود و مجدد از کاربر درخواست می شود عدد جدیدی وارد کند.

<html>
   <head>
       <script type="text/javascript">
            function printNumbers(){
                
                    var sum=0;
                    var input=prompt("Enter a number (* for finish)");
                    while(input!="*"){
                        
                        sum+=eval(input);
                        var input=prompt("Enter a number (* for finish)");
                    }
                    alert(sum);
            }
            
       </script>
   </head>
   <body onload="printNumbers()">

   </body>
</html>

همانطوریکه مشاهده می شود sum مجموع را دارد و هنگامی که کاربر * را وارد می کد محتوای sum نمایش داده می شود.

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

استفاده از حلقه ها در جاوااسکریپت مشابه زبان c می باشد. برای این منظور از ساختار زیر استفاده می شود:

 for(var i=min;i<=max;i++){
                     document.write(i+"<br />");
                 }

در کد فوق متغیر i به عنوان شمارنده از متغیر min تا مقدار متغیر max کد داخل آکولاد را تکرار می کند. در داخل آکولاد مقدار i در صفحه نوشته می شود و به خط بعد می رود. می توان این دستور را در یک تابع قرار داد و با کلیک بر روی دکمه اجرا شود.

<html>
   <head>
       <script type="text/javascript">
            function printNumbers(min,max){
                 for(var i=min;i<=max;i++){
                     document.write(i+"<br />");
                 }
                    
            }
            
       </script>
   </head>
   <body onload="printNumbers(eval(prompt('min:')),eval(prompt('max: ')))">

   </body>
</html>

همانطوریکه در کد فوق مشاهده می شود با لود شدن صفحه دو مقدار min و max از کاربر به کمک تابع prompt دریافت می شود. سپس به کمک تابع eval مقدارهای رشته ای به عددی تبدیل می شوند و برای تابع printNumbers ارسال می شود. تابع printNumbers نیز مقادیر i را چاپ می کند.

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

جهت اعمال تنظیمات شیوه نامه برای یک ابزار HTML از دستور style به صورت زیر استفاده می شود:

document.getElementById("id1").style.color="red"; 

در کد بالا ابزار با id که id1 نام دارد رنگ نوشته را به قرمز تغییر می دهد.

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

<head>
    <meta charset="utf-8">
    <title>کادر تایید</title>
</head>
<body bgcolor="#ffeedd">
 <center>
     <h1 id="id1">دانشکده فنی امام محمدباقر</h1>
    <script type="text/javascript">
        function product(){
            
           document.getElementById("id1").style.color="red"; 

        }
    </script>

    
    <br/>
    <br/>
    <input type="button" name="button" value="کلیک کنید" onclick="product()"/>
</center>
</body>

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

<head>
    <meta charset="utf-8">
    <title>کادر تایید</title>
</head>
<body bgcolor="#ffeedd">
 <center>
     <h1 id="id1">دانشکده فنی امام محمدباقر</h1>
    
    <br/>
    <br/>
    <input type="button" name="button" value="کلیک کنید" 
    onclick="document.getElementById('id1').style.backgroundColor='red'"/>
</center>
</body>

ابتدا ابزارهای HTML‌ را ایجاد می کنیم و با id نامی برای آنها تعیین می کنیم.

<input type="text" name="txt1" id="txt2"/>

همانطوریکه مشاهده می شود txt2 نامی است که برای یک کادر متنی لحاظ شده است. سپس برای دستیابی به آن از کد زیر استفاده می شود:

var a=Number(document.getElementById("txt1").value);

کد بالا یک کد جاوااسکریپت است که محتوای کادر متنی با id که txt1 است تعلق گرفته است را در a قرار می دهد.

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

<head>
    <meta charset="utf-8">
    <title>کادر تایید</title>
</head>
<body bgcolor="#ffeedd">
 <center>
    <script type="text/javascript">
        function product(){
            
            var a=Number(document.getElementById("txt1").value);
            var b=Number(document.getElementById("txt2").value);
            document.getElementById("txt3").value=a+b;

        }
    </script>

    قیمت محصول اول
    <br/>
    
    <input type="text" name="txt1" id="txt1"/>
    <br/>
    <br/>
    قیمت محصول دوم
    <br/>
    
    <input type="text" name="txt2" id="txt2"/>
    <br/>
    <br/>
    قیمت کل
    <br/>
   
    <input type="text" name="txt3" id="txt3"/>
    <br/>
    <br/>
    <input type="button" name="button" value="نمایش محصولات" onclick="product()"/>
</center>
</body>

با استفاده از دستور function در تگ script می توان توابع را تعریف کرد. ذکر یک مثال ساده به تفهیم آن کمک می کند: صفحه وبی که با کلیک بر یک دکمه تابعی فراخوانی شود و چند محصول نمایش داده شود.

<head>
    <meta charset="utf-8">
    <title>کادر تایید</title>
</head>
<body dir="rtl">
    <script type="text/javascript">
        function product(){
            document.write("لپ تاپ لنوو" +"<br/>");
            document.write("موبایل هواوی" +"<br/>");
            document.write("تبلت سامسونگ" +"<br/>");
        }
    </script>

    <input type="button" name="button" value="نمایش محصولات" onclick="product()"/>
</body>

ابتدا در یک مثال نحوه ی استفاده از دستورات کنترلی if بیان می شود.

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

<head>
    <meta charset="utf-8">
    <title>کادر تایید</title>
</head>
<body>
    <script type="text/javascript">
        var a= window.confirm("آیا خرید را تایید می کنید؟");
        if(a==true)
            window.alert("خرید را پذیرفتید");
        else
            window.alert("خرید تایید نشد");
    </script>
</body>

نیازی به توضیح ندارد فقط خروجی تابع confirm جهت تعیین این است که کاربر دکمه تایید را زده یا خیر و در اینجا در متغیر a ذخیره شده است.

طراحی وب ریسپانسیو (Responsive) ایجاد صفحات وب است که در همه دستگاه ها خوب به نظر می رسد!

یک طراحی وب پاسخگو به طور خودکار برای اندازه و صفحه نمایش مختلف صفحه نمایش تنظیم می شود. طراحی وب ریسپانسیو استفاده از HTML و CSS برای تغییر اندازه ، مخفی کردن ، کوچک کردن یا بزرگ کردن خودکار یک وب سایت است تا در همه دستگاه ها (دسک تاپ ، رایانه لوحی و تلفن) ظاهر خوبی داشته باشد:

ابتدا در قسمت head یک تگ meta تعریف می کنیم و دستور زیر را در آن می نویسیم:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

*{
                box-sizing: border-box;
            }

حال صفحه را به ۱۲ ستون تقسیم می کنیم که از اندازه ۸.۳۳ درصد تا ۱۰۰ درصد می شوند. کد آن به صورت زیر نوشته می شود:

.col-1{width: 8.33%;}
            .col-2{width: 16.66%;}
            .col-3{width: 25%;}
            .col-4{width: 33.33%;}
            .col-5{width: 41.66%;}
            .col-6{width: 50%;}
            .col-7{width: 58.33%;}
            .col-8{width: 66.66%;}
            .col-9{width: 75%;}
            .col-10{width: 83.33%;}
            .col-11{width: 91.66%;}
            .col-12{width: 100%;}

برای تمام ستون ها یکسری شیوه نامه تعریف می کنیم:

[class*="col-"]{
                float: right;
                padding: 15px;
               
                text-align: right;
                direction: rtl;
            }

حال اندازه صفحه را در نظر می گیریم که برای این کار از media استفاده می شود. برای مثال برای پهنای صفحه نمایش کمتر از 600 پیکسل کد زیر را وارد می کنیم.

 @media only screen and (max-width: 600px){
                    [class*="col-"]{
                        width: 100%;
                    }
            }

کد فوق بیان می کند اگر اندازه پهنای صفحه نمایش کمتر از ۶۰۰ بود پهنای عناصر صفحه ۱۰۰ درصد باشد.

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

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{
                box-sizing: border-box;
            }
            .header{
                border: 1px solid red;
                text-align: center;
                direction: rtl;
            }
            .menu ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            .menu li{
                padding: 8px;
                margin-bottom: 7px;
                background-color: royalblue;
                color: seashell;
            }
            .menu li:hover{
                background-color: skyblue;
                color: royalblue;
            }
            
            .col-1{width: 8.33%;}
            .col-2{width: 16.66%;}
            .col-3{width: 25%;}
            .col-4{width: 33.33%;}
            .col-5{width: 41.66%;}
            .col-6{width: 50%;}
            .col-7{width: 58.33%;}
            .col-8{width: 66.66%;}
            .col-9{width: 75%;}
            .col-10{width: 83.33%;}
            .col-11{width: 91.66%;}
            .col-12{width: 100%;}
            [class*="col-"]{
                float: right;
                padding: 15px;
               
                text-align: right;
                direction: rtl;
            }

            @media only screen and (max-width: 600px){
                    [class*="col-"]{
                        width: 100%;
                    }
            }

        </style>
    </head>
    <div class="header">
        <h1>آموزشکده امام محمدباقر</h1>
    </div>
    <div class="col-3 menu">
        <ul>
            <li>صفحه اصلی</li>
            <li>گالری عکس</li>
            <li>فروشگاه</li>
            <li>درباره ما</li>
        </ul>
    </div>
    <div class="col-9">
        <h1>صفحات ریسپانسیو</h1>
        <p>صفحات ریسپانسیو  صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو  صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیوصفحات ریسپانسیو صفحات ریسپانسیو</p>
    </div>
</html>

حالا برنامه را اجرا کنید. با تغییر پهنا به نتیجه خواهید رسید. خروجی های زیر بدست می آیند:

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

برای تنظیم فونت سایت باید از شیوه نامه خارجی(شیوه نامه ای که در یک فایل با پسوند css) قرار دارد استفاده کرد. قبل از این کار باید فونتی که مدنظر داریم را دریک سایت تبدیل فونت از ویندوز (ttf) به وب (woff,eot) تبدیل کرد. نتیجه فونت های خروجی و شیونه نامه خارجی خواهد بود که کد شیوه نامه خارجی در فایل fonts با پسوند css ذخیره می شود. در زیر آدرس سایت تبدیل فونت و محتوای شیوه نامه برای فونت B Yekan آمده است.

/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "BYek";
  src: url("./fonts/BYekan.eot"); /* IE9 Compat Modes */
  src: url("./fonts/BYekan.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/BYekan.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./fonts/BYekan.woff") format("woff"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

همانطوریکه مشاهده می شود مقدار صفت font-family مقدار BYek در نظر گرفته شده است. در نتیجه در کد زیر از آن استفاده می کنیم.

<h1 style="font-family: 'BYek';text-align: center;">پاییز ۹۹</h1>

البته جهت استفاده از آن باید در بخش head از دستور Link به صورت زیر استفاده کرد.

<link href="Fonts.css" rel="stylesheet" type="text/css">

در محتوای فایل Fonts.css مشخص شده که فونت از کجا دریافت شود.

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

ابتدا یک فایل با نام 1 و پسوند css می سازیم. قصد داریم تنظیمات مربوط به دستور a (لینک) را ایجاد می کنیم. این تنظیمات شامل ۴ وضعیت link ، hover، visited، و active است. link دستور a (لینک) را ایجاد کنیم. این تنظیمات شامل ۴ وضعیت link، hover ، visited و active است. وضعیت link دستور a را در حالت عادی نشان می دهد. hover زمانی که از روی نوشته اشاره گر ماوس عبور کرد نشان می دهد. visited وضعیتی است که اگر کاربر قبلا روی لینک کلیک کرده باشد را نشان می دهد و active زمانی است که کاربر چپ کلیک را بر روی نوشته نگه می دارد. کد موجود در فایل به صورت زیر است.

a{
                
    direction: rtl;
    font-family: 'B yekan';
}

a:link{
    background-color: transparent;
    color: green;
    text-decoration: none;
}
a:hover{
    background-color: yellow;
    color: pink;
    text-decoration: none;
}
a:visited{
    color: yellowgreen;
    text-decoration: underline;
}
a:active{
    color: yellowgreen;
    background-color: transparent;
    text-decoration: underline;
}

حال در فایل s3 که پسوند آن htm است کد زیر را قرار می دهیم.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="1.css">
    </head>
    <body>
        <a href="s2.htm">ورود به صفحه قبل</a>
    </body>
</html>

همانطوریکه در کد بالا مشاهده می شود در قسمت head دستور link استفاده شده است که آدر فایل شیوه نامه در آن مشخص می شود. سپس در قسمت body عبارت ورود به صفحه قبل براساس شیوه نامه باید نمایش داده شود زیرا در تگ a قرار دارد.