{"id":978,"date":"2021-12-11T06:55:57","date_gmt":"2021-12-11T06:55:57","guid":{"rendered":"https:\/\/swatilathia.wordpress.com\/?page_id=978"},"modified":"2024-09-26T04:41:40","modified_gmt":"2024-09-26T04:41:40","slug":"javascript-tutorial-2-2","status":"publish","type":"page","link":"https:\/\/swatilathia.com\/?page_id=978","title":{"rendered":"JavaScript Tutorial 2"},"content":{"rendered":"\n

\n

Table of Contents<\/p>\nToggle<\/span>

JavaScript Loop Control Statements<\/a>

JavaScript Dialog Boxes<\/a>

JavaScript Arrays<\/a><\/li><\/ul><\/nav><\/div>\n

<\/span>JavaScript Loop Control<\/strong> Statements<\/strong><\/span><\/h2>\n\n\n\n
\n
JavaScript provides full control to handle loops and switch statements. <\/li>\n\n\n\n
There may be a situation when you need to come out of a loop without reaching at the end. <\/li>\n\n\n\n
There may also be a situation when you want to skip a part of your code block and start the next iteration of the loop.<\/li>\n\n\n\n
To handle these kinds of situations, JavaScript provides break and continue statements. <\/li>\n\n\n\n
These statements are used to immediately come out of any loop or to start the next iteration of any loop respectively.<\/li>\n<\/ul>\n\n\n\n
<\/span>The break Statement<\/strong><\/span><\/h3>\n\n\n\n
\n
The break statement is used to exit a loop early, breaking out of the enclosing curly braces.<\/li>\n\n\n\n
Look at the following example how the loop breaks out early once x reaches 5 and reaches to document.write (..) statement just below to the closing curly brace.<\/li>\n<\/ul>\n\n\n\n
var x=1;\nwhile(x<10) \n{\n \tif (x==5) \n\t{\n \t\tbreak; \/\/ breaks out of loop completely\n \t}\n document.write(x + \"<br>\");\n x=x+1;\n } <\/code><\/pre>\n\n\n\n<\/span>The continue Statement<\/strong> <\/span><\/h3>\n\n\n\n\nThe continue statement tells the interpreter to immediately skip the remaining code block & start the next iteration of the loop. <\/li>\n\n\n\n When a continue statement is encountered, the program flow moves to the loop check expression immediately and if the condition remains true, then it starts the next iteration, otherwise the control comes out of the loop.<\/li>\n\n\n\n The following example illustrates how the continue statement is used to skip printing when the index held in variable x reaches 5.<\/li>\n<\/ul>\n\n\n\nvar x = 1;\nwhile (x<10) \n{\n x = x + 1;\n if (x==5) {\n continue; \/\/ skip rest of the loop body\n }\n document.write(x+\"<br>\");\n}<\/code><\/pre>\n\n\n\n<\/span>JavaScript User Define Functions<\/strong><\/span><\/h2>\n\n\n\n\nA function is a group of reusable code which can be called anywhere in your program.<\/li>\n\n\n\n This eliminates the need of writing the same code again and again.<\/li>\n\n\n\n Functions allow a programmer to divide a big program into a number of small and manageable functions.<\/li>\n<\/ul>\n\n\n\nFunction Definition<\/strong><\/p>\n\n\n\n \nTo define a function in JavaScript, use function keyword which is followed by a unique function name, a list of parameters (might be empty), and a statement block surrounded by curly braces.<\/li>\n<\/ul>\n\n\n\nSyntax<\/strong><\/p>\n\n\n\n function functionname(parameter-list) \n{\n statements\n}<\/code><\/pre>\n\n\n\nExample<\/strong> : It defines a function called demo that takes no parameters.<\/p>\n\n\n\n function demo()\n{\n\t\t\tDocument.write(\u201cHello, I am User defined function\u201d);\n}<\/code><\/pre>\n\n\n\nHow to call a function?<\/strong><\/p>\n\n\n\n \nTo call a function wherever & whenever in the script, you simply need to write the name of that function as shown in the following code.<\/li>\n<\/ul>\n\n\n\n<html>\n<head> \n <script type = \"text\/javascript\">\n function demo() \n {\n document.write (\"Hello, I am user defined function..\");\n }\n <\/script>\n<\/head>\n<body>\n <form>\n <input type = \"button\" value=\u201dClick Here\u201d onclick = \"demo()\">\n <\/form> \n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nIn above example, I have used onclick event, means function is invoked when a user clicks on a button.<\/li>\n<\/ul>\n\n\n\nFunction Parameters<\/strong><\/p>\n\n\n\n \nUDF gives a facility to pass different parameters while calling a function. <\/li>\n\n\n\n These passed parameters can be captured inside the function and any manipulation can be done over those parameters. <\/li>\n\n\n\n A function can take multiple parameters separated by comma.<\/li>\n<\/ul>\n\n\n\n<html> \n\t<head>\n\t<script type=\"text\/javascript\"> \n function demo(name,city) \n {\n\t document.write(\"Hi I am \",name,\" & I am from \",city);\n } \n\t<\/script> \n\t<\/head>\n <body> \n\t<form>\n\t<input type=button value=\"Click here\" onclick='demo(\"Swati Lathia\",\"Jamnagar\");'\n\t<\/form>\n\t<\/body> \n<\/html><\/code><\/pre>\n\n\n\nThe return Statement<\/strong><\/p>\n\n\n\n \nIn JavaScript, the return<\/code> statement is used within a function to specify the value that the function will output when it is called. <\/li>\n\n\n\n When the return<\/code> statement is executed, the function stops executing and returns the specified value to the point where the function was called.<\/li>\n<\/ul>\n\n\n\nSyntax<\/strong><\/p>\n\n\n\n function functionName(parameters) {\n \/\/ Code to execute\n return value; \/\/ Optional return\n}<\/code><\/pre>\n\n\n\n\nWhen the return<\/code> statement is encountered, the function terminates immediately. Any code after the return<\/code> statement will not be executed.<\/li>\n\n\n\n You can return any type of value: a number, string, object, array, or even another function.<\/li>\n\n\n\n If no return<\/code> statement is specified, the function returns undefined<\/code> by default.<\/li>\n<\/ul>\n\n\n\nfunction add(a, b) {\n return a + b; \/\/ Returns the sum of a and b\n}\n\nvar total = add(50, 30); \/\/ total is now 80\ndocument.write(total); \/\/ Outputs: 80<\/code><\/pre>\n\n\n\n<\/span>JavaScript Dialog Boxes<\/strong><\/span><\/h2>\n\n\n\n\nJavaScript has three important types of dialog boxes. <\/li>\n\n\n\n These dialog boxes can be used to raise and alert, to get confirmation on any input or to have a kind of input from the users.<\/li>\n<\/ul>\n\n\n\n<\/span>Alert Dialog Box<\/strong><\/span><\/h3>\n\n\n\n\nAn alert dialog box is mostly used to give a warning message to the users. <\/li>\n\n\n\n For example, if an input field requires to enter number but the user provides any input other than number, then as a part of validation, you can use an alert box to give a warning message that \u201cuser has to enter numbers only\u201d.<\/li>\n\n\n\n Alert box gives only one button \u201cOK\u201d to select and proceed.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n <head> \n <script type = \"text\/javascript\">\n function demo() \n {\n alert (\"This is an alert!\");\n }\n <\/script> \n <\/head>\n <body>\n <form>\n <input type = \"button\" value = \"Click Me\" onclick = \"demo();\" \/>\n <\/form> \n <\/body><\/code><\/pre>\n\n\n\n<\/span>Confirmation Dialog Box<\/strong><\/span><\/h3>\n\n\n\n\nA confirmation dialog box is mostly used to take user\u2019s permission (ok or cancel) on any option. <\/li>\n\n\n\n It displays a dialog box with two buttons: OK and Cancel.<\/li>\n\n\n\n If the user clicks on the OK button, the window method confirm() will return true. If the user clicks on the Cancel button, then confirm() returns false.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n <head> \n <script type = \"text\/javascript\">\n function getConfirmation() \n {\n var a = confirm(\"Do you want to continue ?\");\n if( a == true ) \n {\n document.write (\"User wants to continue!\");\n return true;\n } \n else \n {\n document.write (\"User does not want to continue!\");\n return false;\n }\n }\n <\/script> \n<\/head>\n<body>\n <form>\n <input type = \"button\" value = \"Click Me\" onclick = \"getConfirmation();\">\n <\/form> \n<\/body><\/code><\/pre>\n\n\n\n<\/span>Prompt Dialog Box<\/strong> <\/span><\/h3>\n\n\n\n\nThe prompt dialog box is used to get the value from user.<\/li>\n\n\n\n It gives a textbox in which you can enter your value.<\/li>\n\n\n\n The user needs to fill in the field and then click OK.<\/li>\n\n\n\n This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you want to display in the text box and (ii) a default string to display in the text box.<\/li>\n\n\n\n This dialog box has two buttons: OK and Cancel. <\/li>\n\n\n\n If the user clicks the OK button, the window method prompt() will return the entered value from the text box. <\/li>\n\n\n\n If the user clicks the Cancel button, the window method prompt() returns null.<\/li>\n<\/ul>\n\n\n\n<head> \n \t<script type = \"text\/javascript\">\n function getValue() \n {\n var name = prompt(\"Enter your name : \", \"Hello\");\n document.write(\"You have entered : \" + name);\n }\n <\/script> \n<\/head>\n<body>\n <form>\n <input type = \"button\" value = \"Click Me\" onclick = \"getValue();\">\n <\/form> \n<\/body><\/code><\/pre>\n\n\n\n\nIn above example, you are asked to enter your name, if your provide your name, it will give an out put like :\u201d You have entered Swati Lathia\u201d. <\/li>\n\n\n\n If you have not provided any value, it will give an output like: \u201d You have entered Hello\u201d. Here \u201cHello\u201d is the default value which given in prompt ().<\/li>\n<\/ul>\n\n\n\n<\/span>JavaScript Arrays<\/strong><\/span><\/h2>\n\n\n\n\nThe Array lets you store multiple values in a single variable. It stores a collection of elements of the same type.<\/li>\n<\/ul>\n\n\n\nSyntax<\/strong><\/p>\n\n\n\n var subject = new Array( \"HTML\", \"Networking\", \"Language C\", \" Computer Fundamentals\");<\/code><\/pre>\n\n\n\n\nThe Array parameter is a list of strings or integers. <\/li>\n\n\n\n When you specify a single numeric parameter with the Array constructor, you specify the initial length of the array. <\/li>\n\n\n\n You can create array by simply assigning values as follows \u2013 <\/li>\n\n\n\n var subject = [ \u201cHTML\u201d, \u201cNetworking\u201d, \u201cLanguage C\u201d, \u201d Computer Fundamentals\u201d];<\/li>\n\n\n\n You can use ordinal numbers to access and to set values inside an array as follows.<\/li>\n\n\n\n subject[0] is the first element<\/li>\n\n\n\n subject[1] is the second element<\/li>\n\n\n\n subject[2] is the third element<\/li>\n\n\n\n subject[3] is the fourth element<\/li>\n<\/ul>\n\n\n\n <body> \n <script type = \"text\/javascript\">\n var a= new Array(10,20,30,40);\n\t\talert(a[0]);\n\t\talert(a[1]);\n\t\talert(a[2]);\n\t\talert(a[3]);\n <\/script> \n <\/body><\/code><\/pre>\n<\/body>","protected":false},"excerpt":{"rendered":"JavaScript Loop Control Statements The break Statement The continue Statement JavaScript User Define Functions Function Definition Syntax Example : It defines a function called demo that takes no parameters. How to call a function? Function Parameters The return Statement Syntax JavaScript Dialog Boxes Alert Dialog Box Example Confirmation Dialog Box Example Prompt Dialog Box JavaScript […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"zakra_page_container_layout":"customizer","zakra_page_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":"","zakra_menu_item_hover_color":"","zakra_menu_item_active_color":"","zakra_menu_active_style":"","zakra_page_header":true,"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-978","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=978"}],"version-history":[{"count":5,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/978\/revisions"}],"predecessor-version":[{"id":4772,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/978\/revisions\/4772"}],"wp:attachment":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}