Scribd
Upload
42 views39 pages

Web Development Short Notes

The document provides comprehensive notes on HTML, covering its definition, structure, and various elements such as tags, attributes, lists, links, and forms. It explains the differences between block-level and inline elements, as well as the use of semantic HTML and meta tags for SEO. Additionally, it includes examples and syntax for creating tables, formatting text, and implementing forms in web development.

Uploaded by

Jamla Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views39 pages

Web Development Short Notes

The document provides comprehensive notes on HTML, covering its definition, structure, and various elements such as tags, attributes, lists, links, and forms. It explains the differences between block-level and inline elements, as well as the use of semantic HTML and meta tags for SEO. Additionally, it includes examples and syntax for creating tables, formatting text, and implementing forms in web development.

Uploaded by

Jamla Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

Web Development Notes

HTML

​ hat is HTML ?
W
HTML stands for Hyper Text Markup Language. It is a language of World Wide Web. It is a standard
text formatting language which is used to create and display pages on the Web. It makes the text
more interactive and dynamic. It can turn text into images, tables, links.
OR
HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web
pages and web applications.

HyperText: HyperText simply means "Text within Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext.
Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.

​ TML Tags
H
Hidden keywords within a web page that define how your web browser must format and display the
content.
OR
Content placed between HTML tags in order to properly format it. It makes use of the less than
symbol (<) and the greater than symbol (>). A slash symbol is also used as a closing tag. For
example:
<p></p> ,<title></title>
No. There are some HTML tags that don't need a closing tag. For example: <image> tag, <br> tag. Eg
: <img>,<br> etc..
There are four sets of HTML tags that are needed to form the basic structure for every HTML file:
1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>
These four tags are special.
There must only be one set of each and they must be in the correct order.

​ TML Element
H
An HTML element is defined by a start tag, some content, and an end tag.
SYNTAX :
<tagname>Content goes here...</tagname>
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>)
​HTML Formatting/Tag Formatting
The HTML formatting is a process of format the text for a better look and feel. It uses different tags to
make text bold, italicized, underlined
In HTML the formatting tags are divided into two categories:
1. Physical tag: These tags are used to provide the visual appearance to the text.
Eg: <b> , <i> , etc
2. Logical tag: These tags are used to add some logical or semantic value to the text.
Eg: <strong> , <em> , etc
eg : < font-size: >, <font color="#FF0000">, <font face="?"> </font>

​ TML Attributes
H
Each tag has additional attributes that change the way the tag behaves or is displayed.
Eg : <img src=”#”> here in this tag src is img tag attributes.
<input type=” text”> here in this tag type is input tag attributes. Type can be
checkbox,radiobox etc..

​ ow many types of heading does an HTML contain?


H
The HTML contains six types of headings which are defined with the <h1> to <h6> tags

​W hat is the difference between a block-level element and an inline element?


Block Inline
A block-level element is drawn as a block that Inline elements are drawn where they are defined
stretches to fill the full width available to it i.e, and only take up space that is absolutely needed. The
the width of its container and will always start easiest way to understand how they work is to look
on a new line. at how text flows on a page.
Elements that are block-level by default: Examples of elements that are inline by default:
<div>, <img>, <section>, <form>, <nav>. <span>, <b>, <strong>, <a>, <input>.

​ an we change inline elements into block-level elements?


C
Yes, we can change inline elements into block-level elements by adding display equal to block in its
CSS tag. Writing it will change the inline elements into block elements and then inline elements will
also take the full width of the container.
Eg : display: block;

​ TML Lists
H
Lists are the preferred way to display items one after the other. Lists have a tag to start and end the
list itself, as well as. A tag for each item in the list.
There are three types of lists,
1. ordered, : Used to group a set of related items in a specific order, Numbered lists or Alphabetical
list
2. unordered and
3. definition lists : Description lists (previously called definition lists, but renamed in HTML5)
This type of list is used to define and describe terms, much like a dictionary. Typically an entry in the
list consists of a term, and a definition of that term. A browser will usually bold the term, and indent
the definition.
Unordered List : type: disc/circle/square;
<html>
<body>
<ul>
<li>An item</li>
<li>Another item</li>
</ul>
</body>
</html>
Ordered List :
<html>
<body>
<ol>
<li>An item</li>
<li>Another item</li>
</ol>
</body>
</html>
Description List :
<html>
<body>
<dl> //Define a Definition List - <dl> </dl>
<dt>Name</dt> // Definition Title - <dt> </dt>
<dd>Value</dd>// Definition Description - <dd> </dd>
<dt>Name</dt>
<dd>Value</dd>
</dl>
</body>
</html>

​ ifferentiate between an ordered list and unordered list is given below:


D
Ordered list:
​It has an order of items which is signified by number, Roman numeral or alphabetical character.
​Tag - An ‘ordered list’ starts with the <ol> tag.
​Each list item starts with the <li> tag.
​Also known as number list
Unordered List:
​It has no order of items which has a bullet preceding.
​Tag - An ‘unordered list’ starts with the <ul> tag.
​Each list item starts with the <li> tag.
​Also known as bulleted list

​ omments in HTML
C
Comments in HTML begins with “<!–“nd ends with “–>”.
For example:
<!-- A SAMPLE COMMENT -->
To understand the code easily, you can add code comments to your HTML document. These are not
displayed in the browser, but they help you in leaving notes for yourself and other developers as to
what a section of HTML is for.
Anything in the middle will be completely ignored, even if it contains valid HTML.

​ TML Links
H
Links allow to jump from one page to another by clicking on the link text.
1. Unvisited link - It is displayed, underlined and blue.
2. Visited link - It is displayed, underlined and purple.
3. Active link - It is displayed, underlined and red.
SYNTAX : < a href = "url” > link text </a>
< a href = "#fragment” > link </a>
Link Fragment
• It is often useful to link to other places on the same webpage, such as other sections or chapters
further down the page.
• The technical term for this is linking to a Fragment, where browsers will automatically try
and scroll to that part of the page.
Eg :
<html>
<head> <title>Example – Linking</title></head>
<body>
<p>
<a name="top"> The Top of the Page </a>
<a href="#para1"> Go to paragraph 1 in this document</a>
<a href="#para2">Go to paragraph 2 in this document </a>
....
.....
<a name="para1"> Paragraph 1: (Fragment para1)</a>
<a href="#top"> Go back to the top </a>
..............................
<a name="para2">Paragraph 2: (Fragment para2)</a>
<a href="#top">Go back to the top</a>
</p>
</body>
</html>
Target Window
“_blank” → open page in new tab
“_self” → open page in that page only
“_parent” (Used with frames)
“_top”

Line Break
<br> tags are used to enter a new line into the HTML contents. These tags are generally used to
separate two different lines of text between each other.

​ orizontal Line
H
The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic
break in an HTML page to divide or separate document sections. The <hr> tag is an empty tag and it
does not require an end tag.

​BR vs HR
BR HR
​ sed to enter a new line into the HTML
u ​ sed to insert a horizontal rule or a thematic break
u
contents. in an HTML page.
s​ eparate two different lines of text between
​divide or separate document section
each other.
​There is no closing tag ​There is a closing tag

​ tructure of HTML Tag


S
DOCTYPE – It is a special tag in HTML which is always written at the top of the HTML document, i.e.
at the start of the HTML template. DOCTYPE is used to convey to the browser about the HTML
version.
HTML – After DOCTYPE tag, the HTML tag is written to start the template. All the code will be
placed into this HTMLtag. It works as the container for the whole HTML page elements.
HEAD – <head> tag is the first element inside the <html> tag. It is used to provide information to the
browser about the page and its contents.
Search Engine Optimization (SEO) techniques are written inside this tag. <title>, <meta> tags are
written inside these tag. CSS and JS external links or internal CSS and JS are also written Inside this
tag.
BODY – <body> tags are written after the closing tag of the <head> tag, i.e. after </head>. Whatever
HTML code is written inside these tags will be shown by the browser as website content.

​ eta charsets
M
Meta tags in HTML are used by the developer to tell the browser about the page description, author
of the template, character set, keywords and many more. Meta tags are used for search engine
optimization to tell the search engine about the page contents.
<meta charset="UTF-8">
<meta name="viewport" initial-scale = 1.0">
<meta name="description" content="HTML interview questions">
<meta name="author" content="Author Name">
<meta name="copyright" content="All Rights Reserved">

​ TML Tables
H
The HTML table tag is used to display data in tabular form (row * column). It also manages the layout
of the page, e.g., header section, navigation bar, body content, footer section.

Tag Decsription
<table> It defines a table
<tr> This tag defines a row in a table
<th> It defines a header cell in a table
<td> This is used to define 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
This is used with <colgroup> element to specify column properties for each
<col>
column
<tbody> This tag 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

Cell Spacing is referred to space/gap between the two cells of the same table.
Cell Padding is referred to the gap/space between the content of the cell and cell wall or Cell border.
Example:

<table border cellspacing=3>


<table border cellpadding=3>
<table border cellspacing=3 cellpadding=3>

​ emantic HTML
S
Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning
of the content. For example: In semantic HTML <b> </b> tag is not used for bold statement as well
as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and <em></em> tags.
Eg: <article>, <aside> , <details> , <figcaption>, <figure>, <footer> , <header>

​ equired field
R
The required attribute is used in HTML to make the field mandatory. It forces the user to fill that
particular field to submit the form. If the field is empty then it will throw a default HTML error.
Eg : <input type="email" name = "user_email" required />

I​s it possible to change the color of the bullet?


The color of the bullet is always the color of the first text of the list. So, if you want to change the
color of the bullet, you must change the color of the text.

​ ayout of HTML
L
Following are different HTML5 elements which are used to define the different parts of a webpage.
1. <header>: It is used to define a header for a document or a section.
2. <nav>: It is used to define a container for navigation links
3. <section>: It is used to define a section in a document
4. <article>: It is used to define an independent, self-contained article
5. <aside>: It is used to define content aside from the content (like a sidebar)
6. <footer>: It is used to define a footer for a document or a section

​ lockquote
B
<blockquote> tag - It is used to define a large quoted section. If you have a large quotation, then put
the entire text within <blockquote>.............</blockquote> tag.

​ mpty elements
E
HTML elements with no content are called empty elements. For example: <br>, <hr> etc.
​How to add image as Background
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body background="Back.jpg">
</body>
</html>

​ hat are the limits of the text field size?


W
The default size for a text field is around 13 characters. However, if you include the size attribute, you
can set the size value to be as low as 1. The maximum size value will be determined by the browser
width. Also, if the size attribute is set to 0, the size will be set to the default size of 13 characters.

​ TML Forms
H
Forms allow us to automate sending and receiving data from a web page.
– name="?" - A unique name identifying the form,used by the action script.
– action="url" - The address (URL) of the script that will process the form data when
submitted.
​method="?" - The method used by the action script, post or get.
​value="?" - Initial value or data displayed in the input field when the form is first loaded.
​type="?" - There are several types of form input fields, text, assword, checkbox, radio, file, image, &
hidden are among the most common.
​size=“5" - Defines the input size or width, defined in terms of number characters wide instead of
pixels.
​maxlength=“30" - Maximum length of input field, such as the maximum number of characters for a
text input.
​Radio Button
<form>
SELECT GENDER
<br>
<input type="radio" name="gender" id="male">
<label for="male">Male</label><br>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</form>

​Text
<form>
Name : <input type="text" name="name" >
</form>
// value will set default value in input box

​Email
<form>
Email : <input type="email" name="email" required >
</form>

​ heckBox
C
<form>
<b>SELECT SUBJECTS</b>
<br>
<input type="checkbox" name="subject" id="maths">
<label for="maths">Maths</label>
<input type="checkbox" name="subject" id="science">
<label for="sceince">Science</label>
<input type="checkbox" name="subject" id="english">
<label for="english">English</label>
</form>

​ extArea
T
<form>
<label for="Description">Description:</label>
<textarea rows="5" cols="50" name="Description" id="Description"></textarea>
</form>

​ rop Down List


D
<form>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Australia">Australia</option>
</select>
</form>
​Submit button/ Rest Button
<form>
<label for="username">Username:</label>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</select>
</form>
​Frames
HTML frames are used to divide your browser window into multiple sections called frames where
each section can load a separate HTML document.
A collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are organized: into rows and columns.
Disadvantages :
1. Some smaller devices cannot cope with frames often because their screen is not big enough to be
divided up.
2. Sometimes your page will be displayed differently on different computers due to different screen
resolution.
3. The browser's back button might not work as the user hopes.
4. There are still few browsers that do not support frame technology.
SYNTAX :
<frameset> ... </frameset> : defines a group of frames.
The rows attribute of <frameset> tag defines horizontal frames & cols attribute defines vertical
frames.
Eg :
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10% , 50% , 20%" border="20"> // instead of rows use cols
<frame name=”” src=””></frame>
<frame name=”” src=””></frame>
…..
<noframes>
Your browser does not support frames.
</noframes>
</frameset>
</html>

CSS

​ hat is CSS ?
W
CSS stands for Cascading Style Sheet. It is a popular styling language which is used with HTML to
design websites. It is a technology developed by the World Wide Web.

The cascading means that a style applied to a parent element will also apply to all children elements
within the parent.
​W hat are the major versions of CSS?
The following are the major versions of CSS
1. CSS 1
2. CSS 2
3. CSS 2.1
4. CSS 3
5. CSS 4
​ ow can you integrate CSS on a web page?
H
1. Inline method - It is used to insert style sheets in HTML document or apply CSS on a single line or
element.
eg:
<p style="color:blue">Hello CSS</p>
2. Embedded/Internal method - It is used to add a unique style to a single document
eg:
<style>
p{
color:blue;
}
</style>

3. Linked/Imported/External method - It is used when you want to make changes on multiple pages.
Eg:
<link rel="stylesheet" type="text/css" href="style.css">

​Advantages of CSS
1. It gives lots of flexibility for setting the properties of the element
2. Easy maintenance
3. It allows separation of content of the HTML document from the style and layout of the
content basically
4. Loading of pages at a faster pace
5. Compatibility with multiple device
6. Increases the website’s adaptability and makes it compatible to future browsers

​ isadvantages of CSS
D
1. Fragmentation
CSS renders different dimensions with each browser. Programmers are required to consider and test
all code across multiple browsers for compatibility before taking any website or mobile application
live.
2. Different Levels
There are different levels to CSS: CSS;1 CSS 2; CSS 3. This has been confusing for developers and
browsers. One language is preferred.
3. No Expressions
4. Requires tools for preprocessing. Re-compilation time can be slow.

​ enefits of External Style Sheets CSS


B
Benefits:
1. One file can be used to control multiple documents having different styles.
2. Multiple HTML elements can have many documents, which can have classes.
3. To group styles in composite situations, methods as selector and grouping are used.
Demerits:
1. Extra download is needed to import documents having style information.
2. To render the document, the external style sheet should be loaded.
3. Not practical for small style definitions.
​
​Benefits of Internal Style Sheets
The advantages of Inline Styles are:
- It is especially useful for small number of style definitions.
- It has the ability to override other style specification methods at the local level.

The disadvantages of Inline Styles are:


- It does not separate out the style information from content.
- The styles for many documents can not be controlled from one source.
- Selector grouping methods can not be used to handle complex situations.
- Control classes can not be created to control multiple element types within the document.
​Benefits of Embedded Style Sheets CSS
Merits :
1. You can create classes for use on multiple tag types in the document.
2. You can use selector and grouping methods to apply styles in complex situations.
3. No extra download is required to import the information.
Demerits :
1. Multiple documents cannot be controlled.

​ SS Style Component
C
Selector
Property
Value

​ elector
S
It is a string that identifies the elements to which a particular declaration apply. It is also referred as a
link between the HTML document and the style sheet. It is equivalent of HTML elements. There are
several different types of selectors in CSS:
1. CSS Element Selector
<style>
p{
text-align: center;
color: blue;
}
</style>
2. CSS ID Selector
<style>
#para{
text-align: center;
color: blue;
}
</style>
<body>
<p id=”para”> … </p>
</body>

3. CSS Class Selector


<style>
.para{
text-align: center;
color: blue;
}
</style>
<body>
<p class=”para”> … </p>
</body>

4. CSS Universal Selector


<style>
*{
text-align: center;
color: blue;
}
</style>
<body>
<p id=”para”> … </p>
</body>

5. CSS Group Selector


<style>
p,h1,img{
text-align: center;
color: blue;
}
</style>
<body>
<p id=”para”> … </p>
<h1>.....</h1>
<img>.....</img>
</body>

​Difference between Id and class selector

​Ways to assign color in CSS

1. Hexadecimal notation
A colour in hexadecimal string notation always begins with the character “#”. After that, the
hexadecimal digits of the colour code is written. The string is case-insensitive.
2.RGB
RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colours using
their red, green, and blue components . However, instead of using a string, the colour is defined using
the CSS function RGB(). This function accepts as its input parameters the values of the red, green,
and blue components and an optional fourth parameter, the value for the alpha channel.

3.HSL
Designers and artists often prefer to work using the HSL (Hue/Saturation/Luminosity) colour method.
On the web, HSL colours are represented using HSL functional notation. The HSL() CSS function is
very similar to the RGB() function in usage otherwise
​Different units used in CSS
1. em : Relative to the font-size of the element (2em means 2 times the size of the current font)
2. rem : Relative to font-size of the root element
3. % : Relative to the parent element
4. px : pixels (1px = 1/96th of 1in)
5. cm : centimetres
6. mm : milimeteres
7. in : inches

​ omment on Case sensitivity of CSS


C
Basically it is not case sensitive but the class names are considered as case sensitive in HTML 4.01
nevertheless font families, URL’s of images, etc is. Only when XML declarations along with XHTML
DOCTYPE are being used on the page, CSS is case -sensitive.

​Logical Tags vs Physical Tags


Physical Tags Local Tags
Physical tags are used to indicate how a logical tags are used to indicate by the visually
particular character is to be formatted impaired and put emphasis on the text.
Physical tags are also referred to as
Logical tags are useless for appearances
presentational mark-up
Physical tags are newer versions Logical tags are old and concentrate on content

​ tyle sheet from HTML


S
While HTML provides easy structure method, it lacks styling, unlike Style sheets. Moreover, style
sheets have better browser capabilities and formatting options. CSS works better on bigger pages
and as the pages grow the benefits become more and more visible. HTML is basically for smaller
pages. Due to modularity, CSS has become popular it makes the process simple and webpages more
presentable and is not meant for HTML alone.

​ omments in CSS
C
/*....*/

​ hat is Responsive Web design


W
Responsive design is an approach to webpage creation that makes use of flexible layouts, flexible
images and cascading style sheet media queries. The goal of responsive design is to build webpages
that detect the visitor’s screen size and orientation and change the layout accordingly.

​ SS Flexbox
C
The flexbox layout officially called CSS flexible box layout module is a new layout module in CSS3.
It is made to improve the items align, directions and order in the container even when they are with
dynamic, or even unknown size. The prime characteristic of the flex container is the ability to modify
the width or height of its children to fill the available space in the best possible way on different
screen sizes.

​ ow does CSS work?


H
When a browser displays a document, it must combine the document’s content with its style
information. It processes the document in two stages:
The browser converts HTML & CSS into the DOM (Document Object Model). The DOM represents
the document in the computer’s memory. It combines the document’s content with its style.
The browser displays the contents of the DOM.

​ hat ia a Webpage
W
A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet
browser. A web page can be accessed by entering a URL address into a browser's address bar. A
web page may contain text, graphics, and hyperlinks to other web pages and files.
A web page is often used to provide information to viewers, including pictures or videos to help
illustrate important topics. A web page may also be used as a method to sell products or services to
viewers. Multiple web pages make up a website, like our Computer Hope website.
​W hat ia a Website
A set of related web pages located under a single domain name. Multiple web pages make up a
website. A website refers to a central location that contains more than one web page, may include
thousands of different web pages.
• The first page of a website is called home page.
• Each website has specific internet address (URL) that you need to enter in your browser to access a
website.
​Differenece b/w Website & Webpage

​Difference b/w Static & Dynamic Website

​Static & Dynamic Website advanatges and disadvantages

​Difference b/w HTML & CSS

​Difference b/w Internal and External Style sheet

​ adding in CSS
P
An element's padding is the space between its content and its border.
​Margin vs Padding in CSS

​CSS Features
1. CSS is compatible with all the devices.
2. With the help of CSS, website maintenance is easy and faster.
3. CSS support consistent and spontaneous changes.
4. CSS makes the website faster and enhances search engine capabilities to crawl the web
pages.
5. It holds a special feature that is the ability to re-position.

JavaScript

​ OM(Document Object Model)


D
Every web page resides inside a browser window which can be considered as an object.
A Document object represents the HTML document that is displayed in that window. The Document
object has various properties that refer to other objects which allow access to and modification of
document content.
The way a document content is accessed and modified is called the Document Object Model, or
DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization
of objects in a Web document.
​Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.
​Document object − Each HTML document that gets loaded into a window becomes a document
object. The document contains the contents of the page.
​Form object − Everything enclosed in the <form>...</form> tags sets the form object.
​Form control elements − The form object contains all the elements defined for that object such as
text fields, buttons, radio buttons, and checkboxes.
OR
1. In the world of web, all HTML webpages are referred to as documents.
2. The Document Object Model represents each of these web pages in a tree-like structure to make it
easier to access and manage the elements.
3.HTML DOM is an Object Model for HTML. It defines:
– HTML elements as objects
– Propertiesfor all HTML elements
– Methodsfor all HTML elements
– Events for all HTML elements
4. In the DOM, documents have a logical structure which is very much like a tree.
5. With the DOM, programmers can create and build documents, navigate their structure, and
add, modify, or delete elements and content.
6. Anything found in an HTML or XML document can be accessed, changed, deleted, or added
using the DOM, with a few exceptions
7. DOM contains a bunch of nodes where each node represents an HTML element.
• The <HTML> tag always comes at the top and hence is called
the “root node”.
• The rest of the nodes come under it and hence are called
“children nodes”.
• The nodes present at the bottom are called “leaves” and are
usually filled with elements’ attributes, values and events.

​ hat is JS ?
W
JavaScript is a client-side as well as server side scripting language that can be inserted into HTML
pages and is understood by web browsers. JavaScript is also an Object based Programming language
​How to embed JS in HTML
The script is an HTML element. Html script element is used to enclose client side scripts like
JavaScript within an HTML document.
Attributes:
1. type =?
This attribute specifies the scripting language. The scripting language is specified as a content type
(e.g., "text/javascript" ). The attribute is supported by all modern browser.
2. src=?
This attribute specifies the location of an external script. This attribute is useful for sharing functions
among many different pages. Note that external JavaScript files contain only JavaScript statements
and files must have the extension .js.
3. nonscript tag
If any browser does not support the JavaScript code the alternate content placed within noscript tag
is being executed.
Eg :
<noscript>
... code ....
</noscript>
​W hat are JavaScript Data Types?
Number, String, Boolean, Object, Undefined
​JS
JavaScript is a client-side scripting language, which means the source code is processed by the
client's web browser rather than on the web server. This means JavaScript functions can run after a
webpage has loaded without communicating with the server.
OR
JavaScript is a scripting or programming language that allows you to implement complex features on
web pages — every time a web page does more than just sit there and display static information .
Today, JavaScript can execute not only in the browser, but also on the server, or actually on any
device that has a special program called the JavaScript engine.
• The browser has an embedded engine sometimes called a “JavaScript virtual machine”.
• How do engines work?
– The engine (embedded if it’s a browser) reads (“parses”) the script.
– Then it converts (“compiles”) the script to the machine language.
– And then the machine code runs, pretty fast.
In-browser JavaScript is able to:
– Add new HTML to the page, change the existing content, modify styles.
– React to user actions, run on mouse clicks, pointer movements, key presses.
– Send requests over the network to remote servers, download and upload files
– Get and set cookies, ask questions to the visitor, show messages.
– Remember the data on the client-side (“local storage”).

​ se of isNaN function?
U
isNan function returns true if the argument is not a number otherwise it is false
​Negative Infinity
Negative Infinity is a number in JavaScript which can be derived by dividing negative number by zero.
​Break JS into several lines
Breaking within a string statement can be done by the use of a backslash, '\', at the end of the first
line .
Eg :
document.write("This is \a program");
​W hich company developed JavaScript
Netscape developed JS
​undeclared and undefined variables?
Undeclared variables are those that do not exist in a program and are not declared. If the program
tries to read the value of an undeclared variable, then a runtime error is encountered.
Undefined variables are those that are declared in the program but have not been given any value. If
the program tries to read the value of an undefined variable, an undefined value is returned.
​Global variables
Global variables are those that are available throughout the length of the code, that is, these have no
scope. The var keyword is used to declare a local variable or object. If the var keyword is omitted, a
global variable is declared.
​Prompt Box
A prompt box is a box which allows the user to enter input by providing a text box. Label and box
will be provided to enter the text or number.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after
entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks
"Cancel" the box returns null.
​Alert Box
An alert box is often used if you want to make sure information comes through to the user. When an
alert box pops up, the user will have to click "OK" to proceed.
​ onfirm Box
C
A confirm box is often used if you want the user to verify or accept something. When a confirm box
pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box
returns true. If the user clicks "Cancel", the box returns false.
​'this; keyword in JS
'This' keyword refers to the object from where it was called
​=== operator
=== is called as strict equality operator which returns true when the two operands are having the
same value without any type conversion.
​Does JavaScript support automatic type conversion?
Yes JavaScript does support automatic type conversion, it is the common way of type conversion used
by JavaScript developers
​Primitive types and Non-Primitive types
A primitive/primary data value is a single simple data value with no additional properties and
methods ,can hold only one value at a time,
Eg : string,boolean,number
typeof “abc” // return string

Non-Primitive/A composite/ reference data types can hold collections of values and more
complex entities.
eg: Object, Array, and Function (which are all types of objects)

Special data types - Undefined and Null

​ perators in JS
O
1. Arithmetic Operators
1. Comparison Operators
2. Logical Operators
3. Assignment Operators
4. Conditional Operators
Arithmetic Operators: Arithmetic operators are used to perform mathematical operations between
numeric operands.
Operator Description
+ Adds two numeric operands.
- Subtract right operand from left operand
* Multiply two numeric operands.
/ Divide left operand by right operand.
% Modulus operator. Returns remainder of two operands.
++ Increment operator. Increase operand value by one.
-- Decrement operator. Decrease value by one.

Comparison Operators: JavaScript language includes operators that compare two operands
and return Boolean value true or false.

Operators Description
== Compares the equality of two operands without considering type.
=== Compares equality of two operands with data type.
!= Compares inequality of two operands.
Checks whether left side value is greater than right side value. If yes then
>
returns true otherwise false.
Checks whether left operand is less than right operand. If yes then returns true
<
otherwise false.
Checks whether left operand is greater than or equal to right operand. If yes
>=
then returns true otherwise false.
Checks whether left operand is less than or equal to right operand. If yes then
<=
returns true otherwise false.

Logical Operators: Logical operators are used to combine two or more conditions. JavaScript
includes following logical operators.

Operator Description
&& is known as AND operator. It checks whether two operands are non-zero (0, false,
&&
undefined, null or "" are considered as zero), if yes then returns 1 otherwise 0.
|| is known as OR operator. It checks whether any one of the two operands is non-zero
||
(0, false, undefined, null or "" is considered as zero).
! ! is known as NOT operator. It reverses the boolean result of the operand (or condition)
Assignment Operators: JavaScript includes assignment operators to assign values to variables with
less key strokes.

Assignment
Description
operators
= Assigns right operand value to left operand.
Sums up left and right operand values and assign the result to the left
+=
operand.
Subtract right operand value from left operand value and assign the result to
-=
the left operand.
*= Multiply left and right operand values and assign the result to the left operand.
Divide left operand value by right operand value and assign the result to the
/=
left operand.
Get the modulus of left operand divide by right operand and assign resulted
%=
modulus to the left operand.

Ternary Operators/Conditional: JavaScript includes special operator called ternary operator :? that
assigns a value to a variable based on some condition. This is like short form of if-else condition.
Ternary operator starts with conditional expression followed by ? operator. Second part
( after ? and before : operator) will be executed if condition turns out to be true. If condition
becomes false then third part (after :) will be executed.
SYNTAX : <condition> ? <value1> : <value2>;
>>> = Zero fill right shift << = Zero fill left shift >> = Signed right shift

​ omments in JS
C
A comment is simply a line of text that is completely ignored by the JavaScript interpreter.
Comments are usually added with the purpose of providing extra information pertaining to source
code.
It will not only help you understand your code when you look after a period of time but also others
who are working with you on the same project.
JavaScript support single-line as well as multi-line comments.
Single Line - //
Multi Line - /* …. */

​ ifference b/w undefined and null


D
undefined is the default value of a variable that has not been assigned a specific value. Or a function
that has no explicit return value ex.
null is "a value that represents no value". null is value that has been explicitly defined to a variable.
​Difference b/w == & ===
The difference between ==(abstract equality) and ===(strict equality) is that the == compares by
value after coercion and === compares by value and type without coercion.
​Scope
Scope in JavaScript is the area where we have valid access to variables or functions. JavaScript has
three types of Scopes. Global Scope, Function Scope, and Block Scope(ES6).
​Pop Up boxes in JS
Alert,Confirm & Prompt
​ scape Character
E
Escape characters (Backslash) is used when working with special characters like single quotes,
double quotes, apostrophes and ampersands. Place backslash before the characters to make it
display.
Eg :
document.write "I m a "good" boy"
document.write "I m a \"good\" boy"
​Functions
A function is a group of statements that perform specific tasks and can be kept and maintained
separately form main program.
Use : Create reusable code packages which are more portable and easier to debug.
Declaration of a function start with the function keyword, followed by the name of the function you
want to create, followed by parentheses i.e. ( ) and finally place your function's code between curly
brackets { }.
Rules for defining:
A function name must start with a letter or underscore character not with a number, optionally
followed by the more letters, numbers, or underscore characters. Function names are case sensitive,
just like variable names.
Returning value from function:
A function can return a value back to the script that called the function as a result using the return
statement. The value may be of any type, including arrays and objects.
​Loops in JavaScript
five different types of loops:
1. while — loops through a block of code as long as the condition specified evaluates to true.
2. do...while — loops through a block of code once; then the condition is evaluated. If the condition is
true, the statement is repeated as long as the specified condition is true.
3. for — loops through a block of code until the counter reaches a specified number.
4. for...in — loops through the properties of an object.
5. for...of — loops over iterable objects such as arrays, strings, etc.
eg :
const array1 = ['a', 'b', 'c'];
for (const element of array1) {
console.log(element);
}
J​ S Cookies
A cookie is an amount of information that persists between a server-side and a client-side.
A web browser stores this information at the time of browsing.
A cookie contains the information as a string generally in the form of a name-value pair separated by
semi-colons. It maintains the state of a user and remembers the user's information among all the
web pages.
​How Cookies work?
When a user sends a request to the server, then each of that request is treated as a new request sent
by the different user.
So, to recognize the old user, we need to add the cookie with the response response from the server.
browser at the client-side.
Now, whenever a user sends a request to the server, the cookie is added with that request
automatically. Due to the cookie, the server recognizes the users.
To create cookie : document.cookie="name=value"
​JS DOM
JavaScript provides several different ways to select elements on a page.
– Selecting Elements by ID
– Selecting Elements by Class Name
– Selecting Elements by Tag Name
– Selecting Elements with CSS Selectors

​ ocument object
D
The document object represents the whole html document.
•When html document is loaded in the browser, it becomes a document object.
• It is the root element that represents the html document.
• It has properties and methods.
• By the help of document object, we can add dynamic content to our web page.
• As mentioned earlier, it is the object of window.

document.getElementById(id) Find an element by element id


document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name

J​ S Events
An event is a signal that something has happened.
Mouse events:
– click – when the mouse clicks on an element
– contextmenu – when the mouse right-clicks on an element.
– mouseover / mouseout – when the mouse cursor comes over / leaves an element.
– mousedown / mouseup – when the mouse button is pressed / released over an element.
– mousemove – when the mouse is moved.
Keyboard events:
– keydown and keyup – when a keyboard key is pressed and released.
Form element events:
– submit – when the visitor submits a <form>.
– focus – when the visitor focuses on an element, e.g. on an <input>.

​ vent Handlers
E
To react on events we can assign a handler – a function that runs in case of an event.
• Handlers are a way to run JavaScript code in case of user actions.
• There are several ways to assign a handler.
– HTML-attribute
– DOM property
– Accessing the element: this
• A handler can be set in HTML with an attribute named on<event>.
• If the handler is assigned using an HTML-attribute then the browser reads it, creates a new
function from the attribute content and writes it to the DOM property.
​JS Timing Events
The window object allows execution of code at specified time intervals, are called timing events.
The two key methods to use with JavaScript are:
– setTimeout (function, milliseconds) : Executes a function, after waiting a specified number
of milliseconds.
– setInterval(function, milliseconds) : Same as setTimeout(), but repeats the execution of the
function continuously.
Both methods are of the HTML DOM Window object.
​setTimeout(func_name,seconds(*1000))
The first parameter is a function to be executed.
The second parameter indicates the number of milliseconds before execution.
​clearTimeout()
method stops the execution of the function specified in setTimeout().
method uses the variable returned from setTimeout()
eg :
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
​setInterval()
Repeats a given function at every given time-interval
window.setInterval(function,milliseconds);
• Method can be written without the window prefix.
• First parameter is a function to be executed.
• Second parameter indicates the length of the time-interval between each execution.
​clearInterval()
Stops the executions of the function specified in the setInterval() method.
window.clearInterval(timerVariable)
• Method can be written without the window prefix.
• Uses the variable returned from setInterval():
myVar = setInterval(function, milliseconds);
clearInterval(myVar);
​Lifetime of a Cookie (using expire attribute)
This attribute takes an exact date (in GMT/UTC format) when the cookie should expire, rather
than an offset in seconds.
document.cookie = "firstName=Christopher;
expires=Thu, 31 Dec 2099 23:59:59 GMT";

Expires - It maintains the state of a cookie up to the specified date and time.
max-age - It maintains the state of a cookie up to the specified time. Here, time is given in
seconds.
​GET method in Forms
In the GET method, after the submission of the form, the form values will be visible in the address bar
of the new browser tab.
​POST method in Forms
In the post method, after the submission of the form, the form values will not be visible in the
address bar of the new browser tab as it was visible in the GET method.

Basis for comparison GET POST


Parameters are placed
URI Body
inside
Purpose Retrieval of documents Updation of data
Query results Capable of being bookmarked. Cannot be bookmarked.
Security Vulnerable, as present in plaintext Safer than GET method
Form data type Only ASCII characters are No constraints, even binary data is
constraints permitted. permitted.
Should be kept as minimum as
Form data length Could lie in any range.
possible.
Visibility Can be seen by anyone. Doesn't display variables in URL.
Variable size Up to 2000 character. Up to 8 Mb
Caching Method data can be cached. Does not cache the data.
​HTML vs JavaScript

​Advantages of JavaScript
The merits of using JavaScript are −
​Less server interaction − You can validate user input before sending the page off to the server. This
saves server traffic, which means less load on your server.
​Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have
forgotten to enter something.
​Increased interactivity − You can create interfaces that react when the user hovers over them with a
mouse or activates them via the keyboard.
​Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and
sliders to give a Rich Interface to your site visitors.
​Limitations of JavaScript
We cannot treat JavaScript as a full-fledged programming language. It lacks the following important
features −
​Client-side JavaScript does not allow the reading or writing of files. This has been kept for security
reason.
​JavaScript cannot be used for networking applications because there is no such support available.
​JavaScript doesn't have any multi-threading or multiprocessor capabilities.

​ eatures of JS
F
1. JavaScript was created in the first place for DOM manipulation. Earlier websites were mostly
static after JavaScript it was created dynamic Web sites.
2. Functions in JS are objects. They may have properties and methods just like another object.
They can be passed as arguments in other functions.
3. It can handle date and time.
4. Performs Form Validation although the forms are created using HTML.
5. No compiler needed.

​Difference b/w JS and CSS

CSS Javascript
JavaScript is dependable for interactivity of the
CSS stylizes components of the webpage.
webpage.
CSS is much easier and basic when it comes to JavaScript is tougher compare to CSS in this
web page formatting and designing. scenerio.
The <script> tag should be used for JavaScript
CSS directly defines the HTML element.
code.
CSS can not approve shapes, can be utilized to JavaScript can approve shapes, can be utilized to
identify guest browsers, and can be utilized to identify guest browsers, and can be utilized to
recover and store data from visitors’ computers. recover and store data from visitors’ computers.

​Difference b/w JS and PHP


PHP
​W hat is PHP?
PHP stands for Hypertext Preprocessor. It is an open source server-side scripting language which is
widely used for web development. It supports many databases like MySQL, Oracle, Sybase, Solid,
PostgreSQL, generic ODBC etc.
OR
PHP is a server side scripting language. that is used to develop Static websites or Dynamic websites
or Web applications

​ ses of PHP
U
1. It performs system functions, i.e. from files on a system it can create, open, read, write, and
close them.
2. It can handle forms, i.e. gather data from files, save data to a file, through email you can
send data, return data to the user.
3. You can add, delete, modify elements within your database with the help of PHP.
4. Other benefit that you get with PHP is that it’s a server side scripting language; this
means you only need to install it on the server and client computers requesting for resources
from the server do not need to have PHP installed; only a web browser would be enough.
5. Access cookies variables and set cookies.
6. Using PHP, you can restrict users to access some pages of your website and also encrypt
data.

​ cho use
E
Output one or more strings , has no return value , can take multiple parameters (although such usage
is rare) ,marginally faster
​print use
has a return value of 1 so it can be used in expressions, can take one argument, slower than echo
​Is PHP case-sensitive
PHP is partially case sensitive. The variable names are case-sensitive but function names are not. If
you define the function name in lowercase and call them in uppercase, it will still work. User-defined
functions are not case sensitive but the rest of the language is case-sensitive.
​ haracteristic of PHP
C
​All variables in PHP are denoted with a leading dollar sign ($).
​The value of a variable is the value of its most recent assignment.
​Variables are assigned with the = operator, with the variable on the left-hand side and the expression
to be evaluated on the right.
​Variables can, but do not need, to be declared before assignment.
​Variables in PHP do not have intrinsic types – a variable does not know in advance whether it will be
used to store a number or a string of characters.
​Variables used before they are assigned have default values
​Variable datatypes in PHP
There are 8 data types in PHP which are used to construct the variables :
Integers − are whole numbers, without a decimal point, like 4195.
Doubles − are floating-point numbers, like 3.14159 or 49.1.
Booleans − have only two possible values either true or false.
NULL − is a special type that only has one value: NULL.
Strings − are sequences of characters, like ‘PHP supports string operations.’
Arrays − are named and indexed collections of other values.
Objects − are instances of programmer-defined classes, which can package up both other kinds of
values and functions that are specific to the class.
Resources − are special variables that hold references to resources external to PHP.

​ ules for naming in PHP


R
◦ Variable names must begin with a letter or underscore character.
◦ A variable name can consist of numbers, letters, underscores but you cannot use characters
like + , – , % , ( , ) . & , etc.

​ hat is NULL
W
NULL is a special data type which can have only one value. A variable of data type NULL is a variable
that has no value assigned to it. It can be assigned as follows:
$var=NULL;
The special constant NULL is capitalized by convention but actually it is case insensitive. So,you can
also write it as :
$var=null;
A variable that has been assigned the NULL value, consists of the following properties:
I​t evaluates to FALSE in a Boolean context.
​It returns FALSE when tested with IsSet() function.

​Constants and Variables

Constants Variables
There is no need to write dollar ($) sign A variable must be written with the dollar ($)
before a constant sign
Constants can only be defined using the Variables can be defined by simple
define() function assignment
Constants may be defined and accessed
In PHP, functions by default can only create
anywhere without regard to variable
and access variables within its own scope.
scoping rules.
Constants cannot be redefined or Variables can be redefined for each path
undefined. individually.

​ urpose of break and continue


P
Break – It terminates the for loop or switch statement and transfers execution to the statement
immediately following the for loop or switch.
Continue – It causes the loop to skip the remainder of its body and immediately retest its condition
prior to reiterating.

​ yntax to use PHP


S
<?php [ --- PHP code---- ] ?>
<? [ --- PHP code---- ] ?>
​Comments in PHP
Single Line Comment : //
Multi Line Comment : /* …. */
​How can we access the data sent through the URL with the GET method?
$variable = $_GET["var"];
$_POST["var"];

​ hat is the difference between mysqli_fetch_object() and mysqli_fetch_array()?


W
The mysqli_fetch_object() function collects the first single matching record where
mysqli_fetch_array() collects all matching records from the table in an array.

​ ow do I check if a given variable is empty?


H
If we want to check whether a variable has a value or not, it is possible to use the empty() function
​mysql_close()
Specifies the MySQL connection to close.
closes the non-persistent connection to the MySQL server that's associated with the specified link
identifier.
​mysql_connect()
Open a connection to a MySQL Server
Open a non-persistent MySQL Connection
​mysqli_select_db()
used to change the default database for the connection
Sets the active MySQL database
​mysqli_query()
performs a query against a database
Executes a query on a MySQL databases
​mysqli_error()
returns the last error description for the most recent function call, if any.
​mysqli_result()
Represents the result set obtained from a query against the database.
​mysqli_fetch_array()
fetches a result row as an associative array, a numeric array, or both.

​GET and POST in PHP

GET POST
Data will be re-submitted (the browser
BACK
Harmless should alert the user that the data are
button/Reload
about to be re-submitted)
Bookmarked Can be bookmarked Cannot be bookmarked
Cached Can be cached Not cached
application/x-www-form-urlencoded or
Encoding type application/x-www-form-urlencoded multipart/form-data. Use multipart
encoding for binary data
Parameters are not saved in browser
History Parameters remain in browser history
history
Yes, when sending data, the GET
Restrictions on method adds the data to the URL; and
No restrictions
data length the length of a URL is limited (maximum
URL length is 2048 characters)
Restrictions on
Only ASCII characters allowed No restrictions. Binary data is also allowed
data type
Security GET is less secure compared to POST POST is a little safer than GET because the
because data sent is part of the URL parameters are not stored in browser
history or in web server logs
Never use GET when sending
passwords or other sensitive
information!
Visibility Data is visible to everyone in the URL Data is not displayed in the URL

​Create database using PHP and MySQL


● Establish a connection to MySQL server from your PHP script.
● If the connection is successful, write a SQL query to create a database and store it in a string
variable.
● Execute the query.
//1. Open Connection
//2. Create database
//3. Create table
//4. Input queries
//5. display
//6. close

I​NFORMATION_SCHEMA
INFORMATION_SCHEMA provides access to database metadata, information about the MySQL
server such as the name of a database or table, the data type of a column, or access privileges. Other
terms that are sometimes used for this information are data dictionary and system catalog.
​Array
An array is a compound data type. It can store multiple values of same data type in a single variable.
OR An array is a special variable, which can hold more than one value at a time.
Eg :
$bikes = array ("Royal Enfield", "Yamaha", "KTM");
var_dump($bikes); //the var_dump() function returns the datatype and values
Types :
Indexed arrays - Arrays with a numeric index
Associative arrays - Arrays with named keys
Multidimensional arrays - Arrays containing one or more arrays

​ perators
O
​Assignment operators
​Arithmetic operators
​Comparison operators
​Increment/Decrement operators
​Logical operators
​String operators

. Concatenation $txt1 . $txt2 Concatenation of $txt1 and $txt2


.= Concatenation assignment $txt1 .= $txt2 Appends $txt2 to $txt1

​Array operators

$a + $b Union Union of $a and $b.


$a == $b Equality TRUE if $a and $b have the same key/value pairs.
TRUE if $a and $b have the same key/value pairs in the same order and of
$a === $b Identity
the same types.
$a != $b Inequality TRUE if $a is not equal to $b.
$a <> $b Inequality TRUE if $a is not equal to $b.
$a !== $b Non-identity TR

​Conditional assignment operators

Returns the value of $x.


?: Ternary $x = expr1 ? expr2 : expr3 The value of $x is expr2 if expr1 = TRUE.
The value of $x is expr3 if expr1 = FALSE
Returns the value of $x.
The value of $x is expr1 if expr1 exists,
Null
and is not NULL.
?? coalesci $x = expr1 ?? expr2
If expr1 does not exist, or is NULL, the
ng
value of $x is expr2.
Introduced in PHP 7

​ oop
L
PHP for loop can be used to traverse set of code for the specified number of times.
Used when you already know how many times you want to execute a block of code.
While,do-while,for,for-each
​Form Handling
To get form data, we need to use PHP superglobals $_GET and $_POST.
​$_GET
PHP $_GET is a PHP super global variable which is used to collect form data after submitting an
HTML form with method="get"
$_GET can also collect data sent in the URL.
Get request is the default form request.
The data passed through get request is visible on the URL browser so it is not secured.
You can send limited amount of data through get request.
​$_POST
PHP $_POST is a PHP super global variable which is used to collect form data after submitting an
HTML form with method="post".
$_POST is also widely used to pass variables.
Post request is widely used to submit form that have large amount of data such as file upload, image
upload, login form, registration form etc.
The data passed through post request is not visible on the URL browser so it is secured.
You can send large amount of data through post request.

​Difference b/w GET and POST in PHP

SQL
A database system used on the web
• A database system that runs on a server
• It is ideal for both small and large applications
• Fast, reliable, and easy to use
• Uses standard SQL
• Can compiles on a number of platforms
• Free to download and use
• Developed, distributed, and supported by Oracle Corporation
• MySQL is named after co-founder Monty Widenius's daughter: My

​ egular Expression(Regex)
R
A regular expression is a sequence of characters that forms a search pattern.
A regular expression can be a single character, or a more complicated pattern.
Regular expressions can be used to perform all types of text search and text replace
operations.
SYNTAX : /pattern/modifiers;
eg : var s = /w3schools/i;
w3schools is a pattern (to be used in a search).
i is a modifier (modifies the search to be case-insensitive).
s.search() : searches a string for a specified value and returns the position of the match
s.replace() : replaces a specified value with another value in a string

Brackets : used to find a range of characters


[abc] Find any of the characters between the brackets
[0-9] Find any of the digits between the brackets
(x|y) Find any of the alternatives separated with

[abc] Find any character between the brackets


[^abc] Find any character NOT between the brackets
[0-9] Find any character between the brackets (any digit)
[^0-9] Find any character NOT between the brackets (any non-digit)
(x|y) Find any of the alternatives specified

Metacharacters are characters with a special meaning:


Metacharacter Description
\d Find a digit
\s Find a whitespace character
Find a match at the beginning of a word like this: \bWORD, or at the
\b
end of a word like this: WORD\b

\uxxxx Find the Unicode character specified by the hexadecimal number xxxx

Quantifiers define quantities:


Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n

test() method is a RegExp expression method.


​It searches a string for a pattern, and returns true or false, depending on the result.
exec() method is a RegExp expression method.
​It searches a string for a specified pattern, and returns the found text as an object.
​If no match is found, it returns an empty (null) object.
typeof operator to find the data type of a JavaScript variable.
String() or toString() can convert numbers to strings.
String(x) // returns a string from a number variable x
String(123) // returns a string from a number literal 123
String(100 + 23) // returns a string from a number from an expression
x.toString()
(123).toString()
(100 + 23).toString()

Executes a search for a match in a string. It returns an array of information or null


exec()
on a mismatch.
test() Tests for a match in a string. It returns true or false.
Returns an array containing all of the matches, including capturing groups, or null
match()
if no match is found.
matchAll() Returns an iterator containing all of the matches, including capturing groups.
Tests for a match in a string. It returns the index of the match, or -1 if the search
search()
fails.
Executes a search for a match in a string, and replaces the matched substring with
replace()
a replacement substring.
Executes a search for all matches in a string, and replaces the matched substrings
replaceAll()
with a replacement substring.
Uses a regular expression or a fixed string to break a string into an array of
split()
substrings.

g Global search. RegExp.prototype.global


i Case-insensitive search. RegExp.prototype.ignoreCase
m Multi-line search. RegExp.prototype.multiline
s Allows . to match newline characters. RegExp.prototype.dotAll
"unicode"; treat a pattern as a sequence of unicode code
u RegExp.prototype.unicode
points.
Perform a "sticky" search that matches starting at the
y RegExp.prototype.sticky
current position in the target string.

​JS String Methods

charAt() Returns the character at the specified index (position)


charCodeAt() Returns the Unicode of the character at the specified index
concat() Joins two or more strings, and returns a new joined strings
endsWith() Checks whether a string ends with specified string/characters
fromCharCode() Converts Unicode values to characters
includes() Checks whether a string contains the specified string/characters
Returns the position of the first found occurrence of a specified value
indexOf()
in a string
Returns the position of the last found occurrence of a specified value in
lastIndexOf()
a string
localeCompare() Compares two strings in the current locale
Searches a string for a match against a regular expression, and returns
match()
the matches
Returns a new string with a specified number of copies of an existing
repeat()
string
Searches a string for a specified value, or a regular expression, and
replace()
returns a new string where the specified values are replaced
Searches a string for a specified value, or regular expression, and
search()
returns the position of the match
slice() Extracts a part of a string and returns a new string
split() Splits a string into an array of substrings
startsWith() Checks whether a string begins with specified characters
Extracts the characters from a string, beginning at a specified start
substr()
position, and through the specified number of character
substring() Extracts the characters from a string, between two specified indices
toLocaleLowerCase() Converts a string to lowercase letters, according to the host's locale
toLocaleUpperCase() Converts a string to uppercase letters, according to the host's locale
toLowerCase() Converts a string to lowercase letters
toString() Returns the value of a String object
toUpperCase() Converts a string to uppercase letters
trim() Removes whitespace from both ends of a string
valueOf() Returns the primitive value of a String object

s​ etAttribute
method adds the specified attribute to an element, and gives it the specified value.
element.setAttribute("style", "background-color: red;");
element.style.backgroundColor = "red";
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");

​ etAttribute
g
returns the value of the attribute with the specified name, of an element.
var x = document.getElementsByTagName("H1")[0].getAttribute("class");

You might also like