Web Programming Workshopmontajab.com/kishuast/lib/wpw/WebProgrammingWorkshop_02.pdf · 5.1 ECMAScript 5.1 (2011) Editorial changes. 6 ECMAScript 2015 Added let and const. Added default

1

email: [email protected]

1.05: نسخه

JavaScript

2

.و وب استHTMLجاوا اسکریپت، زبان برنامه نویسی

.جاوا اسکریپت یکی از سه زبان مورد نیاز همه توسعه دهندگان وب است

JavaScript

تعریف محتوای صفحات وب

تعیین طرح صفحات وب

برنامه ریزی رفتار صفحات وب

Content

Layout

Behavior

3

ECMA-262: نام رسمی

2018، ژوئن 9: جدیدترین نسخه

ECMAScript® 2018

JavaScript

European Computer

Manufacturers Association

1997: ECMAScript 1

4

JavaScript

Version Official Name Description

1 ECMAScript 1 (1997) First Edition.

2 ECMAScript 2 (1998) Editorial changes only.

3 ECMAScript 3 (1999) Added Regular Expressions. Added try/catch.

4 ECMAScript 4 Never released.

5 ECMAScript 5 (2009) Added "strict mode". Added JSON support. Added String.trim().

Added Array.isArray(). Added Array Iteration Methods.

5.1 ECMAScript 5.1 (2011) Editorial changes.

6 ECMAScript 2015 Added let and const. Added default parameter values.

Added Array.find(). Added Array.findIndex().

7 ECMAScript 2016 Added exponential operator (**). Added Array.prototype.includes.

8 ECMAScript 2017 Added string padding. Added new Object properties.

Added Async functions. Added Shared Memory.

9 ECMAScript 2018 Added rest / spread properties. Added Asynchronous iteration.

Added Promise.finally(). Additions to RegExp.

5

DOMDocument Object Model

JavaScript

DOM یک استاندارد کنسرسیوم جهانی وب(W3C )برای دسترسی به اسناد است.

DOMاختار و به صورت پویا، به برنامه ها و اسکریپت ها اجازه دسترسی و تغییر محتوا، س

: این استاندارد دارای سه بخش است. استایل یک سند را می دهد

Core DOM :مدل استاندارد انواع اسناد

XML DOM : مدل استاندارد اسنادXML

HTML DOM: مدل استاندارد اسنادHTML

6

HTML DOM

JavaScript

HTML DOMبرایبرنامه نویسیرابطواستانداردشی ءمدلیکHTML،عناصرکهاست

HTMLتمامرخدادهایودسترسیمتدهایویژگی ها،همچنینواشیاءبه عنوانرا

ایوحذفتغییر،دریافت،برایاستانداردیعبارتیبه.می کندتعریفراHTMLعناصر

.استHTMLعناصرکردناضافه

HTMLبااسکریپتجاوا DOMسندیکعناصرتمامبهمی توانیدHTMLداشتهدسترسی

.دهدتغییرراآن هاوباشد

PropertiesMethods

7

HTML DOM

JavaScript

اید جهت دسترسی به هر یک از عناصر، ابتدا ب.مدسترسی داشته باشیDocumentبه شی ء

صفحه وب را نمایش Documentشی ء .می دهد و مالک سایر اشیاء صفحه است

8

JavaScript

<html>

</html>

<!DOCTYPE html>

<head>Metadata

</head>

<body>

Content

</body>

HTML DOM

9

HTML DOM

JavaScript

:می تواندومی آوردبدستراپویاHTMLایجادامکانشی ءمدلبااسکریپت،جاوا

.کنداضافهجدیدHTMLصفاتوعناصر•

.کندحذفراموجودHTMLصفاتوعناصر•

.دهدتغییرراصفحهدرموجودCSSاستایل هاینیزوHTMLصفاتوعناصرتمام•

.کندایجادصفحهدرHTMLجدیدرویدادهای•

.دهدنشانواکنشصفحهدرموجودHTMLرخدادهایتمامبه•

10

HTML DOM

JavaScript

به HTML، تمام عناصر DOMدر .تعریف می شوندObjectعنوان

ی هنگامی که یک صفحه وب بارگذار

از صفحه DOMمی شود، مرورگر یک

.ایجاد می کند

Object

Methods Properties

11

HTML DOM

JavaScript

:هستند(Methods)متدهاو(Properties)ویژگی هاشی ء،هربرنامه نویسیرابط

Property:تنظیمقابلمقداریک(عنصرHTML)است.

Method:عنصررویبرانجامقابلعملیکHTMLاست.<!DOCTYPE html><html>

<body><p id="myID">Hello </p><script>

document.getElementById("myID").style.fontSize = "22px";document.getElementById("myID").innerHTML += "World!";

</script></body>

</html>

PropertyMethod

Hello World!

Attribute

Object

Attribute

12

HTML DOM

JavaScript

:()createElementمتدازاستفادهباجدیدعنصریکایجاد

document.createElement(nodename)

:مثال<script>

var btn = document.createElement('button');btn.textContent = "Say Hello";btn.onclick = function () {

alert("Hi...");};document.body.appendChild(btn);

</script>

13

JavaScript

:اسکریپتجاواکدهایافزودن

<head>بخش هایدر،HTMLفایلدررا،اسکریپتجاواکدهایمی توان<script>تگازاستفادهبا.1

خشبیکدرراکدهاکلوبپرهیزیمآن هاپرکندگیازاستبهتر.دادقرار(بخشدوهریاو)<body>یا

.استموثرصفحهبارگذاریسرعتدر<body>بخشانتهایدرکدهادادنقرارنماییم؛وارد

<!DOCTYPE html><html>

<body><p id="myID">Hello </p><script>


</script></body>

</html>

است و مانند گذشته نیازی به استفادهHTMLجاوا اسکرییپ، زبان اسکریپتی پیش فرض

.نیست<"script type="text/javascript>برای تعیین آن به صورت typeاز صفت

. در همه ویرایشگرها یکسان نیستTabاز چهار فاصله استفاده نمایید؛ زیرا مقدار Tabبرای ایجاد تورفتگی در کد، به جای

14

JavaScript

:اسکریپتجاواکدهایافزودن

ازاستفادهباودادهقرارjs.پسوندباخارجیفایل(چندیا)یکدرمی توانرااسکریپتجاواکدهای.2

.نموداضافهآن را<script>تگsrcصفت


<body><p id="myID">Hello </p><script src="javaScript1.js"></script><script src="javaScript2.js"></script>

</body></html>


javaScript1.js

:مزایاHTMLجدا بودن کد جاوا اسکریپت از •

و جاوا اسکریپتHTMLخواندن و نگهداری آسان تر •ریپتافزایش سرعت بارگذاری به دلیل کش شدن فایل های جاوا اسک•

15

JavaScript

:دادهنمایشبرایاسکریپتجاواامکانات

1. window.alert() ه ای جاوا اسکریپت هیچ تابع تعبیه شد(Built-in )برای نمایش و چاپ ندارد.

<!DOCTYPE html><html><body>

<p>Paragraph</p><script>

window.alert("5 * 20 = " + 5*20); </script>

</body></html>

Paragraph

16

JavaScript


2. document.write()


<body><p>Paragraph</p><script>

document.write("5 * 20 = " + 5*20); </script>

</body></html>

Paragraph

5 * 20 = 100

17

JavaScript


2. document.write()


<body><p>Paragraph</p>

<button onclick="document.write('5 * 20 = ' + 5*20)">Click</button>

</body></html>

onclickرخداد . افتدهنگام کلیک کردن بر روی شی ء اتفاق می

5 * 20 = 100onclickبعد از کلیک دکمه و فراخوانی رخداد

محتوای قبلی documentدر شی ء writeبه دلیل .می گرددwriteحذف شده و محتوای جدید

18

JavaScript


3. innerHTML


<body><p>Paragraph</p><p id="myPara">P</p> <script>

document.getElementById("myPara").innerHTML = "5 * 20 = " + 5*20;</script>

</body></html>

Paragraph

5 * 20 = 100

برای getElementByIdاز متد براساس HTMLدسترسی به عناصر

idآن ها استفاده می شود.

innerHTMLویژگی

.ندمحتوای عنصر مورد نظر را تعیین می ک

.برای نمایش داده استفاده می گرددinnerHTMLمعموال از ویژگی

19

JavaScript


4. console.log()


<body><p>Paragraph</p><script>

console.log("5 * 20 = " + 5*20); </script>

</body></html>

Paragraph

.دداز این روش معموال برای تست استفاده می گر

20

JavaScript

.می شونداجراکهاستدستورالعمل هاییازمجموعه ایبرنامهیک

.می شودگفتهStatementدستورالعمل هااینبهبرنامه نویسیزبان هایدر

.(.می شودتوصیهبه شدتامانیست،الزم)می شوندجداهمازSemicolonتوسطهاStatementاسکریپتجاوادر

Statementازعبارتنداسکریپتجاواهای:(Values)مقادیر1)(Operators)عملگرها2)(Expressions)عبارات3)(Comments)توضیحات4)(Keywords)کلیدیکلمات5)

Syntax

در یک سطر وجود دارد؟Statementآیا امکان قرار دادن چند

21

JavaScript

Statementاسکریپتجاواهای:Syntax

Values

Literalsمقادیر ثابت

Variablesمقادیر متغیر

:مقادیر عددی10010.5

:مقادیر رشته ای'JavaScript'"JavaScript"

.ها استفاده می شودVariableبرای ذخیره داده از

:نحوه تعریف یک متغیر

var variableName = 100;

کلمه کلیدینام متغیر عملگر

مقدار

22

JavaScript

Syntax

Values

Variables

var pi = 3.14;

var firstName = "fname";

var lastName;

lastName = "lname";

var x = 5, y = 10, s = "String …";

Statementاسکریپتجاواهای:

عددی: نوع متغیر

رشته ای: نوع متغیر

.استundefinedفقط اعالن شده؛ مقدار آن برابر

رشته ای: نوع متغیر: بعد از مقداردهی

Conditional (Ternary) Operator

23

JavaScript


Operators

عملگرهای ریاضی عملگرهای انتساب عملگرهای مقایسه عملگرهای بیتی عملگرهای منطقی

+-*/%++--

=+=-=*=/=%=

=====!=

!==><

>=<=

&|~^

<<>>

&&||!

variableName = (condition) ? value1 : value2;

24

JavaScript


Expressions

.یک عبارت، ترکیبی از مقادیر، متغیرها و عملگرهاست که یک مقدار را ارزشیابی می کند

"JavaScript" + " : " + 100 * 10

Comments

در یک یا چند سطر وجود دارند، به عنوان توضیحات در /*و */در هر سطر و یا بین //کدهایی که بعد از .نظر گرفته شده و اجرا نمی شوند

// var x = 100;var y = 100; // This is …

/* var x = 100;var x = 200; */

"JavaScript : 1000"

25

JavaScript


Keywords

.از کلمات کلیدی برای اعمالی که باید انجام شود، استفاده می گردد

break do instanceof typeof case else new var

catch finally return void continue for switch while

debugger function this with default if throw null

delete in try true false

Reservedabstract export interface static boolean extends long super

byte final native short char float package throws

class goto private volatile const implements protected int

double import public enum transient synchronized

26

JavaScript

:تنیسزیرعباراتبینتفاوتیمی شوند؛گرفتهنادیدهسرهمپشتفاصله هایاسکریپتجاوادر

var varName = "Name";

var varName="Name";

ردکدبلوکیکمی گردد؛استفادهکدبلوک هایازشونداجراباهمبایدکههاییstatementاجرایبرای

.می گیردقرار{و}عالمتدوبین

Syntax

27

JavaScript

.رددمی گاستفادهبرچسب هاوتوابعکلیدی،کلماتمتغیرها،نامبرایشناسه هاازاسکریپتجاوادر

:ازعبارتندکههستندقواعدیدارایوبودهیکتاشناسه ها.شوندشروع$عالمتیاو_حرف،بایدشناسه ها•.می کنداستفادهUnicodeکاراکترمجموعهازاسکریپتجاوا•.استحساسشناسه هاحروفبودنبزرگیاوکوچکبهنسبتاسکریپتجاوا•روشازمعموالاسکریپتجاوادرکلمه ایچندینشناسه هاینام گذاریبرای•

Camel-Caseروشازاستفادهطرفیاز.می گردداستفادهکوچکاولحرفبا.استشدهرزروتفریقبرایخط تیرهزیرا؛نیستامکان پذیر(Hyphens)خط تیره

Identifiers

Camel Case: firstName, lastNameUnderscore: first_name, last_namePascal Case: FirstName, LastNameHyphens: first-name, last-name

Case Sensitive

28

JavaScript

.هستندObjectاز نوع Nullو Arrayدر جاوا اسکریپت،

.استUndefinedنوع متغیری که فقط اعالن شده و هنوز مقداری به آن نسبت داده نشده،

Object ،ی که هنوز تعریف نشدهUndefined است و نمی تواندNullباشد.

Data Types

CompositePrimary

Special

Object

Array

String

Number

Boolean

Undefined

Null

VariablesPropertiesMethods

29

JavaScript

var pi = 3.14; //Number

var firstName = "fname"; //String

var flag = true; //Boolean (true/false)

var colors = ["Blue", "Green", "Red"]; //Array

var car = {manufacturer:"BMW", model:"Z4", doors: 2}; //Object

var lastName = ""; //String

var x; var n = null;

null === undefined // false

null == undefined // true

Data Types

.استObjectآرایه از نوع

Type: undefinedValue: undefined

Type: objectValue: null

.هم نوع و هم مقدار مقایسه می شود

.فقط مقدار مقایسه می شود

30

JavaScript

:typeofعملگر

typeof "Text" // Returns "string"

typeof 3.14 // Returns "number"

typeof false // Returns "boolean"

typeof [1,2,3,4] // Returns "object" (not "array")

typeof {model:"Z4", doors: 2} // Returns "object"

typeof null // Returns "object"

typeof undefined // Returns "undefined"

Data Types

31

JavaScript

Conditional Statements

.می شوداستفادهشرطیعباراتازمختلف،شرایطدرمختلف،اعمالانجامبرای

if (condition) {

code block

}

.اجرا خواهد شد ifبلوک کد بعد از باشد، trueشرطدرصورتی که نتیجه

:مثال

var x = 5, y = 10;if (x==4 || y==10) {

x += 10;}

.خواهد بودن}{ باز و بسته به آکوالد درصورتی که در بلوک کد مربوطه، یک عبارت وجود داشته باشد، نیازی : نکته.از هم جدا می شوندSemicolonها توسط Statementهمان طور که ذکر شد در جاوا اسکریپت

32

JavaScript


if (condition) {

code block

} else {

code block

}

.اجرا خواهد شدelseبلوک کد بعد از باشد، falseو اگر ifبلوک کد بعد از باشد، trueشرطدرصورتی که نتیجه

:مثالvar x = 5, y = 10;if (x==4 || y==10) {

x += 10; y++;} else

x -= 10;

.در یک سطر نوشته شده اندStatementدو

33

JavaScript


if (condition1) {

code block 1

} else if (condition2) {

code block 2

} else {

code block 3

}

.شدنخواهنداجراسومودومبلوک هایوشدهاجرااولکدبلوکفقطباشد،trueاولشرطنتیجهدرصورتی که

شرطبودنtrueدرصورتشد،خواهدبررسیدومشرطونشدهاجرااولکدبلوکاول،شرطبودنfalseدرصورت

.شدخواهداجراسومکدبلوکغیراین صورتدرمی شود؛اجرادومکدبلوک،دوم

34

JavaScript

Conditional Statementsvar x = null;var y;

typeof x // Returns "object"typeof y // Returns "undefined"typeof z // Returns "undefined"

:Objectبررسی وجود

if (typeof myObj !== "undefined" && myObj !== null) { … } آیا ترتیب این دو شرط مهم است؟

.تعریف نشده باشد، خطا رخ خواهد دادObjectبودن بررسی شود، درصورتی که Nullبله؛ اگر ابتدا مخالف شده و نیازی به بخش false، نتیجه کلی (می شودfalseبخش اول شرط )تعریف نشده باشد Objectاما در حالت فوق اگر

.دوم شرط نبوده و بخش دوم اجرا نخواهد شد

دنشمشخصباعثاولبخشاگر،(فوقمثالمانند)استشدهتشکیلبخشدوازکهمنطقیعبارتیکدرنمود؟اجبارینیزرادومشرطشدنبررسیمی توانچگونهشد؛نخواهدبررسیدومبخشگردد،نتیجه

35

JavaScript

.شدتابع، یک بلوک از کد است که برای انجام یک کار خاص طراحی شده است و زمانی که فراخوانی شود، اجرا خواهد

:در جاوا اسکریپت یک تابع به صورت زیر تعریف می گردد

function name(parameter1, parameter2, …) {

code…

}

.مانند متغیرهای محلی هستند.( قرار داد{ و } که بین )پارامترها در بالک تابع

.زمان فراخوانی تابع، مقادیری که به عنوان پارامتر توسط تابع دریافت می شوند، آرگومان نامیده می شوند

مشخص می شود، به عبارتی در بلوک returnتابع می تواند یک مقدار را برگرداند، این مقدار برگشتی با کلمه کلیدی

.آورده شده باشد، تابع متوقف شده و مقدار بازگشتی تعیین شده، بازگشت داده خواهد شدreturnتابع هر جا

FunctionsInvoke

36

JavaScript

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

function rectArea(x, y) {

var area = x * y;return area;

}

:برای اجرا، فقط کافی است تابع در کد جاوا اسکریپت فراخوانی شود

var myRectArea = "Rect area: " + rectArea(10,20); // myRectArea = "Rect area: 200"

اگر پرانتزها .باید در جلوی نام تابع قرار داده شود، حتی اگر تابع فاقد پارامتر باشد)( عملگر فراخوانی تابع است، و )(

:قرارداده نشوند، مقدار انتساب داده شده، برابر متن خود تابع خواهد بود

var myRectArea = rectArea;

// myRectArea = function rectArea(x, y) { var area = x * y; return area; }

Functions

لتبدی: نکته

37

JavaScript

تمام خودروها دارای متدها و ویژگی های مشابه ی هستند، اما مقدار ویژگی های هر خودرو می تواند

.دبا خودرو دیگر متفاوت باشد؛ همچنین متدهای هر خودرو در زمان های متفاوتی انجام می پذیرن

Objects

Object Properties Methods

car car.manufacturer = "BMW" car.start()

car.model = "Z4" car.drive()

car.doors = 2 car.brake()

… …

.استشدهطراحی(Object)شی ءبرمبتنیسادهالگوییکمبنایبراسکریپتجاوا

.می شودمشخصمقداریکو(کلیدیا)نامیکبا(Property)ویژگییکوویژگی هاستازمجموعه ایشی ءیک

.می شودشناخته(Method)متدیکعنوانبهویژگیآناین صورت درباشد،تابعیکمی تواندویژگییکمقدار

.استخودشمتدهایوویژگی هادارایکهاستشی ءیکواقعیدنیایدرخودرونمونه،یکعنوانبه

هستنداعمالیمتدها،رویبرمی توانندکه

Objectشوندانجامها.

38

JavaScript

Objects

Object Properties Methods

car car. manufacturer = "BMW" car.start()

car.model = "Z4" car.drive()

car.doors = 2 car.brake()

… …

var car1 = {"manufacturer":"BMW", "model":"Z4", "doors": 2, "color":"Black"};

var car2 = {"manufacturer":"Honda", "model":"CR-Z", "doors": 2, "color":" White "};

car2.start = function() { ... };

39

JavaScript

Objects

:داردوجودروشدوشی ء،یکویژگی هایبهدسترسیبرای objectName.propertyName

objectName["propertyName"]

:مثالcar.model

car["model"]

:شی ءیکمتدهایبهدسترسیروش

objectName.methodName():مثال

car.drive()

.می شوددادهبرگشت(متد)تابعتعریفشود،آورده)(بدونمتدنامدرصورتی که

40

JavaScript

:را درنظر بگیریدpersonشیء

var person = {"firstName":"FName", "lastName":"LName"};

است؛ می توان برای این شیء یک متد در نظر گرفت که نام lastNameو firstNameاین شیء دارای ویژگی های

:کامل را برگرداند

person.fullName = function() { return this.firstName + " " + this.lastName; };

var pName = person.fullName();

Objects

41

JavaScript

Objects

:Objectروش های ایجاد

var person = {"firstName":"FName", "lastName":"LName"};

var person = new Object();

person.firstName = " FName ";

person.lastName = " LName ";

.روش های فوق برای ایجاد یک شیء مناسب هستند-

Ob

ject

Lit

eral

Keyw

ord

new

42

JavaScript

Objects

:Objectروش های ایجاد

:، برای ایجاد تعدادی شیء از آن نوع، از تابع سازنده استفاده می کنیمObjectدر صورت نیاز به یک نوع

function person(fName, lName){

this.firstName = fName;

this.lastName = lName;

}

var person1 = new person("FName1", "LName1");

var person2 = new person("FName2", "LName2");

Ob

ject

Co

nst

ruct

or

44

JavaScript

Scope

.داریمدسترسیآن هابهکهاستمتغیرهاییازمجموعه ای،(Scope)حوزه

ازمجموعه ایScopeبنابراینمی شوند؛گرفتهنظردرمتغیرعنوانبهنیزتوابعواشیاءاسکریپت،جاوادر

.داریمدسترسیآن هابهکهاستتوابعیواشیاءمتغیرها،

بلکهنیست(Block-level)بالکسطحدرScopeاسکریپتجاوادرنویسی،برنامهزبان هایسایربرخالف

بالکیکدرکهمتغیریمی کند،تغییرتوابعدرونScopeیعنیاست؛(Function-Level)تابعسطحدر

.استدسترسیقابل،(تابعسطحدر)بالکآنازدرخارجمی شودتعریف(}و{بین)

:هستندتعریفقابلصورتدوبهمتغیرهااسکریپتجاوادر

(LOCAL)محلیمتغیرهای•

(GLOBAL)سراسریمتغیرهای•

45

JavaScript

Scope

آنمحلیمتغیرهایمتغیرها،اینمی شوند؛تعریفتوابعدرونکههستندمتغیرهایی:(LOCAL)محلیمتغیرهای

Local)هستنددسترسدرشده اندتعریفکهتابعیهماندرفقطومی شوندمحسوبتابع Scope).

وند،می شتعریفجداگانه ایتوابعدرچونگیرند؛قراراستفادهموردمختلفتوابعدرمی توانندهمناممتغیرهای

Scopeداشتنخواهندارتباطیهمبادرنتیجهوبودنخواهدیکسانآن هاهای.

.می شوندحذفانتها،درتابع،عملیاتشدنکاملزماندروشدهایجادمربوطهتابعشروعهنگامدرمحلیمتغیرهای

:مثال

var myColor = "Black ";function showColor() {

var myColor = "White ";document.write(myColor);

}

showColor();document.write(myColor);

White Black

46

JavaScript

Scope

وابعتواسکریپت هاتماممی شوند؛تعریفتوابعازخارجدرکههستندمتغیرهایی:(GLOBAL)سراسریمتغیرهای

Global)دارندرامتغیرهااینبهدسترسیامکانوب،صفحه یآندرموجود Scope).

.می شوندحذفصفحه،شدنبستهزماندروشدهایجادمتغیرتعریفهنگامدرسراسریمتغیرهای

درسراسریمتغیریکعنوانبهخودکار،صورتبهمتغیرآندهیم،نسبتمقداریآنبهمتغیریکتعریفبدوناگر

.می شودگرفتهنظر

:مثالshowColor();document.write(myColor);

function showColor() {myColor = "White";

}

White

:HTMLدرScope،شی ءسراسریwindowاست؛

سراسریمتغیرهایتمامیعبارتیبه.استwindowشی ءبهمتعلق

Global Scopewindow.myColor

47

JavaScript

Scope

JavaScript Hoisting:باالیبهمتغیرهاتعریفپیش فرض،به صورتScopeمی یابدانتقالجاری.

همانطورتهالب)نمودتعریفآن راسپسومقداردهیآن رامتغیر،یکتعریفازقبلمی تواناسکریپتجاوادربنابراین

.(.می شودگرفتهنظردرسراسریمتغیریکعنوانبهمتغیرآننشود،تعریفمتغیراگرشدذکرکه

.شوندتعریفجاریScopeابتدایدرمتغیرهاتمامتامی شودتوصیهاحتمالیخطاهایازجلوگیریجهت

;()showColor:مثالdocument.write(myColor);


}

White

showColor();document.write(myColor);


var myColor;}

.دهیدشرحکاملبه صورتنمی شود؟دادهنشدهتعریفمتغیرهایازاستفادهامکانحالتیچهدر

رخخطانشده،تعریفچونتعریفصورتی کهدر.می دهد

نشدهمقداردهیوباشدشده.برمی گرداندundefinedباشد

48

JavaScript

Events

کدودادهنشانواکنشرخدادهااینبهمی توانداسکریپتجاواومی افتنداتفاقHTMLعناصررویبررخدادها

ستندهرخدادهاییآن هامانندوورودیفیلدیکمحتوایتغییریاوعنصریکرویبرکلیک.نمایداجرارامربوطه

.شوندادارهاسکریپتجاواتوسطمی توانندکه

event)رخدادکنندهادارهصفتیککردناضافهبرای،HTMLدر handler attribute)،صفت هاسایرمانند:

<elementName eventName='JavaScript Code'>

<elementName eventName="JavaScript Code">

رعنصرویبرکلیکهنگاماستمشخصنامشازکههمانطورکهاست؛شدهاستفادهonclickرخدادمثالایندر

:می شوددادهنمایشپنجرهیکدرنظرموردعبارتدکمهرویبرکلیکبااین جادر.می شودفراخوانیجاری

<button onclick="alert('This is a test.')">Show Alert</button>

.می کنندفراخوانیراتابعیکرخدادها،معموالاست،سطریچندرخدادهااغلبکدکهآن جاییاز

49

JavaScript

Events

:اسکریپتجاوارخدادهایازبرخی

Event شرح

onclick HTMLکلیک بر روی عنصر هنگام

ondblclick HTMLدابل کلیک بر روی عنصر هنگام

onchange HTMLهنگام تغییر عنصر

onload اتمام بارگذاری صفحههنگام

onmouseover HTMLحرکت نشانگر موس بر روی عنصر هنگام

onmouseout HTMLرفتن نشانگر موس از روی عنصر هنگام

onkeydown فشار دادن یک کلید از صفحه کلیدهنگام

... ...

50

JavaScript

Events

:است قرار می گیردcurrentDateآن برابر idدر بخش پاراگرافی که ()Dateبا کلیک بر روی دکمه، مقدار برگشتی از تابع


<body><button onclick="document.getElementById('currentDate').innerHTML=Date()">Time</button><p id="currentDate"></p>

</body></html>

:مثال

51

JavaScript

Events



<script>function showDate() { document.getElementById("currentDate").innerHTML = Date(); }

</script><body>

<button onclick="showDate()">Time</button><p id="currentDate"></p>

</body></html>

:مثال


function showDate() {document.getElementById("currentDate").innerHTML = Date();

}

52

JavaScript

Strings.می گیرندقراردوتایینقل قولیاوتکینقل قولعالمتدوبینرشته هااسکریپت،جاوادر

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

var s1 = "It's a book";

var s2 = "… is 'JavaScript'";

var s3 = '… is "JavaScript"';

:شودتعریفزیرصورتبهرشتهیکاگرحال

var s4 = "… is "JavaScript"";

…"بخشفقط is .شدخواهدذخیرهs4متغیردر"

:نموداستفادهویژهکاراکترهایاز\کاراکتراستفادهبامی توانمشکلاینحلبرای

var s4 = "… is \"JavaScript\"";

نمایش

escape character

53

JavaScript

Strings

Code Outputs

\' single quote

\" double quote

\\ backslash

\n new line

\r carriage return

\t tab

\b backspace

\f form feed

55

JavaScript

Strings

This"مانند)Primitiveمقادیر is a test.")چونObjectداراینمی توانندنتیجهدرنیستندPropertyو

Methodاجرایزماندراسکریپتجاوااما.باشندPropertyیاوهاMethod،مقادیرباهاPrimitiveمانند

Objectچنددارایرشته هاباکاربرایاسکریپتجاوا.می کندرفتارهاPropertyزیادیتعدادوMethod،است

:کردخواهیماشارهآن هاازتعدادیبهادامهدرکه

• length Property:.می گرداندبررارشتهیکطولویژگیاین

:مثال

var str = "JAVASCRIPT";var strLength = str.length;

.خواهد بود10یعنی "JAVASCRIPT"، طول رشته strLengthمقدار ذخیره شده در متغیر

56

JavaScript

String Methods

• string.indexOf(searchvalue,start)

:یافت شده در یک رشته را برمی گرداند( مورد نظر)ایندکس اولین مکان متن

var str = "This is a test, test ...";

var p = str.indexOf("test"); // p: 10

var p = str.indexOf("test", 12); // p: 16

.برگشت داده می شود1-مقدار ایندکس از صفر شروع شده و در صورت عدم وجود متن مورد نظر، مقدار

.تعیین می کند که به صورت پیش فرض صفر است( از اول رشته)، نقطه شروع جستجو راstartمقدار

Cas

e Se

nsi

tive

0 105 16 23

57

JavaScript

String Methods

• string.lastIndexOf(searchvalue,start)

:یافت شده در یک رشته را برمی گرداند( مورد نظر)ایندکس آخرین مکان متن


var p = str.lastIndexOf("test"); // p: 16

var p = str.lastIndexOf("test", 15); // p: 10


امات؛اسرشتهطولبرابرپیش فرضبه صورتکهمی کندتعیین(رشتهانتهایاز)راجستجوشروعنقطه،startمقدار

.می شودمحاسبه(صفراز)رشتهابتدایازایندکسمقدارشد،ذکرکههمان طور

Cas

e Se

nsi

tive

58

JavaScript

String Methods

• string.search(searchvalue)

:یافت شده در یک رشته را برمی گرداند( مورد نظر)ایندکس اولین مکان متن


var p = str.search("test"); // p: 10


.دهیدشرحمثالچندذکربارا()indexOfو()searchمتدهایتفاوت

59

JavaScript

String Methods

• string.slice(start,end)

.، بخشی از یک رشته را برمی گرداندendو startبا تعیین دو ایندکس


var s = str.slice(8,14); // s: "a test"

var s = str.slice(8); // s: "a test, test …"

:اگر مقدار پارامتر منفی باشد، ایندکس از انتهای رشته درنظر گرفته می شود

var s = str.slice(-14,-9); // s: "test,"

var s = str.slice(-14); // s: "test, test …"

0 8 14 23

هماز ایندکس هشتم تا قبل از ایندکس چهارد

از ایندکس هشتم به بعد


09-13-23-

60

JavaScript

String Methods

• string.substring(start,end)

.با تعیین دو ایندکس شروع و پایان، بخشی از یک رشته را برمی گرداند

var str = "This is a test, test …";

var s = str.substring(8,14); // s: "a test"

var s = str.substring(8); // s: "a test, test …"

.نمی توانند منفی باشندendو startدر این متد ایندکس منفی قابل قبول نیست؛ بنابراین

0 8 14 23

هماز ایندکس هشتم تا قبل از ایندکس چهارد


61

JavaScript

String Methods

• string.substr(start,length)

.، بخشی از یک رشته را برمی گرداند(length)و طول رشته ( start)با تعیین ایندکس شروع


var s = str.substr(8,6); // s: "a test"

var s = str.substr(8); // s: "a test, test …"

:همیشه مثبت استlengthمنفی باشد، ایندکس از انتهای رشته درنظر گرفته می شود، اما startاگر مقدار

var s = str.substr(-16,6); // s: "a test,"

var s = str.substr(-16); // s: "a test, test …"

0 8 14 23

از ایندکس هشتم به طول شش کاراکتر


62

JavaScript

String Methods

• string.replace(searchvalue,newvalue)

جایگزین کرده و ( newvalue)را در درون رشته ی اصلی با یک رشته جدید ( searchvalue)رشته ی موردنظر

.مقدار حاصل را برمی گرداند؛ اما رشته ی اصلی را تغییر نمی دهد


var s = str.replace("test","Test1"); // s: "This is a Test1, test …"

اده از به صورت پیش فرض این متد فقط بر روی اولین رشته یافت شده اعمال می شود، اما امکان استف

Regular Expression به عنوان مقدار جستجو(searchvalue )وجود دارد :

var s = str.replace(/test/g,"Test1"); // s: "This is a Test1, Test1 …"

Regular Expression

63

JavaScript

String Methods

• string.toUpperCase()

.هدتمام حروف رشته ی مورد نظر را به حروف بزرگ تبدیل کرده و بر می گرداند؛ اما رشته ی اصلی را تغییر نمی د


var s = str.toUpperCase(); // s: "THIS IS A TEST, TEST …"

• string.toLowerCase()

. دهدتمام حروف رشته ی مورد نظر را به حروف کوچک تبدیل کرده و بر می گرداند؛ اما رشته ی اصلی را تغییر نمی

var str = "This is a test, TEST …";

var s = str.toLowerCase(); // s: "this is a test, test …"

64

JavaScript

String Methods

:مثال

var str = "This is a Blue, … not green … blue";

var s = str.replace(/blue|green/gi, function myFunc(x){return x.toUpperCase();});

// s = "This is a BLUE, … not GREEN … BLUE"

Regularاز،replaceمتداولآرگومانبه عنوان Expressionعبارتکرده ایم،استفاده/blue|green/gi

.می کندانتخابآن هاحروفبودنبزرگیاکوچکگرفتندرنظربدونراgreenوblueکلماتتمام

:می گرداندبروکردهتبدیلبزرگحروفبهرادریافتیمقدارتابعاینکهنوشته ایمتابعیکدوم،آرگومانبه عنوانfunction myFunc(x){

return x.toUpperCase();}

66

JavaScript

Switch Statement

:استفاده می شودswitchبرای انتخاب و اجرای یکی از بلوک های کد، از

switch(expression) {

case n:

code block

break;

case n:

code block

break;

default:

default code block

}

ها مقایسه caseیکبار به ترتیب با مقدار هر یک از switchعبارت .شده و درصورت برابر بودن با هر کدام، آن بلوک اجرا می شود

ازیکهیچباswitchعبارتصورتی کهدرcaseکدبلوکنبودبرابرهاdefaultمی شوداجرا.

break باعث خارج شدن از بلوکswitch می شود؛ در صورتانتخاب شده، اجرای کد تا caseدر انتهای breakعدم وجود

.ادامه پیدا می کندbreakو یا رسیدن به switchانتهای

67

JavaScript

Switch Statementswitch (new Date().getDay()) {

case 0:day = "Sunday";break;

case 1:day = "Monday";break;

case 2:day = "Tuesday";break;

case 3:day = "Wednesday";break;

case 4:day = "Thursday";break;

case 5:day = "Friday";break;

case 6:day = "Saturday";

}

getDay() را برمی گرداند، 6تا 0عددی بین. که در این جا معادل روز جاری است

کلمه،2معادلکدبلوکدروباشدسه شنبهامروزاگرbreakبهمقداریچهباشد،نداشتهوجودdayاختصاص

شد؟خواهددادهday = "Wednesday"

68

JavaScript

Switch Statementswitch (new Date().getDay()) {

case 0:

case 1:

case 2:

default:

weekend = false;

break;

case 6:

weekend = true;

break;

case 4:

case 5:

weekend = false;

}

.بیایدبلوکآخردرحتماdefaultکهنداردلزومی

69

JavaScript

Loops.با استفاده از حلقه، می توان یک بخش از کد را چندین بار تکرار کرد

:در جاوا اسکریپت چندین نوع حلقه وجود دارد که متناسب با نیاز می توان از آن ها استفاده نمود

:forحلقه . 1

for (statement 1; statement 2; statement 3) {

code block

}.قبل از حلقه اجرا می شود؛ معموال برای مقداردهی اولیه مقادیر حلقه بکار می رودعبارت اول •

.باشد، حلقه تکرار می شودtrueحلقه است؛ تا زمانی که نتیجه این شرط ( تکرار)شرط اجرای عبارت دوم •

.بعد از هر بار اجرای حلقه، اجرا می شود؛ معموال برای تغییر مقادیر شرط بکار می رودعبارت سوم •var x = 0;

for (var i = 0, j = 10; i < 10; i++) {x += 2;

}

70

JavaScript

Loops

:forحلقه . 1

for (statement 1; statement 2; statement 3) {

code block

}

.(.با ویرگول از هم جدا می شوند)می توان چندین متغیر را نیز مقداردهی کرد عبارت اول در•

حلقهازخروجبرایbreakدستورازکدبهتوجهباومناسبجایدرحلقهدرونبایدباشد،خالیدومعبارتاگر•

.شدخواهدمروگرcrashباعثونمی پذیردپایانهیچ گاهحلقهغیراین صورتدرنمود،استفاده

.خالی باشد، درصورت نیاز می توان مقادیر شرط را درون حلقه تغییر دادعبارت سوم اگر •

.این عبارات، هر سه اختیاری هستند

:آیا حلقه زیر صحیح است؟ توضیح دهید

for(;;){ code block }

71

JavaScript

Loops

:for/inحلقه . 2

for (var in object) {

code block

}.در این نوع حلقه، بلوک کد، برای هر یک از ویژگی های شی ء یکبار تکرار می شود

. ، مقدار متغیر تعیین شده، برابر با نام ویژگی های شی ء خواهد بود(به ترتیب)در هر تکرار

var car = {manufacturer:"BMW", model:"Z4", color:"Black"};

var text1 = "";var text2 = "";for (var c in car) {

text1 += c + "-";text2 += car[c] + "-";

}

text1 = "manufacturer-model-color-"text2 = "BMW-Z4-Black-"

c in car

• manufacturer

• model

• color

72

JavaScript

Loops

:whileحلقه . 3

while (condition) {

code block

}.باشد تکرار می شودtrueشرطدر این نوع حلقه، بلوک کد، تا زمانی که

پذیرد، در می توان مقادیری که بر روی تاثیر می گذارند را درون حلقه تغییر داد، تا بعد از چند تکرار مورد نیاز، حلقه پایان ب

.مروگر خواهد شدcrashغیراین صورت حلقه هیچ گاه پایان نمی پذیرد و باعث

var x = 1, y = 10;while (x < 5) {

y *= x ;x++;

}

x = 5y = 240 .پیاده سازی کنیدforرا با whileحلقه

73

JavaScript

Loops

:do/whileحلقه . 4

do {

code block

} while (condition)

باشد تکرار می شود؛ اما با تفاوت که چون شرط بعد از trueشرط، بلوک کد، تا زمانی که whileدر این نوع حلقه مانند حقله

.باشدfalseبلوک کد بررسی می شود، بلوک کد حداقل یکبار اجرا خواهد شد؛ حتی اگر شرط

var x = 1, y = 10;do {

y *= x ;x++;

} while (x < 1)

x = 2y = 10

74

JavaScript

Loops

break:

.در حلقه، باعث خروج از بلوک کد حلقه می شودbreakاستفاده از عبارت

.( می شودswitchنیز باعث خروج از بلوک کد switchدر breakعبارت)

continue :

کدبلوکاجرایقطعباعثاست،همراهشرطیکبامعموالکهحلقه،درcontinueعبارتازاستفاده

. رودمیبعدیتکراربهباشدبرقرارشرطصورتی کهدربلکهنشده،خارجحلقهازbreakماننداماشده،

Label :break labelName;continue labelName;

.دهیدشرحمثالذکرباراcontinueوbreakعباراتدرlableکاربردواستفادهنحوه

75

JavaScript

مواردیاواطالعاتاشتباهورودبرنامه،کددرایرادبه دلیلاستممکناسکریپت،جاواکداجرایهنگام

ازنشدهیپیش بینخطاهایاینوقوعازجلوگیریبرای.دهدرخمختلفیخطاهایدیگر،نشدهپیش بینی

:می شوداستفادهزیرساختار

try {try statements

}catch(exceptionVar) {

catch statements}finally {

finally statements}

Exception Handling

.قرار می گیردtryکد، جهت بررسی وجود خطا، در بالک

.اجرا خواهد شدfinallyدر هر دو صورت بروز خطا و عدم بروز خطا، بالک کد

.جهت رسیدگی به خطا اجرا خواهد شدcatchدر صورت بروز خطا، بالک کد

exceptionVarخطای اتفاق افتاده را مشخص می کند.

76

JavaScript

:مثال

Exception Handling


<p id="msgExp"></p><p id="msgFinally"></p>

<script>try {

alert1("Hello!");}catch(exp) {

document.getElementById("msgExp").innerHTML = exp.message;}finally {

document.getElementById("msgFinally").innerHTML = "Finally ...";}

</script>

</body></html>

alert1 is not defined

Finally ...

alert1 is not defined

77

JavaScript

:مثال

Exception Handling

positive


<p id="msgExp"></p>

<script>var x = "1";

try {if(x == "") throw "empty";if(isNaN(x)) throw "not a number";if(Number(x) > 0) throw "positive";if(Number(x) > 0) throw "p o s i t i v e";

}catch(exp) {

document.getElementById("msgExp").innerHTML = exp;}

</script>

</body></html>

ا، در صورت برقراری هر شرط، مقدار پیغام خطخواهد throwبرابر مقدار تعیین شده توسط

.شد و شروط دیگر بررسی نخواهند شد

78

JavaScript

Objects

.هستندObjectهمه،Primitiveمقادیربجزمتغیرها،تماماسکریپتجاوادر

.شوندتعریفObjectبه صورتمی توانندنیزرشته هاواعداد،Booleanالبته

Primitive ValuesStrings

Numberstruefalsenull

undefined

Objectحاویمی توانندامامی شوند،محسوبمتغیرنیزها

زوج هایبه صورتمتغیرهااینکهباشند؛زیادیمتغیرهای

name)مقدار/نام : value)همازویرگولباوشدهنوشته

.می شوندجدا

ObjectsDates Maths

Regular expressions Arrays

FunctionsObjects

BooleansNumbers

Strings

newبا کلمه کلیدی

Property

79

JavaScript

ObjectsJSON (JavaScript Object Notation)

JSONسبکدادهتبادلفرمتیک(lightweight)کردنتفسیروتولیدوانسانبرایآننوشتنوخواندنکهاست

.می کندپیرویقوانینیازاما،استزبانازمستقلوبودهمتنیصورته بJSON.استآسانماشین هابرایآن

JSONمقدار/نامزوج هایازنامنظممجموعه ییک(name/value)باوشروعباز،آکوالدبامجموعهایناست؛

هماز(ویرگول),بامقدار/نامزوج هایومی گیردقرار(نقطهدو):یکنامهرانتهایدر.می شودتمامبسته،آکوالد

.می شوندجدا

80

JavaScript

ObjectsJSON (JavaScript Object Notation)

:سادهJSONیک

var myJSON1 = {"firstName":"fname", "lastName":"lname"};

:هاJSONازآرایه ای

var myJSON2 = [{"firstName":"fname1","lastName":"lname1"},{"firstName":"fname2","lastName":"lname2"}];

:JSONیکحاویرشته،یک

var myJSON3Text = '{ "users" : ['{ "firstName":"fname1" , "lastName":"lname1" },' +

'{ "firstName":"fname2" , "lastName":"lname2" }]}';

:JSONبهmyJSON3Textرشته یتبدیلبرای

var myJSON3 = JSON.parse(myJSON3Text);

propertyproperty

81

JavaScript

نکته ها

.نماییداستفادهلزومصورتدرفقطوکمترسراسریتوابعواشیاءمتغیرها،از•

.نماییدتعریف(varکلیدیکلمهبا)محلیبه صورتتوابعدررامتغیرهاتمام•

JavaScript:پیش فرض)دهیدقرارتابعیااسکریپتهرابتدایدرراتعاریفتمام• hoisting).

ممکناجرا،سرعتکردنکندعالوهزیرانکنید؛تعریفObjectصورتبهراهاbooleanواعدادرشته ها،•

.باشندداشتهنیزجانبیتاثیرات

:نتیجهدرمی شوند،ذخیرهبیتی64اعشاریصورتبهاعدادتماماسکریپتجاوادر•

var a = 0.9;var b = 0.7;

var c = a - b; // c = 0.20000000000000007var c = (a * 10 - b * 10) / 10; // c = 0.2 راه حل

Documents

Web Programming Workshopmontajab.com/kishuast/lib/wpw/WebProgrammingWorkshop_02.pdf · 5.1 ECMAScript 5.1 (2011) Editorial changes. 6 ECMAScript 2015 Added let and const. Added default