Chapter 4: Fundamentals of JavaScriptChapter 4: Fundamentals of JavaScript

4.1 Capabilities 4.2 Essential Terminology 4.3 Structure of JavaScript Code 4.4 Data and Objects 4.5 Tokens, Operators, Expressions, and

Statements 4.6 The JavaScript math Object 4.7 Comparison Operators and Decision-

Making Structures 4.8 Loop Structures 4.9 Using JavaScript to Change Values in

Form Fields

4.1 Capabilities of JavaScript4.1 Capabilities of JavaScript

Manage input and output.Manage input and output.

Permit information to be manipulated in a Permit information to be manipulated in a symbolic way, independent of how a particular symbolic way, independent of how a particular computer stores that information internally.computer stores that information internally.

Perform arithmetic operations on numbers.Perform arithmetic operations on numbers.

Perform operations on and with strings of Perform operations on and with strings of characters.characters.

Make decisions based on comparing values. Make decisions based on comparing values.

Perform repetitive calculations.Perform repetitive calculations.

4.2 Some Essential 4.2 Some Essential TerminologyTerminology

expression a group of tokens and operators

identifier a name associated with a variable, object or function

keyword a word with a specific meaning in a programming language

literal an actual value embedded in a script

operator a token that symbolizes a mathematical or other operation

program a series of interpreted or compiled statements

reserved word a word that might become part of a language

script a series of JavaScript statements

statement a command that changes outcomes in a program

token an indivisible lexical unit in a programming language

variable a place in memory that holds data, represented by a unique

identifier

4.3 JavaScript Statements4.3 JavaScript Statements Usually embedded inside script tags. Built from tokens. Each statement should terminate with a semicolon. Statements are "free format" and can appear anywhere on

a line. Multiple statements on a line are allowed if each is

terminated with a semicolon. Statement blocks begin and end with curly brackets:

{statements go here…

}

Comments:

// single line comments /* Multiple line comments cannot be nested one inside another. */

Data and ObjectsData and Objects All information in JavaScript is associated with a data type,

either explicitly or implicitly. Each data type is stored differently and each is associated

with a specific set of allowed operations. Variables serve as data "containers." Each "container" is

given a symbolic name (its identifier). When done explicitly, this is called a "data declaration."

JavaScript data declarations are done explicitly with the var keyword.

JavaScript is a "weakly typed" language. You aren't required to do explicit variable declarations, and data types can be changed during a script, "on the fly."

A JavaScript identifier reserves a place in memory for a variable, but does not dictate the type of the data. You can change not only the value of the contents whenever you want, but also the data type. That is, JavaScript will infer data type based on the contents of a variable "container." You cannot do this in languages such as Fortran and C!!

JavaScript supports three basic data types ("primitives") – numbers, strings of characters, and boolean (true or false).

JavaScript variable names are always case-sensitive.

LiteralsLiterals

In the statements name="Professor Wonderful"; and pi=3.14;

the values on the right are literals – a string literal in the first case and a numeric literal in the second.

You should avoid using literals in your code. It is better to assign literal values to a variable with an identifier..

Objects and MethodsObjects and Methods

In plain language, an "object" is a "thing" that has properties and can do things. A ball is an object. It has a size and a color. It can roll and bounce, etc.

Languages such as JavaScript have "objects." These objects have properties (document.lastModifed) and methods document.write() ) that define what can be done by and to them.

The The prompt() and and alert() MethodsMethods

We will use these two methods for now to minimize interactions with HTML.Document 4.1 (circle.htm)

<html><head><title></title><script>var radius=prompt("Give the radius of a circle: ");var area=Math.PI*radius*radius;alert("The area of the circle with radius="+radius+ " is "+area+".");</script></head><body></body></html>

Some String Methods (just a Some String Methods (just a few)few)

(See Table 4.2.)

charAt(n) "HTML".charAt(3); returns a value of L.

concat({two or more string arguments}) var s="I".concat(" love"," HTML.");s has value I love HTML.

substr(m[,len]) excel.substr(0,5); returns a value of excel.

excel.substr(2); returns a value of cel.

toLowerCase() var h="HTML";h=h.toLowerCase();replaces h with the new value html.

JavaScript's OperatorsJavaScript's Operators

Table 4.3. JavaScript’s arithmetic operators.

Operator Symbol Examples Precedence

Addition + 3 + 4 2

Subtraction - z – 10 2

Multiplication * a*b 1

Division / z/3.333 1

modulus (remainder) %17%3 (= 2), 16.6%2.7 (=0.4)

1

var a=3,b=4,c=5;var x,y;x=a+b*c; // has a value of 23y=(a+b)*c; // has as value of 35

The JavaScript Assignment The JavaScript Assignment OperatorOperator

The JavaScript assignment operator is the "equals" sign (=).

The assignment operator is NOT the same as the "equality" sign from mathematics.

The meaning of the assignment operator is: “Evaluate the expression on the right side of the assignment operator and assign the result to the identifier on the left side of the assignment operator.”

In algebra, x=a+b and a+b=x are equivalent. In JavaScript, only x=a+b; is allowed. In algebra, x=x+1 makes no sense at all, but in JavaScript, x=x+1; is a perfectly reasonable statement.

Only an identifier can appear on the left side of the assignment operator in a JavaScript statement.

Shorthand Arithmetic/Assignment Shorthand Arithmetic/Assignment OperatorsOperators

Table 4.4. Shorthand arithmetic/assignment operators.

Operator Implementation Interpretation

+= 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++; or ++x; x=x+1;

-- y--; or --y; x=x-1;

The The MathMath Object – Properties Object – Properties

Property Description

Math.E Base of the natural logarithm, e, 2.71828

Math.LN2 Natural logarithm of 2, 0.693147

Math.LN10 Natural logarithm of 10, 2.302585

Math.LOG2E Log to the base 2 of e, 1.442695

Math.LOG10E Log to the base 10 of e, 0.434294

Math.PI π, 3.1415927

Math.SQRT1_2 Square root of ½, 0.7071067

Math.SQRT2 Square root of 2, 1.4142136

The The MathMath Object – Methods Object – MethodsMethod Returns

Math.abs(x) Absolute value of x

Math.acos(x) Arc cosine of x, ±π, for -1≤x≤1

Math.asin(x) Arc sine of x, ±π/2, for -1≤x≤1

Math.atan(x) Arc tangent of x, ±π/2, for -∞<x<∞ (compare with Math.atan2(y,x))

Math.atan2(y,x)Arc tangent of angle between x-axis and the point (x,y), measured counterclockwise

(compare with Math.atan(x))

Math.ceil(x) Smallest integer greater than or equal to x

Math.cos(x) Cosine of x, ±1

Math.exp(x) e to the x power (ex)

Math.floor(x) Greatest integer less than or equal to x

Math.log(x) Natural (base e) logarithm of x, x>0

Math.max(x,y) Greater of x or y

Math.min(x,y) Lesser of x or y

Math.pow(x,y) x to the y power (xy)

Math.random() Random real number in the range [0,1]

Math.round(x) x rounded to the nearest integer

Math.sin(x) Sine of x

Math.sqrt(x) Square root of x

Math.tan(x) Tangent of x, ±∞

Some Details…Some Details…Base 10 log of x: Math.log(x)/Math.log(10);

or, using the Math.LN10 property,

Math.log(x)/Math.LN10;

Math.round(Math.random()*(n-m))+m;

with (Math) { {statements that refer to properties and/or methods of the Math object for example,} var x=sin(.197);}

Using the Using the Math Object ObjectDocument 4.3 (mathFunctions2.htm)

<html><head> <title>Demonstration of the Math object.</title><script language="javascript" type="text/javascript"> for (var i=1; i<=10; i++) with (Math) { var x=floor(100*random()%1))+1; document.write(x+" "+sqrt(x)+" "+ pow(x,3)+"<br />"); }</script></head><body></body></html>

Relational and Logical OperaRelational and Logical Operatorstors

Operator Interpretation MathSymbol

Precedence Example Value

Relational

< less than < 2 -3.3<0 true

> greater than > 2 17.7>17.5 false

>=greater than or equal to

≥ 2 17.7>=17.7 true

<= less than or equal to ≤ 2 17.6<=17.7 true

==equal to, allowing for type conversion

= 3 9=="9" true

===equal to, with no type conversion

= 39=="9""a"==="a"

falsetrue

!=not equal to, allowing for type conversion

≠ 39!="8"9!="9"

truefalse

!==not equal to, with no type conversion

≠ 3 9!="9" true

Logical

&& AND 4 (x==3)&&(y<0)

|| OR 5 (x==3)||(z==4)

! NOT 1* !(x==3)

if… then… else… ConstructsConstructsif ( {an expression. If true, statements are executed}){

{statements here}}// optionallyelse if ( {an expression. If true, statements are executed}){

{statements here}}// optionally, more else if statements// optionallyelse{

{statements here}}

Using an Using an if… Statement Statement

Only the first branch of an if statement for which the expression evaluates as true will be taken.

Document 4.4 (grades.htm)<html><head><title>Get letter grade</title><script language="javascript" type="text/javascript"> var grade=prompt("What is your numerical grade?"); document.write("For a numerical grade of "+grade+ ", your letter grade is "); if (grade >= 90) document.write("A"); else if (grade >= 80) document.write("B"); else if (grade >= 70) document.write("C"); else if (grade >= 60) document.write("D"); else document.write("F"); document.write(".");</script></head><body></body></html>

Potential Problems with Potential Problems with if… StatementStatement

“If today is Tuesday or Thursday, I should be in class.”

if ((today == "Tuesday") || (today == "Thursday"))

??? What happens if this expression is rewritten as

(today == "Tuesday" || "Thursday") // don't do it!

An alternate version of the original expression, without the two inner sets of parentheses is:

// poor style!(today == "Tuesday" || today == "Thursday")

??? What happens if…

if ((today = "Tuesday") || (today = "Thursday"))

The The switch() ConstructConstructFrom Document 4.6 (daysInMonth.htm)<script language="javascript" type="text/javascript">var month=prompt("Give month (1-12): ");switch (month) { case "1": case "3": case "5": case "7": case "8": case "10": case "12": alert("There are 31 days in this month."); break; case "4": case "6": case "9": case "11": alert("There are 30 days in this month."); break; case "2": alert("There are either 28 or 29 days in this month."); break; default: alert("I do not understand your month entry.");}</script>