Web Applications

Controls FORM, BUTTON and TEXT. So far we have seen how to create a form with controls of type Button. We add a control type TEXT (allows the operator to load keyboard characters). Now we will see the importance of defining a NAME to a form of control. In this issue we have four controls: 1 FORM, 1 BUTTON, 2 TEXT. The event is triggered by pressing the button is called show. The function ‘show’ access to the contents of the two controls of type TEXT: var nom = document.form1.nombre.value var ed = document.form1.edad.value; To make clearer the role stored in two auxiliary variables checks the contents of TEXT type. Keep in mind that our web page accessed through the object: document, then the form we have created, accessed by the NAME we gave the form, in this case: form1, then each control that contains the form, we agree nuevamento by NAME, ie: name and age respectively. Finally, to access the loaded chains must indicate the value property. Control SELECT This other visual object that we have a FORM allows the selection of a string from a list and have a value associated with it not visible. The main objective in JavaScript is to determine which item is selected and what value is associated. This we do when the event occurs OnChange.Para determine the position of selected index from the list: Whereas document.form1.select1.selectedIndex SELECT object called SELECT1 we access the selectedIndex property (stores the position of the string selected from the list , numbered from zero). To determine the selected string: document.form1.select1.options [document.form1.select1.selectedIndex]. text is saying that the object has another property SELECT1 call options, we access through a subscript, the string of a given position. There are problems in which only need the string stored in the object SELECT and not the associated value (not required to associate a value to each string). And finally with this expression to access the value associated with the string: document.form1.select1.options [document.form1.select1.selectedIndex]. Value index number of the object selected SELECT: <input type = “text” name = “text1 “> <br> Selected text: <input name=”text2″> <br> Associated value: <input name=”text3″> <br> </ form> </ body > </ html> should be analyzed in depth to understand this problem creating the object first SELECT in HTML and how to then access their values from JavaScript. It is important to define the SELECT object which function to call when a change occurs: onChange = “cambiarColor ()”. For each option in the SELECT object we have a line: red where red is the string that is displayed in the SELECT object and value is the string.Analizando value associated with the cambiarColor function () you can see how we get the fundamental values of the SELECT object. Controlling CHECKBOX CHECKBOX control is the little square you can have two states (checked or not checked). To know how it works and see how we can access their state from JavaScript will make a small page Control RADIO RADIO objects makes sense when we have several elements. Only one can be selected from the set. Importantly, all objects of type RADIO have the same name. Then we can access each element using a subscript if (document.form1.estudios [0]. Checked) alert ( ‘no education’); Like the checkbox, the checked property returns true or false, depending on whether or unselected radio control.TEXTAREA Control This control is similar to the TEXT control, except that it allows the admission of many lines of text. The brand TEXTAREA in HTML has two properties rows and cols that allow us to indicate the number of rows and columns to be displayed on screen. To find the length of the string loaded: if (document.form1.curriculum.value.length> 2000) we access the length property. Object-oriented programming. An object is a structure containing both variables (called properties) and the functions that manipulate those variables (called methods). From this structure has created a new programming model (object-oriented programming) that attaches to the same properties as inheritance or polymorphism. As we shall see, JavaScript simplifies something this programming model and makes a hybrid of structured programming and object-oriented programming. The model of object-oriented programming ordinary separates them into two classes and instances (objects). The former are more abstract entities that define a particular set of objects. The latter are members of a class, possessing the same properties as the class to which they belong. Properties and methods. To access the methods and properties of an object we use the following syntax: object.property Object.Method (parameters) Basics. Objects are all things with identity. They interrelate. They have characteristics (attributes) and have responsibilities (functions, methods) to be met. Are copies (instances) of a class and know the class to which pertenecen.Atributos or property: These are the characteristics, distinctive qualities of each object. Should be minimal in order to perform all operations required by the application. Examples of real-world objects: – House: attributes: size, price, number of bedrooms, etc..; Esponsibilities: comfort, safety, etc. .- Table: attributes: height, length, width, etc.. responsibilities: to contain elements .- Window: attributes: size, color, etc.. Responsibilities: open, closed, etc.. Examples of objects in the world of programming: – Window: attributes: size, color, etc..; Responsibilities: show title, responsibilities or shrink Methods. They must fulfill the responsibilities that class. The purpose of a method is performing the activities entrusted with the class. An algorithm (a set of operations) that runs in response to a message, replies to messages to fulfill requests. One method is the name of the operation and its arguments. The method name that identifies an operation is executed. A method is determined by the receiver object’s class, all objects of a class using the same method in response to similar messages. The interpretation of a message (implemented method selection) depends on the receiver and may vary with different receptors, ie, may vary from one class to another. Classes: A class is a grouping of objects that share the same properties and behaviors. It is a template for objects that possess the same characteristics (which can receive the same messages and respond in the same way). A class is a representation of an idea or concept. Unit that encapsulates code and data for the methods (operations). All copies of a class behave similarly (invoking the same method) in response to similar messages. The class to which an object belongs to determines the behavior of the object. A class has mandated activities implemented methods. The classes are defined by: – Attributes (Properties), – Behavior (operations or methods) and “relations with other objects. An application is a set of objects of certain classes.