Recommended
More Related Content
Similar to Unit II- Java Script, DOM JQuery (2).pptx
Similar to Unit II- Java Script, DOM JQuery (2).pptx (20)
Recently uploaded
Recently uploaded (20)
Unit II- Java Script, DOM JQuery (2).pptx
- 1. Web Technology Unit- II Topic: Java Script, DOM, JQuery, AngularJS
- 2. JavaScript: ● IntroductiontoJavaScript, ● JavaScriptinperspective, ● basicsyntax, ● variablesanddatatypes, ● statements, ● operators, ● literals, ● functions, ● objects, ● arrays, ● built inobjects, ● JavaScriptdebuggers
- 3. JS- Java Script Java Script Client Side Scripting Language Dynamic front-end scripting language
- 4. 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
- 5. What Can JavaScript Do? • Can validate form data • Can read and write HTML elements • Can access / modify browser cookies Can handle events
- 6. 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.
- 7. 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
- 8. 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>
- 9. 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
- 10. Java Script Example- 2 Print Hello Message <html> <head> <script> document.write("Hello World") </script> </head> </html> Script Code in HTML file in Head Tag
- 11. Java Script Example- 3 Print Hello Message <html> <head> <script> alert("Hello World") </script> </head> </html> Print Message using alert
- 12. Java Script Example- 4 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
- 14. JS- Java Script Variables 4 Ways to Declare Java Script Variables 1. Using Var 2. Using Let 3. Using Const 4. Using Nothing
- 15. JS- Java Script Variables AlwaysdeclareJavaScriptvariableswithvar,let,orconst. Thevarkeywordis usedinall JavaScriptcodefrom1995to2015. Thelet andconstkeywordswereaddedtoJavaScriptin2015. Ifyouwantyourcodetoruninolderbrowser ,youmustusevar
- 16. JS- Java Script Variables 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;
- 17. 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.
- 19. Java Script Data Types Java Script Data Types Primitive Non-Primitive
- 20. Java Script Data Types 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
- 21. Java Script Data Types Non- Primitive Data Type Description Object represents instance through which we can access members Array represents group of similar values RegExp represents regular expression
- 23. Javascript Statements Theprogramminginstructions writtenin aprogramin aprogramminglanguageareknownas statements. OrderofexecutionofStatementsis thesameastheyarewritten. 1.Semicolons: · SemicolonsseparateJavaScriptstatements. · Semicolonmarkstheendofastatementinjavascript.
- 24. Java Script Statements 2.CodeBlocks: · JavaScriptstatementscanbegroupedtogetherinsidecurlybrackets.{} · Suchgroupsareknownascodeblocks.Thepurposeofgroupingis todefinestatementstobeexecutedtogether . 3.WhiteSpace: · Javascriptignoresmultiplewhitespaces. 4.LineLengthandLineBreaks: · Javascriptcodepreferredline lengthbymostprogrammersis upto80characters. · Thebestplacetobreakacodeline inJavascript,if it doesn’tfits,isafteranoperator .
- 25. 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.
- 32. JavaScript- Literals ● JavaScriptLiteralsarethefixedvaluethatcannotbechanged, ● youdonotneedtospecifyanytypeofkeywordtowriteliterals. ● Literalsareoftenusedtoinitialize variablesinprogramming,namesof variablesarestringliterals.
- 33. JavaScript- Literals JavaScriptsupportsvarioustypesofliterals whicharelistedbelow: ● Numeric(Integer)Literal ● Floating-Point Literal ● BooleanLiteral ● StringLiteral ● ArrayLiteral ● R egularExpressionLiteral ● ObjectLiteral
- 34. 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
- 35. JavaScript- Floating Literal ● Itcontainsadecimalpoint(.) ● Afractionis afloating-pointliteral ● ItmaycontainanExponent. 6.99689//floating-pointliteral -167.39894//negativefloating-pointliteral
- 36. JavaScript- Boolean Literal Booleanliteral supportstwovaluesonlyeithertrueorfalse. true//Booleanliteral false//Booleanliteral
- 37. JavaScript- String Literal Astringliteral is acombinationofzeroormorecharactersenclosedwithinasingle(')ordouble quotationmarks("). "Study"//String literal 'tonight'//Stringliteral
- 38. JavaScript- Array Literal ● Anarrayliteral isalist ofzeroormoreexpressionsrepresentingarrayelementsthat areenclosedinasquarebracket([]). ● Wheneveryoucreateanarrayusinganarrayliteral,it isinitializedwiththeelements specifiedinthesquarebracket. varemp=["aman" , "anu" , "charita"]; //Arrayliteral
- 39. JavaScript- Regular Expression Literal ● RegularExpressionis apattern,usedtomatchacharacterorstringinsometext. ● Itis createdbyenclosingtheregularexpressionstringbetweenforwardslashes. varr1 =/ab+c/; //R egularExpressionliteral varr2 =newR egExp("abc"); //R egularExpressionliteral
- 40. JavaScript- Object Literal ● JavaScriptObjectLiteral ● Itisacollectionofkey-valuepairsenclosedincurlybraces({}). ● Thekey-valuepairisseparatedbyacomma. vargames={cricket:11,chess:2,carom:4} //Objectliteral
- 42. Java Script Functions ❏ Anonymous Function ❏ Named Function ❏ Function with return statement
- 43. Anonymous Function <script> var showMessage = function (){ alert("Hello World!"); }; showMessage(); </script>
- 44. Named Function without argument function SayHello() { alert("Hello "); } SayHello();
- 45. Named Function with argument function SayHello(firstName) { alert("Hello " + firstName); } SayHello("Bhavana");
- 46. Function with return statement function sum(val1, val2) { return val1 + val2; }; var result = sum(10,20);
- 48. JavaScript -Arrays ❏ How to Create array in Javascript ❏ How to access Values of Arrays in Javascript ❏ Arrays Properties and Methods
- 49. 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”
- 50. 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;
- 51. Java Script -Arrays Array Properties & Methods ● Length ● Reverse ● Sort ● Push ● Pop ● forEach
- 53. Java Script -Objects ❏ HowtoCreateobjectinJavascript ❏ HowtoreadPropertiesofanObjectinJavascript
- 54. Java Script -Objects 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;
- 55. Java Script -Objects 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"]
- 56. Javascript Build in Objects
- 58. Array Object PropertiesoftheArrayobject Length-Returnsthenumberof elementsin thearray . MethodsoftheArrayobject reverse()-Reversesthearrayelements concat()- Joinstwoormorearrays sort()-Sort theelementsof anarray push()- Appendsoneormoreelementsattheendofanarray pop()-Removesandreturnsthelastelement
- 59. Date Object MethodsofDateobject Date()-R eturnstoday'sdateandtime getDate()-Returnsthedayofthemonthforthespecifieddate getDay()- Returnsthedayoftheweekforthespecifieddate getFullYear()-Returnstheyearofthespecifieddate getHours()- Returnsthehourin thespecifieddateaccordingtolocal time. getMilliseconds()-Returnsthemillisecondsinthespecifieddateaccordingtolocaltime.
- 60. 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
- 62. 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
- 63. Javascript Debugger ● ThedebuggerkeywordstopstheexecutionofJavaScript,andcalls(ifavailable)thedebugging function. ● Thishasthesamefunctionassettingabreakpointinthedebugger . ● Ifnodebuggingisavailable,thedebuggerstatementhasnoeffect. ● Withthedebuggerturnedon,this codewill stopexecutingbeforeit executesthethirdline. Example-ClickHere
- 64. 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.
- 65. 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
- 66. DOM Document Object Modeling By Bhavana A. Khivsara
- 67. DOM- ● DOMhistoryandlevels, ● intrinsiceventhandling, ● modifyingelementstyle, ● thedocumenttree, ● DOMeventhandling
- 68. 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
- 69. 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
- 70. DOM- Tree <html> <head> <title> My Text </title> </head> <body> <h1> My Header </h1> <p> My Paragraph </p> </body> </html>
- 71. 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.
- 72. 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
- 73. DOM- Properties & Methods Methods Example .innerHTML document.getElementById(“demo”).innerHTML ..Value document.getElementById(“t1”).Value
- 74. 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>
- 75. 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> <input type=button value="click" onclick="f1()"> </body> </html>
- 76. 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> <input type=button value="click" onclick="f1()"> </body> </html>
- 77. DOM- Examples: To Count Total elements <script> function f1() { alert(document.getElementsByTagName("p").length); } </script><body> <p> Hello</p> <p class= “a1”> How Are You </p> <h1 class= “a1”>Good Day </h1> <input type=button value="click" onclick="f1()"> </body>
- 78. DOM- Examples: To change CSS Property <html> <head><script> function f1() { document.getElementsByClassName("a1")[1].style.color="red"; } </script></head> <body> <p> Hello</p> <p class= “a1”> How Are You </p> <h1 class= “a1”>Good Day </h1> <input type=button value="click" onclick="f1()"> </body> </html>
- 79. DOM- Examples: To Disable/Enable element <script> function f1() { document.getElementsById("t1").disabled= true; } </script> <body> <input type="text" id="t1" > <input type=button value="click" onclick="f1()"> </body>
- 80. JQuery By Bhavana A. Khivsara
- 81. JQuery jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn. jQuery is lightweight. JQuery
- 82. JQuery The jQuery library contains the following features: ❏ HTML/DOM manipulation ❏ CSS manipulation ❏ HTML event methods ❏ Effects and animations ❏ AJAX ❏ Utilities
- 83. JQuery Google Many of the biggest companies on the Web use jQuery, such as: Microsoft Netflix IBM
- 84. Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google Adding jQuery to Your Web Pages Way 1 Way 2
- 86. jQuery Syntax $(selector).action() $ sign to define/access jQuery A (selector) to find HTML elements A jQuery action() to be performed on the element
- 87. 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"
- 88. 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>
- 89. jQuery Example: To change CSS Property <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).css("background-color","Red"); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> </body>
- 90. jQuery Example: To append/Add element <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).append("Hello"); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> </body>
- 91. jQuery Example: To remove element <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).remove(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> </body>
- 92. Web Technology Unit- II Topic: AngularJS- By Bhavana A. Khivsara
- 95. AngularJS-MVCArchitecture ModelViewControllerorMVCasit is popularlycalled,is asoftwaredesignpatternfordevelopingweb applications. •AModelViewControllerpatternis madeupofthefollowingthreeparts− 1. Model− Itis thelowestlevel ofthepatternresponsibleformaintainingdata. 2. View− Itis responsiblefordisplayingall oraportionofthedatatotheuser . 3. Controller−Itis asoftwareCodethatcontrolstheinteractionsbetweentheModelandView.
- 97. 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="firstName='John'">
- 100. AngularJS Example Explained Exampleexplained: •AngularJSstartsautomaticallywhenthewebpagehasloaded. •Theng-appdirectivetellsAngularJSthatthe<div>elementis the"owner"ofanAngularJSapplication. •Theng-modeldirectivebindsthevalueoftheinputfieldtotheapplicationvariablename. •Theng-binddirectivebindstheinnerHTMLofthe< p >elementtotheapplicationvariablename.
- 102. 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 yfirstexpression:{{5+5}} < / p > </div> </body> </html> OutPut
- 103. AngularJS - Controllers AngularJSapplicationmainlyrelies oncontrollerstocontroltheflowofdataintheapplication. •Acontrolleris definedusingng-controller directive. •Eachcontrolleraccepts$scopeasaparameterwhichreferstotheapplication/modulethat controlleristocontrol. •<divng-app="myApp"ng-controller="myCtrl">
- 104. 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>