CSCE 102 Exam 2

What is the difference between the Check boxes and Radio buttons in the code and in how they work.

- checkboxes allow for multiple selections, while radio buttons allow for only one selection within a group. - <<< In checkboxes, each option has a unique name, while in radio buttons, options can share the same name. >>> - In the code, checkboxes are created using the <input> element with the type="checkbox" attribute. and type="radio" for the radio button. - Grouping: Checkboxes can be grouped together in a form and submitted as an array of values, while radio buttons should be grouped together using the name attribute so that only one value in the group can be submitted.

☆ Know how to use and and or

&& It returns true if both operands are true, and false otherwise. || It returns true if at least one operand is true, and false otherwise. if (x > 0 && y > 0) { console.log("Both x and y are positive"); } if (a > 0 || b > 0) { console.log("At least one of a and b is positive"); }

☆ In what case is innerHTML used?

- .innerHTML property is used to get or set the HTML content of an element (including any child elements, text, or markup.) - can be used for any HTML element that has content <div> <span> <p> <h1>-<h6> <blockquote> <ul> and <ol> <li> <table> <tr> <td> <a> <img> <input> <form>

Difference between a While loop and a Do While loop

- A while loop evaluates the condition at the beginning of each iteration, while a do-while loop evaluates the condition at the end of each iteration. - the main difference between a while loop and a do-while loop is when the loop condition is evaluated.

Math.random()

- a built-in JavaScript function - returns a random number between 0 and 1 (exclusive).

Math.round()

- a built-in JavaScript function - rounds a number to the nearest integer.(rounds up)

Math.floor()

- a built-in JavaScript function - rounds a number down to the nearest integer.(rounds down)

What does target do when opening links in a new tab?

All the links will open in the same tab

Where does the function call go?

Anywhere you can put JavaScript

What type of statement is this?: Age= prompt("Please Enter Your Age");

Assignment Statement - The statement assigns the user's input to a variable called "Age". The semicolon at the end of the statement indicates the end of the line of code.

☆ document.getElementById(). what does these do define

can retrieve a specific HTML element using its id attribute

Here's an example do-while loop that prints the numbers from 1 to 5:

let i = 1; do { console.log(i); i++; } while (i <= 5);

Here's an example while loop that prints the numbers from 1 to 5:

let i = 1; while (i <= 5) { console.log(i); i++; }

1. Write a function named Change_color that has one parameter and changes the background color of the webpage to the color that was sent in the parameter 2. Call the function and send the color blue

1. function Change_color(a){ document.body.style.backgroundColor=a; } 2. Change_color("blue");

Three kinds of loops

For loop While loop Do while loop

What does a radio button do?

It is multiple choice, you can only select one. All options in the code will have the same name. When checking the options in the function 0 will be the first option, 1 will be the second etc. if(document.formcat.cat[1].checked){ document.formcat.catout.value="That is correct!"; } else{ document.formcat.catout.value="You are wrong!"; } }

What does checkboxes do?

You can select multiple options, in the code they have different names. Br makes the options go up to down instead of side to side. function Isitvalid(){ If (document.formdog.dog1.checked==true){ alert("Dog is correct!"); } else{ alert("Dog is a valid variable name!"); } if(document.formdog.dog2.checked){ } if(document.formdog.dog3.checked){ alert("alert is not a valid variable name!"); } if(document.formdog.dog4.checked){ alert("My Total is not a valid variable name!"); } }

☆ this. what does this do?

a keyword in JavaScript that refers to the current execution context. (which can be a function, an object, or the global environment.)

What is a function?

a module of code that is not executed until it is called

What is a parameter?

a value that is passed to a function as input when the function is called.

javascript code to write an alert with the age that was prompted and say Oh So Young!

alert(Age + " Oh so young!");

Javascript code to change the background color of the page to blue

document.body.style.backgroundColor = "blue";

Here's an example for loop that prints the numbers from 1 to 5:

for (let i = 1; i <= 5; i++) { console.log(i); }

Here is the function call: Fun1(); Write the function that has no parameters and changes the text in the h1 with the id of dog to read I want the A!

function Fun1(){ document.getElementById("dog").innerHTML="I want the A!";}

Here is the function call: Fun2("I got the A!"); Write the function that has one parameter that represents a phrase and changes the text in the heading with the id of cat to be what is sent in the parameter.

function Fun2(x){ document.getElementById("cat").innerHTML=x;}

How to call this function: function get_the_A () { alert ("I got the A!"); }

get_the_A();

What does this code do? Sum("2","4") Function Sum(a,b){ alert(a+b); }

gives you an alert of 6

Parameter: why are they used?

it defines the input data that a function requires to perform its task. - Customization: Parameters allow you to create a more customizable function. - Abstraction: Parameters help to abstract the implementation details of a function from its usage. The user of the function doesn't need to know how the function works internally; they only need to know what parameters to provide and what the function will return. - Code Reusability: Functions that take parameters can be reused in different parts of a program with different input values. This can save time and effort, as you don't need to write the same code over and over again. - Efficiency: By passing arguments as parameters, you can avoid the need to define variables in the function that store the input data. This can save memory and processing time, especially when working with large data sets.

Can you look at a loop and tell what it does?

k=100 do { document.write("hello "+k+"<br>"); k=k+1; } while(k<150) - sets the value of the variable k to 100. The loop then executes the code block enclosed in curly braces {}. This block contains two statements: The document.write() statement writes the string "hello " followed by the value of k and the HTML line break tag <br> to the web page. The k=k+1 statement increments the value of k by 1. The loop then checks the condition inside the parentheses () of the while statement. If the condition is true (i.e., if k<150), the loop goes back to the beginning of the block and executes it again. If the condition is false, the loop exits.

What determines how many columns there are in a table?

th and td in a tr

Where can you place JavaScript?

the body or the head

toLowerCase ()

used to convert a string to all lowercase letters.

while loop

used when you don't know how many times you want to execute a block of code. It has the following syntax: while (condition) { // code block to be executed }

do-while loop

used when you want to ensure that a block of code is executed at least once, even if the condition is initially false. do { // code block to be executed } while (condition);k=100; do { document.write("hello "+k+"<br>"); k=k+1 } while(k<10)

How do parameters get their values?

when a function is called it passes parameters to functions

What is x and y? x=27; x=52; x=33y=x;

x=33 y=33

Can you use a function multiple times?

yes, can be reused

☆ .value(only for textboxes) and .innerHTML difference?

.value property is used to get or set the value of form elements like input (including text inputs, checkboxes, radio buttons), select elements, and textareas. .innerHTML property is used to get or set the HTML content of an element (including any child elements, text, or markup.)

Two types of JavaScript comments

// This is a single-line comment /* This is a multi-line comment that can span multiple lines of code. */

1. Write a function with two parameters that replaces an image. Send the id and the new img file name 2. Write the function call

1. function pretty(x,y) document.getElementById(x).src=y 2. pretty("cat", "dog.jpg"); pretty("dog",pig.gif")

1. Call a function named My_fun that has two parameters and send it number 2 and 24, no HTML 2. Call the same function and send the variables Numb1 and Numb2 as parameters, no HTML 3. Write the function, My_fun that receives two parameters with the data type of the number and writes the sum of the parameters using an alert box

1. My_fun(2,24); 2. My_fun(Numb1,Numb2); -if they were in quotations they would be strings 3. function My_fun (a,b){ alert (a+b);

Call an alert in HTML so when you click on h1 it calls the function.

<h1> onclick="z(); alert(b);"> -function is named z -b defined in script inside the function -no parameters

Write to the code to make a button that says "click".

<input type="button" value="click">

Write to the code to make a text box.

<input type="text">

Write a CSS code to give a table a border.

<style> Table,td,th { border: thin double black; } </style>

Write the code to place an image inside a table that links to the bigger picture (thumbnails)

<td> <a href="babyJ2.jpg" target="dog"> <img src="babyJ2small.jpg" alt="baby J with a hat"> </a> </td>

Write the code to add an image to a table.

<td><img src="dog.jpg" alt="dog"> </td>

Inside a table write the code to make "Got the A!" span two columns.

<th colspan="2"> Got the A! </th>

Inside a table write the code to make "Got the A!" span two rows.

<th rowspan="2">Got the A!</th>

Know how to use the relational operators

== Equal > Greater than < Less than >= Greater than or Equal to <= Less than or Equal to != Not equal if (x <= 5) { if (x != 5) {

for loop

A for loop is used when you know the number of times you want to execute a block of code. for (initialization; condition; increment/decrement) { // code block to be executed } initialization: This is where you set the initial value of the counter variable. condition: This is where you set the condition for when the loop should stop executing. increment/decrement: This is where you specify how the counter variable should be modified each time through the loop.

What is a variable?

A name that represents a value. A variable has a name, a value, and a data type var age = 25; // The variable name is "age", the value is 25, and the data type is a number.

What does this code do? function addit(x,y){ alert(parseFloat(document.getElementById(x).value)+ parseFloat(document.getElementById(y).value))}

Adds the values of x and y -Parse changes the data type from string to number so we can do arithmetic, adding values from textboxes and alerts

Javascript code to prompt user for their name

Age= prompt("Please Enter Your Age");

What makes a checkbox different than a radio.

Check boxes you can select several options and they all have different names in the code.

Prompt

If you don't save the value entered by the user, for example by assigning it to a variable, you cannot use it in your code. var name = prompt("Please enter your name:"); console.log("Hello, " + name + "!"); var age = prompt("Please enter your age:"); console.log("You are " + age + " years old.");

Write a function that takes two parameters (which are numbers) and gives you the sum of those values

If you want to ensure that the inputs are treated as numbers, you should pass them as actual numbers, not strings. For example: Sum(2,4) Function Sum(a,b){ alert(a+b); } -gives you an alert of 6

What does "use strict" mean?

It instructs the browser or JavaScript engine to enable a stricter mode of variable declaration and usage/executing of the code. One of the main effects of "use strict" is that it requires you to declare variables using the "var", "let", or "const" keywords before you can use them. This is known as variable declaration, and it helps to prevent common coding mistakes like accidentally creating global variables or overwriting existing variables.

What happens if you declare a variable inside a function?

It is only available inside that function, but if you declare it outside the function it is available globally

Why do we use thumbnails instead of changing the height and width?

It loads faster

parseFloat()

JavaScript built-in function that converts a string to a floating-point number. ☆ When to not use: when you pass a numerical value (without the quotation marks) as a function parameter, it is automatically recognized as a number type. If you enclose a numerical value in quotation marks, it will be recognized as a string type instead of a numerical type ☆ When to use: when you use the prompt() function to get user input, the input is returned as a string type. If you want to use the input as a number, you will need to convert it to a number type using parseFloat() ☆ The parseFloat() function is a built-in JavaScript function that takes a string as input and attempts to parse it into a floating-point number - If the string cannot be converted to a number, it returns NaN (not a number).

What is an event handler? Is it HTML or Javascript?

Javascript

How do you set up a function?

Needs to be in the script element or external javascript file. Function with no parameters named get_the_A: function get_the_A () { } Content goes between curly brackets

The purpose of functions

Reusability: Functions allow you to reuse code. This is more efficient and easier to maintain. Abstraction: Functions allow you to hide implementation details. Modularity: Functions help to break down code into smaller, more manageable pieces. (you can make it easier to understand, modify, and debug.) - By breaking up your code into functions, you can create smaller, more focused pieces of code that are easier to understand and modify. Encapsulation: Functions allow you to encapsulate code and data into a single unit. This makes it easier to control access to your code and data.

Rules for naming functions

Same rules as naming variables. Letters (uppercase and lowercase), digits, underscores, and dollar signs. Can't be a reserved word (word used for something else in the language), cant be word used for variable or id.. Can't start with a number. Can't have spaces in between.

data types (☆ how do we recognize these?)

String Number (Integer, Floating-point) Boolean ☆ String: A string is a sequence of characters enclosed in single or double quotes. ☆ Number: A number is a numerical value that can represent integers or floating-point numbers. In JavaScript, numbers are represented using the number data type. Integers are whole numbers with no decimal places, while floating-point numbers have decimal places. ☆ Boolean: A Boolean is a data type that can have one of two values: true or false. Booleans are often used in programming for conditional statements and logical operations. For example, you might use a Boolean variable to represent the result of a comparison operation like "is x greater than y?".

When is the function executed?

When it is called

how to access the information in a textbox and to display new information in a textbox with or without a form.

Without a form: using document.getElementById("theIdGoesHere").value With a form document.nameofform.nameoftextbox.value

Here is the function call: Fun3("dog","I got the A!"); Write the function. It has two parameters; the first parameter represents an id and the second represents a phrase. The function is to change the text in element with the id sent in the first parameter to what is sent in the second parameter.

function Fun3(x,y){ document.getElementById(x).innerHTML=y;}

Write a function to generate a number and put it into a text box. In a 2nd text box have the number rounded.

function coinflip(){ dog= Math.random(); document.getElementById("textbox1").value=dog; cat= Math.round(dog); document.getElementById("textbox2").value=cat;} -cat saves the rounded number for dog

Give 3 ways to concatenate x and y (2 parameters) into an alert

function concat (x, y) { a = x + y; alert(a) -a is a local variable to save the result. function concat (x, y) { alert(x+y) } function concat (x, y) { x = x + y; alert(x) } -Assigned the concatenated value to the variable x - In programming, concatenation means to combine two or more strings or pieces of text into a single string.

Write a function with 2 parameters (x and y), name it concat

function concat (x, y) { }

Create a function named dog with no parameters that prompts user to pick a color, then use that color to change the background color.

function dog() {cat=prompt('Please enter a color'); document.body.style.backgroundColor=cat;} -cat is a variable name -prompt needs assignment statement to save value -still has to be called - dog();

Write a function named dog with no parameters to change the background color to blue. Then call the function in the body so when you click h1 it changes the background color

function dog() {document.body.style.background Color="blue" } <h1 onclick="dog()">

Write and call a function so when you click an h1 the text changes and becomes underlined and turn red.

function dog(){ document.getElementById("cat").innerHTML="New Text"; document.getElementById("cat").style.textDecoration="underline"; document.getElementById("cat").style.color="red";} <h1 id="cat" onclick="dog()"> Original text </h1>

Write a function with one parameter to change the background color. Call the function in HTML changing the color to green.

function dog(x){ document.body.style.backgroundColor=x; } <h2 onclick= "dog('green');"> This Class is so great </h2>

Write the code to ask the user for their favorite sport which they can enter into a text box. If they say ice skating or figure skating in a variety of upper and lowercase, respond by saying "me too". If they say anything else respond with "I like ice skating more". Responses should show up in a text box once they click a button.

function dogfun(){ if ((document.getElementById("dog1").value.toLowerCase() == "ice skating") || (document.getElementById("dog1").value.toLowerCase() == "figure skating")) { document.getElementById("dogout").value = "me too";} else{ document.getElementById("dogout").value = document.getElementById("dog1").value + " I like ice skating more" } } <h1> Please Enter Your Favorite Sport. </h1> <input type="text" id="dog1" size="50"> <input type="button" value="click" onclick="dogfun()"> <input type="text" id="dogout" size="100">

Write the function and HTML code so when you click the h3 the picture and the h1 changes.

function dogshow(x,y){ document.getElementById("dogholder").src=x; document.getElementById("dogdesc").innerHTML=y; } <h1 id="dogdesc"> Baby J at the Beach </h1> <img src="beachbaby.bmp" alt="image holder position" id="dogholder"> <h1> select the picture </h1> <h3 onclick="dogshow('babyj2dog.bmp','Baby J with Buster')"> Baby J with Buster </h3>

Write a function that has no parameters that puts out an alert box that says I got the A!

function get_the_A () { alert ("I got the A!"); }

Set up a function named silly that has one parameter.

function silly (a) { } -variable a is the is the parameter -when function is called the value maps into the into the variable a -The variable a is initialized to the value that was sent in the function call -if the function call is silly("animal"); then the variable a is initialized with the value animal. (The parameter (variable) a is assigned the value animal .) If we call the function again, silly("Goose"); this time the string Goose maps into a so the initial value of a is Goose

Swap two images using two parameters. use on mouseover the call function and on mouseout.

function swap(x,y){ a=document.getElementById(x).src; document.getElementById(x).src=document.getElementById(y).src; document.getElementById(y).src=a; } When the swap() function is called, it first gets a reference to the source image by assigning it to the a variable using the document.getElementById(x).src statement. This reference to the original image is then used to swap the two images, ensuring that neither image is lost. <img src="cat.gif" alt="cat1" id="cat" onmouseover="swap('dog','cat');' onmouseout="swap('cat','dog');"> <img src="dog.gif" alt="dog1" id="dog"> ID of dog will always be replaced with the image that has an ID of cat when the mouse pointer is over the cat image.

What are the two ways to declare a variable?

var a; -a is variable let a; -let can be used inside of blocks that make it not available outside of a block (if or loop statements) Both: -if declared outside of function it is available globally, if it is declared inside a function it is only available there