Chapter 10
Programming Fundamentals with
JavaScript
“Computers and Creativity”
Richard D. Webster, COSC 109 Instructor
Office: 7800 York Road, Room 422 | Phone: (410) 704-2424
e-mail: [email protected]
109 website: https://tigerweb.towson.edu/webster/109/i
1
In this lecture, you will learn:
• the differences between programming
languages and scripting languages
• programming concepts and constructs:
syntax, data types, variables, statements,
assignment statements, operators, constants,
keywords, expressions
2
Coding
• Writing code
– means entering the code
– is part of the process of creating the computer
program
• Run, running, execution
– refers to the process by which the computer carries
out the instructions in a computer program
• Compiling, compilation
– refers to the process of assembling code into a format
suitable for the computer to execute the instructions
3
IDE
• stands for:
Integrated Development Environment
• refers to:
– the software in which you are developing an
application
– for example, Adobe Animate, Microsoft Visual
Studio
4
Programming Languages
Multimedia authoring scripting languages, such as JavaScript and Animate
Actionscript are often the highest level.
high level
Programming languages that look more like human language.
Easy for human to read and write, but require more "translation"
behind the scenes to be understandable to the computer.
e.g. C++, C#, Java, FORTRAN
Assembly language
low level
lowest level:
Machine language: a programming language that
communicates with a computer through 0's and 1's
5
Scripting Languages
• Examples: Javascript and Animate ActionScript
• Very-high-level programming languages
• Advantage: easier for non-programmer to learn because the
syntax and keywords are close to human languages
• Disadvantages:
– Not as full-fledged as programming languages such as C++,
Java, and FORTRAN
– Don't have the features to let the programmer to control
low level details, such as memory allocation
6
JavaScript Syntax
• prescribes the ways in which statements must be written in
order for them to be understood by the computer
• like the rules of grammar and punctuation in human
languages, but these rules must be followed precisely in
computer programming
• for examples, for JavaScript:
– case sensitive
– each statement ends with a semi-colon(;)
– the naming of variables and functions has to start with a letter ,
_ or $
7
Basic Programming Constructs
•
•
•
•
syntax
variables
statements
assignment
statements
• keywords
• operators
• expressions
•
•
•
•
•
•
•
•
procedures
functions
arguments
control structures
conditions
comments
arrays
loops
In this Powerpoint
8
Variables
• Purpose:
to store values that can be updated and retrieved
at runtime
• Data is stored in memory as bits.
• Variable lets you refer, by name, to the data's
memory location stored.
• has 3 Properties:
– Name: Code refers to memory location by name
– Value:The actual information stored at the location
– Type: The particular type of data (data type)
Examples: integer, floating point, string
9
Loose vs. Strict Data Typing
• Strict data typing
– When a programming language requires that you
explicitly declare the data type of a variable when
the variable is first created
• Loose data typing
– When a programming language does not have
such data typing requirement.
– JavaScript is loosely typed language
10
Variable Naming
• can contain a number, a letter, underscore (_), or
dollar sign ($)
• cannot begin with a number
• in this course, variables always begin with a letter
• must not contain spaces
• cannot be a keyword
• score and Score are different
• number and nuMBer are different
11
Variable Naming
Which are valid variable names?
• myScore
• my_score <- This one ;-)
• my score
• my-score
• my4score
• 4score
12
Assigning a Value to a Variable
• Means giving a value to a variable
• The statement that assigns a value to a variable is
called an assignment statement.
• General Syntax:
variableName = value or expression;
• Examples:
score = 10;
letterGrade = "A";
sum = a + b;
13
Statements
• Statements are instructions that can be executed
• A statement ends with a semi-colon (;) when
there are more than one statements on the same
line
• Purposes: For examples,
– to give values to variables (assignment statements)
– to cause things to happen only under certain
conditions (e.g. if-statements)
– to cause instructions to repeat (used in loops)
14
Operators
• symbols that cause a new value to be calculated from one
or more other values
• Examples:
– arithmetic: +, -, *, /, %
give new calculated values
– comparison operators:
>, >=, <, <=, ==, !=
give a value of true or false
– logical operators:
&&, ||,!
give a value of true or false
15
Assignment Operators
=, +=, -=, *=, /=, %=
score
score
score
score
score
+=
-=
*=
/=
%=
3;
3;
3;
3;
3;
score
score
score
score
score
=
=
=
=
=
score
score
score
score
score
+
–
*
/
%
3;
3;
3;
3;
3;
16
Assignment Operators
=, +=, -=, *=, /=, %=
score = 10;
score += 5;
What is the value for score after these two
statements?
17
Assignment Operators
=, +=, -=, *=, /=, %=
score = 10;
score *= 2;
What is the value for score after these two
statements?
18
Keywords
• Reserved words that have a special meaning in a
programming language.
• You are not allowed to use these words for any other
purpose, such as variable or function names.
• Examples:
var
if
for
function
true
false
19
How a Program Runs
• A program is written as a sequence of
statements as instructions.
• The program executes the instructions
sequentially--one instruction after the other,
in the order in which they appear in the code.
• Use control structures to make nonsequential
execution of the instructions.
20
Types of Control Structures
• Loop
– A set of statements is executed repeatedly until a
certain condition is reached
– Will be covered in Chapter 11
• Conditional
– A set of statements is executed only if some
conditions are met
– if statements and switch statements
21
if Statements
•
•
•
•
if
if...else
if...else if
Nested if statements
22
if
General Syntax:
if (logical expression(s))
{
statement(s)
}
The statements grouped within the curly
braces are called the block statements.
23
if
• If there is only one statement to be executed,
the curly braces are optional.
• Examples:
if (score > 60)
grade = "pass";
The statement may be on a single line:
if (score > 60) grade = "pass";
24
if...else
General Syntax:
if (logical expression(s))
{
statement(s)
}
else
{
statement(s)
}
25
if...else
Example:
if (score > 60)
{
grade = "pass";
}
else
{
grade = "fail";
}
26
if...else if
General Syntax:
if (logical expression(s))
{
statement(s)
}
else if (logical expression(s))
{
statement(s)
}
...
else if (logical expression(s))
{
statement(s)
}
else
{
statement(s)
}
27
if...else if
Example:
if (score > 90)
{
grade = "A";
}
else if (score > 80)
{
grade = "B";
}
else if (score > 70)
{
grade = "C";
}
else if (score > 60)
{
grade = "D";
}
else
{
grade = "F";
}
28
if...else if
• The conditions are checked one at a time
sequentially.
• Once a condition is found to be true, the
statement(s) for that condition will be
executed and the rest of the conditions in the
if . . . else if statements group
will not be checked.
29
if...else if
Example:
if (score > 90)
{
grade = "A";
}
else if (score > 80)
{
grade = "B";
}
else if (score > 70)
{
grade = "C";
}
else if (score > 60)
{
grade = "D";
}
else
{
grade = "F";
}
Suppose score = 85.
30
if...else if
Example:
if (score > 90)
{
grade = "A";
}
else if (score > 80)
{
grade = "B";
}
else if (score > 70)
{
grade = "C";
}
else if (score > 60)
{
grade = "D";
}
else
{
grade = "F";
}
Suppose score = 85.
First check: (score > 90).
(85 > 90) is false!
31
Logical Operators
&& AND
|| OR
! NOT
32
Logical AND: &&
logicalExpression1 && logicalExpression2
true : only when both logicalExpression1 and
logicalExpression2 are true
false : when either logicalExpression1 or
logicalExpression2 is false
33
Logical OR: ||
logicalExpression1 || logicalExpression2
true : when either logicalExpression1 or
logicalExpression2 is true
false : only when both logicalExpression1 and
logicalExpression2 is false
34
Logical NOT: !
!logicalExpression1
true : when logicalExpression1 is false
false : when logicalExpression1 is true
35
Examples
Example 1
if (age < 40 &&
weight < 150)
{
group = 2;
}
else
{
group = 3;
}
Example 2
if (age < 40 ||
weight < 150)
{
group = 2;
}
else
{
group = 3;
}
Which statement will be executed in these examples
when age = 38 and weight = 145?
36
Examples
Example 1
if (age < 40 &&
weight < 150)
{
group = 2;
}
else
{
group = 3;
}
Example 2
if (age < 40 ||
weight < 150)
{
group = 2;
}
else
{
group = 3;
}
Which statement will be executed in these examples
when age = 38 and weight = 157?
37
Examples
Example 1
if (age < 40 &&
weight < 150)
{
group = 2;
}
else
{
group = 3;
}
Example 2
if (age < 40 ||
weight < 150)
{
group = 2;
}
else
{
group = 3;
}
Which statement will be executed in these examples
when age = 46 and weight = 145?
38
Examples
Example 1
if (age < 40 &&
weight < 150)
{
group = 2;
}
else
{
group = 3;
}
Example 2
if (age < 40 ||
weight < 150)
{
group = 2;
}
else
{
group = 3;
}
Which statement will be executed in these examples
when age = 46 and weight = 157?
39
Review
• A function or procedure contains a block of
program instructions forming a discrete unit
with a name.
• Functions are executed only when called
within the program. Functions do not execute
automatically.
• Functions return a value to a calling statement
whereas procedures do not.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
40
Review
• Values passed into functions or procedures
are known as arguments.
• The type of a value is known as a data type.
• Variables are used to store values. Those
variables can change during a program’s
operation.
• If statements and loops can be used to make
programs execute sequentially.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
41
Review
• ActionScript is a strictly typed language and is
case-sensitive.
• Statements in ActionScript end with a
semicolon (;)
• An example of a valid variable name in
ActionScript would be: my_score
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
42