In this we will see how we construct the page with basic table and basic javascript button event as below :
<html>
<!--(Html tag is starting tag for all the web pages)-->
<head>
<!--(Inside head tag , we need to keep CSS style,Page title etc)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
console.log("welcome"); <!-- console.log("") will log in the console tab from developer tool by pressing f12 in the browser we get the developer tool -->
<!-- alert("welcome"); -->
$("#btnSave").click(function()
{
console.log("Student Name is : " +$("#txtName").val());
console.log("Student Address is: " +$("#txtAddress").val());
});
});
</script>
<style>
<!--
( inside style tag we need to add style to be applied to the page ) -->
h1{
color: blue;
}
</style>
</head>
<body>
<!--(body tag is main tag which is visible in the browser after rendering the page)-->
<h1>Student Registeration</h1>
<table>
<tr>
<td>Name : </td>
<td> <input type="text" id="txtName" /></td>
</tr>
<tr>
<td>Address : </td>
<td> <input type="text" id="txtAddress" /></td>
</tr>
</table>
<input type="button" id="btnSave" value="Save"/>
</body>
</html>
GitHub repo : https://github.com/vinodvskp/WebTraining/blob/master/part2.htm
After running the page you need , enter some name and address in the textboxes , click on the save button , press f12 open the developer tools you will see below output :
No comments:
Post a Comment