JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh
description
Transcript of JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh
![Page 1: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/1.jpg)
JavaScript TrainingBy Effie Nadiv
Edited by permission from author by Amir Kirsh
Based on work of Douglas Crockford
![Page 2: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/2.jpg)
Overview
HistoryLanguageAdvanced FeaturesPlatformsStandardsStyle
![Page 3: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/3.jpg)
Question 1
alert("3" == 3);alert(3 === "3");alert(+"3" == "3");alert(3 === +"3");
![Page 4: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/4.jpg)
Question 2var a = 1;
var o = { a: 2, test: function () { var a = 3; return this.a; }};
alert(o.test());
alert((o.test = o.test)());
![Page 5: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/5.jpg)
Question 3var o = { x: 6, valueOf: function(){ return this.x + 2; }, toString: function(){ return this.x.toString(); }};
alert(o);
alert(o < "7");
![Page 6: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/6.jpg)
Question 4
alert(a = (2, 9 - 3) * 3);
![Page 7: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/7.jpg)
Question 5var x = 5, o = { x: 10, test: function(){ var x = 8; setTimeout(function(){ alert(this.x); }, 10); } };
o.test();
![Page 8: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/8.jpg)
Question 6
var n1 = "11", n2 = "3";
alert(n1 < n2);alert(+n1 < n2);alert(+n1 + n2);
![Page 9: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/9.jpg)
Question 7
function foo(a, b) { b = 10; a = b; alert(arguments[0]);}foo();
![Page 10: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/10.jpg)
Question 8var b = 3, c = (3, function (a) { return a + 10 }, function () { return arguments[0]
});
a = b + c({x: 5}).xalert(a)
![Page 11: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/11.jpg)
Question 9
alert(123..toString());
![Page 12: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/12.jpg)
Question 10
function foo(){ return 1;}var foo;alert(typeof foo);
![Page 13: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/13.jpg)
The World's Most Misunderstood Programming
Language
![Page 14: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/14.jpg)
Sources of Misunderstanding
The NameMispositioningDesign ErrorsBad ImplementationsThe BrowserBad BooksSubstandard StandardJavaScript is a Functional Language
![Page 15: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/15.jpg)
History
1995Netscape
1996JScript at Microsoft
1998ECMAScript
Read more: http://en.wikipedia.org/wiki/JavaScript
![Page 16: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/16.jpg)
Not a Web Toy
It is a real language
Small, but sophisticated
It is not a subset of Java
![Page 17: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/17.jpg)
Key Ideas
Load and go delivery: Interpreted, Dynamic LinkageLoose typingObjects as general containers
Prototypal inheritanceLambda
![Page 18: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/18.jpg)
Values
NumbersStringsBooleansObjectsnullundefined
![Page 19: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/19.jpg)
Numbers
Only one number typeNo integers
64-bit floating point
IEEE-754 (aka “Double”)
Does not map well to common understanding of arithmetic:
0.1 + 0.2 = 0.30000000000000004
![Page 20: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/20.jpg)
NaN
Special number: Not a NumberResult of undefined or erroneous operationsToxic: any arithmetic operation with NaN as an
input will have NaN as a resultNaN is not equal to anything, including NaN
![Page 21: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/21.jpg)
Number function
Number(value)
Converts the value into a number.
It produces NaN if it has a problem.
Similar to + prefix operator.
![Page 22: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/22.jpg)
parseInt functionparseInt(value, 10)Converts the value into a number.It stops at the first non-digit character.
If the radix parameter is omitted, JavaScript assumes the following:
string begins with radix is
“ 0x” 16 (hexadecimal)
“ 0 ”8( octal )
any other value 10 (decimal)
![Page 23: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/23.jpg)
parseInt function
parseInt("08") === 0parseInt("08", 10) === 8
Better add the radix parameter…
![Page 24: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/24.jpg)
MathMath object is modeled on Java's Math class.
It contains abs absolute value
floor integer
log logarithm
max maximum
pow raise to a power
random random number
round nearest integer
sin sine
sqrt square root
![Page 25: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/25.jpg)
StringsSequence of 0 or more 16-bit characters
UCS-2, not quite UTF-16No awareness of surrogate pairs
No separate character typeCharacters are represented as strings with a length of 1
Strings are immutableSimilar strings are equal ( == )String literals can use single or double quotes
![Page 26: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/26.jpg)
String length
string.length
The length property determines the number of 16-bit characters in a string.
![Page 27: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/27.jpg)
String function
String(value)
Converts value to a string
![Page 28: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/28.jpg)
String MethodscharAtconcatindexOflastIndexOfmatchreplacesearchslice
splitsubstringtoLowerCasetoUpperCase
![Page 29: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/29.jpg)
Booleans
truefalse
![Page 30: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/30.jpg)
Boolean function
Boolean(value)
returns true if value is truthyreturns false if value is falsySimilar to !! prefix operator
![Page 31: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/31.jpg)
null
A value that isn't anything
![Page 32: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/32.jpg)
undefined
A value that isn't even that
The default value for variables and parameters
The value of missing members in objects
![Page 33: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/33.jpg)
Falsy values
False, null, undefined,"" (empty string), 0,NaN
All other values (including all objects) are truthy.
"0" "false"
![Page 34: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/34.jpg)
Everything Else Is Objects
![Page 35: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/35.jpg)
Dynamic ObjectsUnification of Object and Hashtable
new Object() produces an empty container of name/value pairs
A name can be any string, a value can be any value except undefined
members can be accessed with dot notation or subscript notation
No hash nature is visible (no hash codes or rehash methods)
![Page 36: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/36.jpg)
Loosely Typed
Any of these types can be stored in an variable, or passed as a parameter to any function
The language is not "untyped"
![Page 37: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/37.jpg)
IdentifiersStarts with a letter or _ or $Followed by zero or more letters, digits, _ or $
By convention, all variables, parameters, members, and function names start with lower case
Except for constructors which start with upper case
_ and $ should be reserved for frameworks and libraries
![Page 38: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/38.jpg)
Reserved Wordsabstractboolean break bytecase catch char class const continuedebugger default delete do doubleelse enum export extendsfalse final finally float for functiongotoif implements import in instanceof int interfacelongnative new nullpackage private protected publicreturnshort static super switch synchronizedthis throw throws transient true try typeofvar volatile voidwhile with
![Page 39: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/39.jpg)
Comments
// slashslash line comment
/* slashstar block comment */
![Page 40: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/40.jpg)
OperatorsArithmetic
+ - * / %Comparison
== != < > <= >=Logical
&& || !Bitwise
& | ^ >> >>> << Ternary
?:
![Page 41: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/41.jpg)
+
Addition and concatenationIf both operands are numbers,
then add them
else convert them both to stringsconcatenate them
'$' + 3 + 4 = '$34'
![Page 42: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/42.jpg)
+
Unary operator can convert strings to numbers+"42" = 42
AlsoNumber("42") = 42
AlsoparseInt("42", 10) = 42
+"3" + (+"4") = 7
![Page 43: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/43.jpg)
/
Division of two integers can produce a non-integer result
10 / 3 = 3.3333333333333335
![Page 44: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/44.jpg)
== !=
Equal and not equal
These operators can do type coercion
It is better to use === and !==, which do not do type coercion.
![Page 45: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/45.jpg)
&&
The guard operator, aka logical andIf first operand is truthy then result is second operand, else result is first
operand
It can be used to avoid null referencesif (a) {
return a.member;} else {
return a;}
can be written asreturn a && a.member;
![Page 46: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/46.jpg)
||
The default operator, aka logical orIf first operand is truthy
then result is first operandelse result is second operand
It can be used to fill in default values.var last = input || nr_items;
(If input is truthy, then last is input, otherwise set last to nr_items.)
![Page 47: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/47.jpg)
!
Prefix logical not operator.If the operand is truthy, the result is false.
Otherwise, the result is true.!! produces booleans.
![Page 48: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/48.jpg)
Bitwise
& | ^ >> >>> <<
The bitwise operators convert the operand to a 32-bit signed integer, and turn the result back into 64-bit floating point.
![Page 49: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/49.jpg)
Statements
expressionifswitchwhiledoforbreak
continuereturntry/throw
![Page 50: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/50.jpg)
Break statementStatements can have labels. Break statements can refer to those labels.
loop1: for (;;) {...loop2: for (;;) {
if (...) {break loop1;
}}
}
![Page 51: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/51.jpg)
For statement
Iterate through all of the elements of an array:
for (var i = 0; i < array.length; i += 1) {
// within the loop, // i is the index of the current member// array[i] is the current element
}
![Page 52: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/52.jpg)
For statement
Iterate through all of the members of an object:
for (var name in object) { if (object.hasOwnProperty(name)) {
// within the loop, // name is the key of current member // object[name] is the current value
}}
![Page 53: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/53.jpg)
Switch statement
Multiway branch
The switch value does not need to a number. It can be a string.
The case values can be expressions.
![Page 54: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/54.jpg)
Switch statement
switch (expression) {case ';':case ',':case '.': punctuation(); break;default: noneOfTheAbove();}
![Page 55: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/55.jpg)
Throw statement
throw new Error(reason);
throw { name: exceptionName, message: reason};
![Page 56: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/56.jpg)
Try statementtry { ...} catch (e) { switch (e.name) { case 'Error': ... break; default: throw e; }}
![Page 57: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/57.jpg)
Try Statement
The JavaScript implementation can produce these exception names:'Error''EvalError''RangeError''SyntaxError''TypeError''URIError'
![Page 58: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/58.jpg)
With statement
Intended as a short-hand
Ambiguous
Error-prone
Don't use it
with (o) { foo = null;}
Instead o.foo = null;
![Page 59: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/59.jpg)
Function statement
function name(parameters) {statements;
}
![Page 60: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/60.jpg)
Var statement
Defines variables within a function.Types are not specified.Initial values are optional.
var name;var nrErrors = 0;var a, b, c;
![Page 61: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/61.jpg)
Scope
In JavaScript, {blocks} do not have scope.
Only functions have scope.
Vars defined in a function are not visible outside of the function.
![Page 62: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/62.jpg)
Return statement
return expression;or
return;
If there is no expression, then the return value is undefined.
Except for constructors, whose default return value is this.
![Page 63: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/63.jpg)
Objects
Everything else is objects
Objects can contain data and methods
Objects can inherit from other objects.
![Page 64: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/64.jpg)
CollectionsAn object is an unordered collection of name/value pairs
Names are strings
Values are any type, including other objects
Good for representing records and trees
Every object is a little database
![Page 65: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/65.jpg)
Object LiteralsObject literals are wrapped in { }Names can be names or strings Values can be expressions: separates names and values, separates pairsObject literals can be used anywhere a value can appear
![Page 66: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/66.jpg)
Object Literals
"name" "Jack B. Nimble"
"goto" "Jail"
"grade" "A"
"level" 3
var myObject = {name: "Jack B. Nimble", 'goto': 'Jail', grade: 'A', level: 3};
var theName = myObject.name;var destination = myObject['goto'];
![Page 67: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/67.jpg)
Maker Functionfunction maker(name, where, grade, level) { var it = {}; it.name = name; it['goto'] = where; it.grade = grade; it.level = level; return it;}myObject = maker("Jack B. Nimble", 'Jail', 'A', 3);
![Page 68: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/68.jpg)
Object Literalsvar myObject = {
name: "Jack B. Nimble",
'goto': 'Jail',
grade: 'A',
format: {
type: 'rect',
width: 1920,
height: 1080,
interlace: false,
framerate: 24
}
};
JSON = Java Simple Object Notation
Simplest way to send data to the client
![Page 69: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/69.jpg)
Object LiteralsmyFunction({
type: 'rect',
width: 1920,
height: 1080
});
throw {
name: 'error',
message: 'out of bounds'
};
![Page 70: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/70.jpg)
Object Augmentation
New members can be added to any object by simple assignment
There is no need to define a new classmyObject.format.colorModel = 'YCgCb';
myObject[name] = value;
![Page 71: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/71.jpg)
Object Methods
All objects are linked directly or indirectly to Object.prototype
All objects inherit some basic methods.
None of them are very useful.
hasOwnProperty(name)Is the name a true member of this object?
No copy method.
No equals method.
![Page 72: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/72.jpg)
Object Construction
All three expressions below have exactly the same result, creating a new empty object:
(1) new Object()
(2) {}
(3) object(Object.prototype)
{} is the preferred form.
![Page 73: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/73.jpg)
Reference
Objects can be passed as arguments to functions, and can be returned by functionsObjects are always passed by reference.
The === operator compares object references, not valuestrue only if both operands are the same object
![Page 74: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/74.jpg)
Delete
Members can be removed from an object with the delete operator
delete myObject[name];
![Page 75: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/75.jpg)
Arrays
•Array inherits from Object.• Indexes are converted to strings and used as names for retrieving values.
• Very efficient for sparse arrays.• Not very efficient in most other cases.• One advantage: No need to provide a length or type when creating an array.
![Page 76: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/76.jpg)
lengthArrays, unlike objects, have a special length member.
It is always 1 larger than the highest integer subscript.
It allows use of the traditional for statement.for (i = 0; i < a.length; i += 1) {
...}
Do not use for..in with arrays -- you’ll loop through additional properties (e.g. length, and other internals)
![Page 77: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/77.jpg)
Array Literals
An array literal uses []It can contain any number of expressions,
separated by commasmyList = ['oats', 'peas', 'beans'];
New items can be appendedmyList[myList.length] = 'barley';
The dot notation should not be used with arrays.[] is preferred to new Array().
![Page 78: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/78.jpg)
Array Methods
concatjoinpoppushslicesortsplice
![Page 79: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/79.jpg)
Deleting Elements
delete array[number]
Removes the element, but leaves a hole in the numbering.
array.splice(number, 1)
Removes the element and renumbers all the following elements.
![Page 80: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/80.jpg)
Deleting ElementsmyArray = ['a', 'b', 'c', 'd'];
delete myArray[1];
// ['a', undefined, 'c', 'd']
myArray.splice(1, 1);
// ['a', 'c', 'd']
![Page 81: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/81.jpg)
Arrays v Objects
Use objects when the names are arbitrary strings.
Use arrays when the names are sequential integers.
Don't get confused by the term Associative Array.
![Page 82: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/82.jpg)
Functions
Functions are first-class objects(see: http://en.wikipedia.org/wiki/First-class_object)
1. Functions can be passed, returned, and stored just like any other value
2. Functions inherit from Object and can store name/value pairs.
![Page 83: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/83.jpg)
Function operator
The function operator takes an optional name, a parameter list, and a block of statements, and returns a function object.function name(parameters) {
statements}
A function can appear anywhere that an expression can appear.
![Page 84: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/84.jpg)
04/22/23 JavaScript: Functions 84
Invocation
function foo() {alert("foo was invoked!");
} foo();
![Page 85: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/85.jpg)
04/22/23 JavaScript: Functions 85
Self Invocation
(function foo() {alert("foo was invoked!");
}());
![Page 86: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/86.jpg)
04/22/23 JavaScript: Functions 86
Self Invocation
(function() {alert("Anonymous function was invoked!");
}());
![Page 87: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/87.jpg)
04/22/23 JavaScript: Functions 87
Hatishma Callee?
(function() {alert(arguments.callee + " was invoked!");
}());
![Page 88: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/88.jpg)
lambda
What JavaScript calls function, other languages call lambda.
It is a source of enormous expressive power.
Unlike most power-constructs, it is secure.
![Page 89: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/89.jpg)
Function statement
The function statement is just a short-hand for a var statement with a function value.
function foo() {}
expands to
var foo = function foo() {};
![Page 90: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/90.jpg)
Inner functions
Functions do not all have to be defined at the top level (or left edge).
Functions can be defined inside of other functions.
![Page 91: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/91.jpg)
Scope
An inner function has access to the variables and parameters of functions that it is contained within.
This is known as Static Scoping or Lexical Scoping.
![Page 92: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/92.jpg)
Closure
The scope that an inner function enjoys continues even after the parent functions have returned.
This is called closure.
![Page 93: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/93.jpg)
Examplefunction fade(id) { var dom = document.getElementById(id), level = 1; function step () { var h = level.toString(16); dom.style.backgroundColor = '#FFFF' + h + h; if (level < 15) { level += 1; setTimeout(step, 100); } } setTimeout(step, 100);}
![Page 94: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/94.jpg)
Function Objects
Functions are objects, so they can contain name/value pairs.
This can serve the same purpose as static members in other languages.
![Page 95: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/95.jpg)
Method
Since functions are values, functions can be stored in objects.
A function in an object is called a method.
![Page 96: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/96.jpg)
Invocation
If a function is called with too many arguments, the extra arguments are ignored.
If a function is called with too few arguments, the missing values will be undefined.
There is no implicit type checking on the arguments.
![Page 97: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/97.jpg)
InvocationThere are four ways to call a function:
Function formfunctionObject(arguments)
Method formthisObject.methodName(arguments)thisObject["methodName"](arguments)
Constructor formnew functionObject(arguments)
Apply formfunctionObject.apply(thisObject,
[arguments])
![Page 98: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/98.jpg)
Method form
thisObject.methodName(arguments)
When a function is called in the method form, this is set to thisObject, the object containing the function.
This allows methods to have a reference to the object of interest.
![Page 99: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/99.jpg)
Function form
functionObject(arguments)When a function is called in the function form, this is set to the global object.
![Page 100: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/100.jpg)
Constructor form
new functionObject(arguments)
When a function is called with the new operator, a new object is created and assigned to this.
If there is not an explicit return value, then this will be returned.
![Page 101: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/101.jpg)
this
Invocation form this
function the global object
method the object
constructor the new object
![Page 102: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/102.jpg)
arguments
When a function is invoked, in addition to its parameters, it also gets a special parameter called arguments.
It contains all of the arguments from the invocation.
It is an array-like object.
arguments.length is the number of arguments passed.
![Page 103: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/103.jpg)
Example
function sum() { var i, n = arguments.length, total = 0; for (i = 0; i < n; i += 1) { total += arguments[i]; } return total;}
![Page 104: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/104.jpg)
Augmenting Built-in Types
Object.prototypeArray.prototypeFunction.prototypeNumber.prototypeString.prototypeBoolean.prototype
![Page 105: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/105.jpg)
trim
String.prototype.trim = function () {
return this.replace(
/^\s*(\S*(\s+\S+)*)\s*$/, "$1");
};
![Page 106: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/106.jpg)
supplantvar template = '<table border="{border}">' + '<tr><th>Last</th><td>{last}</td></tr>' + '<tr><th>First</th><td>{first}</td></tr>' + '</table>';
var data = { first: "Carl", last: "Hollywood", border: 2};
mydiv.innerHTML = template.supplant(data);
![Page 107: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/107.jpg)
supplant
String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g, function (a, b) { var r = o[b]; return typeof r === 'string' ? r : a; } ); };
![Page 108: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/108.jpg)
typeof
The typeof prefix operator returns a string identifying the type of a value.
type typeofobject 'object'function 'function'array 'object'number 'number'string 'string'boolean 'boolean'null 'object'undefined 'undefined'
![Page 109: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/109.jpg)
Built-in Type Wrappers
Java has int and Integer, two incompatible types which can both carry the same value with differing levels of efficiency and convenience
JavaScript copied this pattern to no advantage. Avoid it.
Avoid new Boolean()Avoid new String()Avoid new Number()
![Page 110: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/110.jpg)
Augmentation
We can directly modify individual objects to give them just the characteristics we want.
We can do this without having to create classes.
We can then use our new object as the prototype for lots of new objects, each of which can also be augmented.
![Page 111: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/111.jpg)
Augmentation Example later method
Object.prototype.later = function (msec, method) { var that = this, args = Array.prototype.slice. apply(arguments, [2]); if (typeof method === 'string') { method = that[method]; } setTimeout(function () { method.apply(that, args); }, msec); return that; };
![Page 112: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/112.jpg)
Augmentation Example later method
The later method causes a method on the object to be invoked in the future.
my_object.later(1000, "erase", true);
![Page 113: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/113.jpg)
“Object Linkage”Objects can be created with a secret link to another
object, by using the object(o) function to make a new empty object with a link to object o
If an attempt to access a name fails, the secret linked object will be used.
The secret link is not used when storing. New members are only added to the primary object.
![Page 114: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/114.jpg)
“Object Linkage”
"name" "Jack B. Nimble"
"goto" "Jail"
"grade" "A"
"level" 3
var myNewObject = object(myOldObject);
myNewObject
myOldObject
![Page 115: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/115.jpg)
“Object Linkage”
"name" "Tom Piperson"
"level" 4"crime" "pignapping"
"name" "Jack B. Nimble"
"goto" "Jail"
"grade" "A"
"level" 3
myNewObject.name = "Tom Piperson";
myNewObject.level += 1;
myNewObject.crime = 'pignapping';
![Page 116: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/116.jpg)
Confession
function object(o) {function F() {}F.prototype = o;return new F();
}
![Page 117: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/117.jpg)
Inheritance
Object Linkage provides simple inheritance.
An object can inherit from an older object.
![Page 118: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/118.jpg)
Prototypal Inheritance
Some languages have classes, methods, constructors, and modules. JavaScript's functions do the work of all of those.
Instead of Classical Inheritance, JavaScript has Prototypal Inheritance.
It accomplishes the same things, but differently.It offers greater expressive power.But it's different.
![Page 119: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/119.jpg)
Prototypal InheritanceInstead of organizing objects into rigid classes, new objects
can be made that are similar to existing objects, and then customized.
Object customization is a lot less work than making a class, and less overhead, too.
One of the keys is the object(o) function.
The other key is functions.
![Page 120: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/120.jpg)
04/22/23 JavaScript Objects 120
Pseudoclassical Inheritancefunction Gizmo(id) {
this.id = id;}
Gizmo.prototype.toString = function () {return "gizmo " + this.id;
};
function Hoozit(id) {this.id = id;
}
Hoozit.prototype = new Gizmo();
Hoozit.prototype.test = function (id) {return this.id === id;
};
![Page 121: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/121.jpg)
04/22/23 JavaScript Objects 121
Parasitic Inheritancefunction gizmo(id) {
return {id: id,toString: function () {return "gizmo " + this.id;}};
}
function hoozit(id) {var that= gizmo(id);that.test = function (testid) {return testid === this.id;};return that;
}
![Page 122: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/122.jpg)
(global) Object
The object that dares not speak its name.
It is the container for all global variables and all built-in objects.
On browsers, window is the global object.
![Page 123: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/123.jpg)
Global variables are evil
Functions within an application can clobber each other.
Cooperating applications can clobber each other.
Use of the global namespace must be minimized.
![Page 124: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/124.jpg)
Implied Global
Any var which is not properly declared is assumed to be global by default.
This makes it easy for people who do not know or care about encapsulation to be productive, but it makes applications less reliable.
JSLint is a tool which helps identify implied globals and other weaknesses.
http://www.JSLint.com
![Page 125: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/125.jpg)
NamespaceEvery object is a separate namespace.
Use an object to organize your variables and functions.
The YAHOO Object.<head><script>YAHOO={};</script>
http://twiki.corp.yahoo.com/view/Devel/TheYAHOOObject
![Page 126: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/126.jpg)
Encapsulate
Function scope can create an encapsulation.
Use an anonymous function to wrap your application.
![Page 127: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/127.jpg)
ExampleYAHOO.Trivia = function () {
// define your common vars here
// define your common functions here
return {
getNextPoser: function (cat, diff) { ... },
showPoser: function () { ... }
};
} ();
![Page 128: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/128.jpg)
Threads
The language definition is neutral on threads
Some language processors (like SpiderMonkey) provide thread support
Most application environments (like browsers) do not provide it
![Page 129: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/129.jpg)
Platforms and UsagesBrowsers
Browsers based applications (Smart Phones Apps, Set-Top Boxes)
Services on the web (e.g. Yahoo!Widgets)
DreamWeaver and Photoshop
Microsoft WSH and Dashboard
Embedded as internal language in Applications
![Page 130: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/130.jpg)
Coding Conventions and JavaScript
JavaScript coding conventions are critically important.
Most JavaScript programs and examples are crap.
![Page 131: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/131.jpg)
Code Conventions for the JavaScript Programming
Language
http://javascript.crockford.com/code.html
![Page 132: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/132.jpg)
Semicolon insertion
When the compiler sees an error, it attempts to replace a nearby linefeed with a semicolon and try again.
This should alarm you.
It can mask errors.
Always use the full, correct forms, including semicolons.
![Page 133: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/133.jpg)
Comma
Avoid tricky expressions using the comma operators.
Do not use extra commas in array literals.
Good: [1, 2, 3]Bad: [1, 2, 3,]
![Page 134: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/134.jpg)
Required Blocks
Good:if (a) { b();}
Bad:if (a) b();
![Page 135: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/135.jpg)
Forbidden BlocksBlocks do not have scope in JavaScript.
Blocks should only be used with structured statements functionifswitchwhilefordotry
![Page 136: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/136.jpg)
Variables
Define all variables at the beginning of the function.
JavaScript does not have block scope, so their is no advantage in declaring variables at the place of their first use.
Avoid Hoisting problem.(See: http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-hoisting-explained/)
![Page 137: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/137.jpg)
JSLint/gJSLint• JSLint can help improve the robustness and
portability of your programs.• It enforces style rules.• It can spot some errors that are very difficult to find in
debugging.• It can help eliminate implied globals.• Currently available on the web and as a Konfabulator
widget.• Soon, in text editors and Eclipse.
http://www.JSLint.com/
![Page 139: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/139.jpg)
Exercise1
Define a function max() that takes two numbers as arguments and returns the largest of them.Use the if-then-else construct available in Javascript.
![Page 140: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/140.jpg)
Exercise1 - Solutionfunction max (num1, num2){ if (num1 > num2){ return num1; } else { return num2; }}function max (num1, num2){ if (num1 > num2){ return num1; } return num2;}function max (num1, num2){ return num1 > num2 ? num1 : num2;}
![Page 141: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/141.jpg)
Exercise2
Define a function max() that takes any numbers as arguments and returns the largest of them.
![Page 142: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/142.jpg)
Exercise2 - Solutionfunction max (){ var result = arguments[0], i;
for (i = 1; i < arguments.length; i++){ if (arguments[i] > result){ result = arguments[i]; } } return result;}
![Page 143: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/143.jpg)
Exercise3
Write a function translate() that will translate a text into "rövarspråket".That is, double every consonant and place an occurrence of "o" in between. For example,translate("this is fun") should return the string "tothohisos isos fofunon".
![Page 144: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/144.jpg)
Exercise3 - Solutionfunction translate(text) { var inArray = text.split(""), outArray = [], i, len = inArray.length, isConst = function (ch) { return "bcdfghjklmnpqrstvwxzBCDFGHJKLMNPQRSTVWXZ".indexOf(ch) != -1; }; for (i = 0; i < len; i++){ outArray.push(
isConst(inArray[i])?inArray[i] + "o" + inArray[i] :inArray[i]);
} return outArray.join("");}
![Page 145: JavaScript Training By Effie Nadiv Edited by permission from author by Amir Kirsh](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816331550346895dd3b5ef/html5/thumbnails/145.jpg)
Thank You