jQuery and Visual Studio 2022
Hello everyone welcome to week 4's Bootcamp. The week day started without Arun sir. But Pallavi mam started jQuery. And after that they given some assignments.
Date: 14–02–2022
Assignment No. 21: DLithe_BC_NFS_T_Task21_jQuery
The task is to implement the webpages as per the below requirements
1. Selectors
2. Effects(Hide, Show, Toggle, Fade, Slide, Chaining, Callback function)
3. Animation( animate())
jQuery Selectors
jQuery selectors are one of the most important parts of the jQuery library.
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to “find” (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector
The jQuery element selector selects elements based on the element name.
The element selector is used to select elements by their name. It’s based on the CSS element selector, and in addition, it has some own custom selectors.
Example:
$(document).ready(function () {
$("p").click(function () {
$("p").hide();
});
});Results:
The ID Selector
The jQuery ID selector selects elements based on their id attribute.
The ID selector is used to select elements by their id attribute. It’s based on the CSS ID selector, and in addition, it has some own custom selectors.
Example:
$(document).ready(function () {
$("#button2").click(function () {
$("#id_sel").hide();
});
});Results:
Submit
The Class Selector
The jQuery class selector selects elements based on their class attribute.
The class selector is used to select elements by their class attribute. It’s based on the CSS class selector, and in addition, it has some own custom selectors.
Example:
$(document).ready(function () {
$("button").click(function () {
$(".class_sel").hide();
});
});Effects — hide() and Show()
The hide() method hides the selected elements.
The show() method displays the selected elements.
Syntax:
$(selector).hide(speed,easing,callback)Example:
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});jQuery — Toggle
The toggle() method toggles the visibility of the selected elements.
Syntax:
$(selector).toggle(speed,easing,callback)Example:
$(document).ready(function () {
$("#btn3").click(function () {
$("#toggle_img").toggle();
});
});jQuery — Fade In
The fadeIn() method makes the selected elements fade in.
Syntax:
$(selector).fadeIn(speed,easing,callback)Example:
$(document).ready(function () {
$("#btn4").click(function () {
$("#fade_img").fadeOut("slow");
});
$("#btn5").click(function () {
$("#fade_img").fadeIn("fast");
});
});jQuery — Slide
The slideDown() method makes the selected elements slide down.
Syntax:
$(selector).slideDown(speed,easing,callback)Example:
$(document).ready(function () {
$("#btn6").click(function () {
$("#slide_img").slideUp("slow");
});
$("#btn7").click(function () {
$("#slide_img").slideDown("fast");
});
});jQuery — Chaining
The chaining method is used to execute multiple jQuery methods on the same element.
Syntax:
$(selector).method1().method2().method3()Example:
$(document).ready(function () {
$("#btn8").click(function () {
$("#chaining_img").hide("slow").show("slow").hide("slow").show("slow");
});
});jQuery — Callback
The callback method is used to execute a function after a specified delay.
Syntax:
$(selector).delay(speed,callback)Example:
$(document).ready(function () {
$("#btn9").click(function () {
$("#callback_img").hide("slow").show("slow").delay(1000).hide("slow").show("slow");
});
});jQuery Animation
The animate() method performs a custom animation of a set of CSS properties.
This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.
Only numeric values can be animated (like “margin:30px”). String values cannot be animated (like “background-color:red”), except for the strings “show”, “hide” and “toggle”. These values allow hiding and showing the animated element.
Example:
$(document).ready(function () {
$("#btn").click(function () {
$("#div1").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});Source code:
Date: 15–02–2022
Assignment No. 22: DLithe_BC_NFS_T_Task22_jQuery
The task given is to implement webpages as per the below requirements.
1. Animations
2. jQuery Methods
3. Accordion and Autocomplete
jQuery Animation
The animate() method performs a custom animation of a set of CSS properties.
This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.
Only numeric values can be animated (like “margin:30px”). String values cannot be animated (like “background-color:red”), except for the strings “show”, “hide” and “toggle”. These values allow hiding and showing the animated element.
Example:
$(document).ready(function () {
$("#btn").click(function () {
$("#div1").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});jQuery — Get text()
text() — Sets or returns the text content of selected elements
Example 1:
$(document).ready(function () {
$("#btn").click(function () {
alert($("#p1").text());
});
});Results:
Change Text
Text Before click: Good Morning.
jQuery — Get html()
html() — Sets or returns the HTML content of selected elements
Example 2:
$(document).ready(function () {
$("#btn2").click(function () {
alert($("#p3").html());
});
});Results:
html()
jQuery — Get val()
val() — Sets or returns the value of selected elements
Example 3:
$(document).ready(function () {
$("#btn3").click(function () {
alert($("#ip1").val());
});
});Results:
Enter Name: value()
jQuery — Get attr()
attr() — Sets or returns the value of attributes of selected elements
Example 4:
$(document).ready(function () {
$("#btn4").click(function () {
alert($("#p4").attr("class"));
});
});Results:
charanhu.github.io
attr()
jquery — Set text()
text() — Sets or returns the text content of selected elements
Example 5:
$(document).ready(function () {
$("#btn15").click(function () {
$("#p15").text("Hello World");
});
});Results:
Change Text
Text Before click: Good Morning.
jQuery — Set html()
html() — Sets or returns the HTML content of selected elements
Example 6:
$(document).ready(function () {
$("#btn16").click(function () {
$("#p16").html("Text After click: Good Morning.");
});
});Results:
Make HTML as Bold
Text Before click: Good Morning.
jQuery — Set val()
val() — Sets or returns the value of selected elements
Example 7:
$(document).ready(function () {
$("#btn17").click(function () {
$("#ip12").val("Present Value");
});
});Results:
Enter Name:
value()
jQuery — Set attr()
attr() — Sets or returns the value of attributes of selected elements
Example 8:
$(document).ready(function () {
$("#btn18").click(function () {
$("#id_a_2").attr({
"href": "https://charanhu.medium.com/",
"title": "charanhu.medium.com"
}).text("charanhu.medium.com");
});
});Results:
charanhu.github.io
attr()
jQuery — append()
append() — Inserts content at the end of the selected elements
Example 9:
$(document).ready(function () {
$("#btn19").click(function () {
$("#p19").append(" After paragraph");
});
});Results:
append()
Before paragraph.
jQuery — prepend()
prepend() — Inserts content at the beginning of the selected elements
Example 10:
$(document).ready(function () {
$("#btn20").click(function () {
$("#p20").prepend("Before paragraph");
});
});Results:
prepend()
After paragraph.
jQuery — before()
before() — Inserts content before the selected elements
Example 11:
$(document).ready(function () {
$("#btn21").click(function () {
$("#p21").before("Before paragraph");
});
});Results:
After paragraph.
before()
jQuery — after()
after() — Inserts content after the selected elements
Example 12:
$(document).ready(function () {
$("#btn22").click(function () {
$("#p22").after("After paragraph");
});
});Results:
Before paragraph.
after()
jQuery — remove()
remove() — Removes the selected elements
Example 13:
$(document).ready(function () {
$("#btn23").click(function () {
$("#p23").remove();
});
});Results:
Before paragraph.
remove()
jQuery — empty()
empty() — Removes all child nodes from the selected elements
Example 14:
$(document).ready(function () {
$("#btn24").click(function () {
$("#p24").empty();
});
});Results:
Before paragraph.
empty()
jQuery — Accordion
Accordion Widget in jQueryUI is a jQuery based expandable and collapsible content holder that is broken into sections and probably looks like tabs. jQueryUI provides accordion() method to achieve this.
Syntax:
$(selector, context).accordion (options);jQuery Autocomplete
Autocomplete is a jQuery plugin that provides a way to suggest matches as you type into an input field.
Syntax:
$(function () {
var autocomp_2 = [
"India", "USA", "UK", "Australia", "Canada", "New Zealand", "Singapore", "Malaysia", "Germany", "France", "Italy", "Japan", "China", "Korea", "Russia", "Brazil"
];
$("#autocomplete_2").autocomplete({
source: autocomp_2,
autoFocus: true,
minLength: 1,
delay: 1,
});
});Source code:
— — — — — — — — — — — — — — — — — — — — — — — —
Date: 16–02–2022
Assignment No. 24: DLithe_BC_NFS_T_Task24_C#
The task is to implement four C# programs in Visual Studio.
1. Get Employee details and print them
2. Perform Arithmetic operations
3. Swap without using third variable
4. Find largest of 3 numbers
1. Program to get Employee Details from user and Display the same.
Output of the above program is:
2. Program to Perform Arithmetic Operations.
Output of the above program is:
3. Program to Swap two numbers without temp variable
The output of the above program is:
4. Program to find the largest of three numbers.
The output of the above program is:
Source code:
— — — — — — — — — — — — — — — — — — — — — — — —
Date: 17–02–2022
Assignment No. 25: DLithe_BC_NFS_T_Task25_C#
The task given is to implement the C# program as per the below requirements
Access Specifiers
— — — — — — — — — — — — — — —
1. Encapsulation (private, public)
2. Inheritance (protected)
3. 2 projects(assemblies) — internal
1. Encapsulation:
Encapsulation is defined as the wrapping up of data under a single unit. It is the mechanism that binds together code and the data it manipulates. In a different way, encapsulation is a protective shield that prevents the data from being accessed by the code outside this shield.
- Technically in encapsulation, the variables or data of a class are hidden from any other class and can be accessed only through any member function of own class in which they are declared.
- As in encapsulation, the data in a class is hidden from other classes, so it is also known as data-hiding.
- Encapsulation can be achieved by: Declaring all the variables in the class as private and using C# Properties in the class to set and get the values of variables.
The sample output of the above program is:
2. Inheritance:
Inheritance is an important pillar of OOP(Object Oriented Programming). It is the mechanism in C# by which one class is allowed to inherit the features(fields and methods) of another class.
Important terminology:
- Super Class: The class whose features are inherited is known as super class(or a base class or a parent class).
- Sub Class: The class that inherits the other class is known as subclass(or a derived class, extended class, or child class). The subclass can add its own fields and methods in addition to the superclass fields and methods.
- Reusability: Inheritance supports the concept of “reusability”, i.e. when we want to create a new class and there is already a class that includes some of the code that we want, we can derive our new class from the existing class. By doing this, we are reusing the fields and methods of the existing class.
The sample output of the above program is:
3. 2 projects(assemblies) — internal
Assemblies form the fundamental units of deployment, version control, reuse, activation scoping, and security permissions for .NET-based applications. An assembly is a collection of types and resources that are built to work together and form a logical unit of functionality. Assemblies take the form of executable (.exe) or dynamic link library (.dll) files, and are the building blocks of .NET applications. They provide the common language runtime with the information it needs to be aware of type implementations.
Assembly is a technique where we can merge the two projects or we can use the properties of one project in another this will help the reducing the coding.
Source Code:
— — — — — — — — — — — — — — — — — — — — — — Date: 18–02–2022
Assignment No. 26: DLithe_BC_NFS_T_Task26_C#
The given task is to implement the C# sharp programs on Visual Studio 2022 as per the below requirements,
1. 1D ARRAY
2. 2D ARRAY
3. JAGGED ARRAY
4. PARAMS ARRAY
5. ARRAY METHODS
1. One Dimensional Array:
Single-dimensional arrays are the simplest form of arrays. These types of arrays are used to store number of items of a predefined type. All items in a single dimension array are stored in a row starting from 0 to the size of array-1.
The sample output of the above program is
2. Two Dimensional Array:
Arrays can have more than one dimension; these arrays-of-arrays are called multidimensional arrays. They are very similar to standard arrays with the exception that they have multiple sets of square brackets after the array identifier.
The sample output of the above program is,
3. JAGGED ARRAY:
Jagged array is a array of arrays such that member arrays can be of different sizes. In other words, the length of each array index can differ. The elements of Jagged Array are reference types and initialized to null by default. Jagged Array can also be mixed with multidimensional arrays. Here, the number of rows will be fixed at the declaration time, but you can vary the number of columns.
The sample output of the above program,
4. PARAMS ARRAY:
Params is an important keyword in C#. It is used as a parameter which can take the variable number of arguments.
Important Point About Params Keyword :
- It is useful when programmer don’t have any prior knowledge about the number of parameters to be used.
- Only one Params keyword is allowed and no additional Params will be allowed in function declaration after a params keyword.
- The length of params will be zero if no arguments will be passed.
The sample output of the above program is,
5. ARRAY METHODS:
— — — — — — — — — — — — — — — — — — — — — — -Date: 19–02–2022
The day started by sharing my hobbies with Arun sir. I shared that I’m from village, So in village we have cows and every morning clean the cows places and providing food to them. And Arun sir shared their experience about when they worked in London.
After that assignments started.
Assignment No. 28: DLithe_BC_NFS_T_Task28_C#Debugging
The task given that Find the errors in the given programs and upload the executable code in Google Classroom.
Program 1:
This has several errors, I corrected it and executed the code. I got output as per the requirements.
The final code of the program is,
Program 2:
The above C# program has several errors, the solved program looks like below.
The solution:
Source code:
Assignment No. 29: DLithe_BC_NFS_T_Task29_C#Debugging
The given task to debug the given program and make it as correct format. The question looks below.
1. What is the type of inheritance
2. Find the errors
3. Complete the missing code
The above program is implemented based on the multilevel Inheritance concept. And the corrected program is below.
The source code:
