Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Projektowanie warstwy klienckiej aplikacji internetowych JavaScript.

Prezentacja na temat: "Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Projektowanie warstwy klienckiej aplikacji internetowych JavaScript."— Zapis prezentacji:

1 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Projektowanie warstwy klienckiej aplikacji internetowych JavaScript Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Projektowanie warstwy klienckiej aplikacji internetowych JavaScript Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Politechnika Łódzka, ul. Żeromskiego 116, 90-924 Łódź, tel. (042) 631 28 83 www.kapitalludzki.p.lodz.pl

2 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. JavaScript - basics JavaScript is used in millions of 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, Firefox, Opera, Chrome.

3 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. JavaScript – basics (2) JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language It is free Java != JavaScript !!!

4 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. JavaScript - examples <!– document.write(It is JavaScript!") //-->

5 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. JavaScript – examples(2) function pushbutton() { alert(Hello!"); }

6 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. JavaScript – examples(3) function getname(str) { alert("Hi, "+ str+"!"); } Enter your name:

7 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Inserting JavaScript 1) section (as in previous transparencies) 2)Inline scripts:.... 3) External file:

8 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Hierarchy of objects

9 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Basics usage of objects a) With dot (.) – the same as in C++ (preferred way) b) With usage the table of properties of object, eg: document[1] – useful with loops c) With usage of association table: document["href"]

10 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Expressions & operators x=7; // variables doesnt have type! str = Some text"; (bool1 == true) && (bool2 == false); str = Some" + " text"; All the operators are identical as in C++/Java.

11 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Control flow statements StatementExample usage breakfor(i=1; i<5; i++) { // expressions; break; } continueThe same as break. forSee break.. for..infor (i in obj) {// expressions} gotogoto label1; if..elseif(condition) {// expressions if true } else {// expressions if false } returnfunction sum(a,b) {x=a+b; return x;} while do-while while(condition) {//expressions} do { //expressions } while (condition) withwith (document) { write " Some text ";}

12 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Events - onload and onUnload Events are triggered when the user enters or leaves the page. The onload event is often used to check the visitor's browser type and browser version, Events are often used to deal with cookies that should be set when a user enters or leaves a page. Eg:

13 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Events - onFocus, onBlur and onChange Events are often used in combination with validation of form fields. Eg: <input type="text" size="30 id="email" onchange="checkEmail()">;

14 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Events - onSubmit Event is used to validate all form fields before submitting it. Eg: <form method="post" action="xxx.htm" onsubmit="return checkForm()">

15 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Events - onMouseOver and onMouseOut Events are often used to create "animated" buttons, eg: <!-- function changeImage(i,j) { document.images[i].src = image"+j+".gif"; }-->

16 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Navigator object Contains information about browser Used when is necessary to create different content based on browser type FieldDescription appCodeNameBrowser's codename appNameBrowser's name appVersionBrowser's version number userAgentAll above represented as single variable

17 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Window object For each document it exists at least one window object Window object can be treated as a real browser window, document object represents it's content FieldDescription document, history, location Children of Window object framesTable containing list of all frames, if exist in window nameName statusMessage in status bar

18 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Window object (2) MethodsDescription alert(string)Alert window close()Closes window confirm(text)Dialog window with text and OK and Cancel buttons open()Opens new window scroll(x,y)Scrolls window to coordinates x,y

19 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Location object Represents current URL FieldDescription hostHostname and port number, e.g.: www.dmcs.p.lodz.pl:80 hostnameHostname or IP address hrefURL pathPath to current document portPort number protocolName of protocol used to connect to current page (http:, ftp:, etc.) searchAll parameters send to current page after question mark(?)

20 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. History object Contains information about current session FieldDescription currentCurrent URL lengthNumber of positions in history list previousURL address of previous entry nextURL address of next entry (when available) Method Description back()Moves back one entry in history forward()Moves forward one entry in history go(num)Moves num entries (num can be positive or negative) go(string)Moves to the newest entry in history, which contains string (treated as substring) in it's name

21 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Document object FieldDescription alinkColorActive link color anchorsArray containing all anchors in document bgColorBackground color fgColorText color formsArray containing all forms in document lastModifiedLast modification date linkColorNormal link color linksArray containing all links in document referrerURL of previous entry titleTitle value vlinkColorVisited link color

22 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Document object (2) MethodsDescription close()Closes current document write(string)Writes string to the document writeln(string)Writes string to the document in new line

23 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Link, area, anchor objects Link object is created when is used Anchor object is created when is used Area object is created for each tag All of them has similar fields as an Location object and they are able to use following events: onmouseover, onmouseout, onclick

24 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Form object Events: onsubmit, onreset FieldsDescription namename attribute value methodmethod attribute value actionaction attribute value encodingencoding attribute value targetTarget window elementsArray of elements of form lengthLength of elements array MethodsDescription submit()Submits form reset()Clears form to default values

25 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Input object Events: onfocus, onblur, onSelect, onsubmit, onchange FieldDescription namename attribute value valuevalue attribute value defaultValueDefault value for text field checkedCurrent state of field (for radio and checkbox) defaultCheckedDefault state of field (for radio and checkbox) MethodDescription focus()Focuses on current field blur()Disactivation of current field Submit()Submits form

26 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Select object FieldDescription Namename attribute value optionsArray containing option list LengthLength of above array selectedIndexIndex of currently chosen option

27 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Image object Events: onerror, onabort, onload FieldDescription borderborder attribute value heightheight attribute value namename attribute value srcsrc attribute value widthwidth attribute value completeshows, if image is completely loaded

28 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. Date and Math objects They are not part of browser's objects hierarchy today = new Date(); someDay = new Date(hours,minutes,seconds); document.write (someDay.getHours()); Math - set of constants and popular mathematical functions: Math.PI Math.E Math.abs (number); Math.cos (number);

29 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. New windows creation <!-- myWindow = window.open("window.htm", "MyWindow", "toolbar=no, location=no"); -->

30 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego JavaScript. New windows creation(2) PropertyDescription toolbar = [yes/no]Visibility of toolbar location = [yes/no]Visibility of location bar directories = [yes/no]Visibility of directories bar status = [yes/no]Visibility of status bar menubar = [yes/no]Visibility of menu bar scrollbars = [yes/no]Visibility of scrollbars resizable = [yes/no]Sets possibility of resizing window width = [pix]Width of the window height = [pix]Height of the window

31 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Projektowanie warstwy klienckiej aplikacji internetowych JavaScript Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Projektowanie warstwy klienckiej aplikacji internetowych JavaScript Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Politechnika Łódzka, ul. Żeromskiego 116, 90-924 Łódź, tel. (042) 631 28 83 www.kapitalludzki.p.lodz.pl