JavaScript: An Introduction to the Language and Programming with notes

JavaScript

Index

Topic

1.What is JavaScript

2.Advantages of JavaScript

3.Limitations of JavaScript

4.JavaScript Development tools

5.JavaScript Syntax

6.Comment in JavaScript

7.JavaScript Placement

8.JavaScript Variable

9.JavaScript Variable Scope

10.Rules for defining JavaScript Variables

11.JavaScript Operator

Programs:

1.Array

2.Calculator

3.confirmpromptalert

4.Cube

5.doWhile -Loop

6.Email Validation

7.form Validation

8. Input From User

9.JavaScript Demo

10.Basic JavaScript Program

11.Local ANd GLobal Variable

12.Message

13.Object

14.PositiveNegative

15.PrimitiveDataType

16.Switch Case

17.SquareOPeration

18.User input box-Gender

19.Userinput Form radio button

1.What is JavaScript

- JavaScript is a dynamic computer programing language

- It is lightweight and most commonly used as a part of web page

- JavaScript allows us to make more interactive Dynamic pages.

- It is interpreted programing language

- Open and cross-Platform

2.Advantages of JavaScript

- Less server interaction

- Immediate feedback to the visitors

- Increased interactivity

- Richer interface

3.Limitations of JavaScript

-Client - Side JavaScript does not allow the reading or writing of files .This has been kept for security reasons .

- JavaScript cannot be used for networking applications

- JavaScript doesn't have any multithreading or multiprocessor capabilities.

4.JavaScript Development tools

- We can use simple text-editor such as Notepad to write our JavaScript Programs

- We can run our code on any Browser which is inbuilt Compiler for JavaScript

- Also we have some editing tools to make our life more simpler .Such as Microsoft Font Page, Macromedia , Subline Text 3,etc

5.JavaScript Syntax

- we have to place JavaScript Statement within the <script>.......</script>tags.

- we can place this tag anywhere we want to place in our page as per requirement

- In JavaScript program we have to include or mention it before it gets used as:

*Important things to know

1. To print anything on the webpage we have to mention

document.write("......................")

- JavaScript ignores spaces tabs and newline so use it to make your code more beautiful

-Semicolons are optional

- we can write

var1 \=20

var2=3

......../............>

</script>

-But its good practice to write semicolons.

6.Comment in JavaScript

1. // and end of a line .treated as comment

2. /* and */ any text between this two also consider as comment .This is multiline-comment

3. for clossing of this comment

7.JavaScript Placement

-Script is an external file and must include in <head>........</head> section

-But this means not that we can't use it in Body ,Yes we can also use it in Body tags well

8.JavaScript Variable

-JavaScript Variable are also a container which store data ,values etc. similar to other languages

-Variables are declared with var keyword

eg.

<!--

var money ;

var name ;

//-->

-Staring a value in a Variable called as variable initialization

e.g. Var money ;

money = 2000.50;

-We Can't declare same variable twice

-JavaScript is a untyped language .This means that the JavaScript variable can hold a value of any data type .

9.JavaScript Variable Scope

-Scope of Variable is the region of your program in which it is defined . JavaScript Variables have only two scope

*Global Variables

-It can be defined anywhere in a JavaScript code .

*Local Variable :

eg. <Script type="text/javascript">

<!--

var myvar ="global";//global var .

function check_scope (){

var myvar ="local "//Local

document.write(myvar);

}

//-->

</scriipt>

output :- Local

10.Rules for defining JavaScript Variables

-JavaScript Keyword are not use as a variable

e.g. we can't use boolean ,break as var

-Name should not Start with numbers (0-9),we can start with letter or Underscore

e.g. _1234 , L1234 etc

-Variable are case sensitive

e.g. Name and name are two different Variables

-we have 60 keywords in JavaScript

await break case catch class

const continue debugger default delete

do else enum export extends

false finally for function if

implements import in instanceof interface

let new null package private

protected public return super switch

static this throw try true

typeof var void while with

yield

11.JavaScript Operator

-Consider 4+5 is equal to 9

Here 4 and 5 are operands

and '+' is called operator

JavaScritp has following Opperators

Arithmetic Operator

+(Addition )

-(Substration)

*(Multiplication)

/(Division)

%(Modulus)

++(Increment)

--(Descrement)

Comparision Operator

==(Equals)

!=(Not Equals)

>(Grater Than)

<(Less Than)

>=(Grater Than or equal to)

<=(Less than or Equal to)

Logical Operator

&&(Logical AND)

||(Logical OR)

!(Logical NOT)

Bitwise Operator

&(Bitwise AND)

|(Bitwise OR)

^(Bitwise XOR)

~(Bitwise NOT)

<<(Left Shift)

>>(Right Shift)

>>>(Right Shift with Zero)

Assignment Operator

=(Simple Assignment Operator )

+=(Add and Assignment ) ie C= C+A

-=(Substract and Assignment ) ie C= C-A

*=(Multiply and Assignment ) ie C= C*A

/=(divide and Assignment ) ie C= C/A

%=(Modules and Assignment ) ie C= C%A

Miscellaneous Operators

Conditional Operator(?:)

If condition is True ?then value X:otherwise y

document.write("a<b")?100:200)=>")

2. Type of Operation

Number String ,Boolean,Object,function,Null

TYPE RETURN TYPE

Number "Number"

String "String"

Boolean "bollean"

Object "object"

function "function"

Undefined "Undefined"

NUll "object"

-----------------------------------------------------------Notes End-----------------------------------------------------

Programes

1.Array

<!DOCTYPE html>

<html>

<head>

<title>Arrays</title>

</head>

<body>

var num=["AA","BB","CC"];

num.pop("AA")

num.push("DD")

for(var i=0;i<num.length;i++)

{

document.write("<h2>"+num[i]+"</h2>")

}

</script>

</body>

</html>

2.Calculator

<!DOCTYPE html>

<html>

<head>

<title>Addition of two number</title>

function addition()

{

var Number1=parseInt(document.getElementById("num1").value);

var Number2=parseInt(document.getElementById("num2").value);

var regx=/[0-9]/;

if(regx.test(Number1)&&(regx.test(Number2)))

{

var Addition=(Number1+Number2);

document.getElementById("result").value=Addition;

}

else

{

alert('Invalid Number')

}

function substraction()

{

var Number1=parseInt(document.getElementById("num1").value);

var Number2=parseInt(document.getElementById("num2").value);

var regx=/[0-9]/;

if(regx.test(Number1)&&(regx.test(Number2)))

{

if (Number1>Number2)

{

var sub=Number1-Number2;

document.getElementById("result").value=sub;

}

else

{

alert('FirstNumber should be greater than SecondNumber');

}

else

{

alert('Invalid Number')

}

function multiplication()

{

var Number1=parseInt(document.getElementById("num1").value);

var Number2=parseInt(document.getElementById("num2").value);

var regx=/[0-9]/;

if(regx.test(Number1)&&(regx.test(Number2)))

{

var multiplication=(Number1*Number2)

document.getElementById("result").value=multiplication;

}

else

{

alert('Invalid Number')

}

function division()

{

var Number1=parseInt(document.getElementById("num1").value);

var Number2=parseInt(document.getElementById("num2").value);

var regx=/[0-9]/;

if(regx.test(Number1)&&(regx.test(Number2)))

{

if(Number1>Number2)

{

var Division=(Number1/Number2);

document.getElementById("result").value=Division;

}

else

{

alert('FirstNumber should be greater than SecondNumber')

}

else

{

alert('Invalid Number')

}

function Clear1()

{

document.getElementById("num1").value=' ';

document.getElementById("num2").value=' ';

document.getElementById("result").value=' ';

}

</script>

</head>

<body>

FirstNumber:

SecondNumber:

Result:

<label id="lbluser" style="color:red;visibility:hidden">Invalid Number</label><br>

<button onclick="multiplication();" type="button">Multi</button>

<button onclick="Clear1();" type="button">Clear</button>

</body>

</html>

3.confirmpromptalert

<!DOCTYPE html>

<html>

<head>

<title>confirmpromptalert</title>

function msg()

{

alert("Hello alert box");

}

function msg1()

{

var v=confirm('Are you Sure');

if(v==true)

{

alert("ok")

}

else

{

alert("cancel");

}

function msg2()

{

var v=prompt('who are you');

alert("I am"+" "+v);

}

</script>

</head>

<body>

</body>

</html>

4.Cube

<!DOCTYPE html>

<html>

<head>

function Cube()

{

var Number1=parseInt(document.getElementById("box").value);

var regx=/[0-9]/;

// range0-9 rwfx-variables

// test-return boolan value

if(regx.test(Number1))

{

var Cube=(Number1*Number1*Number1)

alert("Cube is : "+Cube)

}

else

{

alert('Invalid Number')

}

</script>

</head>

<body>

</body>

</html>

5.doWhile -Loop

<!DOCTYPE html>

<html>

<head>

<title>Do While Loop</title>

</head>

<body>

var i=0;

{

document.write(i + "<br/>");

i++;

}

while(i<=10);

</script>

</body>

</html>

6.Email Validation

<!DOCTYPE html>

<head>

<title>JavaScript form validation - checking email</title>

function ValidateEmail(inputText)

{

var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

if(inputText.value.match(mailformat))

{

alert("Valid email address!");

document.form1.text1.focus();

return true;

}

else

{

alert("You have entered an invalid email address!");

document.form1.text1.focus();

return false;

}

</script>

<style>

li {list-style-type: none;

font-size: 16pt;

}

.mail {

margin: auto;

padding-top: 10px;

padding-bottom: 10px;

width: 400px;

background :

#D8F1F8;

border: 1px soild

silver;

}

.mail h2 {

margin-left: 38px;

}

input {

font-size: 20pt;

}

input:focus, textarea:focus{

background-color:

lightyellow;

}

input submit {

font-size: 12pt;

}

.rq {

color:

#FF0000;

font-size: 10pt;

}

</style>

</head>

<h2>Input an email and Submit</h2>

<ul>

</ul>

</form>

</div>

</body>

</html>

7.form Validation

<!DOCTYPE html>

<html>

<head>

<title>Form Validatio</title>

function validate()

{

var username=document.getElementById('uname');

var Password=document.getElementById('pass');

if (username.value.trim()==""||password.value.trim()=="")

{

alert("No blank value allowed")

return false;

}

else

{

}

</script>

</head>

<body>

<button type="submit">Submit</button>

<button type="button">Cancel</button>

</form>

</body>

</html>

8. Input From User

<!DOCTYPE html>

<html>

<head>

<title>Input From User</title>

function fn1()

{

var str=document.getElementById("text1").value;

alert("Hello "+str);

}

</script>

</head>

<body>

<br>

<button onclick="fn1();">Click me</button>

</body>

</html>

9.JavaScript Demo

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Demo</title>

document.write("<h1>Crescentweb Technology</h1>")</script>

</head>

<body>

document.write("<h1>Crescentweb Technology1</h1>")</script>

</body>

</html>

document.write("<h1>Crescentweb Technology2</h1>")</script>

10.Basic JavaScript Program

<!DOCTYPE html>

<html>

<head>

<title>Demo With javascript js</title>

</head>

<body>

</body>

</html>

11.Local ANd GLobal Variable

<!DOCTYPE html>

<html>

<head>

<title>LocalGlobalVeriable.html</title>

</head>

<body>

var b=6;

function myfunction()

{

var a=5;

document.write("<h2>"+a+"</h2>")

document.write("<h2>"+b+"</h2>")

}

myfunction();

</script>

</body>

</html>

12.Message

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>wellcome</h1>

</body>

</html>

13.Object

<!DOCTYPE html>

<html>

<head>

<title>Introductoin To Objects</title>

</head>

<body>

emp={id:1,name: "nikhil" ,salary:100}

document.write(emp.id+"."+emp.name+"."+emp.salary)

</script>

</body>

</html>

14.PositiveNegative

<!DOCTYPE html>

<html>

<head>

<title>Positive Negative</title>

function pn()

{

if (document.getElementById('box').value>0)

{

alert("Positive no")

}

else if (document.getElementById("box").value<0)

{

alert("Negative")

}

else

{

alert("zero")

}

</script>

</head>

<body>

<button onclick="pn()" type="button" id="btn" >Submit</button>

</body>

</html>

15.PrimitiveDataType

<!DOCTYPE html>

<html>

<head>

<title>PrimitivDataType</title>

var x;

var y=5;

var p=5.6;

var z="Nikhil";

// Arithamatic Opperators

document.write(typeof(x)+"</br>")

document.write(typeof(y)+"</br>")

document.write(typeof(p)+"</br>")

document.write(typeof(z)+"</br>")

// Boolan Opperators

var x=10;

var y=20;

var z=10;

document.write(x==y)

document.write(x==z)

var A=34.00;

var B=34;

var C=3.14;

var D=123e5;

var E=123e-5;

document.write(typeof A+"<br/>")

document.write(typeof B+"<br/>")

document.write(typeof C+"<br/>")

document.write(typeof D+"<br/>")

document.write(typeof E+"<br/>")

document.write(typeof "nikhil"+"<br/>")

document.write(typeof 3.14+"<br/>")

document.write(typeof true+"<br/>")

document.write(typeof false+"<br/>")

document.write(typeof y)

var MT=" ";

document.write(typeof MT)

var nk="hi"

nk=null

document.write(typeof nk)

</script>

</head>

<body>

</body>

</html>

16.Switch Case

<!DOCTYPE html>

<html>

<head>

<title>Switch Case</title>

</head>

<body>

var day=5;

switch("day")

{

case 1 :

document.write("<h2>Sunday</h2>")

break;

case 2 :

document.write("<h2>Monday</h2>")

break;

case 3 :

document.write("<h2>Thuesday</h2>")

break;

case 4 :

document.write("<h2>Wednesday</h2>")

break;

case 5 :

document.write("<h2>Thersday</h2>")

break;

case 6 :

document.write("<h2>Friday</h2>")

break;

case 7 :

document.write("<h2>Saterday</h2>")

break;

default :

document.write("<h2>Wrong input</h2>")

}

var true=day;

switch("day")

{

case true;

document.write("<h2>First Working Day</h2>")

break;

}

var fullname="Nikhil";

switch(fullname+"Raut")

{

case"NikhilRaut";

document.write("<h2>That is my name</h2>")

break;

}

</script>

</body>

</html>

17.SquareOPeration

<!DOCTYPE html>

<html>

<head>

<title>Square Operation</title>

function multiplication()

{

var Number1=parseInt(document.getElementById("num1").value);

var regx=/[0-9]/;

// range0-9 rwfx-variables

// test-return boolan value

if(regx.test(Number1))

{

var multiplication=(Number1*Number1)

alert("Multiplication is : "+multiplication)

}

else

{

alert('Invalid Number')

}

</script>

</head>

<body>

<button onclick="multiplication();" type="button">Submit</button>

</body>

</html>

18.User input box-Gender

<!DOCTYPE html>

<html>

<head>

<title>user inpiut select box</title>

function fn1()

{

var select1=document.getElementById("selectbox");

alert(select1.options[select1.selectedIndex].value)

}

</script>

</head>

<body>

Gender:

<option value="">Please Select

</option>

<option value="Male">Male

</option>

<option value="Female">Female

</option>

</select>

<button onclick="fn1();">Gender

</button>

</body>

</html>

19.Userinput Forrm radio button

<!DOCTYPE html>

<html>

<head>

<title>User input from radiobutton</title>

function fn1()

{

var rd1=document.getElementById("rd1");

var rd2=document.getElementById("rd2");

if (rd1.checked==true)

{

alert('Gender is '+" "+rd1.value)

}

else if (rd2.checked==true)

{

alert('Gender is '+" "+rd2.value)

}

else

{

alert('No Gender is selected')

}

</script>

</head>

<body>

<input type="radio" id="rd1" name="rdo" value="Male"/>Male

<br>

<input type="radio" id="rd2" name="rdo" value="Female"/>Female

<br>

<button id="btnl" onclick="fn1();">Click Me</button>

</body>

</html>

joy_of_learing

Search This Blog

JavaScript: An Introduction to the Language and Programming with notes

Comments

Post a Comment