Rewrite the FAQs application (attached) using jQuery . Consider how jQuery can h

ID: 3717005 • Letter: R

Question

Rewrite the FAQs application (attached) using jQuery. Consider how jQuery can help you simplify your code in faqs.js.

The FAQ applicatiion's source code is below:

index.html source code:

<!DOCTYPE html>

<head>

</head>

<body>

<h1>JavaScript FAQs</h1>

<h2><a href="#" >What is JavaScript?</a></h2>

<div>

<p>JavaScript is a browser-based programming language

that makes web pages more responsive and saves round trips to the server.

</p>

</div>

<h2><a href="#">What is jQuery?</a></h2>

<div>

<p>jQuery is a library of the JavaScript functions that you're most likely

to need as you develop websites.

</p>

</div>

<h2><a href="#">Why is jQuery becoming so popular?</a></h2>

<div>

<p>Three reasons:</p>

<ul>

<li>All of its functions are cross-browser compatible.</li>

</ul>

</div>

</main>

</body>

</html>

faqs.js source code

"use strict";

var $ = function(id) { return document.getElementById(id); };

// the event handler for the click event of each a element

var toggle = function() {

var link = this; // the clicked a tag

var h2 = link.parentNode; // h2 tag that contains a tag

var div = h2.nextElementSibling; // h2 tag's sibling div tag

// toggle plus and minus image in h2 elements by adding or removing a class

if (h2.hasAttribute("class")) {

// h2.removeAttribute("class");

h2.className = "";

} else {

// h2.setAttribute("class", "minus");

h2.className = "minus";

}

// toggle div visibility by adding or removing a class

if (div.hasAttribute("class")) {

// div.removeAttribute("class");

div.className = "";

} else {

// div.setAttribute("class", "open");

div.className = "open";

}

};

window.onload = function() {

// get the a tags

var faqs = $("faqs");

var linkElements = faqs.getElementsByTagName("a");

// attach event handler for each a tag

for (var i = 0; i < linkElements.length; i++ ) {

linkElements[i].onclick = toggle;

}

// set focus on first <a> tag

linkElements[0].focus();

};

main.css source code:

* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
padding: 15px 25px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
cursor: pointer;
background: url(images/plus.png) no-repeat left center;
}
h2.minus {
background: url(images/minus.png) no-repeat left center;
}
a {
color: black;
text-decoration: none;
}
a:focus, a:hover { color: blue; }

div {
display: none;
}
div.open {
display: block;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .25em;
}
p {
padding-bottom: .25em;
padding-left: 25px;
}

Explanation / Answer

I Rewrite Your FAQ's Application you have to use this below html file instead of your file if you still have some doubt please comment Thanku So Much have a nice day

<!DOCTYPE html>

<head>

</head>

<body>

<h1>JavaScript FAQs</h1>

<h2><a href="#">What is jQuery?</a></h2>

<div>

<p>jQuery is a library of the JavaScript functions that you're most likely

to need as you develop websites.

</p>

</div>

<h2><a href="#">Why is jQuery becoming so popular?</a></h2>

<div>

<p>Three reasons:</p>

<ul>

<li>All of its functions are cross-browser compatible.</li>

</ul>

</div>

<h2><a href="#">Why jQuery is needed?</a></h2>

<li>Used to develop browser compatible web applications
Improve the performance of an application
Very fast and extensible</li>

<li>UI related functions are written in minimal lines of codes</li>

</ul>

</div>

<h2><a href="#">What are the methods used to provide effects?</a></h2>

<li>Show()</li>
<li>Hide()</li>
<li>Toggle()</li>
<li>FadeIn()</li>
<li>FadeOut()</li>

</ul>

</div>

<h2><a href="#">In what scenarios jQuery can be used?</a></h2>

<li>Apply CSS static or dynamic</li>
<li>Calling functions on events</li>
<li>Manipulation purpose</li>
<li> Mainly for Animation effects</li>

</ul>

</div>

<h2><a href="#">What are the features of jQuery, has been used in web applications?</a></h2>

<div>

<ul>

<li>jQuery uses features like Sliding, File uploading and accordian in web applications.</li>
</ul>

</div>

<h2><a href="#">What is the basic step of jquery ?</a></h2>

<li>jQuery code starts its code blocks with a dollar sign ($).</li>

<li>The dollar sign is followed by an open parenthesis..</li>

<li>The parenthesis contains what you tell jQuery to find, such as what elements it should use.</li>
<li>The close parenthesis is followed by any event for the specific object.</li>
<li>You can define what happens with the event specified. The parenthesis following the method/event includes a function that signals what happens when the event occurs.</li>
</ul>

</div>

<h2><a href="#">How Jquey Help You To Simplify Application ?</a></h2>

<div>

<ul>

<li><h3>Keep your code safe with closures</h3><br>Almost every website uses different scripts from different sources. By default, any function or variable created on the page is defined within the global "scope". This could become a serious problem if two scripts were using the same exact variable/function names, especially something common like "success"!</li>

<li><h3>Use 'var' when declaring variables</h3><br>JavaScript only has two different scopes for variables; they can be global or local. Variables declared outside of a function are always global. When a variable is declared inside a function, using the var keyword, it is scoped as a local variable and is inaccessible to other functions and outside code. However, if you neglect to declare a variable with 'var' it becomes global, regardless of where you defined it!

This recommendation is alot like the previous one - while the code may work now, its possible that other scripts could inadvertantly mess around with critical data/variables. I can tell you from experience that this can be a major headache to debug when suddenly things act up, so get in the practice of properly declaring your variables based on the desired scope.</li>

<li><h3> Bind events once the DOM is ready</h3><br>JavaScript is heavily event-driven. Most of the time, you'll want a function to run when a user clicks a button or changes text in a field.Dropping this script directly into a small test page may work. But if you wanted this to run on a larger page which takes longer to load (because of more HTML, images, JS, etc), it may try to bind the event before that button becomes available in the DOM.</li>
<li><h3>Harness event bubbling</h3><br>When I first began serious work with JavaScript, I was unaware of how event bubbling worked. Essentially when certain events occur on an element in the DOM, they will bubble up to parent elements. Look at this codeI remember one project where the old codebase had a table with thousands of rows, and each row had maybe 7 input boxes with hardcoded "onclick" events. When you have code like this, the browser must bind tens of thousands of events. This page took about a minute to fully load, used hundreds of MB of RAM, and usually caused the browser to crash. Our solution was to use jQuery to bind the function once to the table's "click" event. Anytime a user clicked on an input box, the event would bubble up to the TABLE element which could determine which input was clicked and proceed from there. It made the site much faster and reliable.</li>
<li><h3> Use native methods/attributes when possible</h3><br>Wherever possible/feasabile, try to use similar native methods/attributes instead of relying on your JavaScript libary/framework as a crutch. All too often I come across JavaScript code It looks similar, but uses native DOM attributes to grab the value instead of invoking the jQuery object. With modern browsers this optimization won't be noticeable to the end user, but its still a simple tweak that will cut down on overhead. Rule of thumb: if you can use native methods without sacrificing readability/maintainability, then do it. But if you are doing more complex things like AJAX requests or crazy-complex event bubbling, then use your JS library.</li>

</ul>

</div>

</main>

</body>

</html>

Navigate

Rewrite the Course class in Listing 10.6 to implement the comparable and the clo

Rewrite the Factorial C program that I shared in class or your equivalent versio

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Rewrite the FAQs application (attached) using jQuery . Consider how jQuery can h

Question

Explanation / Answer

Related Questions

Navigate