****************************JAVA-SCRIPT****************************

1. What is JavaScript?Features of JavaScript,What is JavaScript Syntax?

JavaScript is an object-based scripting language which is lightweight and cross-
platform.

Features of JavaScript:

 JavaScript is a object-based scripting language.

Giving the user more control over the browser.
It Handling dates and time.
It Detecting the user's browser and OS,
It is light weighted.
JavaScript is a scripting language and it is not java.
JavaScript is interpreter based scripting language.
JavaScript is case sensitive.
JavaScript is object based language as it provides predefined objects.
Every statement in javascript must be terminated with semicolon (;).

JavaScript syntax:
var x, y, z; // How to declare variables
x = 5; y = 6; // How to assign values
z = x + y; // How to compute values

2. JavaScript Frameworks?

 AngularJS
 ReactJS
 VueJS
 jQuery
 BackboneJS
 NodeJS
 EmberJS
 MeteorJS
 PolymerJS
 Aurelia

3. Common Uses of JavaScript

JavaScript is used to create interactive websites. It is mainly used for:
 Client-side validation,
 Dynamic drop-down menus,
 Displaying date and time,
 Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog
box and prompt dialog box),
 Displaying clocks etc.
4. What is JavaScript Class?
In JavaScript, classes are the special type of functions. We can define the class just
like function declarations and function expressions.
The JavaScript class contains various class members within a body including
methods or constructor.
The class syntax contains two components:
 Class declarations-A class can be defined by using a class declaration. A class
keyword is used to declare a class with any particular name. According to
JavaScript naming conventions, the name of the class always starts with an
uppercase letter.
 Class expressions-Another way to define a class is by using a class expression.
Here, it is not mandatory to assign the name of the class. So, the class expression
can be named or unnamed. The class expression allows us to fetch the class name.
However, this will not be possible with class declaration.

5. JavaScript Objects
 A javaScript object is an entity having state and behavior (properties and method). For
example: car, pen, bike, chair, glass, keyboard, monitor etc.
 JavaScript is an object-based language. Everything is an object in JavaScript.
 JavaScript is template based not class based. Here, we don't create class to get the
object. But, we directly create objects.

There are 3 ways to create objects:

1) By object literal
The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2.....propertyN:valueN}

Let’s see the simple example of creating object in JavaScript.

<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

2) By creating instance of Object directly (using new keyword)

The syntax of creating object directly is given below:
var objectname=new Object();
Here, new keyword is used to create object.

Let’s see the example of creating object directly:

<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
 </script>

3) By using an object constructor (using new keyword)

Here, you need to create function with arguments. Each argument value can be
assigned in the current object by using this keyword.

The this keyword refers to the current object.

The example of creating object by object constructor is given below:

<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>

6. How to define a class in JavaScript?

A JavaScript class is a type of function. Classes are declared with the class keyword. We
will use function expression syntax to initialize a function and class expression syntax to
initialize a class.

class MyClass {
constructor() { ..
method1() { ... }
method2() { ... }
method3() { ... }
...
}

7. JavaScript Operators

1) Arithmetic operators

OPERATORS DESCRIPTION EXAMPLE

+ Addition 10+20=30
- Subtraction 20-10=10
* Multiplication 10*20=200
/ Division 20/10=2
% Modulus 20%10=0
++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

2) Comparison operators

OPERATORS DESCRIPTION EXAMPLE

== Equal to
=== Identical
!= Not equal to
!== Not identical to
> Greater than
>= Greater than or equal to
< Lesser than
<= Lesser than or equal to

3) Bitwise operators

OPERATORS DESCRIPTION EXAMPLE

& AND
| OR
^ XOR
~ NOT
>> Right shift
<< Left shift
<<<

4) Logical operators

OPERATORS DESCRIPTION EXAMPLE

&& Logical AND
|| Logical OR

! Logical NOT

5) Assignment operators

OPERATORS DESCRIPTION EXAMPLE

6) Special operators

OPERATORS DESCRIPTION EXAMPLE

8. JavaScript Variables
 A JavaScript variable is simply a name of storage location.
 They are containers for storing data values.
In this example, x, y, and z, are variables
var x = 5;
var y = 6;
var z = x + y;
 Here, x stores the value 5
 y stores the value 6
 z stores the value 11

 There are two types of variables in JavaScript : local variable and global variable.
 There are some rules while declaring a JavaScript variable (also known as identifiers).
1) Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2) After first letter we can use digits (0 to 9), for example value1.
3) JavaScript variables are case sensitive, for example x and X are different variables.

9. JavaScript Data Types

JavaScript provides different data types to hold different types of values. There are two
types of data types in JavaScript:
1. Primitive data type
a) String: represents sequence of characters. e.g. "hello"
b) Number: represents numeric values. e.g. 100
c) Boolean: represents boolean value either false or true
d) Undefined: represents undefined value
e) Null: represents null i.e. no value at all.
2. Non-primitive (reference) data type
a) Object: represents instance through which we can access members
b) Array: represents group of similar values
c) RegExp: represents regular expression

10. JavaScript Functions

JavaScript functions are used to perform operations. We can call JavaScript function
many times to reuse the code.
Syntax:
function functionName([arg1, arg2, ...argN]){
//code to be executed
}
 JavaScript Functions can have 0 or more arguments.
 We can call function by passing arguments.
 We can call function that returns a value and use it in our program.

11. JavaScript Arrays

JavaScript array is an object that represents a collection of similar type of elements.

There are 3 ways to construct array in JavaScript

1) By array literal
2) By creating instance of Array directly (using new keyword)
3) By using an Array constructor (using new keyword)

12. JavaScript Array Methods,Array Sort,Array Iteration

Concat()-It returns a new array object that contains two or more merged arrays.
Copywithin()-It copies the part of the given array with its own elements and returns the
modified array.
Every()-
13. Javascript date and date formats,JS date get method and set method.
 The JavaScript date object can be used to get year, month and day. You can display a
timer on the webpage by the help of JavaScript date object.
 You can use different Date constructors to create date object. It provides methods to
get and set day, month, year, hour, minute and seconds.

14. Javascript conditions

In JavaScript we have the following conditional statements:

Use if to specify a block of code to be executed, if a specified condition is true

Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false
Use switch to specify many alternative blocks of code to be executed


15. JavaScript Switch Statement

The JavaScript switch statement is used to execute one code from multiple
expressions. It is just like else if statement that we have learned in previous page. But it
is convenient than if..else..if because it can be used with numbers, characters etc.

The syntax of JavaScript switch statement is given below:

 switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......

default:
code to be executed if above values are not matched;
}
16. JavaScript For Loop,While loop,Break and Continue.
The JavaScript for loop iterates the elements for the fixed number of times. It
should be used if number of iteration is known. The syntax of for loop is given
below:
for (initialization; condition; increment)
{
code to be executed
}

The JavaScript while loop iterates the elements for the infinite number of times. It
should be used if number of iteration is not known. The syntax of while loop is given
below:
while (condition)
{
code to be executed
}

17. The JavaScript this Keyword

The JavaScript this keyword refers to the object it belongs to.

It has different values depending on where it is used:

In a method, this refers to the owner object.

Alone, this refers to the global object.

In a function, this refers to the global object.

In a function, in strict mode, this is undefined.

In an event, this refers to the element that received the event.

Methods like call(), and apply() can refer this to any object.

18. JavaScript JSON

 JSON: JavaScript Object Notation.
JSON is a syntax for storing and exchanging data.
JSON is text, written with JavaScript object notation.

Exchanging Data:
When exchanging data between a browser and a server, the data can only
be text.
JSON is text, and we can convert any JavaScript object into JSON, and send
JSON to the server.
We can also convert any JSON received from the server into JavaScript
objects.

**********************************************HTML************************************************

1. What is HTML?
 HTML stands for HyperText Markup Language.
  HTML is used to create web pages and web applications.
 HTML is widely used language on the web.
 We can create a static website by HTML only.
 Technically, HTML is a Markup language rather than a programming language.

2. HTML Basic Examples

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
3. HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

4. HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:

5. HTML Paragraphs
 HTML paragraph or HTML p tag is used to define a paragraph in a webpage.
 It is a notable point that a browser itself add an empty line before and after a
paragraph. An HTML <p> tag indicates starting of new paragraph.

6. HTML Links
HTML links are defined with the <a> tag:

<a herf=”https://xyz.com”>This is a link</a>

7. HTML Images

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src=”url”>

8. HTML Buttons
 The <button> tag defines a clickable button.

Inside a <button> element you can put content, like text or images. This is the difference
between this element and buttons created with the <input> element.

<button type="button">Click Me!</button>

9. HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

HTML Ordered List or Numbered List:

In the ordered HTML lists, all the list items are marked with numbers by default. It is known
as numbered list also. The ordered list starts with <ol> tag and the list items start with <li>
tag.

HTML Unordered List or Bulleted List:

In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li>
tag.

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also
known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or
other name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

HTML Nested List:

A list within another list is termed as nested list. If you want a bullet list inside a numbered
list then such type of list will called as nested list.

10. HTML Elements

 An HTML element usually consists of a start tag and an end tag, with the content
inserted in between:
<tagname>Content goes here...</tagname>
 The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
 HTML elements with no content are called empty elements. Empty elements do not
have an end tag, such as the <br> element (which indicates a line break).
 HTML elements can be nested (elements can contain elements).
 All HTML documents consist of nested HTML elements.
 Example:
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>

11. HTML Styles

 Use the style attribute for styling HTML elements
 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

12. HTML Colors

HTML colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values.can set the color of text, set the color of borders,

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

In HTML, colors can also be specified using RGB values, HEX values, HSL values,
RGBA values, and HSLA values:

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

13. HTML Styles – CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file
14. HTML5 Canvas

The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually
JavaScript).
 However, the <canvas> element has no drawing abilities of its own (it is only a container for
graphics) - you must use a script to actually draw the graphics.
The getContext() method returns an object that provides methods and properties for
drawing on the canvas.

15. HTML The id Attribute

It specifies a unique id for the element. It can be used with CSS and JavaScript.

16. HTML The class Attribute

It is used to provide the class name for the current element. It is mainly used with the style
sheet.

17. HTML Tables

 By default, table headings are bold and centered.

TAG DESCRIPTION

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each
column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table

 There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML
2. By border property in CSS
 You can specify padding for table header and table data by two ways:
1. By cellpadding attribute of table in HTML
2. By padding property in CSS

18. HTML JavaScript

 The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains script statements, or it points to an external script file
through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic
changes of content.
To select an HTML element, JavaScript most often uses
the document.getElementById() method.
Example:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

19. HTML Forms

The HTML <form> element defines a form that is used to collect user input:

An HTML form contains form elements.

Form elements are different types of input elements, like text fields, checkboxes, radio
buttons, submit buttons, and more.

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.
Example:
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
20. HTML Multimedia

Multimedia comes in many different formats. It can be almost anything you can hear
or see.
Examples: Images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4,
.mpg, .wmv, and .avi.
21. The HTML <video> Element,The HTML <audio> Element
<video> element:
 HTML 5 supports <video> tag also.
 The HTML video tag is used for streaming video files such as a movie clip, song clip on the
web page.
 Currently, there are three video formats supported for HTML video tag:
1. mp4
2. webM
3. ogg

 The controls attribute adds video controls, like play, pause, and volume.
 It is a good idea to always include width and height attributes. If height and width are not
set, the page might flicker while the video loads.
 The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.
 The text between the <video> and </video> tags will only be displayed in browsers that do
not support the <video> element.
 HTML5 defines DOM methods, properties, and events for the <video> element.
 This allows you to load, play, and pause videos, as well as setting duration and volume.
 There are also DOM events that can notify you when a video begins to play, is paused, etc.

<audio> element:
 It defines sound content.
 The controls attribute adds audio controls, like play, pause, and volume.
 The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.
 The text between the <audio> and </audio> tags will only be displayed in browsers that
do not support the <audio> element.
 Audio tags:
1. Controls: It defines the audio controls which is displayed with play/pause buttons.
2. Autoplay: It specifies that the audio will start playing as soon as it is ready.
3. Loop: It specifies that the audio file will start over again, every time when it is completed.
4. Muted: It is used to mute the audio output.
5. Preload: It specifies the author view to upload audio file when the page loads.
6. Src: It specifies the source URL of the audio file.

22. HTML5 Geolocation

The HTML Geolocation API is used to get the geographical position of a user.

Since this can compromise privacy, the position is not available unless the user approves it.
The getCurrentPosition() method is used to return the user's position.
Example:
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
 } else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>