javascript bangla e-book by faruk.pdf
TRANSCRIPT
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
1/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
2/111
-
JavaScript BanglaE-book
(For Web Developers)
-(https://www.facebook.com/faruk.ice09)
(http://www.WebTechnologyBlog.com)
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
3/111
(https://www.facebook.com/groups/Wordpress2Smashing)
(http://www.wpbangla.com)
-
(https://www.facebook.com/faruk.ice09)
(http://www.WebTechnologyBlog.com)
(https://www.facebook.com/zamil.hossainsezan32)
-
JavaScript Bangla E-book is written by MD.Abdullah Al Faruk & Published by
Wordpress Group Bangladesh. Copyright by MD.Abdullah Al Faruk & WordpressGroup Bangladesh. Caution: This book is not for sell.It's free to distribute.
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
4/111
.........
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
5/111
-
-(https://www.facebook.com/faruk.ice09)
(ICE)
(https://www.facebook.com/zamil.hossainsezan32) (https://www.facebook.com/groups/Wordpress2Smashing/)
--
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
6/111
-::-
-
?
JAVA JavaScript ?
-
-
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
7/111
-
?
o
-
o -
o -
-
?
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
8/111
(Local Variable) (Global Variable)
Loosely-typed Language...
-
o . (NumberDataType)
o . (Logical/BooleanDataType)
o . (StringDataType)
o . (NullDataType)
o
. (UndefinedDataType)
-
(JavaScript : Constants)
TableofJavaScript Reserved Words
Java Keywords (Reserved by JavaScript)
ECMAScipt Reserved Words
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
9/111
Other JavaScript Keywords
-
?
o 1.string Operators
o 2.comparison Operators
o
3.arithmetic Operators
o 4. assignment Operators
o 5. logical(or Relational) Operators
o 6. Conditional (or ternary) Operators
-
.
.
.
.
.
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
10/111
-
(
)
( ) ?
o
.if statement
o
.if...else statement
o .if...else if....else statement
o .switch statement
-
/
( ) ?
( )
While loop
Dowhile loop
For loop
Forin loop
(break Statement)
(continue Statement)
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
11/111
-
?
?
-
?
.-
(JavaScript Array Function)
(JavaScript Boolean Function)
(JavaScript Math Function)
(JavaScript Date Function)
(JavaScript Number Function)
(JavaScript String Function)
(JavaScript RegExp Function)
.
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
12/111
-
?
/
-
Alert Box
Confirm Box
Prompt Box
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
13/111
-
?
.-
.
1.new
2. (initializer) / Constructor function
-
?
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
14/111
-
?
?
-
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
15/111
-
?
- ( run/execute - /++ /++ /++ HTML ,
execute/run , () , ,
Brendan Eich LiveScript , , EcmaScript ECMAScript ECMA (European Computer Manufacturer's Association)
.
/
.
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
16/111
JAVA Javascript ?
, ,
Sun Microsystems Brendan Eich , HTML ,reserved-words-
(script) (-macro or batch file) HTML CSS HTML CSS
Mouse Trailers ( site ) ,, Alert
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
17/111
...
-
HTML , -
-HTML5 canvas( - ) , (-Facebook, Twitter, etc.)
-
:
Internet Explorer security setting check
Toolsmenu Click
menuInternet Options
Internet OptionsSecuritytab Click
Custom Level Click security settings
Scroll Scriptingsection
script Enable Select
OK Click
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
18/111
Yes Click
- :
Firefox Options Content setting check
Toolsmenu Click
menuOptions
OptionsContenttab Click
Enable JavaScript check box
OK Click
:
Opera Preferences Content setting check
Toolsmenu Click
menuPreferences
Preferences Advancedtab Click
itemContent
Enable JavaScript check box
OK Click
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
19/111
:
HTML-
Notepad++(for Windows users) and TextWrangler(for Mac users)
-
(a set of rules ) -
... ...
-
-
language: HTML XHTML-
type: (-"text/javascript" )
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
20/111
"Hello World" -
script type "text/JavaScript" document.write -
Hello World!
Hello Dolly -
document.write(Hello Dolly);
Hello Dolly (;) Statement ( Statement ) Statement , ,,
-
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
21/111
-
document.write("This is a heading");
document.write("
This is a paragraph.
");document.write("
This is another paragraph.
");{
} -
{
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
22/111
document.write("This is a heading");
document.write("
This is a paragraph.
");document.write("
This is another paragraph.
");}
?
-
- - ( - )
-
, ( ) - alert box
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
23/111
sayHello head "Hello World!" alert box
-
This is web page body
-
Hello World
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
24/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
25/111
...... , -function sayHello() {
alert("Hello World")
".js" extension filename.js HTML src filename.js -
.......
something.html HTML file file directory
:
// -
// , document.write("This is a heading");
// document.write("
This is a paragraph.
");document.write("This is another paragraph.
"); -
8/10/2019 JavaScript Bangla E-book by faruk.pdf
26/111
/* */document.write("This is a heading");document.write("
This is a paragraph.
");document.write("This is another paragraph.
");,
(-)
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
27/111
-
(Container) - -Hello Bangladesh Integer value 100 (Variable Variable declare )
, (x=5) (z=x+y)
(symbolic) ( name)
move
Variable Var
Variable (Value)
VarVariable_Name=Value;
Var
Varx=12; x=12;
, , ( ; )
// var firstName;
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
28/111
// var firstName, lastName;
//
var firstName = 'Homer';
// var firstName = 'Homer', lastName = 'Simpson';
: "var" programmingpractice "var"
:
Hello World!I am learning JavaScript!Script is Finishing up...
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
29/111
HTML script (=) my_var = "Hello World!" my_var "Hello World!" order script
(y Y are ) (A,B,c) (_)
(0-9) ,
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
30/111
(0-9) -breakboolean
Local Global
(
Local Variable)
: Local
Local ({})-
function checkscope( ){
var myVar = "local"; // Declare a local variabledocument.write(myVar);
}
(Global Variable) : (Function) GlobalVariable Variable Global Variable Global Variable -
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
31/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
32/111
-
-
Number, String, Boolean, Null (primitive) -
. (Number) :1,2,55,.3641.
. (Boolean) TRUE FALSE.
.(Strings of text) :islamicuniversity,cse,ice
null undefined trivial object
composite
-
.
(NumberDataType)
- 32-bit 64-bit
-
var age = 25; // simple, decimal, integervar price = 45.95; // floating pointvar permissions = 0775; // integer in octal, 509 in decimal
// (note the leading zero)var flags = 0x1c; // integer in hexadecimal, 28 in decimal
// (note the 0x prefix)var measurement = 5.397e-9; // floating point in// scientific notation
64-bit IEEE 754
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
33/111
.
(Logical/BooleanDataType)
Boolean -true false ,
var enabled = true;var disabled = false;
. (
StringDataType)
var name = 'Homer', lastName = "Simpson";var host = 'Conan O\'Brien';var path = 'c:\\temp\\dir\\myfile.txt';var tabDelimited = "COL1\tCOL2\tCOL3\nVAL1\tVAL2\tVAL3";
. (
Null DataType)
null null ( ) null -null null null Null, NULL
var name = "Homer";var ssn = null;
.
(UndefinedDataType)
Undefined -undefined null- Undefined , Constant -
var name = "Homer";var ssn;
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
34/111
ssn undefined null
-
(JavaScript : Constants)
const read-only , const const
const country = 'Bangladesh';// function abc(){const abc = 55;}function abc()
{const x = 15;var x;}
, , ,
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
35/111
Table
ofJavaScript Reserved Words
break continue do for import new this void
case default else function in return typeof while
comment delete export if label switch var with
Java Keywords (Reserved by JavaScript)
abstract implements protected
boolean instanceOf public
byte int short
char interface static
double long synchronized
false native throws
final null transient
float package true
goto private
ECMAScipt Reserved Words
catch enum throw
class extends try
const finally
debugger super
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
36/111
Other JavaScript Keywords
alert eval Link outerHeight scrollTo
Anchor FileUpload location outerWidth Select
Area find Location Packages self
arguments focus locationbar pageXoffset setInterval
Array Form Math pageYoffset setTimeout
assign Frame menubar parent status
blur frames MimeType parseFloat statusbar
Boolean Function moveBy parseInt stopButton getClass moveTo Password String
callee Hidden name personalbar Submit
caller history NaN Plugin sun
captureEvents History navigate print taint
Checkbox home navigator prompt Text
clearInterval Image Navigator prototype Textarea
clearTimeout Infinity netscape Radio toolbar
close innerHeight Number ref top
closed innerWidth Object RegExp toString
confirm isFinite onBlur releaseEvents unescape
constructor isNan onError Reset untaint
Date java onFocus resizeBy unwatch
defaultStatus JavaArray onLoad resizeTo valueOf
document JavaClass onUnload routeEvent watch
Document JavaObject open scroll window
Element JavaPackage opener scrollbars Window
escape length Option scrollBy
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
37/111
-
?
, ,,, , +,-,* /
symbol() ( arithmetic) , Variable
1.string Operators
2.comparison Operators
3.arithmetic Operators
4. assignment Operators
5. logical(or Relational) Operators
6. Conditional (or ternary) Operators
1.string operator:
string operator -
+ += string string
( ) + -
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
38/111
i+am+myName
Iam stringmyName variable myName variable faruk
-
I am faruk
+=
Book+=about JavaScript
book variable- This book is, -
This book is about JavaScript
, -
2.Comparison
Comparison -
Comparison Comparison conditional -
if (age
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
39/111
Comparison -
x=5 comparison
== is equal to x==8 is falsex==5 is true
=== is exactly equal to (value and type) x===5 is truex==="5" is false
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x= is greater than or equal to x>=8 is false
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
40/111
equal double equal (==) Comparisonconditional statement , (==) (!==) () - 10==10 (==) (!==) 10==10
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
41/111
10 10 Conditional loop Comparison
3.arithmetic operator:
Arithmetic operators arithmetic
y=5 arithmetic operators -
+ Addition x=y+2 x=7 y=5
- Subtraction x=y-2 x=3 y=5
* Multiplication x=y*2 x=10 y=5/ Division x=y/2 x=2.5 y=5
% Modulus (division remainder) x=y%2 x=1 y=5
x=++y x=6 y=6++ Increment
x=y++ x=5 y=6
x=--y x=4 y=4-- Decrement
x=y-- x=5 y=4
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
42/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
43/111
4. assignment operator:
Assignment operators
x=10y=5 assignment operators -
Same As
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
44/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
45/111
5. logical operator:
variables valuesLogical operators
Comparison Logical operators
Assume variable A holds 10 and variable B holds 20 then:
&&Called Logical AND operator. If both theoperands are non zero then then conditionbecomes true.
(A && B) is true.
||Called Logical OR Operator. If any of thetwo operands are non zero then thencondition becomes true.
(A || B) is true.
!
Called Logical NOT Operator. Use toreverses the logical state of its operand. Ifa condition is true then Logical NOToperator will make false.
!(A && B) is false.
Given that x=6 and y=3, the table below explains the logical operators:
Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
46/111
6.Conditional Operator:
conditional operator
variablename=(condition)?value1:value2 ;
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
visitor"PRES",greeting"Dear President "
"Dear "
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
47/111
:
:
two plus ten = 12ten * ten = 100ten / two = 5
-
x=5+5;document.write(x); //10
x="5"+"5";
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
48/111
document.write(x); //
x=5+"5";document.write(x); // 55x="5"+5;document.write(x); // 55
-
-
.
, , - "myfunction" "myFunction" "myVar" "myvar"
.
, - -
var name="Hege";var name = "Hege";
.
(\) -
document.write("Hello \World!");
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
49/111
-
document.write \
("Hello World!");
.
-
-
-
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
50/111
.
(\) -apostrophes, new lines, quotes, -
var txt="We are the so-called\"Vikings\" from the north.";document.write(txt);
We are the so-called"Vikings" from the north.
-
var txt="We are the so-called"Vikings" from the north.";document.write(txt);
-
\'
\"
\\
\n
\r
\t
\b
\f
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
51/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
52/111
If Statement ,
-
var myColor = "Blue";
if (myColor == "Blue") {
document.write("Just like the sky!");
}
"myColor" "Blue" IfStatement "Blue"? document.write ("Just like the sky!") Just like the sky! Just like the sky!
.If.else Statement:
If , If If ......Else
If ......Else If Elseclause Elseclause if....else
if (){
}
Else{ }
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
53/111
var myColor = "Red";
if (myColor == "Blue") {document.write("Just like the sky!");}
else {
document.write("Didn't pick blue color?");
}
"myColor" "Blue" Just like the sky!
"Blue Didn't pick blue color?
.If...else if...else Statement
If ...Else If ...Else
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
54/111
if (-){
- }else if (-){
- }else if (-){
- }
Else{
}
var myColor = "Red";
if (myColor == "Blue") {document.write("Just like the sky!");}
else if (myColor = "Red") {document.write("Just like thesun!");
}else if (myColor = "Green")
{document.write("Just like thetree");
}
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
55/111
else {document.write("Suit yourself then...");
}
.JavaScript Switch Statement
if...else ifstatements
- if...else if "myColor"- "Blue" "Red" , Switch statement if...else if statementSwitch statement- , if...else if statement- Switch statement- conditional expression , , case statement- Switch statement
switch(expression)
{
case constant 1:
break;case constant 2:
break;
............
case constant n:
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
56/111
break;default:case 1 case 2 n }
. switch
. , case statement-
. switch- expression- case- constant- case
. case- simplecompound statement , break statement break;
. default: default: if...else ifstatement- else-
if...else ifstatement- switchstatement
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
57/111
{case "Blue":
document.write("Just like the sky!");break
case "Red":
document.write("Just like shiraz!");breakdefault:
document.write("Suit yourself then...");}//-->
Just like shiraz!
if...else ifstatements , switchstatement
- /
()
- , -
1.
While loop2. Dowhile loop3. For loop4. Forin loop
.
While Loop
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
58/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
59/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
60/111
do
{
statement;
}while (condition);
do...while (;)
var count = 0;document.write("Starting Loop" + "
");do{document.write("Current Count : " + count + "
");count++;}while (count < 5);
document.write("Loop stopped!");
Starting LoopCurrent Count : 0Current Count : 1Current Count : 2Current Count : 3Current Count : 4Loop stopped!
. for Loop
for loop for loop -
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
61/111
for (initialization;test condition; iteration statement){
Statement(s) to be executed if test condition is true}
:
Initialization (counter) initialization statement
test statement ,
iteration statement counter increase decrease
for
var count;document.write("Starting Loop" + "
");for(count = 0; count < 10; count++){document.write("Current Count : " + count );document.write("
");}document.write("Loop stopped!");
Starting LoopCurrent Count : 0Current Count : 1Current Count : 2Current Count : 3
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
62/111
Current Count : 4Current Count : 5Current Count : 6Current Count : 7Current Count : 8Current Count : 9Loop stopped!
.
for...inloop
for...in
for (variablename in object){statement or block to execute
}
variablename
var person={fname:"John",lname:"Doe",age:25};
for (x in person){document.write(person[x] + " ");}
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
63/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
64/111
document.write("The number is " + i);document.write("
");}Explanation: The loop will break when i=3.
for
[if (i==3)] break
(
continue Statement)
:
continuestatement continuestatement continuestatement break Statement-
var i=0;
for (i=0;i
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
65/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
66/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
67/111
var myProduct =new Array(400); // regular array (add an optional integermyProduct [0]="pen"; // argument to control array's size)myProduct [1]="book";myProduct [2]="marker";
. var myProduct=new Array("pen","book","marker"); // condensed array
.var myCars=["pen","book","marker"]; // literal array
numbers true/false ,
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
68/111
var myArray = new Array();myArray[0] = "Football";
myArray[1] = "Baseball";myArray[2] = "Cricket";document.write(myArray[0] + myArray[1] + myArray[2]);
:
FootballBaseballCricket
position
( ) - book -
document.write(myProduct [1]);
(name) , -
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
69/111
studentproperties name, class, rollno -
student.name = "David Rayy"student.class = "V"student.rollno = 1
student-
student.["name"] = "David Rayy"student.["class"] = "V"student.["rollno"] = 1
object name and properties show_obj_property(passed), student
function show_obj_property(obj, obj_name){var output = ""for (var i in obj)
result += obj_name + "." + i + " = " + obj[i] + "\n";return output;}
student.name = David Rayystudent.class = Vstudent.rollno = 1
-
JavaScript Arrays
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
70/111
var BEATLES = [];
BEATLES["singer1"] = "Paul";
BEATLES["singer2"] = "John";
BEATLES["guitarist"] = "George";
BEATLES["drummer"] = "Ringo";
document.write(BEATLES["singer1"]);
document.write(BEATLES["singer2"]);
document.write(BEATLES["guitarist"]);
document.write(BEATLES["drummer"]);
-
?
( .js ) , , Youcan divide your big programme in a number of small and manageable functions.
-
.- (JavaScript Array Function)
(JavaScript Boolean Function)
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
71/111
(JavaScript Math Function) (JavaScript Date Function) (JavaScript Number Function) (JavaScript String Function)
(JavaScript RegExp Function)
.
-
function functionname(var1,var2,...,varX){statements
}
function Function statement functionname Reserved words functionname arguments (var1, var2 )
statement- { }
() -
function functionname(){
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
72/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
73/111
popup() onclick
function popup(). getAddition(). with(),while()
, popup()
functiongetAddition(firstNumber,secondNumber){varresult;result = firstNumber + secondNumber;returnresult;
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
74/111
}varmyResult = getAddition(10,20);alert(myResult);
:
firstNumber secondNumber. result result
() return
return return
return var myResult alert() alert(result)
getAddition
*
-
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
75/111
function functionname (arguments)
{
Script statement(s)
return[variables]
}
The return statement is used to specify the value that is returned from thefunction.So, functions that are going to return a value must use the returnstatement.The example below returns the product of two numbers (a and b):
:
function product(a,b){return a*b;}
document.write(product(4,3));
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
76/111
12
-
?
- , ( - ) , interactions Document Object Model (DOM) - onClick HTML
-
hover
keystroke "onclick" -
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
77/111
, HTML - onMouseover ( )
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
78/111
-
,
IE:Internet Explorer, F:Firefox, O:Opera, W3C:W3C Standard.
...... IE F O W3C
onblur An element loses focus 3 1 9 Yes
onchange The content of a field changes 3 1 9 Yes
onclick Mouse clicks an object 3 1 9 Yes
ondblclick Mouse double-clicks an object 4 1 9 Yes
onerrorAn error occurs when loading a document oran image
4 1 9 Yes
onfocus An element gets focus 3 1 9 Yesonkeydown A keyboard key is pressed 3 1 No Yes
onkeypress A keyboard key is pressed or held down 3 1 9 Yes
onkeyup A keyboard key is released 3 1 9 Yes
onload A page or image is finished loading 3 1 9 Yes
onmousedown A mouse button is pressed 4 1 9 Yes
onmousemove The mouse is moved 3 1 9 Yes
onmouseout The mouse is moved off an element 4 1 9 Yes
onmouseover The mouse is moved over an element 3 1 9 Yes
onmouseup A mouse button is released 4 1 9 Yesonresize A window or frame is resized 4 1 9 Yes
onselect Text is selected 3 1 9 Yes
onunload The user exits the page 3 1 9 Yes
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
79/111
/
Property Description IE F O W3C
altKey
Returns whether or not the "ALT" key was
pressed when an event was triggered 6 1 9 Yes
buttonReturns which mouse button was clicked whenan event was triggered
6 1 9 Yes
clientXReturns the horizontal coordinate of themouse pointer when an event was triggered
6 1 9 Yes
clientYReturns the vertical coordinate of the mousepointer when an event was triggered
6 1 9 Yes
ctrlKeyReturns whether or not the "CTRL" key waspressed when an event was triggered
6 1 9 Yes
metaKeyReturns whether or not the "meta" key waspressed when an event was triggered
6 1 9 Yes
relatedTargetReturns the element related to the elementthat triggered the event
No 1 9 Yes
screenXReturns the horizontal coordinate of themouse pointer when an event was triggered
6 1 9 Yes
screenYReturns the vertical coordinate of the mousepointer when an event was triggered
6 1 9 Yes
shiftKey Returns whether or not the "SHIFT" key waspressed when an event was triggered 6 1 9 Yes
Property Description IE F O W3C
bubblesReturns a Boolean value that indicateswhether or not an event is a bubbling event
No 1 9 Yes
cancelable
Returns a Boolean value that indicates
whether or not an event can have its defaultaction prevented
No 1 9 Yes
currentTargetReturns the element whose event listenerstriggered the event
No 1 9 Yes
targetReturns the element that triggered theevent
No 1 9 Yes
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
80/111
timeStampReturns the time stamp, in milliseconds, fromthe epoch (system start or event trigger)
No 1 9 Yes
type Returns the name of the event 6 1 9 Yes
-
( )
alert, confirm prompt-
alert() OK confirm() OK Cancel prompt() - alertbox, confirmbox, promptbox.
-
Alert Box
alert() alert OK
alert("sometext");
function show_alert(){
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
81/111
alert("Hello! I am an alert box!");}
-
-
Alert pops up Alert
Confirm Box confirm() OK Cancel "OK" true "Cancel" false
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
82/111
confirm("sometext");
function show_confirm(){var r=confirm("Press a button!");if (r==true){alert("You pressed OK!");}
else{alert("You pressed Cancel!");}
}
-
-
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
83/111
Ok -
Cancel -
JavaScript confirm JavaScript alert confirm box alert box :
confirm OK
cancel
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
84/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
85/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
86/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
87/111
-
objectName.objectProperty = propertyValue;
-
personObj.firstname="Abdullah";
personObj.lastname="Faruk";
personObj.age=20;
personObj.eyecolor="black";
document.write(personObj.firstname);
personObj firstname, lastname, age, eyecolor - Abdullah.
(actions) - eat(), sleep(), work(),play()
-
objName.methodName()
-
document.write(javaScript);
Document write() write() write()
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
88/111
-
.-
.
. -
- -
. (Array Object)
. (Boolean Object)
. ()(Date Object)
. (Math Object)
. (Number Object)
. (String Object)
. (RegExp Object)
. (Global Object)
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
89/111
.
-
-String, Date, Array
-
-
.new
. (initializer) / Constructor function
1.new
new constructor - Object(), Array() Date() constructor
objectName = { property1: value1, property2: value2,...,propertyN : valueN};
,
1.objectName :
2.property_1, property_2, .....property_n : -,
3.value1, value2,..,valueN :
-
personObj=new Object();personObj.firstname="John";
personObj.lastname="Doe";personObj.age=50;personObj.eyecolor="blue";
-
personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
90/111
-
personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(personObj.firstname + " is " + personObj.age + " years old.");
-
User-defined objects
var book = new Object(); // Create the object
book.subject = "Perl"; // Assign properties to the object
book.author = "Mohtashim";
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
91/111
document.write("Book name is : " + book.subject + "
");document.write("Book author is : " + book.author + "
");Book name is : PerlBook author is : Mohtashim
2. (initializer)/Constructor function
constructor -
constructor constructor "this" (=) / constructor "return"
constructor -
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
92/111
-function student(name, class, rollno)
{this.name = name;this.class = classthis.rollno = rollno;}
student , - name, class and rollno (passed) "this" constructor () The reason for all the "this" stuffis that you're going to have more than one person at a time (which person you'redealing with must be clear).
object constructor , -
studentv = new student("John", "V", 10)
studentv -
studentv.name "John" studentv.class "V" student.rollno 10
. We can create any number of student objects by calls to new.
constructor -
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
93/111
function student(name, class, rollno)
{this.name = name;this.class = classthis.rollno = rollno;}
studentv = new student("John", "V", 10)document.write(studentv.name + " reading in class " + student.class + "and his rollno:+ student.rollno);
-
?
HTTP, web, browser retrieved activity ( - ,- , , ,remembering the items in your shopping cart from previous visits. ) -authenticationcookies - , -
-
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
94/111
-
Name cookie -
Password cookie -
Date cookie
-
function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : ";expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;}
, , document.cookie
,
function getCookie(c_name){var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
95/111
}}
}
,
function checkCookie(){var username=getCookie("username");if (username!=null && username!=""){alert("Welcome again " + username);}
else{username=prompt("Please enter your name:","");if (username!=null && username!=""){setCookie("username",username,365);}
}}
-
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
96/111
for (i=0;i
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
97/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
98/111
-
,
, "" -
-
function validateForm()
{var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){alert("First name must be filled out");return false;}
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
99/111
}
First name:
-
-
:
, @ (.) @ (.) @
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
100/111
Valid:
Invalid:
@deleted.net - @ sign characters [email protected] - invalid character ! shoes@need_shining.com - domain name underscores
-
function validateForm(){var x=document.forms["myForm"]["email"].value;var atpos=x.indexOf("@");var dotpos=x.lastIndexOf(".");if (atpos
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
101/111
-
? ?
:. (document.getElementById)
function notEmpty(){
var myTextField = document.getElementById('myText');
if(myTextField.value != "")
alert("You entered: " + myTextField.value)
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
102/111
else
alert("Would you please enter some text?")
}
-
-
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
103/111
document.getElementById myTextField
:
getElementByIdfunction
-
01.
02. //JavaScript is loosely typed languagevar variable_name
03. (;)
04. To PopUp a window: // alert("Hello world"); //
05. function function_name ()
{
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
104/111
Your code here}
06.
screen.avaiWidth; //Returns the Screen Width in Pixel
07. Finding available Height of screen in pixelscreen.avaiHeight; //Returns the Screen Height in Pixel
08. Writing Something in the HTMLdocument.write("Hello World"); //Write Hello World to the document
09. Writing a Prompt box to take value.prompt("label", "default value"); //Prompt to the user screen.
10. Getting the type of a variabletypeof(Variable Name); //Returns the type of a variable
11. To change data type into NumberNumber(Variable Name); //Returns the number type valueparseInt(Variable Name); //Returns the Integer type valueparseFloat(Variable Name); //Returns the Float type value
12. Finding the value of a variablevariablename.length; //Returns the length of a variable.
13. Creating an object //new keyword is used to create anobject
var a = prompt("Enter a numbjer",""); //Taking an String from the userdocument.write(typeof(a)); // Writing the type of the Stringvar b = new String(a); //Creating an String Object Explicitly
using String Constructiondocument.write(typeof(b)); // Writing the type of variable b
14. The String Methods: indexOf() //Takes string as arguments and returns its indexnumber
var a = prompt("Enter your Email Address","");
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
105/111
var b = a.indexOf("@"); //Returns the index number of @, if notfound it returns -1
alert("The Index of @ is : " + b);
15. The String Methods: substring() //Takes two integer arguments as start and ends ofthe stringvar a = "Hello World";var b = a.substring(2,8); //second Parameter can be left off
16. The Math Objects:It can't be created explicitly. It doesn't store data
17. The PIProperty: //Returns the value of PIalert("The value of PI is " + Math.PI);
18. round() Methods: //Rounds a number when the decimal is .5 or up.alert(Math.round(3.4)); //Alerts 3alert(Math.round(3.6)); //Alerts 4
19. celi()Methods: Always round a number upalert(Math.ceil(2.15)); //Alerts 3
20. floor()Methods: Always round a number downalert(Math.floor(2.15)); //Alerts 2
21. random()Methods: //Returns a random number between 0 & 1alert(Math.random()); //Alerts a random number to the screen.
22. Array()constructor: It is used with newkeywords to create array object.var myarray = new Array(); //With no Predefined elementsvar myarray = new Array(3); //with Predefined elementsvar myarray = [1,2,3]; //Directly assign by valuevar myarray = ["red","Bleu","Green"]; //Directly assign by valuevar myarray["ruby"] = "Tiger"; //Assigning array index a name
23. slice()Method: //Slice and array and the new array begins with zero indexvar myarray = [1,2,3,4,5,6];var sarray = myarray.slice(1, 5); //1: First element's index, 5:last
Element's index+1for(i=0; i
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
106/111
24. Array Method concat(): Joined array elements to form a new array, Property length:Returns the length of an object.
var arrayone = [1,2,3,4,5];var arraytwo = [6,7,8];var arraythree = [9,10,11,12];var fullarray2 = arrayone.concat(arraythree); //Concatenate arrayone and
arraythreealert(fullarray2.length); //Alerts the length: 9var fullarray = arrayone.concat(arraytwo,arraythree);
//Concatenate arrayone arraytwo, and arraythreevar alength = fullarray.length; //Returns the length: 12alert(alength);document.write(arrayone.concat(arraytwo,arraythree)); //Writes the full array
elements
25. Converting an array to a string: the join() method. The methods use a string as aparameter. This parameter is used to separate the array elements.
var myarry = ["Abul","Babul","Rahul"];var mystring = myarry.join("-");
//myarry turns into string seperated with hyphen (-) and store inmystring
document.write(mystring);
26. split(): This method is used to turn an string into an array. A Parameter is used toseparate one element from other.
var mystring = "Abul, Babul, Rahul";var myarray = mystring.split(",");var n = myarray.length;for(i=0; i
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
107/111
for(i=0; i
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
108/111
//Execute some codebreak;
}Example:
var number = Number(prompt("Enter a number among 1 to 4",""));switch(number)
{case 1:
document.write("You have entered number 1");break;
case 2:document.write("You have entered number 2");break;
case 3:document.write("You have entered number 3");break;
case 4:document.write("You have entered number 4");break;
default:document.write("You have not entered number between 1 to 4");break;
}
34. the forloop: for(initial-condition; loop-condition; alter-condition) {statement}
var a = prompt("Enter a number","");for(i=0; i
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
109/111
while(condition){ code to be executed; }
37. do .... whileloop.do {
code to be executed} while (condition)
38. Import in css: @import 'style.css';
39. Including External JavaScript:
40. navigatorobject. appNameproperty and appVersionproperty.document.write("Your Browser name is : "+ navigator.appName); //Returns browser Namedocument.write("
Your Browser Version is : " + navigator.appVersion); //Returnsbrowser version41. Reading out the browser name and version is commonly known as browser sniffing
42. camelCase: Lowercase first word's letter and Uppercase every first letter of theworld.
43. Create a function:function functionname()
{//Your Code here}
44. getElementByTagName(): //Gets the elements by the tag name;
function countnum(){var listitems = document.getElementsByTagName('li');var nbr = listitems.length;alert("The Length number of Li is "+nbr);
}window.onload = countnum;
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
110/111
-
8/10/2019 JavaScript Bangla E-book by faruk.pdf
111/111