JavaScript Functions, Objects and Array

Size: px

Start display at page:

Download "JavaScript Functions, Objects and Array"

Scot Martin
5 years ago
Views:

1 JavaScript Functions, Objects and Array

2 Defining a Function A definition starts with the word function. A name follows that must start with a letter or underscore, followed by any number of letters, digits, dollar symbols, or underscores. The parentheses are required. One or more parameters, separated by commas, are optional. Function names are case-sensitive

3 Defining a Function naming convention for functions is camelcase The opening curly brace ( { ) starts the statements and a matching curly brace ( } ) must close it. These statements may include one or more return statements.

5 The arguments array The arguments array is a member of every function. You can determine the number of variables passed to a function and what they are.

6 Returning a Value

7 What did you learn for previous slide?

8 Returning an Array

9 JavaScript Objects An objects can contain multiple values and even functions. You need to design a composite of data and code called a class. Each new object based on this class is called an instance (or occurrence) of that class. The data associated with an object is called its properties and the functions it uses are called methods.

10 Declaring a Class declare the class called User and it is constructor at the same time properties method

11 Declaring a Class The different from other functions we ve seen so far : It refers to an object named this. this refers to the instance being created. The same function can be called over and over with different arguments, and will create a new User each time with different values for the properties. A new function named showuser is created within the function. Its purpose is to tie showuser to the User class.

12 Declaring a Class Separately defining a class and method

13 Creating an Object To create an instance of the class User Or you can create an empty object and then populate it later

14 Accessing Objects To refer to its properties To access the showuser method

15 The prototype Keyword prototype keyword can save a lot of memory In the User class, every instance will contain the three properties and the method. Therefore, if you have 1,000 of these objects in memory, the method showuser will also be replicated 1,000 times. However, because the method is identical in every case, you can specify that new objects should refer to a single instance of the method instead of creating a copy of it.

16 The prototype Keyword instead of using the following in a class constructor you could replace it with this

17 The prototype Keyword Declaring a class using the prototype keyword for a method

18 The prototype Keyword you can add a prototype property or method at any time, and all objects (even those already created) will inherit it User เปป น คลาส Details เปป น object

19 Static methods and properties JavaScript also supports static properties and methods from the class s prototype

20 JavaScript Arrays Numeric Arrays : To create a new array หรร อ Assigning element values หรร อ

21 Creating, building, and printing an array

22 Assignment using the array keyword You can create an array with some initial elements by using the Array keyword, like this

23 Associative Arrays An associative array is one in which its elements are referenced by name rather than by numeric offset To create an associative array, define a block of elements within curly braces arrays = { key1 : value, key2 : value, key3 : value, }

24 Creating and displaying an associative array key for loop using the in keyword

25 Multidimensional Arrays To create a multidimensional array in JavaScript, just place arrays inside other arrays

27 Using Array Methods concat foreach (for non-ie browsers) foreach (a cross-browser solution) join push and pop reverse sort

28 concat concatenates two arrays, or a series of values within an array

29 foreach (for non-ie browsers)

30 foreach (a cross-browser solution) To ensure cross-browser compatibility, you should use a statement such as the following

31 join With the join method, you can convert all the values in an array to strings and then join them together into one large string, placing an optional separator between them.

32 push and pop

34 reverse reverses the order of all elements in an array

35 sort Vdo สาธธ ตการททางาน function(a,b)

36 Questions?

37 Form Handling and Form Validation

38 Building Forms To build a form, you must have at least the following elements: An opening <form> and closing </form> tag A submission type specifying either a Get or Post method One or more input fields The destination URL to which the form data is to be submitted

40 Input Types Text boxes Text areas Checkboxes Radio buttons Hidden fields Select Labels Submit button

41 Default Values

42 Input Types

43 Text area

44 Checkboxes If you include the checked attribute, the box is already checked when the browser is displayed. If the user doesn t check the box, no value will be submitted, but if he does, a value is "on". If you prefer to have your own value you could use value attribute.

45 Checkboxes What is the different between and

47 Radio buttons They are used when you want only a single value to be returned from a selection of two or more options. All the buttons in a group must use the same name and only a single value is returned

48 Hidden fields

49 select

50 Labels With Label you can surround a form element, making it selectable by clicking any visible part contained between the opening and closing <label> tags

51 Submit button You can change the text of the submit button to anything you like by using the value attribute You can also replace the standard text button with a graphic image

52 Form in HTML5

53 The autocomplete attribute With autocomplete enabled, previous user inputs are recalled and automatically entered into fields as suggestions You can turn autocomplete on for an entire form but disable it for specific fields like this:

54 The autofocus a ttribute The autofocus attribute gives immediate focus to an element when a page loads. Can applied to any <input>, <textarea>, or <button>

55 The placeholder Attribute This attribute lets you place a helpful hint into any blank input field to explain to users what they should enter

56 The required Attribute used to ensure that a field has been completed before a form is submitted

57 The required Attribute Firefox Chrome

58 More about HTML

59 Validating User Input Client side validating : JavaScript Server side validating : any server side langage such as php, java, vb, c#,...

60 Validating User Input with JavaScript JavaScript validation should be considered an assistance to your users than to your websites. Because you cannot trust any data submitted to your server. May be some users disable JavaScript, or use browsers that don t support it

61 Sample Signup form

62 HTML

63 Script

64 Script

65 Script

66 Script

67 How's it work?

68 How's it work?

69 How's it work?

$The regular expression ^[\w ]+$ will fail if the input is empty as$

70 The regular expression ^[\w ]+$ will fail if the input is empty as it requires at least one character (because we used + instead of *)

71 Working with different types of FORM elements Value of Text / Textarea / Password boxes using the syntax : form.fieldname.value to test numeric values var field1 = parseint(form.field1.value); var field2 = parsefloat(form.field2.value)

Working with different types of FORM elements Value of Select /

fieldname; var selectedvalue = selectbox.options[selectbox.

72 Working with different types of FORM elements Value of Select / Combo / Drop-down boxes var selectbox = form.fieldname; var selectedvalue = selectbox.options[selectbox.selectedindex].value var selectedtext = selectbox.options[selectbox.selectedindex].text where fieldname is the SELECT element, which has an array of options and a value selectedindex that tells you which option has been selected.

73 Working with different types of FORM elements Checkboxes using the syntax : form.checkboxfield.checked return a boolean value (true or false) indicating the checkbox is in a 'checked' state

74 Working with different types of FORM elements Radio

75 Working with different types of FORM elements Checkbox array

77 Regular Expressions The pattern-matching algorithms within a single expression. Every regular expression must be enclosed in slashes Within these slashes, certain characters have special meanings; they are called metacharacters asterisk ( * ), plus sign ( + ), dot (. ), parentheses ( ), square brackets [ ], hyphen ( - ), caret ( ^ )

78 Regular Expressions * match any number of the preceding characters (Zero or more) + requires at least one. match anything except a newline ( ) treat this as a group [ ] inside the brackets you put a list of things that can match - indicate a range inside the brackets ^ match any characters except the following

79 Regular Expressions * match any number of the preceding characters Zero or more space + requires at least one at least a space, not allow LeGuin

80 Regular Expressions. match anything except a newline Match anything that lies between < and > even if there s nothing. will match <>, <em>, <br>, and so on if you don t want to match the empty case, <>

81 Regular Expressions ( ) treat this as a group At least a group of,000 1,000 1,000,000 1,000,000,000 1,000,000,000,000...

82 Regular Expressions [ ] inside the brackets you put a list of things that can match : There must be only one of them Match gray or grey - indicate a range inside the brackets or Match a number between 0-9

83 Regular Expressions ^ match any characters except the following match instances of Yahoo that lack!

84 You turn Explain : Explain :

86 Using Regular Expressions in JavaScript You can use regular expressions mostly in two methods: test and replace. test just tells you whether its argument matches the regular expression : return true or false replace takes a second parameter : the string to replace the text that matches. The replace generates a new string as a return value.

87 return true return dogs are friendly. I like dogs.

88 Summary of Metacharacters

89 Some example regular expressions

90 General Modifiers /g enables global matching. When using a replace function, specify this modifier to replace all matches, rather than only the first one. /i makes the regular expression match case-insensitive. Thus, instead of /[a-za-z]/, you can use /[a-z]/i or /[A-Z]/i /m enables multiline mode, in which the caret ( ^ ) and dollar( $ ) match before and after any newlines in the subject string. Normally, in a multiline string, ^ matches only at the start of the string, and $ matches only at the end of the string.

91 Questions?

JavaScript CS 4640 Programming Languages for Web Applications

JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation