Advanced Web Programming

You might also like

Download as txt, pdf, or txt
Download as txt, pdf, or txt
You are on page 1of 18

so focus is on

1. hope could you could attempt


some assignments ...
2. css . there is a concept called class.
css is, that it will not get applied automatically
we have to apply it on need basis.

we want to use html, css and javascript


together that is we are aiming for.

our focus currently is to ensure


that we can use html,css and javascript
together and build some programs.
we are aiming for this.

doubts which are coming in the chat


I will make a list of it explain each of them

javascript somebody asks what do you know

1.javascript is a programming langauge


which can be used in variety of ways.
for example

In web applications i can make javascript


to work within a html page.. to change some sections
of the html page by using some ready objects
and functions of javascript.

2. we can use javascript in servcie layer of three tier


architecture or dao layer of three tier architecture
etc. this we do it for example in a framework called
nodejs ...

3. with respect to syntaxes look , javascript is a loosely


typed languge in which most of things are dynamic
for example normally array size is fixed, but in javascript
array size is not fixed.we dont need to mention
what is data type when we create a variable javascript
tells I will judge automatically for you.
for example

var x =3;
when we operate on this variable, javascript judges
whether x is a int or a string ....

var x =3;
var y = x * 4;//now javascript will judge that x will be an integer.
test yourself whether you
know what to tell with respect

one word
web -- http
html -- structure
css -- decoration, class
javascript -- nature of langauge and how it has changed
over a period of time...

chat is available to be in form of a txt file i will look


into it and answer of each of the doubts.

please focus on getting html


javascript and css working together.

i dont want to go in multiple directions and ...

how do i write a html basic code


I am assuming everybody know it.

how to write css in the head region


syntax i hope people attempted atleast example

how to write javascript in a html page.


answer is.
1.

first assignment in javascript


is write a hello world javascript.

variety of ways currently i would prefer to use


a ready made function avaialble only in browsers
when we use javascript called alert.

alert("1");

how do you run it, run the html page...


observe two things.

1. alert was not written inside


any function of javascript. so it will get executed.
when page is loaded.

once you write something in the function


then obviouisly that will get called after the function
is getting called.

anybody who defines a function first is not doing a correct


because what is going to happen is the following
we write a function but then if we forget to call it somewhere
in the code, that is ultimate stupidity in writing functions.

make a habit of first proving you called a function


and then define it.

we have not met in person still


my problem always has been people
are generally not good at designing functions
I think as a programmer in any langauge it does not
matter we have to collect data as to how good are
we at designing functions.

that requires us to go into details.

1. just print alert in head region of html page


2. write a function which prints 23 inside
it thru an alert and then call it...

javascript has evolved over a period of time.

it began like X ..... Z


there are lot of changes in the langauge.

but still there is lot of code where javascript is used like


a old langauge like how we used in 2000 to 2005.

2006 javascript had lot of changes in it....

the important point


1. old way how javascript works.
2. new way how javascript works.
3. how javascript works with frameworks.

1. pleaes put your focus on getting


tiny basics of html, css and javascript
understandable first then we will see
how to improve this ...

tiny basic, html how to give id


css -- class and put some property to it, like color.
javascript
how to create a variable
how to create a function.

we should always think of functions


becuase of functions we need to
think of variables.
becuase of variables we need to think of data types.

what executes in the computer, answer is function.


function, input arguments and return types.
input argument and return type, means we come
to world of variables, becuase of variables
we have to know what is data type.

In C you can see what is return type


what is input argument or in java also ...

but in javascript

function f1(x) what will go into x, you dont see


specific mentioning of return type..

{
var y = ?
return y; //what is y we may not know
}

this kind of syntax we should get used to in javascript.

write a function that takes a length and breadth


and returns the perimter of the rectangle.

function getPerimeter(length,breadth)
{
var perimeter =2(length+breadth);
return perimeter;

}
many a times we are very busy calling
other people functions and not writing our function
if we are calling other fucntion, then they decide.
what will be the input argument what will be return type
and what will be function name and our job is only
to call it, this is ok. but in a project what we are supposed
to do is come up with our own functions, here we should
show ability to get into details and justify our function design.

when you write a function dont be optimistic it will work.


just prove your function is getting called and input argument
is received and then whatever you are returning reaches
the calling function.

programmer is supposed to tell output of program before


running and not after running

more than brilliance process matters.


never be optimistic when writing functions
and check functions are getting called, input argument
is reaching return type is reaching calling place.

.. repeated for 4th or 5th time, but following is very


important.

write a function takes

length,breadth and height and return area

function areaofcube(length,breadth,height)
{

today assingment i will give


5 to 6 assingmetns where i will ask you
write functions and then prove you can call it
this assingment see whether you are able to do it.

to point of getting bored.


1. first prove that variable creation you can do
2. function calling and function definition you can do .
when it comes to functions
we should know how to pass and return
simple types.
object types
collection types ( group of things example some ds)

for example if i tell , please pass an array to a function and return the
sum of elements in the array. these kind of things we should be comfortable
in any programming langauge ....

there is a concept called


verbal reasoning which is very important in real life. it is important understand
what is problem is telling, most of times we want people to be clear in
thier talking but it may happen it may not happen, then we should try our
best to figure what they are asking and then adapt.. boring but very important.

If i give these kind of assignments on javascript people should be able to attempt


it ....
try your best and later on we will see how to adapt.

how to mention the size of the array


array in javascript does not have a size.
becuase it is not an array in fact it is like
a linked list.

normal array in any language


is size is fixed
in javascript array size is not fixed.
hence it tells dont need to give any size.
and I can remove elements from the array also.

being optimistic is not good for


a programmer

being optimistic is not good for


a programmer

being optimistic is not good for


a programmer

being optimistic is not good for


a programmer
being optimistic is not good for
a programmer

always prove
1. input arugment reached the function
2. return type reached the calling function.
3. you can now think of logic building...

word called Object.

Object
state -- variables
behaviour -- functions.

Sensor object with sensorId can be variable.


activateAsensor has to be a function.

in javascript you get many objects, array also is an object.


which has got a property called length, which will give you the length
of the array.

for debugging in case we dont have sufficient data then we should not debug
we should put all our energy on getting the data...

how do i know why code is not working ... becuase still i dont have data
once upon a time, when javascript was creating lot of problems becuase
code was bad, browsers used to keep showing it on the screen, this was irritating
to the end customer so browsers in interest of customers started hiding
the problem thru some console messages, so now if we have to see why
the problem is coming we have to go to browser console and see what problem
we have...

we will keep getting struck


but until we collect data we should
not attempt debugging.

i have problem i will change at 1000 places and it starts working


I dont know why it started working ..

sometimes while adding you will suddently see that things are concatenated.
that is becuase , some where a string has joined the party, then javascript
tells everything is a string

let to write functions which can take input arguments and return type
both in simple things like number, char and also arrays and objects.
let to write functions which can take input arguments and return type
both in simple things like number, char and also arrays and objects.

let to write functions which can take input arguments and return type
both in simple things like number, char and also arrays and objects.

I will give you some assingnments based on this.

people need patience to debug javascript code, and in initial stages we should
not look for shortcuts and undergo the process as we do assignmetns ....

just keep in mind simple things.


for example, nobody will use raw javascript the way we are using it.
it is a sign that we are not in today world, starting from 2006, now it is 2020
people always use javascript along with some framework of javascript
like jquery , or angular or react .....

learn syntax that is required for example


hwo to create a variable
how to create basic programming constructs .
.....

but remember that in real life we use things along with a framework.

should i use javascript or jquery , this is stupid question.


jquery is written in javscript along, it syntax also is javascript only
only then you will get ready made library functions which will make things
easier.

for example.
how do i do exception handling, in java, you need to know java syntax.
how to work on ready made DS in C++ or in Java, answer you need
to know javascript syntax.

similary for working on javascript framework we need to know


javscript syntax ... this is what we are preparing for.

before running the program ensure saving of the file is done.

how to give input to the array from the user. according to me as of now
this is waste of time, becuase we can use something equivalent of scanf
etc ... in real life dont bother too much of input and output becuase
you know 3 tier architecture, presnetation is a layer and not a function.

how we will give input in javascript.


we have textbox in html page, we will come to this today evening or
worst case tomorrow morning ...you will type some number into the textbox
and click on button or during some event we will add to the array
we will see these kind of programs but currently our focus is

tiny phase of javascript


1. how to create a variable.
data types -- simple number, array, string.
2. write functions
3. call functions.

this is problem which i want to attempt.

i want to pass a array to a function and return two numbers one is


sum of odd numbers.
sum of even numbers.

basic maths
1. what is input given -- array of numbers, it contains both odd or even
2. what is output expected. -- 2 numbers sum of odd, sum of even
3. do we know process how get output...

input argument is an array


return type. we can think of multiple things but you should become clear
what is your approach.
for example.

i will return an array which contains 2 elements first element contains


sum of even numbers, and second element contains sum of odd numbers.
ok

I will return an object which will two properties called evensum or oddsum.
....

I am looking at you from a 4 month of view, where how you write code
in multiple modules eventually leading to a project ....

people who look for only one way of doing things, are already in trouble
becuase in any design, things are non deterministic, that means
you can do things in multiple ways and still get correct result ...

most important take whatever you want, but justify and give reason
as to why you took at appraoch.

we should very comfortable working with any kind of array or ds.


we dont need to code ds we need know to how to use ready made
ds that is most important in real life although in interview
they will surely ask us to code datastructures.

may be once you get a job you can meet the person who has asked
to code ds and hey tell me you asked me this ds question tell when did you
ds in your project this story is true for C world C++world or java world or X
world...
interview guys ask ds so that can club multiple questions into one.
for example I dont want to ask ... do you for loop, do you if...

moral dont know how to create ds that is ok. but dont know how to use
ds that is pathetic...

DS -- group, operations.

prove function is getting called.


prove input argument is reaching
prove return type is reaching the calling place.

in javascript you will see writing semi colon is optional if you are starting
a new line but dont do all these things, just make a habit of writing
semi colon after every statemenet, similarly use { } liberally

if you write just one line under if condition do use { }


code will change over a period of time... , many people use the word
"performance", most of times tehse guys use the word "performance without
having data

if somebody something is slow, you should ask tell me how much time it look
you changed the code, it is fast, tell me how mcuh time it takes.let us
get data and then interpret it and not simply keep telling it is fast, it is slow.
it is good practice .... this is not science..

become a fan of problem solving rather than java or javascript or .net ...

you can solve complex problems by suspending complexity...

dont get carried away by syntax...

usually what i have observed when i give problem on array or some object
or some ds and tell do ths problem in javascript, they will tell i have a problem
then when you ask them to do the problem in c+= there also they will
get a problem or java, there also ....

problem is concept not being clear rather than syntax...

most important of code is not the code.

but those observed must have seen, that i did not get this programworking
with just one go... I had look at the output of the program multiple times
to make it working

for example first time, i just proved that input argument is got and return
type from teh function is working ....

whenever we write code we should ensure we check the output multiple times.
I have told couple of people while coding, I would just sit and watch a like
mute spectator with no comments as to how they will code, they tell no.

basics of coding is we should have the habit of looking at output frequently.

a person who is calling the function should know always

1. what input argument he is passing what does it mean.


2. what return type is function returning and what does it mean.
3. how will i know if the function failed.

these 3 are most basic things for any person to know if he is calling
a function.

when I ask people how do you know printf in C fails. answer you should
read documentation, that is only way to know I read documentation of print
only then i will come to know print returns an int.

by thinking i wont know

similary System.out.println in java. how do you know what is return of println


function we cannot think about it, becuase it is some other person function
hence we have to look at documentation.

1. thinking -- for your own function, architecture ....


2. finding out -- for other people function ... more applicable

real life job we have to justify our quality as a programmer thru data.
some of the data points you an consider is

1. your ability to choose functions and how you relate to them in terms of usage.

Object can group related information together.


many a times we work on X, X needs Y, and what you will see Y we may not know
how do we know Y quickly and come back to X...

object...
how do you create an object in javascript. this looks like a shocking thing
most of times especially for people from C++ and java backgrounds why..

they always think to create an object, you must have a class.

create an object in c++


first create a class, and then create an object.

how do you create an object in java.


create a class and then create an object.

this need not be done in javascript world.

technically also we use the word OO and CO.


ie Object oriented and we dont say Class Oriented

you can create an object in javascript without creating a class. how.

var x={};//this is an object in javascript.


x.oddsum=3; // odd sum is one property
x.evensum=4; //even sum is another property.
there could be different ways of designing things so dont become a fan of
some X approach or Y approach,,,... ABsoluteness does not exist indesign.

when i multiple ways, use which ever you want but consistantly and show
and justying the reason why you wrote code that way only. that is important
easy to say and most important it should be done ....

before you attempt complex programs attempt a simple program


for example we want to do object so that we want to try

I want to pass length and breadth to a function and get AreandPerimter


togher in an object.

RectangleInfo Object with me which contains area and perimeter.


input argument i want to pass as length and breath.

function getAreandPerimeter(length, breadth)


{
var x ={};
x.area = length *breadth;
x.perimeter = 2 *length + 2 *breadth;
return x;

}
if you have to do this, in java, you should first create a class and then
create an object, here we can directly create an object without a class.
javscript is object based langauge

what is moral of the story.


1. dont always think you need a class first and then you can create an object.
2. we can create an object directly without creating a class.

again observe basic things, I never want to createa function before calling it
i want go guarantee myself that a function has always been called before
being created.
that brings clarity as to what to write inside the function.

whenever you create an object pepole have a tendancy to ask to which class
this is wrong thing in javascript, you can have object without a class

you have an obejct without a class.


you have an obejct without a class.
you have an obejct without a class.
you have an obejct without a class.
you have an obejct without a class.
you have an obejct without a class.

again the appraoch, whether you deal with object, simple data type
array or datastructure, approach of how you look at function should
be same.
1. prove input argument is got
2. return type reaches...
this should become our national anthem for our batch ...

when two pieces of information logically belong to the same thing.


we should not pass it as separate things, that is a sin, in oo.

when things logically belong to same entity learn to pass objects.


for example

void displayDetails(int empno, String empname, int deptid)//sin


void displayDetails(Emp e) //correct becuase empno, empname and deptid
logically belong to Emp.

later on once we meet in person in CDAC then we will do one more recap
on OO, why i said is, becaue lot of people people talk about OO and when
you observe their code there is hardly oo concept use it will like c code
where structure has been replaced with classes. this is not OO.
there can be different styles of code, what i want to show you
some javascript code which uses objets and if you attempt same thing
in java or in c++ you yourself will able to see how syntax changes ...

most of times what an object contains, should be told by person who


creates the object thru some documentation or you can do reflection
but that is tedious hence we shoul get used to habit of reading
documentation whenever we use javascript, else we can get into lot of
research and destruction in terms of prediction unnecessarily

what did i show you so far

1. showed you a function whose return type was an array


and input argument was basic data type number.

2. showed you a function whose return type was an object


and input argument was just numbers.

3. showed you a function whose return type was an object


input argument also is an object.

tiny javascript basics.


1. var -- number, array, object.
2. functions input arguments can be any of the above
so can return type ...

to understand also follow this approach.


whenever we see function definition to understand dont start there
go fucntion calling first and then come to function defintioin.

dont get distracted keep focussing on what.

1. variable, simple, array, object


2. function calling and function defining using the above.
3. i will give some 7 to 10 assignments on javascript based only on that
today, and see wehther you want to complete it at your own convenient time.

moral of the story remains same, in any langauge you should be good
at function design, data types, basic, array , objects and datastructures
we should know how to pass it and how to return it from functions.

quick summary of today.

1.javascript syntaxes can be little bit messy for us in the beginning


becuase we are used to old world of "C, Java or c++"
2. so become familiar with javascript in terms of its syntax.
3. variable how do you assign simple variables, how do you assing array
and how do you assign objects. all the 3 you should get comfortableI will give
you assignments based on this only.

my english is not all that great, so tolerate, my grammar is even more poor
feel free to let me know in case my sentence is not correct ....

I hate using powerpoint slides or ready made programs most of timesin the beginning
later on ..

simple question ..
we have a box, and nobody is going to use it. in that case what is good
to put inside the box, a watch, a diamond or a garbage etc.. nothing makes
sense becuase nobody is going to use it.... you should not even touch the box.
this is how our html is as of now.

becuase we did not use javascript, becuase we did not use server side
all things like value name id all are useless as of now once we start
using server side you will see the value of name, once you
start using client side then value of id...

theory told you to invoke form action, you need a submit button and not
a normal button.

file:///C:/Users/vasul/Documents/Zoom/2020-04-14%2014.28.43%20DAC%20KP%20CDAC
%20Bangalore's%20Personal%20Meeting%20Room%207395131973/notes/assignments/a03.html?
file:///C:/Users/vasul/Documents/Zoom/2020-04-14%2014.28.43%20DAC%20KP%20CDAC
%20Bangalore's%20Personal%20Meeting%20Room%207395131973/notes/assignments/a03.html?

because of illogical things done ignore that assignment 3.


one assingment less.

value of button will become what will appear on the button.

my request we have lot of doubts on forms wait till we touch javscript


with forms you will see benefits of using value id, once we start
php you will see name value becomes important.

I dont want you to hear the word called id and name first time
when we start javascript and php hence it was covered.

file:///C:/Users/vasul/Documents/Zoom/2020-04-14%2014.28.43%20DAC%20KP%20CDAC
%20Bangalore's%20Personal%20Meeting%20Room%207395131973/notes/assignments/a03.html?
x=abc&y=def

file:///C:/Users/vasul/Documents/Zoom/2020-04-14%2014.28.43%20DAC%20KP%20CDAC
%20Bangalore's%20Personal%20Meeting%20Room%207395131973/notes/assignments/a03.html?
if you observe if you use id, information will not go via post or get to
whereever you are sending
but if you use name it will go.

file:///C:/Users/vasul/Documents/Zoom/2020-04-14%2014.28.43%20DAC%20KP%20CDAC
%20Bangalore's%20Personal%20Meeting%20Room%207395131973/notes/assignments/a03.html?

a03.html was our action, and since we used id in a02.html

we should learn to use both id or name.

stop the class now here itself take abreak


and we will meet at 2.30
we will start with doubts first
and i will open google form and also answer allthe doubts.
head region it means head tag of the html .

I will explain most of concepts one more time


also...

You might also like