Lesson Plan No. 1: Algorithm and fow charts Algorithms:-T o make a computer do anything, you have to write a computer program. To write a computer program, you have to tell the computer, step by step, exactly what you want it to do. The computer then "executes" the program, following each step mechanically, to accomplish the end goal. When you are telling the computer whatto do, you also get to choose howit's going to do it. That's where computer algorithmscome in. The algorithm is the basic technique used to get the ob done. !et's follow an example to help get an understanding of the algorithm concept. !et's say that you have a friend arriving at the airport , and your friend needs to get from the airport to your house. ere are four di#erent algorithms that you might give your friend for getting to your home$ The taxi algorithm$ %. &o to the taxi stan d. . &et in a taxi. (. &ive the driver my address. The call-me algorithm$ %. Whe n your planearrives, call my cell phone. . )eet me outside baggage claim. The rent-a-car algorithm$ %. Take the shut tle to the r ental car p lace. . *ent a car. (. +ollow th e dir ections to ge t to my house. The bus algorithm$ %. uts ide bag gage c laim, catc h bus n umbe r -. . Trans fer to b us %/ on )ain 0t reet. (. &et o# on 1lm street. /. Walk two blo cks no rth t o my h ouse. 2l l four of these al gori thms accomp li sh exactly the same goal , but each algorithm does it in completely di#erent way. 1ach algorithm also has a di#erent cost and a di#erent travel time. Taking a taxi, for example, is probably the fastest way, but also the most expensive. Taking the bus is de3nitely less expensive, but a whole lot slower. 4 ou choose the algorithm based on the circumstances. Summar:-The sequence of step s to be perfor med in order to so lve a problem by the computer is known as an algorithm !lowchart $5 2 6owchart is a type of diagram that repr esents an algorithm, work6ow or process, showing the steps as boxes of various kinds, and their order by connecting them with arrows. This diagrammatic representation illustrates a solution model to a given problem.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Algorithms:- To make a computer do anything, you have to write a computerprogram. To write a computer program, you have to tell the computer, step bystep, exactly what you want it to do. The computer then "executes" theprogram, following each step mechanically, to accomplish the end goal.
When you are telling the computer what to do, you also get to choose how it'sgoing to do it. That's where computer algorithms come in. The algorithm isthe basic technique used to get the ob done. !et's follow an example to helpget an understanding of the algorithm concept.
!et's say that you have a friend arriving at the airport, and your friend needs toget from the airport to your house. ere are four di#erent algorithms that youmight give your friend for getting to your home$
The taxi algorithm$
%. &o to the taxi stand.. &et in a taxi.(. &ive the driver my address.
The call-me algorithm$
%. When your plane arrives, call my cell phone.. )eet me outside baggage claim.
The rent-a-car algorithm$
%. Take the shuttle to the rental car place.. *ent a car.(. +ollow the directions to get to my house.
The bus algorithm$
%. utside baggage claim, catch bus number -.. Transfer to bus %/ on )ain 0treet.(. &et o# on 1lm street./. Walk two blocks north to my house.
2ll four of these algorithms accomplish exactly the same goal, but eachalgorithm does it in completely di#erent way. 1ach algorithm also has a di#erentcost and a di#erent travel time. Taking a taxi, for example, is probably thefastest way, but also the most expensive. Taking the bus is de3nitely lessexpensive, but a whole lot slower. 4ou choose the algorithm based on thecircumstances.
Summar :- The sequence of steps to be performed in order to solve aproblem by the computer is known as an algorithm
!lowchart $5 2 6owchart is a type of diagram that represents an algorithm,work6ow or process, showing the steps as boxes of various kinds, and theirorder by connecting them with arrows. This diagrammatic representationillustrates a solution model to a given problem.
Summar :- +lowchart is a graphical or symbolic representation of analgorithm. 7t is the diagrammatic representation of the step5by5step solution toa given problem
Lesson Plan No. ": #ntroduction to $eb ser%er andtheir &eatures
#ntroduction to $eb ser%er :- Web servers are computers that deliver8serves up9 Web pages. 1very Web server has an 7: address and possibly adomain name. +or example, if you enter the ;*!http$<<www.pcwebopedia.com<index.html in your browser, this sends a requestto the Web server whose domain name is pcwebopedia.com.
The server then fetches the page named index.html and sends it to yourbrowser. 2ny computer can be turned into a Web server by installing serversoftware and connecting the machine to the 7nternet. There are many Webserver software applications, including public domain software from =>02 and2pache, and commercial packages from )icrosoft, =etscape and others.
'ost web ser%ers ha%e &eatures that allow ou to do the&ollowing:
• >reate one or more websites.• >on3gure log 3le settings, including where the log 3les are saved, what
data to include on the log 3les etc.• >on3gure website<directory security. +or example, which user accounts
are<aren't allowed to view the website, which 7: addresses are<aren'tallowed to view the website etc.
• >reate an +T: site. 2n +T: site allows users to transfer 3les to and fromthe site.
• >reate virtual directories, and map them to physical directories
• >on3gure<nominate custom error pages. This allows you to build anddisplay user friendly error messages on your website. +or example, youcan specify which page is displayed when a user tries to access a pagethat doesn't exist 8i.e. a "// error"9.
• 0pecify default documents.
Lesson Plan No. (: #ntroduction to Programming )Scripting Languages
#ntroduction to Programming :- 2 program is a set of instructions thattell the computer to do various things? sometimes the instruction it has toperform depends on what happened when it performed a previous instruction. This section gives an overview of the two main ways in which you can givethese instructions, or @commandsA as they are usually called. ne way uses aninterpreter , the other a compiler . 2s human languages are too diBcult for acomputer to understand in an unambiguous way, commands are usually writtenin one or other languages specially designed for the purpose.
#ntroduction to Scripting language :- 2 scripting language or scriptlanguage is a programming language that supports scripts, programs written fora special run5time environment that can interpret 8rather than compile9 andautomate the execution of tasks that could alternatively be executed one5by5one by a human operator.
*a%a script
Cava script is a client slide scripting language which is used to change T)!
static page into dynamic pages or it brings interactivity in T)! web pages. 2 client side scripting language means , it has support in the browser D
doesnEt require a web server to be executed Cava script is supported by all maor browsers and it is written inside T)!
document.
The +istor o& *a%a script
Cava script was initially introduced by =etscape a web browser in %FFG
.The 3rst author of this language was Hrendan 1ich. Cava scriptEs 3rst version was released in %FF( and the latest version is
(. Cava script has support for communicating with web server and that was
included in Cava script in 7n I Cava script released its most popular library called @JueryA which
is now used by millions of websites on the web.
,ierence between lient side ) ser%er side Scripting
The Javacript comments are meaningful way to deliver message. It is used
to add information about the code warnings or suggestions so that end user
can easily interpret the code.
The JavaScript comment is ignored by the JavaScript engine i.e. embedded in
the browser.
Advantages of JavaScript comments
There are mainly two advantages of JavaScript comments.1 !o ma"e code easy to understand It can be used to elaborate the code
so that end user can easily understand the code.! !o avoid the unnecessary code It can also be used to avoid the code
being e&ecuted. Sometimes we add the code to perform some action. 2utafter sometime there may be need to disable the code. In such case it isbetter to use comments.
Types of JavaScript Comments
There are two types of comments in JavaScript.. Single-line !omment". 9ulti-line !omment
JavaScript Single line Comment
It is represented by double forward slashes (). It can be used before and after
the statement.
*et+s see the e&le of single-line comment i.e. added before the statement.<script>
It is single line commentdocument.write(hello /avascript)0</script>
*et+s see the e&le of single-line comment i.e. added after the statement.<script> var a,0var b,"0var c,a;b0It adds values of a and b variabledocument.write(c)0prints sum of and "
</script>
JavaScript Multi line Comment
It can be used to add single as well as multi line comments. So it is more
convenient.
It is represented by forward slash with asteris' then asteris' with forward slash.
<or e&le: = your code here =
It can be used before after and middle of the statement.
<script> = It is multi line comment.It will not be displayed =document.write(e&le of /avascript multiline comment)0
6 Javacript variable is simply a name of storage location. There are two
types of variables in JavaScript : local variable and global variable.
There are some rules while declaring a JavaScript variable (also 'nown as
identifiers).. >ame must start with a letter (a to ? or 6 to @) underscore( 4 ) or
dollar( A ) sign.". 6fter first letter we can use digits ( to B) for e&le value.$. JavaScript variables are case sensitive for e&le & and C are different
6 Javacript global variable is declared outside the function or declared with
window ob/ect. It can be accessed from any function.
*et+s see the simple e&le of global variable in JavaScript.
Program 7:
<html>
<body>
<script>var value=50;//global variable
function a(){
alert(value);
}
function b(){
alert(value);
}
a();
</script>
</body>
</html>
OutPut: 50
Declaring JavaScript global variable within function
To declare JavaScript global variables inside function you need to use window
object. <or e&le:
window.value,B0>ow it can be declared inside any function and can be accessed from any
function. <or e&le:function m()7window.value,0declaring global variable by window ob/ect8function n()7alert(window.value)0accessing global variable from other function8
Program 8:
<html>
<body>
<script>
function m(){
window.value=100;//declaring global variable by window object
}
function n(){
alert(window.value);//accessing global variable from other function
Lesson Plan No. ;: Arras in *a%aScript 7 concepts0tpes ) usage.
JavaScript Array
Javacript array is an ob/ect that represents a collection of similar type of
elements.
There are $ ways to construct array in JavaScript. 2y array literal". 2y creating instance of 6rray directly (using new 'eyword)$. 2y using an 6rray constructor (using new 'eyword)
1) JavaScript array literal
The synta& of creating array using array literal is given below:var arrayname,Vvaluevalue".....value>W0
6s you can see values are contained inside V W and separated by (comma).
*et+s see the simple e&le of creating and using array in JavaScript.<script> var emp,VSonooXimalHatanW0for (i,0i<emp.length0i;;)7document.write(empViW ; <br/>)08</script>
Lesson Plan No. 1=: 6uilt in *a%aScript &unctionso%er%iew.
JavaScript Objects
6 JavaScript ob/ect is an entity having state and behavior (properties and
method). <or e&le: car pen bi'e chair glass 'eyboard monitor etc.
JavaScript is an ob/ect-based language. Kverything is an ob/ect in JavaScript.
JavaScript is template based not class based. 5ere we donGt create class to get
the ob/ect. 2ut we direct create ob/ects.
Creating Objects in JavaScript
There are $ ways to create ob/ects.
. 2y ob/ect literal". 2y creating instance of Db/ect directly (using new 'eyword)$. 2y using an ob/ect constructor (using new 'eyword)
1) JavaScript Object by object literal
The synta& of creating ob/ect using ob/ect literal is given below:ob/ect,7property:valueproperty":value".....property>:value>8
6s you can see property and value is separated by : (colon).
*et+s see the simple e&le of creating ob/ect in JavaScript.<script> emp,7id:"name:Shyam Yumarsalary:%8document.write(emp.id; ;emp.name; ;emp.salary)0</script>
The synta& of creating ob/ect directly is given below:var ob/ectname,new Db/ect()0
5ere new "eyword is used to create ob/ect.
*et+s see the e&le of creating ob/ect directly.<script> var emp,new Db/ect()0emp.id,0emp.name,Havi 9ali'0emp.salary,0document.write(emp.id; ;emp.name; ;emp.salary)0</script>
5ere you need to create function with arguments. Kach argument value can be
assigned in the current ob/ect by using this 'eyword.
The this "eyword refers to the current ob/ect.
The e&le of creating ob/ect by ob/ect constructor is given below.<script> function emp(idnamesalary)7this.id,id0this.name,name0this.salary,salary08e,new emp($Ximal Jaiswal$)0
*et+s see the e&le of creating string in JavaScript by new 'eyword.<script> var stringname,new String(hello /avascript string)0document.write(stringname)0</script>
Program:
<!DOCTYPE html>
<html>
<body>
<script>
var stringname=new String("hello javascript string");
document.write(stringname);
</script>
</body>
</html>
Dutput:hello /avascript string
JavaScript String Methods
*etGs see the list of JavaScript string methods with e&les.) char6t(inde&)") concat(str)$) inde&Df(str)%) lastInde&Df(str)) to*ower!ase()L) topper!ase()Z) slice(beginInde& endInde&)[) trim()
1) JavaScript String charAt(index) Method
The JavaScript String char6t() method returns the character at the given inde&.<script> var str,/avascript0document.write(str.char6t("))0</script>
The JavaScript String concat(str) method concatenates or /oins two strings.<script> var s,/avascript 0var s",concat e&le0var s$,s.concat(s")0document.write(s$)0
</script>
Program:
<!DOCTYPE html>
<html> <body> <script>
var s1="javascript ";
var s2="concat example";
var s3=s1+s2;
document.write(s3);
</script> </body> </html>Dutput:
/avascript concat e&le
3) JavaScript String indexOf(str) Method
The JavaScript String inde&Df(str) method returns the inde& position of the
given string.<script> var s,/avascript from /avatpoint inde&of0var n,s.inde&Df(from)0
document.write(n)0</script>
Program:
<!DOCTYPE html>
<html>
<body>
<script>
var s1="javascript from javatpoint indexof";
var n=s1.indexOf("from");document.write(n);
</script>
</body>
</html>]
Dutput: 11
4) JavaScript String lastIndexOf(str) Method
The JavaScript String lastInde&Df(str) method returns the last inde& position of
the given string.<script> var s,/avascript from /avatpoint inde&of0
<script> var s, /avascript trim 0var s",s.trim()0document.write(s")0</script>
Dutput:
/avascript trim
JavaScript Date Object
The Javacript date ob/ect can be used to get year month and day. Eou can
display a timer on the webpage by the help of JavaScript date ob/ect.
Eou can use different #ate constructors to create date ob/ect. It provides
methods to get and set day month year hour minute and seconds.
Constructor
Eou can use % variant of #ate constructor to create date ob/ect.. #ate()". #ate(milliseconds)$. #ate(dateString)%. #ate(year month day hours minutes seconds milliseconds)
JavaScript Date Methods
The important methods of date ob/ect are as follows:
Method Description
get<ullEear() returns the year in % digit e.g. ". It is a new method and
suggested than getEear() which is now deprecated.
get9onth() returns the month in " digit from to $.
get#ate() returns the date in or " digit from to $.
get#ay() returns the day of wee' in digit from to L.
get5ours() returns all the elements having the given name value.
get9inutes() returns all the elements having the given class name.
getSeconds() returns all the elements having the given class name.
get9illiseconds() returns all the elements having the given tag name.
JavaScript Date Example
*etGs see the simple e&le to print date ob/ect. It prints date and time both.!urrent #ate and Time: <span id,t&t></span> <script> var today,new #ate()0document.getKlement2yId(Gt&tG).inner5T9*,today0</script>
Program:
<html> <body>Current Date and Time: <span id="txt"></span>
<script>
var today=new Date();
document.getElementById('txt').innerHTML=today;
</script> </body> </html>
OP:%urrent &ate and 'ime( 'hu Apr $) !$1* 11($+(1, #M'$*.$ /0ndia Standard 'ime
JavaScript Current Time Example
*etGs see the simple e&le to print current time of system.
The JavaScript math.round(n) method returns the rounded integer nearest for
the given number. If fractional part is eual or greater than . it goes to upper
value otherwise lower value .
<or e&le % for $.Z $ for $.$ L for .B etc.
Hound of %.$ is: <span id,pL></span><br>
Hound of %.Z is: <span id,pZ></span> <script> document.getKlement2yId(GpLG).inner5T9*,9ath.round(%.$)0document.getKlement2yId(GpZG).inner5T9*,9ath.round(%.Z)0
</script>
Dutput:
Hound of %.$ is: %
Hound of %.Z is:
Math.abs(n)
The JavaScript math.abs(n) method returns the absolute value for the given
number. <or e&le % for -% L.L for -L.L etc.
6bsolute value of -% is: <span id,p[></span> <script> document.getKlement2yId(Gp[G).inner5T9*,9ath.abs(-%)0</script>
Dutput:
6bsolute value of -% is: %
Lesson Plan No. 1":- oncepts o& Pop >p boxes in *a%aScript
Browser Object Model
%. Browser Object Model BOM!
The ,rowser -bject odel (2D9) is used to interact with the browser.
The default ob/ect of browser is window means you can call all the functions of
window by specifying window or directly. <or e&le:window.alert(hello /avatpoint)0
is same as:alert(hello /avatpoint)0
Eou can use a lot of properties (other ob/ects) defined underneath the window
ob/ect li'e document history screen navigator location inner5eight
inner1idth
Note: The document object represents an html document. It forms DOM (DocumentObject Model).
The window.prompt() method can be written without the window prefi&.
Example
var person M prompt8":lease enter your name", "arry :otter"9?
if 8person PM null9 Q document.get1lementHy7d8"demo"9.innerT)! M "ello " O person O "P ow are you today"?S
Example of prompt() in javascript
It displays prompt dialog bo& for input. It has message and te&tfield.<script type,te&t/avascript> function msg()7var v, prompt(1ho are youU)0
alert(I am ;v)08
</script>
<input type,button value,clic' onclic',msg()/>
Output of the above example
Example of open() in javascript
It displays the content in a new window.<script type,te&t/avascript> function msg()7open(http:www./avatpoint.com)08</script> <input type,button value,/avatpoint onclic',msg()/>
Output of the above example
Example of setTimeout() in javascriptIt performs its tas' after the given milliseconds.
<script type,te&t/avascript> function msg()7setTimeout(function()7alert(1elcome to Javatpoint after " seconds)8")0
The document.get0lement,y1d() method returns the element of specified id.
In the previous page we have used document.form%.name.value to get the
value of the input value. Instead of this we can use
document.getKlement2yId() method to get value of the input te&t. 2ut we need
to define id for the input field.*etGs see the simple e&le of document.getKlement2yId() method that prints
cube of the given number.<script type,te&t/avascript> function getcube()7var number,document.getKlement2yId(number).value0alert(number=number=number)08</script> <form>
The inner!ext property can be used to write the dynamic te&t on the html
document. 5ere te&t will not be interpreted as html te&t but a normal te&t.
It is used mostly in the web pages to generate the dynamic content such as
writing the validation message password strength etc.
Example of innerText property
In this e&le we are going to display the password strength when releases
the 'ey after press.<script type,te&t/avascript > function validate() 7var msg0if(document.my<orm.userFass.value.length>)7msg,good08else7msg,poor08document.getKlement2yId(GmylocationG).innerTe&t,msg08
JavaScript Form Validation. JavaScript form validation
". Example of JavaScript validation
$. JavaScript email validation
It is important to validate the form submitted by the user because it can haveinappropriate values. So validation is must.
The JavaScript provides you the facility the validate the form on the client side
so processing will be fast than server-side validation. So most of the web
developers prefer JavaScript form validation.
Through JavaScript we can validate name password email date mobile
number etc fields.
JavaScript form validation example
In this e&le we are going to validate the name and password. The name
can+t be empty and password can+t be less than L characters long.
5ere we are validating the form on form submit. The user will not be forwarded
to the ne&t page until given values are correct.<script> function validateform()7var name,document.myform.name.value0var password,document.myform.password.value0
if (name,,null RR name,,)7alert(>ame canGt be blan')0return false0
8else if(password.length<4)7alert(Fassword must be at least L characters long.)0return false08
JavaScript validation with image*et+s see an interactive JavaScript form validation e&le that displays correct
and incorrect image if input is correct or incorrect.<script> function validate()7var name,document.f.name.value0var password,document.f.password.value0var status,false0
if(name.length<%)7document.getKlement2yId(nameloc).inner5T9*,Pimg src,Gunchec'ed.gifG3 Flease enter your name0status,false08else7
document.getKlement2yId(nameloc).inner5T9*,Pimg src,Gchec'ed.gifG30status,true08if(password.length<4)7document.getKlement2yId(passwordloc).inner5T9*,Pimg src,Gunchec'ed.gifG3 Fassword must be at least L char long0