What is JavaScript?
JavaScript is a client-side programming language used to create dynamic web pages and animations. It uses just-in-time compilation which means it is read line-by-line, checked for correctness of syntax and executed immediately.
Along with HyperText Markup Language (HTML) and Cascading Style Sheet (CSS), all programmers use JavaScript as an integral part of web development. JavaScript is used to create dynamic web pages. The web pages designed in this language are interactive and user-friendly. JavaScript uses a document object model (DOM) to interact with HTML pages.
HTML tags are used to design web pages and CSS is used to beautify the web pages. The web pages developed using HTML elements and CSS do not respond to the user's action. These web pages are static. JavaScript provides built-in functions that can be used to manipulate the DOM tree corresponding to the web page and thus, making it dynamic. In addition, it can be used to perform input validation at the client's side and so forth. It is a cross-platform language.
Further, it contains various libraries for a wide range of functions. As an example, library Tensor Flow is used for machine learning applications. Some other examples include jQuery, Prototype, Dojo, and so forth.
The JavaScript code for performing the addition of two numbers is given below: -
public class math{
public int Add (int num1, int num2)
{
return num1 + num2;
}
}
JavaScript Libraries and the functionalities offered
What is jQuery?
jQuery is an easy-to-use, lightweight JavaScript library, widely known for its philosophy: “Write less, do more.” The framework is designed to simplify HTML DOM tree traversal and manipulation. It is a free, fast, concise, and open-source library. The jQuery library is cross-browser compatible, which means it can be used on various web browsers.
jQuery not only helps the web developers to add extra functionalities to their websites but also helps the programmers to create a better client-side web page interface. It has an easy-to-understand API. The jQuery library can simplify tasks such as blocking websites, online shopping, and other user-dominated services. The jQuery plugins can be accessed using websites such as jQuery Blog.
The general syntax of a jQuery statement is as follows:
$(selector).action()
Where
- $ represents the jQuery statement.
- (selector) selects the DOM element. It specifies the web page element to which the changes are to be made.
- action() represents the action to be performed on the selected DOM element.
For example,
$(this).hide()
The above code will hide the current HTML element.
jQuery UI
jQuery UI is an additional set of libraries that are built over jQuery. It is used to develop highly interactive website applications and high-traffic web pages. It contains various user interface interactions that can create a highly efficient web page. It has effects, themes and widgets that can make the pages user-friendly and can allow personalization to match the requirement of the client.
Major reason behind using jQuery
jQuery is mostly preferred over other JavaScript libraries because it makes it easier to use JavaScript on a website. Tasks that require multiple lines of JavaScript code can be completed with fewer lines (or even a single line) using jQuery. jQuery handles animations, events, and Asynchronous JavaScript and extensible markup language (Ajax) interactions, more quickly and easily.
For example, consider the following JavaScript code to display the display text in red color when mouse is hovered on the text.
JavaScript Code:
<!DOCTYPE html>
<html>
<head>
<title>Change Color</title>
</head>
<body>
<button id="changeRed">Change Font Color Red</button>
<p>
<span id="output">Move the mouse pointer on the text to change the text color.</span>
</p>
<script>
document.getElementById("changeRed").onclick = function(){
document.getElementById("output").style.color = 'red';
}
</script>
</body>
</html>
The following jQuery code performs the same task but it has fewer lines of code.
jQuery Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("color", "red");
}
});
});
</script>
</head>
<body>
<p>Move the mouse pointer on the text to change the text color.</p>
</body>
</html>
DOM tree
DOM is an interface that represents the XML or HTML documents in a tree-like structure. Each node in the tree is an object resembling a part of the HTML or XML document. Every branch of the DOM tree ends in a node and every node consists of objects. DOM methods allow access to the tree for content manipulation like changing the structure or style of the content. The DOM tree for the above jQuery code is given below.
DOM tree for jQuery code
Since jQuery has inbuilt functions to accomplish event handling, animations, and manipulations, it traverses through the DOM tree quickly when compared to JavaScript.
Other reasons for using jQuery over JavaScript are as follows:
- Functions such as event handling and document transversal are much easier using jQuery, which is extensible.
- From low-level interactions to high-level animation, the jQuery library helps to create powerful dynamic web applications.
- The behavior of web pages can be easily programmed using jQuery library functions.
- The jQuery library enables the programmer to create short and effective programs. jQuery wraps up a lot of common tasks that require many lines of JavaScript code to accomplish which can be invoked by writing a single line of code.
Difference between jQuery and JavaScript
The first and foremost difference between JavaScript and jQuery is that the former is a language and the latter is a library. The jQuery library is written using JavaScript. Other differences between jQuery and JavaScript include:
| jQuery | JavaScript |
| The cross-browser compatibility feature is built-in in jQuery. | Programmers need to write extra code to make JS code cross-browser compatible. |
| jQuery is lightweight since it is a library. | JavaScript is heavier than jQuery since it is a language. |
| jQuery has no existence of its own. It needs JavaScript for execution. | JavaScript has its existence. It does not need any programming language support for execution. |
| jQuery runs animations and several other tasks using only a few lines of code. | JavaScript uses multiple lines of code to execute animations and other event-handling tasks. |
Context and Application
Having a fundamental knowledge of developing a web page can only be achieved by studying the theory of JavaScript, and the library which is used extensively is known as jQuery. This theory can be used by computer science graduates and software developers in courses like:
- Masters in Computer Science
- Bachelors in Computer Science
- Bachelors in Computer Application
- Masters in Computer Application
Practice Problems
1. Which of the following is not used for web development?
- HTML
- CSS
- Structured English
- JavaScript
Answer: Option c
Explanation: Structured English is for pseudo coding. It cannot be used for programs that need compiling.
2. Which of the following is not a programming language?
- jQuery
- Java
- C++
- Python
Answer: Option a
Explanation: jQuery is a library written in JavaScript.
3. Which API is used to manipulate web page elements using JavaScript?
- DOM
- Front-end event handler
- Multi-browser jQuery
- Polyfills server-side file
Answer: Option a
Explanation: Document object model API is used to modify the structure and content of an HTML document.
4. What is the use of jQuery UI?
- Faster browsing
- Increase the interactive features of an interface
- Decorating the webpage with tree-structure
- Multiple outputs in the interface
Answer: Option b
Explanation: jQuery can be used to make the web pages more interactive.
5. What does HTML stand for?
- HyperText Makeup Language
- High-Test Markup Language
- HyperText Markup Language
- High-level Language
Answer: Option c
Explanation: HTML stands for Hypertext markup language
Common Mistakes
JavaScript and jQuery have their own syntax rules. While writing JavaScript or jQuery programs, the programmer needs to follow the rules to avoid errors during the execution of the program.
Related Topics
- Object-oriented programming
- Programming libraries
- HTML
- CSS
- API
Want more help with your computer science homework?
*Response times may vary by subject and question complexity. Median response time is 34 minutes for paid subscribers and may be longer for promotional offers.
Search. Solve. Succeed!
Study smarter access to millions of step-by step textbook solutions, our Q&A library, and AI powered Math Solver. Plus, you get 30 questions to ask an expert each month.
jQuery and JavaScript Homework Questions from Fellow Students
Browse our recently answered jQuery and JavaScript homework questions.
Search. Solve. Succeed!
Study smarter access to millions of step-by step textbook solutions, our Q&A library, and AI powered Math Solver. Plus, you get 30 questions to ask an expert each month.