View
3
Download
0
Category
Preview:
Citation preview
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
3Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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
4Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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”)
5Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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)
Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Variables (cont’d)Variables (cont’d)var my_age = 24;
var your_age = (100 * 10) + my_age;
8Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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
9Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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"
10Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
AssignmentsAssignmentsvar name = "kermit"; var current_age = 20; var sings_about_rainbows = true;
current_age = 21; sings_about_rainbows = false;
11Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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():
12Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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.
Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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 }
14Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Boolean exampleBoolean examplevar input_num = prompt("Enter any integer");input_num = parseFloat(input_num);
if (input_num > 0) {alert("the number is positive");
}
15Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
ObjectsObjectsMethods vs. Attributes
(see methods vs. attributes of document object)
16Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
FunctionsFunctionsalert() prompt() parseFloat() document.write() today.getYear()
17Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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>
18Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Function ParametersFunction Parameters
19Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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.
20Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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>
21Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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; }
}
22Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
S P j t Id (t biti ?)Some Project Ideas (too ambitious?)http://www.housingmaps.com/
YouTubeDigg: http://mashupawards.com/youtube-digg/
Any others?
23Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
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
24Spring 2009Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University
Recommended