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:
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.
. 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
constmyFunction = () => {};
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
constadd = (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