Download presentation
Presentation is loading. Please wait.
1
Scripting Languages
2
Scripting Languages Client Side Scripting Languages
Server side Scripting Languages
3
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
4
JavaScript Allows Interactivity
Improve appearance Especially graphics Visual feedback Site navigation Perform calculations Validation of input Other technologies
5
JavaScript Allows Interactivity
6
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
7
JavaScript is different from Java
A full programming language Much harder! A compiled language Independent of the web Sometimes used together
8
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>
9
More Example <html> <body> <script type="text/javascript"> alert('Hello JavaScript!'); </script> </body> </html>
10
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>
11
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!')" />
12
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)
13
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"};
14
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
15
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
16
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;
17
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);
![Standard Popup Boxes Alert box with text and [OK] button](http://slideplayer.com/slide/6640682/23/images/17/Standard+Popup+Boxes+Alert+box+with+text+and+%5BOK%5D+button.jpg "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);")
18
JavaScript Built-in objects
String Object Date Object Array Object Math Object Boolean Object
19
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()
20
String Object Methods 11. search() 12. split() 13. small()
14. strike() 15. sub() 16.sup() 17. substring() 18. toUpperCase() 19. toLowerCase()
21
Date Object Methods Date() getDate() getDay() getMonth() getYear()
getHours() getMinutes() getSeconds()
22
Date Object Methods 9. getMilliseconds() 10. setDate() 11. setMonth() 12. setYear()
23
Array Object Methods concat() Sort() Push() Pop()
24
Math Object Methods round() Max() Min() Pow() Sqrt() Sin(x) Cos(x)
Tan(x)
25
JavaScript Object Model
26
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>
27
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>
28
Form Processing Using JavaScript
29
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>
30
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>
Similar presentations
