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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Js mod1

Similar to Js mod1 (20)

More from VARSHAKUMARI49

More from VARSHAKUMARI49 (16)

Recently uploaded

Recently uploaded (20)

Js mod1