Scripting Languages
Scripting Languages Client Side Scripting Languages Server side Scripting Languages
JavaScript Browsers have limited functionality Text, images, tables, frames JavaScript allows for interactivity Browser/page manipulation Reacting to user actions A type of programming language Easy to learn Developed by Netscape
JavaScript Allows Interactivity Improve appearance Especially graphics Visual feedback Site navigation Perform calculations Validation of input Other technologies
JavaScript Allows Interactivity
How Does It Work? Embedded within HTML page Executes on client View source Executes on client Fast, no connection needed once loaded Simple programming statements combined with HTML tags Interpreted (not compiled) No special tools required
JavaScript is different from Java A full programming language Much harder! A compiled language Independent of the web Sometimes used together
Simple JavaScript Example <html> <head><title>My Page</title></head> <body> <script language="JavaScript"> document.write(‘This is my first JavaScript Page’); </script> </body> </html>
More Example <html> <body> <script type="text/javascript"> alert('Hello JavaScript!'); </script> </body> </html>
Using Java Script code The JavaScript code can be placed in: <script> tag in the head <script> tag in the body – not recommended External files, linked via <script> tag the head Files usually have .js extension <script src="scripts.js" type="text/javscript"> <!–- code placed here will not be executed! --> </script>
JavaScript – When is Executed? JavaScript code is executed during the page loading or when the browser fires an event All statements are executed at page loading Some statements just define functions that can be called later Function calls or code can be attached as "event handlers" via tag attributes Executed when the event is fired by the browser <img src="logo.gif" onclick="alert('clicked!')" />
The JavaScript Syntax The JavaScript syntax is similar to C# and Java Operators (+, *, =, !=, &&, ++, …) Variables (typeless) Conditional statements (if, else) Loops (for, while) Arrays (my_array[]) and associative arrays (my_array['abc']) Functions (can return value) Function variables (like the C# delegates)
Data Types JavaScript data types: String type – string of characters Numbers (integer, floating-point) Boolean (true / false) String type – string of characters Arrays Associative arrays (hash tables) var myName = "You can use both single or double quotes for strings"; var my_array = [1, 5.3, "aaa"]; var my_hash = {a:2, b:3, c:"text"};
Everything is Object Every variable can be considered as object For example strings and arrays have member functions: var test = "some string"; alert(test[7]); // shows letter 'r' alert(test.charAt(5)); // shows letter 's' alert("test".charAt(1)); //shows letter 'e' alert("test".substring(1,3)); //shows 'es' var arr = [1,3,4]; alert (arr.length); // shows 3 arr.push(7); // appends 7 to end of array alert (arr[3]); // shows 7
String Operations The + operator joins strings What is "9" + 9? Converting string to number: string1 = "fat "; string2 = "cats"; alert(string1 + string2); // fat cats alert("9" + 9); // 99 alert(parseInt("9") + 9); // 18
Arrays Operations and Properties Declaring new empty array: -var arr = new Array(); Declaring an array holding few elements: -var arr = [1, 2, 3, 4, 5]; Adding & removing an element: -arr.push(3); -var element = arr.pop(); Reading the number of elements (array length): -arr.length;
Standard Popup Boxes Alert box with text and [OK] button Just a message shown in a dialog box: alert("Some text here"); Confirmation box Contains text, [OK] button and [Cancel] button: confirm("Are you sure?"); Prompt box Contains text, input field with default value: prompt ("enter amount", 10);
JavaScript Built-in objects String Object Date Object Array Object Math Object Boolean Object
String Object Methods big()-displays a string in big font Blink()- displays a blinking string Bold()- displays a string in bold Concat()- joins two or more strings Fontcolor() charAt() Fontsize() Italics() Link() Replace()
String Object Methods 11. search() 12. split() 13. small() 14. strike() 15. sub() 16.sup() 17. substring() 18. toUpperCase() 19. toLowerCase()
Date Object Methods Date() getDate() getDay() getMonth() getYear() getHours() getMinutes() getSeconds()
Date Object Methods 9. getMilliseconds() 10. setDate() 11. setMonth() 12. setYear()
Array Object Methods concat() Sort() Push() Pop()
Math Object Methods round() Max() Min() Pow() Sqrt() Sin(x) Cos(x) Tan(x)
JavaScript Object Model
Form Processing Using JavaScript <html> <head> <title>JavaScript Demo</title> <script type="text/javascript"> function calcSum() { var value1, value2, sum; value1=parseInt(document.myForm.textBox1.value); value2=parseInt(document.myForm.textBox2.value); sum = value1 + value2; document.myForm.textSum.value=sum; } </script> </head>
Form Processing Using JavaScript <body> <form name="myForm"> <input type="text" name="textBox1" /> <br/> <input type="text" name="textBox2" /> <br/> <input type="button" value=“Calculate" onclick="javascript:calcSum()" /> <input type="text" name="textSum"/> </form> </body> </html>
Form Processing Using JavaScript
Program in JavaScript to find out Simple Interest <html> <head> <title>JavaScript Demo</title> <script type="text/javascript"> function calcResult() { var amount, rate, time, result; amount=parseInt(document.myForm.txtAmount.value); rate=parseInt(document.myForm.txtRate.value); time=parseInt(document.myForm.txtTime.value); result = (amount*rate*time)/100; document.myForm.txtResult.value=result; } </script> </head>
Program in JavaScript to find out Simple Interest <body> <form name="myForm"> <input type="text" name="txtAmount" /> <br/> <input type="text" name="txtRate" /> <br/> <input type="text" name="txtTime" /> <br/> <input type="button" value=“Calculate" onclick="javascript:calcResult()" /> <input type="text" name="txtResult"/> </form> </body> </html>