JavaScript part 2Learning GoalsUsing LoopsExplaining that FunctionExplaining that LoopOperators in JavaScriptUsing Dialogs in JavaScriptWhat Happens When this RunsDifferent kinds of dialogsRunning on Loading the PageEvents: Key to responding to usersEvents in JavaScriptCatching an eventExample Event CodeExerciseSummaryGeorgia Institute of TechnologyJavaScriptpart 2Barb EricsonGeorgia Institute of TechnologyMay 2006Georgia Institute of TechnologyLearning Goals•Computing Concepts–How to do loops in JavaScript–JavaScript operators–How to use dialogs in JavaScript–How to handle events in JavaScriptGeorgia Institute of TechnologyUsing Loops<html><head><title>The Simplest Possible Web Page</title><script>function countToTen() { document.write("<ul>"); for (i=1; i<= 10; i++) { document.write("<li>Item number: ",i); } document.write("</ul>");}</script></head><body><h1>A Simple Heading</h1><p>This is a very simple web page.</p><p><image src="mediasources/barbara.jpg" /></p><script> countToTen() </script></body></html>Georgia Institute of TechnologyExplaining that Functionfunction countToTen(){ document.write("<ul>"); for (i=1; i<= 10; i++) { document.write("<li>Item number: ",i); } document.write("</ul>");}We can write out <ul> and </ul>Creating an item for each value of iGeorgia Institute of TechnologyExplaining that Loopfor (i=1; i<= 10; i++) { document.write("<li>Item number: ",i); }•A for loop has three parts, separated by semi-colons.–What to do first.•set i to 1–When to do the body•i<=10–What to do each time through the loop•i++ means to increment the value of i by 1.•It’s a notation that was invented by the programming language C and has been adopted by many languagesGeorgia Institute of TechnologyOperators in JavaScript•The same kind of operators you know in Java+ - * /+ even works for strings, as well as numbers< <= > >= == and !=! for not•Logical operators are a little weird&& is AND|| is ORGeorgia Institute of TechnologyUsing Dialogs in JavaScriptfunction check(){ var agree = false; agree = confirm('Do you enjoy CS?'); if (agree) notes=prompt("Give me one good thing about CS:"); if (!agree) notes=prompt("Why don't you like CS?"); alert("You said:"+notes);}…<script> check() </script></body></html>agree will be true or false. !agree is not agree.Notice: We can indent or not indent as we want here. Indentation is not important in JavaScript (or most other languages, except to the reader)Georgia Institute of TechnologyWhat Happens When this RunsGeorgia Institute of TechnologyDifferent kinds of dialogs•Confirm: Puts up a prompt, returns true or false.•Alert: Beeps and displays one thing with an OK button. No return.•Prompt: Asks the user for a line of text. Returns that text.Georgia Institute of TechnologyRunning on Loading the Page•This program runs when the page loads.•Is that what you really want to happen?–The user sees nothing at all until they go to your page and then these dialog boxes happen.•Isn’t it more natural for dialog boxes to pop up when you click on something?Georgia Institute of TechnologyEvents: Key to responding to users•The key to responding to users are events.•Events are actions taken by the user that can be caught by your program in JavaScript.•Events are caused by the user typing a key, moving the mouse, clicking the mouse, and so on.Georgia Institute of TechnologyEvents in JavaScript•onKeyPress•onKeyUp•onKeyDown•onClick•onDblClick•onMouseOver•onMouseOut•onMouseMove•onMouseDown•onMouseUp•onChange (for text fields)•onLoad•And many, many more–Some of them depend on the type of browser.Georgia Institute of TechnologyCatching an event•On appropriate tags, assign the event to some JavaScript code in a string.–Most of these can be used with anchor or image tags.–onLoad can be used with the <body> tag.–onChange can be used with text fields.•We haven’t seen them yet.Georgia Institute of TechnologyExample Event Code<body><h1>A Simple Heading</h1><p>This is a very simple web page.</p><p><image src="mediasources/barbara.jpg" onClick='alert("You clicked me!")' /></p></body>Georgia Institute of TechnologyExercise•Create a Web page that has a picture in it and when you click on the picture –change some text on the page•Create a Web page that has a picture on it and when you click on the picture–Use a dialog to show the number of times it was clicked onGeorgia Institute of TechnologySummary•JavaScript loops are like Java's loops–For and while loops•JavaScript operators are like Java's operators–Except for AND and OR•There are three types of dialogs in JavaScript–Confirm, alert and prompt•You can respond to user events–Like onClick, onChange,
Unlocking...
or
We will never post anything without your permission.
Don't have an account? Sign up