javascript bangla e-book by faruk.pdf

8/10/2019 JavaScript Bangla E-book by faruk.pdf

1/111


2/111

-

JavaScript BanglaE-book

(For Web Developers)

-(https://www.facebook.com/faruk.ice09)

(http://www.WebTechnologyBlog.com)


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.


4/111

.........


5/111

-

-(https://www.facebook.com/faruk.ice09)

(ICE)

(https://www.facebook.com/zamil.hossainsezan32) (https://www.facebook.com/groups/Wordpress2Smashing/)

--


6/111

-::-

-

?

JAVA JavaScript ?

-

-


7/111

-

?

o

-

o -

o -

-

?


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


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

-

.

.

.

.

.


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)


11/111

-

?

?

-

?

.-

(JavaScript Array Function)

(JavaScript Boolean Function)

(JavaScript Math Function)

(JavaScript Date Function)

(JavaScript Number Function)

(JavaScript String Function)

(JavaScript RegExp Function)

.


12/111

-

?

/

-

Alert Box

Confirm Box

Prompt Box


13/111

-

?

.-

.

1.new

2. (initializer) / Constructor function

-

?


14/111

-

?

?

-


15/111

-

?

- ( run/execute - /++ /++ /++ HTML ,

execute/run , () , ,

Brendan Eich LiveScript , , EcmaScript ECMAScript ECMA (European Computer Manufacturer's Association)

.

/

.


16/111

JAVA Javascript ?

, ,

Sun Microsystems Brendan Eich , HTML ,reserved-words-

(script) (-macro or batch file) HTML CSS HTML CSS

Mouse Trailers ( site ) ,, Alert


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


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


19/111

:

HTML-

Notepad++(for Windows users) and TextWrangler(for Mac users)

-

(a set of rules ) -

... ...

-

-

language: HTML XHTML-

type: (-"text/javascript" )


20/111

"Hello World" -

script type "text/JavaScript" document.write -

Hello World!

Hello Dolly -

document.write(Hello Dolly);

Hello Dolly (;) Statement ( Statement ) Statement , ,,

-


21/111

-

document.write("This is a heading");

document.write("

This is a paragraph.
");
document.write("

This is another paragraph.
");
{

} -

{


22/111

document.write("This is a heading");

document.write("

");
document.write("

");
}

?

-

- - ( - )

-

, ( ) - alert box


23/111

sayHello head "Hello World!" alert box

-

This is web page body

-

Hello World


24/111


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("

");document.write("
");


26/111

/* */document.write("This is a heading");document.write("

");document.write("
");
,

(-)


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;


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...


29/111

HTML script (=) my_var = "Hello World!" my_var "Hello World!" order script

(y Y are ) (A,B,c) (_)

(0-9) ,


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 -


31/111


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


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;


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;}

, , ,


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


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


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

( ) + -


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


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


40/111

equal double equal (==) Comparisonconditional statement , (==) (!==) () - 10==10 (==) (!==) 10==10


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


42/111


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


44/111


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


46/111

6.Conditional Operator:

conditional operator

variablename=(condition)?value1:value2 ;

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

visitor"PRES",greeting"Dear President "

"Dear "


47/111

:

:

two plus ten = 12ten * ten = 100ten / two = 5

-

x=5+5;document.write(x); //10

x="5"+"5";


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!");


49/111

-

document.write \

("Hello World!");

.

-

-

-


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


51/111


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{ }


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


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");

}


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:


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


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


58/111


59/111


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 -


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


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] + " ");}


63/111


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


65/111


66/111


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


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) , -


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


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)


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(){


72/111


73/111

popup() onclick

function popup(). getAddition(). with(),while()

, popup()

functiongetAddition(firstNumber,secondNumber){varresult;result = firstNumber + secondNumber;returnresult;


74/111

}varmyResult = getAddition(10,20);alert(myResult);

:

firstNumber secondNumber. result result

() return

return return

return var myResult alert() alert(result)

getAddition

*

-


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));


76/111

12

-

?

- , ( - ) , interactions Document Object Model (DOM) - onClick HTML

-

hover

keystroke "onclick" -


77/111

, HTML - onMouseover ( )


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


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


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(){


81/111

alert("Hello! I am an alert box!");}

-

-

Alert pops up Alert

Confirm Box confirm() OK Cancel "OK" true "Cancel" false


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!");}

}

-

-


83/111

Ok -

Cancel -

JavaScript confirm JavaScript alert confirm box alert box :

confirm OK

cancel


84/111


85/111


86/111


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()


88/111

-

.-

.

. -

- -

. (Array Object)

. (Boolean Object)

. ()(Date Object)

. (Math Object)

. (Number Object)

. (String Object)

. (RegExp Object)

. (Global Object)


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"};


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";


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 -


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 -


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 - , -

-


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


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(";");


96/111

for (i=0;i


97/111


98/111

-

,

, "" -

-

function validateForm()

{var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){alert("First name must be filled out");return false;}


99/111

}

First name:

-

-

:

, @ (.) @ (.) @


100/111

Valid:

[email protected]

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


101/111

-

? ?

:. (document.getElementById)

function notEmpty(){

var myTextField = document.getElementById('myText');

if(myTextField.value != "")

alert("You entered: " + myTextField.value)


102/111

else

alert("Would you please enter some text?")

}

-

-


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 ()

{


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","");


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


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


107/111

for(i=0; i


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;



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


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 version

41. 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;


110/111


111/111

javascript bangla e-book by faruk.pdf

Documents