Js mod1

Javascript
-Varsha Kumari
02/02/19 1

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

• 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

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>

The First Script
first-script.html
5
<html><html>
<body><body>
<script type="text/javascript"><script type="text/javascript">
alert('Hello JavaScript!');alert('Hello JavaScript!');
</script></script>
</body></body>
</html></html>

Another Small Example
small-example.html
6
<html><html>
<body><body>
document.write('JavaScript rulez!');document.write('JavaScript rulez!');
</script></script>
</body></body>
</html></html>

<html><html>
<head><head>
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

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.

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);

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>

Confirmation Dialog Box
<html>
<head>
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>

Prompt Dialog Box
<html> <head>
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>

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

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"};

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

String Operations
The + operator joins strings
• What is "9" + 9?
• Converting string to number:
17
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

Sum of Numbers – Example
sum-of-numbers.html
18
<html><html>
<head><head>
<title>JavaScript Demo</title><title>JavaScript Demo</title>
function calcSum() {function calcSum() {
value1 =value1 =
parseInt(document.mainForm.textBox1.value);parseInt(document.mainForm.textBox1.value);
value2 =value2 =
parseInt(document.mainForm.textBox2.value);parseInt(document.mainForm.textBox2.value);
sum = value1 + value2;sum = value1 + value2;
document.mainForm.textBoxSum.value = sum;document.mainForm.textBoxSum.value = sum;
}}
</script></script>
</head></head>

Sum of Numbers – Example (2)
sum-of-numbers.html (cont.)
19
<body><body>
<form name="mainForm"><form name="mainForm">
<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="Process"<input type="button" value="Process"
onclick="javascript: calcSum()" />onclick="javascript: calcSum()" />
<input type="text" name="textBoxSum"<input type="text" name="textBoxSum"
readonly="readonly"/>readonly="readonly"/>
</form></form>
</body></body>
</html></html>

Form validation
<html><head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false; }}
</script> </head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return
validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body></html>
02/02/19 20

Js mod1

More Related Content

What's hot (20)

Similar to Js mod1 (20)

More from VARSHAKUMARI49 (16)

Recently uploaded (20)

Js mod1