Scripting Languages
• Client Side Scripting Languages
• Server side Scripting Languages
9/29/2025 1
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
9/29/2025 2
JavaScript Allows Interactivity
• Improve appearance
– Especially graphics
– Visual feedback
• Site navigation
• Perform calculations
• Validation of input
• Other technologies
9/29/2025 3
JavaScript Allows Interactivity
9/29/2025 4
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
9/29/2025 5
JavaScript is different from Java
• A full programming language
• Much harder!
• A compiled language
• Independent of the web
• Sometimes used together
9/29/2025 6
Simple JavaScript Example
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
[Link](‘This is my first
JavaScript Page’);
</script>
</body>
</html>
9/29/2025 7
More Example
<html>
<body>
<script type="text/javascript">
alert('Hello JavaScript!');
</script>
</body>
</html>
9/29/2025 8
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="[Link]" type="text/javscript">
<!–- code placed here will not be executed! -->
</script>
9/29/2025 9
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="[Link]" />
9/29/2025 10
The JavaScript Syntax
• The JavaScript syntax is similar to 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
9/29/2025 11
Data Types
• JavaScript data types:
– Numbers (integer, floating-point)
– Boolean (true / false)
• String type – string of characters
var myName = "You can use both single or double
quotes for strings";
• Arrays
var my_array = [1, 5.3, "aaa"];
• Associative arrays (hash tables)
var my_hash = {a:2, b:3, c:"text"};
9/29/2025 12
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([Link](5)); // shows letter 's'
alert("test".charAt(1)); //shows letter 'e'
alert("test".substring(1,3)); //shows 'es'
var arr = [1,3,4];
alert ([Link]); // shows 3
[Link](7); // appends 7 to end of array
alert (arr[3]); // shows 7
9/29/2025 13
String Operations
• The + operator joins strings
string1 = "fat ";
string2 = "cats";
alert(string1 + string2); // fat cats
• What is "9" + 9?
alert("9" + 9); // 99
• Converting string to number:
alert(parseInt("9") + 9); // 18
9/29/2025 14
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:
-[Link](3);
-var element = [Link]();
• Reading the number of elements (array length):
-[Link];
9/29/2025 15
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);
9/29/2025 16
JavaScript Built-in objects
1. String Object
2. Date Object
3. Array Object
4. Math Object
5. Boolean Object
9/29/2025 17
String Object Methods
1. big()-displays a string in big font
2. Blink()- displays a blinking string
3. Bold()- displays a string in bold
4. Concat()- joins two or more strings
5. Fontcolor()
6. charAt()
7. Fontsize()
8. Italics()
9. Link()
10. Replace()
9/29/2025 18
String Object Methods
11. search()
12. split()
13. small()
14. strike()
15. sub()
[Link]()
17. substring()
18. toUpperCase()
19. toLowerCase()
9/29/2025 19
<html>
<body>
<script>
var txt = "Hello World!";
[Link]("The original string: " + txt);
[Link]("<p>Big: " + [Link]() + "</p>");
[Link]("<p>Small: " + [Link]() + "</p>");
[Link]("<p>Bold: " + [Link]() + "</p>");
[Link]("<p>Italic: " + [Link]() + "</p>");
[Link]("<p>Fixed: " + [Link]() + "</p>");
[Link]("<p>Strike: " + [Link]() + "</p>");
[Link]("<p>Fontcolor: " + [Link]("green") + "</p>");
[Link]("<p>Fontsize: " + [Link](6) + "</p>");
[Link]("<p>Subscript: " + [Link]() + "</p>");
[Link]("<p>Superscript: " + [Link]() + "</p>");
[Link]("<p>Link: " + [Link]("[Link] + "</p>");
[Link]("<p>Blink: " + [Link]() + " (does not work in IE, Chrome, Firefox or Safari)</p>");
</script>
</body>
</html>
9/29/2025 20
Date Object Methods
1. Date()
2. getDate()
3. getDay()
4. getMonth()
5. getYear()
6. getHours()
7. getMinutes()
8. getSeconds()
9/29/2025 21
Date Object Methods
9. getMilliseconds()
10. setDate()
11. setMonth()
12. setYear()
9/29/2025 22
<html>
<body>
<p>Click the button to display todays day of the month.</p>
<button it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var d = new Date();
var n = [Link]();
[Link]("demo").innerHTML = n;
}
</script>
</body>
</html>
9/29/2025 23
Array Object Methods
1. concat()
2. Sort()
3. Push()
4. Pop()
9/29/2025 24
Math Object Methods
1. round()
2. Max()
3. Min()
4. Pow()
5. Sqrt()
6. Sin(x)
7. Cos(x)
8. Tan(x)
9/29/2025 25
<html>
<body>
<h2>JavaScript [Link]()</h2>
<p>Math function </p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML =
[Link](0, 150, 30, 20, -8, -200);
</script>
</body>
</html>
9/29/2025 26
<html>
<body>
<h2>JavaScript Math Constants</h2>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML =
"<p><b>Math.E:</b> " + Math.E + "</p>" +
"<p><b>[Link]:</b> " + [Link] + "</p>" +
"<p><b>Math.SQRT2:</b> " + Math.SQRT2 + "</p>" +
"<p><b>Math.LN2:</b> " + Math.LN2 + "</p>" +
"<p><b>Math.LN10:</b> " + Math.LN10 + "</p>" +
</script>
</body>
</html>
9/29/2025 27
JavaScript Object Model
9/29/2025 28
Form Processing Using JavaScript
<html>
<head>
<title>JavaScript Demo</title>
<script type="text/javascript">
function calcSum() {
var value1, value2, sum;
value1=parseInt([Link]);
value2=parseInt([Link]);
sum = value1 + value2;
[Link]=sum;
}
</script>
</head>
9/29/2025 29
Form Processing Using JavaScript
<body>
<form name="myForm">
1st NUMBER : <input type="text" name="textBox1" />
<br/>
2st NUMBER : <input type="text" name="textBox2" />
<br/>
<input type="button" value=“Calculate"
/>
<input type="text" name="textSum"/>
</form>
</body>
</html>
9/29/2025 30
Form Processing Using JavaScript
9/29/2025 31
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([Link]);
rate=parseInt([Link]);
time=parseInt([Link]);
result = (amount*rate*time)/100;
[Link]=result;
}
</script>
</head>
9/29/2025 32
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"
/>
<input type="text" name="txtResult"/>
</form>
</body>
</html>
9/29/2025 33
