My Journey to DLithe Bootcamp(.NET Full Stack Week 3(Feb7- Feb12)
Assignment no 15: DLithe_BC_NFS_T_Task15_Bootstrap
08/02/2022
Task Details:
1.Popover
2.Progressbar
3.tab
4.pill
5.scrollspy
6.Javascript alert
Popover
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.
Progressbar
A progress bar can be used to show a user how far along is in a process.Bootstrap provides several types of progress bars.
Tab
Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface
Pill
Basic pills are divided into 2 main section Pills navs and Pills content.
Scrollspy
list group components based on scroll position to indicate which link is currently active in the viewport.
Javascript alert
The alert function method displays an alert box with a message and an OK button.The alert method is used when you want information to come through to the user.
output:
Github:
Assignment 16 : DLithe_BC_NFS_T_Task16_Javascript
08/02/2022
Task Details:
1.Functions with parameters
2. Show the working of any 5 events in js
3. Use of innerHTML with any 5 elements
4. Change background image using js
What is javascript?
JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries.
Javascript Function?
A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when “something” invokes it (calls it).
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).The parentheses may include parameter names separated by commas:
(parameter1, parameter2, …)The code to be executed, by the function, is placed inside curly brackets: {}
what is events in javascript?
Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them.
The change in the state of an object is known as an Event. In html, there are various events which represents that some activity is performed by the user or by the browser. When javascript code is included in HTML, js react over these events and allow the execution. This process of reacting over the events is called Event Handling. Thus, js handles the HTML events via Event Handlers.
Example , when a user clicks over the browser, add js code, which will execute the task to be performed on the event.
Mouse events:
onclick : When mouse click on an element
onmouseover: When the cursor of the mouse comes over the element
onmouseout : When the cursor of the mouse leaves an element
onmousedown : When the mouse button is pressed over the element
onmouseup : When the mouse button is released over the element
onmousemove : When the mouse movement takes place
What is innerHTML?
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
Return the innerHTML property:
HTMLElementObject.innerHTML
Set the innerHTML property:
HTMLElementObject.innerHTML = text
OUTPUT:
Github:
DLithe_BC_NFS_T_Task17_JavascriptExceptionHandling
09/02/2022
Task Details:
- Arrays and Array methods
2. Date Functions
3. Math Functions
4. String Methods
5.Exception Handling
Converting Arrays to Strings
The JavaScript method tostring() converts an array to a string of (comma separated) array values.
Example
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“demo”).innerHTML = fruits.toString();
Date :
The Date object is used to work with dates and times.
Date objects are created with news date().
There are four ways of instantiating a date:
new Date();
new Date(milliseconds);
new Date(dateString);
new Date(year, month, day, hours, minutes, seconds, milliseconds);
Math Functions:
The Math object allows you to perform mathematical tasks.
Math is not a constructor. All properties/methods of Math can be called by using Math as an object, without creating it:
Example
let x = Math.PI;
let y = Math.sqrt(16);
String Methods:
Primitive values, like “John Doe”, cannot have properties or methods (because they are not objects).
But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.
Throw, and Try…Catch…Finally
The try statement defines a code block to run (to try).
The catch statement defines a code block to handle any error.
The finally statement defines a code block to run regardless of the result.
The throw statement defines a custom error.
code output:
Outputscreens:
Github.com:
Assignment 19 : DLithe_BC_NFS_T_Task19_Javascript
10/02/2022
Task Details:
- Inheritance
2. Polymorphism
Inheritance : To create a class inheritance, use the extends keyword.A class created with a class inheritance inherits all the methods from another class:
The super() method refers to the parent class.
By calling the super() method in the constructor method, we call the parent's constructor method and gets access to the parent's properties and methods.
Polymorphism:
The polymorphism is a core concept of an object-oriented paradigm that provides a way to perform a single action in different forms. It provides an ability to call the same method on different JavaScript objects. As JavaScript is not a type-safe language, we can pass any type of data members with the methods.
Output:
Github:
Assignment 20 : DLithe_BC_NFS_T_Task20_Javascript
11/02/2022
Task details:
- JS ABSTRACT CLASSES
- 2. JS ENCAPSULATION
What is Abstract Classes in javascript?
- Abstract classes can be defined as classes that cannot be instantiated i.e. whose object reference cannot be created and contains within it, one or more abstract methods.
- An abstract method is a method that can only be declared but has no implementation to it. Abstract classes need to be inherited and require subclasses to provide implementations for the method declared in the abstract class.
- As in Java, we have the abstract keyword to make a class an abstract class, there are no such reserve keywords in JavaScript to declare a class an abstract class.
- In the below example we will code a few lines in JavaScript to check whether we can create an abstract class and see whether we can satisfy its properties or not.
Example of Abstract class:
What is Encapsulation in Javascript?
JavaScript is a sturdy object-oriented scripting language, which is capable of building complex applications on both the client and the server. However, the higher the complexity in the implementation, the better maintainable and flexible code is needed to tackle the situation. Encapsulation, one of the principles of object oriented programming is the key to achieve such goals.
By definition Encapsulation in JavaScript is a process of binding the data with the functions which act upon the data. Encapsulation allows us to control and validate the data. In JavaScript, variables resemble data.
Encapsulation means information hiding i.e. the idea that the internal entities of an object should not be directly bare as public entities. This will help restrict the unauthorized use of the variables. Instead, if the callers want to achieve a defined result it should use the public method or public entities inside the object to access the private variables of the object.
Example of Encapsulation
Output:
Github: