JavaScript for Web Development: Syntax, Functions, and Dialogs, Exams of Computer Science

Download JavaScript for Web Development: Syntax, Functions, and Dialogs and more Exams Computer Science in PDF only on Docsity! 1 CS1315: Introduction to Media Computation Web Pages that Interact Contents  Javascript  Using Javascript to make page contents vary  A taste of a new programming language  Using Javascript to respond to the user  How OSCAR and Ebay work What do other languages look like?  We call the language “grammar” its syntax  Python is a fairly traditional language in terms of syntax.  Languages like Scheme, Lisp and Squeak are significantly different.  Some points of difference:  Whether or not variables have to be declared before first use.  Details of how individual lines are written.  Details of how blocks are defined. JavaScript  JavaScript is meant to be a scripting language, like Python.  Scripting languages are good at solving simple tasks.  It’s designed to look like Java to ease the transition in either way.  JavaScript can be used by the web server (used on the computer accessed via the Internet), or it can be used within an HTML page.  If it’s within the HTML page, it’s actually executed by the user’s browser & computer.  We call that client side JavaScript. 2 Preview: Inserting Javascript into HTML <p>This is a very simple web page.</p> <p><image src = "mediasources/barbara.jp g" /> </p> <p>This is being served to you on <script> document.write(Date()); </script> </p> JavaScript syntax: Variables  Variables must be declared before use.  You can’t just say: a = 12  You can either say: var a = 12;  Or: var a; a = 12  In other languages (like Java), you might also declare the variable’s type int a = 12; JavaScript syntax: Blocks  Blocks are delimited with curly braces. function test() { document.writeln("This is a test"); } like def begins a block ends a block JavaScript syntax: Individual statements  Lots of differences:  function instead of def  End lines with semicolons “;”  (and statements can have line breaks in the middle of them.)  The for statement is numeric (mostly) and has different parts to it.  You use write or writeln instead of print  But they’re mostly detailed changes.  The basic operation of JavaScript is similar to Python. 5 Explaining that Loop for (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.  For us, set i to 1  When to stop  For us, 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 languages Operators in JavaScript  The same kind of operators you know in Python  + - * /  + even works for strings, as well as numbers  < <= > >=  == and !=  ! for not  Logical operators are a little weird (but are also like this in C, C++ and Java)  && is AND  || is OR Different 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. Contents  Javascript  Using Javascript to make page contents vary  A taste of a new programming language  Using Javascript to respond to the user  How OSCAR and Ebay work 6 Using dialogs in JavaScript function 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 required in JavaScript (or most other languages.) What happens when this runs Running when 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? Events: Key to responding to users  The problem  The previous program runs when the page loads.  The user sees nothing at all until they go to your page and then these dialog boxes happen.  Not what we want!  The solution  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 happen when the user types a key, moves the mouse, clicks the mouse, etc. 7 Events 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 browser. Catching an Event <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> onClick: “When mouse is clicked, do this…..” Controlling colors with mouseOver and mouseOut <body> <h1>A Simple Heading</h1> <p>This is a very simple web page.</p> <p>Pick any item...</p> <ul> <li onmouseover = "this.style.color='green'" onmouseout = "this.style.color='black'">Pick me!</li> <li onmouseover = "this.style.color='red'" onmouseout = "this.style.color='yellow'">No, pick me!</li> <li onmouseover = "this.style.color='magenta'" onmouseout = "this.style.color='pink'">No, no -- I'm the one!</li> </ul> Contents  Javascript  Using Javascript to make page contents vary  A taste of a new programming language  Using Javascript to respond to the user  How OSCAR and Ebay work