1 / 75

INT222 – Internet Fundamentals

INT222 – Internet Fundamentals. Week 5: More on JS & HTML. Outline. JavaScript Build-in Object String Object Array Object HTML Form CGI. JavaScript Build-in Object. String Object Array Object Date Object Math Object Number Object Regular Expression Object. String Object.

luyu
Download Presentation

INT222 – Internet Fundamentals

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INT222 – Internet Fundamentals Week 5: More on JS & HTML

  2. Outline • JavaScript Build-in Object • String Object • Array Object • HTML Form • CGI

  3. JavaScript Build-in Object • String Object • Array Object • Date Object • Math Object • Number Object • Regular Expression Object

  4. String Object • Strings enclosed within double or single quotes are used for holding data that can be represented in text format. • Some of the most-used operations on strings are to • check their length, and to • concatenatestrings using the + and += string operators.

  5. Character access There are two ways to access an individual character in a string: • Using charAt() method var example1 = "INT222"; alert(example1.charAt(2)); // return T • Using array index var example2 = "INT222"; alert(example2[2]); // returns T

  6. String object - properties and methods

  7. JS String object - property • Length • The length property returns the number of characters in a string. • Syntax: stringName.length myString.length returns 6 View source

  8. JS String object - methods • charAt(index) • The method returns the character at the specific index. • Characters in a string are indexed from left to right • Index start from 0 to one less than the length. • The index of the last character in a string called myString is myString.length- 1 • If the index you supply is out of range, JavaScript returns an empty string • Syntax: stringName.charAt(index) myString.charAt(3) returns  1myString.charAt(4) returns  2myString.charAt(5) returns  3myString.charAt(6) returns myString.charAt(0) returns  I myString.charAt(1) returns  NmyString.charAt(2) returns  T View source

  9. JS String object - methods • charCodeAt(index) • The method returns the unicode of a character. • Index can be a value from 0 to one less than the length. • Syntax: stringName.charCodeAt(index) myString.charCodeAt(0) -  A  returns  65myString.charCodeAt(1) -  Z  returns  90myString.charCodeAt(2) -  a  returns  97myString.charCodeAt(3) -  z  returns  122myString.charCodeAt(4) -  1  returns  49 myString.charCodeAt(5) -  9  returns  57myString.charCodeAt(6) -    returns  NaN View source

  10. About Unicode • Unicode provides a unique number for every character, no matter what the platform is. • See unicodestable.

  11. JS String object - methods • concat(string2,string3,...) • The concat(....) method combines the text of two or more strings. • It is always recommended that you use the assignment operators (+, +=) instead of the concat method. • Syntax: stringName.concat(string2, string3) m varmyString0= "My courses are : "; var myString1= "INT222"; var myString2= "OOP222"; myString0= myString0.concat(myString1, " & " , myString2); // returns  My courses are : INT222 & OOP244  View source

  12. JS String object - methods • indexOf(subStr) • returns the position at which the characteror string begins. indexOf returns only the first occurrence of your character or string. • If indexOf returns zero, the character or the string you are looking for begins at the 1st character. • If indexOf returns -1, the character or string you searched for is not contained within the string. myString.indexOf('I') - returns  0 myString.indexOf('N') - returns  1 myString.indexOf('2') - returns  3 myString.indexOf('T2') - returns  2 myString.indexOf('3') - returns  -1  View source

  13. indexOf(“subStr",[optional]) method • indexOf("subStr", from) • from : starting the search from position from. myString.indexOf('I') - returns  0 myString.indexOf('2') - returns  3 myString.indexOf('2',5) - returns  5myString.indexOf('3') - returns  -1  View source

  14. JS String object - methods • lastIndexOf(subStr) • returns the position at which the last occurrence of your character or string– searching backwards. • If lastIndexOf returns -1, the character or string you searched for is not contained within the string. myString.lastIndexOf('I') - returns  0 myString.lastIndexOf('N') - returns  1 myString.lastIndexOf('2') - returns  5 myString.lastIndexOf('22') - returns  4 myString.lastIndexOf('3') - returns  -1 View source

  15. lastIndexOf("x",[optional]) method • lastIndexOf(“subStr", from) • from : starting the search from position from– searching backwards myString.lastIndexOf('I') - returns  0 myString.lastIndexOf('2') - returns  5 myString.lastIndexOf('2',4) - returns  4 myString.lastIndexOf('3') - returns  -1 View source

  16. JS String object - methods • split(x) • The split(' ') uses the specified character(s) to break the argument string into an array. • Syntax: stringName.split(x) A split on a blank will return the following: myArray - element 0 returns INTmyArray - element 1 returns 222 View source

  17. split(x) A split on 2 will return the following:myArray - element 0 returns INT (actually: "INT ")myArray - element 1 returns (actually: "" – empty string)myArray - element 2 returns (actually: "" – empty string)myArray - element 3 returns (actually: "" – empty string) View source myArray = myString.split('22'); - a split on 22 will return the following:myArray - element 0 returns INT myArray - element 1 returns View source

  18. split(x) A split on 222 will return the following:myArray - element 0 = INT myArray - element 1 = View source

  19. JS String object - methods • substr(x, y) • The substr(x,y) returns a sub string where: x is the from y is the length • Syntax: stringName.substr(x,y) myString.substr(1,4) - returns  NT22 myString.substr(4,4) - returns  22 myString.substr((myString.length-4),1) - returns  T myString.substr(4) - returns  22 View source

  20. JS String object - methods • substring(x, y) • The substring(x,y) returns a sub string where: • x starting from (index) - inclusive - if x > than y, then switch • y to (index) - not inclusive - if y < than x, then switch myString.substring(1,4) - returns  NT2 myString.substring(4,4) - returns   myString.substring(4,2) - returns  T2 myString.substring(-4,4) - returns  INT2 myString.substring(0,6) - returns  INT222 myString.substring((myString.length-1),1) - returns  NT22 myString.substring(4) - returns  22 View source

  21. JS String object - methods • toLowerCase() • Converts a string to lower case • Syntax: stringName.toLowerCase() myString.length returns 6 myString.toLowerCase() returns int222 View source

  22. JS String object - methods • toUpperCase() • Converts a string to upper case • Syntax: stringName. toUpperCase() myString.length returns 6 myString.toUpperCase() returns INT222 View source

  23. JS String object - methods • trim() • The trim() method removes whitespace (blank characters) from the left and right of the string. • trimLeft() & trimRight() methods work with some browsers but not others - Don't use them. • Syntax: stringName.trim() The length of myString is 14 myString = myString.trim(); returns INT222 View source

  24. Array Object • A group of the same variable type that use an index (a number) to distinguish them from each other. • Items in an array are given the same name and are referenced by the name and the index (the occurrence). • Index starts from 0.

  25. Array object - properties and methods

  26. JS Array object - property • length • The length property returns the number of elements / occurrences in the array var arrayName1 = new Array (11, 15, 13, "blue", 24, 35, 05); The arrayName1.length returns 7  var arrayName2 = new Array(); // var arrayName2 = new Array(4); arrayName2[0] = "brown"; arrayName2[1] = "blue"; arrayName2[2] = 15; arrayName2[3] = "red"; The arrayName1.length returns 7 View source var arrayName1 = [“Red", “Green", “Blue", 3]; * How to create an array in JavaScript?

  27. JS Array object - methods • join() • The join() method is used to join all the elements of an array into a single string separated by a specified string separator • if non separatoris specified, the default is a comma. • Syntax: arrayName.join() var arrayName1 = new Array ("Red", "Black", "Yellow", "Blue"); The arrayName1.length returns 4  arrayName1.join() will yield Red,Black,Yellow,Blue arrayName1.join('+') will yield Red+Black+Yellow+Blue arrayName1.join(' ') will yield Red Black Yellow Blue arrayName1.join('-') will yield Red-Black-Yellow-Blue View source

  28. JS Array object - methods • reverse() • The elements in the array are reversed. First becomes last, second becomes second last, etc.. • Syntax: arrayName.reverse() var arrayName1 = new Array ("Red", "Black", "Yellow", "Blue"); The arrayName1.length returns 4  The array before : Red,Black,Yellow,Blue arrayName1.reverse(); The array after: Blue,Yellow,Black,Red View source

  29. JS Array object - methods • sort() • The elements in the array are sorted based on their ASCII code. • Syntax: arrayName.sort() var arrayName1 = new Array ("Red", "Black", 15, "Yellow", 101, "Blue"); The arrayName1.length returns 6  The array before : Red,Black,15,Yellow,101,Blue   arrayName1.sort(); The array after: 101,15,Black,Blue,Red,Yellow   View source

  30. JavaScript - array for and for in loop varmyColors = new Array("Pink", "Red", "Orange", "Blue"); function showArray1() { varmessage = "function showArray1()\n\n"; for (var x=0; x < myColors.length; x++) { // recommended message+= myColors[x] + "\n"; } alert(message); } // End of function function showArray2() { varmessage = "function showArray2()\n\n"; for (var x in myColors) { message+= myColors[x] + "\n"; } alert(message); } // End of function View source

  31. HTML forms • The form tag specifies a fill-out form within an HTML document. • The client fill-out some information and then the information is submitted to the query server to be processed. • The processing of the information is completed by the query server using the program 'something.cgi' mentioned in the URL of the action attribute. • The 'cgi program' (Common Gateway Interface) functionality will vary depending on the requirement. • e.g. https://myprofile.oracle.com/EndUser/faces/profile/createUser.jspx

  32. HTML forms • Inside the form tag, you can have any HTML tag except another form tag. • In other words, a document may have more than one form, but forms cannot be nested. • form tag has two required attributes (method and action), and must also have values assigned to them. • e.g. • <form method="post" action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/echo-p.pl"id="formname"> • …. • </form>

  33. The form tag attributes • method • The method is the short way of saying HTTP request method. • method="get" • the default method and it causes the fill-out form contents to be appended to the URL as if they were a normal query (maximum of 256 - 2048 characters). • method="post" • the method that causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL.

  34. The form tag attributes • Action • action="url" • the URL of the query server to which the form contents will be submitted. • Examples (form post testers): • https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/echo-p.pl • http://www.htmlcodetutorial.com/cgi-bin/mycgi.pl • action="#" • default to the current document URL. • for in-browser Processing

  35. The form tag attributes • id or name • id="whatever" or name="whatever" are used with JavaScript • the id or name attributes allow JavaScript to make reference to any element within the form. • The name attribute is deprecated for form tag. • enctype • specifies the encoding for the fill-out form contents. • The default value is "application/x-www-form-urlencoded".

  36. Tags within a form tag • A form is a component of a web page that contains other Tags/form controls: • The <input> tag/element is the one of the most-used form-specific element. • The tags used for creating forms: • select, textarea, etc.. • Other tags that can be used with forms: • fieldset, legend, lable, …

  37. The input tag/element • The input tag is used to specify a simple input element inside a form that can receive user input. • The type attribute determines the specific sort of form element to be created. • The name, value attributes determine what are going to be send to server. • Other attributes: checked, size, readonly, …

  38. Type attributes of the input tag • type="text“ • A text element is a single line text input field in which the user can enter text (this is the default). Text field 1 <input type="text" name="entry1" id="entry1" /> text box default size = 20<br/> Text field 2 <input size="30" name="entry2" id="entry2" <br /> Text field 3 <input size="5" maxlength="5" name="entry3" id="entry3" /> <br /> Text field 4 <input size="12" value="416-" name="entry4" id="entry4" /> Demo View source (uses post method) View source (uses get method)

  39. Type attributes of the input tag • type="password“ • A password element is a text input field in which each character typed is displayed as a character such as * or a black dot to conceal the actual value. Type in your username <input name="username" /> <br /> Type in your password <input type="password" name="password" /> Demo View source

  40. Type attributes of the input tag • type="checkbox“ • A checkbox element is a toggle that the user can select (switch on) or deselect (switch off.) <p>Which operating system do you use? </p> <input type="checkbox" name="system_type" id="system_type-2" value="2" />Windows 7<br /> <input type="checkbox" name="system_type" id="system_type-3" value="3" checked/>Windows 8<br/ <input type="checkbox" name="system_type" id="system_type-4" value="4" checked/>Unix<br /> Demo View source

  41. Type attributes of the input tag • type="radio“ • A radio element is a radio button. • Only one radio button in the set can be selected at one time. When the user selects a button in the set, all other buttons in the set are deselected. <ul> <li><input type="radio" name="paymethod" id="paymethod-1" value="cash" checked/>Cash</li> <li><input type="radio" name="paymethod" id="paymethod-2" value="cheque" />Cheque</li> <li><mark>Credit card</mark> <ul> <li><input type="radio" name="paymethod" id="paymethod-3" value="mastercard" /> Mastercard</li> <li><input type="radio" name="paymethod" id="paymethod-4" value="visa" />Visa</li> </ul></li> </ul> Demo View source

  42. Type attributes of the input tag • type="hidden“ • A hidden input element is an invisible element whose main purpose is to contain data that the user does not enter. This data gets sent to the invoked CGI program when the form is submitted. • This type="hidden" attribute value provides a way for delivering a value to the CGI program <input type="hidden" name="entry0" id="entry0" value="value from the form" /> DemoView source

  43. Type attributes of the input tag • type="file“ • A file element allows the user to supply a file as input. When the form is submitted, the content of the specified file is sent to the server as the value portion of the name/value pair for this input element. • A 'Browse' button is displayed next to the file input element that lets users select a file from their system to use as the value of the file input element. • If a form contains a file input element, the value of the enctype attribute of the form tag should be 'multipart/form-data'. <p> Student Name <input type="text" name="StudentName" id="StudentName" /> <br /> Upload your assignment <input type="file" name="assignment" /> </p> DemoView source

  44. Type attributes of the input tag • type="submit“ • When a user clicks a submit button, the form is submitted, which means that the action specified for the form is invoked. • Default value: “Submit Query”. <p> <input type="submit" /> <input type="reset" value=" Clear " /> </p> DemoView source (uses post method) DemoView source (uses het method)

  45. Type attributes of the input tag • type="reset" • When a user clicks a reset button, all elements in the form are reset to their original default values. <p> <input type="submit" value="Submit Information" /> <input type="reset" /> </p> DemoView source

  46. Type attributes of the input tag • type="image" • Places an image, serving as a custom button in place of the submit button. When a user clicks the image, the form is submitted to the server. Search <input type="text" name="entry1" id="entry1" /> <input type="image" src="gogetit.gif" alt="get it" /> imageView source

  47. Additional attributes of the input tag • The following are additional attributes that work with the input tag. • Name/id, value, checked, size, maxlength, disabled, readonly, tabindex. • The name & value pair in each input tag is what is going to be send to server. • Some or all of these attributes may be used depending on the value used in type attribute.

  48. A form example <form method="post" name="example“ action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/echo-p.pl"> <p> Text field 1 <input type="text" name="entry1" id="entry1" /> <mark> name / id</mark> <br /> Text field 2 <input size="30" name="entry2" id="entry2" /> <mark>size</mark> <br /> Text field 3 <input size="5" maxlength="5" name="entry3" id="entry3" /> <mark>maxlength</mark> <br /> Text field 4 <input size="12" value="416-" name="entry4" id="entry4" /> <mark>value</mark> <br /> Disabled field 5 <input size=“50" disabled="disabled" value="This one is disabled - Will not be sent to the CGI" name="entry5" id="entry5" /> <mark>disabled="disabled"</mark> <br /> Read only field 6 <input size=“50" readonly="readonly" value="This one is a readonly - Will be sent to the CGI" name="entry6" id="entry6" /> <mark>readonly="readonly"</mark> </p> <p> <input type="submit" value="Submit Information" /> <input type="reset" value=" Clear " </p> </form> View source

  49. A form example

  50. Additional attributes of the input tag • name/id • is the symbolic name (not displayed) for an input field. The name/id attribute and a value should be present for all input tags. • Value • for a text or password entry field, can be used to specify the default contents of the field. • default value vs current value • for a checkbox or a radio button, value specifies the value of the button when it is checked (unchecked checkboxes are ignored when submitting the form. • For types submit and reset, value is used to specify the label for the push button.

More Related