© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. "Digital Media Primer" Yue-Ling Wong, Copyright (c)2016 by Pearson Education, Inc. All rights reserved. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Chapter 10 Programming Fundamentals with JavaScript Part 1 Programming Fundamentals - Part A © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

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 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Some Common Terms © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Writing code means entering the code is part of the process of creating the computer program © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Run, running, execution refers to the process by which the computer carries out the instructions in a computer program © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Compile, compilation refers to the process of assembling code into a format suitable for the computer to execute the instructions © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. IDE stands for: Integrated Development Environment refers to: the software in which you are developing an application for example, Adobe Flash, Microsoft Visual Studio © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Runtime Refers to the time when the application is running © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Design Time Refers to the time when the application is being developed e.g. writing the code © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Compile Time Refers to when you compile the code into an application At compile time, the compiler analyzes all the code in the project and translates it into a format that the computer understands © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Computer Programming Languages are for writing instructions that can be followed by a computer © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Programming Languages Multimedia authoring scripting languages, such as JavaScript and Flash 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 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Example Syntax of High and Low Level Languages An assignment statement of most high level languages, such as Actionscript, C++, Java Equivalent Assembly language example for a particular CPU total = 2 * score - 1; score: .word total: .word lw $t0, score add $t0, $t0, $t0 addi $t0, $t0, -1 sw $t0, total © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Example Syntax of Low Level Languages An Assembly language for a particular CPU Equivalent machine language for a particular CPU addi $21,$0,5 001100 00000 10101 0000000000000101 ori $t0,$t0,0xff 001101 01000 01000 0000000011111111 lui $s0,0xdad 001111 00000 10000 0000110110101101 lw $v0,53($gp) 100011 11100 00010 0000000000110101 sw $sp,-4($sp) 101011 11101 11101 1111111111111100 sll $t9,$a0,3 000000 00000 00100 11001 00011 000000 loop: bne $s0,$s0,loop 000101 10000 10000 0000000000000000 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Scripting Languages Examples: Javascript and Flash 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 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. What is JavaScript? A scripting language for Web pages JavaScript is NOT Java programming language © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 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 $ © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Basic Programming Constructs syntax variables statements assignment statements keywords operators expressions procedures functions arguments control structures conditions comments arrays loops In this Powerpoint © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Variables © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 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. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Variables 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 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Data Types in JavaScript When programming in JavaScript, you do not need to explicitly specify the data type. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

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 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 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 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Variable Naming Which are valid variable names? myScore my_score my score my-score my4score 4score myScore -- valid my_score -- valid my score -- invalid because of the space my-score -- invalid because of the dash (-), which is the substraction operator my4score -- valid 4score -- invalid because it starts with a number © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Case Sensitivity of Variable Names score and Score are different number and nuMBer are different © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

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. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Assigning a Value to a Variable General Syntax: variableName = value or expression;   Examples: score = 10; letterGrade = "A"; sum = a + b; © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Declaring a Variable Before you use a variable or assigning a value to a variable, you need to declare the variable. General Syntax: Two ways to declare a variable: Declare without assigning a value: var variableName; Declare and assign a value: var variableName = value or expression; © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Declaring a Variable Examples: var score;   var score = 0; © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Variables vs. String Literals score vs. "score" a variable: a data is stored in a memory location that can be referred to with the variable named score If score has a value of 3, then: the expression score + 9 gives you a value of 12. a string literal: it is a data itself a text string enclosed by two quotation marks the expression "score" + 9 gives you a concatenated text string "score9" © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Questions Suppose the variable score is equal to 3. An expression score + score gives a ___ (text string or number?) equal to ___. An expression score + "score" gives a ___ (text string or number?) equal to ___. An expression "score" + "score" gives a ___ (text string or number?) equal to ___. An expression score + "" gives a ___ (text string or number?) equal to ___. answers: 1. number, 6 2. text string, "3score" 3. text string, "scorescore" 4. text string, "3" © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Statements © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 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 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Statements 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) © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Assignment Statements To assign a value to a variable General Syntax: variableName = value or expression; Examples: score = 0; score = score + 1; © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Operators © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 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 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Operator % Modulo Gives the remainder in a division Examples: 20 % 2 gives 0 23 % 2 gives 1 20 % 11 gives 9 437 % 60 gives 17 Application examples: determine whether a number is even or odd converting total number of seconds into minutes:seconds © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Assignment Operators =, +=, -=, *=, /=, %= score += 3; score = score + 3; score -= 3; score = score – 3; score *= 3; score = score * 3; score /= 3; score = score / 3; score %= 3; score = score % 3; © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Assignment Operators =, +=, -=, *=, /=, %= score = 10; score += 5; What is the value for score after these two statements? Answer: 15 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Assignment Operators =, +=, -=, *=, /=, %= score = 10; score *= 2; What is the value for score after these two statements? Answer: 20 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. -= vs. = - These are different statements: score -= 5; score = -5; © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Assignment Operators =, +=, -=, *=, /= score = 10; score = -score; What is the value for score after these two statements? Answer: -10 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Assignment Operators =, +=, -=, *=, /= score = 10; score -= score; What is the value for score after these two statements? Answer: 0 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Operator = vs. Mathematical = Sign The operator = is totally different from the mathematical equal sign (=) © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Operator = score = 0; The value on the right-hand side (0 in this example) is assigned to the variable on the left-hand side (score in this example). © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Operator = 0 = score; This statement will cause an error! © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Mathematical Equal Sign 0 = score score = 0 These two math equations are equivalent. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Operator = score = score + 1; The value of score is incremented by 1 and then assigned back to itself. The result is that the score is incremented by 1. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Mathematical Equal Sign score = score + 1 This equation does not make sense as score does not have a solution. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Increment Operator: ++ To add 1 to the expression General Syntax: expression++; Examples: score++; is same as: score = score + 1; and: score += 1; © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Decrement Operator: -- To substract 1 from the expression General Syntax: expression--; Examples: score--; is same as: score = score - 1; and: score -= 1; © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Keywords © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 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 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Expressions © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Expressions Any part of a statement that produces a value Examples: 2 + 3 (a + b + c) / 3 a > b © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Expressions Any part of a statement that produces a value Examples: 2 + 3 (a + b + c) / 3 a > b produces a value of 5 © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Expressions Any part of a statement that produces a value Examples: 2 + 3 (a + b + c) / 3 a > b produces a value of the average of a, b, and c © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Expressions Any part of a statement that produces a value Examples: 2 + 3 (a + b + c) / 3 a > b produces a value of true or false depending on whether a is greater than b © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Exercise in the textbook: Identify variables, constants, and operators © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Questions Note to instructor: Depending on your preference, you may want to go over the review questions at the end of this lecture as an instant review or at the beginning of next lecture to refresh students' memory of this lecture. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question True/False: If it is strict data typing, a programming language requires that you explicitly declare the data type of a variable when the variable is first created. True © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question JavaScript is a ___ language. strictly typed loosely typed B © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question The statement in JavaScript ends with a ___. colon (:) semicolon (;) closing parenthesis ()) closing curly brace (}) B © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question True/False: JavaScript syntax is case-sensitive. True © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question The type of the value is called a(n) ___. variable function or procedure argument statement data type E © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question ___ are used to store values, which can be updated and retrieved when the program is running. Variables Functions and procedures Arguments Statements Data types A © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question Which of the following is a valid variable name in JavaScript? 3_high_score high score high_score high-score highScore C and E © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question To declare a variable, you use the keyword ___. var © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question To declare a constant, you use the keyword ___. const © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question True/False: The operator = has the same meaning as the mathematical equal sign (=). False © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.