Spring 2018 – University of Virginia 1© Praphamontripong
JavaScript
CS 4640 Programming Languages
for Web Applications
Spring 2018 – University of Virginia 2© Praphamontripong
How HTML, CSS, and JS Fit Together
<html> {css} javascript()
Content layerThe HTML gives
the page structure and adds semantics
Presentation layerThe CSS enhances the HTML page with rules
that state how the HTML content is presented
Behavior layerThe JS controls how the page
behaves, adding interactivity
Spring 2018 – University of Virginia 3© Praphamontripong
JavaScript: Some History• JavaScript was introduced as part of the Netscape 2.0 browser
• Microsoft soon released its own version called Jscript
• ECMA developed a standard language known as ECMAScript
• ECMAScript Edition 6 is widely supported and is what is commonly called “JavaScript”
• JavaScript = ECMAScript + DOM API
JavaScript 1.0
ES1 ES2 ES3 AJAX JQuery ES5 ES6
Spring 2018 – University of Virginia 4© Praphamontripong
Developing JavaScript Software• Writing JavaScript code
• Any text editor (e.g., Vim, Notepad, Emacs)• Specialized software (e.g., MS Visual InterDev)
• Executing JavaScript• Load into browser (need HTML document)• Browser detects syntax and run-time errors
• Firefox: JavaScript console lists errors • Window (Ctrl-Shift-J)• Mac (Command-Shift-J)
• IE: Exclamation icon and pop-up window (Bottom left)
Spring 2018 – University of Virginia 5© Praphamontripong
JavaScript• JavaScript is not Java
• JavaScript is a scripting language :• Embedded in HTML• Interpreted as the page is loaded• Can manipulate the HTML page
• Primary purpose is for client-end processing of HTML documents• Netscape’s Livewire, first server-side JS engine, allows JS to be used
for form processing on the server• We will not discuss server side JS
• No type checking
JavaScriptCoreClient sideServer side
Spring 2018 – University of Virginia 6© Praphamontripong
JavaScript Characteristics• JavaScript does not need to be compiled
• JS is an interpreted language• A JS interpreter is software that runs inside a browser that reads
and executes JavaScript
• Interpreted vs. compiled languages :• Advantage : simplicity• Disadvantages : efficiency, maintainability, scalability, reliability
Spring 2018 – University of Virginia 7© Praphamontripong
Why and Why Not JavaScript?• What can be done with JS on the client and cannot be done with
other techniques on the server?• Monitor user events and take action• Some dynamic effects
• What can be done on both client and server, but are better with JS?• Build HTML dynamically when page is loaded• Interactive web pages• Communicate with the server asynchronously (Ajax)
• What are the drawbacks of JS?• Platform dependent• Can be turned off• Performance• Security• Hard to write reliable and maintainable JS
Spring 2018 – University of Virginia 8© Praphamontripong
Embedding JS in HTMLUse the <script> tag to embed JS code in <head> or <body>
• Functions and code that may execute multiple times are typically placed in the <head> section
• These are only interpreted when the relevant function or event-handler are called
• Code that needs to be executed only once, when the document is first loaded is placed in the <body> section
Spring 2018 – University of Virginia 9© Praphamontripong
Embedding JS in HTML• JS code may be written in a separate file. The external file can
be included in an HTML file using the src attribute of a <script>tag
• JS code is visible in the client browser• Do not “hardcode” anything that you don’t want the client to see
Spring 2018 – University of Virginia 10© Praphamontripong
Script CallsSome script calls may be embedded in the HTML tags
or
Script is evaluated once encountered by browser
Spring 2018 – University of Virginia 12© Praphamontripong
Variables• Variables are loosely typed
• Type is determined dynamically based on the value stored • The typeof operator can be used to check type of a variable
• Declarations are made using the var keyword• Variables declared but not initialized have the value undefined• Variables used and not declared or initialized have value Null
• Names start with letters, $, or _ followed by any sequence of letters, $, _, or digits
• Case sensitive
Spring 2018 – University of Virginia 13© Praphamontripong
Variables• Variable is a container that hold things for later use
• String
• Number
• Undefined
• Null
• Objects (including arrays)
• Symbols
• Functions
Spring 2018 – University of Virginia 14© Praphamontripong
Variables• Loose typing means that JS figures out the type based on the
value
• Variables have block scope. • Declarations outside of any function are global• Declarations within a function are local to that function
Spring 2018 – University of Virginia 15© Praphamontripong
Expressions• If operator is + and an operand is string, it treats the + as a
string concatenation operator and coerce other operand to string
• If operator is arithmetic, and string value can be coerced to a number, it will do so
• If string is non-numeric, result is NaN (NotaNumber)
• String can be explicitly converted to a number using parseIntand parseFloat
[see jex2.html]
Spring 2018 – University of Virginia 16© Praphamontripong
Using Arithmetic Operators• Let’s initialize, y = 4
Operator Description Example Resulting x
+ Addition x = y + 5 9
x = y + “5” “45”
x = “Four” + y + “4” “Four44”
- Subtraction x = y - 2 2
++ Increment x = y++ 4
x = ++y 5
-- Decrement x = y-- 4
x = --y 3
* Multiplication x = y * 4 16
/ Division x = 10 / y 2.5
% Modulo x = y % 3 1
Spring 2018 – University of Virginia 17© Praphamontripong
Using Assignment Operators• Let’s initialize, x = 10
Operator Example Equivalent arithmetic operators Resulting x
= x = 5 x = 5 5
+= x += 5 x = x + 5 15
-= x -= 5 x = x - 5 5
*= x *= 5 x = x * 5 50
/= x /= 5 x = x / 5 2
%= x %= 5 x = x % 5 0
Spring 2018 – University of Virginia 18© Praphamontripong
Applying Comparison and Conditional operators
• Let’s initialize, x = 10Operator Description Example Result
== Equal to (value only) x == 8 false
x == 10 true
=== Equal to (value and type) x === 10 true
x === “10” false
!= Not equal (value only) x != 5 true
!== Not equal (value and type) x !== “10” true
x !== 10 false
> Greater than x > 5 true
>= Greater than or equal to x >= 10 true
< Less than x < 5 false
<= Less than or equal to x <= 10 true
Spring 2018 – University of Virginia 19© Praphamontripong
Chaining Multiple Comparisons with Logical Operators
• Let’s initialize, x = 10 and y = 5Operator Description Example Result
&& And (x == 10 && y == 5) true
(x == 10 && y > x) false
|| Or (x >= 10 || y > x) true
(x < 10 && y > x) false
! Not !(x == y) true
!(x > y) false
Mix (x >= 10 && y < x || x == y) true
((x < y || x >= 10) && y >= 5) true
( !(x == y) && y >= 10) false
Spring 2018 – University of Virginia 26© Praphamontripong
Array Objects• More relaxed version of Java arrays
• Size can be changed and data can be mixed• Cannot use arbitrary keys as with PHP arrays - index
• Creating arrays• Using the new operator and a constructor (Array) with multiple arguments
• Using the new operator and a constructor (Array) with a single numeric argument, assigned the size of array
• Using square brackets to make a literal
Spring 2018 – University of Virginia 27© Praphamontripong
Array Predefined Operations• Concat two arrays into one – copies to end
• Join array items into a single string (commas between)
• Push, pop, shift, unshift – easy implementation of stacks and queues• Push and pop are a “right stack” – add/remove from end• Shift and unshift are a “left stack” – add/remove from beginning queue
• Sort • Sort by default compares using alphabetical order• To sort using numbers we pass in a comparison function defining how the
numbers will be compared
• Reverse the items in an array[see jex4.html]
Spring 2018 – University of Virginia 28© Praphamontripong
Functions• Similar to Java functions but header is somewhat different
• Return type not specified (like PHP, since JS has dynamic typing)
• Parameter types also not specified
• Functions execute when they are called, just as in any language
Spring 2018 – University of Virginia 29© Praphamontripong
Anonymous Functions and Function Expressions
• Functions can be assigned to variables
• Variables declared in a function are local to the function
• Parameters are all value• No parameter type-checking
[see jex3.html]
“Function expression”
Spring 2018 – University of Virginia 30© Praphamontripong
Immediately Invoked Function Expressions
• Anonymous functions can be executed once as the interpreter comes across them
Parentheses tell the interpreter to call the function immediately
Grouping operators tell the interpreter to treat
this as an expression