Question

This assignment is to see your knowledge on Ajax-Enabled Rich Internet Applications (RIA) with XML and...

This assignment is to see your knowledge on Ajax-Enabled Rich Internet Applications (RIA) with XML and JSON, jQuery , DOM, and HTML, CSS, and JavaScript In order to successfully write the HTML, CSS, and JavaScript for this , you should have a good grasp of the following: Be creative

1.using the document.getElementByld method to obtain a reference to the DOM object representing the HTML element with the given ID.

2. innerHTML property of an object in the DOM

3.value property of a DOM object representing an HTML input element

4. registering an event handler using an intrinsic event attribute

5. placing your <script> element just before the </body> tag so that all the needed DOM objects have already been created

6.using variables to store values to be used later in the script

7. using the type attribute of an input tag to help validate user entries

8. developing a good algorithm for an event handler before trying to write syntactically correct JS code

9. converting a string to a number using Unary + Operartor (or parseInt or parseFloat if you like verbosity)

10. the kinds of events that occur that can occur and be handled: Click, mouseover, mouseout, focus, blur, change,...

0 0
Add a comment Improve this question Transcribed image text
Answer #1

1. document.getElementByld

<html>
<body>

<p id="demo">Click the button to change the text in this paragraph.</p>

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

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</body>
</html>

2.  innerHTML

<!DOCTYPE html>
<html>
<body>

<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>

</body>
</html>

3. .value property of a DOM

<!DOCTYPE html>
<html>
<body>

Name: <input type="text" id="myText" value="Mickey">

<p>Click the button to change the value of the text field.</p>

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

<script>
function myFunction() {
document.getElementById("myText").value = "Johnny Bravo";
}
</script>

</body>
</html>

4. registering an event handler using an intrinsic event attribute

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

5. placing your <script> element just before the </body> tag so that all the needed DOM objects have already been created

6. using variables to store values to be used later in the script

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x, y, and z are variables.</p>

<p id="demo"></p>

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>

7. using the type attribute of an input tag to help validate user entries

<!DOCTYPE html>
<html>
<body>

<h1>The input value attribute</h1>

<p>The value attribute specifies an initial value for an input field:</p>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

10. 10. the kinds of events that occur that can occur and be handled: Click, mouseover, mouseout, focus, blur, change,...

<!DOCTYPE html>
<html>
<body>

<p>This example uses the addEventListener() method to attach a "mouseover" and "mouseout" event to a h1 element.</p>

<h1 id="demo">Mouse over me</h1>

<script>
document.getElementById("demo").addEventListener("mouseover", mouseOver);
document.getElementById("demo").addEventListener("mouseout", mouseOut);

function mouseOver() {
document.getElementById("demo").style.color = "red";
}

function mouseOut() {
document.getElementById("demo").style.color = "black";
}
</script>

</body>
</html>

Add a comment
Know the answer?
Add Answer to:
This assignment is to see your knowledge on Ajax-Enabled Rich Internet Applications (RIA) with XML and...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

    This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...

  • 5. ///////////////////////////////////////////////// Using javascript Create a paragraph on your page that says “This isn’t even my...

    5. ///////////////////////////////////////////////// Using javascript Create a paragraph on your page that says “This isn’t even my final form!” ( This isn’t even my final form! ). Add a JS mouseover event to that paragraph. When the paragraph has a mouse hovering over it, the text inside should change to “This is my second form!” ( This is my second form! ). Add one more event handler so that when that paragraph is double-clicked, the text will say “THIS is my...

  • Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!'...

    Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!' color:blue; font-family: arial; Clicker Counter: 0 Interface should look something like this, but does not have to be one for one like this picture One of JavaScript's powers is to be able to interact with the DOM directly. You've seen this when using commands such as document.getElementById("idName'). This document allows you to search HTML for certain elements. It turns out that you can also...

  • Create an HTML5 page that contains a form to collect the following data. The text in...

    Create an HTML5 page that contains a form to collect the following data. The text in bold indicates the id value that should be assigned to each html control: Product (drop down list) product – iPad, iPhone 6S, Galaxy 5S, Moto X, and so on Quantity (number) quantity Unit price (number) unit_price Discount (%)(number) discount_rate Date (date)   order_date First Name (text box)   first_name Last Name (text box)   last_name Payment type (drop down list)   payment_type – Visa, Master, Discover, Amex, and...

  • URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

    URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to download the uncompressed latest version of jQuery Copy the jQuery.x.x.x.js file in the folder and specified as source file. Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com. 2. Click Download HTML-Kit 292. After it downloads, launch HKSetup.exe. Choose Full installation (the default) Uncheck Yes, download and install HTML-Kit Tools Trial. 6. Click Next>Finish. Task 3: Creating a Simple jQuery Application Launch HTML-Kit....

  • WEB230 - JavaScript 1 Assignment 6a Use Events and DOM manipulation to create a playable Tic...

    WEB230 - JavaScript 1 Assignment 6a Use Events and DOM manipulation to create a playable Tic Tac Toe game. Do the following using JavaScript. Do not modify the HTML file. When you see this symbol: save and refresh the browser (this should happen automatically if you are using Brackets with Live Preview), then check your code to make sure it is working before you proceed. 1. Create two variables called "playerX" and "playero". Set them to the DOM element with...

  • Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () =>...

    Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () => { console.log("You clicked?"); }); let button = document.querySelector("button"); button.addEventListener("click", () => { console.log("First Button clicked."); }); // How can we modify this so that it will occur when the 2nd button is clicked? // We need to use querySelectorAll which will produce a nodelist/array of all the buttons. Then we can reference which button we want to apply the click event using [] with...

  • Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on...

    Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on the client side before it is submitted to the server. It is done everywhere because it is fast and it gives you a great deal of flexibility in how you handle errors insofar as the GUI is concerned. Attached is an image of some code I wrote (so Blackboard can't mess it up). Some things to notice that will help you with the lab....

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT