{"id":155,"date":"2018-07-26T10:58:35","date_gmt":"2018-07-26T10:58:35","guid":{"rendered":"http:\/\/csp12.epgpbooks.inflibnet.ac.in\/?post_type=chapter&p=155"},"modified":"2018-08-02T06:45:40","modified_gmt":"2018-08-02T06:45:40","slug":"javascript-and-event-handling","status":"publish","type":"chapter","link":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/chapter\/javascript-and-event-handling\/","title":{"rendered":"JavaScript and Event Handling"},"content":{"raw":"
\r\n\r\nJavaScript - Event Handlers<\/strong>\r\n\r\n \r\n

JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. When the page loads, it is called an event. It allows us to execute an action of code when the event occurs. All the event handlers in JavaScript start with the keyword on<\/em><\/strong>, and each event handler deals with a certain type of event. (For eg, onClick<\/strong> )<\/p>\r\n \r\n\r\nHow it works:<\/strong>\r\n\r\n \r\n\r\nStep 1:\u00a0 \u00a0 User moves mouse over object\r\n\r\nStep 2:\u00a0 \u00a0Event senses that something happened to the object\r\n\r\nStep 3:\u00a0 \u00a0JavaScript (Event handler) tells the object what to do\r\n\r\nStep 4:\u00a0 \u00a0Using DOM, the handler locates the object on the web page\r\n\r\nStep 5:\u00a0 \u00a0Object\u2019s image source is changed\r\n\r\n<\/div>\r\n

Here Step is an action where the user moves the mouse over an object. This action is sensed as an event, and JavaScript handles this event with an event handler. Using DOM, the object is located and the reaction to the event is performed as toggling the source image to anaother one. This is shown in the below diagram.<\/p>\r\n \r\n

\"\"<\/p>\r\n

The following is the list of event handlers described along with the Objects on which they can be applied and when they are triggered as given in Table 19.1.<\/p>\r\n \r\n

TABLE 19.1: Event Handlers<\/strong><\/p>\r\n \r\n

\"\"<\/p>\r\n \r\n

\r\n\r\nNow let us demonstrate some of the event type with examples and the output of it.\r\n\r\n \r\n\r\nonClick Event Type<\/strong>\r\n\r\n \r\n\r\nThis event occurs when a user clicks the left button of his mouse.\r\n\r\n \r\n\r\nExample 1<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n< script type=\"text\/javascript\">\r\n\r\nfunction sayHello()\r\n\r\n{\r\n\r\nalert(\"Hello World\")\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/head><\/span>\r\n\r\n<body><\/span>\r\n\r\n<p>Click the following button and see result<\/p> <form><\/span>\r\n\r\n<input type=\"button\" onclick=\"sayHello()\" value=\"Say Hello\" \/> <\/form><\/span>\r\n\r\n<\/body><\/span>\r\n\r\n<\/html><\/span>\r\n\r\n<\/div>\r\n

\u00a0 On clicking the button it calls the function sayHello() which alerts a message as shown in FIgure 19.1 and Figure 19.2.<\/p>\r\n \r\n\r\nOutput:<\/strong>\r\n\r\n \r\n

\"\"<\/p>\r\nExample 2<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<title> color world <\/title>\r\n\r\n<script language = \"JAVASCRIPT\">\r\n\r\nfunction color(f, a)\r\n\r\n{\r\n\r\ndocument.bgColor=a;\r\n\r\nalert(a);\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body bgcolor=gray>\r\n\r\n<form name=myform>\r\n\r\n<input type = button value=red onClick=color(this.form,\"RED\")>\r\n\r\n<input type = button value=orange onClick=color(this.form,\"ORANGE\")> <input type = button value=green onClick=color(this.form,\"GREEN\")> <input type = button value=violet onClick=color(this.form,\"VIOLET\")> <\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

This example is to demonstrate the onClick event type which changes the background color of the document on clicking the respective buttons as shown in Figure 19.3 and Figure 19.4.<\/p>\r\n \r\n\r\nOutput<\/strong>\r\n\r\n \r\n

\"\"<\/p>\r\n \r\n

\"\"<\/p>\r\n \r\n

\r\n\r\n\u00a0 \u00a0 \u00a0onSubmit Event type<\/strong>\r\n\r\n \r\n\r\nThe onSubmit<\/strong> is an event that occurs when you try to submit a form.\r\n\r\nSyntax<\/strong>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\nfunction validate()\r\n\r\n{\r\n\r\nall validation goes here\r\n\r\n.........\r\n\r\nreturn either true or false\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<form method=\"POST\" action=\"t.cgi\" onsubmit=\"return validate()\"> <input type=\"submit\" value=\"Submit\" \/>\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\nThe example demonstates that the form is validated when a submit button is clicked as shown in Figure 19.5.\r\n\r\n<\/div>\r\n\u00a0 \u00a0 Output:<\/strong>\r\n\r\n\"\"\r\n\r\nonMouseOver and onMouseOut Event<\/strong>\r\n\r\n \r\n\r\n \r\n\r\nThe onMouseOver<\/strong> event is triggered when you bring your mouse over any element on the document and the onMouseOut<\/strong> event is triggered when you move your mouse out from that element.\r\n\r\n \r\n\r\nExample 1:<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\nfunction over() {\r\n\r\ndocument.write (\"Mouse Over\");\r\n\r\n}\r\n\r\nfunction out() {\r\n\r\ndocument.write (\"Mouse Out\");\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<p>Bring your mouse inside the division to see the result:<\/p>\r\n\r\n<div onmouseover = \"over()\" onmouseout= \"out()\u201c > <h2> This is inside the division <\/h2>\r\n\r\n<\/div>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

This example demonstrates the onmouseover and onmouseout event types. When the mouse is moved over the text, the function over() is called which displays the message \"Mouse Over\" and when the mouse is moved out of the text , the function out() is called which displays the message \"Mouse Out\". The output of this example code is shown in the Figure 19.6 and Figure 19.7.<\/p>\r\n \r\n\r\nOutput:<\/strong>\r\n\r\n \r\n

\"\"<\/p>\r\n \r\n\r\nExample 2:<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<title> image world <\/title>\r\n\r\n<\/head>\r\n\r\n<body >\r\n\r\n<a href=ex.html onMouseOver = document.images[0].src = \"FLOWER.jpg\"\r\n\r\nonMouseOut = document.images[0].src = \"GRAPES.jpg\" > <img src=\"GRAPES.jpg\" wi dth=160 height=100 border=1> <\/a>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

This example toggles the image on thedocument when the mouse is moved over or moved out of the image displayed. The output of this example code is shown in Figure 19.8 and Figure 19.9.<\/p>\r\n \r\n\r\nOutput:<\/strong>\r\n\r\n \r\n

\"\"<\/p>\r\n

Figure 19.9<\/strong><\/p>\r\n \r\n

\r\n\r\nJavaScript Form Validation<\/strong>\r\n\r\n \r\n\r\nHTML form validation can be done by writing a script code using JavaScript.\r\n\r\n<\/div>\r\n
\r\n\r\n\u00a0 \u00a0 <\/strong>\r\n\r\nExample:<\/strong>\r\n\r\n \r\n\r\nAn example to validate the name to be filled out without leaving it blank is shown below.\r\n\r\nfunction validateForm() {\r\n\r\nvar x = document.forms[\"myForm\"][\"fname\"].value; if (x == null || x == \"\") {\r\n\r\nalert(\"Name must be filled out\");\r\n\r\nreturn false;\r\n\r\n}\r\n\r\n}\r\n\r\n \r\n\r\nJavaScript Forms<\/strong>\r\n\r\n \r\n\r\n<form name=\"myForm\" action=\"demo_form.asp\" onsubmit=\"return<\/strong> validateForm()\" <\/strong>method=\"post\">\r\n\r\nName: <input type=\"text\" name=\"fname\">\r\n\r\n<input type=\"submit\" value=\"Submit\">\r\n\r\n<\/form>\r\n\r\n \r\n\r\nExample 1:<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\nfunction newValue()\r\n\r\n{\r\n\r\nvar x=document.forms.myForm\r\n\r\nx[0].value=\"The mere act of aiming at something makes you big\"\r\n\r\nx[0].select()\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<body>\r\n\r\n<form name=\"myForm\">\r\n\r\n<textarea name=\"myTextarea\" rows=\"10\" cols=\"20\"> The roots of e ducation are bitter but the fruit is sweeter <\/textarea><br \/>\r\n\r\n<input type=\"button\" onclick=\"newValue()\" value=\"New Value\"> <\/form><\/body><\/html>\r\n\r\n<\/div>\r\n

This example is to demonstrate about validating a form which has a textarea. The textarea is initially shown with the text. On clicking the button, the function newValue() is called which displays another text. The method select() is used to display the textarea as selected. The output is shown in FIgure 19.10.<\/p>\r\n \r\n\r\nOutput:<\/strong>\r\n\r\n \r\n

\"\"<\/p>\r\n\r\n

\r\n\r\n\u00a0 \u00a0 \u00a0Example 2:<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<title> Forms<\/title>\r\n\r\n<!--This code checks the Checkbox When the button is clicked -->\r\n\r\n<script Language='JavaScript'>\r\n\r\nfunction Chk(f1)\r\n\r\n{\r\n\r\nf1.Check.checked=true;\r\n\r\nwindow.alert(\"The Checkbox just got checked\");\r\n\r\nf1.Check.checked=false;\r\n\r\nf1.Radio[0].checked=true;\r\n\r\nf1.Radio[1].checked=false;<\/span>\r\n\r\nwindow.alert(\"The Radio button just got checked\");<\/span>\r\n\r\n}<\/span>\r\n\r\n<\/script><\/span>\r\n\r\n<\/head><\/span>\r\n\r\n<body><\/span>\r\n\r\n<form><\/span>\r\n\r\nClient Name :\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Input Type =Text Name=\"Text\" Value=\"\"><br><br><\/span>\r\n\r\nClient Address : <Input Type =Text Name=\"Text1\" Value=\"\"><br><br> Client E-mail Address : <Input Type =Text Name=\"Text2\" Value=\"\"><br><br> <Input Type=\"radio\" Name=\"Radio\" Value=\"\"> Male<\/span>\r\n\r\n<Input Type=\"radio\" Name=\"Radio\" Value=\"\"> Female<br><br><\/span>\r\n\r\n<Input Type=\u201ccheckbox\" Name=\"Check\" Value=\"\"> Em ploye d <br><br> <Input Type=\"Button\" Name=\"Bt\" Value=\"Set Element Array Value\"<\/span>\r\n\r\nonClick=\"Chk(this.form)\"><\/span>\r\n\r\n<\/form><\/span>\r\n\r\n<\/body><\/span>\r\n\r\n<\/html><\/span>\r\n\r\n<\/div>\r\n

This example is to demonstrate about validating a form which has a checkbox or a radiobutton. If checkbox is checked or radiobutton is checked, the property \"checked\" is made true and it will display the message as checked. The output is shown in Figure 19.11.<\/p>\r\n \r\n\r\nOutput:<\/strong>\r\n\r\n \r\n

\"\"<\/p>\r\n \r\n\r\nExample 3:<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<script language=\"javascript\">\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<form>\r\n\r\nFirstName:<input type=\"text\" name=\"Firstname\" size=20 onFocus=\"this.blur();\">\r\n\r\nLastName:<input type=\"text\" name=\"Lastname\" size=20><p>\r\n\r\nAddress:<input type=\"text\" name=\"Address\" size=60><p> pincode:<input type=\"text\" name=\"Pincode\" size=6><p> <input type=\"button\" name=\"act\" value=\"verify\"> <\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

This example code demonstrates the use of function onFocus on a textfield. When a focus is gained on the textfield, it is made to blur using the function blur() which will not allow to enter any data in the textfield. The output is shown in Figure 19.12.<\/p>\r\n \r\n\r\nOutput:<\/strong>\r\n\r\n \r\n

\"\"<\/p>\r\n \r\n

\r\n\r\nExample 4:<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<title>forms1<\/title>\r\n\r\n<script>\r\n\r\nfunction func(f1)\r\n\r\n{\r\n\r\nalert(\"the form elements have been cleared\");\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<form onReset=\"func(this.form)\">\r\n\r\nClient Name: <input type=\"text\" name=\"text\" value=\"\"><br><br>\r\n\r\nClient address: <input type=\"text\" name=\"text1\" value=\"\"><br><br> <input type=\"radio\" name=\"radio\" value=\"\">male\r\n\r\n<input type=\"radio\" name=\"radio\" value=\"\">female<br><br>\r\n\r\n<input type=\"checkbox\" name=\"check\" value=\"\">employed<br><br> <input type=\"reset\" name=\"rst\" value=\"reset\">\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

This example code demonstrates validating a form on a reset button. The event onReset is triggered when a reset button is clicked which clears the form content and displays the message as cleared. The output is shown in Figure 19.13<\/p>\r\n\r\n<\/div>\r\n\u00a0 \u00a0 Output:<\/strong>\r\n\r\n \r\n

\"\"<\/p>\r\n\r\n

\r\n\r\nExample 5:<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<title> using text and button objects<\/title>\r\n\r\n<script language=\"javascript\">\r\n\r\nfunction calculate(form)\r\n\r\n{\r\n\r\nform.results.value= eval(form.entry.value * 10 );\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<form>\r\n\r\n<input type=\"text\" name=\"entry\" value=\"\">\r\n\r\n<input type=\"button\" value=\"calculate\" onClick=\"calculate(this.form);\"\r\n\r\n<br>\r\n\r\n<input type=\"text\" name=\"results\" onFocus=\"this.blur();\"> <br>\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n<\/div>\r\n

This example code demonstrates the use of onClick() and onFocus(). The onFocus is applied on results textfield which will not allow to enter any value using the blur() method. The value entered on the entry field is calculated and shown in the result field. The output of this code is shown in Figure 19.14.<\/p>\r\n \r\n\r\nOutput:<\/strong>\r\n\r\n \r\n

\"\"<\/p>\r\n \r\n

\r\n\r\nExample 6:<\/strong>\r\n\r\n \r\n\r\n<htMl>\r\n\r\n<head>\r\n\r\n<title>working with checkboxes<\/title>\r\n\r\n<script>\r\n\r\nfunction calculate(form, callingField)\r\n\r\n{\r\n\r\nif(callingField==\"result\")\r\n\r\n{\r\n\r\nif(form.square.checked)\r\n\r\n{\r\n\r\nform.entry.value= Math.sqrt(form.result.value);\r\n\r\n}\r\n\r\nelse\r\n\r\n{\r\n\r\nform.entry.value=form.result.value\/2;\r\n\r\n}\r\n\r\n}\r\n\r\nelse {<\/span>\r\n\r\nif(form.square.checked)<\/span>\r\n\r\n{<\/span>\r\n\r\nform.result.value = form.entry.value * form.entry.value;<\/span>\r\n\r\n}<\/span>\r\n\r\nE<\/span>lse {<\/span>\r\n\r\nform.result.value = form.entry.value*2;<\/span>\r\n\r\n}<\/span>\r\n\r\n}}<\/span>\r\n\r\n<\/script><\/span>\r\n\r\n<\/head><\/span>\r\n\r\n<body><\/span>\r\n\r\n<form><\/span>\r\n\r\n<center><br><\/span>\r\n\r\n<b> value: <\/b><\/span>\r\n\r\n<input type =\"text\" name = \"entry\" value = 0 onChange =\"calculate(this.form,this.name);\"> <br><br><\/span>\r\n\r\n<b>action<\/b>(default-double):<\/span>\r\n\r\n<input type =\"checkbox\" name = \"square\" onClick = \"calculate(this.form,this.name);\">square <br><br><\/span>\r\n\r\n<b> result: <\/b><\/span>\r\n\r\n<input type =\"text\" name = \"result\" value = 0 onChange = \"calculate(this.form,this.name);\"> <\/center><\/span>\r\n\r\n<\/form><\/span>\r\n\r\n<\/body><\/span>\r\n\r\n<\/html><\/span>\r\n\r\n<\/div>\r\n
\r\n

This example code demonstrates the use of onClick and onChange event types. There are two textfields (entry and result) and a radiobutton in the form. If the calling field is result field, and if the checkbox is checked then it calculates the squareroot of the value entered in the result field and displays in the entry field else it calculates half of the result value and displays in the entry field. Similarly when the value entered in the entry field changes, based on the checkbox checked or not checked displays the square of the value entered in the entry field or multiplies the value by 2 and displays in the result field. The output of this code is shown in Figure 19.15.<\/p>\r\n\r\n<\/div>\r\n\u00a0 \u00a0 Output:<\/strong>\r\n\r\n \r\n

\"\"<\/p>\r\n\r\n

\r\n\r\n\u00a0 \u00a0 \u00a0JavaScript Cookies<\/strong>\r\n\r\n \r\n

A cookie is used to store information on the user\u2019s computer even when the user switches off his\/her computer. It is a data that is sent from a web server to a web browser when the user visits a site on a server. It is just a .txt file stored in a user\u2019s computer. A cookie can be associated with one or more documents on the web server. More than one cookie can be associated with a document on the web server. Every cookie has a NAME-VALUE pair associated with it. Cookies have an expiration date associated with them.<\/p>\r\n \r\n\r\nCookies are a plain text data record of 5 variable-length fields:\r\n\r\n \r\n\r\n1.Expires <\/strong>\u2212 The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.\r\n\r\n2.Domain <\/strong>-The domain name of your site.\r\n\r\n3.\u00a0<\/span>Path <\/strong>\u2212 The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or page.<\/span>\r\n\r\n4.<\/span>Secure <\/strong>\u2212 If this field contains the word \"secure\", then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists.<\/span>\r\n\r\n5.\u00a0<\/span>Name-Value <\/strong>- Cookies are set and retrieved in the form of key-value pairs.<\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 \u00a0Create Cookies<\/strong>\r\n\r\n \r\n\r\nWe can create a cookie by assigning a string value to the document.cookie object.document.cookie = \"key1=value1;key2=value2;expires=date\";\r\n\r\n \r\n\r\nStore Cookies<\/strong>\r\n\r\n \r\n\r\nExample<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\nfunction WriteCookie()\r\n\r\n{\r\n\r\nif( document.myform.customer.value == \"\" )\r\n\r\n{\r\n\r\nalert(\"Enter some value!\");\r\n\r\nreturn;\r\n\r\n}\r\n\r\ncookievalue= escape(document.myform.customer.value) + \";\"; document.cookie=\"name=\" + cookievalue;\r\n\r\ndocument.write (\"Setting Cookies : \" + \"name=\" + cookievalue );\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<form name=\"myform\" action=\"\">\r\n\r\nEnter name: <input type=\"text\" name=\"customer\"\/>\r\n\r\n<input type=\"button\" value=\"Set Cookie\" onclick=\"WriteCookie();\"\/> <\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

The example shows how a cookie can be created and stored. It retrieves the value from the textfield and stores it as a cookie.<\/p>\r\n\r\n<\/div>\r\n<html>\r\n\r\n<head>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\nfunction ReadCookie()\r\n\r\n{\r\n\r\nvar allcookies = document.cookie;\r\n\r\ndocument.write (\"All Cookies : \" + allcookies );\r\n

    \r\n \t
  • \/\/ Get all the cookies pairs in an array cookiearray = allcookies.split(';');<\/li>\r\n \t
  • \/\/ Now take key value pair out of this array for(var i=0; i<cookiearray.length; i++)<\/li>\r\n<\/ul>\r\n{\r\n\r\nname = cookiearray[i].split('=')[0]; value = cookiearray[i].split('=')[1];\r\n\r\ndocument.write (\"Key is : \" + name + \" and Value is : \" + value);\r\n\r\n}\r\n\r\n}\r\n\r\n \r\n

    The function ReadCookie() retrieve the stored cookie from document.cookie and store in a variable.Then we can use a for loop to read each cookie as a key-value pair.<\/p>\r\n \r\n\r\nSummary<\/strong>\r\n\r\n \r\n

    This module explains about the JavaScript Event handling mechanisms. This module also explores about working with HTML form validation using HTML DOM and Event handling and finally discusses about JavaScript Cookies.<\/p>\r\n \r\n\r\nWeb Links<\/strong>\r\n

      \r\n \t
    • http:\/\/www.w3schools.com\/<\/em><\/li>\r\n \t
    • www.doc.ic.ac.uk\/~rcheung\/teaching\/2720\/ppt\/lecture04c.ppt<\/em><\/li>\r\n \t
    • Paul J. Deitel, Harvey M. Deitel, Abbey Deitel, \"Internet and World Wide Web How To Program\", 5th Edition, Pearson Education, 2012.<\/em><\/li>\r\n<\/ul>\r\n \r\n\r\n ","rendered":"
      \n

      JavaScript – Event Handlers<\/strong><\/p>\n

       <\/p>\n

      JavaScript’s interaction with HTML is handled through events that occur when the user or the browser manipulates a page. When the page loads, it is called an event. It allows us to execute an action of code when the event occurs. All the event handlers in JavaScript start with the keyword on<\/em><\/strong>, and each event handler deals with a certain type of event. (For eg, onClick<\/strong> )<\/p>\n

       <\/p>\n

      How it works:<\/strong><\/p>\n

       <\/p>\n

      Step 1:\u00a0 \u00a0 User moves mouse over object<\/p>\n

      Step 2:\u00a0 \u00a0Event senses that something happened to the object<\/p>\n

      Step 3:\u00a0 \u00a0JavaScript (Event handler) tells the object what to do<\/p>\n

      Step 4:\u00a0 \u00a0Using DOM, the handler locates the object on the web page<\/p>\n

      Step 5:\u00a0 \u00a0Object\u2019s image source is changed<\/p>\n<\/div>\n

      Here Step is an action where the user moves the mouse over an object. This action is sensed as an event, and JavaScript handles this event with an event handler. Using DOM, the object is located and the reaction to the event is performed as toggling the source image to anaother one. This is shown in the below diagram.<\/p>\n

       <\/p>\n

      \"\"<\/p>\n

      The following is the list of event handlers described along with the Objects on which they can be applied and when they are triggered as given in Table 19.1.<\/p>\n

       <\/p>\n

      TABLE 19.1: Event Handlers<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

       <\/p>\n

      \n

      Now let us demonstrate some of the event type with examples and the output of it.<\/p>\n

       <\/p>\n

      onClick Event Type<\/strong><\/p>\n

       <\/p>\n

      This event occurs when a user clicks the left button of his mouse.<\/p>\n

       <\/p>\n

      Example 1<\/strong><\/p>\n

       <\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      < script type=”text\/javascript”><\/p>\n

      function sayHello()<\/p>\n

      {<\/p>\n

      alert(“Hello World”)<\/p>\n

      }<\/p>\n

      <\/script><\/p>\n

      <\/head><\/span><\/p>\n

      <body><\/span><\/p>\n

      <p>Click the following button and see result<\/p> <form><\/span><\/p>\n

      <input type=”button” onclick=”sayHello()” value=”Say Hello” \/> <\/form><\/span><\/p>\n

      <\/body><\/span><\/p>\n

      <\/html><\/span><\/p>\n<\/div>\n

      \u00a0 On clicking the button it calls the function sayHello() which alerts a message as shown in FIgure 19.1 and Figure 19.2.<\/p>\n

       <\/p>\n

      Output:<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

      Example 2<\/strong><\/p>\n

       <\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      <title> color world <\/title><\/p>\n

      <script language = “JAVASCRIPT”><\/p>\n

      function color(f, a)<\/p>\n

      {<\/p>\n

      document.bgColor=a;<\/p>\n

      alert(a);<\/p>\n

      }<\/p>\n

      <\/script><\/p>\n

      <\/head><\/p>\n

      <body bgcolor=gray><\/p>\n

      <form name=myform><\/p>\n

      <input type = button value=red onClick=color(this.form,”RED”)><\/p>\n

      <input type = button value=orange onClick=color(this.form,”ORANGE”)> <input type = button value=green onClick=color(this.form,”GREEN”)> <input type = button value=violet onClick=color(this.form,”VIOLET”)> <\/form><\/p>\n

      <\/body><\/p>\n

      <\/html><\/p>\n

       <\/p>\n

      This example is to demonstrate the onClick event type which changes the background color of the document on clicking the respective buttons as shown in Figure 19.3 and Figure 19.4.<\/p>\n

       <\/p>\n

      Output<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

       <\/p>\n

      \"\"<\/p>\n

       <\/p>\n

      \n

      \u00a0 \u00a0 \u00a0onSubmit Event type<\/strong><\/p>\n

       <\/p>\n

      The onSubmit<\/strong> is an event that occurs when you try to submit a form.<\/p>\n

      Syntax<\/strong><\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      <script type=”text\/javascript”><\/p>\n

      function validate()<\/p>\n

      {<\/p>\n

      all validation goes here<\/p>\n

      ………<\/p>\n

      return either true or false<\/p>\n

      }<\/p>\n

      <\/script><\/p>\n

      <\/head><\/p>\n

      <body><\/p>\n

      <form method=”POST” action=”t.cgi” onsubmit=”return validate()”> <input type=”submit” value=”Submit” \/><\/p>\n

      <\/form><\/p>\n

      <\/body><\/p>\n

      <\/html><\/p>\n

       <\/p>\n

      The example demonstates that the form is validated when a submit button is clicked as shown in Figure 19.5.<\/p>\n<\/div>\n

      \u00a0 \u00a0 Output:<\/strong><\/p>\n

      \"\"<\/p>\n

      onMouseOver and onMouseOut Event<\/strong><\/p>\n

       <\/p>\n

       <\/p>\n

      The onMouseOver<\/strong> event is triggered when you bring your mouse over any element on the document and the onMouseOut<\/strong> event is triggered when you move your mouse out from that element.<\/p>\n

       <\/p>\n

      Example 1:<\/strong><\/p>\n

       <\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      <script type=”text\/javascript”><\/p>\n

      function over() {<\/p>\n

      document.write (“Mouse Over”);<\/p>\n

      }<\/p>\n

      function out() {<\/p>\n

      document.write (“Mouse Out”);<\/p>\n

      }<\/p>\n

      <\/script><\/p>\n

      <\/head><\/p>\n

      <body><\/p>\n

      <p>Bring your mouse inside the division to see the result:<\/p><\/p>\n

      <div onmouseover = “over()” onmouseout= “out()\u201c > <h2> This is inside the division <\/h2><\/p>\n

      <\/div><\/p>\n

      <\/body><\/p>\n

      <\/html><\/p>\n

       <\/p>\n

      This example demonstrates the onmouseover and onmouseout event types. When the mouse is moved over the text, the function over() is called which displays the message “Mouse Over” and when the mouse is moved out of the text , the function out() is called which displays the message “Mouse Out”. The output of this example code is shown in the Figure 19.6 and Figure 19.7.<\/p>\n

       <\/p>\n

      Output:<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

       <\/p>\n

      Example 2:<\/strong><\/p>\n

       <\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      <title> image world <\/title><\/p>\n

      <\/head><\/p>\n

      <body ><\/p>\n

      <a href=ex.html onMouseOver = document.images[0].src = “FLOWER.jpg”<\/p>\n

      onMouseOut = document.images[0].src = “GRAPES.jpg” > <img src=”GRAPES.jpg” wi dth=160 height=100 border=1> <\/a><\/p>\n

      <\/body><\/p>\n

      <\/html><\/p>\n

       <\/p>\n

      This example toggles the image on thedocument when the mouse is moved over or moved out of the image displayed. The output of this example code is shown in Figure 19.8 and Figure 19.9.<\/p>\n

       <\/p>\n

      Output:<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

      Figure 19.9<\/strong><\/p>\n

       <\/p>\n

      \n

      JavaScript Form Validation<\/strong><\/p>\n

       <\/p>\n

      HTML form validation can be done by writing a script code using JavaScript.<\/p>\n<\/div>\n

      \n

      \u00a0 \u00a0 <\/strong><\/p>\n

      Example:<\/strong><\/p>\n

       <\/p>\n

      An example to validate the name to be filled out without leaving it blank is shown below.<\/p>\n

      function validateForm() {<\/p>\n

      var x = document.forms[“myForm”][“fname”].value; if (x == null || x == “”) {<\/p>\n

      alert(“Name must be filled out”);<\/p>\n

      return false;<\/p>\n

      }<\/p>\n

      }<\/p>\n

       <\/p>\n

      JavaScript Forms<\/strong><\/p>\n

       <\/p>\n

      <form name=”myForm” action=”demo_form.asp” onsubmit=”return<\/strong> validateForm()” <\/strong>method=”post”><\/p>\n

      Name: <input type=”text” name=”fname”><\/p>\n

      <input type=”submit” value=”Submit”><\/p>\n

      <\/form><\/p>\n

       <\/p>\n

      Example 1:<\/strong><\/p>\n

       <\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      <script type=”text\/javascript”><\/p>\n

      function newValue()<\/p>\n

      {<\/p>\n

      var x=document.forms.myForm<\/p>\n

      x[0].value=”The mere act of aiming at something makes you big”<\/p>\n

      x[0].select()<\/p>\n

      }<\/p>\n

      <\/script><\/p>\n

      <\/head><\/p>\n

      <body><\/p>\n

      <body><\/p>\n

      <form name=”myForm”><\/p>\n

      <textarea name=”myTextarea” rows=”10″ cols=”20″> The roots of e ducation are bitter but the fruit is sweeter <\/textarea><br \/><\/p>\n

      <input type=”button” onclick=”newValue()” value=”New Value”> <\/form><\/body><\/html><\/p>\n<\/div>\n

      This example is to demonstrate about validating a form which has a textarea. The textarea is initially shown with the text. On clicking the button, the function newValue() is called which displays another text. The method select() is used to display the textarea as selected. The output is shown in FIgure 19.10.<\/p>\n

       <\/p>\n

      Output:<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

      \n

      \u00a0 \u00a0 \u00a0Example 2:<\/strong><\/p>\n

       <\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      <title> Forms<\/title><\/p>\n

      <!–This code checks the Checkbox When the button is clicked –><\/p>\n

      <script Language=’JavaScript’><\/p>\n

      function Chk(f1)<\/p>\n

      {<\/p>\n

      f1.Check.checked=true;<\/p>\n

      window.alert(“The Checkbox just got checked”);<\/p>\n

      f1.Check.checked=false;<\/p>\n

      f1.Radio[0].checked=true;<\/p>\n

      f1.Radio[1].checked=false;<\/span><\/p>\n

      window.alert(“The Radio button just got checked”);<\/span><\/p>\n

      }<\/span><\/p>\n

      <\/script><\/span><\/p>\n

      <\/head><\/span><\/p>\n

      <body><\/span><\/p>\n

      <form><\/span><\/p>\n

      Client Name :\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Input Type =Text Name=”Text” Value=””><br><br><\/span><\/p>\n

      Client Address : <Input Type =Text Name=”Text1″ Value=””><br><br> Client E-mail Address : <Input Type =Text Name=”Text2″ Value=””><br><br> <Input Type=”radio” Name=”Radio” Value=””> Male<\/span><\/p>\n

      <Input Type=”radio” Name=”Radio” Value=””> Female<br><br><\/span><\/p>\n

      <Input Type=\u201ccheckbox” Name=”Check” Value=””> Em ploye d <br><br> <Input Type=”Button” Name=”Bt” Value=”Set Element Array Value”<\/span><\/p>\n

      onClick=”Chk(this.form)”><\/span><\/p>\n

      <\/form><\/span><\/p>\n

      <\/body><\/span><\/p>\n

      <\/html><\/span><\/p>\n<\/div>\n

      This example is to demonstrate about validating a form which has a checkbox or a radiobutton. If checkbox is checked or radiobutton is checked, the property “checked” is made true and it will display the message as checked. The output is shown in Figure 19.11.<\/p>\n

       <\/p>\n

      Output:<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

       <\/p>\n

      Example 3:<\/strong><\/p>\n

       <\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      <script language=”javascript”><\/p>\n

      <\/script><\/p>\n

      <\/head><\/p>\n

      <body><\/p>\n

      <form><\/p>\n

      FirstName:<input type=”text” name=”Firstname” size=20 onFocus=”this.blur();”><\/p>\n

      LastName:<input type=”text” name=”Lastname” size=20><p><\/p>\n

      Address:<input type=”text” name=”Address” size=60><p> pincode:<input type=”text” name=”Pincode” size=6><p> <input type=”button” name=”act” value=”verify”> <\/form><\/p>\n

      <\/body><\/p>\n

      <\/html><\/p>\n

       <\/p>\n

      This example code demonstrates the use of function onFocus on a textfield. When a focus is gained on the textfield, it is made to blur using the function blur() which will not allow to enter any data in the textfield. The output is shown in Figure 19.12.<\/p>\n

       <\/p>\n

      Output:<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

       <\/p>\n

      \n

      Example 4:<\/strong><\/p>\n

       <\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      <title>forms1<\/title><\/p>\n

      <script><\/p>\n

      function func(f1)<\/p>\n

      {<\/p>\n

      alert(“the form elements have been cleared”);<\/p>\n

      }<\/p>\n

      <\/script><\/p>\n

      <\/head><\/p>\n

      <body><\/p>\n

      <form onReset=”func(this.form)”><\/p>\n

      Client Name: <input type=”text” name=”text” value=””><br><br><\/p>\n

      Client address: <input type=”text” name=”text1″ value=””><br><br> <input type=”radio” name=”radio” value=””>male<\/p>\n

      <input type=”radio” name=”radio” value=””>female<br><br><\/p>\n

      <input type=”checkbox” name=”check” value=””>employed<br><br> <input type=”reset” name=”rst” value=”reset”><\/p>\n

      <\/form><\/p>\n

      <\/body><\/p>\n

      <\/html><\/p>\n

       <\/p>\n

      This example code demonstrates validating a form on a reset button. The event onReset is triggered when a reset button is clicked which clears the form content and displays the message as cleared. The output is shown in Figure 19.13<\/p>\n<\/div>\n

      \u00a0 \u00a0 Output:<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

      \n

      Example 5:<\/strong><\/p>\n

       <\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      <title> using text and button objects<\/title><\/p>\n

      <script language=”javascript”><\/p>\n

      function calculate(form)<\/p>\n

      {<\/p>\n

      form.results.value= eval(form.entry.value * 10 );<\/p>\n

      }<\/p>\n

      <\/script><\/p>\n

      <\/head><\/p>\n

      <body><\/p>\n

      <form><\/p>\n

      <input type=”text” name=”entry” value=””><\/p>\n

      <input type=”button” value=”calculate” onClick=”calculate(this.form);”<\/p>\n

      <br><\/p>\n

      <input type=”text” name=”results” onFocus=”this.blur();”> <br><\/p>\n

      <\/form><\/p>\n

      <\/body><\/p>\n

      <\/html><\/p>\n<\/div>\n

      This example code demonstrates the use of onClick() and onFocus(). The onFocus is applied on results textfield which will not allow to enter any value using the blur() method. The value entered on the entry field is calculated and shown in the result field. The output of this code is shown in Figure 19.14.<\/p>\n

       <\/p>\n

      Output:<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

       <\/p>\n

      \n

      Example 6:<\/strong><\/p>\n

       <\/p>\n

      <htMl><\/p>\n

      <head><\/p>\n

      <title>working with checkboxes<\/title><\/p>\n

      <script><\/p>\n

      function calculate(form, callingField)<\/p>\n

      {<\/p>\n

      if(callingField==”result”)<\/p>\n

      {<\/p>\n

      if(form.square.checked)<\/p>\n

      {<\/p>\n

      form.entry.value= Math.sqrt(form.result.value);<\/p>\n

      }<\/p>\n

      else<\/p>\n

      {<\/p>\n

      form.entry.value=form.result.value\/2;<\/p>\n

      }<\/p>\n

      }<\/p>\n

      else {<\/span><\/p>\n

      if(form.square.checked)<\/span><\/p>\n

      {<\/span><\/p>\n

      form.result.value = form.entry.value * form.entry.value;<\/span><\/p>\n

      }<\/span><\/p>\n

      E<\/span>lse {<\/span><\/p>\n

      form.result.value = form.entry.value*2;<\/span><\/p>\n

      }<\/span><\/p>\n

      }}<\/span><\/p>\n

      <\/script><\/span><\/p>\n

      <\/head><\/span><\/p>\n

      <body><\/span><\/p>\n

      <form><\/span><\/p>\n

      <center><br><\/span><\/p>\n

      <b> value: <\/b><\/span><\/p>\n

      <input type =”text” name = “entry” value = 0 onChange =”calculate(this.form,this.name);”> <br><br><\/span><\/p>\n

      <b>action<\/b>(default-double):<\/span><\/p>\n

      <input type =”checkbox” name = “square” onClick = “calculate(this.form,this.name);”>square <br><br><\/span><\/p>\n

      <b> result: <\/b><\/span><\/p>\n

      <input type =”text” name = “result” value = 0 onChange = “calculate(this.form,this.name);”> <\/center><\/span><\/p>\n

      <\/form><\/span><\/p>\n

      <\/body><\/span><\/p>\n

      <\/html><\/span><\/p>\n<\/div>\n

      \n

      This example code demonstrates the use of onClick and onChange event types. There are two textfields (entry and result) and a radiobutton in the form. If the calling field is result field, and if the checkbox is checked then it calculates the squareroot of the value entered in the result field and displays in the entry field else it calculates half of the result value and displays in the entry field. Similarly when the value entered in the entry field changes, based on the checkbox checked or not checked displays the square of the value entered in the entry field or multiplies the value by 2 and displays in the result field. The output of this code is shown in Figure 19.15.<\/p>\n<\/div>\n

      \u00a0 \u00a0 Output:<\/strong><\/p>\n

       <\/p>\n

      \"\"<\/p>\n

      \n

      \u00a0 \u00a0 \u00a0JavaScript Cookies<\/strong><\/p>\n

       <\/p>\n

      A cookie is used to store information on the user\u2019s computer even when the user switches off his\/her computer. It is a data that is sent from a web server to a web browser when the user visits a site on a server. It is just a .txt file stored in a user\u2019s computer. A cookie can be associated with one or more documents on the web server. More than one cookie can be associated with a document on the web server. Every cookie has a NAME-VALUE pair associated with it. Cookies have an expiration date associated with them.<\/p>\n

       <\/p>\n

      Cookies are a plain text data record of 5 variable-length fields:<\/p>\n

       <\/p>\n

      1.Expires <\/strong>\u2212 The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.<\/p>\n

      2.Domain <\/strong>-The domain name of your site.<\/p>\n

      3.\u00a0<\/span>Path <\/strong>\u2212 The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or page.<\/span><\/p>\n

      4.<\/span>Secure <\/strong>\u2212 If this field contains the word “secure”, then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists.<\/span><\/p>\n

      5.\u00a0<\/span>Name-Value <\/strong>– Cookies are set and retrieved in the form of key-value pairs.<\/span><\/p>\n<\/div>\n

      \n

      \u00a0 \u00a0 \u00a0Create Cookies<\/strong><\/p>\n

       <\/p>\n

      We can create a cookie by assigning a string value to the document.cookie object.document.cookie = “key1=value1;key2=value2;expires=date”;<\/p>\n

       <\/p>\n

      Store Cookies<\/strong><\/p>\n

       <\/p>\n

      Example<\/strong><\/p>\n

       <\/p>\n

      <html><\/p>\n

      <head><\/p>\n

      <script type=”text\/javascript”><\/p>\n

      function WriteCookie()<\/p>\n

      {<\/p>\n

      if( document.myform.customer.value == “” )<\/p>\n

      {<\/p>\n

      alert(“Enter some value!”);<\/p>\n

      return;<\/p>\n

      }<\/p>\n

      cookievalue= escape(document.myform.customer.value) + “;”; document.cookie=”name=” + cookievalue;<\/p>\n

      document.write (“Setting Cookies : ” + “name=” + cookievalue );<\/p>\n

      }<\/p>\n

      <\/script><\/p>\n

      <\/head><\/p>\n

      <body><\/p>\n

      <form name=”myform” action=””><\/p>\n

      Enter name: <input type=”text” name=”customer”\/><\/p>\n

      <input type=”button” value=”Set Cookie” onclick=”WriteCookie();”\/> <\/form><\/p>\n

      <\/body><\/p>\n

      <\/html><\/p>\n

       <\/p>\n

      The example shows how a cookie can be created and stored. It retrieves the value from the textfield and stores it as a cookie.<\/p>\n<\/div>\n

      <html><\/p>\n

      <head><\/p>\n

      <script type=”text\/javascript”><\/p>\n

      function ReadCookie()<\/p>\n

      {<\/p>\n

      var allcookies = document.cookie;<\/p>\n

      document.write (“All Cookies : ” + allcookies );<\/p>\n

        \n
      • \/\/ Get all the cookies pairs in an array cookiearray = allcookies.split(‘;’);<\/li>\n
      • \/\/ Now take key value pair out of this array for(var i=0; i<cookiearray.length; i++)<\/li>\n<\/ul>\n

        {<\/p>\n

        name = cookiearray[i].split(‘=’)[0]; value = cookiearray[i].split(‘=’)[1];<\/p>\n

        document.write (“Key is : ” + name + ” and Value is : ” + value);<\/p>\n

        }<\/p>\n

        }<\/p>\n

         <\/p>\n

        The function ReadCookie() retrieve the stored cookie from document.cookie and store in a variable.Then we can use a for loop to read each cookie as a key-value pair.<\/p>\n

         <\/p>\n

        Summary<\/strong><\/p>\n

         <\/p>\n

        This module explains about the JavaScript Event handling mechanisms. This module also explores about working with HTML form validation using HTML DOM and Event handling and finally discusses about JavaScript Cookies.<\/p>\n

         <\/p>\n

        Web Links<\/strong><\/p>\n

          \n
        • http:\/\/www.w3schools.com\/<\/em><\/li>\n
        • www.doc.ic.ac.uk\/~rcheung\/teaching\/2720\/ppt\/lecture04c.ppt<\/em><\/li>\n
        • Paul J. Deitel, Harvey M. Deitel, Abbey Deitel, “Internet and World Wide Web How To Program”, 5th Edition, Pearson Education, 2012.<\/em><\/li>\n<\/ul>\n

           <\/p>\n

           <\/p>\n","protected":false},"author":4,"menu_order":17,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["dr-m-vijayalakshmi"],"pb_section_license":""},"chapter-type":[],"contributor":[58],"license":[],"class_list":["post-155","chapter","type-chapter","status-publish","hentry","contributor-dr-m-vijayalakshmi"],"part":3,"_links":{"self":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/users\/4"}],"version-history":[{"count":2,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/155\/revisions"}],"predecessor-version":[{"id":546,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/155\/revisions\/546"}],"part":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/155\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/media?parent=155"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapter-type?post=155"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/contributor?post=155"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/license?post=155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}