Introduction to Programming and JavaScript
What is a Program? Instructions Computer Understands Perform Task
What is Programming? Requirements Process Code Test
Control Structures Sequence Conditional Open File Format File Print File Save File Close File Get Section Status Section Full? Register Student Reject Registration No Yes
Control Structures Spaghetti Code! Loop Transfer (GoTo) Open Student File Get Student Record Print Grade Report Students Left? Close Student File Yes No Open File Print File Format File Close File Save File Spaghetti Code!
JavaScript <script type="text/javascript"> function shutdown() { Sctipts are a series of instructions; a mini-program that only runs within an application. Web designer includes JavaScript instructions into an HTML source document; on the browser side a JavaScript interpreter is built into most browsers. The browser translates the JavaScript along with the HTML code. The alert command causes an alert box to display on the screen with a message inside. In the above example the box would read Shutting Down Internet. Capialization matters. It must be alert and not Alert. Use the <script> tag to indicate to the browser where the JavaScript code begins. <script type="text/javascript"> function shutdown() { alert('Shutting Down Internet.') } </script>
JavaScript A programming language. Executed as a script. Object oriented. Extensive document object model (DOM). No file read/write access (except cookies). <script type="text/javascript"> function shutdown() { alert('Shutting Down Internet.') } </script>
<script> <script type=“text/javascript”> Program code written in JavaScript. JavaScript comments. NO HTML! In the script tag the type attribute specifies which type of script syntax/language is embeded in the code. In the past programmers have used the language attribute instead of the type attribute. It allows to designate which verision i.e. language=“JavaScript1.2” 1.5 is the most recent version. The other script is VBScript but it only works with IE. <script> and </script> are part of HTML…everything in between those tags are valid JavaScript statements. You will get an error message, when the page loads, if you put HTML code in the JavaScript. HTML document example like page 191.
Script Locations External Script <html> File <head> <script> … </script> Script is reusable. “Call” script to execute it. It is possible to have more than one <script> element, and they may be in the <head> or <body> elements. Use multiple <script> elements when you want the browser to execute some JavaScript, then execute some HTML, then execute some more JavaScript. The <script>element may also be used to access JavaScript code that is stored in another file, known as an external file. This external file is a text file that has been saved with a .js extension i.e. testCode.js – it can only contain JavaScript (no HTML). Use the src attribute to script element i.e. <script src=“testCode.js” type=“text/javascript”> </script> When the browser loads this from the HTML document it will retrieve and load the testCode.js file. The testCode.js must be in the same directory or the full pathname is required. </head> <body> <script> … </script> Script is executed as the browser displays the web page. </body> </html>
Bugs – Syntax Errors error is here! line 8 <html> <head> <script type="text/javascript"> function shutdown() { do alert('Shutting Down Internet.') } </script> </head> <body> <h1>Shutdown Internet?</h1> <input type="button" value="Shutdown Internet" onclick="shutdown()" /> </body> </html> error is here! line 8
Bugs – Runtime Errors <html> <head> <script type="text/javascript"> function shutdown() { alert('Shutting Down Internet.') } </script> </head> <body> <h1>Shutdown Internet?</h1> <input type="button" value="Shutdown Internet" onclick="do_onclick()" /> </body> </html>
Bugs – Logic Errors function compute_gross_pay(hours, rate) { Gross = hours + rate return Gross }
Comments Please! JavaScript code … // comment continues on this line and on this line */ JavaScript code … /* comment starts on this line and continues on this line
Objects, Events, & Event Handlers <body> <h1>Shutdown Internet?</h1> <input type="button" value="Shutdown Internet" onclick="shutdown()" /> </body> Click button = Click Event The <noscript> element will display a message to surfers whose browsers do not support JavaScript. It is placed at or near the beginning of the <body> section. It is a good practice to display a warning message. The main benefit of JavaScript is the ability to make the pages interactive. Let’s look at Click buttons and click events. A click button is one type of input element that may be added to a web page. Input elements allow the user to input information. The <input> tag inside a <form> element will add the button. The type attribute tells the browser what type of input element to display and the name attribute is internal for the programmer’s use; the value attribute tells what text label for the input type. <input is an empty element that req a /> at the end. At this point click on the button triggers nothing. The event of clicking on the button will activate an event handler (onclick attribute in the button’s <input> tag) for that object which contains the JavaScript commands. There is also the mouseover (pointer over a link text) and mouseout events (pointer off of a link text). But we will do more with these in Chapter 9. Exercise 7.3 page 209. <html> <head> <title> A click button</title> </head> <body> Here’s simple click button: <form> <input type=“button” name=“b1” value=“Click here!”/> <input type=“button” name=“b1” value=“Click here!” onclick=“alert(‘Nice going!’)” /> </form> </body> </html> Object <head> <script type="text/javascript"> function shutdown() { alert('Shutting Down Internet.') } </script> </head>
JavaScript Date in Web Page document.write(document.lastModified) IE: 11/14/2004 20:37:56 Mozilla: Sunday, November 14, 2004 20:37:34