Scribd
Upload
7 views

JavaScript Day7

The document provides an overview of JavaScript forms, validation, and objects, detailing how to validate user input through client-side and server-side methods. It explains the concept of APIs and introduces JavaScript callbacks, asynchronous programming with setTimeout and setInterval, and the Promise object. Additionally, it covers the properties and methods related to validation and object manipulation in JavaScript.

Uploaded by

pranav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

JavaScript Day7

The document provides an overview of JavaScript forms, validation, and objects, detailing how to validate user input through client-side and server-side methods. It explains the concept of APIs and introduces JavaScript callbacks, asynchronous programming with setTimeout and setInterval, and the Promise object. Additionally, it covers the properties and methods related to validation and object manipulation in JavaScript.

Uploaded by

pranav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

Javascript

Day 7
JavaScript Forms
<!DOCTYPE html> </head>
<html><head><script> <body>
function validateForm() { <form name="myForm"
action="/action_page.php"
var x =
document.forms["myForm"] onsubmit="return validateForm()"
["fname"].value; method="post">

if (x == "") { Name: <input type="text"


name="fname">
alert("Name must be filled out");
<input type="submit"
return false; value="Submit">
} </form></body></html>
}
</script>
Example
<!DOCTYPE html> x=
document.getElementById("numb").value
<html>
;
<body>
// If x is Not a Number or less than one
<h2>JavaScript Can Validate Input</h2> or greater than 10
<p>Please input a number between 1 if (isNaN(x) || x < 1 || x > 10) {
and 10:</p>
text = "Input not valid";
<input id="numb">
} else {
<button type="button"
text = "Input OK";
onclick="myFunction()">Submit</button
> }
<p id="demo"></p>
document.getElementById("demo").inner
<script>
HTML = text;
function myFunction() {
}
var x, text;
</script></body></html>
// Get the value of the input field with
id="numb"
Example

<!DOCTYPE html>
<html><body>
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>
</body></html>
Data Validation
Data validation is the process of ensuring that user input is clean,
correct, and useful.
Typical validation tasks are:
has the user filled in all required fields?
has the user entered a valid date?
has the user entered text in a numeric field?
 Server side validation is performed by a web server, after input
has been sent to the server.
 Client side validation is performed by a web browser, before input
is sent to a web server.
API

 Application programming interface


 API is the acronym for Application Programming Interface, which is a
software intermediary that allows two applications to talk to each other.
Each time you use an app like Facebook, send an instant message, or
check the weather on your phone, you're using an API.
 API is the messenger that delivers your request to the provider that you're
requesting it from and then delivers the response back to you.
 types of APIs, alongside protocols and standards, such as Open APIs,
Internal APIs, Partner APIs, Composite APIs, RESTFUL, JSON-RPC, XML-
RPC, and SOAP. APIs (application programming interfaces) come in many
forms.
Constraint Validation DOM Methods
Property Description
checkValidity() Returns true if an input element contains valid data.
setCustomValidity( Sets the validationMessage property of an input element.
)

Constraint Validation DOM


Properties
Property Description
validity Contains boolean properties related to the validity of an input
element.
validationMessage Contains the message a browser will display when the validity
is false.
willValidate Indicates if an input element will be validated.
Example
<!DOCTYPE html> function myFunction() {
<html> var inpObj =
document.getElementById("id1");
<body>
if (!inpObj.checkValidity()) {
<p>Enter a number and click
OK:</p>
document.getElementById("demo").in
<input id="id1" type="number"
nerHTML = inpObj.validationMessage;
min="100" max="300" required>
} else {
<button
onclick="myFunction()">OK</button
> document.getElementById("demo").in
nerHTML = "Input OK";
<p>If the number is less than 100 or
greater than 300, an error message }
will be displayed.</p>
}
<p id="demo"></p>
</script></body></html>
<script>
Validity Properties

Property Description
customError Set to true, if a custom validity message is set.
patternMismatch Set to true, if an element's value does not match its pattern
attribute.
rangeOverflow Set to true, if an element's value is greater than its max
attribute.
rangeUnderflow Set to true, if an element's value is less than its min attribute.
stepMismatch Set to true, if an element's value is invalid per its step
attribute.
tooLong Set to true, if an element's value exceeds its maxLength
attribute.
typeMismatch Set to true, if an element's value is invalid per its type
attribute.
valueMissing Set to true, if an element (with a required attribute) has no
value.
valid Set to true, if an element's value is valid.
Example
<!DOCTYPE html> if
(document.getElementById("id1").validity.range
<html>
Overflow) {
<body>
txt = "Value too large";
<p>Enter a number and click OK:</p>
} else {
<input id="id1" type="number" max="100">
txt = "Input OK";
<button onclick="myFunction()">OK</button>
}
<p>If the number is greater than 100 (the
document.getElementById("demo").innerHTML
input's max attribute), an error message will be
= txt;
displayed.</p>
}
<p id="demo"></p>
</script></body></html>
<script>
function myFunction() {
var txt = "";
Example
<!DOCTYPE html> txt = "Value too small";
<html><body> } else {
<p>Enter a number and click OK:</p> txt = "Input OK";
<input id="id1" type="number" min="100"> }
<button onclick="myFunction()">OK</button> document.getElementById("demo").innerHTML =
txt;
<p>If the number is less than 100 (the input's min
attribute), an error message will be displayed.</p> }
<p id="demo"></p> </script></body></html>
<script>
function myFunction() {
var txt = "";
if
(document.getElementById("id1").validity.rangeUnde
rflow) {
JavaScript Objects

In JavaScript, almost "everything" is an object.


 Booleans can be objects (if defined with the new keyword)
 Numbers can be objects (if defined with the new keyword)
 Strings can be objects (if defined with the new keyword)
 Dates are always objects
 Maths are always objects
 Regular expressions are always objects
 Arrays are always objects
 Functions are always objects
 Objects are always objects
All JavaScript values, except primitives, are objects.
Example

<!DOCTYPE html> // Create and display a variable:


<html> var person = "John Doe";
<body> document.getElementById("demo").
innerHTML = person;
</script>
<h2>JavaScript Variables</h2>

</body>
<p id="demo"></p>
</html>

<script>
Example
<!DOCTYPE html> eyeColor : "blue"
<html><body> };
<p>Creating a JavaScript document.getElementById(
Object.</p> "demo").innerHTML =
<p id="demo"></p> person.firstName + " " +
person.lastName;
<script>
</script></body></html>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
Object Properties

Property Value
firstName John
lastName Doe
age 50
eyeColor blue

Objects written as name value pairs are similar to:


•Associative arrays in PHP
•Dictionaries in Python
•Hash tables in C
•Hash maps in Java
•Hashes in Ruby and Perl
Object Methods
Property Value
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}
JavaScript Callbacks
<!DOCTYPE html> function myFirst() {
<html><body> myDisplayer("Hello");
<h2>JavaScript Function }
Sequence</h2> function mySecond() {
<p>JavaScript functions are myDisplayer("Goodbye");
executed in the sequence they
are called.</p> }
<p id="demo"></p> myFirst();
<script> mySecond();
function myDisplayer(some) { </script></body></html>

document.getElementById("dem
o").innerHTML = some;
}
Example
<!DOCTYPE html> }
<html><body> function myFirst() {
<h2>JavaScript Function myDisplayer("Hello");
Sequence</h2> }
<p>JavaScript functions are function mySecond() {
executed in the sequence they
are called.</p> myDisplayer("Goodbye");
<p id="demo"></p> }
<script> mySecond();
function myDisplayer(some) { myFirst();
</script></body></html>
document.getElementById("dem
o").innerHTML = some;
Example
<!DOCTYPE html> emo").innerHTML = some;
<html><body> }
<h2>JavaScript function myCalculator(num1,
Functions</h2> num2) {
<p>Do a calculation and let sum = num1 + num2;
then display the result.</p> return sum;
<p id="demo"></p> }
<script> let result = myCalculator(5,
function myDisplayer(some) 5);
{ myDisplayer(result);
</script></body></html>
document.getElementById("d
Example
<!DOCTYPE html> "demo").innerHTML =
<html><body> some;

<h2>JavaScript }
Callbacks</h2> function
<p>Do a calculation and myCalculator(num1, num2,
then display the myCallback) {
result.</p> let sum = num1 + num2;
<p id="demo"></p> myCallback(sum);
<script> }
function myCalculator(5, 5,
myDisplayer(some) { myDisplayer);
</script></body></html>
document.getElementById(
Asynchronous JavaScript

 Waiting for Files


 If you create a function to load an external resource (like a script or a
file), you cannot use the content before it is fully loaded.
 This is the perfect time to use a callback.
Example

<!DOCTYPE html> setTimeout(myFunction, 4000);


<html>
<body> function myFunction() {

document.getElementById("demo").inner
<h2>JavaScript SetTimeout()</h2>
HTML = "I love You !!";
}
<p>Wait 4 seconds (4000 milliseconds),
</script>
and this page will change.</p>

</body>
<h1 id="demo"></h1>
</html>

<script>
Example

<!DOCTYPE html>
<html> function myFunction() {
<body> let d = new Date();
document.getElementById("demo").innerHTML=
<h2>JavaScript setInterval()</h2> d.getHours() + ":" +
d.getMinutes() + ":" +
<p>Using setInterval() to display the time every d.getSeconds();
second (1000 milliseconds).</p>
}
</script>
<h1 id="demo"></h1>

</body>
<script>
</html>
setInterval(myFunction, 1000);
Promise
<!DOCTYPE html> if (x == 0) {
<html> myResolve("OK");
<body> } else {
<h2>JavaScript Promise</h2> myReject("Error");
<p id="demo"></p> }
<script> });
function myDisplayer(some) { myPromise.then(
document.getElementById("demo").innerHTML function(response) {myDisplayer(response);},
= some;
function(error) {myDisplayer(error);}
}
);
let myPromise = new
</script></body></html>
Promise(function(myResolve, myReject) {
let x = 0; // some code (try to change x to 5)
Promise Object Properties
A JavaScript Promise object can be:
Pending
Fullfilled
Rejected
The Promise object supports two properties: state and result.
While a Promise object is "pending" (working), the result is undefined.
When a Promise object is "fullfilled", the result is a value.
When a Promise object is "rejected", the result is an error object.
Syntax:
promise.then(function(result)
{ // if it worked }, { // if it broke }
);
Example

<!DOCTYPE html> if (x == 0) {
<html><body> myResolve("OK");
<h2>JavaScript Promise</h2> } else {
<p id="demo"></p> myReject("Error");
<script> }
function myDisplayer(some) { });
myPromise.then(
document.getElementById("demo").innerH
function(response)
TML = some;
{myDisplayer(response);},
}
function(error) {myDisplayer(error);}
let myPromise = new
);
Promise(function(myResolve, myReject) {
</script></body></html>
let x = 0;
// some code (try to change x to 5)

You might also like