Unit II- Java Script, DOM JQuery (2).pptx

Web Technology
Unit- II
Topic:
Java Script, DOM, JQuery, AngularJS

JavaScript:
● IntroductiontoJavaScript,
● JavaScriptinperspective,
● basicsyntax,
● variablesanddatatypes,
● statements,
● operators,
● literals,
● functions,
● objects,
● arrays,
● built inobjects,
● JavaScriptdebuggers

JS- Java Script
Java Script
Client Side
Scripting
Language
Dynamic front-end
scripting
language

JavaScript Advantages
Implementing form
validation
•Changing an image
on moving mouse over
it
•Content loading and
changing dynamically
• Sections of a page
appearing and
disappearing
• React to user actions,
• Performing complex
calculations

What Can JavaScript Do?
• Can validate form
data
• Can read and write
HTML elements
• Can access / modify
browser cookies
Can handle events

What Can JavaScript can’t Do?
• Can not close a window
that it hasn't opened.
•Cannot Protect Your
Page Source or Images
• Can not do database related
operation
Cannot Read From or Write
to Files in the Client.

JavaScript - Placement in HTML File
Script in
<body>...</body> section
Script in External file and then include
link in HTML file head section
Script in
<head>...</head> section
Script in
<head> and <body> section

Syntax of Javascript
Write JavaScript code inside HTML
Head Tag, Body Tag or External File
Use <Script> tag inside Head,body tag
Example:
<script >
JavaScript code
</script>

Java Script Example- 1
Print Hello Message
<html>
<body>
<script>
document.write("Hello World")
</script>
</body>
</html>
Script Code in HTML
file in Body Tag

Print Hello Message
<html>
<head>
<script>
document.write("Hello World")
</script>
</head>
</html>
Script Code in HTML
file in Head Tag

Print Hello Message
<html>
<head>
<script>
alert("Hello World")
</script>
</head>
</html>
Print Message using
alert

Print Hello Message
<html>
<head>
<script>
function sayHello()
{ alert("Hello World") }
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
Print Message after
clicking button

JS- Java Script Variables
4 Ways to Declare Java Script Variables
1. Using Var 2. Using Let 3. Using Const
4. Using Nothing

AlwaysdeclareJavaScriptvariableswithvar,let,orconst.
Thevarkeywordis usedinall JavaScriptcodefrom1995to2015.
Thelet andconstkeywordswereaddedtoJavaScriptin2015.
Ifyouwantyourcodetoruninolderbrowser
,youmustusevar

Example By using Var
var x = 5;
var y = 6;
var z = x + y;
Example By using let
let x = 5;
let y = 6;
let z = x + y;
Example By using Const
const x = 5;
const y = 6;
let z = x + y;
Example By using nothing
x = 5;
y = 6;
z = x + y;

Variable naming conventions in
JavaScript
● You should not use any of the JavaScript reserved keywords as a variable name.
These keywords are mentioned in the next section. For example, break or boolean
variable names are not valid.
● JavaScript variable names should not start with a numeral (0-9). They must begin
with a letter or an underscore character. For example, 123test is an invalid variable
name but _123test is a valid one.
● JavaScript variable names are case-sensitive. For example, Name and name are
two different variables.

Java Script Data Types
Java Script Data
Types
Primitive Non-Primitive

Primitive
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all

Non- Primitive
Data Type Description
Object represents instance through which we can access members
Array represents group of similar values
RegExp represents regular expression

Javascript Statements
Theprogramminginstructions writtenin aprogramin aprogramminglanguageareknownas
statements.
OrderofexecutionofStatementsis thesameastheyarewritten.
1.Semicolons:
· SemicolonsseparateJavaScriptstatements.
· Semicolonmarkstheendofastatementinjavascript.

Java Script Statements
2.CodeBlocks:
· JavaScriptstatementscanbegroupedtogetherinsidecurlybrackets.{}
· Suchgroupsareknownascodeblocks.Thepurposeofgroupingis todeﬁnestatementstobeexecutedtogether
.
3.WhiteSpace:
· Javascriptignoresmultiplewhitespaces.
4.LineLengthandLineBreaks:
· Javascriptcodepreferredline lengthbymostprogrammersis upto80characters.
· Thebestplacetobreakacodeline inJavascript,if it doesn’tﬁts,isafteranoperator
.

JavaScript Statements
5.Keywords:
· Keywordsarereservedwordsandcannotbeusedasvariablename.
· AJavascriptkeywordtells aboutwhatkindofoperation it will perform.
· Somecommonlyusedkeywordsare:
1. break:Thisis usedtoterminatealooporswitch.
2. continue:Thisis usedtoskipaparticulariteration in aloopandmovetonextiteration.
3. do….while: Inthis thestatementswrittenwithin doblockareexecutedtill theconditionin while is true.
4. for:Ithelpsin executingablockofstatementstill theconditionis true.
5. function:Thiskeywordis usedtodeclare afunction.
6. return:Thiskeywordis usedtoexit afunction.
7. Var
,Let,Const:Thiskeywordis usedtodeclare avariable.

JavaScript Operators:Arithmetic Operators

JavaScript Operators:Assignment Operators

JavaScript Operators:Comparison Operators

JavaScript Operators:Logical Operators

JavaScript- Literals
● JavaScriptLiteralsaretheﬁxedvaluethatcannotbechanged,
● youdonotneedtospecifyanytypeofkeywordtowriteliterals.
● Literalsareoftenusedtoinitialize variablesinprogramming,namesof
variablesarestringliterals.

JavaScript- Literals
JavaScriptsupportsvarioustypesofliterals whicharelistedbelow:
● Numeric(Integer)Literal
● Floating-Point Literal
● BooleanLiteral
● StringLiteral
● ArrayLiteral
● R
egularExpressionLiteral
● ObjectLiteral

JavaScript- Numeric(Integer) Literal
● Itcanbeexpressedin thedecimal(base10),hexadecimal(base16)oroctal(base8)format.
● Decimalnumericliteralsconsistofasequenceofdigits(0-9)withoutaleading0(zero).
● Hexadecimalnumericliteralsincludedigits(0-9),letters(a-f)or(A-F).
● Octalnumericliteralsincludedigits(0-7).Aleading0(zero)in anumericliteral indicatesoctal
format.
120//decimalliteral
021434//octalliteral
0x4567//hexadecimalliteral

JavaScript- Floating Literal
● Itcontainsadecimalpoint(.)
● Afractionis afloating-pointliteral
● ItmaycontainanExponent.
6.99689//floating-pointliteral
-167.39894//negativefloating-pointliteral

JavaScript- Boolean Literal
Booleanliteral supportstwovaluesonlyeithertrueorfalse.
true//Booleanliteral
false//Booleanliteral

JavaScript- String Literal
Astringliteral is acombinationofzeroormorecharactersenclosedwithinasingle(')ordouble
quotationmarks(").
"Study"//String literal
'tonight'//Stringliteral

JavaScript- Array Literal
● Anarrayliteral isalist ofzeroormoreexpressionsrepresentingarrayelementsthat
areenclosedinasquarebracket([]).
● Wheneveryoucreateanarrayusinganarrayliteral,it isinitializedwiththeelements
speciﬁedinthesquarebracket.
varemp=["aman"
,
"anu"
,
"charita"]; //Arrayliteral

JavaScript- Regular Expression Literal
● RegularExpressionis apattern,usedtomatchacharacterorstringinsometext.
● Itis createdbyenclosingtheregularexpressionstringbetweenforwardslashes.
varr1 =/ab+c/; //R
egularExpressionliteral
varr2 =newR
egExp("abc"); //R
egularExpressionliteral

JavaScript- Object Literal
● JavaScriptObjectLiteral
● Itisacollectionofkey-valuepairsenclosedincurlybraces({}).
● Thekey-valuepairisseparatedbyacomma.
vargames={cricket:11,chess:2,carom:4} //Objectliteral

Java Script Functions
❏ Anonymous Function
❏ Named Function
❏ Function with return statement

Anonymous Function
<script>
var showMessage = function (){
alert("Hello World!");
};
showMessage();
</script>

Named Function without argument
function SayHello() {
alert("Hello ");
}
SayHello();

Named Function with argument
function SayHello(firstName) {
alert("Hello " + firstName);
}
SayHello("Bhavana");

Function with return statement
function sum(val1, val2) {
return val1 + val2;
};
var result = sum(10,20);

JavaScript -Arrays
❏ How to Create array in Javascript
❏ How to access Values of Arrays in Javascript
❏ Arrays Properties and Methods

Java Script -Arrays
How to Create array in Javascript
● Method 1:
○ var cars = ["Saab", "Volvo", "BMW"];
● Method 2:
○ var cars = new Array("Saab", "Volvo", "BMW");
● Method 3:
○ cars[0] = “Saab”
○ cars[1]= “Volvo”
○ cars[2]= “BMW”

Java Script -Arrays
How to access Values of Arrays in Javascript
● Method 1:- To Access only one value
○ var name = cars[0];
● Method 2: To Access only one value with showing it in HTML Page
○ document.getElementById("t1").value = cars[0];
● Method 3: To Access full Array
○ document.getElementById("t1").value= cars;

Java Script -Arrays
Array Properties & Methods
● Length
● Reverse
● Sort
● Push
● Pop
● forEach

Java Script -Objects
❏ HowtoCreateobjectinJavascript
❏ HowtoreadPropertiesofanObjectinJavascript

How to Create object in Javascript
● Objectsarevariablestoo.Butobjectscancontainmanyvalues.
● Thevaluesarewrittenasname:valuepairs
● Method-1
○ varperson={name:"Bhavana"
,age:40};
● Method-2
○ varperson=newObject();
○ person.name="Bhavana";
○ person.age=40;

How to Read/Access Properties of an Object in Javascript
➢ Method-1Syntax
○ objectName.property
➢ Method-1Example
○ person.age
➢ Method2
○ objectName["property"]
➢ Method-2Example
○ person["age"]

Build in objects
(Ref-https://www.ques10.com/p/29073/explain-built-in-objects-of-javascript/)

Array Object
PropertiesoftheArrayobject
Length-Returnsthenumberof elementsin thearray
.
MethodsoftheArrayobject
reverse()-Reversesthearrayelements
concat()- Joinstwoormorearrays
sort()-Sort theelementsof anarray
push()- Appendsoneormoreelementsattheendofanarray
pop()-Removesandreturnsthelastelement

Date Object
MethodsofDateobject
Date()-R
eturnstoday'sdateandtime
getDate()-Returnsthedayofthemonthforthespecifieddate
getDay()- Returnsthedayoftheweekforthespecifieddate
getFullYear()-Returnstheyearofthespecifieddate
getHours()- Returnsthehourin thespecifieddateaccordingtolocal time.
getMilliseconds()-Returnsthemillisecondsinthespecifieddateaccordingtolocaltime.

MAths Object
PropertiesofMathobject
PI-Thevalueof Pi
E-Thebaseofnaturallogarithme
LN2-Naturallogarithmof2
LN10-Naturallogarithmof10
LOG2E-Base2logarithmofe
LOG10E-Base10logarithmofe
SQR
T2-Squarerootof2
MethodsofMathobject
max(a,b)-Returnslargestofaandb
min(a,b)-Returnsleastofaandb
round(a)-Returnsnearestinteger
exp(a)-exponential
pow(a,b)-Power
abs(a)-Returnsabsolutevalueof a
random()-Returnsapseudorandomnumberbetween0and1
sqrt(a)-Returnssquarerootof a

Javascript Debugger
● All modernbrowsershaveabuilt-in JavaScriptdebugger
.
● Built-in debuggerscanbeturnedonandoff,forcingerrorstobereportedtotheuser
.
● Withadebugger
,youcanalsosetbreakpoints(placeswherecodeexecutioncanbestopped),and
examinevariableswhilethecodeisexecuting.
● Y
ouactivate debuggingin yourbrowserwiththeF12key,andselect"Console"inthedebugger
menu.
Example-ClickHere

Javascript Debugger
● ThedebuggerkeywordstopstheexecutionofJavaScript,andcalls(ifavailable)thedebugging
function.
● Thishasthesamefunctionassettingabreakpointinthedebugger
.
● Ifnodebuggingisavailable,thedebuggerstatementhasnoeffect.
● Withthedebuggerturnedon,this codewill stopexecutingbeforeit executesthethirdline.
Example-ClickHere

Advantages of JavaScript
❏ Speed: Client-side JavaScript is very fast because it can be run immediately
within the client-side browser.
❏ Simplicity: JavaScript is relatively simple to learn and implement.
❏ Popularity: JavaScript is used everywhere on the web.
❏ Interoperability: JavaScript plays nicely with other languages and can be used
in a huge variety of applications.
❏ Server Load: Being client-side reduces the demand on the website server.
❏ Rich Interface: Gives the ability to create rich interfaces.

Disadvantages of JavaScript
❏ Client-Side Security: Because the code executes on the users’ computer, in some
cases it can be exploited for malicious purposes. This is one reason some people
choose to disable Javascript.
❏ Browser Support: JavaScript is sometimes interpreted differently by different
browsers. This makes it somewhat difficult to write cross-browser code

DOM
Document Object Modeling
By Bhavana A. Khivsara

DOM-
● DOMhistoryandlevels,
● intrinsiceventhandling,
● modifyingelementstyle,
● thedocumenttree,
● DOMeventhandling

DOM- Introduction
❏ JavaScript can access all the elements in a webpage making use of
Document Object Model (DOM).
❏ The web browser creates a DOM of the webpage when the page is
loaded.
❏ The DOM defines a standard for accessing documents
❏ The DOM model is created as a tree of objects

DOM- Uses
With the object model, JavaScript gets all the power it needs to create dynamic
HTML:
1. JavaScript can change all the HTML elements in the page
2. JavaScript can change all the HTML attributes in the page
3. JavaScript can change all the CSS styles in the page
4. JavaScript can remove existing HTML elements and attributes
5. JavaScript can add new HTML elements and attributes

DOM- Tree
<html>
<head>
<title> My Text </title>
</head>
<body>
<h1> My Header </h1>
<p> My Paragraph </p>
</body>
</html>

DOM Levels
DOM Levels
Level 0 Level 1 Level 2
Low Level
Interface
Core,
HTML
Core2, View,
Event, Style,
Traversal, Range
Level 3
CORE3, LOAD and SAVE,
VALIDATION, EVENTS,
and XPATH.

DOM- Properties & Methods
Methods Description
getElementById(id) Find an element by element id
getElementsByTagName(name) Find an element by Tag Name
getElementsByClassName(name) Find an element by Class Name
getElementsByName(name) Find an element by element name
write() Writes new text to a document

DOM- Properties & Methods
Methods Example
.innerHTML document.getElementById(“demo”).innerHTML
..Value document.getElementById(“t1”).Value

DOM- Examples: getElementById
<html>
<head><script>
function f1() {
var a= document.getElementById("t1").value;
alert(a); }
</script></head>
<body>
<input type="text" id="t1" >
<input type=button value="click" onclick="f1()">
</body>
</html>

DOM- Examples: getElementsByTagName
<html>
<head><script>
function f1() {
document.getElementsByTagName("p")[0].innerHTML="HTML"; }
</script></head>
<body>
<p> Hello</p>
<p > How Are You </p>
</body>
</html>

DOM- Examples:
getElementsByClassName
<html>
<head><script>
function f1() {
document.getElementsByClassName("a1")[1].innerHTML="HTML"; }
</script></head>
<body>
<p> Hello</p>
<p class= “a1”> How Are You </p>
<h1 class= “a1”>Good Day </h1>
</body>
</html>

DOM- Examples: To Count Total elements
<script>
function f1() {
alert(document.getElementsByTagName("p").length); }
</script><body>
<p> Hello</p>
</body>

DOM- Examples: To change CSS Property
<html>
<head><script>
function f1() {
document.getElementsByClassName("a1")[1].style.color="red"; }
</script></head>
<body>
<p> Hello</p>
</body>
</html>

DOM- Examples:
To Disable/Enable element
<script>
function f1() {
document.getElementsById("t1").disabled= true; }
</script>
<body>
<input type="text" id="t1" >
</body>

JQuery
jQuery is a JavaScript
Library.
jQuery greatly simplifies
JavaScript programming.
jQuery is easy to learn.
jQuery is lightweight.
JQuery

JQuery
The jQuery library contains the following features:
❏ HTML/DOM manipulation
❏ CSS manipulation
❏ HTML event methods
❏ Effects and animations
❏ AJAX
❏ Utilities

JQuery
Google
Many of the biggest companies on the Web use jQuery,
such as:
Microsoft
Netflix
IBM

Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
Adding jQuery to Your Web Pages
Way
1
Way
2

jQuery CDN
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>

jQuery Syntax
$(selector).action()
$ sign to
define/access
jQuery
A (selector) to
find HTML
elements
A jQuery action()
to be performed
on the element

jQuery Examples
$(this).hide()
$("p").hide()
$(".test").hide()
$("#test").hide()
hides the current element
hides all elements.
hides all elements with class="test"
hides the element with id="test"

jQuery Example: To hide Paragraph
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script> </head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
</body>

jQuery Example: To change CSS Property
<head>
<script>
$(this).css("background-color","Red");
});
});
</script> </head>
<body>
</body>

jQuery Example: To append/Add element
<head>
<script>
$(this).append("Hello");
});
});
</script> </head>
<body>
</body>

jQuery Example: To remove element
<head>
<script>
$(this).remove();
});
});
</script> </head>
<body>
</body>

Web Technology
Unit- II
Topic:
AngularJS-
By Bhavana A. Khivsara

AngularJS
•AngularJSisaJavaScriptframework.
•ItcanbeaddedtoanHTMLpagewitha<script>tag.
•AngularJSextendsHTMLattributeswithDirectives,andbindsdatatoHTMLwithExpressions.
•Syntax
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular
.min.js"></script>

AngularJS
AngularJSExtendsHTML
•AngularJSextendsHTMLwithng-directives.
•Theng-appdirectivedeﬁnesanAngularJSapplication.
•Theng-modeldirective bindsthevalueofHTMLcontrols(input,select,textarea)to
applicationdata.
•Theng-binddirective bindsapplicationdatatotheHTMLview.

AngularJS-MVCArchitecture
ModelViewControllerorMVCasit is popularlycalled,is asoftwaredesignpatternfordevelopingweb
applications.
•AModelViewControllerpatternis madeupofthefollowingthreeparts−
1. Model−
Itis thelowestlevel ofthepatternresponsibleformaintainingdata.
2. View−
Itis responsiblefordisplayingall oraportionofthedatatotheuser
.
3. Controller−Itis asoftwareCodethatcontrolstheinteractionsbetweentheModelandView.

StepstocreateAngularJS
• Step1−
Loadframework-using<Script>tag.
•<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular
.min.js"></script>
•Step2−
DefineAngularJSApplication usingng-appdirective
•<divng-app="">...</div>
•Step3−
Defineamodelnameusingng-modeldirective
•<p>EnteryourName:<inputtype=
"text"ng-model=
"name"></p>
•Step4−
Bindthevalueofabovemodeldefinedusingng-binddirective.
•<p>Hello<spanng-bind="name"></span>!</p>

AngularJS - Directives
1.ng-app−Thisdirective startsanAngularJSApplication.Itis alsousedtoloadvariousAngularJS
modulesinAngularJSApplication.
<divng-app="">...</div>
2.ng-init−Thisdirective initializes applicationdata.Itis usedtoputvaluestothevariablestobe
usedintheapplication.
<divng-app=""ng-init="ﬁrstName='John'">

AngularJS - Directives
3.ng-model−ThisdirectivebindsthevaluesofAngularJSapplicationdatatoHTMLinputcontrols.
<p>EnteryourName:<inputtype="text"ng-model="name"></p>
4.ng-repeat−Thisdirectiverepeatshtmlelementsforeachiteminacollection.
<ol>
<ling-repeat="countryincountries">{
{country
.name}}</li>
</ol>

AngularJS Example
<html>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular
.min.js"> </script>
<body>
<divng-app="">
Name:<inputtype="text"ng-model="name">
<
png-bind="name"
><
/
p
>
</div>
</body>
</html>

AngularJS Example Explained
Exampleexplained:
•AngularJSstartsautomaticallywhenthewebpagehasloaded.
•Theng-appdirectivetellsAngularJSthatthe<div>elementis the"owner"ofanAngularJSapplication.
•Theng-modeldirectivebindsthevalueoftheinputﬁeldtotheapplicationvariablename.
•Theng-binddirectivebindstheinnerHTMLofthe<
p
>elementtotheapplicationvariablename.

AngularJS Expression
Expressionsareusedtobindapplicationdatatohtml.
Expressionsarewritteninsidedoublebraceslike
•{{expression}}.
Usingnumbers
•<p>ExpenseonBooks:{{cost*quantity}}Rs</p>
Usingstrings
•<p>Hello{{fname+““+lname}}</
p>
Usingobject
•<
p
>
R
oll No:{{student.rollno}}</p>
Usingarray
•<p>Marks(Math):{{marks[3]}}</p>

AngularJS Expressions -Example
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular
.min.js">
</script>
<body>
<divng-app="">
<p>M
yﬁrstexpression:{{5+5}}
<
/
p
>
</div>
</body>
</html>
OutPut

AngularJS - Controllers
AngularJSapplicationmainlyrelies oncontrollerstocontroltheﬂowofdataintheapplication.
•Acontrolleris deﬁnedusingng-controller directive.
•Eachcontrolleraccepts$scopeasaparameterwhichreferstotheapplication/modulethat
controlleristocontrol.
•<divng-app="myApp"ng-controller="myCtrl">

AngularJS Controllers- Example
<
divng-app=
"myApp"ng-controller=
"myCtrl"
>
First Name:<inputtype="text"ng-model="firstName"><br>
Last Name:<inputtype="text" ng-model="lastName"><br>
Full Name:{{firstName+""+lastName}}
</div>
<script>
varapp=angular
.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.firstName="John";
$scope.lastName="Doe";
});
</script>

Unit II- Java Script, DOM JQuery (2).pptx

More Related Content

Similar to Unit II- Java Script, DOM JQuery (2).pptx

Recently uploaded

Unit II- Java Script, DOM JQuery (2).pptx