lecture 2: introducing javaeugene/cs190/lectures/jan31-javascript2.pdfjs data types • numbers...

1

JavaScript: Cont’d

1/31/2013 CS190: Web Science and Technology

Example Assignment 1s

• Others?

1/31/2013 CS190: Web Science and Technology 2

Example JavaScript

3

• JavaScript code can go inside the head or the bodyof an HTML document.

document.write("It’s Thursday!");

Let’s write some JavaScript!


Example JavaScript 2

4

• JavaScript code can go inside the head or the bodyof an HTML document.

alert(“Hello World!”);



Where to Put JavaScript Code

• JavaScript code can go inside the head or the body of an HTML document.

• Two options:

–full-fledged javascript code inside tags

–Short javascript “snippets” for special events for HTML elements.



Example Javascript (event)

• Google link

• Example:

http://www.mathcs.emory.edu/~cs190000/lab4/link.html

• Other events that can be overwritten:

http://www.w3schools.com/js/js_events.asp


http://www.mathcs.emory.edu/~cs190000/lab4/test2.htmlhttp://www.mathcs.emory.edu/~cs190000/lab4/test2.htmlhttp://www.mathcs.emory.edu/~cs190000/lab4/test2.htmlhttp://www.mathcs.emory.edu/~cs190000/lab4/test2.htmlhttp://cs190.mathcs.emory.edu/~cs190000/lab3/test2.htmlhttp://cs190.mathcs.emory.edu/~cs190000/lab3/test2.html

JS Variables

//example script using variables and objectsgreeting = "Hello ";var name = "Bob";full_greeting = greeting + " " + name ; //Hello Bob

//numeric variablecount=1;count = count + 15; //count = 16

//arraycars = ['toyota', 'honda', 'chevy']

alert(cars[0] + " " + cars[1]); //toyota honda


Functions

function multiply(a, b)

{

var result = a*b;

return result;

}



JS Objects

• Document Object Example: write()

• Text Object Example: toUpperCase()

9

var txt="Hello World!";

document.write(txt);

var txt="Hello World!";

document.write(txt.toUpperCase());



JS Form Example

• Moving value from one textbox to another.

10



JS Form Example 2

• Add a switch button

11


Document Object Model (DOM)

• The Document Object Model is a platform-and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.

12

Document Object Model (DOM)

• http://javascript.info/tutorial/traversing-dom

• Reference: http://www.w3schools.com/jsref/default.asp


http://javascript.info/tutorial/traversing-domhttp://javascript.info/tutorial/traversing-domhttp://javascript.info/tutorial/traversing-domhttp://javascript.info/tutorial/traversing-domhttp://javascript.info/tutorial/traversing-domhttp://javascript.info/tutorial/traversing-domhttp://www.w3schools.com/jsref/default.asphttp://www.w3schools.com/jsref/default.asp

Example DOM Representation

Sample Document

An HTML Document

This is a simple document.

14

Writing HTML from JavaScript

document.write("Welcome to CS 190

");

document.write("BOO!");

• http://www.mathcs.emory.edu/~cs190000/lab4/dom.html

http://www.mathcs.emory.edu/~cs190000/lab4/dom.htmlhttp://www.mathcs.emory.edu/~cs190000/lab4/dom.htmlhttp://www.mathcs.emory.edu/~cs190000/lab4/dom.htmlhttp://www.mathcs.emory.edu/~cs190000/lab4/dom.html

Writing HTML: Why bother?

var firstName = prompt(“What is your name?");

document.write("Hello " + firstName + "!");

http://www.mathcs.emory.edu/~cs190000/lab4/4.html

16

http://www.mathcs.emory.edu/~cs190000/lab4/4.htmlhttp://www.mathcs.emory.edu/~cs190000/lab4/4.htmlhttp://www.mathcs.emory.edu/~cs190000/lab4/4.htmlhttp://www.mathcs.emory.edu/~cs190000/lab4/4.html

Other uses of DOM

• Document methods

document.location.href="http://www.bing.com";

• History object:

history.go (-3);

history.back()


JS Control Flow

• Conditional statements:if(a>10){

print "bigger than 10";

}

else{

print "less than 10";

}

• Loops:For(count=1; count

Processing DOM in JS

• http://www.mathcs.emory.edu/~cs190000/lab4/dom2.html


http://www.mathcs.emory.edu/~cs190000/lab4/dom2.htmlhttp://www.mathcs.emory.edu/~cs190000/lab4/dom2.html

Javascript calculator

• var temp_in_Celsius = (5 / 9) * (temp_in_Fahr - 32);

Complete code:

Try it: http://cs190.mathcs.emory.edu/~cs190000/inclass/feb9/calc.html

http://cs190.mathcs.emory.edu/~cs190000/inclass/feb9/calc.html

Operator Precedence

• multiplication has precedence over addition

• addition and subtraction have the same precedence, so work left to right

• multiplication and division have the same precedence, so work left to right

• parentheses can force a particular order of evaluation and override these rules

• Example:– 2 + 4 * 5 ==> (2 + 4) * 5 ==> 30

– 2 + 4 * 5 ==> 2 + (4 * 5) ==> 22

21

Assignments

var name = "kermit";

var current_age = 20;

var sings_about_rainbows = true;

current_age = 21;

sings_about_rainbows = false;

Using prompt() to read in numbers

23

• prompt() 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 (*, -)

• parseFloat() is a predefined JavaScript function that explicitly converts strings to numeric values

• parseInt():

JS Data Types• Numbers

– Operators: +, -, *, and / as the basic four arithmetic operations. – 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 +, which

glues two strings together. E.g. "rail" + "road" is "railroad".

• Booleans– logical values that are either true or false. – E.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 • || means or, so (7 > 13) || (7 > 3) is true

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" ==> • 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"

Notes and Gotchas

• Comments: /* informative comment: blah blah */

• JS is case sensitive!

document.Write() is not same as document.write()!

• IDs are text, must be “quoted”.

• Key method document.getElementById (“xyz”)

Debugging JavaScript

• 1. Debugging JS is a pain

• I know of two reasonable tools for JS debuggin:

– Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843

– VenkMan: https://addons.mozilla.org/en-US/firefox/addon/216

https://addons.mozilla.org/en-US/firefox/addon/1843https://addons.mozilla.org/en-US/firefox/addon/1843https://addons.mozilla.org/en-US/firefox/addon/1843https://addons.mozilla.org/en-US/firefox/addon/216https://addons.mozilla.org/en-US/firefox/addon/216https://addons.mozilla.org/en-US/firefox/addon/216

Get ready for Project 1...

• Use JavaScript to combine at least 2 web services (e.g., YouTube search and Google Maps)

• Groups of 2-3 people (start forming groups now)

• Due in about 3 weeks (details on Thursday)

28

Additional Resources

29

• Your book (Chapter 13, 14)

• JavaScript Tutorial:

– http://www.w3schools.com/js/default.asp

http://www.w3schools.com/js/default.asp

lecture 2: introducing javaeugene/cs190/lectures/jan31-javascript2.pdfjs data types • numbers...

Documents