JavaScript Basics

Monday February 19

Programming Basics

Program

• a set of instructions to tell the computer how to perform a task
• written in a formal language
• translated into a form the processor can follow
• JavaScript fragments are embedded in web pages

Formal Language

• Syntax
  • how to form correct programs
  • rules for putting symbols together
• Semantics
  • the meaning of a program or language construct
• Given problem/solution, write program
• Given program, what does it mean

Program Execution

• Assume the program has already been converted into a machine usable form
• An instruction defines the operation that should be carried out on the machine
• Data & Programs are stored in memory
  • binary encoding
• Input and Output for interaction

Data

• The information processed by your program
• Constant values may be defined in your program
• Input values can be supplied by the user
• The data is stored in memory locations so that the processor can access it

Data Types

• All data and programs are stored in binary
• The data type indicates how the information should be interpreted and/or how much space it will occupy
• JavaScript basic data types
  • numbers (integer and real)
  • strings (characters and sequences)
  • Boolean (logical)

Numbers

• Integer
  • whole numbers, may be signed
  • 23, 62, -19
• Real
  • may have decimal parts
  • must have a decimal point
  • 3.14, -23.006, 6.2e-22, 2.3e1

Numbers in other Bases

• Normal (people) numbers are decimal numbers (i.e., in the Base_10 number system)
  • 0,1,2,3,4,5,6,7,8,9 are digits
  • positional number system
• Binary - Base 2
• Octal - Base 8
• Hexademimal - Base 16
• An integer with a leading 0 represents a constant octal number
  • 023 = 2*8 + 3 = 19 decimal
• An integer with a prefix of 0x represents a hexadecimal value
  • 0x23 = 2 * 16 + 3 = 35 decimal

Strings

• a sequence of 0 or more characters
• literals are enclosed in matching single or double quotes
• the start and end quotes must be the same
  • "fish" , 'water' , "rocks & plants"
  • "" and '' represent empty strings

Special Characters

• JavaScript (and other programming languages) provide escape sequences to include special characters in strings
• \n newline
• \r return
• \t tab
• \' single quote
• \" double quote

Boolean

• Logical values ( yes or no)
• The language constants are
  • true
  • false

Type Checking

• JavaScript is a loosely-typed language
• Less strict about how you can use or combine information
• Other languages (such as Pascal or C++) are 'strictly typed'

Variables

• A symbolic name to refer to a value
• A box with a name and a content
• The value of the variable can be changed
• Because of 'loose typing' a variable can be used to hold different kinds of values at different times

Variable Names

• case sensitive
• must begin with a letter or _ (underscore)
• followed by sequence of letters, digits, _

Objects

• contain data, properties
• contain functions, methods
• notation: object.property

• implicit objects
  • part of program by being an HTML element
  • button, checkbox, document, text, window
  • document.formname.textboxname.value
• explicit objects
  • created by programmer for information in script
  • Date, Math, String

Expressions & Operators

• Just using constant values limits what a program can accomplish
• Combining values is required
• An expression is a collection of values and operators
• Math operators
• Comparison operators
• Logical operators

Mathematical Operators

• +, -, * :: add, subtract, multiply
• / :: division, real result
• % :: the remainder of integer division
• - :: negation
• Precedence rules determine application order.
  • Negation, then * and /, then + and -
• Use ( ) to override

Comparison Operators

• Compare left and right values
• Returns true or false
• < , <= , > , >= , == , !=
• x < 5
• z == 19
• y != 3
• x * y >= z +19 - 7

Boolean Operators

• Combine Boolean values to produce Boolean values
• && :: AND :: X && Y
  • true if X is T and Y is T , false otherwise
• || :: OR :: X || Y
  • true is X is T, true if Y is T, false if both F
• ! :: NOT :: !X
  • true if X is F and false if X is T

Assignment Statement

• VARIABLE = VALUE
• Assign a value to a variable
• VALUE can be a constant literal or the result of evaluating an expression
• The value of the expression may depend on the values of other variables
• x = y * 5 - 4
• stop = (X>5) && (done == 0)

Assignment Statements

• LHS = RHS
• LHS is a variable name
• RHS is an expression that produces a value

      <SCRIPT LANGUAGE="JavaScript">
      var x, Name1, Name2, Name, Square;
      x = 5;
      Name1 = "George";
      Name2= "Washington";
      Name = Name1 + Name2;
      x = x + 2;
      Square = x * x;
      </SCRIPT>
      

Loose Typing

      var x;
      x = 23;
      x = "a string";
      x = x + 5;
      

• An expression of numbers and strings converts strings to numbers

Declarations & Scope

• Declare variables by:
  • simply assigning it a value: y = 12
  • with the keyword var: var z or var w = 9
• Global variables are available throughout the document
• Local variables are available only within a single function (later)

Output

• Let the user see the results of the program
• document.write(arguments...)
  • document: Navigator object
  • write: method of document object
  • arguments: a list of parameters, separated by commas, supplied to the write method
• Displays output in browser

document.write()

• takes any number of string arguments that can be string literals or variables
• you can also use string concatenation operator + to create one string

      <SCRIPT LANGUAGE="JavaScript">
      var Name1, Name2, Name;
      Name1 = "Joe";
      Name2= "Bob";
      document.write(Name1, Name2);
      document.write(Name1+Name2);
      document.write(' says "Howdy" ');
      document.write("says \"Howdy\" ");
      document.write("says " + ' "Howdy" ');
      </SCRIPT>
      

JavaScript Comments

• Ignored by interpreter
• Messages to the human reader
• Hide parts of the code
• Single line comment
  • // comment goes here
• Multi-line comment
  • /* this is a comment
    that can cover many lines */

Statements

• Control Flow
  • determines the order statements are performed
  • rather than just one time sequentially through the list of commands
• For now, we will examine the basic
  • Conditional statements
  • Loops

Block of Statements

• Can be used in place of a single statement
• Sequence of statements within { }

Conditional Statement

• Determine at run time which statements should be performed
• Evaluate a condition to decide
  • any expression that evaluates to true/false
• There are two versions
  • if : for 1 way choice
  • if-else : for a 2 way choice

IF statement

   if (condition)
      statement;
   
   if (num > max)
      max = num;
   z = 23;
   

IF-ELSE statement

   if (condition)
      statement;
   else
      statement;
   
   if ( x > y)
      max = x;
   else
      max = y;
   

Multi-way choice

   if (condition 1)
      statement 1;
   else 
   if (condition 2)
      statement 2;
   else 
   if (condition 3)
      statement 3;
   else
      statement 4;
   

Iteration

• Repeatedly execute a set of commands until a condition is met
• Much better than copying the code fragment several times
• FOR loop
• WHILE loop

For Loop

   for (initialize_expr ; condition; increment_expr)
      statement;
  
   sum = 0; 
   for ( i = 0; i < 10; i = i + 1)
      sum = sum + i;
   document.write("Sum is " + sum);
   

While Loop

   while (condition)
      statement;
   
   sum = 0; 
   i = 0;
   while (i < 10)
   {
      sum = sum + i;
      i = i + 1;
   }
   document.write("Sum is " + sum);
   

Loops

• For both the FOR and WHILE loops
  • may execute 0 times
  • may execute 1 time
  • may execute K times
  • may execute infinitely