JavaScript 1 - Language Basics - WordPress.com · 2018-07-28 · JavaScript –JavaScript Object...
Transcript of JavaScript 1 - Language Basics - WordPress.com · 2018-07-28 · JavaScript –JavaScript Object...
Chesapeake Node.js User Group (CNUG)
https://www.meetup.com/Chesapeake-Region-nodeJS-Developers-Group
Agenda
➢ Introduction to JavaScript✓ Language History
✓ Language Features
✓ Strict Directive
✓ Data Types
✓ Basic Syntax
✓ Variables
✓ Constants
✓ Operators
✓ JavaScript Object Notation (JSON)
✓ Arrays
✓ Execution Control
✓ Functions
✓ Adding “modules”
JavaScript Language History
➢ Developed by Brendan Eich at Netscape (1995)❑ Turned over to the:
✓ European Computer Manufacturers Association (ECMA)
➢ Current Language Specification is ECMA-262:❑ v8.11.3 (ECMAScript 2017) – Long Term Support (LTS)
❑ v10.7.0 (ECMAScript 2017) – Current
➢ Initially developed for Front-End (Web Browser) Use:❑ Enabled Dynamic HTML (DHTML) for Browser Runtimes
❑ Over a dozen Front-End frameworks (Angular, Dojo, React)
➢ Expanded to Back-end (Server):❑ Node.js – 2009 (Express - 2010, LoopBack - 2013)
❑ npm (Package Manager) – 2010
JavaScript - Language Features
➢ JavaScript variables are loosely typed.❑ Scalars (Strings, Numbers)
❑ JSON (JavaScript Object Notation) Data
❑ Function definitions
➢ Automatic Type Conversions❑ Strings → Numbers
➢ Supports Recursion
➢ Has Object Oriented (OO) Features
➢“Sloppy” vs “Better Programming” modes❑ “use default”; versus “use strict”; directives
JavaScript - Strict Directive
➢ Directive is scoped❑ Global (e.g. first line of program)
❑ Function (e.g. first line in a function)
➢ Variables must be declared before use
➢ Deleting (“delete”) a variable/object is not allowed
➢ Octal literals and escapes are not allowed
➢ Writing to a read/get only property is not allowed
➢ The “with” statement is not allowed.
JavaScript – Data Types
➢ There are 7 Data Types
❑ Contain Data
✓ String
✓ Number (Integer, Floating Point, (-)Infinity, NaN)
✓ Boolean (true, false)
❑ Do Not Contain Data
✓ Null (Unknown variable or value)
✓ Undefined (Variable defined but never assigned)
❑ Object Oriented
✓ Object (Variable contains an Object instance)
✓ Symbol (Unique identifier for an Object)
JavaScript – Basic Syntax
➢ Commands delimited by a semi-colon (“;”)
➢ Comments❑ Within a line begin with two forward slashes (“//”)
❑ Multi-line begin with “/*” and end with “*/”
➢ Code Blocks❑ Code Blocks may be defined to control the scope of
code executed in a Function, Conditional, or Looping
statement.
❑ Code Blocks are begun and terminated by braces
✓ { … }
JavaScript – Variables (1)
➢ Variable Names❑ Alphabetic (Upper and Lower case; A – Z; a - z)
❑ Numeric (0 – 9); First character may NOT be numeric!
❑ Dollar Sign (“$”) and Underscore (“_”)
➢ Variables ARE NOT typed❑ A named variable may contain any of the 7 Data Types
❑ The Data Type inside a variable can change over time
➢ Variables DO NOT have to be declared prior to use❑ “use strict”; - Directive requires declarations (“var”)
JavaScript – Variables (2)
➢ Declare variables❑ var variableName;
❑ let variableName;
❑ const variableName;
➢ var declaration (Largest Scope)❑ “Hoists” declared variable✓ Variable considered declared at start of program / function
❑ Variable scope is therefore entire program or function✓ Regardless of where the variable is actually declared!
❑ Variable may be redeclared without error✓ Variable declared more than once
JavaScript – Variables (3)
➢let declaration (Limited Scope)❑ Variables are not “hoisted”
❑ Variable scope is restricted✓ Code block (braces) containing declaration
✓ Function containing declaration
❑ Variable may not be redeclared within the same scope
❑ Variable may be redeclared within a smaller scope✓ New declaration replaces previous within declared scope
➢ const declaration (Constants)❑ Create “constant” when declared; changes not allowed
❑ Variable scope is restricted (similar to “let”)
❑ Variable may not be redeclared
JavaScript – Variables (4)
➢ Variables may contain a single Scalar value❑ String
❑ Number
❑ Boolean
❑ Null or Undefined (Declared but never assigned a value)
➢ Variables may contain multiple named Scalars❑ Data
❑ JavaScript Object Notation (JSON) syntax
✓ Key : Value pairs
✓ Referenced by variableName.keyName
➢ Variables may contain Function definitions❑ Method
JavaScript – Data
➢ Strings❑ Strings must be enclosed in quotes
❑ Three kinds of quotes
o Double (“), Single (‘), & Grave / “Backtick” (`)
❑ Only strings in Backticks may span lines
❑ Expressions within backticks are evaluated
➢ Numbers❑ Integers
❑ Floats (with decimal point)
❑ Scientific (following by e9; where “9” is the Base 10 exponent)
❑ Binary (0b…), Hexadecimal (0x…)
➢ Boolean❑ Set equal to true of false (no capitals, no quotes; not strings)
JavaScript – String Escape Characters
➢ Escape Characters❑ Within a String, the “escape” character indicates that
the following character is to be interpreted as data.
❑ The JavaScript escape character is a backslash (“\”)
➢ Escape Sequences❑ \\ Backslash
❑ \n End of Line character(s)
❑ \’ Quote – single
❑ \” Quote – double
❑ \t Tab - horizontal
JavaScript – Binary Operators
➢ Assignment❑ = (set left side equal to right side)
➢ Equality❑ == (equality), === (strict equality; no type conversion)
❑ != (inequality), > (greater than), >= (greater than or equal to)
❑ < (less than), <= (less than or equal to)
➢ Arithmetic❑ + (addition if numbers or concatenation if a string)
❑ - (subtraction), * (multiplication), / (division)
❑ ** (exponentiation)
➢ Logical❑ && (and), || (or)
JavaScript – Unary Operators
➢ Conversion❑ + (convert text to number)
➢ Increment / Decrement❑ ++ (increment)
❑ -- (decrement)
➢ Negation❑ - (negate sign of number)
➢ Logical (Binary Operators)❑ && (and)
❑ || (or)
JavaScript – JavaScript Object Notation (JSON) - 1
➢ Variables may contain more than a single value.
➢ Multiple values are stored in “Key/Value” pairs.
➢ JSON is a subset of JavaScript syntax.
➢ Two syntaxes for referencing a variable Key
✓ variableName [keyName]
✓ variableName.keyName
➢ Object expressions use braces (“{“, “ }”)
➢ Array expressions use brackets (“[”, “]”)
➢ Keys and Values are separated by a colon (“:”)
JavaScript – JavaScript Object Notation (JSON) - 2
➢ Key/Value pairs are separated by a comma (“,”)
➢ Keys may be:
✓ Strings (Surrounded by quotes)
✓ Numbers
✓ Variable that contains a String or Number
➢ Values may be:
✓ Any JavaScript Data Type
✓ A JavaScript Function
JavaScript – JavaScript Object Notation (JSON) - 3
➢Sample JSON in JavaScriptaVariable = {
key1 : value1 ,
key2 : value2
}
address = {houseNumber : 5 ,
streetName: “My Street” ,
city : “My City” ,
state : “CA” ,
zipCode : 12345
}
JavaScript – Arrays (1)
➢ Arrays are variables containing specific JSON data ❑ Variable containing a Key of “length”✓ The length value = largest numeric key + 1
❑ Array element Keys are all “numeric”
❑ Object with a Symbol.iterator method (OO topic)
❑ Possible to break/mangle arrays✓ Recommendation: Use only standard Array syntax
➢ Array Declarations❑ array1 = [ ] ;
❑ weekDays = [ “Monday”, “Tuesday” … ] ;
❑ array1 = new Array (); (Using OO “Array” class)
JavaScript – Arrays (2)
➢Array References❑ Normal JavaScript variable rules apply
❑ Array elements numbered beginning with zero
❑ weekEnds = [“Saturday”, “Sunday” ] ;
❑ numberOfElements = weekEnds.length; (= 2)
❑ firstDay = weekEnds [0]; (= [“Saturday”)
❑ lastDay = weekEnds [weekEnds.length - 1];
➢Array Processing❑ Special “For Of” loop to iterate through array elements
JavaScript – Execution Control Statements
➢ Conditional
❑ “if” Statement (Standard syntax)
❑ “if” Statement (Ternary syntax)
❑ “switch” Statement
➢ Looping
❑ “do while” Statement
❑ “for” Statement
❑ “while” Statement
JavaScript – Execution Control (1)
➢ Conditional Execution (“If” Standard syntax)
if (expression) { … }
else { … }
❑ The expression to be evaluated is within the parentheses
❑ The “else” statement is optional
❑ The commands to be executed within the “if” and “else”
sections are bounded by braces (“{“, “}”)
❑ Individual commands within the braces are terminated by a
semi-colon (standard JavaScript syntax)
JavaScript – Execution Control (2)
➢ Conditional Execution (“If” Ternary Syntax)
(expression) ? trueCode; : falseCode;
❑ The code to be executed however the expression is evaluated
may either by a value or an expression
❑ The true and false sections are separated by a colon
❑ Each true and false expression is terminated by a semi-colon
❑ This syntax does not add any additional language capability,
it is only provided as a shortened syntax
JavaScript – Execution Control (3)
➢ Conditional Execution (“Switch” syntax)
switch (expression)
{case expression1:
…
break;
case expression2:
…
break;
default:
…
}
JavaScript – Execution Control (4)
➢ Conditional Execution (“Switch” continued)
❑ “switch” expression is compared to each “case” expression.
❑ If the expressions are equal, the “case” is executed.
✓ If a “case” does not have a “break” statement, then execution continues
falling through to the next sequential “case”
❑ The “default” statement is executed if none of the other “case”
statements apply or if no “break” statement was encountered.
JavaScript – Execution Control (5)
➢ Loops (“Do While” syntax)
do
{…
}
while ( expression );
❑ The “Do While” loop iterates through the loop and
evaluates the expression AFTER executing the code.
❑ Individual commands within the braces are terminated
by a semi-colon (standard JavaScript syntax)
JavaScript – Execution Control (6)
➢ Loops (“For” syntax - standard)
for (initCmd, conditionalExpression, incrementCmd)
{…
}
while ( expression )
❑ Similar to the “C” language “for” loop.
❑ Condition is evaluate BEFORE executing the loop.
❑ All of the three expressions are optional. The commas
separating them, however, are not optional.
JavaScript – Execution Control (7)
➢ Loops (“For” syntax – “For In” syntax)
for (let aValue in aVariable)
{aNewVariable = aVariable [aValue] ;
}
❑ The “for in” syntax loops through the JSON Key/Value
pairs within a variable or object.
❑ Recommended for iterating an Object’s properties.
❑ The order in which the Key/Value pairs are returned
should not be relied upon.
JavaScript – Execution Control (8)
➢Loops (“For” syntax – “For Of” syntax)
for (let aValue of anArray)
{currentArrayElement = aValue;
}
❑ “for of” syntax loops through the elements of an Array.
❑ Recommended syntax for processing Arrays.
❑ Only “Key/Value” pairs with numeric keys are selected.
❑ Syntax will also iterate through variables containing a
String. Each iteration returns a character in the String.
JavaScript – Execution Control (9)
➢ Loops (“While” syntax)
while ( expression )
{…
}
❑ The “While” loop evaluates the expression BEFORE
iterating through the code.
❑ In all other respects, identical to the “Do While” loop.
❑ Individual commands within the braces are terminated
by a semi-colon (standard JavaScript syntax).
JavaScript – Execution Control (10)
➢ Loop Execution Control Commands
❑ JavaScript provides two control commands that affect
the processing of loop iterations:
✓ continue (immediate end current loop iteration)
✓ break (immediate exit loop)
➢ Loop Labels
❑ A loop command may be preceded by a label:
✓ aLabel: loopCommand
✓ The continue and break commands may be immediately
followed by a label indicating the scope of the command
✓ Useful for control within nested loops.
JavaScript – Functions (1)
➢ JavaScript Functions❑ Separate “mini” programs defined within a program
❑ Function itself returns a value.
❑ No parameters values are returned.
➢ Function behavior❑ Scope of variables✓ Global variables defined in program visible in Function
✓ Variables defined inside Function only visible in Function
✓ Name collisions (Program & Function) use Function variable
❑ All arguments are “Call by Content”✓ Arguments may only be used to pass “Inbound” data
❑ Number of parameters passed not enforced
JavaScript – Functions (2)
➢ JavaScript function syntax❑ Function declaration (“function”)
❑ Function name (surrounded by spaces)
❑ Function arguments (surrounded by parentheses)✓ Arguments separated by commas
❑ Function body (surrounded by braces)✓ Arguments separated by commas
➢ Returning from a Function❑ return expression; (JavaScript statement)
❑ If the “return” statement is omitted or the value
supplied is “null”, then “undefined” is returned
JavaScript – Functions (3)
➢ Sample Function
function returnSum (number1, number2)
{
return number1 + number2;
}
➢ Function Expressions❑ Functions are considered a special type of value
❑ Special value represents an “action” rather than “data”
❑ Function declaration may be assigned to a variable
❑ Variable can then be used as a named Function✓ Can pass a Function as a parameter (to another function)
JavaScript – Output to the Console
➢ The JavaScript console Object
❑ A JavaScript built-in Object✓ A single instance of the object
✓ Similar to an OO “Singleton” pattern
❑ Object encapsulates a “console” (e.g. stdout)
❑ Object methods✓ console.log(“A String”); - Write message to stdout
✓ console.trace(“A String”); - “Trace” message to stderr
✓ console.warn(“A String”); - “Warning” message to stderr
✓ console.error(“A String”); - “Error” message to stderr
JavaScript – Sample Code (“Hello World”)
// ==============================
// Always use "Strict" mode for new code.
// ==============================
"use strict";
// ====================
// Declare Global Variables.
// ====================
var helloMessage = "Hello, World. It's Me (JavaScript in Node.js)!";
// =============
// Define functions.
// =============
function repeatMessage (count, message) {
var idx;
for (idx=0; idx < count; idx++) { console.log(message); }
}
// =================
// Main body of program.
// =================
repeatMessage(3, helloMessage);
JavaScript – Sample Code (“Web Service”)
// ==============================
// Always use "Strict" mode for new code.
// ==============================
"use strict";
// ================
// Load HTTP module.
// ================
const http = require("http");
const hostname = “127.0.0.1”;
const port = 8000;
// ===================
// Create an HTTP Server.
// ===================
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader(“Content-Type”, “text/plain”);
res.end(“Hello World. It’s me, JavaScript, running in Node.js!\n”);
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
JavaScript – What has not (yet) been covered
➢ JavaScript Objects❑ JavaScript has a number of built-in Objects✓ Like an OO “Singleton” Class instance
✓ They extend the language
➢ JavaScript Classes
➢ JavaScript Modules❑ Modules extend the JavaScript language✓ They are like packages or libraries in other languages
✓ These will be covered in a future presentation
➢ I/O Capability (Supplied by external Frameworks)
JavaScript – References
➢ ECMA Standard (ECMA-262)https://www.ecma-
international.org/publications/standards/Ecma-262.htm
➢ W3 Schools Tutorial
https://www.w3schools.com/jS/default.asp
➢ Modern JavaScript Tutorial
https://javascript.info/