Question

In: Computer Science

use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file...

use VISUAL STUDIO CODE to write this javascript program

Exercise 1

(a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when a button is clicked.

(b) Create a HTML file that includes JavaScript that is similar to: let recs = [“my item …1”,”my item…2”, …] i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be rendered as a list element. Use a HTML list. Use createElement and appendChild.

(c) Redo your createTable code from last week’s lab so that it uses createElement and appendChild rather than setting an innerHTML property.

Solutions

Expert Solution

a) HTML Code:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var para1 = document.createElement("p");
var para2 = document.createElement("p");
var para3 = document.createElement("p");
var para1Text = document.createTextNode("www.google.com");
var para2Text = document.createTextNode("www.microsoft.com");
var para3Text = document.createTextNode("www.adobe.com");
para1.appendChild(para1Text);
para2.appendChild(para2Text);
para3.appendChild(para3Text);
document.body.appendChild(para1);
document.body.appendChild(para2);
document.body.appendChild(para3);
}
</script>

</body>
</html>

Output:

***************************************************************************************************************

b) HTML Code:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Try it</button>

<ul id="myList">
</ul>

<script>
function myFunction() {
   let recs = ["my item…1","my item…2","my item…3","my item…4","my item…5"]
recs.forEach(createListItem);
}

function createListItem(value, index, array) {
var node = document.createElement("LI");
var textnode = document.createTextNode(value);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>

</body>
</html>

Output:

***************************************************************************************************************

c) HTML Code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);

var y = document.createElement("TR");
y.setAttribute("id", "myTr");
document.getElementById("myTable").appendChild(y);

var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("myTr").appendChild(z);
}
</script>

</body>
</html>

Output:

venereology answered 1 month ago
Next > < Previous

Related Solutions

Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to display the current day and time. b) Write a JavaScript program to print the contents of the current window.   c) Write a JavaScript program where the program takes a random integer between 1 to 10 d) Write a JavaScript program to calculate multiplication and division of two numbers (input from the user). e)Write a JavaScript program to create a new string from a given...
The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
VISUAL STUDIO CODE Use a for loop for to create "password". Request the password at least...
VISUAL STUDIO CODE Use a for loop for to create "password". Request the password at least 3 times. If the password is 12345, the procedure ends, if the correct password entered, close excel saving changes. THANKS
Using Visual Studio Code (JavaScript) For this lab you must use a reasonable faceted search example,...
Using Visual Studio Code (JavaScript) For this lab you must use a reasonable faceted search example, each item must have at least three categorical attributes and at least one numeric attribute. Attributes such as ID, name etc do not count as categorical or numeric attributes. Exercise 1 (a) Define a class for your item that meets the above three categorical and one numeric attribute requirements. (b) Create a text file that contains at least 5 such records in CSV format....
Write, test, and debug (if necessary) HTML file with the Javascript codes in an external file...
Write, test, and debug (if necessary) HTML file with the Javascript codes in an external file for the following problem: Input: a number, n, using prompt, which is the number of the factorial numbers to be displayed. Output: a bordered table of numbers with proper caption and headings in which the first column displays the numbers from 1 to n and the second column displays the first n factorial numbers. For example, if a user enters 10 to be the...
JavaScript 1. FizzBuzz Submit js file with functioning code Write a program that uses console.log to...
JavaScript 1. FizzBuzz Submit js file with functioning code Write a program that uses console.log to print all the numbers from 1 to 120, with two exceptions. For numbers divisible by 4, print "Fizz" instead of the number, and for numbers divisible by 10 (and not 4), print "Buzz" instead. When you have that working, modify your program to print "FizzBuzz", for numbers that are divisible by both 4 and 10 (and still print "Fizz" or "Buzz" for numbers divisible...
You should use Visual Studio to write and test the program from this problem.   Write a...
You should use Visual Studio to write and test the program from this problem.   Write a complete program with a for loop that (5 pts) uses proper variable types. (10 pts) uses a for loop to read in a real numbers exactly 8 times (10 pts) adds the number read in the loop to a running sum. (10 pts) Computes the average of the 8 numbers as a real number. (5 pts) Prints the correct result with 2 decimal places,...
Please use original C++ code for this. This is for visual studio. Program 5: Shipping Calculator...
Please use original C++ code for this. This is for visual studio. Program 5: Shipping Calculator The Speedy Shipping Company will ship packages based on how much they weigh and how far they are being sent. They will only ship small packages up to 10 pounds. You have been tasked with writing a program that will help Speedy Shipping determine how much to charge per delivery. The charges are based on each 500 miles shipped. Shipping charges are not pro-rated;...
using Visual Studio write a code containing a main() program that implements the coin change state...
using Visual Studio write a code containing a main() program that implements the coin change state machine in C++ according to the guidance given in Translating a state machine to C++ Test your code using prices 1 and 91 cents, and assume change is calculated from a dollar bill. Copy and paste your console output to a text editor and save the result in a single file named console.txt. Upload your exercise081.cpp and console.txt files to Canvas.
How to do in C++ HTML Converter Create a program that reads an HTML file and...
How to do in C++ HTML Converter Create a program that reads an HTML file and converts it to plain text. Console HTML Converter Grocery List * Eggs * Milk * Butter Specifications Your instructor should provide an HTML file named groceries.html that contains these HTML tags: <h1>Grocery List</h1> <ul>     <li>Eggs</li>     <li>Milk</li>     <li>Butter</li> </ul> When the program starts, it should read the contents of the file, remove the HTML tags, remove any spaces to the left of the tags, add...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT