View
123
Download
4
Category
Preview:
Citation preview
[solutions]
JavaScript: CorePart
Wei-Shao TangApril 15, 2015
Who am I?Why JavaScript?Language
ECMAScriptCore PartPrimitive Type and VariablesStringControl StructureFunctionArrayObject
Who am I?
About MyselfMaster in IM, NTU (2014 - )
BS in MIS, NCCU (2010 - 2014)
I'm interested in Web Programming, Functional ProgrammingI write codes in: Python, JavaScript,For now, I am learning: Haskell, LISP
My mail is: pa4373 <at> gmail.comAlong with my: Skype, LINE ID: pa4373,https://github.com/pa4373
Why JavaScript?
"JavaScript is eating the world."
JavaScript is dominant in the World Wide Web.#1 Programming language, according to popularity on GitHuband StackOverflow. ( )It runs everywhere. Web client, desktop / mobile app, server,embedded system and such.It got more than 40K+ jobs on LinkedIn, closely following Javajobs.Many languages now can compiled to JavaScript. (webassembly)
source
Language
Specification vs. ImplementationSpecification
What makes a piece of code a program, and what itsbehaviour shall be.Syntax (form)Semantic (meaning)
ImplementationSystem for executing computer program. (Compiler,Interpreter, Runtime and etc.)
Little Analogy"Google that yourself"
which means finding something with Google Search Engine.Reese opened Firefox, went to andsearched for something.Finch opened Chrome, went to andsearched for something.Reese and Finch did same things, but with different approaches.(Different implementors)
https://www.google.com/
https://www.google.co.uk/
Back to JavaScript
By syntax rules, the following piece of code is a program:
Semantic: declare a function named id which takes one objectand return exactly the same object.
v a r i d = f u n c t i o n ( o b j ) { r e t u r n o b j ;} ;
What about Implementation?Several existing implementations, referred to JavaScriptengine:
the program executes JavaScript, usually called ProcessVirtual Machine.
Popular ones such as , ,
Don't reinvent the wheel:Lots of functions are pre-built, as libraries.
SpiderMonkey + Gekco FirefoxV8 + WebKit ChromeV8 + Few networking libraries Node.js
Google's V8 Mozilla's SpiderMonkeyRhino
→→
→
StandardizationIf we have so many implementations, what guarantees that theyall follow the specification? (Compatibility)
: the process of developing and implementingtechnical standards.
Few groups known for standardization: , , .
Standardization
ISO ANSI ECMA
ECMAScriptIn 1996, Netscape filed the application to ECMA, and it wasreleased as ECMAScript 1 in 1997.For now, the mainstream is ECMAScript 5, released in 2009,supported by most of modern browsers.While the browsers don't always stick to the specification, it'sgood to take it as the guideline.
Core Part
Core PartIt's beneficial to understand the relationship of components ofthe language, due to the rich (and sophisticated) ecosystem ofJavaScript.Although you need different knowledge for differentenvironments, the common part stands out as the core part.
This tutorial is dedicated to the core part of the language.We won't talk about how to interact with browsers or writeserver program, yet...INSTEAD we focus on components allows you to mentallymodel your application.
"A language that doesn't affect the way youthink about programming, is not worthknowing." ~ Alan Peris (1922 – 1990)
"No, I just want to get my job done, it doesn't matter my codesall look like the same."
To better understand the usage pattern of others' libraries.To design the program easier for others to understand.For fun, and make yourself look smart.
Like learning English, you will do better likely if you appreciateits culture.
REPL (Read–eval–print loop)The environment reads input from user, evaluates them ascode at the given context, prints the result, and loops back.Great for learning, debugging and experimental programming.
REPL (Read–eval–print loop)Most browsers have built-in REPL:
for Firefox and Chrome: Right click on the web page, choose"Inspect Element" and select "Console" tab on the developerpanel.
Firefox will be used through the following demonstration.
Type 㫔�㫔�㫔�㫔�㫔�㫖� and then press "Enter", it will output 㫔�.
To represent the process of using REPL, we take the followingform from now on:
where '//: ' stands for program output. the input can bedivided in multiple lines.
Make a newline instead of evaluating: "Shift" + "Enter"
(㫔�㫔� for single-line comment.)
v a r i d = f u n c t i o n ( o b j ) { r e t u r n o b j ;} ;/ / : u n d e f i n e d
Exercise (~5 mins)
Fire up REPL and type following statements (ends with ;) insequence by instructions, try and discuss the outputs of REPL:
Don't copy & paste, muscle memory helps learn a new language.
/ / p r o g r a m 1 ." I t h o u g h t F e l i c i t y J o n e s w a s m e . " ;/ / p r o g r a m 2 .v a r j a n e H a w k i n g S a y = f u n c t i o n ( ) { r e t u r n " I t h o u g h t F e l i c i t y J o n e s w a s m e . " ;} ;/ / p r o g r a m 3 , i t o n l y w o r k s a f t e r p r o g r a m 2 i s e v a l u a t e d .j a n e H a w k i n g S a y ( ) ;
Some facts about this little exerciseEach statement ends with semicolon (;)
Just like each sentence in English ends with period.By convention, the naming rule of JavaScript is Camel-Case.The indentation use two spaces, not tab.When declaring a function, there's one space between 㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�keyword and argument list.
Primitive Typeand Variables
REPL as Calculator
We have seen that how to use REPL to do addition:
Multiplication:
Combine them together:
This does the same for subtraction (-), division (/).
1 + 1 ;/ / : 2
2 * 5 * 1 3 ;/ / : 1 3 0
( 1 + 1 0 0 0 ) * 1 0 0 0 / 2 ;/ / : 5 0 0 5 0 0
We can also compare them:
The statement we've seen so far is called expression, whichmeans it's evaluated by interpreter and the result value isproduced and returned.
Wait, what is 㫘�㫘�㫘�㫘�㫘�?
2 > 8 ;/ / : f a l s e
1 0 > = 1 0 ;/ / : t r u e
Data TypeData type is very important, since it determines:
The possible values (range)Operations allowed to be done
In JavaScript, data type can be categorised into:Primitive Types: the basic unit provided by JavaScript.Composite Types: can be constructed from primitive valuesand composite values.Special Types: 㫗�㫘�㫘�㫘�, 㫗�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�. (will talk about it later.)
and etc.
Primitive TypesReferred to built-in data structures, and they are:
Atomic: can't be broken down into smaller data type.Immutable: once the value is decided, it can't be changed.
In ES5, primitive types are:BooleanNumberString
It's fair to assume that 㫘�㫘�㫘�㫘�㫘� seen in the previous slides is typeof Boolean.
Boolean TypeOnly contains two values: It denotes the truth value of one proposition, such as:
㫖�㫔�㫖�㫔�㫖�㫖�㫖�㫔�㫔�㫖�㫔�㫔�㫔�㫖�㫔�㫔�
{true, f alse}
Logical Operations:Take one or two boolean value, produces a new value by:
Negation (not): 㫔�
Conjunction (and): 㫔�㫔�
Disjunction (or): 㫚�㫚�
Negation has higher precedence than conjunction anddisjunction.
! t r u e ;/ / : f a l s e
t r u e & & f a l s e ;/ / : f a l s e
f a l s e | | t r u e ;/ / : t r u e
Number TypeOnly one number type: the double-precision 64-bit binaryformat IEEE 754 value (number between -( ) and
)Nah, basically you just need to remember it got double typeinternally.
There is no specific type for integers.No need to worry about integer overflow.
Everything not within the range goes: 㫗�㫘�㫘�㫘�㫘�㫘�㫘�㫚�
+ 1253
+ 1253
2 / 0 ;/ / : I n f i n i t y
Number TypeUnary operator: 㫔� (signed)Binary operators: 㫔�, 㫔�, 㫔�, 㫔�, 㫔� (mod)
Operations on float-point numbers is tricky:
While normally it didn't affect the usage, sometimes you mayneed precise result. Scale to integer and dividing later:
more0 . 1 + 0 . 2 ;/ / : 0 . 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4
( 0 . 1 * 1 0 + 0 . 2 * 1 0 ) / 1 0 ;/ / : 0 . 3
Number Type㫗�㫘�㫗�: 'not a number' (although it has number type)
Can be made when converting a illegal string to number:
you can test a number with 㫘�㫘�㫗�㫘�㫗� function.
If isNaN returns false, the input is or can be parsed tonumber type.
p a r s e I n t ( ' o o p s ' , 1 0 ) ;/ / : N a N
i s N a N ( 1 0 ) ;/ / : f a l s e
Comparison and Equivalence
You can compare numbers with 㫖�, 㫖�, 㫖�㫖�, 㫖�㫖�.
The result got boolean type.Equivalence is a little tricky:
Stick to 㫖�㫖�㫖�, 㫔�㫖�㫖� instead of 㫖�㫖�, 㫔�㫖�
2 > = 8 ;/ / : f a l s e
0 = = f a l s e ;/ / : t r u e0 = = = f a l s e ;/ / : f a l s e
Ternary OperatorAn operator in the sense of 㫗�㫖�㫔�㫗�㫗�㫖�㫗�㫔�㫖�㫗�㫗�㫖�.㫗�㫗�㫗�㫗�㫗�㫗�㫗�㫗�㫗�㫗�㫗�㫔�㫖�㫔�㫖�㫘�㫗�㫗�㫖�㫗�㫗�㫗�㫗�㫗�㫔�㫔�㫔�㫖�㫔�㫖�㫘�㫗�㫗�㫖�㫗�㫗�㫗�㫗�㫗�㫔�㫔�
If PROPOSITION is 㫘�㫘�㫘�㫘� then return EXPRESSION 1, elsereturn EXPRESSION 2.
( 2 > 8 ) ? 6 8 9 : 6 3 3 ;/ / : 6 3 3
VariableThe programs we've seen so far were written in one-lineexpression.We need some way to save the result for later use, at the givencontext.Variable, serving as program's memory, is a popular way toaddress the problem.
Variable in the sense of computer architecture, notmathematically.
VariableVariable is composed of an identifier and its value. (the valuemay not be defined.)
Consider the following program:v a r x ; / / x i s i d e n t i f i e r ./ / : u n d e f i n e dx ; / / f o r n o w , x h a s n o t c o n t a i n e d a n y v a l u e , y e t ./ / : u n d e f i n e dx = 3 ;/ / : 3x ; / / x c o n t a i n s 3 n o w ./ / : 3
DeclarationNew local variable is declared with keyword 㫘�㫘�㫘�, along withidentifier.If you skip 㫘�㫘�㫘� keyword, the variable became global, which isvery evil.The identifier is case-sensitive.
Don't need to specify the data type.v a r x ;
Assignment
To assign a value to a variable, put the value / expression onRHS, the variable on LHS of 㫖�.
When the assignment occurs, the value is returned immediately.
If a variable is declared, but has not been assigned, the value ofthe variable is 㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�.
x = 3 ;/ / : 3
v a r x ;/ / : u n d e f i n e dx ;/ / : u n d e f i n e d
Assignment
Assignment can occurs more than one time, with value indifferent data type.
v a r x ;/ / : u n d e f i n e dx = 0 ;/ / : 0x = f a l s e ;/ / : f a l s e
ShortcutThe following is not necessary to construct program.
Declaration and assignment:
Operator and assignment 㫔�㫖�:
The same goes with 㫔�㫖�, 㫔�㫖�, 㫔�㫖�, 㫔�㫖�
v a r x = 0 ;/ / : u n d e f i n e d / / n o t i c e t h a t t h e v a l u e i s n o t r e t u r n e d i n t h e c a s e .x/ / : 0
v a r x = 1 0 ;/ / : u n d e f i n e dx + = 1 0 / / t h e s a m e a s x = x + 1 0/ / : 2 0
㫘�㫘�㫘�㫘�
The value null is a JavaScript literal representing null or an"empty" value, i.e. no object value is present.
n u l l ;/ / : n u l l
㫘�㫘�㫘�㫘� vs 㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�null undefined
as the parameters of functionwhich is not a object.
the variable is declared but notassigned, yet.
as the top of prototypechains
some parameters is missingwhen the function is applied.
the property of object doesn'texist.
the function doesn't returnvalues (void vs undefined)
Falsy valuesThe values which act like 㫘�㫘�㫘�㫘�㫘� in boolean operations.Falsy values in JavaScript:
㫘�㫘�㫘�㫘�㫘�㫔� (zero)㫔�㫔� (empty string)㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�
㫗�㫘�㫗� (a special Number value meaning Not-a-Number!)u n d e f i n e d | | t r u e ;/ / : t r u e
ExercisesIn REPL, use variables, addition / subtraction / multiplication /division to perform the following algorithms. Finally, usecomparison to determine the result is correct.
You shall be familiar with variable, arithmetic operations,comparison, Boolean value
Mobile Number Magic: (It has to be 9 digits, and you mightassume it's 891230567.)1. Write down the first 5 digits.2. Multiple 80 with that number.3. Plus 1 to that number.4. Multiple 250 with that number.5. Plus the last 4 digits, twice!6. Minus 250.7. Using comparison to check if it's your mobile number.8. If it's your number, we're done here. If not, divide it by 2.9. Repeat step 7 again.
Note: This can be seen as:
if a has 5 digits and b has 4 digits, it reflects your mobilenumber structure.
2(a × + b) = a × 2 × + 2b104 104
= (a × 80 + 1) × 250 + 2b + 250
String
String
String is a finite sequence of characters, usually used torepresent text.
To construct a string, put things in double / single quotes (singleis preferable.)
There is no specific type for characters.
' H a a a a a v e y o u m e t T e d ? ' ;/ / : ' H a a a a a v e y o u m e t T e d ? '
v a r c h a r = ' a ' ;
㫔� and Casting
Consider the program:
Notice that 㫘� as esacpe char before 㫔� in the string.㫔� stands for concatenation when at least one of operand isString.
It will attempt to call 㫘�㫘�㫗�㫘�㫘�㫘�㫘�㫘� method on non-stringoperand.
v a r s l a p C o u n t = 5 ;/ / : u n d e f i n e d' I \ ' m g o i n g t o g o w i t h ' + s l a p C o u n t + ' s l a p s f o r e t e r n i t y . ' ;/ / : " I ' m g o i n g t o g o w i t h 5 s l a p s f o r e t e r n i t y . "
s l a p C o u n t . t o S t r i n g ( ) ;/ / : " 5 "
㫘�㫘�㫘�㫘�㫘�㫔� and Casting㫘�㫘�㫘�㫘�㫘�㫗�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫖�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�
Keep in mind that parseInt better goes with base.Anything failed to be parsed will be represented as 㫗�㫘�㫗�
p a r s e I n t ( ' 3 . 1 4 1 5 9 2 6 ' , 1 0 ) ;
/ / : 3p a r s e F l o a t ( ' 3 . 1 4 1 5 9 2 6 ' ) ;/ / : 3 . 1 4 1 5 9 2 6p a r s e F l o a t ( ' L e g e n . . . W a i t f o r i t . . . D a r y ' ) ;/ / : N a N
String Has PropertiesMost string properties are accessible in the form of:
variableName.property
Property can be function, and thus can be applied.v a r w e t W e t W e t = ' I f e e l i t i n m y f i n g e r s I f e e l i t i n m y t o e s '/ / : u n d e f i n e dw e t W e t W e t . l e n g t h ; / / p r o p e r t y/ / : 4 4w e t W e t W e t . t o U p p e r C a s e ( ) ; / / f u n c t i o n i n v o c a t i o n / a p p l i c a t i o n ./ / : " I F E E L I T I N M Y F I N G E R S I F E E L I T I N M Y T O E S "w e t W e t W e t . t o U p p e r C a s e ; / / r e f e r s t o f u n c t i o n i t s e l f/ / : f u n c t i o n t o U p p e r C a s e ( )' I a m g o n n a b e a n g r y ! ' . r e p l a c e ( ' g o n n a b e ' , ' ' ) . t o U p p e r C a s e/ / : " I A M A N G R Y ! "
Some methods on Stringstring.charAt(k): get the character at position k, or '' if k is not inthe range of string length.string.length: get the length of the string
string.replace(searchString, replaceString): Make new string byreplacing searchString with replaceString in string
v a r w e t W e t W e t = ' I f e e l i t i n m y f i n g e r s I f e e l i t i n m y t o e s ' ;/ / : u n d e f i n e dw e t W e t W e t . l e n g t h ;/ / : 4 4w e t W e t W e t . c h a r A t ( 1 3 ) ;/ / : " m "w e t W e t W e t . r e p l a c e ( ' I ' , ' i ' ) ;/ / : " i f e e l i t i n m y f i n g e r s i f e e l i t i n m y t o e s "
Some methods on Stringstring.indexOf(searchString, [position]): the position of thesearchString in string, starts from 0, from left to right.
position: The position to start search, default to 0.
return -1 if not found.
'The rain of spain falls mainly in the plain.'
v a r s p a i n R a i n = ' T h e r a i n o f s p a i n f a l l s m a i n l y i n t h e p l a i n . ' ;/ / : u n d e f i n e ds p a i n R a i n . i n d e x O f ( ' a i n ' ) ;/ / : 5s p a i n R a i n . i n d e x O f ( ' a i n ' , 0 ) ;/ / : 5s p a i n R a i n . i n d e x O f ( ' a i n ' , 1 3 ) ;/ / : 1 4s p a i n R a i n . i n d e x O f ( ' A u d r e y H e p b u r n ' ) ;/ / : - 1
Some methods on Stringstring.slice(start, [end]): capture substring from start to end
start: the start position of the string for substring, could benegative (count backward from the end.)
end: the end position of the string for substring, could benegative. Defaults to the length of String.
string.substring: do not use it since it doesn't support backwardcounting, slice is superior.
v a r f i x Y o u = ' L i g h t s w i l l g u i d e y o u h o m e , a n d i g n i t e y o u r b o n e s ' ;/ / : u n d e f i n e df i x Y o u . s l i c e ( 2 2 , 2 6 ) ;/ / : " h o m e "f i x Y o u . s l i c e ( - 5 ) ;/ / : " b o n e s "
Some methods on Stringstring.split(delimeter, [limit]): divide a string to an array by itsdelimeter
limit: the limit to divided, at most.v a r i n d u c t i o n = ' T o I t e r a t e I s H u m a n , T o R e c u r s e D i v i n e ' ;/ / : u n d e f i n e di n d u c t i o n . s p l i t ( ' T o ' ) ;/ / : A r r a y [ " " , " I t e r a t e I s H u m a n , " , " R e c u r s e D i v i n e " ]i n d u c t i o n . s p l i t ( ' T o ' , 2 ) ;/ / : A r r a y [ " " , " I t e r a t e I s H u m a n " ]
String is immutable
It cannnot be altered by string[index].
We prefer string.charAt to string[index], since we do not want todeal with 㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�Usually we generate new string and assign new string to variable.
v a r s c i e n t i s t = ' N o b o d y s a i d i t w a s e a s y , i t i s s u c h a s h a m e f o r u s t o p a r t '/ / : u n d e f i n e ds c i e n t i s t [ 0 ] = ' n ' ;/ / : " n "s c i e n t i s t ;/ / : " N o b o d y s a i d i t w a s e a s y , i t i s s u c h a s h a m e f o r u s t o p a r t "s c i e n t i s t [ 2 0 0 2 ] ;/ / : u n d e f i n e d
More string opeartions goes there......
"Complicated string operation?"
Regular expression comes to rescue!
Regular ExpressionExtremely useful on strings operations.
Due to its learning curve, we can't cover here but give you aglimpse today:
v a r i s V a l i d I d = / ^ [ A - Z ] { 1 } [ 1 - 2 ] { 1 } [ 0 - 9 ] { 8 } $ / ;/ / : u n d e f i n e di s V a l i d I d . t e s t ( ' E 2 7 1 5 3 8 1 6 3 ' ) ;/ / : t r u e
Learning source
Online test tool
Control Structure
Prime Number TestWe can determine whether a number is prime number or not by:1. for a number , compute 2. we check all prime numbers one by one, if none of
them is a factor of , is a prime number.
x x√< x√
x x
Prime Number TestWe can determine whether a number is prime number or not by:1. for a number , compute 2. we check all prime numbers one by one (Iteration,
Loop), if (Condition) none of them is a factor of , is aprime number.
x x√} x√
x x
Another ExampleAbs:1. For two numbers , compute 2. If (Condition) , abs is , else (Condition),
abs is
a, b (a + b)(a + b) ~ 0 (a + b)
(a + b) × (+1)
Control StructureThe examples we've seen above can be described as programrunning step by step, the same as (imperative) programminglanguages.The program block: a pieces of codes meant to be executed as aunit.To control program's behaviour, it can be generalised as:
Condition: The program block is executed based on thecertain condition is satisfied.Iteration: The program block executes repeatedly based onthe certain condition is satisfied.
if (else if...else)v a r a = 9 ;v a r b = 8 1 ;v a r a b s ;
a b s = a - b ; / / C o m p u t e ( a - b )
i f ( a b s > = 0 ) { / / I f ( a - b ) > = 0 , a b s i s ( a - b ) a b s = a b s ;} e l s e i f ( a b s < 0 ) { / / I f ( a - b ) < 0 , a b s i s ( a - b ) * ( - 1 ) a b s = a b s * - 1 ;}a b s ;/ / : 7 2
What abs will be if a = 1812 and b = 1984?
if (else if...else)i f ( B O O L E A N _ E X P R E S S I O N _ 1 ) { P R O G R A M _ B L O C K _ 1 ;} e l s e i f ( B O O L E A N _ E X P R E S S I O N _ 2 ) { P R O G R A M _ B L O C K _ 2 ;} e l s e { P R O G R A M _ B L O C K _ 3 ;}
The program check if:1. BOOLEAN_EXPRESSION_1 is evaluated as 㫗�㫘�㫘�㫘�, then
PROGRAM_BLOCK_1 is executed, else if2. BOOLEAN_EXPRESSION_2 is evaluated as 㫗�㫘�㫘�㫘�, then
PROGRAM_BLOCK_2 is executed. else3. if the above checks failed, PROGRAM_BLOCK_3 is
executed.
In JavaScript, else if / else is optional.if statement can be contained in another if statement.
if (else if..else)Back to abs program, we see:
v a r a = 9 ;v a r b = 8 1 ;v a r a b s ;
a b s = a - b ; / / C o m p u t e ( a - b )
i f ( a b s > = 0 ) { / / I f ( a - b ) > = 0 , a b s i s ( a - b ) a b s = a b s ;} e l s e i f ( a b s < 0 ) { / / I f ( a - b ) < 0 , a b s i s ( a - b ) * ( - 1 ) a b s = a b s * - 1 ;}a b s ;/ / : 7 2
1. 㫘�㫘�㫘�㫔�㫖�㫔�㫘�㫘�㫘� is unnecessary (have no effects on program), ifblock can be omitted.
2. else if part then will be if part.
v a r a = 9 ;v a r b = 8 1 ;v a r a b s ;
a b s = a - b ; / / C o m p u t e ( a - b ) a s a b s
i f ( a b s < 0 ) { / / I f ( a - b ) < 0 , a b s i s ( a - b ) * ( - 1 ) a b s = a b s * - 1 ;}a b s ;/ / : 7 2
The program is cleaner, and the logic is the same.
while/ / R u s s i a n r o u l e t t e p r o g r a mv a r b u l l e t = 3 ;v a r t i m e s = 1 ;v a r r o t a t e ;v a r i s D e a d = f a l s e ;
w h i l e ( t i m e s ! = = 1 0 ) { r o t a t e = M a t h . f l o o r ( M a t h . r a n d o m ( ) * ( 1 + 6 - 1 ) ) + 1 ; / / F o r n o w , y o u o n l y n e e d t o k n o w R H S p r o d u c e s r a n d o m n u m b e r f r o m 1 t o 6 . i f ( r o t a t e = = = b u l l e t ) { i s D e a d = t r u e ; b r e a k ; } t i m e s = t i m e s + 1 ;}
i s D e a d ;/ / : N a h , i t ' s e i t h e r t r u e o r f a l s e , b u t I c a n ' t t e l l y o u .
whilew h i l e ( B O O L E A N _ E X P R E S S I O N ) { P R O G R A M _ B L O C K ;}
Entry: When the program is about to enter the loop, it evaluatesBOOLEAN_EXPRESSION. If it turns out to be 㫘�㫘�㫘�㫘�, theprogram goes into PROGRAM_BLOCK, or just skip.
Loop: When PROGRAM_BLOCK is executed, it evaluatesBOOLEAN_EXPRESSION again. If it turns out to be 㫘�㫘�㫘�㫘�, theprogram goes into PROGRAM_BLOCK again, or just skip.
Termination: The loop terminates whenBOOLEAN_EXPRESSION is evaluated as 㫘�㫘�㫘�㫘�㫘�.
㫘�㫘�㫘�㫘�㫘�, 㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�:㫘�㫘�㫘�㫘�㫘�: jumps out of loop no matter what.㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�: go through the next iteration.
while/ / R u s s i a n r o u l e t t e p r o g r a mv a r b u l l e t = 3 ;v a r t i m e s = 1 ;v a r r o t a t e ;v a r i s D e a d = f a l s e ;
w h i l e ( t i m e s ! = = 1 0 ) { r o t a t e = M a t h . f l o o r ( M a t h . r a n d o m ( ) * ( 1 + 6 - 1 ) ) + 1 ; / / F o r n o w , y o u o n l y n e e d t o k n o w R H S p r o d u c e s r a n d o m n u m b e r f r o m 1 t o 6 . i f ( r o t a t e = = = b u l l e t ) { i s D e a d = t r u e ; b r e a k ; } t i m e s = t i m e s + 1 ;}
i s D e a d ;/ / : N a h , i t ' s e i t h e r t r u e o r f a l s e , b u t I c a n ' t t e l l y o u .
㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫖�㫖�㫔�㫔�㫔�: Boolean Expression.㫘�㫘�㫘�㫘�㫘�: jumps out of loop since you're dead already.㫘�㫘�㫘�㫘�㫘�㫔�㫖�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫔�㫔�: It guarantees that your programterminates at last.How many rounds the player has to play if he / she is luckyenough to stay alive?
Exercises for whileRefine Russian roulette program by introducing 㫘�㫘�㫘�㫚�㫘�㫘� variable.㫘�㫘�㫘�㫚�㫘�㫘� can be either 㫔� or 㫔�. The program shall show that itindicates a death duel (Program stops when either player 1 orplayer 2 winds up dead.)
forRecall while loop in Russian roulette program:
v a r t i m e s = 1 ;. . .w h i l e ( t i m e s ! = = 1 0 ) { . . . t i m e s = t i m e s + 1 ;}
The pattern is so common that it leads to the birth of for:f o r ( v a r t i m e s = 1 ; t i m e s ! = = 1 0 ; t i m e s = t i m e s + 1 ) { . . .}
forf o r ( I N I T I A L I S E R ; C O N D I T I O N ; I T E R A T O R ) { P R O G R A M _ B L O C K ;}
can be expanded to:I N I T I A L I S E R ;w h i l e ( C O N D I T I O N ) { P R O G R A M _ B L O C K ; I T E R A T O R ;}
forRecall prime test problem.
v a r n = 8 8 4 9 ;v a r s q r t O f N = M a t h . s q r t ( n ) ;v a r i s P r i m e = t r u e ;
f o r ( v a r i = 2 ; i < s q r t O f N ; i = i + 1 ) { i f ( n % i = = = 0 ) { i s P r i m e = f a l s e ; b r e a k ; }}
i s P r i m e ;/ / : t r u e
Notice i starts from 2.n % 0 produces 㫗�㫘�㫗�
Wait, you said we only need to check the primes !However, checking all numbers includes checking those areprime. (weaker)
} x√
Exercises for forCalculate the sum of 1 to 1000, using for.Explain why is superior.(1+n)n
2
ExercisesCollatz conjecture: for any natural number , if:
is odd: verify is even: verify
recursively, and ends up with 1. Using while, and for to verify Collatz conjecture holds for 1 -10000;
n > 1n 3n + 1n n
2n reference
Function
Prime Test (again?)v a r n = 8 8 4 9 ;v a r s q r t O f N = M a t h . s q r t ( n ) ;v a r i s P r i m e = t r u e ;
f o r ( v a r i = 2 ; i < s q r t O f N ; i = i + 1 ) { i f ( n % i = = = 0 ) { i s P r i m e = f a l s e ; b r e a k ; }}
i s P r i m e ;/ / : t r u e
What if we want to check whether 15919 is a prime number?
Easy, just copy & paste and change n:v a r n = 1 5 9 1 9 ;v a r s q r t O f N = M a t h . s q r t ( n ) ;v a r i s P r i m e = t r u e ;
f o r ( v a r i = 2 ; i < s q r t O f N ; i = i + 1 ) { i f ( n % i = = = 0 ) { i s P r i m e = f a l s e ; b r e a k ; }}
i s P r i m e ;/ / : t r u e
Okay, what about 15791 15797 15803 15809 15817 15823 1585915877 15881 15887 15889 15901 15907 15913 15919 1592315937 15959 15971 15973 15991 16001 16007 16033 16057
16061 16063 16067 16069 16073 .......
As you can see, these codes is basically the same, except for n.We can refine the code by parameterisation and make it asubprogram.
v a r i s P r i m e = f u n c t i o n ( n ) { v a r s q r t O f N = M a t h . s q r t ( n ) ; v a r i s P r i m e = t r u e ;
f o r ( v a r i = 2 ; i < s q r t O f N ; i = i + 1 ) { i f ( n % i = = = 0 ) { i s P r i m e = f a l s e ; r e t u r n i s P r i m e ; } } r e t u r n i s P r i m e ;} ;/ / : u n d e f i n e di s P r i m e ( 1 5 9 0 7 ) ;/ / : t r u e
Here, we take n as the parameter of the function.It return values either true or false;Note you can totally discard isPrime by simply return true orfalse.
Ugh, you got two isPrime, which ones you're talking about?
FunctionDefinition
Function as subprogramFunction as mapping from domain to range (mathematicaldefinition)
However, in JavaScript, the border of definitions becomeblurred.In JavaScript, function can be seen having two phases:1. Definition: define the function body, assign it to a variable.2. Invocation / Application: execute the function body by giving
the parameters to function variable.
How to define a functionv a r F U N C T I O N _ N A M E ;F U N C T I O N _ N A M E = f u n c t i o n ( p 1 , p 2 , p 3 . . . . . ) { P R O G R A M _ B L O C K ;} ;
The function body which takes p1, p2, p3... as parameters andexecutes PROGRAM_BLOCK, is assigned toFUNCTION_NAME.
You might see the following as well, but it didn't give a sense offunction as data.
f u n c t i o n F U N C T I O N _ N A M E ( p 1 , p 2 , p 3 . . . . . . ) { P R O G R A M _ B L O C K ;}
How to apply functionF U N C T I O N _ N A M E ( p 1 , p 2 , p 3 . . . . . . ) ;/ / : r e t u r n v a l u e o r u n d e f i n e d .
Simply supply parameters to function.
PROGRAM_BLOCK may contain 㫘�㫘�㫘�㫘�㫘�㫘� keyword, whichtakes one value as the result of the function. If it's not given,function will return 㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘� instead.
v a r s u m O f = f u n c t i o n ( n ) { v a r s u m = ( 1 + n ) * n / 2 ; r e t u r n s u m ;} ;/ / : u n d e f i n e d ;s u m O f ( 1 0 0 0 ) ;/ / : 5 0 0 5 0 0v a r s u m O f 2 = f u n c t i o n ( n ) { v a r s u m = ( 1 + n ) * n / 2 ;} ;/ / : u n d e f i n e ds u m O f 2 ( 1 0 0 0 ) ;/ / : u n d e f i n e d
When to define a function1. You discover duplicate code and common pattern, and you need
to abstract it.We've seen it before.
2. You discover the mathematical relation of input and output.v a r f i b o n a c c i = f u n c t i o n ( x ) { i f ( x = = = 1 | | x = = = 2 ) { r e t u r n 1 ; } e l s e i f ( x > 2 ) { r e t u r n f i b o n a c c i ( x - 1 ) + f i b o n a c c i ( x - 2 ) ; }} ;
It just a plain translation from the definition of Fibonaccinumber.
ParameterJavaScript functions do not check the number of argumentsreceived.
If you supply more arguments than those you define, theremaining will be omitted.
If you supply less, the rest will be set as 㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�.v a r f n = f u n c t i o n ( a , b , c ) { r e t u r n a * b * c ;} ;f n ( 1 , 2 , 3 ) ;/ / : 6f n ( 1 , 2 ) ;/ / : N a N ( a n y n u m b e r m u l t i p l i e s u n d e f i n e d e q u a l s t o N a N )f n ( 1 , 2 , 3 , 7 , 9 ) ;/ / : 6
Default Values
JavaScript doesn't support default values of parameters bydefault, but it can be addressed via:
JavaScript evaluates boolean expression in the form of㫘�㫘�㫘�㫘�㫔�㫚�㫚�㫔�㫔�㫘�㫘�㫚�㫘�㫘�㫘�㫘�㫘�㫔�. In this case, if 㫘� is 㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�, ifevaluates as 㫔�;
v a r f n = f u n c t i o n ( a , b ) { a = a | | 3 ; b = b | | 7 ; r e t u r n a * b ;} ;f n ( ) ;/ / : 2 1f n ( 9 ) ;/ / : 6 3
Anonymous Function ( )λRecall when we define a function, we define the function bodyfirst and assign it to a variable later.Instead of assigning it to a variable, the function body can beused directly, it's called 㫘�㫘�㫘�㫘�㫚�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘� in such context.
For example, execute function right after the definition:( f u n c t i o n ( a , b ) { r e t u r n a * b ;} ) ( 7 , 6 ) ;/ / : 4 2
Function as DataIn JavaScript, you can pass function as data to other function,return function out of function.You can construct your logical components in the unit offunctions, and junction them together.It's quite common pattern in JavaScript: using function asfunction callback.
v a r r e p e a t = f u n c t i o n ( f , t i m e s ) { r e t u r n f u n c t i o n ( n ) { v a r v = n ; f o r ( v a r i = 0 ; i < t i m e s ; i = i + 1 ) { v = f ( v ) ; } r e t u r n v ; } ;} ;/ / : u n d e f i n e dv a r s q u a r e = f u n c t i o n ( n ) { r e t u r n n * n ;} ;/ / : u n d e f i n e dv a r q u a d = r e p e a t ( s q u a r e , 2 ) ;/ / : u n d e f i n e dq u a d ( 3 ) ;/ / : 8 1
We use square function to make a new function quad which is: quad(x) = square(square(x))
ScopeIn JavaScript, when you invoke a function, you create a localscope.When you access a variable in a function, it first lookups thevariables in the scope (parameters, local variables), if it didn'tfind a one, it lookups outside the functions. (Bubble up)
v a r i s P r i m e = f u n c t i o n ( n ) { v a r s q r t O f N = M a t h . s q r t ( n ) ; v a r i s P r i m e = t r u e ;
f o r ( v a r i = 2 ; i < s q r t O f N ; i = i + 1 ) { i f ( n % i = = = 0 ) { i s P r i m e = f a l s e ; r e t u r n i s P r i m e ; } } r e t u r n i s P r i m e ;} ;
Due to the declaration of 㫘�㫘�㫗�㫘�㫘�㫘�㫘� in the function, all 㫘�㫘�㫗�㫘�㫘�㫘�㫘�occurs in the function act as a concrete variable different fromthe function name.
Hosting
Consider the program:
㫘�㫘�㫔�㫔� will be 10? or 100?
v a r x = 1 0 ;v a r f n = f u n c t i o n ( ) { r e t u r n x ; v a r x = 1 0 0 ;} ;f n ( ) ;/ / : ?
㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘� actually, but why?
The code actually looks like this:v a r x = 1 0 ;v a r f n = f u n c t i o n ( ) { v a r x ; / / x i s u n d e f i n e d t h e n . r e t u r n x ; x = 1 0 0 ;} ;f n ( ) ;/ / : u n d e f i n e d
When you invoke a function, the interpreter scans through yourfunction body and define the variables you declare first (notassigned, yet.) and then it executes line by line.So, in reality, it's a good practice to define your variables at top,then your program logic.
Closurev a r x = 1 0 ;v a r f n = f u n c t i o n ( n ) { r e t u r n n * x ;} ;f n ( 1 0 ) ;/ / : 1 0 0n ;/ / : u n d e f i n e dx = 1 0 0 0 ;f n ( 1 0 ) ;/ / : 1 0 0 0 0
Functions that refer to independent (free) variables. In otherwords, the function defined in the closure 'remembers' theenvironment in which it was created.
Since 㫘�㫘� has access to REPL, 㫘�㫘�'s behaviour is dependent onREPL. (if REPL will be modified later)
By-Value vs By-ReferenceWhen we talk about variable as parameters of the function:
By-value: the program will make a copy of variable andoperate on the copy.By-Reference: the program will operate directly on thevariable.
In JavaScript, variables which have primitive type (boolean,number, string) goes by-value, and those with composite types(object, array..) go by-reference.
By-Value:v a r f n = f u n c t i o n ( x ) { x = 1 0 0 0 ; r e t u r n x ;} ;/ / : u n d e f i n e dv a r n = 1 0 ;/ / : u n d e f i n e df n ( n ) ;/ / : 1 0 0 0n ;/ / : 1 0
By-Reference:v a r f n = f u n c t i o n ( x ) { x . p u s h ( 0 ) ; r e t u r n x ;} ;/ / : u n d e f i n e dv a r c = [ ] ;/ / : u n d e f i n e df n ( c ) ;/ / : [ 0 ]c ;/ / : [ 0 ]
ExercisesRecall abs program, choose proper parameters and make it afunction.
Design a function fn which gets off work: Write a functionwhich takes a function f and produces another function whichonly works between 9 AM - 5 PM. Your code might work likethis:
v a r s q u a r e = f n ( f u n c t i o n ( e ) { r e t u r n e * e ;} ) ;s q u a r e ( 2 ) ; / / I t ' s 8 : 5 0 n o w/ / : " I ' m o f f w o r k n o w , l e a v e m e a l o n e ! "s q u a r e ( 2 ) ; / / I t ' s 9 : 0 1 n o w/ / : 4
To do so, you need to know the current time:
It's actually a quite common pattern in functional programming,to compose new functions by mixing them together.
We'll introduce the concept of object later.
v a r c u r r e n t D a t e = n e w D a t e ( ) ;v a r c u r r e n t H o u r = c u r r e n t D a t e . g e t H o u r s ( ) ;c u r r e n t H o u r ;/ / : 0 ( i t v a r i e s )
Array
What does an array look like?v a r p r i m e s = [ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ] ;/ / : u n d e f i n e dp r i m e s/ / : [ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ] ;p r i m e s [ 3 ] ;/ / : 7p r i m e s [ 8 9 ] ;/ / : u n d e f i n e d
Index Value
0 2
1 3
2 5
...
ArrayLike list.
Used to represent sequential data.Neither the length nor the types of an array are fixed.
However, keep it the same type helps design / use algorithm.
Access its value by a given index, where the index startsfrom 0.
where 2 is the index, and 5 is the value.
p r i m e s [ 2 ] ;/ / : 5
Construct ArrayEither by array literal or array.push method:
v a r p r i m e s = [ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ] ; / / a r r a y l i t e r a l/ / : u n d e f i n e d
v a r p r i m e s = [ ] ; / / d e f i n e a e m p t y a r r a y/ / : u n d e f i n e dp r i m e s . p u s h ( 2 ) ;/ / : 1p r i m e s . p u s h ( 3 ) ;/ / : 2
Add element to an array
The index increases incrementally when new element is added.
array.push method return the length of the new-added array.
Some use 㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫖�㫔�㫔�㫔�, which returns thevalue.
p r i m e s . p u s h ( 2 3 ) ;/ / : 9p r i m e s [ 8 ] ;/ / : 2 3
Remove element from an arrayEither by array.pop or array.splice method:
array.pop(): remove the last item and return it.
array.splice(s, c, [items]): remove c items from s, added itemsif supplied. (return the deleted part.)
v a r p r i m e s = [ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ] ;/ / : u n d e f i n e dp r i m e s . p o p ( ) ;/ / : 1 9p r i m e s ;/ / : A r r a y [ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 ]p r i m e s . s p l i c e ( 1 , 2 , 0 , 0 ) ;/ / : A r r a y [ 3 , 5 ] p r i m e s ;/ / : A r r a y [ 2 , 0 , 0 , 7 , 1 1 , 1 3 , 1 7 ] ;
Lookup / Modify the array
Remark: we can access the value by a given index:
To change its value, simply assign:
p r i m e s [ 3 ] ;/ / : 7
p r i m e s [ 3 ] = 3 ;/ / : 3 ;p r i m e s [ 3 ] ;/ / : 3
Some properties / methods on Arrayarray.length: returns the length of the array.
returns (the maximum index + 1) of the array
Stick to array.push or arr[arr.length]
v a r p r i m e s = [ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ] ;/ / : u n d e f i n e dp r i m e s [ 8 8 4 9 ] = 9 1 5 2 9 ;/ / : 9 1 5 2 9p r i m e s . l e n g t h ;/ / : 8 8 5 0p r i m e s ;/ / : A r r a y [ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 , < 2 e m p t y s l o t s > , 8 8 4 0 m o r e … ]
Some properties / methods on Arrayarray.slice(start, [end]): make a new array as sub-array from theoriginal one
start: the start position of the array for sub-array, could benegative (count backward from the end.)
end: the end position of the array for sub-array, could benegative. Defaults to the length of array.
Don't be confused with array.splice.
v a r p r i m e s = [ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ] ;/ / : u n d e f i n e dp r i m e s . s l i c e ( 3 , 7 ) ;/ / : A r r a y [ 7 , 1 1 , 1 3 , 1 7 ]p r i m e s ;/ / : A r r a y [ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ]
Sorting
Consider the following program:
By default, the array sorts according to each character's Unicodevalue, converted to String first if not.
To make use of array.sort function, we need to supply acomparison function.
[ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ] . s o r t ( ) ;/ / : A r r a y [ 1 1 , 1 3 , 1 7 , 1 9 , 2 , 3 , 5 , 7 ]
Sorting
The comparison function is supplied as parameter of sortfunction.
a and b denotes arbitrary items.The comparison function denotes the relations of two items by:
[ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ] . s o r t ( f u n c t i o n ( a , b ) { r e t u r n ( a - b ) ;} ) ;/ / : A r r a y [ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ]
(a + b < 0) → (a < b)(a + b = 0) → (a = b)(a + b > 0) → (a > b)
The sort method will swap if the return value is larger than 0.
By default it sorts in ascending order. To sort in descendingorder, simply return 㫔�㫘�㫔�㫔�㫔�㫘�㫔�
How the relations are represented in the above function?
How you would write a comparison function to make it keep thearray the same? (unsorted)
[ 2 , 3 , 5 , 7 , 1 1 , 1 3 , 1 7 , 1 9 ] . s o r t ( f u n c t i o n ( a , b ) { r e t u r n ( b - a ) ;} ) ;/ / : A r r a y [ 1 9 , 1 7 , 1 3 , 1 1 , 7 , 5 , 3 , 2 ]
ExercisesSelection Sort (ascending)
For one unsorted array: [6, 9, 7, 2, 3]Compare the first element (6 in the case) with the rest byeach, swap them if the first is larger than any in the rest.
In the case, 6 will be swapped with 2. Since we knew , and those compared with 6 , we knew those
compared with 6 (Transitive relation)6 > 2 > 6
> 2
Selection Sort (ascending)After one iteration, the first one is the smallest in thearray. ([2, 9, 7, 6, 3])Start again from the second element (9 in the case), and thethird..., to the end of the array.
See visualisation
Selection Sort with Comparison FunctionRefine your sorting algorithm with one function parameter,known as comparison function, which is the same asarray.sort
Object
ObjectAn object is a collection of properties. Properties could be:
Primitive types: Number, String, BooleanComposite types: Object
Object could be: Function, ArrayFunction in object is called method.
Whey do we need object, after all?
To define a square in Cartesian coordinates system, we havetwo different ways:
Records four points such as (0, 0), (4, 0), (0, 4), (4, 4)Records the center point (2, 2) and the length of its sides (4)
Diagonal is always larger than the side.
Two representaions of a square
To calculate the area of the square, using the definition 1:v a r p 1 x = 0 ;v a r p 1 y = 0 ;v a r p 2 x = 4 ;v a r p 2 y = 0 ;v a r p 3 x = 0 ;v a r p 3 y = 4 ;v a r p 4 x = 4 ;v a r p 4 y = 4 ;v a r d i s t a n c e = f u n c t i o n ( p 1 x , p 1 y , p 2 x , p 2 y ) { r e t u r n M a t h . s q r t ( M a t h . p o w ( p 1 x - p 2 x , 2 ) + M a t h . p o w ( p 1 y - p 2 y , 2 ) ) ;} ;v a r s q u a r e A r e a = f u n c t i o n ( p 1 x , p 1 y , p 2 x , p 2 y , p 3 x , p 3 y , p 4 x , p 4 y ) { v a r d 1 = d i s t a n c e ( p 1 x , p 1 y , p 2 x , p 2 y ) ; v a r d 2 = d i s t a n c e ( p 1 x , p 1 y , p 3 x , p 3 y ) ; v a r l e n g t h = ( d 1 < = d 2 ) ? d 1 : d 2 ; / / ( d 1 , d 2 m i g h t b e o n l y d i a g o n a l / s i d e . ) r e t u r n l e n g t h * l e n g t h ;} ;s q u a r e A r e a ( p 1 x , p 1 y , p 2 x , p 2 y , p 3 x , p 3 y , p 4 x , p 4 y ) ;
One day, your lead programmer came and says: "Hey, let's dothat in def 2!"
The code is prettier, but every occurrence of old 㫘�㫘�㫘�㫘�㫘�㫘�㫖�㫘�㫘�㫘�need to be modified, along with the coordinates of squares.
v a r c 1 x = 2 ;v a r c 2 y = 2 ;v a r s i d e = 4 ;v a r s q u a r e A r e a = f u n c t i o n ( s i d e ) { r e t u r n s i d e * s i d e ;} ;
Imagine Find / Replace for few hundred times...
Let's make a object of it!In fact, what we REALLY care about is the square, not itscoordinates / sides.
We want to know the area of the square, right?
if we have something like:
Let's refine our code then.
Wouldn't it be nicev a r s q u a r e A r e a = f u n c t i o n ( s q u a r e ) { . . . . . .} ;s q u a r e A r e a ( s q u a r e ) ;/ / : 1 6
v a r s q u a r e = { p 1 : { x : 0 , y : 0 } , p 2 : { x : 4 , y : 0 } , p 3 : { x : 0 , y : 4 } , p 4 : { x : 4 , y : 4 }} ;
(Cont'd)v a r d i s t a n c e = f u n c t i o n ( p 1 , p 2 ) { r e t u r n M a t h . s q r t ( M a t h . p o w ( p 1 . x - p 2 . x , 2 ) + M a t h . p o w ( p 1 . y - p 2 . y} ;v a r s q u a r e A r e a = f u n c t i o n ( s ) { v a r d 1 = d i s t a n c e ( s . p 1 , s . p 2 ) ; v a r d 2 = d i s t a n c e ( s . p 1 , s . p 3 ) ; v a r l e n g t h = ( d 1 < = d 2 ) ? d 1 : d 2 ; r e t u r n l e n g t h * l e n g t h ;} ;s q u a r e A r e a ( s q u a r e ) ;/ / : 1 6
Create ObjectWe create object by object literal:
object literal: {key: value, [key: value...]}Key is unique.we created a nested object. (since the value of 㫘�㫔� is a objectand etc.)
You can create new property on the fly:v a r o b j = { a : 0} ;o b j . b = 1 ;o b j ;/ / : O b j e c t { a : 0 , b : 1 }
Access object
We access the value of properties by pointing to their keys, suchas:
Note: you can access properties in the form of square['p1'], too.(useful when you need to determine key on runtime.)
s q u a r e . p 1 . x ;/ / : 0 , w h i c h i s e q u a l s t o :v a r p 1 = s q u a r e . p 1 ;p 1 . x ;/ / : 0
Let's rewrite in Def. 2
Notice the parameters of squareArea is the same as the previousone.
v a r s q u a r e = { c 1 : { x : 2 , y : 2 } , s i d e : 4} ;v a r s q u a r e A r e a = f u n c t i o n ( s ) { r e t u r n s . s i d e * s . s i d e ;} ;s q u a r e A r e a ( s q u a r e ) ;/ / : 1 6
Methods
When you put function into the object:
㫘�㫘�㫘�㫘� is a reference to the object itself.
array.sort and such are all object methods.
v a r s q u a r e = { c 1 : { x : 2 , y : 2 } , s i d e : 4 , g e t A r e a : f u n c t i o n ( ) { r e t u r n t h i s . s i d e * t h i s . s i d e ; }} ;s q u a r e . g e t A r e a ( ) ;/ / : 1 6
㫘�㫘�㫘�㫘�
㫘�㫘�㫘�㫘� depends on the current context where function is invoked:
Since when the function is invoked, the current scope refers tothe function body itself and outer (recall closure), and there is no㫘�㫘�㫘�㫘� defined.
/ / N o t i c e w e a s s i g n t h e f u n c t i o n b o d y i n s t e a d o f c a l l i n g i t .v a r a r e a = s q u a r e . g e t A r e a ;a r e a ( ) ;/ / : N a N
Function vs. MethodWe put function in a object (method) when it's dependent of theobject.A good indicator is the use of 㫘�㫘�㫘�㫘�.Of course, it might arise political wars. : ) (Critical thinking, and
only the paranoid survive!)
Create object based on the existing one.
The object is by-reference, so the following don't copy newobject. (They refers to the same object.)
v a r o b j = { f o o : ' b a r '} ;v a r n e w O b j = o b j ;n e w O b j . b a z = ' q u x ' ;o b j . b a z ;/ / : ' q u x '
To construct a new object, we can use:Object.create (ECMAScript 5)㫘�㫘�㫘� Keywordfunction returning new object
We sticks to the first for now.
v a r o b j = { f o o : m s g , b a z : ' q u x '} ;
v a r o b j 1 = O b j e c t . c r e a t e ( o b j ) ;v a r o b j 2 = O b j e c t . c r e a t e ( o b j ) ;o b j 1 . b a z = ' L a l a l a ' ;o b j 2 . b a z ;/ / : ' q u x '
Construct Playlist
Given the following playlist:
Can you choose proper data structure for it?
T r a c k N a m e A r t i s t D u r a t i o n ( s )- - - - - - - - - - - - - - - - - - - - - - - - - - - -G o d O n l y K n o w s T h e B e a c h B o y s 1 7 1P i a n o M a n B i l l y J o e l 3 3 8N e w Y o r k , N e w Y o r k F r a n k S i n a t r a 2 0 6M y W a y F r a n k S i n a t r a 2 7 6N e w Y o r k , N e w Y o r k C a t P o w e r 1 2 0D o w n t o w n T r a i n E v e r y t h i n g b u t t h e G i r l 1 8 4I ' m G o n n a B e ( 5 0 0 M i l e s ) T h e P r o c l a i m e r s 2 1 7L a V i e E n R o s e C r i s t i n M i l i o t i 1 1 5
Since it's a playlist, an array is a reasonable choice.
How can we represent one song? Maybe using array:v a r s o n g = [ ' G o d O n l y K n o w s ' , ' T h e B e a c h B o y s ' , 1 7 1 ] ;
and access the property by 㫘�㫘�㫘�㫘�㫘�㫔�㫘�....
Nah, it sucks.We cannot determine the relation between properties andindex directly!
Using object:
And we can puts it in an array:
v a r s o n g = { t i t l e : ' G o d O n l y K n o w s ' , a r t i s t : ' T h e B e a c h B o y s ' , d u r a t i o n : 1 7 1} ;
v a r p l a y l i s t = [ { t i t l e : ' G o d O n l y K n o w s ' , a r t i s t : ' T h e B e a c h B o y s ' , d u r a t i o n . . . . . .] ;
ExercisesWe can answer questions like:
What songs is performed by Frank Sinatra?Going through the list and find those performed by him.
Can you sort the playlist by its duration?Recall array.sort method?
List all artists who perform New York, New YorkGoing through the list and find those performed the song.
How many object exist in the code?8? Are you sure...
InheritanceJavaScript uses prototype-based inheritance, by referring toexisting object to extends its behaviours.Each object may has a prototype reference, which points to theobject they want to inherit.
when you access properties, it searches from itself, then itsprototype object. If the object is found and property exists, thenit stops. If not, it searches from its prototype object again....recursively, to 㫗�㫘�㫘�㫘�㫘�㫘� or failed when it cannot find prototypeobject.v a r a = { f o o : ' b a r '} ;v a r b = O b j e c t . c r e a t e ( a ) ; a . i s P r o t o t y p e O f ( b ) ;/ / : t r u eO b j e c t . g e t P r o t o t y p e O f ( b ) = = = a ;/ / : t r u e , i t r e f e r s t o t h e s a m e m e m o r y l o c a t i o n .b . f o o ;/ / : " b a r "b . f o o = ' b a z ' ;b . f o o ;/ / : " b a z " , s i n c e b h a s i t s o w n f o o p r o p e r t y n o w , ( w h a t a b o u t a . f o o ? )
So, instead of class-based, prototype-based much more like:
To see more .about prototype
Primitive types: object or not?Recall the definition of object:
An object is a collection of properties.str.toUpperCase is a function, and it got a property calledtoUpperCase, so it's a object!?
str.toUpperCase is actually:
If you use typeof to check it's type.
Warning: typeof could be very deceiving, and typeof is aoperator, not a function.
' I t \ ' s o v e r n o w , t h e m u s i c o f t h e n i g h t ! ' . t o U p p e r C a s e ( ) ;/ / : " I T ' S O V E R N O W , T H E M U S I C O F T H E N I G H T ! "/ / T h i s i s a c t u a l l y d o n e v i a a w r a p p e r o b j e c t :v a r s t r = n e w S t r i n g ( ' I t \ ' s o v e r n o w , t h e m u s i c o f t h e n i g h t ! ' ) ;s t r . t o U p p e r C a s e ( ) ;/ / : " I T ' S O V E R N O W , T H E M U S I C O F T H E N I G H T ! "
t y p e o f s t r ;/ / : " o b j e c t "t y p e o f ' I t \ ' s o v e r n o w , t h e m u s i c o f t h e n i g h t ! ' ;/ / : " s t r i n g "
ExercisesAfter the accident of Opéra de Paris, the Phantom was on therun. He had an income of 22K and he needed to pay 15K tokeep himself alive. Design an phantom object which helps himcalculate how much he still had.Design an object representing your mobile, and explain yourdesign.
Recommended