web programming workshopmontajab.com/kishuast/lib/wpw/webprogrammingworkshop_02.pdf · 5.1...
TRANSCRIPT
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>
document.getElementById("myID").style.fontSize = "22px";document.getElementById("myID").innerHTML += "World!";
</script></body>
</html>
است و مانند گذشته نیازی به استفادهHTMLجاوا اسکرییپ، زبان اسکریپتی پیش فرض
.نیست<"script type="text/javascript>برای تعیین آن به صورت typeاز صفت
. در همه ویرایشگرها یکسان نیستTabاز چهار فاصله استفاده نمایید؛ زیرا مقدار Tabبرای ایجاد تورفتگی در کد، به جای
14
JavaScript
:اسکریپتجاواکدهایافزودن
ازاستفادهباودادهقرارjs.پسوندباخارجیفایل(چندیا)یکدرمی توانرااسکریپتجاواکدهای.2
.نموداضافهآن را<script>تگsrcصفت
<!DOCTYPE html><html>
<body><p id="myID">Hello </p><script src="javaScript1.js"></script><script src="javaScript2.js"></script>
</body></html>
document.getElementById("myID").style.fontSize = "22px";document.getElementById("myID").innerHTML += "World!";
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()
<!DOCTYPE html><html>
<body><p>Paragraph</p><script>
document.write("5 * 20 = " + 5*20); </script>
</body></html>
Paragraph
5 * 20 = 100
17
JavaScript
:دادهنمایشبرایاسکریپتجاواامکانات
2. document.write()
<!DOCTYPE html><html>
<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
<!DOCTYPE html><html>
<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()
<!DOCTYPE html><html>
<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
Statementاسکریپتجاواهای:Syntax
Operators
عملگرهای ریاضی عملگرهای انتساب عملگرهای مقایسه عملگرهای بیتی عملگرهای منطقی
+-*/%++--
=+=-=*=/=%=
=====!=
!==><
>=<=
&|~^
<<>>
&&||!
variableName = (condition) ? value1 : value2;
24
JavaScript
Statementاسکریپتجاواهای:Syntax
Expressions
.یک عبارت، ترکیبی از مقادیر، متغیرها و عملگرهاست که یک مقدار را ارزشیابی می کند
"JavaScript" + " : " + 100 * 10
Comments
در یک یا چند سطر وجود دارند، به عنوان توضیحات در /*و */در هر سطر و یا بین //کدهایی که بعد از .نظر گرفته شده و اجرا نمی شوند
// var x = 100;var y = 100; // This is …
/* var x = 100;var x = 200; */
"JavaScript : 1000"
25
JavaScript
Statementاسکریپتجاواهای:Syntax
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
Conditional Statements
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
Conditional Statements
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);
function showColor() {myColor = "White";
}
White
showColor();document.write(myColor);
function showColor() {myColor = "White";
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با کلیک بر روی دکمه، مقدار برگشتی از تابع
<!DOCTYPE html><html>
<body><button onclick="document.getElementById('currentDate').innerHTML=Date()">Time</button><p id="currentDate"></p>
</body></html>
:مثال
51
JavaScript
Events
:است قرار می گیردcurrentDateآن برابر idدر بخش پاراگرافی که ()Dateبا کلیک بر روی دکمه، مقدار برگشتی از تابع
<!DOCTYPE html><html>
<script>function showDate() { document.getElementById("currentDate").innerHTML = Date(); }
</script><body>
<button onclick="showDate()">Time</button><p id="currentDate"></p>
</body></html>
:مثال
:است قرار می گیردcurrentDateآن برابر idدر بخش پاراگرافی که ()Dateبا کلیک بر روی دکمه، مقدار برگشتی از تابع
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 str = "This is a test, test ...";
var p = str.lastIndexOf("test"); // p: 16
var p = str.lastIndexOf("test", 15); // p: 10
.برگشت داده می شود1-مقدار ایندکس از صفر شروع شده و در صورت عدم وجود متن مورد نظر، مقدار
امات؛اسرشتهطولبرابرپیش فرضبه صورتکهمی کندتعیین(رشتهانتهایاز)راجستجوشروعنقطه،startمقدار
.می شودمحاسبه(صفراز)رشتهابتدایازایندکسمقدارشد،ذکرکههمان طور
Cas
e Se
nsi
tive
58
JavaScript
String Methods
• string.search(searchvalue)
:یافت شده در یک رشته را برمی گرداند( مورد نظر)ایندکس اولین مکان متن
var str = "This is a test, test ...";
var p = str.search("test"); // p: 10
.برگشت داده می شود1-مقدار ایندکس از صفر شروع شده و در صورت عدم وجود متن مورد نظر، مقدار
.دهیدشرحمثالچندذکربارا()indexOfو()searchمتدهایتفاوت
59
JavaScript
String Methods
• string.slice(start,end)
.، بخشی از یک رشته را برمی گرداندendو startبا تعیین دو ایندکس
var str = "This is a test, test ...";
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
هماز ایندکس هشتم تا قبل از ایندکس چهارد
از ایندکس هشتم به بعد
var str = "This is a test, test ...";
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 str = "This is a test, test …";
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 str = "This is a test, test …";
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 str = "This is a test, test …";
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
<!DOCTYPE html><html><body>
<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
<!DOCTYPE html><html><body>
<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 راه حل