176 lines
6.8 KiB
HTML
176 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Midterm Study</title>
|
|
<meta charset="utf-8" lang="en-us">
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Midterm Study</h1>
|
|
<h2>Introduction to Web Pages</h2>
|
|
<ol>
|
|
<li>A web page is a container for the following three technologies. Describe the purpose of each for a web page:
|
|
</li>
|
|
<ul>
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
<li>JavaScript</li>
|
|
</ul>
|
|
</ol>
|
|
<p>Answers:</p>
|
|
<ul>
|
|
<li>HTML is used for defining web elements and the rough layout of a website</li>
|
|
<li>CSS is used to style the default HTML elements</li>
|
|
<li>JavaScript is used for data input, manipulation and other logical components</li>
|
|
</ul>
|
|
<hr>
|
|
|
|
<h2>Introduction to javascript</h2>
|
|
<ol>
|
|
<li>Browser pop-up dialogue box functions</li>
|
|
<ul>
|
|
<li>alert()</li>
|
|
<li>prompt()</li>
|
|
<li>confirm()</li>
|
|
</ul>
|
|
</ol>
|
|
<p>Answers:</p>
|
|
<ul>
|
|
<li>Reload webpage to see examples</li>
|
|
</ul>
|
|
<hr>
|
|
|
|
<h2>Data Types and Variables</h2>
|
|
<ol>
|
|
<li>Name JavaScript's three data types. Describe the types of data they store</li>
|
|
<li>JavaScript is a weakly-typed language. Describe what this means.</li>
|
|
<li>What are the naming rules for a variables name? What are naming conventions?</li>
|
|
<li>What is a constant in JavaScript? Describe how you would declare a JavaScript constant.</li>
|
|
</ol>
|
|
<p>Answers:</p>
|
|
<ol>
|
|
<li>Number, String and Boolean</li>
|
|
<li>weakly-typed language implies that data types do not need to be defined at initialization, the compiler will
|
|
decide, cast and convert the data type unless explicitly cast</li>
|
|
<li>A naming convention is a recommended way of naming variables to ensure readability and organize code.
|
|
JavaScript uses camelCase for variables and classes and UPPER_SNAKE_CASE for constants</li>
|
|
<code>
|
|
let customerAge = 23;<br>
|
|
const ONT_TAX_RATE = 0.13;
|
|
</code>
|
|
<li>A constant is a variable whose value cannot be changed once initialized, making it constant. To define a
|
|
constant, use the "const" keyword.</li>
|
|
</ol>
|
|
<hr>
|
|
|
|
<h2>Operators</h2>
|
|
<ol>
|
|
<li>Explain the following binary operators: + - * / %</li>
|
|
<li>Explain the multiple uses of the + operator.</li>
|
|
<li>Describe how the increment/decrement operators (++ and --) work.</li>
|
|
</ol>
|
|
<p>Answers:</p>
|
|
<ol>
|
|
<li>The + operator is used to get the sum, the - operator is to get the difference, the * operator multiplies,
|
|
the / operator divides and the % (modulus) operator determines if two numbers divided have a remainder and
|
|
how much of one</li>
|
|
<li>The + operator can be used to add two numbers together to find their sum, or you can use it to concatenate
|
|
multiple Strings together.</li>
|
|
<li>The ++ (increment) operator is used to increase the value of a variable by exactly one. The -- (decrement)
|
|
operator is used to decrease the value of a variable by exactly 1.</li>
|
|
</ol>
|
|
<hr>
|
|
|
|
<h2>The JavaScript Math object</h2>
|
|
<ol>
|
|
<li>Describe the operation and the return for the following Math methods:</li>
|
|
<ul>
|
|
<li>Math.PI</li>
|
|
<li>Math.abs(x)</li>
|
|
<li>Math.pow(x,2)</li>
|
|
<li>Math.round(x)</li>
|
|
<li>Math.ceil(x)</li>
|
|
<li>Math.floor(x)</li>
|
|
<li>Math.trunc(x)</li>
|
|
<li>Math.random()</li>
|
|
<li>Math.min(x,y)</li>
|
|
<li>Math.max(x,y)</li>
|
|
</ul>
|
|
</ol>
|
|
<p>Answers:</p>
|
|
<ul>
|
|
<li>Math.PI is a constant value for PI</li>
|
|
<li>Math.abs(x) returns the absolute value of X (makes a negative positive)</li>
|
|
<li>Math.pow(x,2) returns the value of x to the power of y (in this case 2)</li>
|
|
<li>Math.round(x) returns x rounded to the nearest whole. Below 0.5 is rounded down, above 0.5 is rouded up.
|
|
</li>
|
|
<li>Math.ceil(x) returns the "ceiling" of x, which is the next highest whole integer.</li>
|
|
<li>Math.floor(x) returns the "floor" of x, which is the next lowest whole integer.</li>
|
|
<li>Math.trunc(x) returns x truncated, which means it cuts off the decimal places regardless of what they are.
|
|
</li>
|
|
<li>Math.random() returns a random number between 0 and 1, can be manipulated to return in between any range
|
|
</li>
|
|
<li>Math.min(x,y) returns the minimum of two numbers. The smaller of the two</li>
|
|
<li>Math.max(x,y) returns the maximum of two numbers. The larger of the two</li>
|
|
</ul>
|
|
<hr>
|
|
|
|
<h2>JavaScript Number Methods</h2>
|
|
<ol>
|
|
<li>Describe the operation and the return for the following Number methods:</li>
|
|
<ul>
|
|
<li>toFixed()</li>
|
|
<li>toPrecision()</li>
|
|
</ul>
|
|
</ol>
|
|
<p>Answers:</p>
|
|
<ul>
|
|
<li>toFixed() returns x but at a fixed number of decimal places, defined by y</li>
|
|
<li>toPrecision() returns x but at a fixed number of significant digits. This means it may round deicimal places
|
|
before dropping them.</li>
|
|
</ul>
|
|
<hr>
|
|
|
|
<h2>JavaScript Global Functions</h2>
|
|
<ol>
|
|
<li>Describe the operation and the return for the following global functions:</li>
|
|
<ul>
|
|
<li>parseInt(number)</li>
|
|
<li>parseFloat(number)</li>
|
|
</ul>
|
|
</ol>
|
|
<p>Answers:</p>
|
|
<ul>
|
|
<li>parseInt(number) takes a string as input and returns the first integer in the string. Can also accept a
|
|
radix option</li>
|
|
<li>parseFloat(number) takes a string as input and returns the first float value in the string.</li>
|
|
</ul>
|
|
<hr>
|
|
|
|
<h2>JavaScript String Methods</h2>
|
|
<ol>
|
|
<li>Describe the operation and the return for the following String methods.</li>
|
|
<ul>
|
|
<li>length</li>
|
|
<li>toLowerCase()</li>
|
|
<li>toUpperCase()</li>
|
|
<li>charAt()</li>
|
|
</ul>
|
|
</ol>
|
|
<p>Answers:</p>
|
|
<ul>
|
|
<li>length gets the character count of a string including spaces</li>
|
|
<li>toLowerCase() turns all uppercase letters to lowercase letters</li>
|
|
<li>toUpperCase() turns all lowercase letters to uppercase letters</li>
|
|
<li>chatAt() takes a number for the index of the word to search through and returns the character at that index.
|
|
</li>
|
|
</ul>
|
|
|
|
<h2>Playground</h2>
|
|
<p>Interactive JavaScript follows</p>
|
|
|
|
<script src="index.js"></script>
|
|
</body>
|
|
|
|
</html> |