scripting languages. client side scripting languages server side scripting languages
TRANSCRIPT
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– 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><html>
<body><body>
<script <script type="text/javascript">type="text/javascript">
alert('Hello JavaScript!');alert('Hello JavaScript!');
</script></script>
</body></body>
</html></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" <script src="scripts.js" type="text/javscript">type="text/javscript"><!–- code placed here will not be executed! <!–- code placed here will not be executed! -->--></script></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" <img src="logo.gif" onclick="alert('clicked!')" />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:– 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 var myName = "You can use both single or double quotes for strings";double quotes for strings";
var my_array = [1, 5.3, "aaa"];var my_array = [1, 5.3, "aaa"];
var my_hash = {a:2, b:3, c:"text"};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";var test = "some string";alert(test[7]); // shows letter 'r'alert(test[7]); // shows letter 'r'alert(test.charAt(5)); // shows letter alert(test.charAt(5)); // shows letter 's''s'alert("test".charAt(1)); //shows letter alert("test".charAt(1)); //shows letter 'e''e'alert("test".substring(1,3)); //shows alert("test".substring(1,3)); //shows 'es''es'
var arr = [1,3,4];var arr = [1,3,4];alert (arr.length); // shows 3alert (arr.length); // shows 3arr.push(7); // appends 7 to end of arr.push(7); // appends 7 to end of arrayarrayalert (arr[3]); // shows 7alert (arr[3]); // shows 7
String Operations
• The + operator joins strings
• What is "9" + 9?
• Converting string to number:
string1 = "fat ";string1 = "fat ";string2 = "cats";string2 = "cats";alert(string1 + string2); // fat catsalert(string1 + string2); // fat cats
alert("9" + 9); // 99alert("9" + 9); // 99
alert(parseInt("9") + 9); // 18alert(parseInt("9") + 9); // 18
Arrays Operations and Properties
• Declaring new empty array: -var arr = new Array();-var arr = new Array();• Declaring an array holding few elements: -var arr = [1, 2, 3, 4, 5];var arr = [1, 2, 3, 4, 5];• Adding & removing an element: -arr.push(3);arr.push(3);
-var element = arr.pop();-var element = arr.pop();
• Reading the number of elements (array length): -arr.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");alert("Some text here");
• Confirmation box– Contains text, [OK] button and [Cancel] button:
confirm("Are you sure?");confirm("Are you sure?");
• Prompt box– Contains text, input field with default value:prompt ("enter amount", 10);prompt ("enter amount", 10);
JavaScript Built-in objects
1. String Object2. Date Object3. Array Object4. Math Object5. Boolean Object
1. big()-displays a string in big font2. Blink()- displays a blinking string3. Bold()- displays a string in bold4. Concat()- joins two or more strings5. Fontcolor()6. charAt()7. Fontsize()8. Italics()9. Link()10. Replace()
String Object Methods
String Object Methods
11. search()12. split()13. small()14. strike()15. sub()16.sup()17. substring()18. toUpperCase()19. toLowerCase()
Date Object Methods
1. Date()2. getDate()3. getDay()4. getMonth()5. getYear()6. getHours()7. getMinutes()8. getSeconds()
Date Object Methods
9. getMilliseconds()10. setDate()11. setMonth()12. setYear()
Array Object Methods
1. concat()2. Sort()3. Push()4. Pop()
Math Object Methods
1. round()2. Max()3. Min()4. Pow()5. Sqrt()6. Sin(x)7. Cos(x)8. Tan(x)
JavaScript Object Model
Form Processing Using JavaScript<html><html>
<head><head>
<title>JavaScript Demo</title><title>JavaScript Demo</title>
<script type="text/javascript"><script type="text/javascript">
function calcSum() {function calcSum() {
var value1, value2, sum;var value1, value2, sum;
value1=parseInt(document.myForm.textBox1.value);value1=parseInt(document.myForm.textBox1.value);
value2=parseInt(document.myForm.textBox2.value);value2=parseInt(document.myForm.textBox2.value);
sum = value1 + value2;sum = value1 + value2;
document.myForm.textSum.value=sum;document.myForm.textSum.value=sum;
}}
</script></script>
</head></head>
Form Processing Using JavaScript<body><body>
<form name="myForm"><form name="myForm">
<input type="text" name="textBox1" /> <br/><input type="text" name="textBox1" /> <br/>
<input type="text" name="textBox2" /> <br/><input type="text" name="textBox2" /> <br/>
<input type="button" value=“Calculate" <input type="button" value=“Calculate"
onclick="javascript:calcSum()" />onclick="javascript:calcSum()" />
<input type="text" name="textSum"/><input type="text" name="textSum"/>
</form></form>
</body></body>
</html></html>
Form Processing Using JavaScript
Program in JavaScript to find out Simple Interest
<html><html>
<head><head>
<title>JavaScript Demo</title><title>JavaScript Demo</title>
<script type="text/javascript"><script type="text/javascript">
function calcResult() {function calcResult() {
var amount, rate, time, result;var amount, rate, time, result;
amount=parseInt(document.myForm.txtAmount.value);amount=parseInt(document.myForm.txtAmount.value);
rate=parseInt(document.myForm.txtRate.value);rate=parseInt(document.myForm.txtRate.value);
time=parseInt(document.myForm.txtTime.value);time=parseInt(document.myForm.txtTime.value);
result = (amount*rate*time)/100;result = (amount*rate*time)/100;
document.myForm.txtResult.value=result;document.myForm.txtResult.value=result;
}}
</script></script>
</head></head>
Program in JavaScript to find out Simple Interest
<body><body>
<form name="myForm"><form name="myForm">
<input type="text" name="txtAmount" /> <br/><input type="text" name="txtAmount" /> <br/>
<input type="text" name="txtRate" /> <br/><input type="text" name="txtRate" /> <br/>
<input type="text" name="txtTime" /> <br/><input type="text" name="txtTime" /> <br/>
<input type="button" value=“Calculate" <input type="button" value=“Calculate"
onclick="javascript:calcResult()" />onclick="javascript:calcResult()" />
<input type="text" name="txtResult"/><input type="text" name="txtResult"/>
</form></form>
</body></body>
</html></html>