Javascript:
Javascript is one of the 3 languages all web developer must learn.
1) Html defines content of webpage.
2)CSS specify the layout of web page.
3) Javascript program the behaviour of web pages.
document.getElementById("demo").innerHTML="Hello Javascript";
javascript can change the HTMl content.
javascript can chnage the CSS Properties.
Javascript can decide what action to be performed.
How to include javascript.
<script> </script>
it can be included in <head>
or it can be included in<body>
Ex:
<script>
document.getElementById("demo").innerHTML="hello javascript";
</script>
Java Script Output:
javascript display possibilities.
1)Writing into an HTML element using innerHTML.
2)writing into an alert box.
ex: window.alert()
3)writing into HTML output
document.write("hello javascript");
4)writing into browser console
console.log()
Javascript Variable Declaration:
keyword 'var'
ex: var x;
var y;
var x=10,y=10,z=20;
var x=10;
var x="abc";
1) variable name should not start with number.
2)reserved words can not be used as variable name.
3) name can begin with $.
4) variables are case sensitative.
Javascript Operators:
1) Arithmetic operator:
+ additon
- subtration
* multiplication
/ division
% modulus x%10
++ Increment x++; x=x+1
-- Decrement
** raise to operation a**2
Assignment Operator:
= x=y
+= x+=y x=x+y
-= x-=y x=x-y
*=
/=
%=
<<=
>>=
<<<=
&=
^=
!=
**=
Comparison Operator:
== equal to
=== equal to value and equal to type.
x=10
y="10"
x==y true
x===y false
!=
!==
>
<
<=
>=
Logical Operator:
&& and
|| or
! not
String Operator:
+ operator is used for concatenation
var txt1="abc";
var txt2="xyz";
var txt3=txt1+" "+txt2;
Conditional(Ternary Operator)
syntax:
variablename=(condition)?value1:value2;
ex:
var voteable=(age<18)?"to young":"old enough";
bitwise operator:
& and sets each bit to 1 if both bits are 1
| or sets each bit to 1 if any one of two bits is 1.
^ xor sets each bit to 1 if only one of two bit is 1.
~ not Invert all the bit.
<< zero fill left shift
shift left by pushing zeros from right and let the leftmost bits fall of
>> signed right shift
shift right by pushing copies of leftmost bit in from the left, and let right most
bits fall of
>>> Zero fill right shift
shifts right by pushing zeros in from the left and let the rightmost bits fall of
Example:
5 & 1 0101 & 0001 0001 1
5 | 1 0101 | 0001 0101 5
~5 ~0101 1010 10
5<<1 0101<<1 1010 10
5^1 0101 ^ 0001 0100 4
13>>1 1101 >> 1 1110 14
13>>>1 1101 >>> 1 0110 6
Javascript loops:
if you want the same code again and again.
1) for
2)for/in
3)for/of
4)while
5)do/while
1) for
synatx:
for(stmt1;stmt2,stmt3)
{}
ex:
var i;
for(i=0;i<3;i++)
{
statement..
}
2) for/in
(loop through properties of any object)
var person={fname:"abc",lname:"xyz",age:25};
var text="";
var x;
for(x in person)
{
text+=person[x];
}
3) for/of loop(loop through the value of iterable objects)
var cars=['BMW','volvo','audi'];
var x;
for(x of cars)
{
document.write(x+"<br>");
}
4) while loop
syntax:
while(condition)
{
statement;
}
ex:
while(i<10)
{
text+=i;
i++;
}
5)do/while loop
do
{
statement
}while(condition);
Javascripts Conditional Statements:
break: Terminates a switch or a loop
continue: Jumps out of loop and start at the top.
if ---else:
switch:
try---catch
JAVAscript popup BOxes:
1) Alert Box
2) Confirm Box
3) Prompt Box
1) Alert Box:
An alert box is used if you want to make sure information comes through the
user.
Syntax:
window.alert("Welcome to CS");
alert("Welcome to CS");
When an alert boc pops up the user will have to click ok to proceed further.
2) Confirm Box:
Syntax:
window.confirm("do you want to submit"):
confirm("sometext");
there will be options on confirm box
Ok : True
cancel: False
3) Prompt box:
syntax:
window.prompt("ENter a number");
prompt("sometext");
ok : True
cancel: False
Javascript Functions:
syntax:
function funtion_name(parameter1,parameter2..)
{
//code to be executed
}
Function Invocation
1)when an event occure
2) invoke through javascript
3) automatically (self invoked)
Function Return:
when javascript reaches a return statement the function will stop executing
EX:
function myFunction(a,b)
{
var c= a*b;
return a*b;
}
var x=myFunction(4,3);
Javascript Events:
Common HTML Events:
onchange: An HTML element has been chnaged.
onclick: The user clicks on HTML element.
onmouseover: The user moves mouse over an HTML element.
onmouseout: the user moves mouse away from HTML ELement.
onkeydown: The user pushes keyboard key
onload: The browser has finished loading the page
Calling a Function with timer:
Timing Events:
The window object allows execution of code at specified time intervals. These
time intervals are called Timing Events.
setTimeout(function,milliseconds)
function:function to be executed
milliseconds: number of milliseconds before execution.
Execute a function after waiting sepecified number of milliseconds.
var myvar=setInterval(function, milliseconds)
same as setTimeout(), but repeat the execution of the function continuously.
clearTimeout(function variable_name);
stop the execution of function sepecified in timer methods.
