JavaScript classes, introduced in ECMAScript 2015 or ES 6, Classes are in fact “special functions”. There are two ways to define a class in JavaScript using classkeyword:-
Class Declaration
Class Expression
Class Declaration
Constructor
The constructor method is a special method for creating and initializing an object created within a class. There can be only one special method with the name “constructor” in a class.
Default Constructor
If you do not specify a constructor method a default constructor is used.
Parameterized Constructor
Class Expression
Class expressions can be named or unnamed.
Class Hoisting
Class Declarations and Class Expression are not hoisted. You first need to declare your class and then access it.
Inheritance
Class Inheritance
The extends keyword is used in class declarations or class expressions to create a class that is a child of another class. The extended keyword can be used to subclass custom classes as well as built-in objects.
Class Inheritance
Inherit Built-in Object
– Date – String – Array
class myDate extends Date { }
Super
Super ( ) is used to initialize parent class constructor. If there is a constructor present in a subclass, it needs to first call super() before using “this”. A constructor can use the super keyword to call the constructor of a parent class.
Method Overriding
Same function name with different implementation.
Parent ———————> show ( ) {return “Super Class”; } Child ———————–> show ( ) {return “Sub Class”; } show ( ) {return “Super Class”; }
Static Method
The static keyword is used to define a static method for a class. Static methods are called without creating object and cannot be called through a class instance (object). Static methods are often used to create utility functions for an application.
Using var or let or const you can create private properties and methods.
Ex: – this.price var price let price
Prototype
Every object has an internal prototype that gives it its structure. This internal prototype is a reference to an object describing the code and data that all objects of that same type will have in common.
Prototype Object
Every object is associated with another Object in JavaScript
Prototype Object
Every object is associated with another object in JavaScript.
Note – Prototype Object of Object.prototype is null
Prototype Object
Every object is associated with another object in JavaScript.
Note – Prototype Object of Object.prototype is null
Prototype Object
Every object is associated with another object in JavaScript.
Note – Prototype Object of Array.prototype is Object.prototype and Prototype Object of Object.prototype is null
The restriction to the content such as disabling script or plugins is given by the internal frame.
An iframe with sandbox value as empty will have the following restrictions: –
Forms can not be submitted
Framed document cannot navigate its top level parent
Scripts are disabled
Stops frame content from using plugins
New windows(browsing contexts) cannot be created by the framed document
Framed content will be treated from an unique origin. Hence it will not have access to data stored in earlier cookies
Disable APIs
Automatically triggered features like auto playing videos etc are blocked
<iframe sandbox> </iframe>
Values
Value
Description
(no value)
Applies all restrictions
allow-forms
Re-enables form submission
allow-pointer-lock
Re-enables APIs
allow-popups
Re-enables popups
allow-same-origin
Allows the iframe content to be treated as being from the same origin
allow-scripts
Re-enables scripts
allow-top-navigation
Allows the iframe content to navigate its top-level browsing context
allow-same-origin
A web page can have access to a second web page only if both have the same origin.
Uniform Resource Identifier (URI), Port Number, and HostName
Same-origin
https://www.google.com/p/contact-us.html
https://www.google.com/p/about-us.html
Different Port So Not in the Same Origin
https://www.google.com:82/p/contact-us.html
https://www.google.com/p/about-us.html
Different Host So Not in the Same Origin
https://en.www.google.com/p/contact-us.html
https://www.google.com/p/contact-us.html
allow-top-navigation
Top navigation allows us to open the linked document in the full body of the window or the top browsing context.
Attribute
Value
Description
target
_blank _parent _top framename _self
Opens the linked document in a new window or tab Opens the linked document in the parent frame Opens the linked document in the full body of the window Opens the linked document in a named frame Opens the linked document in the same frame as it was clicked (this is the default)
A hyperlink is a link between web pages and it is used to connect one web page to another.
Ex:- <a href=”https://www.google.com”>Visit Google </a>
Anchor Tag Attributes
Attribute
Value
Description
href
URL reference
Specifies the URL as a destination web page or a different section of the web page
download
filename
Specifies that the target will be downloaded when a user clicks on the hyperlink
media
media_query
Specifies what media/device the linked document is optimized for
hreflang
language_code
Specifies the language of the linked document
type
media_type
Specifies the media type of the linked document
Anchor Tag Attributes
Attribute
Value
Description
target
_blank _parent _top framename _self
Opens the linked document in a new window or tab Opens the linked document in the parent frame Opens the linked document in the full body of the window Opens the linked document in a named frame Opens the linked document in the same frame as it was clicked (this is the default)
Ex:- <a href=”https://www.google.com”target=”_blank”>Visit Google </a>
Anchor Tag Attributes
href Attribute
Syntax: – <a href=“URL”>
An absolute URL – points to another web site. Ex: – href=”http://www.google.com”
A relative URL – points to a file within a web site. Ex:- href=“page1.html”
Link to an element with a specified id within the page. Ex: – href=”#bottom”
Other protocols. Ex:- https://, ftp://, mailto:, file:, etc..
A script. Ex:- href=‘javascript:alert(“Hello”);’
Download Attribute
The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.
The media attribute specifies what media/device the linked document is optimized for.
This attribute is used to specify that the target URL is designed for special devices (like iPhone and Android etc), speech, or print media.
Value
Description
width
Specifies the width of the targeted display area. “min-” and “max-” prefixes can be used. Example: media=”screen and (min-width:500px)”
height
Specifies the height of the targeted display area. “min-” and “max-” prefixes can be used. Example: media=”screen and (max-height:700px)”
device-width
Specifies the width of the target display/paper. “min-” and “max-” prefixes can be used. Example: media=”screen and (device-width:500px)”
device-height
Specifies the height of the target display/paper. “min-” and “max-” prefixes can be used. Example: media=”screen and (device-height:500px)”
orientation
Specifies the orientation of the target display/paper. Possible values: “portrait” or “landscape” Example: media=”all and (orientation: landscape)”
Value
Description
aspect-ratio
Specifies the width/height ratio of the targeted display area. “min-” and “max-” prefixes can be used. Example: media=”screen and (aspect-ratio:16/9)”
device-aspect-ratio
Specifies the device-width/device-height ratio of the target display/paper. “min-” and “max-” prefixes can be used. Example: media=”screen and (aspect-ratio:16/9)”
color
Specifies the bits per color of the target display. “min-” and “max-” prefixes can be used. Example: media=”screen and (color:3)”
color-index
Specifies the number of colors the target display can handle. “min-” and “max-” prefixes can be used. Example: media=”screen and (min-color-index:256)”
monochrome
Specifies the bits per pixel in a monochrome frame buffer. “min-” and “max-” prefixes can be used. Example: media=”screen and (monochrome:2)”
Value
Description
resolution
Specifies the pixel density (dpi or dpcm) of the target display/paper. “min-” and “max-” prefixes can be used. Example: media=”print and (resolution:300dpi)”
scan
Specifies scanning method of a tv display. Possible values are “progressive” and “interlace”. Example: media=”tv and (scan:interlace)”
grid
Specifies if the output device is grid or bitmap. Possible values are “1” for the grid, and “0” otherwise. Example: media=”handheld and (grid:1)”
Links to an alternate version of the document (i.e. print page, translated or mirror)
author
Links to the author of the document
bookmark
Permanent URL used for bookmarking
help
Links to a help document
license
Links to copyright information for the document
next
The next document in a selection
nofollow
Links to an unendorsed document, like a paid link. (“nofollow” is used by Google, to specify that the Google search spider should not follow that link)
noreferrer
Specifies that the browser should not send a HTTP referer header if the user follows the hyperlink
prefetch
Specifies that the target document should be cached
prev
The previous document in a selection
search
Links to a search tool for the document
tag
A tag (keyword) for the current document
Link Color
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
link – specifies the color of the hyperlink that has not been visited or clicked before on a webpage
vlink – specifies the color of hyperlink that has been visited before on a web page
alink – specifies the color of currently active links
