< > " ' &What is a JavaScript escape character? Give some examples of such escape sequences.
===========================================
<!DOCTYPE html>
<!-- Validation2 Example
Source code file: index.html -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Kid Info Submission Form</h1>
<form id="form1" name="form1"
action="http:ectweb.cs.depaul.edu/sjost/receipt.php"
method="POST">
<label>Name:</label><br>
<input type="text" id="fname" name="fname"><br>
<span class="err" id="fname-err">
Name cannot be empty.<br>
</span><br>
<label>Gender:</label><br>
<input type="text" id="gender" name="gender"><br>
<span class="err" id="gender-err">
Gender must be F, M, or X.<br>
</span><br>
<label>Age:</label><br>
<input type="number" id="age" name="age" value="0"><br>
<span class="err" id="age-err">
Age must be non-negative.<br>
</span><br><br>
<input type="submit" value="Submit Form">
</form>
</body>
</html>
-------------------------------------------
/* Validation2 Example
Source code file: styles.css */
body { font: 100% Verdana, Arial, sans-serif;
color: navy; background-color: #E0E0FF; }
.err { color: red; display : none; }
-------------------------------------------
// Validation2 Example
// Source code file: script.js
// Event listener to validate form when
// it is submitted.
function validateForm(e) {
// Validate fname.
var fnameObj = document.querySelector("#fname");
fnameErr = document.querySelector("#fname-err");
var fnameOK;
if (fnameObj.value != "") {
fnameOK = true;
fnameErr.style.display = "none";
}
else {
fnameOK = false;
fnameErr.style.display = "block";
}
// Validate gender.
var genderObj = document.querySelector("#gender");
var genderErr = document.querySelector("#gender-err");
var genderOK;
if (genderObj.value != "M" && genderObj.value != "F" &&
genderObj.value != "X") {
genderOK = false;
genderErr.style.display = "block";
}
else {
genderOK = true;
genderErr.style.display = "none";
}
// Validate age.
var ageObj = document.querySelector("#age");
var ageErr = document.querySelector("#age-err");
var ageOK;
if (parseInt(ageObj.value) < 0) {
ageOK = false;
ageErr.style.display = "block";
}
else {
ageOK = true;
ageErr.style.display = "none";
}
// Cancel submission if at least one
// field is not validated.
if (fnameOK == false |
genderOK == false |
ageOK == false) {
e.preventDefault( );
}
}
// Attach validation event listener to form.
function init( ) {
var formObj = document.querySelector("#form1");
formObj.addEventListener("submit", validateForm);
}
document.addEventListener("DOMContentLoaded", init);
===========================================
var arr = [[1, 4, 2, 7],
[5, 2, 7, 0],
[6, 3, 6, 6],
[1, 8, 0, 8]];
00000000000000000000 00000000000000000000 00000000000000000000 00000000000000000000 00000101100000000000 00011001110000000000 00011101100000000000 00000000000000000000 00000000000000000000 00000000000000000000 00000000000000000000 00000000000000000000In this array, 1 = alive and 0 = dead or non-existant. Here is the array represented with spaces (dead) and Xs (alive) instead of zeros and ones:
X XX
XX XXX
XXX XX
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500"
style="border:3px solid #000000;">
Your browser does not support the canvas element.
</canvas>
<p id="out"></p>
<script>
var p = document.getElementById("out");
function make2dArray(size) {
var arr = [ ];
for(let i = 0; i < size; i++) {
arr.push([0]);
for(let j = 0; j < size; j++) {
arr[i][j] = 0;
}
}
return arr;
}
function print2dArray(arr) {
var len = arr.length;
for(let i = 0; i < len; i++) {
for(let j = 0; j < len; j++) {
document.write(arr[i][j]);
}
document.writeln("<br>");
}
}
const size = 100;
var a = make2dArray(size);
// Seed 2d array with random 0, 1 values.
for(let i = 1; i < size - 1; i++) {
for(let j = 1; j < size - 1; j++) {
a[i][j] = Math.random( ) >= 0.5 ? 1 : 0;
}
}
//document.writeln("<br><br>");
//print2dArray(a);
// Display grid from array values
function displayGrid( ) {
const cellSize = 5;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
for(var j = 1; j < size - 1; j++) {
var y = cellSize * j;
for(var i = 1; i < size - 1; i++) {
x = cellSize * i;
ctx.fillStyle = a[i][j] ? "#800000" : "#FFFFFF";
ctx.fillRect(x, y, cellSize, cellSize);
}
}
}
displayGrid( );
var b = make2dArray(size);
var n = 0;
function computeNextGeneration( ) {
for(let i = 1; i < size - 1; i++) {
for(let j = 1; j < size - 1; j++) {
let sum = a[i][j-1] + a[i][j+1] +
a[i-1][j-1] + a[i-1][j] + a[i-1][j+1] +
a[i+1][j-1] + a[i+1][j] + a[i+1][j+1];
if (sum < 2) {
b[i][j] = 0;
}
else if(sum == 2) {
b[i][j] = a[i][j];
}
else if(sum == 3) {
b[i][j] = 1;
}
else {
b[i][j] = 0;
}
}
}
// Copy next generation into array a.
for(let i = 1; i < size - 1; i++) {
for(let j = 1; j < size - 1; j++) {
a[i][j] = b[i][j];
}
}
displayGrid( );
p.innerHTML = "n = " + n;
n++;
}
setInterval(computeNextGeneration, 1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<style>
* { font: 110% Geneva, sans-serif; }
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script>
$( ( ) => {
$("button").click( ( ) => {
var x = parseFloat($("#op1").val( ));
var operator = $("select").val( );
var y = parseFloat($("#op2").val( ));
var answer;
if (operator == "+") { answer = x + y; }
else if (operator == "-") { answer = x - y; }
else if (operator == "*") { answer = x * y; }
else { answer = x / y; }
$("#res").val(answer.toFixed(8));
});
});
</script>
</head>
<body>
<h1>Calculator</h1>
<label for="op1">Operand 1</label><br>
<input type="number" id="op1"><br><br>
<select>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><br><br>
<label for="op2">Operand 2</label><br>
<input type="number" id="op2"><br><br>
<button>Perform Operation</button><br><br>
<label for="res">Result</label><br>
<input type="number" id="res">
</body>
</html>