Explore

JavaScript Lab Workbook: JavaScript HTML application that displays a random Star Trek joke and rotates a Star Trek-themed image every time the user clicks the button.

#Web_Front_End

Learning Outocme:

Write a JavaScript HTML application in which a JavaScript Array is created with 10 Jokes themed on Star Trek.

An HTML Page presents a button. When the user clicks the button, a joke is presented and a Star Trek Themed image is rotated onto the HTML Page.

Create an index.html file with the following content:

<!DOCTYPE html>

<head>

<title>Star Trek Jokes</title>

<style>

img {

width: 300px;

height: auto;

}

</style>

</head>

<body>

<h1>Star Trek Jokes</h1>

</body>

</html>

Create an app.js file with the following content:

const jokes = [

"Why did the Borg cross the road? To assimilate the chicken!",

"How do you know you're a true Star Trek fan? When you try to use a Vulcan mind meld to remember where you left your keys.",

"Why did the Borg go on vacation? They wanted to be assimilated to a different culture.",

"Why did Worf change his hair color? It was a good day to dye!",

"What do you call a spaceship with a broken air-conditioner? A frying saucer!",

"Why don't the Borg play cards? Poker is irrelevant!",

"Why did the Klingon break up with his girlfriend? She had no honor!",

"Why did the Ferengi go to the doctor? His lobes were sore!",

"What do you call a group of musical Klingons? A Klingon-Quartet!",

"Why did the Vulcan go to therapy? He had emotional baggage!"

];

const images = [

"image1.jpg",

"image2.jpg",

"image3.jpg",

"image4.jpg",

"image5.jpg",

"image6.jpg",

"image7.jpg",

"image8.jpg",

"image9.jpg",

"image10.jpg"

];

const jokeButton = document.getElementById("jokeButton");

const jokeText = document.getElementById("jokeText");

const jokeImage = document.getElementById("jokeImage");

jokeButton.addEventListener("click", () => {

const randomIndex = Math.floor(Math.random() * jokes.length);

jokeText.textContent = jokes[randomIndex];

jokeImage.src = images[randomIndex];

});

Prepare 10 Star Trek-themed images and name them image1.jpg, image2.jpg, and so on, up to image10.jpg. Place these images in the same folder as your index.html and app.js files.

Open the index.html file in your web browser. Click the "Get a joke" button to display a random Star Trek joke and rotate the Star Trek-themed images.

Note: This example assumes you have 10 images named image1.jpg to image10.jpg. Replace the image names in the images array with the actual names of the images you want to use. Make sure the images are in the same directory as the index.html and app.js files.

What kind of a JavaScript function is this () => {

() => {} is an arrow function in JavaScript. Arrow functions are a concise alternative to traditional function expressions, introduced in ES6.

⁠

1⁠

2⁠

3⁠

4⁠

5⁠

6⁠

They have a few semantic differences and limitations compared to traditional functions.

The syntax for an arrow function expression does not require the function keyword and uses a fat arrow (=>) to separate the parameter(s) from the body

6⁠

. The empty parentheses () indicate that the function takes no parameters, and the empty curly braces {} indicate that the function has an empty body.

Here's an example of an arrow function that takes no parameters and has an empty body:

javascript

const myFunction = () => {};

Arrow functions can also take parameters and have a body that returns a value. For example, the following arrow function takes two parameters and returns their sum:

javascript

const add = (x, y) => x + y;

Arrow functions have some limitations, such as not having their own bindings to the this, arguments, super, or new.target keywords

1⁠

⁠

2⁠

⁠

3⁠

⁠

4⁠

⁠

5⁠

⁠

6⁠

. They are also always anonymous and cannot be used as constructors

1⁠

⁠

2⁠

⁠

3⁠

⁠

4⁠

⁠

5⁠

⁠

6⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.