Timer Events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var now = new Date();
var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday",
"Friday", "Staturday"];
var months = ["January", "Feb",
"March","April","May","June","July","August"];
function SetClock(){
[Link]("date").innerHTML = `
${weekdays[[Link]()]} ${[Link]()}, $
{months[[Link]()]} ${[Link]()}
`;
}
function SetTimer(){
var now = new Date();
[Link]("time").innerHTML= [Link]();
}
function bodyload(){
SetClock();
setInterval(SetTimer,1000);
var now = new Date();
var hrs = [Link]();
var status = [Link]("status");
var poster = [Link]("poster");
if(hrs>=0 && hrs<=12){
[Link] = "Good Morning";
[Link] = "../public/images/[Link]";
}else if(hrs>12 && hrs<=17) {
[Link] = "Good Afternoon";
} else if(hrs>17 && hrs<=23) {
[Link] = "Good Evening";
}
}
</script>
</head>
<body onload="bodyload()">
<p align="center" id="date"></p>
<p align="center" id="time"></p>
<p align="center" id="status"></p>
<p align="center">
<img id="poster" width="100" height="100">
</p>
</body>
</html>
Form Events
- onsubmit
- onreset
- The form events are defined for <form> element.
- They fireup only on submit and reset button clicks.
- They define actions to perform when form is submitted or user resets the form.
Syntax:
<form onsubmit="function" onreset="function"> </form>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form onsubmit="alert('Form will submit data to server')" onreset="alert('Form
will reset')">
User name : <input type="text" name="UserName">
<button type="submit">Submit</button>
<button type="reset">Cancel</button>
</form>
</body>
</html>
FAQ: How to submit form using other HTML elements?
Ans: You have to call the form "submit()" on the specific element event.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function CityChange(){
[Link]();
}
</script>
</head>
<body>
<form name="frmMovies">
<dl>
<dt>User Name</dt>
<dd><input type="text" name="UserName"></dd>
<dt>City</dt>
<dd>
<select onchange="CityChange()" name="City">
<option>Select City</option>
<option>Delhi</option>
<option>Hyd</option>
</select>
</dd>
</dl>
</form>
</body>
</html>
Adding Event Listener
- You can add events to HTML element without configuring an event handler.
- It allows dynamically to configure events.
- It make clean separation of code and UI.
- You have to configure Event Listener on specific event or using a module system.
Syntax:
[Link]("button").addEventListener("eventName", function(){
// actions to perform
})
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
[Link]("btnInsert").addEventListener("click",
function(){
[Link]("Record Inserted");
})
}
</script>
</head>
<body onload="bodyload()">
<button id="btnInsert">Insert</button>
</body>
</html>
FAQ: How to change events for element dynamically?
Ans: By adding Event Listener.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function ChangeEvent(){
var eventName = [Link]("select").value;
[Link]("btnInsert").addEventListener(eventName,
function(){
[Link]("Record Inserted");
})
}
</script>
</head>
<body>
<div>
<select onchange="ChangeEvent()">
<option>Select Event</option>
<option value="mouseover">Mouse Over</option>
<option value="click">On Click</option>
</select>
</div>
<br><br><br>
<button id="btnInsert">Insert</button>
</body>
</html>
State Management Techniques
- Every web application uses "http or https" as protocol.
- Http is a state less protocol.
- It can't remember information between pages.
- Hence web applications implement various state management techniques to store
data and access across pages or requests.
- The state management is classified into 2 types
a) Client Side State Management
b) Server Side State Management
- Client Side State Management allows to store data on client device.
- The various client side state management techniques are
1. Query String
2. Local Storage
3. Session Storage
4. Cookies
Query String:
- A query string is appended into URL with a key and value reference
?key=value
- Any form can submit its data into query string on "Get" request.
- You can access querystring using
"[Link]"
Ex:
1. Add a new folder
"State"
2. Add files
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Home Page</h2>
<form action="[Link]">
User Name :
<input type="text" name="UserName">
<button>Submit</button>
</form>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
var queryString = [Link];
var name = [Link]([Link]("=")+1);
[Link]("p").innerHTML = `Hello ! ${name}`;
}
</script>
</head>
<body onload="bodyload()">
<h2>Welcome Page</h2>
<p></p>
</body>
</html>
Local Storage
- Every browser have a local storage.
- It is permanent storage.
- It is available even after your device shut-down.
- You have to delete manually from browser memory.
- It is accessible across all tabs in browser.
Syntax:
[Link]("key", "value");
var value = [Link]("key");
Ex:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function SubmitClick(){
[Link]("uname",
[Link]("UserName").value);
[Link] = "[Link]";
}
</script>
</head>
<body>
<h2>Home Page</h2>
User Name :
<input type="text" id="UserName" name="UserName">
<button onclick="SubmitClick()">Submit</button>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
if([Link]("uname")==null){
[Link] = "[Link]";
} else {
[Link]("p").innerHTML = `Hello ! $
{[Link]("uname")}`;
}
}
</script>
</head>
<body onload="bodyload()">
<h2>Welcome Page</h2>
<p></p>
</body>
</html>
Session Storage
- It is temporary storage.
- It is not accessible to other tabs.
- It is removed when browser is closed.
Note: You can store 10mb of data in local or session storage.
Syntax:
[Link]("key", "value");
var ref = [Link]("key");
[Link]("key");
Ex:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function SubmitClick(){
[Link]("uname",
[Link]("UserName").value);
[Link] = "[Link]";
}
</script>
</head>
<body>
<h2>Home Page</h2>
User Name :
<input type="text" id="UserName" name="UserName">
<button onclick="SubmitClick()">Submit</button>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
if([Link]("uname")==null){
[Link] = "[Link]";
} else {
[Link]("p").innerHTML = `Hello ! $
{[Link]("uname")}`;
}
}
function SignoutClick(){
[Link]("uname");
[Link] = "[Link]";
}
</script>
</head>
<body onload="bodyload()">
<h2>Welcome Page <button onclick="SignoutClick()">Signout</button> </h2>
<p></p>
</body>
</html>
Cookies
- Cookies are simple text documents.
- Client related information can be stored in a cookie file and used later by page.
- Cookies need to be enabled in browser.
- You can verify cookie status by using
"[Link]" => true if enabled with cookies
- Cookie can be in-memory [temporary] or persistent [permanent]
Syntax:
[Link] = "key=value; expires= date time";
var ref = [Link];
[Link] = "key;" => delete cookie
Ex:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function SubmitClick(){
[Link] = `uname=${[Link]("UserName").value};
expires=Thu 7, Sep 2023 [Link]`;
[Link] = "[Link]";
}
</script>
</head>
<body>
<h2>Home Page</h2>
User Name :
<input type="text" id="UserName" name="UserName">
<button onclick="SubmitClick()">Submit</button>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
[Link]("p").innerHTML =
[Link]([Link]("=")+1);
}
function SignoutClick(){
[Link]("uname");
[Link] = "[Link]";
}
</script>
</head>
<body onload="bodyload()">
<h2>Welcome Page <button onclick="SignoutClick()">Signout</button> </h2>
<p></p>
</body>
</html>
