SWARNANDHRA

COLLEGE OF ENGINEERING AND TECHNOLOGY

SETHARAMPURAM, NARASAPUR, W.G. (DT.)-534280.

Department of Information Technology

Subject: Full Stack Development (20IT6J01)
Course beyond Syllabus:
HTML Canvas Tag
The HTML canvas element provides HTML a bitmapped surface to work with. It is used to
draw graphics on the web page.
The HTML 5 <canvas> tag is used to draw graphics using scripting language like JavaScript.
The <canvas> element is only a container for graphics, you must need a scripting language to
draw the graphics. The <canvas> element allows for dynamic and scriptable rendering of 2D
shapes and bitmap images.
It is a low level, procedural model that updates a bitmap and does not have a built-in scene.
There are several methods in canvas to draw paths, boxes, circles, text and add images.
How to create a HTML canvas?
A canvas is a rectangle like area on an HTML page. It is specified with canvas element. By
default, the <canvas> element has no border and no content, it is like a container.
<canvas id = "mycanvas" width ="200" height ="100"> </canvas>
CSS Transition
The CSS transitions are effects that are added to change the element gradually from one style
to another, without using flash or JavaScript.
You should specify two things to create CSS transition.
The CSS property on which you want to add an effect.
The time duration of the effect.
Let's take an example which defines transition effect on width property and duration of 3
seconds.
CSS Multiple Transition Effect
It is used to add transition effect for more than one CSS property. If you want to add
transition effect on more than one property, separate those properties with a comma.
Let's take an example. Here, the transition effects on width, height and transformation.
What is three-tier architecture?
Three-tier architecture is a well-established software application architecture that organizes
applications into three logical and physical computing tiers: the presentation tier, or user
interface; the application tier, where data is processed; and the data tier, where the data
associated with the application is stored and managed.
The chief benefit of three-tier architecture is that because each tier runs on its own
infrastructure, each tier can be developed simultaneously by a separate development team,
and can be updated or scaled as needed without impacting the other tiers.
For decades three-tier architecture was the prevailing architecture for client-server
applications. Today, most three-tier applications are targets for modernization, using cloud-
native technologies such as containers and microservices, and for migration to the cloud.
ngRoute
AngularJS ngRoute module provides routing, deep linking services and directives for angular
applications. We have to download [Link] script that contains the ngRoute module
from AngularJS official website to use the routing feature.
$routeProvider
$routeProvider is used to configure the routes. We use the ngRoute config() to configure the
$routeProvider. The config() takes a function which takes the $routeProvider as parameter
and the routing configuration goes inside the function. $routeProvider has a simple API,
accepting either the when() or otherwise() method.
AngularJS Routing Syntax
The following syntax is used to configure the routes in AngularJS.
when() method takes a pathand a route as parameters. path is a part of the URL after the #
symbol. route contains two properties - templateUrl and controller. templateUrl property
defines which HTML template AngularJS should load and display inside the div with
the ngView directive. controller property defines which controllers should be used with the
HTML template. When the application is loaded, path is matched against the part of the URL
after the # symbol. If no route paths matches the given URL the browser will be redirected to
the path specified in the otherwise() function.
React JSX
As we have already seen that, all of the React components have a render function. The
render function specifies the HTML output of a React component. JSX(JavaScript
Extension), is a React extension which allows writing JavaScript code that looks like HTML.
In other words, JSX is an HTML-like syntax used by React that extends ECMAScript so
that HTML-like syntax can co-exist with JavaScript/React code. The syntax is used
by preprocessors (i.e., transpilers like babel) to transform HTML-like syntax into standard
JavaScript objects that a JavaScript engine will parse.
JSX provides you to write HTML/XML-like structures (e.g., DOM-like tree structures) in the
same file where you write JavaScript code, then preprocessor will transform these
expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name,
attributes, and children.
Why use JSX?
It is faster than regular JavaScript because it performs optimization while translating the code
to JavaScript.
Instead of separating technologies by putting markup and logic in separate files, React uses
components that contain both. We will learn components in a further section.
It is type-safe, and most of the errors can be found at compilation time.
It makes easier to create templates.
Nested Elements in JSX
To use more than one element, you need to wrap it with one container element. Here, we
use div as a container element which has three nested elements inside it.
[Link]
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>JavaTpoint</h1>
<h2>Training Institutes</h2>
<p>This website contains the best CS tutorials.</p>
</div>
);
 }
}
export default App;
Output:

JSX Attributes
JSX use attributes with the HTML elements same as regular HTML. JSX
uses camelcase naming convention for attributes rather than standard naming convention of
HTML such as a class in HTML becomes className in JSX because the class is the reserved
keyword in JavaScript. We can also use our own custom attributes in JSX. For custom
attributes, we need to use data- prefix. In the below example, we have used a custom
attribute data-demoAttribute as an attribute for the <p> tag.
Example
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>JavaTpoint</h1>
<h2>Training Institutes</h2>
<p data-demoAttribute = "demo">This website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
In JSX, we can specify attribute values in two ways:
1. As String Literals: We can specify the values of attributes in double quotes:
var element = <h2 className = "firstAttribute">Hello JavaTpoint</h2>;
Example
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >JavaTpoint</h1>
<p data-demoAttribute = "demo">This website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
Output:
JavaTpoint
This website contains the best CS tutorials.
2. As Expressions: We can specify the values of attributes as expressions using curly braces
{}:
var element = <h2 className = {varName}>Hello JavaTpoint</h2>;
Example
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >{25+20}</h1>
</div>
);
}
}
export default App;
Output:
45