Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file...
Task 3: Creating a Simple jQuery Application
1. Launch HTML-Kit.
2. Create a new HTML file and save it as nnLab8.htm.
3. Add the following HTML to the file:
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World - jQuery Style</title>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<a href="#" id="link">Click Me!</a><br />
<span id="greeting"></span>
</body>
</html>
4. Add the following<script> element to the<head> section. NOTE: Use the jQuery version
number that matches the file name of the file you downloaded in Step 1.
<script type="text/javascript" src="jquery-x.x.x.js"></script>
5. Add the following <script> element beneath the one you added in Step 4:
<script type="text/javascript">
$(document).ready(function() {
/*write 'Hello World! to the first div */
$('#first').html('<h1> Hello World!</h1>');
});
</script>
6. Preview in the browser window to verify that “Hello World”!” displays. TIP: You might need to enable scripts to run on your browser.
7. Take a screenshot and paste it on your worksheet.
8. Add the following function beneath the selector you wrote in step 5:
/*a clickable 'Hello World!' example */
$('#link').click(function(){
$('#greeting').html('<h1>Hello Again!</h1>');
});
9. Test to verify that “Hello Again” displays when you click the link.
10. Take a screenshot and paste it on your worksheet.
(SHOW SCREEN SHOTS OF EVERY STEP
Homework Answers
Here is code:
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World - jQuery Style</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"
integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
/*write 'Hello World! to the first div */
$('#first').html('<h1> Hello World!</h1>');
$('#link').click(function () {
$('#greeting').html('<h1>Hello Again!</h1>');
});
});
</script>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<a href="#" id="link">Click Me!</a><br />
<span id="greeting"></span>
</body>
</html>
Output 1:
Output 2:
Add Answer to:
Task 3: Creating a Simple jQuery
Application
1. Launch HTML-Kit.
2. Create a new HTML file...
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....
I'm having trouble to link the .js file to the html so changes for the html...
I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style> .hidden {display: none;} .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...
Hello Ive been tryting to add the CDN of jquery to my html code and I...
Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...
In this problem, you will create a selectable “To Do” List. To add a task to...
In this problem, you will create a selectable “To Do” List. To
add a task to this list, the user clicks the Add Task button and
enters a description of the task. To delete a task from the list,
the user selects the task and then clicks the Delete Task
button.
Open the HTML and JavaScript files provided as start-up files
(index.html from within todo_list_Q.zip file). Then,
review the HTML in this file. Note, within the div element, there
is...
Using form events functions to answer this question. Use the attached form html file which contains...
Using form events functions to answer this question. Use the attached form html file which contains 2 html radio buttons. When the first choice is chosen, display the text ”First” under the first choice. When the second choice is chosen, display the text ”Second” under the second choice. Instead of using JavaScript complete this question using JQuery <!DOCTYPE html> <html> <head> <title>midterm exam</title> <link rel="stylesheet" href="css/q1.css" /> </head> <body> <div id = "page"> <form> ...
Hello! I am to create a .js file that allows the paragraph on the bottom of...
Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...
for Javascript, JQuery When the page is first opened a user will see the name field...
for Javascript, JQuery
When the page is first opened a user will see the name field and the
three vacation images to the left of the page. The page
should behave according to the following rules.
1. When a user's mouse pointer goes over any image, that image's
border will change to be "outset 10px" and when the mouse pointer
leaves that image it's border will change to "none".
2. When the user clicks a "Vacation" image on the left,...
In an external JavaScript file, you need to create two global variables for the Quarter name...
In an external JavaScript file, you need to create two global variables for the Quarter name array and the Sales amount array. Create an anonymous function and connect it to the onclick event of the Add to Array button that adds the values from the fields (Quarter and Sales) to the respective arrays. Create an anonymous function and connect it to the onclick event of Display Sales button displays the contents of the arrays, displays the sum of all the...
Create a new HTML file Include a folder and include in this folder the current version...
Create a new HTML file Include a folder and include in this folder the current version of jquery.js In the HTML file, create a link to the jquery.js file In the <body> section o Include 2 <section> tags each with a unique ID In the <head> section include a <script> section and add jquery code to do the following... Include the document.ready statement In the document.ready function (when document loads) Include your name in the 1st<section> Change the font-size to...
//--------// // Events // //--------// console.log("Events"); // 1. Change the link (the <a> tag) in the...
//--------// // Events // //--------// console.log("Events"); // 1. Change the link (the <a> tag) in the HTML body below such that a hello // message is displayed on a click event. //--------------// // Input Fields // //--------------// console.log("Input Fields"); // 1. Change the background color to red for the input text field (the <input> // tag) in the HTML body when obtaining the focus and change it back to // white when the focus is lost. // 2. Read the...
In this problem, you will create a selectable “To Do” List. To
add a task to this list, the user clicks the Add Task button and
enters a description of the task. To delete a task from the list,
the user selects the task and then clicks the Delete Task
button.
Open the HTML and JavaScript files provided as start-up files
(index.html from within todo_list_Q.zip file). Then,
review the HTML in this file. Note, within the div element, there
is...
Most questions answered within 3 hours.
-
Consider a group of bacteria that you are trying to classify as
either the same species...
asked 14 minutes ago -
You have the following rates of return for a risky portfolio for
several recent years. Assume...
asked 21 minutes ago -
an aqueous solution of Na2CrO4 at 25
degrees C is added to an aqueous solution containing...
asked 22 minutes ago -
A rotating space station is said to create “artificial
gravity”—a loosely-defined term used for an acceleration...
asked 40 minutes ago -
The following MIPS branching pseudo instruction
bge $s0, $s1, Label # branch to Label if $s0...
asked 43 minutes ago -
In cation exchange chromatography, the beads are covalently
linked to a ________chemical and a ______________ ion...
asked 30 minutes ago -
A block in the shape of a rectangular solid has a
cross-sectional area of 4.58 cm2...
asked 44 minutes ago -
Which of the following countries has abolished tied aid?
Select one:
a. France
b. The United...
asked 41 minutes ago -
ASAP using c++ vectors Create a vector of characters and ask the
user to enter their...
asked 59 minutes ago -
On December 31, 2018, Wellstone Company reported net income of
$76,000 and sales of $215,000. The...
asked 58 minutes ago -
Question #1
Consider the following potential investment, which has the same
risk as a firm’s other...
asked 1 hour ago -
Globalization = Standardization + Localization: What does this
equation really mean about optimizing a firm’s offerings...
asked 58 minutes ago