COMP 1537

JavaScript Basics (Syntax, Operators, Control

Constructs)

Copyright Ⓒ 2022, Arron Ferguson 1

WORKFLOW (1/2)

1. Create an HTML document

2. Use the script element to either:
a) Embed the JavaScript right in the HTML document
b) Link to an external JavaScript script (BEST SOLUTION)
3. Open up your browser's (e.g., Chrome/Firefox) development tools
4. Start coding in your text editor, save work
5. Go to your browser, refresh the page
6. Observe the development tools console for messages/warnings/errors

Copyright Ⓒ 2022, Arron Ferguson 2

WORKFLOW (2/2)

 Developer tools:
 Elements – highlights HTML elements within the document
 Console – displays info/warnings/errors (very important to use this!)
 Sources – the different places where resources come from (e.g., ad networks)
 Memory – memory usage of your app (includes JavaScript, connections, etc.)
 Network – displays all data send/received
 Performance – shows info on memory usage/function calls, etc.

Copyright Ⓒ 2022, Arron Ferguson 3

SYNTAX (1/2)

 Computer programming language syntax

 Set of rules for characters and symbols of a given programming language
 Many programming languages (roughly) follow the C-programming language
syntax:
 Java, C#, C++, ActionScript, JavaScript, PHP, etc.
 With variations – but minor ones making it easy to learn another

 When programming
 You must (strictly) adhere to the language syntax
 Or you will receive syntax errors in your program

Copyright Ⓒ 2022, Arron Ferguson 4

SYNTAX (2/2)

 JavaScript syntax rules:

 Lines should end with a semi-colon
 Most other programming languages require this – so get used to it!
 JavaScript is case-sensitive
 'myVariable' is not the same as 'myvariable'
 Use the 'var‘ & ‘let’ keyword to declare a variable (declare before using it)
 // single line comment
 /* */ multi-line comment

Copyright Ⓒ 2022, Arron Ferguson 5

DATA TYPES AND VARIABLES (1/3)

 Computer programs process data

 Quite often text-based data
 But sometimes other types of data:
 Images, videos, sound clips, etc.

 Data can be:

 Processed
 Displayed
 Both

Copyright Ⓒ 2022, Arron Ferguson 6

DATA TYPES AND VARIABLES (2/3)

 Types of text-based data:

 Character data (AKA string)
 Series of characters
 Must be wrapped with quotes (either double or single)
 Can use escape characters for using quotes within quotes
 Dates (including the time)
 Numbers (with or without decimal places, so floating point, integer)
 Boolean (true or false)
 Variables are placeholders for data – that can be reused by using their name
 E.g., var x = 4;

Copyright Ⓒ 2022, Arron Ferguson 7

DATA TYPES AND VARIABLES (3/3)

 Variables can be declared and their values reassigned to something else

 E.g., var x = 4; x = 2.4;
 Some programming languages require you to declare a type with the variable
 E.g., int x = 4;
 These types of languages are strongly type
 Meaning that the type is declared up front and all changes
 JavaScript is loosely typed
 You don't specify the type of variable
 The type is inferred by the value that you give it

Copyright Ⓒ 2022, Arron Ferguson 8

OPERATORS (1/6)

 Operators:
 Several types of operators:
 Assignment, arithmetic, comparison, bitwise, logical, string, special

 Assignment operators:
 Assign a value from right operand to left operand
var x = 4;

 Arithmetic operators:
 +, -, /, *

var x = (4 + 3);

Copyright Ⓒ 2022, Arron Ferguson 9

OPERATORS (2/6)

 Can combine arithmetic operators with assignment:

Operator Example Same As

= x=y x=y

+= x += y x=x+y

-= x -= y x=x-y

*= x *= y x=x*y

/= x /= y x=x/y

%= x %= y x=x%y

**= x **= y x = x ** y

Copyright Ⓒ 2022, Arron Ferguson 10

OPERATORS (3/6)

 String operator ‘+’

 When used with strings it is a ‘concatenation’ operator
 Which means it joins strings (two or more) together to create a new string of characters

 Comparison operators
 Comparing things to other things is fundamental in programming – JavaScript being no
exception
 Comparing and acting on comparing utilizes two tools:
 Equality/relational/logical operators
 Conditional statement/(ternary)operator/switch

Copyright Ⓒ 2022, Arron Ferguson 11

 OPERATORS (4/6)

 The equals/not equals signs are for equality

 The less than/greater than signs are relational
 i.e., greater than, less than
Operator Description Comparing Returns
x == 8 false
== equal to
x == 5 true
x === "5" false
=== equal value and equal type
x === 5 true
!= not equal x != 8 true
x !== "5" true
!== not equal value or not equal type
x !== 5 false
> greater than x>8 false
< less than x<8 true
>= greater than or equal to x >= 8 false
<= less than or equal to x <= 8 true

Copyright Ⓒ 2022, Arron Ferguson 12

 OPERATORS (5/6)

 Logical operators
 Check logical conditions
 AND: all conditions must be met
 E.g., it is sunny AND it Friday
 OR: any one of the conditions must be met
 E.g., It is Friday or it is Saturday

Operator Description Example

&& and (x < 10 && y > 1) is true
|| or (x == 5 || y == 5) is false
! not !(x == y) is true

Copyright Ⓒ 2022, Arron Ferguson 13

OPERATORS (6/6)

 String operator:
 '+'
 Looks like the plus operator for arithmetic
 What's the difference?
 None between the symbol, difference is between the data types
 We call this operator overloading
 Meaning an operator is used in different contexts – and behaves differently based on the type
 What happens when we mix data types?

Copyright Ⓒ 2022, Arron Ferguson 14

CONDITIONAL CONSTRUCTS

 JavaScript offers the following in order to create conditional processing logic:

 The if-else-if structures
 The switch structure
 The conditional operator

Copyright Ⓒ 2022, Arron Ferguson 15

IF-ELSE-IF STATEMENT

 Allow for Boolean expressions to dictate the outcome of execution

 The 'if' can be on it's own
 Or also have an 'else'
 Or also have one or more following 'else if' statements
 Or have one or more 'else if' statements, then 'else'
 If you have many conditions, may want to use a switch statement instead

Copyright Ⓒ 2022, Arron Ferguson 16

SWITCH STATEMENT

 Functions similar to an 'if-else-if' structure

 With multiple conditions being checked
 Each 'case' handles a condition
 Each 'case' needs to have a break
 Otherwise the logic 'falls through' to following 'case's
 Can have an optional 'default' handling
 If none of the cases are met

Copyright Ⓒ 2022, Arron Ferguson 17

CONDITIONAL OPERATOR

 Is a ternary operator (AKA conditional operator)

 condition ? expr1 : expr2
 Ternary because it has three parts to it:
 The condition (which should evaluate to true or false)
 The expression that is returned if the condition is true
 The expression that is returned if the condition is false

Copyright Ⓒ 2022, Arron Ferguson 18

INTRO TO LOOPS

 Execute one or more blocks of code a specified number of times

 Based on conditions given
 Several choices available:
 For loop
 For-in loop
 While
 Do while

Copyright Ⓒ 2022, Arron Ferguson 19

FOR LOOP

 Consists of three optional expressions:

for ([initialization]; [condition]; [final-expression])
statement
 Initialization: one or more variables
 Condition: the expression that is evaluated at the end of each loop
 If it evaluates to false, the loop breaks outs
 Final expression: Statement: one or more statements that get executed each iteration
 As long as the final expression evaluates to true

Copyright Ⓒ 2022, Arron Ferguson 20

FOR … IN LOOP

 Enumerates over the enumerable properties of an object:

for (variable in object) {
statement
}
 Variable: a different property name is assigned to variable on each iteration
 Object: object whose enumerable properties are iterated
 Statement: one or more statements that get executed each iteration
 As long as the final expression evaluates to true

Copyright Ⓒ 2022, Arron Ferguson 21

WHILE LOOP

 A loop that executes a specified statement as long as the test condition evaluates
to true:
while (condition) {
statement
}
 Condition: the expression that is evaluated at the end of each loop
 Statement: one or more statements that get executed each iteration
 As long as the final expression evaluates to true

Copyright Ⓒ 2022, Arron Ferguson 22

DO … WHILE LOOP

 Creates a loop that executes a specified statement until the test condition
evaluates to false:
do
statement
while (condition);
 Condition: the expression that is evaluated at the end of each loop
 Statement: one or more statements that get executed each iteration
 As long as the final expression evaluates to true

Copyright Ⓒ 2022, Arron Ferguson 23

DIFFERENCES BETWEEN LOOPS (1/2)

 For loop:
 The "all inclusive" loop
 i.e., initialization, condition, final expression
 May not execute at all – depending on conditions
 For in loop:
 Used to iterate over the enumerable properties
 The property order is arbitrary (i.e., not significant)

Copyright Ⓒ 2022, Arron Ferguson 24

DIFFERENCES BETWEEN LOOPS (2/2)

 While loop
 Requires variables and expressions to be made outside of loop
 May not execute at all – depending on conditions
 Do while loop
 Requires variables and expressions to be made outside of loop
 Executes at least once

Copyright Ⓒ 2022, Arron Ferguson 25

WHEN TO USE WHAT LOOP

 For loop:
 When you need fine control over conditions/incrementing/initialization
 For in loop:
 When going over a set of things in an object
 While loop:
 When you have an indefinite number of iterations
 E.g., reading lines of text from a file

 Do while loop:
 When performing input checking
where loop body needs to be executed atleast once.

Copyright Ⓒ 2022, Arron Ferguson 26

HOW TO 'BREAK' OUT

 The break statement

 Terminates the current loop, switch, or label statement
 When to use a break statement:
 Switch statements
 Usually avoided in most programming languages since they may cause the code to be
harder to read/understand

Copyright Ⓒ 2022, Arron Ferguson 27

JAVASCRIPT STRINGS (1/2)

 Text processing is at the heart of most computing/processing

 Web apps rely heavily on this!
 HTML is markup, made with text
 CSS is text
 JavaScript is text

 JavaScript has extensive support for processing of text

 Via dozens of functions that:
 Find/Search/replace text strings, find first instance of a character
 Split strings up into arrays (known as tokenizing)
 Change text case, add style/markup

Copyright Ⓒ 2022, Arron Ferguson 28

JAVASCRIPT STRINGS (2/2)

 Types of text processing we may wish to do:

 Add/modify/delete HTML elements to a page
 Add/modify/delete CSS styling for elements in a page
 Add/modify/delete JavaScript scripts for elements in a page
 Yes, we can dynamically attach JavaScript scripts to a page – but we must be careful
 Read through other site's web pages and find content
 E.g., stories, pictures, galleries, user profiles, videos, news feeds, etc.
 Retrieving/deciphering/displaying text-based data from web services
 E.g., HTML snippets, XML, JSON

Copyright Ⓒ 2022, Arron Ferguson 29

RESOURCES (1/1)

 https://developer.mozilla.org/en-
US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
 https://javascript.info/

Copyright Ⓒ 2022, Arron Ferguson 30