Skip to content

Commit f2d2144

Browse files
BossClawBossClaw
authored
Add files via upload
0 parents  commit f2d2144

File tree

2 files changed

+212
-0
lines changed

2 files changed

+212
-0
lines changed

‎index.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>JS LAB01</title>
7+
8+
<style>
9+
body {
10+
background-color: darkslategray;
11+
font-family: sans-serif;
12+
}
13+
.bodyContent {
14+
width: 70%;
15+
margin-inline: auto;
16+
padding: 3em;
17+
border: 2px solid black;
18+
background-color: white;
19+
}
20+
21+
.bodyContent div {
22+
padding-bottom: 0.5em;
23+
margin-bottom: 2em;
24+
border-bottom: 2px solid lightblue;
25+
}
26+
27+
.bodyImage {
28+
width: 70%;
29+
}
30+
31+
table {
32+
border-collapse: collapse;
33+
}
34+
35+
td,
36+
th {
37+
padding: 0.5em;
38+
border: 1px solid lightblue;
39+
}
40+
</style>
41+
42+
<script defer src="script.js"></script>
43+
</head>
44+
<body>
45+
<div class="bodyContent">
46+
<h1>CPAN113 JS LAB01</h1>
47+
48+
<div>
49+
<button id="recalcButton">ReCalc</button>
50+
</div>
51+
<div>
52+
<pre id="output">
53+
The lab output goes here!
54+
Hopefully!
55+
</pre>
56+
</div>
57+
</div>
58+
</body>
59+
</html>
60+
61+
<script>
62+
function runLabScript() {
63+
const outputElement = document.getElementById("output");
64+
65+
const ret_var = run_lab()
66+
outputElement.textContent = ret_var;
67+
}
68+
69+
// ON LOAD
70+
document.addEventListener("DOMContentLoaded", () => {
71+
console.log("DO ON LOAD");
72+
runLabScript();
73+
});
74+
75+
// BUTTON
76+
const button = document.getElementById("recalcButton");
77+
button.addEventListener("click", () => {
78+
console.log("DO RERUN");
79+
runLabScript();
80+
});
81+
</script>

‎script.js

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
// LAB SCR
2+
function run_lab() {
3+
// OUPUT VAR
4+
let output_var = [];
5+
6+
function cl(str) {
7+
if (str == null) {
8+
str = "";
9+
}
10+
output_var.push(str);
11+
console.log(str);
12+
}
13+
14+
// 1. Declare and Use Variables
15+
let studentName = "Carmack Romero";
16+
let studentAge = 92;
17+
let isEnrolled = false;
18+
cl();
19+
20+
// LOG TO CONSOLE
21+
cl(`STUDENT NAME[${studentName}]`);
22+
cl(`STUDENT AGE[${studentAge}]`);
23+
cl("IS ENROLLED[" + isEnrolled + "]");
24+
cl();
25+
26+
// 2. Demonstrate Data Types
27+
28+
// Create and log examples for all five basic JavaScript data types:
29+
// String: A text value.
30+
// Number: An integer or floating-point number.
31+
// Boolean: true or false.
32+
// Array: A collection of values (e.g., ["apple", "banana", "cherry"]).
33+
// Object: An entity with properties (e.g., { firstName: "John", lastName: "Doe" }).
34+
35+
let strVar = "I'm a string of characters!";
36+
let numVar = -999;
37+
let booleanVar = false;
38+
let arrayVar = ["This", "sure", "is", "a", "cool", "array", "!"];
39+
let objVar = {
40+
whatAmI: "an object",
41+
isCool: true,
42+
};
43+
44+
// LOG TO CONSOLE
45+
cl("WHAT IS THIS strVar? [" + strVar + "]");
46+
cl("IS THIS numVar[" + numVar + "] BIGGER THAN ZERO?(" + (numVar > 0) + ")");
47+
cl(
48+
"IS THIS boolVar[" + booleanVar + "] FALSE?(" + (booleanVar == false) + ")"
49+
);
50+
51+
cl(
52+
"WHAT IS THIS arrayVar[" +
53+
arrayVar +
54+
'] AS A STRING? "' +
55+
arrayVar.join(" ") +
56+
'")'
57+
);
58+
cl();
59+
60+
cl("THIS OBJECT[" + objVar + "]...");
61+
cl("WHAT IS THIS OBJECT[" + objVar.whatAmI + "]");
62+
cl("IS THIS OBJECT COOL?[" + objVar.isCool + "]");
63+
cl();
64+
65+
// 3. Use Basic Operators
66+
// Perform and log operations using different types of operators:
67+
68+
// Arithmetic Operators: Addition (+), Subtraction (-), Multiplication (*), and Division (/).
69+
70+
let opValA = 1000.0;
71+
let opValB = -250 + Math.random() * 500;
72+
opValB = Math.round(opValB);
73+
74+
cl("The value of opValA is [" + opValA + "]");
75+
cl("The value of opValB is [" + opValB + "]");
76+
77+
let opValSum = opValA + opValB;
78+
let opValSub = opValA - opValB;
79+
let opValMul = opValA * opValB;
80+
let opValDiv = opValA / opValB;
81+
82+
cl("(" + opValA + " + " + opValB + " = " + opValSum + ")");
83+
cl("(" + opValA + " - " + opValB + " = " + opValSub + ")");
84+
cl("(" + opValA + " * " + opValB + " = " + opValMul + ")");
85+
cl("(" + opValA + " / " + opValB + " = " + Math.round(opValDiv) + ") * ROUNDED");
86+
cl();
87+
88+
// Comparison Operators: Greater than (>), Less than (<), Equal to (===), and Not equal (!==).
89+
cl("(" + opValA + " > " + opValB + " is " + (opValA > opValB) + ")");
90+
cl("(" + opValA + " < " + opValB + " is " + (opValA < opValB) + ")");
91+
cl("(" + opValA + " === " + opValB + " is " + (opValA === opValB) + ")");
92+
cl("(" + opValA + " !== " + opValB + " is " + (opValA !== opValB) + ")");
93+
cl();
94+
95+
// Logical Operators: AND (&&), OR (||), and NOT (!).
96+
97+
let opValC = -1000 + Math.random() * 2000;
98+
opValC = Math.round(opValC * 10) / 10;
99+
cl("The value of opValC is [" + opValC + "]");
100+
101+
if (opValA > 0.0 && opValC > 0.0) {
102+
cl(
103+
"BOTH A[" + opValA + "] and C[" + opValC + "] VALUES ARE MORE THAN ZERO"
104+
);
105+
} else {
106+
cl("EITHER A[" + opValA + "] or C[" + opValC + "] ISN'T MORE THAN ZERO");
107+
}
108+
109+
if (opValA > 0.0 || opValC > 0.0) {
110+
cl("EITHER A[" + opValA + "] and C[" + opValC + "] IS MORE THAN ZERO");
111+
} else {
112+
cl("NEITHER A[" + opValA + "] or C[" + opValC + "] IS MORE THAN ZERO");
113+
}
114+
cl();
115+
116+
let opValD = Math.random() > 0.5;
117+
118+
cl("The value of opValD is [" + opValD + "]");
119+
cl("The value of !opValD is [" + !opValD + "]");
120+
cl();
121+
122+
// RETURN OUTPUT VAR TO PAGE
123+
console.log("OUTPUT VAR LENGTH(" + output_var.length + ")");
124+
125+
let ret_str = output_var.join("\n");
126+
127+
return ret_str;
128+
}
129+
130+
// QUICK & EASY MAKE AVAIL TO THE INDEX.HTML
131+
window.run_lab = run_lab;

0 commit comments

Comments
 (0)