The Web: Concepts and Technology€¦ · JS Types yNumbers yOperators: +, -, *, and / as the basic four arithmetic operations. yComparison:=Comparison:

The Web: Concepts and Technology

Introduction to JavaScriptIntroduction to JavaScriptFeb 3

Fall 2006CS 584: Information Retrieval. Math & Computer Science Department, Emory University1

Today’s PlanToday’s PlanJavascript (cont’d):J p ( )

FixesDebuggingCompilation vs. Interpretation

Javascript the languageTTypesStatementsObjectsObjectsFunctions

Project ideas

2Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University

Bugs in Tuesday’s codeBugs in Tuesday’s codehttp://cs190.mathcs.emory.edu/~cs190000/tuesday.html

h // 190 h d / 190000/ h lhttp://cs190.mathcs.emory.edu/~cs190000/menu.html


Debugging JavaScriptDebugging JavaScript1. Debugging JS is a painI know of two reasonable tools for JS debuggin:

Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843V kM h // dd ill / US/fi f / dd /216VenkMan: https://addons.mozilla.org/en-US/firefox/addon/216


Notes and Gotchas (updated)Notes and Gotchas (updated)Comments: /* informative comment: blah blah */JS is case sensitive! document.Write() is not same as document.write()!

b “ d”IDs are text, must be “quoted”. Key method document.getElementById (“xyz”)


JS TypesypNumbers

Operators: +, -, *, and / as the basic four arithmetic operations. Comparison: < > <= >=Comparison: <, > , <=, >= %, is the remainder operator: if you divide one number by another, this operator gives you the remainder. For example, 7 % 3 is 1.

Strings : “pieces of text” or “sequences of characters.” E.g., "Frodo", "The Lord of the Rings", and "this is a string" are all strings. Strings can be created with double quote character (") or the single quote character ('). The only operator for strings is the concatenation operator, written +, whichThe only operator for strings is the concatenation operator, written , which glues two strings together. E.g. "rail" + "road" is "railroad".

Booleanslogical values that are either true or false.

h 7 13 f l h l h 7 3E.g., the expression (7 > 13) is false while the expression (7 > 3) is true. logic operators for boolean values:

! means not, so !(7 > 13) is true && means and, so (7 > 13) && (7 > 3) is false

6

|| means or, so (7 > 13) || (7 > 3) is true

Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University

VariablesVariablesVariable is a storage location in the memory of the computer th t h b ithat has been given a name. In JavaScript, we can store arbitrary values in them (numbers, strings, or booleans — but one value, and ( , g , ,therefore type, at a time).Variable name can be (almost) any sequence of letters, digits

d th t t t ith l tt D lf bior underscores that starts with a letter. Do yourself a big favor by giving variables descriptive names. JavaScript is case-sensitive.Consequently, names such as sum, J p q ySum, and SUM each represent different variables. use the var keyword when you introduce a new variable (i.e., the first time you mention it)

7

the first time you mention it)


Variables (cont’d)Variables (cont’d)var my_age = 24;

var your_age = (100 * 10) + my_age;


First calculatorFirst calculatorvar temp_in_Celsius = (5 / 9) * (temp_in_Fahr - 32);

Precedence:multiplication has precedence over addition ddi i d b i h h d k l faddition and subtraction have the same precedence, so work left to

right multiplication and division have the same precedence, so work left to rightright parentheses can force a particular order of evaluation and override these rules

Example:p2 + 4 * 5 ==> (2 + 4) * 5 ==> 30 2 + 4 * 5 ==> 2 + (4 * 5) ==> 22


Concatenation or Addition?"We're number " + 1 ==> "We're number " + "1" ==> "We're number 1"

3 + 2 + " is the sum" ==> (3 + 2) + " is the sum" ==>(3 + 2) + is the sum ==> 5 + " is the sum" ==> "5" + " is the sum" ==> "5 is the sum"

"the sum is " + 3 + 2 ==> ("the sum is " + 3) + 2 ==> ("the sum is " + "3") + 2 ==> ( )"the sum is 3" + 2 ==> "the sum is 3" + "2" ==> "the sum is 32"


AssignmentsAssignmentsvar name = "kermit"; var current_age = 20; var sings_about_rainbows = true;

current_age = 21; sings_about_rainbows = false;


Using prompt() to read in numbersUsing prompt() to read in numbersprompt() returns a string (even if the user types in a number) This is often OK since JavaScript will convert the string to a number to perform numerical operations (*, -)

Fl () d f d J S f hparseFloat() is a predefined JavaScript function that explicitly converts strings to numeric values parseInt():parseInt():


Summarythree basic data types: strings, numbers, and booleans. The basic arithmetic operators + (addition), - (subtraction), * (multiplication), / (division), and % (remainder) are provided for numbers. ( ), ( ) pvariables can be assigned values of any type, including numbers and numeric expressions. When an assignment statement is executed, the expression on the right-hand id i l t d fi t d th th lti l i i d t th i blside is evaluated first, and then the resulting value is assigned to the variable on

the left-hand side. multiplication and division have higher precedence than addition and subtraction. Among operators with the same precedence, expressions are g p p pevaluated in a left-to-right order. When the + operator is applied to a string and a number, the number is automatically converted into a string and then the two are concatenated. The prompt() method al a s returns a string alue e en hen a number isThe prompt() method always returns a string value, even when a number is entered by the user. A string can be converted to number using parseFloat() for parseInt function. variables can be used to store input values, define easily modifiable values, and

13

retain intermediate values in complex computations.


Booleans and ConditionalsBooleans and Conditionalsif (first_name == "Grover") {

l t("H ll G t t !")alert("Hello Grover, great to see you!"); }

else { alert("Who the heck is " + first_name + "?");

}

if (BOOLEAN_TEST) { STATEMENTS_IF_TRUE _ _

}else { STATEMENTS_IF_FALSE }


Boolean exampleBoolean examplevar input_num = prompt("Enter any integer");input_num = parseFloat(input_num);

if (input_num > 0) {alert("the number is positive");

}


ObjectsObjectsMethods vs. Attributes

(see methods vs. attributes of document object)


FunctionsFunctionsalert() prompt() parseFloat() document.write() today.getYear()


User defined functionsUser-defined functions<HEAD> <TITLE> The function template</TITLE> <SCRIPT

TYPE " /J S i ">TYPE = "text/JavaScript">

functionName() {functionName() {. . . JavaScript code to define the function goes here . . . } }

</SCRIPT>

</HEAD>


Function ParametersFunction Parameters


Function SummaryFunction SummaryFunctions encapsulate code for performing common tasks that we're likely to repeat in many contexts. y p y .Function definitions are generally within the HEAD of a document. Function calls are generally within the BODY of a document. Once a function is defined you can call it as often as you likeOnce a function is defined, you can call it as often as you like. A function definition is only that — a definition. Unless a function is called, it will not execute! You call a function with no parameters like this: wisdom();You call a function with no parameters like this: wisdom(); A parameter allows something about the function to change from one invocation to the next. To call a function with a parameter you include a value (or expressionTo call a function with a parameter you include a value (or expression that evaluates to a value) within the parantheses. Your function call must be within <SCRIPT> tags or an event handler.


JavaScript: Processing Form DataJavaScript: Processing Form DataForm validation is the process of checking that the information provided by the user is correct (or not obviously incorrect) before processing it.

<form action=http://www google com/search<form action http://www.google.com/searchonsubmit="return true;" >

<label for="q">Search:</label> <input type="text" name="q" id="q">

</form>


JavaScript: Processing Form DataJavaScript: Processing Form DataForm validation is the process of checking that the information provided by the user is correct (or not obviously incorrect) before processing it.y ( y ) p g .

<form action=http://www.google.com/searchonsubmit="return validate(this);" >

<label for="q">Search:</label> <input type="text" name="q" id="q">

</form>…

f ti lid t (f) {function validate(f) { if(f.q.value=="") {

return false; }}else{ return true; }

}


S P j t Id (t biti ?)Some Project Ideas (too ambitious?)http://www.housingmaps.com/

YouTubeDigg: http://mashupawards.com/youtube-digg/

Any others?


Tools: User Interface LibrariesTools: User Interface LibrariesYahoo User Interface Library (Javascript):http://developer.yahoo.com/yui/#start

l h dGoogle Mashup Editorhttp://code.google.com/gme/index.html


Documents

The Web: Concepts and Technology€¦ · JS Types yNumbers yOperators: +, -, *, and / as the basic four arithmetic operations. yComparison:=Comparison: