Subject :
Web Application Development
Instructor:
Muhammad Jameel
JAVASCRIPT
► JavaScript is used in Web pages to
improve the design, validate forms,
detect browsers, create cookies, and
much more.
► JavaScript is the most popular
scripting language on the internet, and
works in all major browsers, such as
Internet Explorer, Mozilla, Firefox,
Netscape, Opera.
WHAT IS JAVASCRIPT?
► JavaScript was designed to add interactivity to HTML
pages
► JavaScript is a scripting language (a scripting language
is a lightweight programming language)
► A JavaScript consists of lines of executable computer
code
► A JavaScript is usually embedded directly into HTML
pages
► JavaScript is an interpreted language (means that
scripts execute without preliminary compilation)
► Everyone can use JavaScript without purchasing a
license
Are Java and JavaScript the Same?
► NO!
► Java and JavaScript are two completely
different languages in both concept and
design!
► Java (developed by Sun Microsystems) is a
powerful and much more complex
programming language - in the same
category as C and C++.
Introduction to JavaScript
► ClientSide Script ► Server Side Script
► V.B Script ► Php
► JavaScript ► .net
► Python
► Go
► Run to Browser ► Run on Server
JavaScript Event Based
Programming Language
► Click ► Key Press
► Double Click ► Key Up
► Right Click ► Load
► Mouse Hover ► Unload
► Mouse Out ► Resize
► Drag Drop ► Scroll
Benefit of Web Development
Desktop Web Mobile
Application Application Application
►Electron JS J.Query Angular UI
Angular Js React Js
React Js Vue js
Vue js React Native
Node Js
Node Js
Use in JavaScript
► Dropdown Menu ► Video Player
► Animated Sliders ► Zoom effect
► Maps ► Animated Gallery
► Chart ► Form Validation
► Graphs ► Accordions
► Pop-up window ► Calendar
► Audio Players
►Software
►Browsers
► Notepad Notepad+
► Google Chrome
+
► Mozilla Firebox
► VS code
► Internet Explorer
► Sublime
► Safari
► Atom
► Dream Viewer
Ending Statements With a
Semicolon?
► With traditional programming languages, like C++
and Java, each code statement has to end with a
semicolon (;).
► Many programmers continue this habit when
writing JavaScript, but in general, semicolons are
optional! However, semicolons are required if you
want to put more than one statement on a single
line.
► Single line comment //
► Multiple lines comments /*---------*/
How to Put a JavaScript Into an
HTML Page?
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
JavaScript Variables
► Variablesare used to store data.
► Types of variable
►Var
►const
►let
► Rules for variable names:
Variable names are case sensitive
They must begin with a letter or the underscore
character
► strname – STRNAME (not same)
JavaScript Operators
Arithmetic Operators Operator
+
Description
Addition
Example
x=2
Result
4
(İşleçler, iki ya da daha fazla değer y=2
üzerinde işlem yapılmasını x+y
sağlar. JavaScript içinde - Subtraction x=5
y=2
3
aritmetik ve hesaplama işleçleri x-y
olmak üzere iki tür işleç * Multiplication x=5 20
kullanılır) y=4
x*y
/ Division 15/5 3
5/2 2,5
% Modulus (division 5%2 1
remainder)
10%8 2
10%2 0
++ Increment x=5 x=6
x++
-- Decrement x=5 x=4
x--
JavaScript Operators – 2
Assignment Operators Operator Example Is The Same As
(Atama deyimi (=), bir değişkene
bir değerin atanmasını sağlar. = x=y x=y
Değişkenlere türlerine ve
tanımlamalarına uygun olan += x+=y x=x+y
herhangi bir değer atanabilir.)
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
JavaScript Operators - 3
Comparison Operators Operator
==
Description
is equal to
Example
5==8 returns false
(Karşılaştırma işleci, iki ya da daha
=== is equal to (checks for x=5
çok değeri birbiriyle both value and
y="5"
type)
karşılaştırarak True ya da False
olarak mantıksal bir değer x==y returns true
döndürür.)
x===y returns
false
!= is not equal 5!=8 returns true
> is greater than 5>8 returns false
< is less than 5<8 returns true
>= is greater than or equal 5>=8 returns false
to
<= is less than or equal to 5<=8 returns true
JavaScript Operators - 4
Logical Operators
Operator Description Example
&& and x=6
(İkili işleçler birden çok y=3
karşılaştırma işlemini tek bir
koşul ifadesi olarak birleştirirler.) (x < 10 && y > 1)
returns true
|| or x=6
y=3
(x==5 || y==5)
returns false
! not x=6
y=3
!(x==y) returns
true
JavaScript Basic Examples
<script>
document.write("Hello World!")
</script> format text with HTML code - heading
<script>
alert("Hello World!")
</script>
Example
<script>
x=“Hello World!”
document.write(x)
</script>
<script>
x=“İsminizi Yazın….”
document.write(“Merhaba” +x)
</script> use line break html code
JavaScript Popup Boxes
► Alert Box
An alert box is often used if you want to make
sure information comes through to the user.
When an alert box pops up, the user will have
to click "OK" to proceed.
<script>
alert("Hello World!")
</script>
JavaScript Popup Boxes - 2
► Confirm Box
A confirm box is often used if you want the user
to verify or accept something.
When a confirm box pops up, the user will have
to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If
the user clicks "Cancel", the box returns false.
Confirm Box
<script type="text/javascript">
let x="Hello World";
x="world";
document.write(x);
</script>
Confirm Box
<script
type="text/javascript">
<script
var a=confirm("Do you
type="text/javascript">
like our website?");
var a=confirm("Do you
if(a){
like our website?");
alert("thanks");
alert(a);
}else
</script>
{
alert("sorry");
}
</script>
JavaScript Popup Boxes - 3
► Prompt Box
A prompt box is often used if you want the user
to input a value before entering a page.
When a prompt box pops up, the user will have
to click either "OK" or "Cancel" to proceed after
entering an input value.
If the user clicks "OK“, the box returns the input
value. If the user clicks "Cancel“, the box
returns null.
Prompt Box Example
<script>
Var x=prompt (“Hello World”);
document.write(x)
</script>
Conditional Statements Examples - 3
<script>
p=prompt(“visit website?", " ")
if(p=="06")
{
alert(“thanks")
}
else
{
alert(“sorry")
}
</script>
JS Examples -1
Y=20x+12 ve x=3 ise, sonucu açılan
pencerede gösteren kod nasıl yazılmalıdır?
<script>
x=3
y=20*x+12
alert(y)
</script>
Examples -2
<script>
s1=12
s2=28
toplam=s1+s2
document.write("Sayıların toplamı: "+toplam)
</script>
Conditional Statements
► Very often when you write code, you want to perform different actions
for different decisions. You can use conditional statements in your
code to do this.
In JavaScript we have the following conditional statements:
► if statement - use this statement if you want to execute some code
only if a specified condition is true
► if...else statement - use this statement if you want to execute some
code if the condition is true and another code if the condition is false
► if...else if....else statement - use this statement if you want to
select one of many blocks of code to be executed
► switch statement - use this statement if you want to select one of
many blocks of code to be executed
Data Types of JavaScript
► Var x=“Hello World”; ------ String
► Var x= 25 ; ------ Number
► Var x=True/False; ------ Boolean
► Var x=[“HTML”,’’CSS”,”jS”];---- Array
► Var x={first:”ali”, last:”Hasan”};- Object
► Var x=null; ---------- Null
► Var x; ----------- undefined
Data Types of JavaScript
<script>
Var x=“Hello World”;
Var x=24;
var x=["HTML","CSS"];
Var x={first:"HTML",last:"CSS"};
document.write(x)
document.write(“<br>”)
document.write(typeof x)
</script>
Arithmetic Operators
Var a=2;
Var b=10;
Var c=a+b;-------------------Addition
Var c=a-b;-------------------- Subs
Var c=a/b;-------------------Division
Var c=a*b;------------------Multiplication
Var c=a%b;---------------- reminder
Document.write(c);
Examples -3
<script>
<script>
s1=12
s2=28
toplam=s1+s2;
fark=s1-s2;
carp=s1*s2;
bol=s1/s2;
document.write("<br>Arithematic Operators .<br>");
document.write("<br>Sum: "+toplam);
document.write("<br>Subs: "+fark);
document.write("<br>multipication: "+carp);
document.write("<br>dividion: "+bol);
alert("Display the Arithematic Operators !");
</script >
Logical Operator
<script>
var age=20;
if(age>=18 && age<=21){
console.log("yes you are eligible");
}
</script>
Function
<script>
function hello() {
document.write("hello world");
}
hello();
</script>
Use of Basic Event Function
►Click ------------------ onclick
►Doubleclick ------------ ondbclick
►Right click ------------- oncontextmenu
►Mouse hover-----------onmouseenter
►Mouse out -------------onmouseout
►Mouse down-----------onmousedown
►Mouse up -------------onmouseup
►Key press ------------- onkeypress
►Key up ----------------- onkeyup
►Load------------------- onload
►Unload----------------onunload
►Resize-----------------onresize
►Scroll----------------- onscroll
Basic Event
► JavaScript ► HTML
<script> <body>
function hello() { <p
document.write("hello onmouseout="hello
world"); ()">Click me</p>
}
</script> </body>
Google Chrome//Console testing
► Varx=50;
Console.log(x);
Console.table(x);
Console.error(“sometime went wrong”);
Console.warn(“this is just warning”);
Console.clear();
Comparison
<script>
s1=12
s2=12
console.log(s1==s2);
</script >
Statement –IF and IF-ELSE
<script> <script>
var name="jameel";
var x=31;
var gender="male";
if(x>60){ if(gender=="male"){
document.write("x is document.write("hello
greater"); Mr."+name);
}else { }else
{
document.write("x is
document.write("hello
smaller"); Miss."+name);
} }
</script > </script >
Statement –if-else-if
<script>
var per=79;
if(per>=80 && per<=100){
document.write("Your Grade is A");
}else if(per>=60 && per<=80){
document.write("Your Grade is B");
}else if(per>=50 && per<=60){
document.write("Your Grade is C");
}else if(per>=40 && per<=50){
document.write("Your Grade is D");
}else if(per<40){
document.write("yOU are Fail");
}else { document.write("Please Valid Number");
}
</script >
Switch Statement
<script>
var month=4;
switch(month){
case 1:
document.write("january");
break;
case 2:
document.write("Feburary");
break;
case 3:
document.write("March");
break;
default:
document.write("Enter Valide Day");
}
</script >
