2. Introduction
• JavaScript is a front-end scripting language
developed by Netscape for dynamic content
– Lightweight, but with limited capabilities
– Can be used as object-oriented language
• Client-side technology
– Embedded in your HTML page
– Interpreted by the Web browser
• Simple and flexible
02/02/19 2
3. • HTML to define the content of web pages
• CSS to specify the layout of web pages
• JavaScript to program the dynamic behavior
of web pages
02/02/19 3
4. Using JavaScript Code
• The JavaScript code can be placed in:
– <script> tag in the head </script>
– <script> tag in the body </script>
– External files, linked via <script> tag in the head
• Files usually have .js extension
4
<script src="scripts.js" type="text/javscript"><script src="scripts.js" type="text/javscript">
</script></script>
7. <html><html>
<head><head>
<script type="text/javascript"><script type="text/javascript">
function test (message) {function test (message) {
alert(message);alert(message);
}}
</script></script>
</head></head>
<body><body>
<img src="logo.gif"<img src="logo.gif"
onclick="test('clicked!')" />onclick="test('clicked!')" />
</body></body>
</html></html>
Calling a JavaScript Function
from Event Handler –
Example
image-onclick.html
7
8. Using External Script Files• Using external script files:
External JavaScript file:
8
<html><html>
<head><head>
<script src="sample.js" type="text/javascript"><script src="sample.js" type="text/javascript">
</script></script>
</head></head>
<body><body>
<button onclick="sample()" value="Call JavaScript<button onclick="sample()" value="Call JavaScript
function from sample.js" />function from sample.js" />
</body></body>
</html></html>
function sample() {function sample() {
alert('Hello from sample.js!')alert('Hello from sample.js!')
external-JavaScript.htmlexternal-JavaScript.html
sample.jssample.js
The <script> tag is always empty.The <script> tag is always empty.
9. <script type = "text/JavaScript" language="JavaScript">
var a = "These sentence";
var italics_a = a.italics();
var b = "will continue over";
var upper_b = b.toUpperCase();
var c = "three variables";
var red_c = c.fontcolor("red");
var sentence = a+b+c;
var sentence_change = italics_a+upper_b+red_c;
document.write(sentence);
document.write("<br>");
document.write(sentence_change);
</script>
10. Standard Popup Boxes
• Alert box with text and [OK] button
– Just a message shown in a dialog box:
• Confirmation box
– Contains text, [OK] button and [Cancel] button:
• Prompt box
– Contains text, input field with default value:
10
alert("Some text here");alert("Some text here");
confirm("Are you sure?");confirm("Are you sure?");
prompt ("enter amount", 10);prompt ("enter amount", 10);
11. Alert Dialog Box
<html> <head>
<script type="text/javascript">
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form> <input type="button" value="Click Me" onclick="Warn();" />
</form>
</body></html>
12. Confirmation Dialog Box
<html>
<head>
<script type="text/javascript">
function getConfirmation()
{
var retVal = confirm("Do you want to continue ?");
if( retVal == true )
{
document.write ("User wants to continue!");
return true;
}
Else
{ document.write ("User does not want to continue!");
return false; }
} </script> </head>
<body> <p>Click the following button to see the result: </p> <form>
<input type="button" value="Click Me" onclick="getConfirmation();" /> </form>
</body> </html>
13. Prompt Dialog Box
<html> <head>
<script type="text/javascript">
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
} </script> </head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
</body></html>
14. 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)
14
15. Data Types
• JavaScript data types:
– Numbers (integer, floating-point)
– Boolean (true / false)
• String type – string of characters
• Arrays
• Associative arrays (hash tables)
15
var myName = "You can use both single or doublevar myName = "You can use both single or double
quotes for strings";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"};
16. Everything is Object• Every variable can be considered as object
– For example strings and arrays have member
functions:
16
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 's'alert(test.charAt(5)); // shows letter 's'
alert("test".charAt(1)); //shows letter 'e'alert("test".charAt(1)); //shows letter 'e'
alert("test".substring(1,3)); //shows 'esalert("test".substring(1,3)); //shows 'es''
var arr = [1,3,4];var arr = [1,3,4];
alert (arr.length); // shows 3alert (arr.length); // shows 3
arr.push(7); // appends 7 to end of arrayarr.push(7); // appends 7 to end of array
alert (arr[3]); // shows 7alert (arr[3]); // shows 7
objects.htmlobjects.html