CSCE 102 Exam 3 2.0

What is JavaScript

A scripting language used to make web pages interactive

What is an event handler

JavaScript code triggered by events like click or hover

What is alert()

Displays output to the user

What is prompt()

Takes input from the user

Difference between alert and prompt

Alert displays output; prompt takes input

Example of prompt

Age = prompt("Enter your age");

What type of statement is Age = prompt(…)

Assignment statement

Example of alert with variable

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

Change background color

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

What is a function

A block of code that runs only when called

When is a function executed

When it is called

Function syntax

function name() { }

Function with one parameter

function name(x) { }

Function with two parameters

function name(x,y) { }

How to call a function

name();

What is a parameter

A value passed into a function

Where do parameters get values

From the function call

What is concatenation

Joining strings using +

Example of concatenation

alert(x + y);

What is document.getElementById

Selects an element by its id

Change text of element

document.getElementById("id").innerHTML = "text";

Change style of element

document.getElementById("id").style.color = "blue";

Change image

document.getElementById("id").src = "image.jpg";

What does .value do

Gets or sets value of textbox

Example get textbox value

document.getElementById("box1").value

Example set textbox value

document.getElementById("box1").value = x

Why use parseFloat

Converts string to number for math

Example parseFloat

parseFloat(document.getElementById("box1").value)

What does Math.random do

Generates number between 0 and 1

What does Math.round do

Rounds a number

Example random + round

var x=Math.random(); var y=Math.round(x);

If statement syntax

if(condition){ }

Else statement

Runs if condition is false

Equal operator

==

Not equal operator

!=

Greater than

>

Less than

<

AND operator

&&

OR operator

||

Modulus operator

%

Example even/odd

if(x % 2 == 0)

What is this keyword

Refers to current element

Change color using this

this.style.color="red";

Change text using this

this.innerHTML="New text";

Change image using this

this.src="cat.jpg";

onclick event

Runs code when clicked

onmouseover event

Runs when mouse is over element

onmouseout event

Runs when mouse leaves element

Textbox HTML

<input type="text" id="box1">

Button HTML

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

Function to add two numbers

function add(a,b){ alert(a+b); }

Calling add function

add(2,4);

What happens with Sum("2","4")

It concatenates to "24"

What happens with parseFloat

It converts to numbers so math works

Swap variables

var temp=a; a=b; b=temp;

Image rollover

<img src="dog.jpg" onmouseover="this.src='cat.jpg'">

Change background with function

function bg(){ document.body.style.backgroundColor="yellow"; }

Function with parameter background

function bg(x){ document.body.style.backgroundColor=x; }

Call background function

bg("blue");

Checkbox difference

Can select multiple options

Radio button difference

Only one option can be selected

Checkbox check

if(document.getElementById("box1").checked)

Radio check

if(document.form.cat[1].checked)