{"id":305,"date":"2011-12-07T14:01:29","date_gmt":"2011-12-07T14:01:29","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-18T05:41:18","modified_gmt":"2017-11-18T05:41:18","slug":"lesson-6-comparison-logical-operators","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-6-comparison-logical-operators\/","title":{"rendered":"JavaScript Lesson 6: Comparison and Logical Operators"},"content":{"rendered":"<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-5-arithmetic-operations-javascript\/\">&lt;Lesson 5&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-7conditional-operators\/\">&lt;Lesson 7&gt;<\/a><\/h4>\n<h3><strong>6.1 Comparison Operators<\/strong><\/h3>\n<p>In\u00a0lesson 5, we have learned basic arithmetic operations in JavaScript,\u00a0in\u00a0this\u00a0lesson, we\u00a0will introduce the comparison operators. Using comparison operators, we can\u00a0write decision-making procedures.\u00a0If a certain condition is met, JavaScript will execute an action, otherwise, there is no action or it will take alternative action. The following Table demonstrates the comparison operators.<\/p>\n<h4><strong>Table 6.1: Comparison Operators<\/strong><\/h4>\n<table style=\"table-layout: fixed; width: 70%; font-size: 100%; overflow-x: auto;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<th width=\"210\"><strong>Comparison Operators<\/strong><\/th>\n<th align=\"center\"><strong>Meaning<\/strong><\/th>\n<\/tr>\n<tr>\n<td align=\"center\" width=\"210\">x==y<\/td>\n<td align=\"left\">x is equal to y<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" width=\"210\">x!=y<\/td>\n<td align=\"left\">x is not equal to y<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" width=\"210\">x&gt;y<\/td>\n<td align=\"left\">x is more than y<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" width=\"210\">x&lt;y<\/td>\n<td align=\"left\">x is less than y<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" width=\"210\">x&gt;=y<\/td>\n<td align=\"left\">x is more than or equal to y<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" width=\"210\">x&lt;=y<\/td>\n<td>x is less than or equal to y<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-3033628290023372\"\n     data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4><strong>6.1.1 using if keyword<\/strong><\/h4>\n<p>The syntax\u00a0 of using the\u00a0<strong>if<\/strong> keyword \u00a0is,<\/p>\n<pre style=\"font-size: 110%;\"><strong>if (Condition Expression){ Statements }<\/strong><\/pre>\n<p>If the condition expression is true, then JavaScript will execute the statements, otherwise, there is no action.\u00a0In the following example, if the mark entered is more than 80, then the browser will display Grade=80, otherwise it will not show anything.<\/p>\n<pre style=\"font-size: 110%;\">&lt;script language=\"javascript\"&gt;\r\nmark=window.prompt(\"Enter your mark:\",\"0\")\r\nif(mark&gt;=80)\u00a0document.write(\"Grade=\"+\"A\")\r\n&lt;\/script&gt;\r\n<\/pre>\n<h3><strong>Example 6.1: Using Comparison Operators<\/strong><\/h3>\n<pre style=\"font-size: 110%;\">&lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\"&gt;\r\n&lt;HTML&gt;\r\n\r\n&lt;HEAD&gt;\r\n&lt;TITLE&gt;Using\u00a0Relational\u00a0Operators &lt;\/TITLE&gt;\r\n\r\n&lt;SCRIPT LANGUAGE = \"JavaScript\"&gt;\r\nvar firstNumber, \/\/declare first variable\r\nsecondNumber; \/\/declare second variable\r\n\r\nfirstNumber = window.prompt( \"Enter first Number:\", \"0\" );\r\n\r\nsecondNumber = window.prompt( \"Enter second integer:\", \"0\" );\r\n\r\ndocument.writeln( \"&lt;H1&gt;Comparison Output&lt;\/H1&gt;\" );\r\ndocument.writeln( \"&lt;TABLE BORDER = '1' WIDTH = '100%'&gt;\" ); \/\/ Creates table\r\n\r\nif ( firstNumber == secondNumber )\r\ndocument.writeln( \"&lt;TR&gt;&lt;TD&gt;\" + firstNumber + \" = \" + secondNumber +\r\n\"&lt;\/TD&gt;&lt;\/TR&gt;\" ); \/\/ Creates rows and columns\r\n\r\nif ( firstNumber != secondNumber )\r\ndocument.writeln( \"&lt;TR&gt;&lt;TD&gt;\" + firstNumber + \" Not equal to \" + secondNumber +\r\n\"&lt;\/TD&gt;&lt;\/TR&gt;\" );\r\n\r\nif ( firstNumber &lt; secondNumber )\r\ndocument.writeln( \"&lt;TR&gt;&lt;TD&gt;\" + firstNumber + \" &lt; \" + secondNumber +\r\n\"&lt;\/TD&gt;&lt;\/TR&gt;\" );\r\n\r\nif ( firstNumber &gt; secondNumber )\r\ndocument.writeln( \"&lt;TR&gt;&lt;TD&gt;\" + firstNumber + \" &gt; \" + secondNumber +\r\n\"&lt;\/TD&gt;&lt;\/TR&gt;\" );\r\n\r\n\/\/ Display results\r\ndocument.writeln( \"&lt;\/TABLE&gt;\" );\r\n&lt;\/SCRIPT&gt;\r\n\r\n&lt;\/HEAD&gt;\r\n&lt;BODY&gt;\r\n&lt;P&gt;Click Refresh (or Reload) to run the script again&lt;\/P&gt;\r\n&lt;\/BODY&gt;\r\n&lt;\/HTML&gt;\r\n<\/pre>\n<p>Click\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example6.1.htm\">Example 6.1<\/a> to view the output<\/p>\n<h4><strong>6.1.2 Using if and else keywords<\/strong><\/h4>\n<p>The syntax of using\u00a0<strong>if<\/strong> and\u00a0<strong>else <\/strong>keywords is<\/p>\n<pre style=\"font-size: 110%; width: 80%;\">if (Condition Expression){ Statement 1 }\r\nelse {Statement 2}\r\n<\/pre>\n<p>If the expression is true, then JavaScript will execute the\u00a0statement1, otherwise there\u00a0it will execute statement 2 and ignores statement1. In the following example, it height is more or equal to 180, the browser will show the message &#8220;Congratulation! You are selected&#8221;. Otherwise, it will show the message &#8220;Sorry, you are not selected&#8221;.<\/p>\n<pre style=\"font-size: 110%;\">&lt;script language=\"javascript\"&gt;\r\nmark=window.prompt(\"Enter your height in cm:\",\"0\")\r\nif(mark&gt;=180)document.write(\"Congratulation! You are selected\")\r\nelse document.write(\"Sorry, you are not selected\")&lt;\/script&gt;\r\n<\/pre>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-3033628290023372\"\n     data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4><strong>6.1.2 Using if, else and else if keywords<\/strong><\/h4>\n<p>if there are multiple expressions and conditions, we then need to include the else if keyword.<\/p>\n<pre style=\"font-size: 110%;\">if (Condition Expression1 ){ Statement 1 }\r\n else if(Condition Expression 2) {Statement 2}\r\n else if(Condiiton Expression3) {statement 3}\r\n else\u00a0 {statement n}\r\n<\/pre>\n<p>You can see the application in\u00a0<strong>Example 6.2<\/strong><\/p>\n<h4><strong>Example 6.2<\/strong><\/h4>\n<pre style=\"font-size: 110%;\">&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=gb2312\"&gt;\r\n&lt;title&gt;Examination Grade&lt;\/title&gt;\r\n&lt;H2&gt;&lt;font face=\"Arial\"&gt;The grade will be shown below when you enter the mark&lt;\/font&gt;&lt;\/H2&gt;\r\n\r\n&lt;table border=1 align=center bgcolor=yellow &gt;&lt;tr&gt;&lt;td&gt;&lt;b&gt;&lt;script language=javascript&gt;\r\nvar mark;\r\n\r\nmark=window.prompt(\"Enter your mark:\",\"0\")\r\nif (mark&gt;=80)\r\ndocument.writeln(\"Grade=\"+\"A\")\r\nelseif (mark&gt;=60)\r\ndocument.writeln(\"Grade=\"+\"B\")\r\nelse if (mark&gt;=50)\r\ndocument.writeln(\"Grade=\"+\"C\")\r\nelse if (mark&gt;=40)\r\ndocument.writeln(\"Grade=\"+\"D\")\r\nelse if (mark&gt;=30)\r\ndocument.writeln(\"Grade=\"+\"E\")\r\nelse\r\ndocument.writeln(\"F\");\r\n\r\n&lt;\/script&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Click\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/JScript_Example6.2.htm\">Example 6.2 <\/a>to view the actual output<\/p>\n<h3><strong>6.2 Logical Operators<\/strong><\/h3>\n<p>There are three logical operators here, as shown below:<\/p>\n<pre style=\"font-size: 110%; width: 50%;\">&amp;&amp;\u00a0 represents AND\r\n\r\n| |\u00a0 represents OR\r\n\r\n!\u00a0 represent NOT\r\n<\/pre>\n<p>The logical operators are used together with the comparison operators.<\/p>\n<p>The following example shows the usage of &amp;&amp; (The logical AND)<\/p>\n<pre style=\"font-size: 110%;\">if ( mark&gt;=60 &amp;&amp; mark&lt;80){grade=\"B\"};\r\n\r\nThe following example shows the usage of || (the logical OR)\r\n\r\nif (age&gt;=12 ||\u00a0 height&gt;140){entryfee=\"$10\"}\r\n\r\nThe following example shows the usage of ! (The logical NOT)\r\n\r\nIf (! (stockIndex&lt;1000)) document.write (\"The market is good\")\r\n<\/pre>\n<p>The application of the logical operators can be shown in\u00a0<strong>Example 6.3 <\/strong>below:<\/p>\n<h4><strong>Example 6.3<\/strong><\/h4>\n<pre style=\"font-size: 110%;\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1252\"&gt;\r\n&lt;title&gt;New Page 1&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script language=\"javascript\"&gt;\r\nvar age, height, fee\r\n\r\nage=window.prompt(\"Enter your age:\",\"0\")\r\nheight=window.prompt(\"Enter your height:\",\"0\")\r\n\r\nif (age&gt;=12 || height&gt;=140){fee=\"$10\"};\r\nelse {fee=\"$8\"};\r\ndocument.write(\"The entrance fee is: \"+fee);\r\n\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n<\/pre>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/JScript_Example6.3.htm\">Example 6.3<\/a> to test the output.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"autorelaxed\"\n     data-ad-client=\"ca-pub-3033628290023372\"\n     data-ad-slot=\"2916349441\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-5-arithmetic-operations-javascript\/\">&lt;Lesson 5&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-7conditional-operators\/\">&lt;Lesson 7&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 5&gt; [Contents] &lt;Lesson 7&gt; 6.1 Comparison Operators In\u00a0lesson 5, we have learned basic arithmetic operations in JavaScript,\u00a0in\u00a0this\u00a0lesson, we\u00a0will introduce the comparison operators. Using comparison operators, we can\u00a0write decision-making procedures.\u00a0If a certain condition is met, JavaScript will execute an action, otherwise, there is no action or it will take alternative action. The following Table demonstrates &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-6-comparison-logical-operators\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 6: Comparison and Logical Operators&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-305","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 6: Comparison and Logical Operators - javascript-tutor.net<\/title>\n<meta name=\"description\" content=\"This javascript lessons shows how to use comparison and logical operators\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 6: Comparison and Logical Operators - javascript-tutor.net\" \/>\n<meta property=\"og:description\" content=\"This javascript lessons shows how to use comparison and logical operators\" \/>\n<meta property=\"og:url\" content=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-18T05:41:18+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-6-comparison-logical-operators\/\",\"url\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html\",\"name\":\"JavaScript Lesson 6: Comparison and Logical Operators - javascript-tutor.net\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-07T14:01:29+00:00\",\"dateModified\":\"2017-11-18T05:41:18+00:00\",\"description\":\"This javascript lessons shows how to use comparison and logical operators\",\"breadcrumb\":{\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 6: Comparison and Logical Operators\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 6: Comparison and Logical Operators - javascript-tutor.net","description":"This javascript lessons shows how to use comparison and logical operators","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 6: Comparison and Logical Operators - javascript-tutor.net","og_description":"This javascript lessons shows how to use comparison and logical operators","og_url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-18T05:41:18+00:00","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-6-comparison-logical-operators\/","url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html","name":"JavaScript Lesson 6: Comparison and Logical Operators - javascript-tutor.net","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-07T14:01:29+00:00","dateModified":"2017-11-18T05:41:18+00:00","description":"This javascript lessons shows how to use comparison and logical operators","breadcrumb":{"@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson6.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 6: Comparison and Logical Operators"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":28,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/305\/revisions"}],"predecessor-version":[{"id":2267,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/305\/revisions\/2267"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}