JavaScript Ajax Google Web Toolkit

Size: px

Start display at page:

Download "JavaScript Ajax Google Web Toolkit"

Phillip Morris
10 years ago
Views:

3 Client Tier Web Tier Business Logic Tier EIS Tier

4 JavaScript Warum?

5 == Adresse?

6 ECMAJavaLiveScript

7 ECMAJavaLiveScript

8 ECMAJavaLiveScript

9 ECMAJavaLiveScript

10 ECMAJavaLiveScript

11 [tschawaskript] : ECMAScript

12 97 % JavaScript akiviert 99 % JavaScript 1.5

13 dynamisch typisiert, klassenlos, objektbasiert

14 dynamisch typisiert, klassenlos, objektbasiert var a; a = 1; a = eins ;

15 dynamisch typisiert, klassenlos, objektbasiert

16 dynamisch typisiert, klassenlos, objektbasiert prototypbasiert

17 Objekt wert1 wert2 wert3 funktion1 funktion2 funktion3 true 3 wert2 function eins() { } function zwei() { } function drei() { }

18 function Mensch(name) { this.name = name; this.sagname = function () { alert( Ich bin + this.name); } } var hans = new Mensch( Hans ); hans.sagname(); //== hans[ sagname ](); //Output: Ich bin Hans

19 hans name sagname Hans function sagname() { alert( Ich bin + this.name); }

20 function Mensch(name) { this.name = name; this.sagname = function () { alert( Ich bin + this.name); } } var hans = new Mensch( Hans ); hans.sagname(); alert(hans.constructor); //Output: function Mensch(name) {

21 hans

22 hans prototype Mensch

23 hans prototype Mensch Mensch.prototype (Object) constructor proto tostring

24 hans name sagname Hans function sagname() { alert( Ich bin + this.name); } prototype Mensch Mensch.prototype (Object) constructor proto tostring

25 hans name sagname proto Hans function sagname() { alert( Ich bin + this.name); } prototype Mensch Mensch.prototype (Object) constructor proto tostring

26 function Mensch(name) { this.name = name; this.sagname = function () { alert( Ich bin + this.name); } } function Mann(name) { Mensch.call(this,name); this.gender = maennlich ; } Mann.prototype = new Mensch( noname );

27 Array Date Math navigator

28 Array Date Math navigator var a = new Array(1,2,3); alert(a.length); //Output: 3

29 Array Date Math navigator var d = new Date(); alert(d.getdate() +. + d.getmonth() +. + d.getfullyear()); //Output:

30 Array Date Math navigator alert(math.pi); alert(math.random()); //Output: //

31 Array Date Math navigator alert(navigator.cookieenabled); alert(navigator.appname); //Output: true // Netscape

32 window window.alert( Hallo Welt! ); window.resizeto(800,600);

33 window document event history location window.location.href = ; window.history.back();

34 window document event history location anchors applets forms images links elements document.title = neuer Titel ; document.images[0].src = neuesbild.jpg ;

35 document event history location anchors applets forms images links elements

36 document event history location anchors applets forms images links elements h1 meta p ul span table title

37 Document Object Model

38 <body> <h1>table of Content</h1> <ul> <li>javascript</li> <li>ajax</li> </ul> </body> body h1 ul Table of Content li li JavaScript Ajax

39 getelementbyid() getelementsbyname() document getelementsbytagname()

40 node attributes firstchild nextsibling nodevalue appendchild() removechild() getattributenode() setattributenode()

41 <body> <h1 id= toc >Table of Content</h1> <ul id= toclist > <li>javascript</li> <li>ajax</li> </ul> </body> var toc = document.getelementbyid( toc ); var tocvalue = toc.firstchild.nodevalue; alert(tocvalue); //Output: Table Of Content

42 <body> <h1 id= toc >Table of Content</h1> <ul id= toclist > <li>javascript</li> <li>ajax</li> </ul> </body> var list=document.getelementbyid( toclist ); var GWT = document.createnode( li ); var GWTText = document.createtextnode( GWT ); GWT.appendChild(GWTText); list.appendchild(gwt);

43 Benutzereingabe Event Eventhandler? Event verarbeiten

44 on blur change click dbclick focus keypress load mouseover

45 <body> <h1 onmouseover= mover() > Table of Content </h1> <ul id= toclist > <li>javascript</li> <li>ajax</li> </ul> </body> function mover (e) { this.style.color = #FF0000 ; }

46 <body> <h1 id= toc >Table of Content</h1> <ul id= toclist > <li>javascript</li> <li>ajax</li> </ul> </body> var toc = document.getelementbyid( toc ); toc.onmouseover = mover; function mover (e) { this.style.color = #FF0000 ; }

47 JavaScript

48 JavaScript

49 JavaScript Cookies

50 JavaScript Cookies document.cookie = var1=wert1 ; var inhalt = document.cookie;

JavaScript: Client-Side Scripting. Chapter 6

JavaScript: Client-Side Scripting Chapter 6 Textbook to be published by Pearson Ed 2015 in early Pearson 2014 Fundamentals of Web http://www.funwebdev.com Development Section 1 of 8 WHAT IS JAVASCRIPT