Java Script Training Notes by Kamran

Java Script Training
• Java Script Basic and advance Topics
Java Script:
• How to write Java Script Program
• Where to write JavaScript.
• Variable ,object,functions,operator
• How to make webpage to using JS.
• Forms,events
• DOM-document Object Model
What should you know to learn Java Script?
HTML & CSS
Tools you need to start JS program.
Code Editor
– Notepad++
– Atom
– Subline text
Web Browser
- Chrome
- Mozilla
Firebug
What is Java script?
Java Script is programming language of web and it executed by the browser.

First JavaScript Program:
Type in subline code editor and save it with the name of index.html
<!DOCTYPE html>
<html>
<head>
<title>my First Program</title>
</head>
<script type="text/javascript">
alert("Hello World");
</script>
<body>
</body>
</html>
Uses of Java Script:
- Make WebPages Interactive
– Sliders
– Image Gallaries
– Form Validations
– It can load content without reloading the entire pages.
– JS works on web user’s Computer-even when they are offline.
– JS can be used in the backend with Node.js and MongoDB.
– Game Development-using HTML5 and JS
Java Script or Java are same.
Javascript are web application. Whereas java is programming as well as web

development software. Both are different.
What is variable in JavaScript?
Variables are used to hold or store the data during the program execution.
• Rules of Declaration of Variables in JS:-
– Variable can contain letters,digits,underscore and dollar sign.
– Variable must begin with a letter.
– Variable can also begin with $ sign.
– Variables are case sensetive
– Reserved words i.e. Javascripts, can not be use as name.
Data types in Java Script:
• String
• Number
• Boolean
• Array
• Objects
• Null and undefined are also data type
How to import Java script External File in index.html
Using:
<script src="script.js"></script>
It is use to import file form script.js
First:- we will create index.html
Second:- we will create script.js
Create
alert("Hello World");
in JavaScript.
Then import into:-
<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
script src="script.js"></script>
</body>
</html>
Above file is index.html
Go to the Java Script file:
String in Java Script:
String Data type example in Java Script:
var msg="Kamran";
alert(typeof msg);
Number data type
- var salary=2500;
- alert(typeof salary);
typeof() function: it is used to display the datatype.
<script src="script.js"></script>
It is use to import file form script.js

• Undefined datatypes:
Var sum;
Alert(typeof sum)
• Result: undefind.
Null dataypes:
Var sum=null;
Alert(typeof sum);
How to work two datatypes at once?
Var sum =10+20;
alert(sum);
other example to understand as a string.
Var sum=“10” +5+6;
Alert(sum);
Ans: = 1056 they understand it is string.
Boolean:
Var sum= true;
Alert(typeof sum);
If-else statement in Java Script.
• Sytax:
if(condition)
//execute if block
}
Else
//execute else block
Example of if-else
• if(5==4)
alert("values are equal");
• }
• else{
alert("values are not equal");
• }
Operators in Java Scripts
• Arithmetic Operators in JS
– Additions +
– Subtraction –
– Multiplication *
– Division /
– Modulus (division remainder) %
– Increment ++
– decrement+--
examples of Operators
• Example:
var sum=10+50;
alert(sum);
Subtraction:
var ans=10-5;
alert(ans);
Multiplication:
Var ans=10*5;
Alert(ans);
Comparison operators in Java Script:
• ==(equal to)
• ===(equal value and check data type)
• !=(not equal)
• >(greater than)
• <(less Than)
• >=(greater than or equal to)
• <=(less than or equal to)
Examples of Comparison operator in Java Script:
==(equal to operator)- it is used to check to values.
var a=10,b=10;
if(a==b){
alert("both values are same");
}
===(equal to- it used to check the condition as well as datatype):
Example:
var a=10,b="10";
if(a===b){
alert("both values are same");
else{
alert("values are not same");
Not equal(!=): if condition is not equal to than it execute.
var a=10,b=20;
if(a!=b){
alert("values are not equal");
}
(>) Greater than:
Example:
var a=10,b=8;
if(a>b){
alert("a is greater");
(<) less than
var a=10,b=20;
if(a<b){
alert("a is smaller");
(>=)greater than or equal to:
var cAge=18;
if(cAge>=18){
alert("you are eligible for voting");
Another example:
var cAge=17;
if(cAge>=18){
alert("you are elibible for voting");
else{
alert("you are not eligible");

}
(<=) less than equal to:
Example:
var eage=59;
if(eage<=60){
alert("you should work");
else{
alert("you are eligible for retirement");
Another example of <=:
var eage=61;
if(eage<=60){
alert("you should work");
else{
alert("you are eligible for retirement");
Logical operators in javaScript

-Logical AND &&- it is used to check the multiple conditions and if all the condition are
true than it execute.
-Logical OR ||:
-Logical NOT !:
Logical AND && example:
var candidateAge=25;
if(candidateAge>=20 && candidateAge<=30){
alert("you are eligible for Bank Exams");
else
Another example:
var candidateAge=31;
if(candidateAge>=20 && candidateAge<=30){
alert("you are eligible for Bank Exams");
else
Logical OR operator: if anyone condition is true than it execute.
Example:
var dressColor="blue";
if(dressColor=="black" || dressColor=="blue"){
alert("you can attend the party")

}
else
alert("please check you dress");
Another example
var dressColor="red";
if(dressColor=="black" || dressColor=="blue"){
alert("you can attend the party")
else
alert("please check you dress");
Logical NOT operator: if the condition is false than it return true and if the condition is
true than return false.’
Example:
var a=10,b=5;
alert(!(a==b));
another example
var a=10,b=10;
alert(!(a==b));
Document.write() function in Java Script:-It is use to write something in document.
document.write("Hello World");
Or
document.write("<h1>Hello World</h1>");
Or
document.write("<h1>Hello World</h1>
<p>
Professionals Lab <br> second Line</p>");
• Document.write() function is also work like alert() function.
• var a=10,b=5;
• if(a==b){
• document.write("both values are equal");
• }
• else{
• document.write("Both values are not same");
• }
Date() function: It is display to write date time and Zone.
Sytax:
document.write(Date());
confirm Box in Java Script: it return Boolean Value.
• var result= confirm("Are you sure you want to visit this websit");
• document.write(result);
=====================================
var result= confirm("Are you sure you want to visit this websit");
if(result==true){
document.write("you have selected OK");
else{
document.write("you have selected Cancel");
Confirm Box
• if(result==true){
• document.write("you have selected" + result);
• }
• else{
• document.write("you have selected Cancel"+result);
• }
• document.write("you have selected" + result);
• }
• else{
• document.write("you have selected Cancel"+result);
• }
• document.write("you have selected Ok");
• }
• else{
• document.write("you have selected Cancel");
• }
Functions in Java Script:
• A function is a block of code designed to perform a particular task.
• Why we need function?
– Function eliminates the need of writing the same code again and again.
– function alertMsg()
– {
– alert ("Hello");
– }
– alertMsg();
function and Parameter in Java Script:
• function addNum(){
• var a=10,b=20;
• alert(a+b);
• }
• addNum();
• ===========================================
• function addNum(a,b){
• alert(a+b);
• }
• addNum(10,20);
function with Arguments:
• function addNum(a,b,c){
• document.write(a+b-c+"<br/>");
• }
• addNum(10,20,10);
• addNum(20,25,35);
function with return value:
• return a+b-c;
• }
• var result1= addNum(10,20,30);
• alert(result1);
• return a+b-c;
• }
• var result1= addNum(10,20,30);
• var newVal=10;
• alert(result1+newVal);
Java Script Objects:
• Properties : data of an object
• Care: blue, black,white.
Methods: Methods are the function that let the object to do something.
JavaScript is object based programming Language.
There are two objects:

-Inbuild objects
-We create own Objects.
Old Method to create Object:
• var person= new Object();
• person.name="Kamran";
• person.age=35;
• alert(person.name);
• alert(person.age);
New Method to create Object:
• var person={
• firstName : "Kamran",
• age:35,
• fulldata:function(){
• return person.firstName + person.age;
• }
• };
• alert(person.fulldata());
example:
• var person={
• firstName : "Kamran",
• age:35,
• fulldata:function(){
• return "Person name is "+this.firstName +" and his age is" +
this.age;
• }
• };
• alert(person.fulldata());
to find the length:
var msg="Hello Professionals Lab"
alert(msg.length);
Array in Java Script: JavaScript arrays are used to store multiple values in a single
variable.
Example:
var student=["kamran","sana","wajahat"];
alert(student);
another example:
alert(student[7]);
document.write(student[8]);
student.push("karan");
student.unshift("jack");
document.write(student);
student.pop("karan");
var student1 = ["rishab","kamran","sana"];
var student2 = ["jason","maria"];
document.write(student1.concat(student2));
var student=["Rishab","kamran","json","maria"];
console.log(student);
How to write Array inside Array:
var student=["Rishab","kamran",[1,2,3,4,5],"json","maria"];
console.log(student);
=============
var student=["Rishab","kamran",[1,2,3,4,5],"json","maria"];
document.write(student[2]);
console.log(student[2]);
if, if else, nested if statement:-
var a=10;
var b=10;
var c=30;
if(a==b)
document.write("Both values are same");
else
document.write("values are not same");
Nested Statement:
If statement then inside if statement.
var dresscolor="blue";
if(dresscolor=="blue")
document.write("go to second entrance gate");
else
document.write("you can't enter the party");

}

Java Script Training Notes by Kamran

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Java Script Training Notes by Kamran

Caricato da

Copyright:

Formati disponibili

Java Script Training

• Java Script Basic and advance Topics

• How to write Java Script Program

• Where to write JavaScript.

• How to make webpage to using JS.

• DOM-document Object Model

What should you know to learn Java Script?

HTML & CSS

Tools you need to start JS program.

What is Java script?

Java Script is programming language of web and it executed by the browser.

<title>my First Program</title>

- Make WebPages Interactive

– It can load content without reloading the entire pages.

– JS works on web user’s Computer-even when they are offline.

– JS can be used in the backend with Node.js and MongoDB.

– Game Development-using HTML5 and JS

Java Script or Java are same.

Javascript are web application. Whereas java is programming as well as web

What is variable in JavaScript?

• Rules of Declaration of Variables in JS:-

– Variable can contain letters,digits,underscore and dollar sign.

– Variable must begin with a letter.

– Variable can also begin with $ sign.

– Variables are case sensetive

– Reserved words i.e. Javascripts, can not be use as name.

Data types in Java Script:

• Null and undefined are also data type

How to import Java script External File in index.html

It is use to import file form script.js

First:- we will create index.html

Second:- we will create script.js

Then import into:-

Above file is index.html

Go to the Java Script file:

String in Java Script:

String Data type example in Java Script:

Number data type

typeof() function: it is used to display the datatype.

It is use to import file form script.js

How to work two datatypes at once?

Var sum =10+20;

other example to understand as a string.

Var sum=“10” +5+6;

Ans: = 1056 they understand it is string.

Var sum= true;

If-else statement in Java Script.

//execute else block

alert("values are equal");

alert("values are not equal");

Operators in Java Scripts

– Modulus (division remainder) %

Comparison operators in Java Script:

• ===(equal value and check data type)

• >=(greater than or equal to)

• <=(less than or equal to)

Examples of Comparison operator in Java Script:

==(equal to operator)- it is used to check to values.

alert("both values are same");

alert("both values are same");

alert("values are not same");

Not equal(!=): if condition is not equal to than it execute.

alert("values are not equal");