CP476 Internet Computing

Week 7 – 1: JavaScript – fundamentals

Shaun Gao, Ph.D., P.Eng.

Agenda
• Introduction to node.JS
JS basics
• JavaScript JS OOP
• Data types JS functions
• Operators JS class and callback
• Functions JS asynchronous
• Variables and constants Node.JS fundamentals
• Strings Node.JS with MySQL
• Numbers Node.JS with MongoDB
Introduction to nodejs
• Apache – web server

• Nodejs – another web server

• 24 minutes video
• https://www.youtube.com/watch?v=U8XF6AFGqlc
Introduction to nodejs – cont.
• Nodejs
• Node.js is an open-source, cross-platform, back-
end JavaScript runtime environment that runs on
Google's V8 JavaScript engine and executes
JavaScript code outside a web browser.
• Node.js lets developers use JavaScript for server-
side scripting—running scripts server-side to
produce dynamic web page content before the
page is sent to the user's web browser.
• Node.js has an event-driven architecture capable
of asynchronous I/O.
• Node.js was written initially by Ryan Dahl in
2009.
JavaScript
• <script>... </script>, JS coexists with HTML
• JS is case Sensitivity
• JS comments
• JavaScript supports both C-style and C++-style comments.
• Any text between a // and the end of a line is treated as a comment and is ignored by
JavaScript.
• Any text between the characters /* and */ is treated as a comment. This may span multiple
lines.
JavaScript – data types
• JavaScript data types
• Boolean type
• Undefined type
• Number type
• String type
• Object
• In JavaScript, an object is a standalone entity, with properties and type.
• let x = {firstName:“Mark", lastName:“Wang"};
• const
• const CURRENT_BOOLEAN_VALUE = true;
• JavaScript data type is determined dynamically, based on the value stored
• Demo00
JavaScript – operators 1
• Because most JavaScript syntax is borrowed from C (and is therefore just like
Java), we won’t spend much time on it
• Arithmetic operators (all numbers are floating-point):
+ - * / % ++ --
• Comparison operators:
< <= == != >= > === !==
• Logical operators:
&& || ! (&& and || are short-circuit operators)
• Bitwise operators:
& | ^ ~ << >> >>> (unsigned right shift)
• Assignment operators:
+= -= *= /= %= <<= >>= >>>= &= ^= |=
JavaScript – operators 2
• String operator:
+
• The conditional operator:
condition ? value_if_true : value_if_false
• Special equality tests:
• == and != no data type check when performing the test
• === and !== verify if they are of different types
• Additional operators:
new typeof delete
• Demo01
JavaScript – statements 1
• Most JavaScript statements are also borrowed from C
• Assignment: greeting = "Hello, " + name;
• Compound statement:
{ statement; ...; statement }
• If statements:
if (condition) statement;
if (condition) statement; else statement;
• Familiar loop statements:
while (condition) statement;
do statement while (condition);
for (initialization; condition; increment) statement;
JavaScript – functions
• JavaScript Function Syntax
• A JavaScript function is defined with the function keyword, name and
parentheses ().
function function_name(parameter1, parameter2, parameter3) {
// code to be executed
}
• Difference between function_name and function_name() in
JavaScript
function_name refers to the function object while function_name() refers to
the function execution result.
JavaScript – functions – cont.
• Display function object
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
console.log( toCelsius ); // it will be compile error for C++
• Display function execution result
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
console.log( toCelsius(77) );
• Demo02
JavaScript – Variables and constants
• JavaScript has 3 types of scopes.
• Block scope
• Variables declared inside a { } block with either let or const cannot be accessed from
outside the block.
• Function scope / Local Scope
• Variables declared within a JavaScript function, become LOCAL to the function.
• Global scope
• A variable declared outside a function, becomes GLOBAL.
• JavaScript Global Variable: A JavaScript global variable is declared outside the
function or declared with window object. It can be accessed from any function.
• Question: variable scope difference between PHP and JS?
JavaScript – Variables and constants
• There are 3 ways to declare a JavaScript variable:
Using var: var keyword is used to declare variables since JavaScript was created.
Using let: Variables defined with let cannot be redeclared. It is new and
recommended way of declaring variables in JavaScript.
Using const:  inherit from C/C++; it cannot be changed once assigned a value.
const PI = 3.1415;
• All JavaScript variables must be identified with unique names. These
unique names are called identifiers.
• Syntax:
• Declaration:
var variable_name;
let Var_name;
const v_name = fixed value;
JavaScript – Variables and constants – cont.
• Identifier let
• Variables defined with let cannot be Redeclared. With var it is fine.
• let x= “Lunshan”;
• let x= “Shaun”; // SyntaxError: 'x' has already been declared.
• Variables defined with let must be Declared before use. With var it is fine
• carName = "Saab";
• let carName = "Volvo";
• Variables defined with let have Block Scope.
• Demo03
Difference between var and let
• var declaration is function scoped and let is block scoped.
• Example:

• Demo04
JavaScript – Variables and constants
• JavaScript hoisting
• Variables defined with var are hoisted to the top and can be initialized at any
time. (means: You can use the variable before it is declared with var)
• With let, you cannot use a variable before it is declared.
• Block Scope
• JavaScript provides Global Scope, Function Scope, and Block Scope.
• A block scope is denoted with { }
• Variables declared inside a { } block with let cannot be accessed from outside
the block.
• A const variable cannot be reassigned
• Constant Objects, You can change the properties of a constant object.
JavaScript – Strings
• JavaScript Strings
• A string is zero or more characters written inside quotes (single or double).
• let text = "John Doe"; or ‘John Doe’;
• String Length
• use the built-in length property
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
text.length;
• Escape Character
• The problem: let text = "We are the so-called "Vikings" from the north.";
• The solution to avoid this problem, is to use the backslash escape character.
• let text = "We are the so-called \"Vikings\" from the north.";
JavaScript – Strings – cont.
• JavaScript strings methods – build in APIs
• Extracting String Parts, a string has the following methods.
slice(start, end)
substring(start, end)
substr(start, length) (Deprecated)

• Replacing String Content, a string has replace() method replaces a specified

value with another value.
let text = "Please visit Kitchener!";
let newText = text.replace("Kitchener", "Waterloo");
• Demo05
JavaScript - Numbers
• JavaScript has only one type of number. Numbers can be written with
or without decimals. It is always 64-bit floating Point.
• JavaScript uses the + operator for both addition and concatenation.

• Numeric Strings
• JavaScript will try to convert strings to numbers in some numeric operations
JavaScript – Numbers – cont.
• NaN is a JavaScript reserved word indicating that a number is not a
legal number.
let x = 100 / "Apple"; // x will be NaN (Not a Number)
• Infinity
let x = 2 / 0; // x will be Infinity
let y = -2 / 0; // y will be -Infinity
• Number Methods
• A number’s toString() method returns a number as a string.

• Demo06
Summary
• Introduction to nodejs
• JavaScript
• Introduction
• Syntax
• Data types
• Operators
• Functions
• Variables and constants
• Strings
• Numbers
Announcement
• Group project
• Please start your group project if you have not yet.

• This week tutorial: install node.js and setup VS code for running JS