JavaScript: Core Part
Transcript of JavaScript: Core Part
![Page 1: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/1.jpg)
[solutions]
JavaScript: CorePart
Wei-Shao TangApril 15, 2015
![Page 2: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/2.jpg)
Who am I?Why JavaScript?Language
ECMAScriptCore PartPrimitive Type and VariablesStringControl StructureFunctionArrayObject
![Page 3: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/3.jpg)
Who am I?
![Page 4: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/4.jpg)
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
![Page 5: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/5.jpg)
Why JavaScript?
![Page 6: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/6.jpg)
"JavaScript is eating the world."
![Page 7: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/7.jpg)
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
![Page 10: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/10.jpg)
Language
![Page 11: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/11.jpg)
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.)
![Page 12: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/12.jpg)
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/
![Page 13: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/13.jpg)
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 ;} ;
![Page 14: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/14.jpg)
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
→→
→
![Page 15: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/16.jpg)
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.
![Page 17: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/17.jpg)
Core Part
![Page 18: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/18.jpg)
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.
![Page 19: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/19.jpg)
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)
![Page 20: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/20.jpg)
"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.
![Page 21: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/21.jpg)
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.
![Page 22: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/22.jpg)
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.
![Page 23: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/23.jpg)
Type 㫔�㫔�㫔�㫔�㫔�㫖� and then press "Enter", it will output 㫔�.
![Page 24: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/25.jpg)
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 ( ) ;
![Page 26: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/26.jpg)
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.
![Page 27: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/27.jpg)
Primitive Typeand Variables
![Page 28: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/28.jpg)
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
![Page 29: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/29.jpg)
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
![Page 30: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/30.jpg)
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.
![Page 31: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/31.jpg)
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.
![Page 32: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/32.jpg)
Boolean TypeOnly contains two values: It denotes the truth value of one proposition, such as:
㫖�㫔�㫖�㫔�㫖�㫖�㫖�㫔�㫔�㫖�㫔�㫔�㫔�㫖�㫔�㫔�
{true, f alse}
![Page 33: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/33.jpg)
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
![Page 34: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/34.jpg)
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
![Page 35: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/35.jpg)
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
![Page 36: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/36.jpg)
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
![Page 37: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/37.jpg)
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
![Page 38: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/38.jpg)
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
![Page 39: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/39.jpg)
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.
![Page 40: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/40.jpg)
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
![Page 41: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/41.jpg)
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 ;
![Page 42: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/42.jpg)
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
![Page 43: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/43.jpg)
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
![Page 44: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/44.jpg)
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
![Page 45: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/45.jpg)
㫘�㫘�㫘�㫘�
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
![Page 46: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/46.jpg)
㫘�㫘�㫘�㫘� 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)
![Page 47: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/47.jpg)
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
![Page 48: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/48.jpg)
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
![Page 49: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/49.jpg)
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.
![Page 50: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/50.jpg)
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
![Page 51: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/51.jpg)
String
![Page 52: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/52.jpg)
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 ' ;
![Page 53: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/53.jpg)
㫔� 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 "
![Page 54: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/54.jpg)
㫘�㫘�㫘�㫘�㫘�㫔� 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
![Page 55: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/55.jpg)
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 ! "
![Page 56: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/56.jpg)
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 "
![Page 57: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/57.jpg)
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
![Page 58: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/58.jpg)
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 "
![Page 59: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/59.jpg)
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 " ]
![Page 60: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/60.jpg)
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......
![Page 61: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/61.jpg)
"Complicated string operation?"
![Page 62: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/62.jpg)
Regular expression comes to rescue!
![Page 63: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/63.jpg)
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
![Page 64: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/64.jpg)
Control Structure
![Page 65: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/65.jpg)
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
![Page 66: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/66.jpg)
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
![Page 67: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/67.jpg)
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)
![Page 68: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/68.jpg)
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.
![Page 69: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/69.jpg)
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?
![Page 70: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/70.jpg)
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.
![Page 71: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/71.jpg)
In JavaScript, else if / else is optional.if statement can be contained in another if statement.
![Page 72: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/72.jpg)
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.
![Page 73: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/73.jpg)
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.
![Page 74: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/74.jpg)
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 .
![Page 75: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/75.jpg)
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.
![Page 76: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/76.jpg)
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.
![Page 77: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/77.jpg)
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 .
![Page 78: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/78.jpg)
㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫖�㫖�㫔�㫔�㫔�: 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?
![Page 79: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/79.jpg)
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.)
![Page 80: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/80.jpg)
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 ) { . . .}
![Page 81: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/81.jpg)
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 ;}
![Page 82: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/82.jpg)
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
![Page 83: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/83.jpg)
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√
![Page 84: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/84.jpg)
Exercises for forCalculate the sum of 1 to 1000, using for.Explain why is superior.(1+n)n
2
![Page 85: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/85.jpg)
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
![Page 86: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/86.jpg)
Function
![Page 87: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/87.jpg)
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?
![Page 88: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/88.jpg)
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
![Page 89: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/89.jpg)
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 .......
![Page 90: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/90.jpg)
As you can see, these codes is basically the same, except for n.We can refine the code by parameterisation and make it asubprogram.
![Page 91: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/91.jpg)
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
![Page 92: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/92.jpg)
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?
![Page 93: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/93.jpg)
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.
![Page 94: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/94.jpg)
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 ;}
![Page 95: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/95.jpg)
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.
![Page 96: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/96.jpg)
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
![Page 97: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/97.jpg)
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.
![Page 98: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/98.jpg)
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
![Page 99: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/99.jpg)
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
![Page 100: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/100.jpg)
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
![Page 101: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/101.jpg)
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.
![Page 102: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/102.jpg)
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))
![Page 103: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/103.jpg)
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)
![Page 104: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/104.jpg)
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.
![Page 105: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/105.jpg)
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 ( ) ;/ / : ?
![Page 106: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/106.jpg)
㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘� 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
![Page 107: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/107.jpg)
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.
![Page 108: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/108.jpg)
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)
![Page 109: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/109.jpg)
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.
![Page 110: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/110.jpg)
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
![Page 111: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/111.jpg)
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 ]
![Page 112: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/112.jpg)
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
![Page 113: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/113.jpg)
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 )
![Page 114: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/114.jpg)
Array
![Page 115: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/115.jpg)
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
...
![Page 116: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/116.jpg)
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
![Page 117: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/117.jpg)
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
![Page 118: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/118.jpg)
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
![Page 119: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/119.jpg)
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 ] ;
![Page 120: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/120.jpg)
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
![Page 121: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/121.jpg)
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 … ]
![Page 122: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/122.jpg)
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 ]
![Page 123: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/123.jpg)
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 ]
![Page 124: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/124.jpg)
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)
![Page 125: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/125.jpg)
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 ]
![Page 126: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/126.jpg)
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
![Page 127: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/127.jpg)
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
![Page 128: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/128.jpg)
Selection Sort with Comparison FunctionRefine your sorting algorithm with one function parameter,known as comparison function, which is the same asarray.sort
![Page 129: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/129.jpg)
Object
![Page 130: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/130.jpg)
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.
![Page 131: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/131.jpg)
Whey do we need object, after all?
![Page 132: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/132.jpg)
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
![Page 133: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/133.jpg)
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 ) ;
![Page 134: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/134.jpg)
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 ;} ;
![Page 135: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/135.jpg)
Imagine Find / Replace for few hundred times...
![Page 136: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/136.jpg)
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
![Page 137: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/137.jpg)
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 }} ;
![Page 138: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/138.jpg)
(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
![Page 139: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/139.jpg)
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 }
![Page 140: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/140.jpg)
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
![Page 141: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/141.jpg)
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
![Page 142: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/142.jpg)
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
![Page 143: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/143.jpg)
㫘�㫘�㫘�㫘�
㫘�㫘�㫘�㫘� 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
![Page 144: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/144.jpg)
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!)
![Page 145: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/145.jpg)
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 '
![Page 146: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/146.jpg)
To construct a new object, we can use:Object.create (ECMAScript 5)㫘�㫘�㫘� Keywordfunction returning new object
We sticks to the first for now.
![Page 147: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/147.jpg)
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 '
![Page 148: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/148.jpg)
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
![Page 149: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/149.jpg)
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!
![Page 150: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/150.jpg)
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 . . . . . .] ;
![Page 151: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/151.jpg)
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...
![Page 152: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/152.jpg)
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.
![Page 153: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/153.jpg)
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 ? )
![Page 154: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/154.jpg)
So, instead of class-based, prototype-based much more like:
To see more .about prototype
![Page 155: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/155.jpg)
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!?
![Page 156: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/156.jpg)
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 "
![Page 157: JavaScript: Core Part](https://reader030.fdocuments.us/reader030/viewer/2022032507/55cf2f62bb61eb65308b472c/html5/thumbnails/157.jpg)
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.