Skip to content

Instantly share code, notes, and snippets.

@Python3-8

Python3-8/bitwise-ops-practice.htm

Last active November 26, 2020 08:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Python3-8/2b8fd155a65b53de2a9430b28db56477 to your computer and use it in GitHub Desktop.
Save Python3-8/2b8fd155a65b53de2a9430b28db56477 to your computer and use it in GitHub Desktop.
Download ZIP
This is the Bitwise Operators Practice HTML document that I created. It is featured in my YouTube video Bitwise Operators in Python. You can use this doc to practice bitwise operators.
Raw
bitwise-ops-practice.htm
<!DOCTYPE html>
<html>
<head>
<title>Bitwise Operators in Python</title>
<style>
table,
td,
th,
input {
color: yellow;
padding: 10px;
border: 0.5px dotted yellow;
border-radius: 10px;
background-color: rgb(41, 41, 41);
text-align: center;
}
h1,
h2,
p {
color: yellow;
}
input {
border: 1px solid darkgray;
}
body {
background-color: rgb(41, 41, 41);
}
code {
color: black;
background-color: lightgray;
border-radius: 4px;
}
</style>
</head>
<body>
<center>
<h1>Bitwise Operators in Python</h1>
</center>
<hr>
<center>
<h2>Binary Numbers</h2>
</center>
<p>
Bitwise operators are just like the regular operators (+, -, *, /, and, or, etc) that you
use every day. <b>But</b> there's one difference. Bitwise operators are used for binary
numbers while regular operators are used for decimal numbers. If you don't know what binary
numbers are, here's something that'll help you:
</p>
<center>
<p>Let's convert the number 22 to binary.</p>
<p>As a decimal number, 22 is <input>:</p>
<table>
<tr>
<th>10<sup>4</sup> or 10,000</th>
<th>10<sup>3</sup> or 1,000</th>
<th>10<sup>2</sup> or 100</th>
<th>10<sup>1</sup> or 10</th>
<th>10<sup>0</sup> or 1</th>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
</table>
<br>
<p>Binary numbers only contain 0s and 1s. As a binary number, 22 is <input>:</p>
<table>
<tr>
<th>2<sup>4</sup> or 16</th>
<th>2<sup>3</sup> or 8</th>
<th>2<sup>2</sup> or 4</th>
<th>2<sup>1</sup> or 2</th>
<th>2<sup>0</sup> or 1</th>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
</table>
</center>
<hr>
<center>
<h2>The Bitwise <code>and</code> Operator</h2>
</center>
<p>Here's how the bitwise <code>and</code> operator works:</p>
<center>
<p>To test this out, we're gonna <code>and</code> 64 and 32.</p>
<p>64 in binary is 1000000.</p>
<p>32 in binary is 100000.</p>
<p>Here's what the bitwise <code>and</code> operator or the <code>&</code> operator does:</p>
<textarea rows="4">
# main.py
a = 64
b = 32
print(a & b)
</textarea>
<br>
<textarea rows="1">$ python3 main.py</textarea>
<br><br>
<img src="https://www.wpclipart.com/dl.php?img=/signs_symbol/arrows/arrows_color/arrow_outline_yellow_down_T.png"
height="150" width="100">
<br><br>
<table>
<tr>
<th>1</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>0</th>
<th>1</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
</table>
<br><br>
<img src="https://www.wpclipart.com/dl.php?img=/signs_symbol/arrows/arrows_color/arrow_outline_yellow_down_T.png"
height="150" width="100">
<br><br>
<textarea rows="2">
$ python3 main.py
TYPE ANSWER HERE
</textarea>
<p>This will output <input> because the binary number <input> converted to decimal is <input>.</p>
</center>
<hr>
<center>
<h2>The Bitwise <code>or</code> Operator</h2>
</center>
<p>Here's how the bitwise <code>or</code> operator works:</p>
<center>
<p>To test this out, we're gonna <code>or</code> 64 and 32.</p>
<p>64 in binary is 1000000.</p>
<p>32 in binary is 100000.</p>
<p>Here's what the bitwise <code>or</code> operator or the <code>|</code> operator does:</p>
<textarea rows="4">
# main.py
a = 64
b = 32
print(a | b)
</textarea>
<br>
<textarea rows="1">$ python3 main.py</textarea>
<br><br>
<img src="https://www.wpclipart.com/dl.php?img=/signs_symbol/arrows/arrows_color/arrow_outline_yellow_down_T.png"
height="150" width="100">
<br><br>
<table>
<tr>
<th>1</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>0</th>
<th>1</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
</table>
<br><br>
<img src="https://www.wpclipart.com/dl.php?img=/signs_symbol/arrows/arrows_color/arrow_outline_yellow_down_T.png"
height="150" width="100">
<br><br>
<textarea rows="2">
$ python3 main.py
TYPE ANSWER HERE
</textarea>
<p>This will output <input> because the binary number <input> converted to decimal is <input>.</p>
</center>
<hr>
<center>
<h2>The Bitwise Right Shift Operator</h2>
</center>
<p>Here's how the bitwise right shift operator works:</p>
<center>
<p>To test this out, we're gonna shift 64 to the right two times.</p>
<p>64 in binary is 1000000.</p>
<p>Here's what the bitwise right shift operator or the <code>>></code> operator does:</p>
<textarea rows="3">
# main.py
a = 64
print(a >> 2)
</textarea>
<br>
<textarea rows="1">$ python3 main.py</textarea>
<br><br>
<img src="https://www.wpclipart.com/dl.php?img=/signs_symbol/arrows/arrows_color/arrow_outline_yellow_down_T.png"
height="150" width="100">
<br><br>
<table>
<tr>
<th>1</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
</table>
<br><br>
<img src="https://www.wpclipart.com/dl.php?img=/signs_symbol/arrows/arrows_color/arrow_outline_yellow_down_T.png"
height="150" width="100">
<br><br>
<textarea rows="2">
$ python3 main.py
TYPE ANSWER HERE
</textarea>
<p>This will output <input> because the binary number <input> converted to decimal is <input>.</p>
</center>
<hr>
<center>
<h2>The Bitwise Left Shift Operator</h2>
</center>
<p>Here's how the bitwise left shift operator works:</p>
<center>
<p>To test this out, we're gonna shift 64 to the left two times.</p>
<p>64 in binary is 1000000.</p>
<p>Here's what the bitwise left shift operator or the <code>&#60;&#60;</code> operator does:</p>
<textarea rows="3">
# main.py
a = 64
print(a &#60;&#60; 2)
</textarea>
<br>
<textarea rows="1">$ python3 main.py</textarea>
<br><br>
<img src="https://www.wpclipart.com/dl.php?img=/signs_symbol/arrows/arrows_color/arrow_outline_yellow_down_T.png"
height="150" width="100">
<br><br>
<table>
<tr>
<th>0</th>
<th>0</th>
<th>1</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
</table>
<br><br>
<img src="https://www.wpclipart.com/dl.php?img=/signs_symbol/arrows/arrows_color/arrow_outline_yellow_down_T.png"
height="150" width="100">
<br><br>
<textarea rows="2">
$ python3 main.py
TYPE ANSWER HERE
</textarea>
<p>This will output <input> because the binary number <input> converted to decimal is <input>.</p>
</center>
<hr>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment