Presentation is loading. Please wait.

Presentation is loading. Please wait.

Presentation 8: JavaScript continued Arrays and objects Internet Technology 1.

Similar presentations


Presentation on theme: "Presentation 8: JavaScript continued Arrays and objects Internet Technology 1."— Presentation transcript:

1 Presentation 8: JavaScript continued Arrays and objects Internet Technology 1

2 Ingeniørhøjskolen i Århus Slide 2 of 38 This presentation Overview of JavaScripts support of –Arrays –Build in objects (Array, String and Date) –”Self declared” objects Examples using Arrays and objects Comments to students: –You should know objects and arrays form earlier courses.

3 Ingeniørhøjskolen i Århus Slide 3 of 38 Array of data c[ 6 ] Array name c[ 0 ] c[ 1 ] c[ 2 ] c[ 3 ] c[ 11 ] c[ 10 ] c[ 9 ] c[ 8 ] c[ 7 ] c[ 5 ] c[ 4 ] Position number (index or subscript) of a element in the array Fig. 11.1A 12-element array. AN ARRAY ARE ALWAYS AN OBJECT IN A JAVASCRIPT! - It got methods!!

4 Ingeniørhøjskolen i Århus Slide 4 of 38 Array object and its methods Array constructor –var arr1 = new Array(25); –var arr2 = new Array(’first’, ’2.’, ’3’, ’n…); –var value = arr2[1]; (index starts at 0) –value of value becomes ’2.’ –Expansion Dynamic– arr2[arr2.length] = ’New element’; –Dynamic expansion needs more operations! Methods/properties on array –arr2.length: gives the length on array (here = 4) –arr2.sort() – sorting method on Array object –(prototype, concat, join, pop, push, reverse, shift, slice, unshift)

5 Ingeniørhøjskolen i Århus Slide 5 of 38 Arrays as parameter Arrays get sent by ”Call by reference” –Var arr1 = new Array(’Stefan’, ’Poul Ejnar’); –UndoNameToAllEducators(arr1); Array elements values sent by ”Call by Value” –Like all ”simple values” i JavaScript –We must sent the Array reference, if we want to change a element globally ex. arr[1]

6 Ingeniørhøjskolen i Århus Slide 6 of 38 Sorting of Arrays Via method Array.sort –An array are sorted as needed –Default uses is string recognations ie. 10 comes before 2 –Optional compare functions may be set Output from this are -1, 0 or 1, dependent on the element value must be moved ahead astern or kept un touched. Se next page example:

7 Ingeniørhøjskolen i Århus Slide 7 of 38 Sort.html 1 2 Sorting an Array with Array Method sort

9 Ingeniørhøjskolen i Århus Slide 9 of 38 Searching Known from ALDI (or like) – different models DEITEL lists: –Linear searching –Binary searching (bi sectioning) –Other algorithms exist –Not really a part of this course NET1 –Though some examples are shown

10 Ingeniørhøjskolen i Århus Slide 10 of 38 LinearSearch.html 1 2 Linear Search of an Array Enter integer search key Result Function linearSearch compares each each element with a search key. Variable theArray gets the value of Array a and variable key gets the value of variable searchKey.

12 Ingeniørhøjskolen i Århus Slide 12 of 38 Prandram Output

13 Ingeniørhøjskolen i Århus Slide 13 of 38 BinarySearch.html Study on your own 1 2 Binary Search Enter integer search key 96 Result Function buildOutput creates the markup that displays the results of the search.

16 Ingeniørhøjskolen i Århus Slide 16 of 38 Prandram Output

17 Ingeniørhøjskolen i Århus Slide 17 of 38 Objects JavaScript are object based –NOT object oriented! –It actually is build with another technology-base than Java and C++ (and C#) –No polymorphism –No classes Two types of objects –Build-in (Implicit) – to ease our work – a kind of API –Self declared (not a main topic here)

18 Ingeniørhøjskolen i Århus Slide 18 of 38 Implicit Build-in Objects Browsers implicit objects –Array –String –Date –Function –Global (incl parseInt) –Math –Number –RegExp

19 Ingeniørhøjskolen i Århus Slide 19 of 38 Properties of objects Objects in Javascript may have both –Properties –Methods Differences in browsers –Notice: even though that JavaScript has a strong standard compared to DOM, HTML and CSS, then it is a open standard with a free extent of use and interpretations –Cross browser functionality is an important issue –Shifting leaders

20 Ingeniørhøjskolen i Århus Slide 20 of 38 The String object Strings are fundamental to HTTP and HTML and from this also to JavaScript (every element is a text string) Manipulation and parsing of strings are a important part of JavaScript String object gives many functions to this work Declared both implicit and eksplicit –var streng1 = ”this is a string object”; –var streng 2 = new String(”I am to..”);

21 Ingeniørhøjskolen i Århus Slide 21 of 38 String objects methods Methods divided in two main types –methods to HTML formatting - support for document.write() operations and Dynamic content –methods to parsing and manipultion of strings Properties –length, prototype methods –anchor, big, blink, bold, charAt, charCodeAt, concat, fixed, fontcolor, fontsize, fromcharcode, indexOf, italics, lastIndexOf, link, match, replace, search, slice, small, split, strike, sub, substr, substring, sup, toLowerCase, toUpperCase

22 Ingeniørhøjskolen i Århus Slide 22 of 38 Examples using a String object String manipulation Searching HTML formatting Many fold of usages …

23 Ingeniørhøjskolen i Århus Slide 23 of 38 CharacterProcess ing.html 1 2 Character Processing Methods Method charAt returns a string containing the character at the specified index ( 0 in this example). Method charCodeAt returns the Unicode value of the character at the specified index ( 0 in this example). Method fromCharCode takes a comma-separated list of Unicode values and builds a string containing the character representation of those Unicode values. Methods toLowerCase and toUpperCase display versions of String s2 in all lowercase and all upper case letters, respectively.

24 Ingeniørhøjskolen i Århus Slide 24 of 38 Prandram Output

25 Ingeniørhøjskolen i Århus Slide 25 of 38 SearchingStrings. html 1 2 Searching Strings with indexOf and lastIndexOf Method indexOf determines the first occurrence in the string letters of the string searchForm.inputVal.value. Method lastIndexOf determines the location of the last occurrence in letters of the string in text field inputVal.

26 Ingeniørhøjskolen i Århus Slide 26 of 38 SearchingStrings. html The string to search is: 37 abcdefghijklmnopqrstuvwxyzabcdefghijklm 38 Enter substring to search for First occurrence located at index Last occurrence located at index First occurrence from index 12 located at index Last occurrence from index 12 located at index

27 Ingeniørhøjskolen i Århus Slide 27 of 38 Prandram Output

28 Ingeniørhøjskolen i Århus Slide 28 of 38 MarkupMethods. html 1 2 XHTML Markup Methods of the String Object

29 Ingeniørhøjskolen i Århus Slide 29 of 38 Date object Static object to handling of ”time stamps” When instantiated a “now” time stamp is put into it –var nu = new Date() The actual time stamp may also be set manually –var aTimeStamp = new Date(yy, mm, dd, hh, mm, ss) –Lot of constructors with different parametres

30 Ingeniørhøjskolen i Århus Slide 30 of 38 Properties of Date object Properties –prototype methods –getDate, getDay, getFullYear, getHours, getMilliseconds, getMinutes, getMonth, getSeconds, getTime, getTimezoneOffset, getUTCDate, getUTCDay, getUTCFullYear, getUTCHoursm getUTCMilliseconds, getUTCMinutes, getUTCMonth, getUTCSeconds, getYear, parse, setDate, setFullYear, setHours, setMillieseconds, setMinutes, setSeconds, setTime, setUTCDate, …, tandMTString, toLocaleString, UTC, valueOf, Examples –Following the use of Date object

31 Ingeniørhøjskolen i Århus Slide 31 of 38 DateTime.html 1 2 Date and Time Methods

33 Ingeniørhøjskolen i Århus Slide 33 of 38 Prandram Output

34 Ingeniørhøjskolen i Århus Slide 34 of 38 The Number and Boolean objects Boolean – converts everything to ”true” or ”false” –Implicit given, when all (almost) browsers automatically converts ex. 0 to false and rest to true –var values = new Boolean(onValue); Number represents both float and int –also implicit given, but may be used to access properties like max value or min value allowed –isNaN useful method (is Not a Number) methods: valueOf, toString, isNaN

35 Ingeniørhøjskolen i Århus Slide 35 of 38 The RegExp object * Regular Expressions –Used for parsing text strings following certain rules (Regular Expressions), ex if a text field contains 5 cifres, a date or a is formatted like an adress. Deitel do not include RegularExpressions under JavaScript –Out of Curriculum –You may look under Pyton –For a tutorial in RegularExpressions to JavaScript see:

36 Ingeniørhøjskolen i Århus Slide 36 of 38 A Sample of RegExp in JavaScript function checkpostal(){ var re5digit=/^\d{5}$/ //regular expression defining a 5 digit number if (document.myform.myinput.value.search(re5digit)==-1) //if match failed alert("Please enter a valid 5 digit number inside form") } Checks user input for typing a five ciphers number var re5digit = /^\d{5}$/ - ^: start of string, \d: must be a digit, {5} 5 tal, $: end …search(re5digit) == -1 - search on a string object takes a RegExp as param

37 Ingeniørhøjskolen i Århus Slide 37 of 38 Global * The object that are default for the “browser”. Has only ”global functions” “parseInt” as example Includes –escape, eval, isFinite, isNaN, parseInt, parseFloat, toString, unescape, unwatch, watch, –this Refers always to current object in the DOM, ex.. to a FORM object Gives you the reference to the form element

38 Ingeniørhøjskolen i Århus Slide 38 of 38 Self declared objects You can declare your own objects Not like Java C# and C++ You instantiate an object of type Object, and expands its functionality Ex. two complex data types … –Var o = new Object(); Not include in Course Curriculum


Download ppt "Presentation 8: JavaScript continued Arrays and objects Internet Technology 1."

Similar presentations


Ads by Google