برچسب: جاواسکریپت

جاواسکریپت: ۳- فرم

فرم – Forms

در HTML تگ‌های زیادی برای ساخت فرم‌های ورودی و خروجی وجود دارد. اینجا می‌خواهیم با برخی از مهمترین آن‌ها آشنا شویم.

HTML

<form>...</form>

<fieldset>...</fieldset>
<legend>...</legend>

<button>...</button>
<input ... />
<label>...</label>
<textarea>...</textarea>

<button>…</button>

المنت باتن (button) یک دکمه در صفحه ایجاد می‌کند، که می‌توان روی آن کلیک کرد تا کاری انجام شود.

در مثال زیر یک پیام روی صفحه ظاهر می‌شود و سپس محتوای المنت h1 تغییر می‌کند.

HTML

<h1 id="demo"></h1>    
<button id="btn">Click Here</button>
JS

document.getElementById("btn").onclick = function() {
    alert("Hi");
    document.getElementById("demo").innerHTML = "Hello, World!";
}

<input … >

المنت input چیزی را از کاربر دریافت می‌کند. آن چیز می‌تواند متن، عدد یا … باشد. به کمک Attribute های آن می‌توانید نما و عملکرد آن را تعیین کنید.

  • type: نوع ورودی
  • value: مقدار اولیه
  • checked: علامت دار
  • name: نام المنت
  • placeholder: راهنمای کاربر
انواع input

<input type=”text” />

<input type=”text” placeholder=”Name”/>

<input type=”text” value=”Mahdi Ahmadi”/>

HTML

<h1 id="demo"></h1>    
<input type="text" id="name-id">
<button id="btn">OK</button>
JS

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("name-id").value;

}

تمرین ۱

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

<input type=”password” />

HTML

<h1 id="demo"></h1>    
<input type="password" id="pass-id">
<button id="btn">OK</button>
JS

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("pass-id").value;

}

تمرین ۲

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

<input type=”number” />

<input type=”number” min=”0″ max=”50″ step=”5″ >

HTML

<h1 id="demo"></h1>
<input type="number" id="num-id">
<button id="btn">OK</button>
JS

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("num-id").value;

}

تمرین ۳

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

<input type=”range” />

HTML

<h1 id="demo"></h1>
<input type="range" id="rng-id">
<button id="btn">OK</button>
JS

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML = 
    document.getElementById("rng-id").value;

}

تمرین ۴

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

<input type=”checkbox” />

<input type=”checkbox” checked />

HTML

<h1 id="demo"></h1>
<input type="checkbox" id="chkbx-id">
<button id="btn">OK</button>
JS

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("chkbx-id").checked;

}

تمرین ۵

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

<input type=”checkbox” checked />

HTML

<h1 id="demo"></h1>
<input type="checkbox" id="chkbx-id">
<button id="btn">OK</button>
JS

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("chkbx-id").checked;

}

<label for=”id”>…</label/>
HTML

<!-- inaccessible -->
<input id="g1" type="checkbox">Cricket


<!-- implicit label -->
<label><input id="g2" type="checkbox">Hockey</label>


<!-- explicit label -->
<input id="g3" type="checkbox"><label for="g3">Rugby</label>

تمرین ۶

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

<input type=”radio” />

HTML

<h1 id="demo"></h1>
<input type="radio" id="rdo-id">
<button id="btn">OK</button>
JS

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("rdo-id").checked;

}

<input type=”radio” name=”group” />

HTML

<!-- Group 1 -->
<input type="radio" name="grp1" value="Cricket">
<input type="radio" name="grp1" value="Hockey">
<input type="radio" name="grp1" value="Rugby">

<!------------------------------------>

<!-- Group 2 -->
<input type="radio" name="grp2" value="Red">
<input type="radio" name="grp2" value="Blue">
<input type="radio" name="grp2" value="Green">

<fieldset>…</fieldset>

یک خط دور مجموعه‌ی المنت‌های داخل آن کشیده می شود.

<legend>…</legend>

یک عنوان برای آن مجموعه نمایش داده می‌شود.

HTML

<fieldset>
    <legend>Choose a game:</legend>
    <p>
        <input type="radio" name="grp1" id="game1" value="Cricket">
        <label for="game1">Cricket</label>
    </p>
    <p>
        <input type="radio" name="grp1" id="game2" value="Hockey">
        <label for="game2">Hockey</label>
    </p>
    <p>
        <input type="radio" name="grp1" id="game3" value="Rugby">
        <label for="game3">Rugby</label>
    </p>
</fieldset>
...

زمان خواندن: ۶ دقیقه

جاواسکریپت: ۲- سینتَکس

دستور زبان – Syntax

    • حساس به نوع حرف (Case Sensitive):
      جاواسکریپت به کوچکی یا بزرگی حروف اهمیت می‌دهد و آنها را دو کاراکتر متفاوت در نظر می گیرد. (A ≠ a)
    • بی تفاوت نسبت به فاصله‌ها:
      جاواسکریپت فاصله‌ها را نادیده می‌گیرد. فاصله‌ها، سر خط رفتن و تورفتگی‌ها همه برای خوانایی برنامه رعایت می شود.
    • توضیحات (Comments):
      جاواسکریپت توضیحات را نادیده می‌گیرد ولی برای فهمیدن روند اجرای برنامه بسیار ضروری است. توضیحات به دو روش می تواند در متن جاواسکریپت نوشته شود.

// Single line Comments

/*
Multi-line
Comments
*/
    • سِمی کُلُن (Semicolon):
      سمی کلن نشان دهنده پایان دستور است.
      بنابراین چند دستور می‌تواند در یک خط پشت سر هم بیاید.
      و یا یک دستور در چند خط زیر هم نوشته شود.

Multiple Statements; On One Line;

One Statement 
On Multiple Lines;
    • نقطه (Dot):
      بین نام آبجکت و پراپرتی، متد یا ایونت همیشه نقطه گذاشته می‌شود.

Object.property
Object.method
Object.event

آغاز کار در جاواسکریپت

پیش از هر کاری بهتر است با چند آبجکت در وب بروزر آشنا شویم.

window

آبجکت window، آبجکت گلوبال (global) یا سراسری نامیده می‌شود. به این معنا که پراپرتی و متدهای آن همه جا در دسترس است. و نیازی به نوشتن آن نیست.

window.alert

متد alert یک پیام را در یک پنجره نمایش می‌دهد.


// Displaying a text message
window.alert("Hello World!");

// is the same as
alert("Hello World!");

// Displaying a Number 
alert(20); // Outputs: 20

دستورات بالا را در کنسول آزمایش کنید.

تمرین ۱

  • در فولدر js1 یک فولدر به نام 1-02 بسازید.
  • یک فایل به نام index.html در آن ایجاد کنید.
  • یک جاواسکریپت اینترنال در آن بنویسید که پیام زیر را نمایش دهد:
    I’m ‘Name‘, Can I help you?
  • بجای Name نام خود را بنویسید.

console

آبجکت console بیشتر برای اشکال زدایی (debugging) است. و خطاها آنجا نمایش داده می‌شود.

console.log

متد console.log یک پیام را در کنسول نمایش می‌دهد.


// Displaying a text
console.log("Hello World!");

// Displaying a Number 
console.log(20); // Outputs: 20

دستورات بالا را در کنسول آزمایش کنید.

تمرین ۲

  • در فولدر js1 یک فولدر به نام 2-02 بسازید.
  • یک فایل به نام index.html در آن ایجاد کنید.
  • یک جاواسکریپت اینترنال در آن بنویسید که پیام زیر را در کنسول نمایش دهد:
    Completed Successfully.

document

آبجکت document محتوای داخل window است.

document.write

متد document.write یک رشته متنی را در داخل بروزر نمایش می‌دهد.


// Displaying a html
document.write("<h1>Hello World!</h1>");

// Displaying a text
document.write("Your number is: ");

// Displaying a Number 
document.write(20); // Outputs: 20

دستورات بالا را در کنسول آزمایش کنید.

document.getElementById

متد document.getElementById یک المنت با id خاصی را می‌گیرد.

HTML

<h1 id="greet">Hello World!</h1>
JS

// Gets the element with the 'greet' id:
document.getElementById("greet");

دستورات بالا را در کنسول آزمایش کنید.

آناتومی المنت HTML

element.innerHTML

متد element.innerHTML محتوای یک المنت را برمی‌گرداند یا تغییر می‌دهد.

HTML

<h1 id="greet"></h1>
<div id="msg"></div>
<p id="no"></p>
JS

// Displaying a text
document.getElementById("greet").innerHTML = "Hello World!";

// Displaying a html
document.getElementById("msg").innerHTML = "Your number is:";

// Displaying a Number 
document.getElementById("no").innerHTML = 20;

دستورات بالا را در کنسول آزمایش کنید.

تمرین ۳

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • یک جاواسکریپت اینترنال در آن بنویسید که نامتان را در تگ h1 نمایش دهد.

element.setAttribute

متد element.setAttribute یک اتریبیوت به المنت اضافه می‌کند.

HTML

<h1 id="hi">Hello World!</h1>
JS

document.getElementById("hi").setAttribute("style", "color: red");

دستورات بالا را در کنسول آزمایش کنید.

تمرین ۴

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • یک جاواسکریپت اینترنال در آن بنویسید که تصویر را در تگ img تغییر دهد.

element.style.property

متد element.style.property یک inline css به المنت اضافه می‌کند. پراپرتی css باید اینجا به شکل camelCase نوشته شود.

HTML

<h1 id="hi">Hello World!</h1>
JS

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

دستورات بالا را در کنسول آزمایش کنید.

element.onclick

ایونت element.onclick یک مجموعه ای از دستورات را هنگام کلیک روی المنت اجرا می‌کند. به این مجموعه دستورات فانکشن (function) می‌گویند.
فانکشن: یک مجموعه‌ای از دستورات که کار خاصی را انجام می‌دهند.  در جاواسکریپت فانکشن، به روش‌های گوناگونی نوشته می‌شود. که در آینده با انواع آن آشنا خواهید شد. در اینجا ساده‌ترین شکل آن را می بینید:

function() {…}

دستورات مورد نظر را درون {…} کِرلی بِرَکِت Curly Bracket بنویسید.

روی تصویر زیر کلیک کنید.

HTML

<img src="photo.jpg" id="pic"/>
JS

document.getElementById("pic").onclick = function(){ alert("Hi"); }

دستورات بالا را در کنسول آزمایش کنید.

تمرین ۵

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • یک جاواسکریپت اینترنال در آن بنویسید که در صورت کلیک روی دکمه تصویر ظاهر شود.

راهنمایی:

display: block;

زمان خواندن: ۵ دقیقه

جاواسکریپت: ۱- مقدمه

تاریخچه

اولین وب بروزر، موزاییک (Mosaic) نام داشت که در سال ۱۹۹۳ ارائه شد. یک سال بعد برنامه نویسان موزایک شرکت نتسکیپ (Netscape) را تأسیس کردند و نام بروزر خودشان را نتسکیپ نویگیتور (Netscape Navigator) گذاشتند. (اکنون شرکت نتسکیپ به موزیلا و نویگیتور به فایرفاکس تغییر نام داده است.) در سال ۱۹۹۵ آنها تصمیم گرفتند یک زبان برنامه نویسی برای توسعه صفحات وب ایجاد کنند. (بیشتر…)

زمان خواندن: ۶ دقیقه

وبکم در جاواسکریپت

تا همین چندی پیش برای اتصال به وبکم و دسترسی به استریم ویدئویی آن نیاز به نصب یک افزونه بود. و این خود یک نقطه ضعف برای مرورگرها و توسعه وب بود. (بیشتر…)

زمان خواندن: ۲ دقیقه

QR Code

کیوآر کد (QR Code) یک نوع بارکد دو بعدی است؛ که یکی از شرکت‌های زیرمجموعه اتومبیل سازی تویوتا در سال ۱۹۹۴، برای ردیابی سریع قطعات، آن را اختراع کرد. (بیشتر…)

زمان خواندن: ۳ دقیقه