Practice JS Lab Practical

There are three parts to this lab practical.

The first part is very basic Javascript function writing. Getting it is the B- level.

Part I, String Functions

There are six questions. The product of the first two is just writing a function. You should test your work in the console. Pre-typed shell code is in funs.js. Use thee JavasScript string reference in W3Schools as a reference.

Problem 1


/**
*  s is a one-character string alphabetical string`
*  retturns "upper" if s is an upper-case character
*  and "lower if s is a lower-case character
*/
function checkCase(ch)
{
}

Problem 2


/**
* s s is an alphabetical string
* returns the number of upper-case letters in s
*/
function numberOfCaps(s)
{
}

Part II

This will deal with responding to clicks. Here is some HTML to get started.


<!doctype html>
<!--Author: Morrison-->
<!--Date: 2021-11-03-->

<html lang="en">
<head>
<title>problem3</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="problem3.css"/>
<script src="problem3.js"></script>
</head>
<body>
<h2>I Hate to Butt In</h2>

<p><button>Negatize Colors!</button></p>  

<div id="mousy">
</div>
</body>
</html>

appearance of problems 3 and 4

This is what you need to make happen

Problem 3:When the negatizer button is hit, have the body's background become black and the text white.
Problem 4: When the div id clicked in, it turns blue.

One solution is middle B, get two and you have A-/B+.

Here is some starter CSS.


/*Author: Morrison*/
/*Date: 2021-11-03*/

h1, h2, .display
{
    text-align:center;
}
#mousy
{
    width:200px;
    height:150px;
}

Have a generous dollop of JavaScript.


/*Author: Morrison
Date: 2021-11-03  */
addEventListener("load", main);
function main()
{
}

Part III

This contains problems 5 and 6. Problem 5 is pure function writing; you check a string to see if it'is a valid hex code. The name of this function is isValidHexCode.

In problem 6, the user enters a hex code of the form #abcdef. If the hex code is valid, clicking in the canvas generates a square centered at the click-spot that is 50px by 50px. If the hex code is invalid, set the color to be used to be white with opaacity 0 so the user thinks no square was created.


<!doctype html>
<!--Author: Morrison-->

<html lang="en">
<head>
<title>problem5</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="problem5.css"/>
<script src="problem5.js">
</script>
</head>
<body>
<h2>Problems 5 and 6</h2>

<canvas width="800" height="500" id="surface">
    <p>Get a modern browser, chumley!</p>
</canvas>

<p class="display">
    Enter a hex code:  <input type="text" id="hexbox"></input>
</p>
</body>
</html>

Here is the CSS


/*Author: Morrison*/
h1, h2, .display
{
    text-align:center;
}
canvas
{
    border:solid 1px black;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

Here is starter JS.


/*Author: Morrison*/
window.addEventListener("load",  main);
function main()
{
}
//problem 5
function isValidHexCode(s)
{
}