Categories
Angular JavaScript UI

Oracle Angular Interview Questions

Oracle Angular Interview Questions listed here :

what is web worker? how it works ?
HTML 5 APIs ?
explain transform vs transition difference in css ?
what new features in HTML5 ?
explain Observables vs Promises differences ?
Pseudo classes and Pseudo elements differences explain ?
what is the significance of DELETE keyword in JS ?
explain closure property ?
what are child selectors ? explain with example

what is digest cycle explain ?
what are the differences between Emit vs Broadcast ?
How to prototype inheritance ?
explain == vs === difference ?
explain closure property ?
Apply and Call method diff in Angular ?

Categories
Angular JavaScript UI

SAP UI Architect Interview Questions – Angular

SAP UI Architect Interview Questions – Angular

1) XSS attack types?
XSS is a web-based attack performed on vulnerable web applications.
In XSS attacks, the victim is the user and not the application.
In XSS attacks, malicious content is delivered to users using JavaScript.

An XSS vulnerability arises when web applications take data from users and dynamically include it in web pages without first properly validating the data. XSS vulnerabilities allow an attacker to execute arbitrary commands and display arbitrary content in a victim user’s browser. A successful XSS attack leads to an attacker controlling the victim’s browser or account on the vulnerable web application.

There are 3 types of XSS ( 2 server side and 1 client side)

Stored XSS (Persistent XSS)
An attacker uses Stored XSS to inject malicious content, most often JavaScript code, into the target application. If there is no input validation, this malicious code is permanently stored (persisted) by the target application, like in a database.
When a victim opens the affected web page in a browser, the XSS attack payload is served to the victim’s browser as part of the HTML code. This means that victims will end up executing the malicious script once the page is viewed in their browser.

Reflected XSS (Non-persistent XSS)
the attacker’s payload has to be a part of the request that is sent to the web server. It is then reflected back in such a way that the HTTP response includes the payload from the HTTP request. Attackers use malicious links, phishing emails, and other social engineering techniques to lure the victim into making a request to the server. The reflected XSS payload is then executed in the user’s browser.

DOM-based XSS
DOM-based XSS is an advanced XSS attack. It is possible if the web application’s client-side scripts write data provided by the user to the Document Object Model (DOM). The data is subsequently read from the DOM by the web application and outputted to the browser.A DOM-based XSS attack is often a client-side attack and the malicious payload is never sent to the server. This makes it even more difficult to detect for Web Application Firewalls (WAFs) and security engineers who analyze server logs because they will never even see the attack.

2) CORS , how to manage? How to secure the requests? explain Proxy concept
A website from one origin cannot access resources from a foreign origin, and to make that possible, CORS comes into the picture. In short, CORS is standard of sharing cross-origin resources. This allows restricted resources on a web page to be requested from another domain.

A proxy, in general, is a server or a service which can introduce additional layers in our communication to obfuscate or modify content, based on the configuration. In the context of web development, our primary goal to use a proxy is to avoid CORS (Cross-Origin Resource Sharing) “issues” which occur because the browsers enforce Same-Origin Policy to protect the users from XSS among several other types of attacks.

3) What is Virtual polymorphism ?
Static polymorphism is polymorphism that occurs at compile time, and dynamic polymorphism is polymorphism that occurs at runtime (during application execution).
Object-oriented programming languages, allows you to implement multiple methods within the same class that use the same name but a different set of parameters. That is called method overloading and represents a static form of polymorphism.

Within an inheritance hierarchy, a subclass can override a method of its superclass. That enables the developer of the subclass to customize or completely replace the behavior of that method.
It also creates a form of polymorphism. Both methods, implemented by the super- and subclass, share the same name and parameters but provide different functionality.

4) Sql query for each products total price sold in a quarter ?
Here is the simple queries to get total price of each product sold in a quarter

select ProductID, count(*) x ProductPrice as TotalPriceSales from Orders where DATE BETWEEN '01/01/2019 00:00:00' and '03/30/2019 11:59:59'  group by ProductID
select ProductID, sum(ProductPrice) as TotalPriceSales from Orders where DATE BETWEEN '01/01/2019 00:00:00' and '03/30/2019 11:59:59'  group by ProductID

5) Factorial number function use any previous cached number data if exist ?

Memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. Memoizing in simple terms means memorizing or storing in memory. A memoized function is usually faster because if the function is called subsequently with the previous value(s), then instead of executing the function, we would be fetching the result from the cache. So in this case we can use Memoization technic as that return values are the same for same inputs every time

let cache = [1];
function factMemoize(key) {
if (!cache[key]) {
cache[key] = key * factMemoize(key – 1)
} else { // just to demo cache:
console.log(“cache hit:”, key)
}
return cache[key]
}

// only hits cache at the end
console.log(“6! = “, factMemoize(6))

// second call benefits from cache:
console.log(“8! = “, factMemoize(8))

6) Types of protocols & requests which can be sent through browser ?

HTTP, HTTPS, FILE, and FTP protocols based requests can be sent through browser.

HTTP defines a set of request methods to indicate the desired action to be performed for a given resource.
Following HTTP requests are supported by browser :

GET
The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

HEAD
The HEAD method asks for a response identical to that of a GET request, but without the response body.

POST
The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.

PUT
The PUT method replaces all current representations of the target resource with the request payload.

DELETE
The DELETE method deletes the specified resource.

CONNECT
The CONNECT method establishes a tunnel to the server identified by the target resource.

OPTIONS
The OPTIONS method is used to describe the communication options for the target resource.

TRACE
The TRACE method performs a message loop-back test along the path to the target resource.

PATCH
The PATCH method is used to apply partial modifications to a resource.

7) What is promise? Advantages?
JavaScript promises let your async call return a value like synchronous function, that value is an object that promises success or failure value.
ex:
get(“/someURL”)
.then(“some processing”)
.catch(e => console.log(“Error 1”))

Advantages :
Better error handling
Reduced coupling
Improved readability
Better definition of control flow of asynchronous logic

The promise constructor takes one argument, a callback with two parameters, resolve and reject. Do something within the callback, perhaps async, then call resolve if everything worked, otherwise call reject.

8) what is Multi tenancy?
Multi-tenancy is an architecture in which a single instance of a software application serves multiple customers. Each customer is called a tenant. Tenants may be given the ability to customize some parts of the application, such as color of the user interface (UI) or business rules, but they cannot customize the application’s code.

9) how do you improve the Performance of webpage?
there are multiple ways to improve the performance of webpage ,

Reduce / Optimize image size
Reduce the number of HTTP requests
Load JavaScript asynchronously
Clean up the HTML/JS/CSS Document
Minify CSS, JS and HTML
Enable Prefetching like Link Prefetching , DNS Prefetching , Prerendering etc..
Increase Speed With a CDN and Caching
Enable compression / Implement Gzip Compression
Lazy Load of content/images
Combine the files ex: CSS sprites

10) Request/response taking too much time? How to keep alive the request ?
HTTP persistent connection, also called HTTP keep-alive, or HTTP connection reuse, is the idea of using a single TCP connection to send and receive multiple HTTP requests/responses, as opposed to opening a new connection for every single request/response pair.
Enabling the keep-alive header allows you to serve all web page resources over a single connection. Keep-alive also reduces both CPU and memory usage on your server.

11) In DB, 2 queries same record update? How to manage? How to intimate the second request to update itself?
Locking performed within the DB server itself to manage contention for table contents by multiple sessions. This type of locking is internal because it is performed entirely by the server and involves no other programs.

Row-Level Locking

MySQL uses row-level locking for InnoDB tables to support simultaneous write access by multiple sessions, making them suitable for multi-user, highly concurrent, and OLTP applications.

Table-Level Locking

MySQL uses table-level locking for MyISAM, MEMORY, and MERGE tables, permitting only one session to update those tables at a time. This locking level makes these storage engines more suitable for read-only, read-mostly, or single-user applications.

Using Transactions – commit queries

Here it is to use a transactional database (so there’s no clashes)

Tentative Allocation
To do a tentative allocation of the data to you that expires after some length of time (e.g., 10 minutes for kiosks) that gives you enough time to pay. If the (customer-visible) transaction falls through or times out, the data allocation can be released back into the pool.

12) Lot of requests , how to manage?
There are three main strategies for handling the load:

The site can invest in a single huge machine with lots of processing power, memory, disk space and redundancy.
The site can distribute the load across a number of machines. [like load balancer ]
The site can use some combination of the first two options.

13) Same application, for 2 different companies but for all users, request to come, how to manage?
The incoming requests for pages are spread across all of the machines in one of two ways:

The Domain Name Server (DNS) for the site can distribute the load. DNS is an Internet service that translates domain names into IP addresses. Each time a request is made for the Web server, DNS rotates through the available IP addresses in a circular way to share the load. The individual servers would have common access to the same set of Web pages for the site.

Load balancing switches can distribute the load. All requests for the Web site arrive at a machine that then passes the request to one of the available servers. The switch can find out from the servers which one is least loaded, so all of them are doing an equal amount of work. This is the approach that HowStuffWorks uses with its servers. The load balancer spreads the load among three different Web servers. One of the three can fail with no effect on the site.

14) Bind, apply and call difference in angular ?

The bind() method creates a new function that, when called, has its this keyword set to the provided value.
let helloLeo = greeting.bind(customer1);
helloLeo(‘Hello’);

The call() method calls a function with a given this value and arguments provided individually.
The method Call invokes the function and allows you to pass in arguments one by one using commas.
ex: greeting.call(customer1, ‘Hello’);
The method Apply invokes the function and allows you to pass in arguments as an array.
ex: greeting.apply(customer1, [‘Hello’, ‘How are you?’]);

call() and apply() serve the exact same purpose. The only difference between how they work is that call() expects all parameters to be passed in individually, whereas apply() expects an array of all of our parameters.

The main differences between bind() and call() / apply() is that the call() / apply() method:

  • Accepts additional parameters as well
  • Executes the function it was called upon right away.
  • The call()/ / apply() method does not make a copy of the function it is being called on.

Call and Apply are interchangeable. You can decide whether it’s easier to send in an array or a comma separated list of arguments. Bind is different. It always returns a new function.

15) Globalization or internationalization , how to do in angular?

Internationalization is the process of designing and preparing your app to be usable in different languages. Localization is the process of translating your internationalized app into specific languages for particular locales.

Angular simplifies the following aspects of internationalization:

Displaying dates, number, percentages, and currencies in a local format.
Preparing text in component templates for translation.
Handling plural forms of words.
Handling alternative text.
For localization, you can use the Angular CLI to generate most of the boilerplate necessary to create files for translators, and to publish your app in multiple languages. After you have set up your app to use i18n, the CLI can help you with the following steps:

Extracting localizable text into a file that you can send out to be translated.
Building and serving the app for a given locale, using the translated text.
Creating multiple language versions of your app.

i18n pipes
Angular pipes can help you with internationalization: the DatePipe, CurrencyPipe, DecimalPipe and PercentPipe use locale data to format data based on the LOCALE_ID.

Template translations
The i18n template translation process has four phases:
Mark static text messages in your component templates for translation.
Create a translation file: Use the Angular CLI xi18n command to extract the marked text into an industry-standard translation source file.
Edit the generated translation file: Translate the extracted text into the target language.
Merge the completed translation file into the app. To do this, use the Angular CLI build command to compile the app, choosing a locale-specific configuration, or specifying the following command options.

–i18nFile=path to the translation file
–i18nFormat=format of the translation file
–i18nLocale= locale id
The command replaces the original messages with translated text, and generates a new version of the app in the target language.

You need to build and deploy a separate version of the app for each supported language.

The Angular i18n attribute marks translatable content. Place it on every element tag whose fixed text is to be translated.
ex: <h1 i18n> Hello i18n! </h1>

Pluralization :
Pluralization categories include (depending on the language):

=0 (or any other number)
zero
one
two
few
many
other
After the pluralization category, put the default English text in braces ({}).

ex: Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}

16) how to avoid same button multiple clicks ?
There are multiple ways to handle this

  • disable the button after the first click
  • The standard way to avoid multiple clicks is to save the last clicked time and avoid the other button clicks within time span
  • Detect the double click and just return false
  • Debounce Events :
    With the click event we can call event.preventDefault(); and event.stopPropagation();. These two lines prevent the click event from bubbling up to the parent component. SO using certain span of time we can debounce or delay the event for next click.
Categories
CSS CSS3 HTML HTML5 JavaScript jQuery

HCL – Web / UI Developer – interview questions and answer – HTML5 , CSS3 , JS & jQuery

1) Explain about HTML5 local storage ?
There are two ways to store data in HTML as objects locally :

  1. localStorage – store data  across session acess
  2. sessionStorage – storing data for current session only

Data will be stored in key/value pair format.
example:
localStorage.empid=”420″;
sessionStorage.companyname = “SHARAG INFOTECH”;
2)  explain CSS media queries ?
CSS media queries are used to develop responsive templates for different layout of screen, print, mobile , tablet or any other resolutions
CSS media queries can be added in 3 ways as like CSS style sheet :

  1. Internal stylesheet :  <style type=”text/css”>
    @media only screen and (max-width: 600px){
    /* rules apply to the device resolution is 480px or less  */
    }
    </style>
  2. Imported stylesheet :   @import “tablet.css”   (min-width: 800px) and (max-width: 1200px);
  3. External stylesheet:  <link rel=”stylesheet” type=”text/css” href=”deskto.css” media=”screen and (min-width: 1200px), print and (min-resolution: 300dpi)” />

3) explain css inheritance ?
Inheritance propagates property values from parent elements to their children. The inherited value of a property on an element is the computed value of the property on the element’s parent element. For the root element, which has no parent element, the inherited value is the initial value of the property.
A property can also be explicitly inherited by using the inherit keyword in property.
CSS inheritance example:
class inheritance for an HTML tag :
<div class=”firstClass secondClass thirdClass fourthClass ” > </div >
CSS property inheritance from parent :
p {
color: #000;
}
p a:link {
color: inherit;
}
and using LESS method for inheritance example:
//through variable
@color: #123456;
#emp {
color: @color;
}
div {
color: @color;
}
//through class name calling [MIXINS]
.rounded-corners (@radius: 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#navtable {
.rounded-corners;
}
#maintable {
.rounded-corners(5px);
}
4) what is javascript inheritance ?
In simple terms, inheritance is the concept of one thing gaining the properties or behaviours of something else.
Inherited children inherit their parent’s behaviour To say A inherits from B, is saying that A is a type of B.
In JavaScript You must use a special object called prototype.
function Animal() {}; // This is the Animal *Type*
Animal.prototype.eat = function () {
alert(“All animals can eat!”);
};
function Bird() {}; // Declaring a Bird *Type*
Bird.prototype = new Animal(); // Birds inherit from Animal
Bird.prototype.fly = function() {
alert(“Birds are special, they can fly!”);
};
The effect of this is that any Birds you create (called an instance of Bird) all have the properties of Animals
var aBird = new Bird(); // Create an instance of the Bird Type
aBird.eat(); // It should alert, so the inheritance worked
aBird.fly(); // Important part of inheritance, Bird is also different to Animal
var anAnimal = new Animal(); // Let’s check an instance of Animal now
anAnimal.eat(); // Alerts, no problem here
anAnimal.fly(); // Error will occur, since only Birds have fly() in its prototype
5) explain javascript associative array ?
Associative arrays are where we can associate a key string with a value string
JavaScript objects are also associative arrays.
i.e the property  emp.Name can also be read by calling emp[‘Name’]
We can access each property by entering the name of the property as a string into the array
it refers to accessing the DOM elements of HTML also [as object or associative array]
6) explain JS Namespace ?
Namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace
and also helps to organize blocks of functionality into easily manageable groups that can be uniquely identified.
JavaScript doesn’t  builtin support of namespacing but using objects and closures we can achieve a similar effect.
javascript Namespacing patterns :
1)    Single global variables :
var myApplication =  (function(){
function(){
/*…*/
},
return{
/*…*/
}
})();
2)    Object literal notation :
var myApplication = {
getInfo:function(){ /**/ },
// we can also populate our object literal to support
// further object literal namespaces containing anything
// really:
models : {},
views : {
pages : {}
},
collections : {}
};
3)    Nested namespacing :
var myApp =  myApp || {};
// perform a similar existence check when defining nested
// children
myApp.routers = myApp.routers || {};
myApp.model = myApp.model || {};
myApp.model.special = myApp.model.special || {};
// nested namespaces can be as complex as required
4)    Immediately-invoked Function Expressions :
// an (anonymous) immediately-invoked function expression
(function(){ /*…*/})();
// a named immediately-invoked function expression
(function foobar(){ /*..*/}());
// this is technically a self-executing function which is quite different
function foobar(){ foobar(); }
5)   Namespace injection :
// define a namespace we can use later
var ns = ns || {}, ns2 = ns2 || {};
// the module/namespace creator
var creator = function(val){
var val = val || 0;
this.next = function(){
return val++
};
this.reset = function(){
val = 0;
}
}
creator.call(ns);
// ns.next, ns.reset now exist
creator.call(ns2, 5000);
// ns2 contains the same methods
// but has an overridden value for val
// of 5000
for more details on namespace read http://addyosmani.com/blog/essential-js-namespacing/
7) explain Jquery live and bind methods ?
.bind() attacheds events to elements that exist or match the selector at the time the call is made.
Any elements created afterwards or that match going forward because the class was changed, will not fire the bound event.
$(‘img’).bind(‘click’, function(){…});
.live() works for existing and future matching elements.
Before jQuery 1.4 this was limited to the following events:
click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
$(‘img’).live(‘click’, function(){…});
8) what is bootstrap ?
Bootstrap is an open-source Javascript framework developed by the team at Twitter.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap is Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Bootstrap was also programmed to support both HTML5 and CSS3
Bootstrap is a CSS and Javascript framework that is used within your HTML. Bootstrap provides more advanced functionality to your web site.
More details http://getbootstrap.com
9) type of webservice ?
there are two types of web service….1. SOAP [Simple Object Access Protocol] Webservice and 2. RESTful [REpresentational State Transfer] Webservice.
SOAP is a messaging protocol , REST is a design philosophy , not a protocol.
SOAP:
you define your interface in a .wsdl file, which describes exactly which input parameters are expected and how the return values will look like
there are tools to generate the .wsdl files out of java class hirarchies. JAXB for example
there are also tools to generate java objects/classes as part of eclipse for example (don’t know the name in the moment).
SOAP is very strict. Every request is validatet against the wsdl before processing.
A good but not so easy to start with framework for SOAP WS is Apache CXF
REST (no hands on experience up to now, feel free to correct and improve 😉 ):
a way to access a webserver or web application to retrieve data from or send to it.
it’s only negotiated, how it is accessed.
common is something like this http://server.domain.com/app/type/id=123 to retrieve object of type type with id=123
very intuitive, but no automatic validation of requests.
The main advantages of REST web services are:
Lightweight – not a lot of extra xml markup
Human Readable Results
Easy to build – no toolkits required
SOAP also has some advantages:
Easy to consume – sometimes
Rigid – type checking, adheres to a contract
Development tools