Tema 5 JavaScript JavaScriptand and

Transcription

1 escuela técnica superior de ingeniería informática Versión original: Amador Durán, David Benavides y Pablo Fernandez (noviembre 2006 Manuel Resinas (noviembre 2007); Reestructuración de contenido. Última revisión: Pablo Fernandez (noviembre 2010); Traduccion ejemplos y cambios menores. Tiempo: 4h Tema 5 and and DOM Departamento de Lenguajes Software Engineering Group

2 4.7 Modifying Main features of It is interpreted (script language), not compiled It is an object-oriented language It is not Java, although its syntax is similar 1

3 4.7 Modifying Comments in // One line commet /* Several lines comments */ are the same as in Java There may be comments of one line or several lines. They have the same syntax as in Java or C++. 2

4 4.7 Modifying Basic data types in Strings: " Hello, world!", Numbers: 12, 22.4, -5 Booleans: true, false String constants is 'cool'." You must be careful with quotes' 'Can I use <h1>html</h1> tags?' "Can I use the slash: \\?" 3

5 4.7 Modifying Declaration of variables in is case sensitive, which means variable name is not the same as variable Name. It is not mandatory to declare variables, but it is recommended. var ABDscore; ABDscore = 10; Initialization of variables var ABDscore; ABDscore = 10; // No explicit declaration ABDscore = 10; NOT RECOMMENDED var Pract = 10, Test = 10; var Total = (Pract*0.4) + (Test*0.6); 4

6 4.7 Modifying Functions in function function_name( parameters ) { } var local_variable = initial_value; // function code return (returned value); If there is no return the function returns an undefined variable. There are three predefined functions that are very useful to validate forms: parseint: converts a string to an integer. parsefloat: converts a string to a float. isnan: it is true whether the parameter is not a number. parseint( "456" ) == 456; // true parsefloat( "1.34" ) == 1.34; // true isnan( parseint( one" ) ); // true 5

7 4.7 Modifying Control structures in They have the same syntax as in Java and C++. if (condition) { } // if block else { } // else block while (condition) { } // while block do { //do block } while (condition) switch (expresión) { case etiq1 : // block 1 } break; case etiq2 : // block 2 break;... default : // bloquen for (i=0; i<=n; i++) { } // for block 6

8 4.7 Modifying Conditionals if (condition) { /* Code executed if condition is true*/ } else { /* Code executed if condition is false */ } Condition examples var ABDpassed; var notinitialized; var ABDscore = 10; ABDpassed = true; while (condition) { /* Code executed if condition while true */ } do { /* Code executed if condition is true */ } while (condition) (ABDpassed) es true (notinitialized) es false (ABDscore >= 5) es true (ABDscore == 5) es false 7

9 4.7 Modifying classes Classes define categories of objects. For instance: Car, Person, String, Objects in An object represents one instance of a class. For instance, joe and mike are instances of class Person. var joe = new Person(); var mike = new Person(); Objects are associative arrays, to which new properties or functions (methods) can be dynamically added. Properties can be accessed as follows: object.property object[ property"] Methods can be accessed as follows: object.method( parameters ) 8

10 4.7 Modifying has several predefined classes The most commonly used are: Array, Boolean, Math, Date, Number, Object y String. They can be used to create new instances: var str1, str2; str1 = new String( My String"); str2 = str1.touppercase(); // str2 = MY STRING" Or statically: var str; str = String( Static").toUpperCase(); // str = "STATIC" 9

11 4.7 Modifying Predefined classes: String Properties length: string length. Methods big(): sets the font bigger bold(): sets the font bolder charat(n): returns the character at position n match(c) : returns whether substring c belongs to the string substring(x,y): returns the substring from x to y both included (strings start in 0) tolowercase(): converts to lower case touppercase(): converts to upper case valueof() : returns the value of type string (important when comparing strings) tostring(): converts the object to a string 10

12 4.7 Modifying Predefined classes: Math Methods abs(número): returns the absolute value max(x,y): returns the maximum between x and y min(x,y): returns the minimum between x and y pow(base, exp): pow random(): returns a random number in [0,1] round(número): rounds to the closest integer sin(número): function sin sqrt(número): square root tan(número): tangent... 11

13 4.7 Modifying Predefined classes: Array Properties length: length of the array Methods join(): joins the elements separating them with commas. reverse(): inverts the order of the elements sort(): sort the elements of the array a = new Array (25); // creates an array of 25 elements a = new Array (1,"abd",true); // an array with 3 elements a = new Array ( mystring"); // an array with one string a = new Array (false); // an array with element false Array with 3 rows and 6 columns? a = new Array (3); for (i=0;i<3;i++) a[i]= new Array (6); //array access a[i][j] 12

14 4.7 Modifying Predefined classes: Date Methods getdate(): returns the day of the current month as an integer between 1 and 31 getday(): returns the day of the current week as an integer between 0 and 6 gethours(): returns the hour of the current time as in integer between 0 and 23. getminutes(): returns the minutes of the current time as an integer between 0 and 59. getmonth(): returns the month of the current year as an integer between 0 and 11. getseconds(): returns the seconds of the current minute as an integer between 0 and 59. gettime(): returns the time in miliseconds transcurred from the 1st January

15 4.7 Modifying Predefined classes: Date Methods getyear(): returns the current year as an integer setdate(day, month): sets the day and month togmtstring(): returns a string with the current date var f = new Date (); var f = new Date (year, month); var f = new Date (year, month, day); var f = new Date (year, month, day, hour); var f = new Date (year, month, day, hour, minutes); var f = new Date (year, month, day, hour, minutes, seconds); 14

16 4.7 Modifying Predefined classes: Date function dayoftheweekinspanish() { } var today = new Date(); var day; switch ( day.getday() ) { } case 0: day = "Domingo"; case 1: day = "Lunes"; case 2: day = "Martes"; case 3: day = "Miércoles"; case 4: day = "Jueves"; case 5: day = "Viernes"; case 6: day = "Sábado"; return( day ); break; break; break; break; break; break; break; 15

17 4.7 Modifying is a programming language like any other and it can be used in many different contexts. However, it has a widespread use in the web where it is used to give dynamism to web pages. When used inside a web browser, the web browser provides several predefined objects Some objects are related to the web browser (BOM Browser Object Model) window.alert( que viene ABD!"); Others are related to the structure of the HTML document (DOM) and can be accessed by means of object document: <img id="imgmail" src="mail.jpg"/> document.getelementbyid("imgmail").src = "mail2.jpg"; 16

18 4.7 Modifying in context <html> Internet <head> </head> <body> <h1>página</h1> </body> page.html Server.com </html> page.html 17

19 4.7 Modifying in context Página <html> Internet <head> </head> <body> <h1>página</h1> </body> server.com </html> page.html 18

20 4.7 Modifying in context <html> Internet <head> </head> <body> <h1>página</h1> <script> document.write(" (" Hola Mundo!"); </script> </body> </html> page.html page.html server.com 19

21 4.7 Modifying in context Página <html> Internet <head> </head> <body> <h1>página</h1> <script> document.write(" Hola Mundo!"); </script> </body> </html> page.html server.com 20

22 4.7 Modifying in context Página Hola Mundo! <html> Internet <head> </head> <body> <h1>página</h1> <script> page.html server.com document.write(" Hola Mundo!"); </script> </body> </html> 21

23 4.7 Modifying Where do we use? In the HTML document Inside element head Inside element body As an event handler onevento= code" * As the URL of a link href="javascript:code" ** In a separated file code inside element script should be placed inside HTML comments to avoid problems with old web browsers. In XHTML it must be encolsed a section CDATA. In which order is code executed? code is always executed in the same order as in the HTML code. Usually, element head contains only declarations of variables and functions. *Events and their handling are studied in the next lesson. **NOT RECOMMENDED. 22

24 4.7 Modifying Script inside the HTML document (body) <html> <head> <title>document title</ </title> <!-- other header information --> </head> <body> <!-- document content --> <!- more document content --> </body body> </html html> <script type=" ="text/javascript"> <!-- // code //-- --> </script> 23

25 4.7 Modifying Script inside the HTML document(head head) <html> <head> <title>document title</ </title> <script type=" ="text/javascript"> <![CDATA[ ]]> // code <!-- other header information --> </head> <body> <!-- document content --> </body body> </html html> </script> 24

26 4.7 Modifying Script in a different file <html> <head> <title>document title</ </title> <script type=" ="text/javascript" src="mycode.js" ="mycode.js"> </script> <!-- header information --> </head> <body> <!-- document content --> </body body> </html html> // // code mycode.js 25

27 4.7 Modifying Browser Object Model (BOM) window: the window of the navigator. screen: the screen. navigator: the web browser itself. history: the history of navigation. location: the URL of the current page. location window navigator 26

28 4.7 Modifying Predefined objects: window Represents the window of the navigator Properties status: status bar message document: current HTML document history: navigation history closed: true if the window is closed length: number of frames that are contained in the window frames: an array that contains all frames that are contained in the window, i.e., returns an array of objects of type Frame 27

29 4.7 Modifying Predefined objects: window Methods alert(msg): shows a window with a message confirm(msg): shows a window with an accept and a cancel button; it returns true if the user presses accept and false if he/she presses cancel prompt(msg,default): shows a window that prompts a string with a default value open(url,nombre,opt): opens a new window in the web browser close(): closes the window 28

30 4.7 Modifying Predefined object: navigator Represents the navigator intself. Properties appname: name of the navigator: Microsoft Internet Explorer, Mozilla, NetScape, appversion: Netscape 5.0 (Windows; es-es) Microsoft Internet Explorer 4.0 (compatible; MSIE 6.0; Windows NT 5.0) mimetypes: an array with the MIME types (Multipurpose Internet Mail Extensions) supported by the navigator (Application, Audio, Image, Message, Multipart, Text, Video) plugins: an array with the plugins that are installed in the navigator javaenabled(): returns whether the navigator supports Java applets 29

31 4.7 Modifying Predefined objects: frame Represents a frame. Propiedades parent: the parent frame Predefined objects: location Represents the URL of the document displayed in window Properties host: Contains the server name and the port number of the URL hostname: server name pathname: path without including the server name and the port number port: port number protocol: protocol (http, ftp,..) href: URL that can be dynamically changed 30

32 4.7 Modifying What is DOM? Designed to dynamically access and update the content and structure of XML and HTML documents W3C standard ( ) Also known as W3CDOM Three levels: level 1, level 2, level 3 Each navigator implements a version of DOM Starting from IE 6 (Trident Trident) and browsers based on Gecko (Mozilla, Firefox) support W3CDOM Trident Gecko KHTML Presto icab L Yes 7.0 Yes L2 Minor Major Major Major Major L3 No Minor Minor Minor Minor 31

33 4.7 Modifying The DOM tree document Menu Primeros Pasta Ensalada Segundos Lomo Flamenquin head body (html) title h1 Primeros ul Menu Cafeta Menu li li Pasta Ensalada document head body h1 ul title li li <html> <head> <title>menu Cafeta</title> </head> <body> <h1>menu </h1> Primeros <ul> <li>pasta</li> <li>ensalada</li> </ul> Segundos <ul> <li>lomo</li> <li>flamenquin</li> </ul> </body> </html> 32

34 4.7 Modifying DOM nodes document head body (html) title h1 Primeros ul Menu Cafeta Menu li li Pasta Ensalada Elementos body h1 Texto Menu Primeros 33

35 4.7 Modifying Node types <div id= MyDiv >DOM is easy</div> Elements attribute element Represent an HTML tag Attributes Provide access to the attributes of a tag. Text Represent strings. text div id MyDiv DOM is easy 34

36 4.7 Modifying Elements Properties tagname (READ ONLY) Methods Contains the name of the element s tag getattribute(n) IMG Returns the attribute with name n setattribute(n,v) Sets the value of attribute n to v <img src= homer.jpg /> <script type=" ="text/javascript"> <! // // image contains the object of the element alert(image.tagname); image.setattribute( ( src, bart.jpg src, bart.jpg ); ); //-- --> </script> 35

37 4.7 Modifying Traversing Array childnodes gives access to the child nodes of an element. Object document.body provides direct access to the document body document body h1 ul Menu li li Pasta element subelem1 subelem2 subelem3 <script type="text/javascript"> <!-- element.childnodes[0]; element.childnodes[1]; element.childnodes[2]; var e1 = document.body.childnodes[0]; var root = document.body; var e2 = root.childnodes[1].childnodes[0]; var lista = root.childnodes[1]; lista.childnodes[1].childnodes[0]; //-- --> </script> Ensalada 36

38 4.7 Modifying Finding elements in There are two ways: By means of the tag name getelementsbytagname(tagname) <script type=" ="text/javascript"> <!-- var images = document.getelementsbytagname( ( img ); var firstimage = images[0]; //-- --> </script> By means of the id of the element getelementbyid(id) <script type=" ="text/javascript"> <!-- var div = document.getelementbyid( ( divprincipal ); //-- --> </script> 37

39 4.7 Modifying Finding elements in (examples) <html> <head> <title>menu Cafeta</title> </head> <body> <h1>menu </h1> <div id= primeros > Primeros <ul> <li>pasta</li> <li>ensalada</li> </ul> </div> <!-- --> </body> </html> <script type="text/javascript"> <!-- var items = document.getelementsbytagname( li ); var miitem = items[1]; var midiv = document.getelementbyid( primeros ); var lista = midiv.getelementsbytagname( ul )[0]; var items2 = lista.getelementsbytagname( li ); //-- --> </script> 38

40 4.7 Modifying Modifying the DOM tree All nodes have an interface to modify the structure of (i.e. add nodes, remove nodes ) To create new elements, you must use the parent node (document). <script type=" ="text/javascript"> <!-- var newtextnode; newtextnode = document.createtextnode( ( Hello world"); document.body.appendchild(newtextnode newtextnode); //-- --> </script> insertbefore replacechild removechild appendchild createelement createtextnode 39

41 4.7 Modifying <html> <head> Event handling (L2) <title>document title</ </title> </head> <body> <!-- document content --> <tag onevent= code"> <! more document content --> </body body> </html html> </tag tag> It is usually a call to a function that has been previously declared in either section head or an external file. 40

42 4.7 Modifying HTML DOM It is an extension to the basic DOM to make the management of HTML documents easier Document Plugin[] Applet[] Anchor[] Area[] Image[] Link[] Layer[] FileUpload Password Radio Checkbox Hidden Submit Form[] Textarea Text Reset Button Select Options[] 41

43 4.7 Modifying Predefined objects: document Represents the document that is being displayed. Properties bgcolor: integer value with the code of the background color or string with the color ("#12345", "red") fgcolor: identifies the text color forms: an array that contains all elements form of one document images: array that contains all images in the document lastmodified: string with the las modification date links: array that contains all links in the document referrer: URL of the link from which the user reached the document. title: document title 42

44 4.7 Modifying Predefined objects: document Methods close(): closes the document write(srt), writeln(str): modifies the document (notice that writeln does not insert a new line when the document is displayed in the navigator) getelementbyid(id): returns the element with the specified ID <img id="imgmail" src="mail.jpg"/> document.getelementbyid("imgmail").src = "mail2.jpg"; 43

45 4.7 Modifying Predefined objects: link Represents the links. Properties target: string with the target name href: string with the URL of the link 44

46 4.7 Modifying Predefined objects: image Represents the images. Properties border: integer with the value of the border of the image complete: boolean that indicates whether the image has been fully loaded from the server src: it refers to the content of the image itself 45

47 4.7 Modifying Predefined objects: form Represents the forms Properties Those related to the attributes: action, method, etc. elements: array that contains all the elements in the form (buttons, text areas,...) length: number of elements of a form Methods submit(): submits the form (it is the same as clicking the submit button of the form) reset(): resets the content of the form 46

48 4.7 Modifying Predefined objects: text / textarea Represents the text s Properties All properties related to this kind of s such as defaultvalue, value: contains the string entered in the text are or text box; therefore, the content of a text area or text box can be modified within Methods focus(): captures the focus on the text area select(): selects the text in the text area 47

49 4.7 Modifying Predefined objects: checkbox Represents a check box Properties name: object name checked: indicates whether the object has been checked defaultchecked: indicates whether the object should be checked by default value: indicates the value associated to the check box (atributte value of HTML) Methods click(): the same as if the user clicks the 48

50 4.7 Modifying Predefined objects: radio This object is an array of all the elemnts that compose the radio button. Properties length : indicates the number of the elements that compose the radio button. Item : the array that contains the elements that compose the radio button. Each element in the array has the following properties: name: object name. checked: indicates whether the object has been selected. defaultchecked: indicates whether the object should be checked by default. value: indicates the value associated to the radio button (atributte value). 49

51 4.7 Modifying Predefined objects: select Represents element select. Properties length: number of elements that it contains options: array with the selection options, each one with the following properties: defaultchecked: indicates whether the object should be selected by default index: the position of the object in the array selected: indicates whether the object is selected selectedindex: integer that indicates the index of the position that has been selected. text: string that shows the text shown in the option selectedindex: integer that indicates the index of the position that has been selected 50

52 4.7 Modifying Web references References in the HTML standard: Information about : ECMAScript standard (Javascript 1.5) htm Tutorials: