JavaScript-Equality-Table/index.html at 67bb7eb322e65ad305f5b36d45cf0100118882e1 · dorey/JavaScript-Equality-Table · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript Comparison Table</title>

	<!-- Modern CSS Reset and Styles -->
	<link rel="stylesheet" href="styles/simple.css" type="text/css" media="all">

	<!-- jQuery and jQuery UI from modern CDN -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

	<!-- Custom Script for comparison table -->
	<script type="text/javascript" src="js/comparison_table.js"></script>
	<script src="values.js" type="text/javascript"></script>

	<!--    Originally from here:
	    http://blog.codekills.net/archives/89-Equality-in-JavaScript.html

	    2013-Nov-11. Correcting issue where "[]===[]" was incorrectly marked as true.

		Converted from this gist:
		https://gist.github.com/761080
	-->
</head>

<body>

	<nav>
		<div id="tabs" aria-label="JavaScript Comparison Tabs">
			<ul>
				<li><a href="#two-equals" aria-label="Tab for double equals">==</a></li>
				<li><a href="#three-equals" aria-label="Tab for triple equals">===</a></li>
				<li><a href="#if-statement" aria-label="Tab for IF statement">If()</a></li>
			</ul>

			<!-- == Comparison Section -->
			<section id="two-equals">
				<article>
					<h2>== <small>(negated: !=)</small></h2>
					<p class="description">
						When using two equals signs for JavaScript equality testing, some funky conversions take place.
					</p>
				</article>
			</section>

			<!-- === Comparison Section -->
			<section id="three-equals">
				<article>
					<h2>=== <small>(negated: !==)</small></h2>
					<p class="description">
						When using three equals signs for JavaScript equality testing, everything is <strong>as
							is</strong>.
						Nothing gets converted before being evaluated.
					</p>
				</article>
			</section>

			<!-- IF Statement Section -->
			<section id="if-statement">
				<article>
					<h2>A standard IF statement</h2>
					<p>Note: This row does not match up with any of the rows in the other table.</p>
					<p>If (<i>value</i>) {/*- green -*/} else { /*- white -*/ }</p>
				</article>
			</section>

			<div style="padding: 2px 20px;">
				<h4>Moral of the story:</h4>
				<p>Always use 3 equals unless you have a good reason to use 2.</p>
			</div>
		</div>
	</nav>

	<!-- Custom Script for Building Tables -->
	<script type="text/javascript">
		$(document).ready(function () {
			buildComparisonTable(values, "==").appendTo("#two-equals");
			buildComparisonTable(values, "===").appendTo("#three-equals");
			buildComparisonTableForIf(values).appendTo("#if-statement");

			// Initialize jQuery UI Tabs
			$("#tabs").tabs();

			// Adding an external link to unified table
			$("<li><a href='unified/'>New link: view everything in one table</a></li>").appendTo("#tabs ul");
		});
	</script>
</body>

</html>