Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
JavaScript Diversion It‟s not just about Java. A Quick Diversion You have learned fundamental features of all languages. So let‟s briefly focus on JavaScript. Convince you that you can do any language. A handy tool. • Particularly useful for designing web pages. Not Related to Java JavaScript is a different programming language from Java. Similar names that‟s all. JavaScript developed for programming on web pages JavaScript is built into browsers • Netscape • IE • etc. Makes running your code very easy. Graphics, file writing, (etc.) more limited than Java. Similarities Has all the fundamental features that we‟ve discussed in Java if statements for loops while loops etc. Most modern programming languages are similar in features. Big Difference Big difference “Untyped” language So don‟t declare a variable type. e.g., no int, double, float, char, etc. Just say var i = 1; var j = 3.0; var k = i+j; var letter = „c‟; var message = “go skiing”; Medium-Big Difference Variable Scope In Java, variables are local only useable within the {…} where defined e.g. if(temp == 85) { String message = “go play”; } System.out.println(message); In JavaScript variables are usually global if(temp == 85) { var message = “go play”; } document.write(message); error! exception is local within functions (stay tuned) works! Small Differences Devil in the details document.write() instead of System.out.println() Different input methods. Other methods differ. Mostly annoyances. You know the basic logic/structure! Learn one (modern) language, know them all. HTML Hypertext Markup Language All web pages use HTML Just tags to delineate text. NOT part of the programming language. <HTML> <BODY> <!-- we‟ll insert some code here--> <H2>Hello!</H2> <P> I‟m going to insert some code on my web page! </P> </BODY> </HTML> all opening tags have corresponding closing tags Save this as “hello.html”, and it will display in a browser. SCRIPT Tag Insert JavaScript with the <SCRIPT> tag. JavaScript code! Demo with laptop in class! <HTML> <BODY> <SCRIPT LANGUAGE = "JavaScript" > document.write("<H2>Hello!</H2>"); document.write("<P>"); document.write("Wrote this with code!"); document.write("</P>"); </SCRIPT> </BODY> </HTML> Just like System.out.println() but writes out stuff onto the web page. Try it! Using If and Loops Same as Java <HTML> <BODY> <SCRIPT LANGUAGE = "JavaScript"> document.write("<H2>Even and odd numbers to 10.</H2>"); for(var i=1; i<=10; i++) { if(i%2 == 0) { document.write("The number "+i+" is even. <BR>"); } else { document.write("The number "+i+" is odd. <BR>"); } } </SCRIPT> </BODY> Demo with laptop in class! </HTML> Output document.write displays on browser displays in popup alert <HTML> <BODY> <SCRIPT LANGUAGE = "JavaScript"> document.write("<H3>Popped up an alert box.<H3>"); alert("Yo!"); </SCRIPT> </BODY> </HTML> Demo with laptop in class! Input Use HTML input forms <FORM NAME=ageForm> <INPUT TYPE=text NAME=age SIZE=10> <INPUT TYPE=button VALUE=”Submit Your Age” onClick="calculateAge()"> </FORM> Consider first input – a text field. Has type text input box name i.e., input stored in that variable! • Use the variable by calling “document.ageForm.age.value” Consider second input – a button you click. form name Has a variable name of age User types text or numbers (up to 10 characters). Runs the JavaScript program called calculateAge() Actually, this is a method (or function) Runs after clicked. value typed by user Input Example HTML JavaScript <HTML> <BODY> <H2>How old are you?</H2> <FORM NAME= ageForm> <INPUT TYPE=text NAME=age SIZE=10> <INPUT TYPE=button VALUE=”Submit Your Age” onClick="calculateAge()"> </FORM> <SCRIPT LANGUAGE = "JavaScript"> function calculateAge() { var age = document.ageForm.age.value; if(age<10) { alert("You are young."); } else { alert("You are ancient."); } } </SCRIPT> </BODY> </HTML> Demo with laptop in class! Using Two functions <FORM NAME= ageForm> <INPUT TYPE=text NAME=age SIZE=10 onFocus=“buzzOff()”> <INPUT TYPE=button VALUE=”Submit Your Age” onClick="calculateAge()"> </FORM> <SCRIPT LANGUAGE = "JavaScript"> function calculateAge() { var age = document.ageForm.age.value; if(age<10) { alert("You are young."); } else { alert("You are ancient."); } } function buzzOff() { alert("Buzz off."); } </SCRIPT> This is the same as the last example. But now call two functions! OnFocus means “when the cursor is placed here” Demo with laptop in class! Java Functions? Can we do these in java too? Of course. Called methods. Let‟s do it!