Web Development Short Notes
Web Development Short 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..
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>
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
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:
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 />
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>
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>
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.
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>
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
omments in CSS
C
/*....*/
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.
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
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
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)
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 - /* …. */
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.
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.
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.
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.
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.
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:
It evaluates to FALSE in a Boolean context.
It returns FALSE when tested with IsSet() function.
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.
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
INFORMATION_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
Array operators
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.
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
\uxxxx Find the Unicode character specified by the hexadecimal number xxxx
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");