1 / 35

Core JavaScript

Core JavaScript. Array , Boolean, Date, Function, Math , Number , Object, String , regExp. Array. The Array object let's you store multiple values in a single variable. Syntax: var leaders = new Array( “Gandhi", “Mandela",

johnna
Télécharger la présentation

Core JavaScript

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. Core JavaScript Array, Boolean, Date, Function, Math, Number, Object, String, regExp

  2. Array • The Array object let's you store multiple values in a single variable. • Syntax: • var leaders = new Array( “Gandhi", “Mandela", “Aung San Suu Kyi " ); or var fruits = [ “Gandhi", “Mandela", “Aung San Suu Kyi “ ]; leaders[0]=Gandhi leaders[1]=Mandela leaders[2]=Aung San Suu Kyi

  3. August 26 1988, addressed a half-million mass rally in front of the famous Shwedagon Pagoda in Rangoon • Purpose: call for a democratic government. • Military Govt arrest: detained for six years and released on July 10, 1995. During detention was awarded the 1991 Nobel Peace Prize. • Established a health and education trust in support of the Burmese people to use the $1.3 million prize money. • Quotes: • A good head and a good heart are always a formidable combination. • Education is the most powerful weapon which you can use to change the world.

  4. Array Properties

  5. array_nm.length <body> • <script type="text/javascript"> • var arr = new Array( 10, 20, 30 ); • document.write("arr.length is : " + arr.length); • </script> • </body> • Output: • arr.length is : 3

  6. Property : Constructor • <html> <head> • <title> JavaScript Array constructor Property</title> </head> • <body> • <script type="text/javascript"> • vararr = new Array( 10, 20, 30 ); • document.write("arr.constructor is::" + arr.constructor); • </script> • </body> • </html> arr.constructor is:: function Array() { [native code] }

  7. Property: Prototype • The prototype property allows you to add properties and methods to any object (Number, Boolean, String and Date etc). • Note: Prototype is a global property which is available with almost all the objects. • Syntax: • object.prototype.name = value

  8. Prototype Example… • <html> • <head> <title>User-defined objects</title> • <script type="text/javascript"> • function book(title, author) • { • this.title = title; • this.author = author; • } • </script> • </head> • <body> • <script type="text/javascript"> • varmyBook = new book(“linux", “Oreilly"); • book.prototype.price = null; • myBook.price = 100; • document.write("Book title is : " + myBook.title + "<br>"); • document.write("Book author is : " + myBook.author + "<br>"); • document.write("Book price is : " +myBook.price+ "<br>"); • </script> • </body> • </html> Book title is : linux Book author is : Oreilly Book price is : 100

  9. Array Methods

  10. array_name.sort() • <script type="text/javascript"> • <!-- • var myArray2= new Array(); • myArray2[0] = "Gandhi"; • myArray2[1] = "Mandela"; • myArray2[2] = "Aung San"; • myArray2.sort(); • document.write(myArray2[0] + myArray2[1] + myArray2[2]); • //--> </script> Aung SanGandhiMandela

  11. Array_nm.reverse() • var fruits = ["Banana", "Orange", "Apple", "Mango"]; • fruits.reverse(); • The result of fruits will be: • Mango,Apple,Orange,Banana

  12. array_name.concat() <script type="text/javascript"> var alpha = ["a", "b", "c"]; var numeric = [1, 2, 3]; varalphaNumeric = alpha.concat ( numeric ); document.write("alphaNumeric : " + alphaNumeric ); </script> alphaNumeric : a,b,c,1,2,3

  13. array_name.concat() <script type="text/javascript"> var alpha = ["a", "b", "c"]; var numeric = [1, 2, 3]; var symbols = [“%”,”$”, “#”]; varalphaNumeric = alpha.concat ( numeric, symbols ); document.write("alphaNumeric : " + alphaNumeric ); </script> alphaNumeric : a,b,c,1,2,3,%,$,#

  14. Practice Question • Create 2 arrays: leaders {Gandhi, Mandela, Aung San} • Countries {India, Burma, S.Africa} • Write a JavaScript to concatenate and sort the two arrays: Such that the output is as follows: sortNconcat: Aung San, Burma, Gandhi, India, Mandela, S.Africa List two any 2 ways to perform the above task.

  15. Key: • <script type="text/javascript"> • <!-- var leaders= new Array(); • var countries= ["India","Burma","S.Africa"]; • leaders[0] = "Gandhi"; leaders[1] = "Mandela"; • leaders[2] = "Aung San"; leaders.sort(); • document.write("leader:"+leaders[0] + leaders[1] + leaders[2]); • document.write("<br>Countries:"+countries); • var sortNconcat = leaders.concat(countries.sort()); • document.write("<br>sortNconcat:"+sortNconcat); • document.write("<br>sortNconcat:"+sortNconcat.sort()); • //--> </script

  16. array_name.indexOf() • What does it do? • The indexOf() method searches the array for the specified item, and returns it's position. • How does it search? • The search will start at the specified position, or at the beginning if no start position is specified, and end the search at the end of the array. • What if it does not find the element? • It Returns -1 if the item is not found.

  17. If duplicate entries exist then? • Then indexOf method returns the position of the first occurrence. • What if the element is on the first position? • The first item has position 0, the second item has position 1, and so on. So indexOf() would return 0. • What if we wish to search from back to front? • If you want to search from end to start, use the lastIndexOf() method • The indexOf() method is not supported in Internet Explorer 8 and earlier as it was introduces in javascript 1.6.

  18. Syntax:array.indexOf(item,start) var fruits = [ "Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"]; var a = fruits.indexOf("Apple",4); The result of a will be: 6

  19. Array_nm.lastIndexOf(item,start) • The lastIndexOf() method searches the array for the specified item, and returns it's position. • The search will start at the specified position, or at the end if no start position is specified, and end the search at the beginning of the array. • Returns -1 if the item is not found. • If the item to search for is present more than once, the lastIndexOf method returns the position of the last occurence.

  20. Example 1: LastIndexOf(item,start); • var fruits = ["Banana", "Orange", "Apple", "Mango"]; • var a = fruits.lastIndexOf("Apple"); • The result of a will be: 2

  21. Example 2 : LastIndexOf(item,start); • var fruits = [ "Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple", "Mango“ ]; • var a=fruits.lastIndexOf("Apple",4) • The result of a will be: 2

  22. Example 3 : LastIndexOf(item,start); • var fruits = [ "Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple", "Mango“ ]; • var a=fruits.lastIndexOf("Apple",7) • The result of a will be: 6

  23. Array_name.push() • The push() method adds new items to the end of an array, and returns the new length. • The new item(s) will be added at the end of the array. • This method changes the length of the array. • Tip: To add items at the beginning of an array, use the unshift() method.

  24. Example: • var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.push("Kiwi") • The result of fruits will be: • Banana,Orange,Apple,Mango,Kiwi • In order to add more items, use the comma separator and pass as arguments.

  25. Unshift() • array.unshift(item1,item2, ..., itemX); • var fruits = ["Banana", "Orange", "Apple", "Mango"]; • fruits.unshift("Lemon","Pineapple"); • Output: • The result of fruits will be: • Lemon,Pineapple,Banana,Orange,Apple,Mango

  26. Shift() • Syntax: array.shift() • The shift() method removes the first item of an array, and returns that item. • Remember:This method changes the length of an array! • Trick: To remove the last item of an array, use the pop() method

  27. Example: • var fruits = ["Banana", "Orange", "Apple", "Mango"]; • fruits.shift() • OUTPUT: • The result of fruits will be: • Orange, Apple, Mango • There exist 14 methods in all for the array object

  28. Strings: • The String object is used to manipulate a stored piece of text. • String objects are created with new String(). • Syntax: • var txt = new String("string"); • var txt = "string";

  29. Search() • The search() method searches a string for a specified value, or regular expression, and returns the position of the match. • This method returns -1 if no match is found. • Syntax: • string.search(searchvalue)

  30. Str_nm.search(searchValue) • Parameter: Parameter Description searchvalue Required. • Value: The value, or regular expression, to search for. • Return Value • position of the first occurance of the specified searchvalue

  31. Example: search() • var str= “Tina Ma’am stays at Colaba"; • document.write(str.search(“at")); • The result of n will be? • 18 • 17 • 16 • 15

  32. ThinkThink Think • What is the difference between indexOf() and search() methods for a string, if they perform the same task???

  33. Substr() • This method returns the characters in a string beginning at the specified location through the specified number of characters. • Syntax: • string.substr(start[, length]); • start : Location at which to begin extracting characters (an integer between 0 and one less than the length of the string). • length : The number of characters to extract.

  34. Substr() • Note: If start is negative, substr uses it as a character index from the end of the string. • The substr method returns the new sub string based on given parameters. • Watch out for the next interesting program:

  35. (1,2): pp (-2,2): Ap (1): pples are round, and apples are juicy. (-20, 2): Ap (20, 2): d • <html> <head> • <title>JavaScript String substr() Method</title> </head> • <body> <script type="text/javascript"> • var str = "Apples are round, and apples are juicy."; • document.write("(1,2): " + str.substr(1,2)); • document.write("<br />(-2,2): " + str.substr(-2,2)); • document.write("<br />(1): " + str.substr(1)); • document.write("<br />(-20, 2): " + str.substr(-20,2)); • document.write("<br />(20, 2): " + str.substr(20,2)); • </script> </body> </html> Now jot down your answers

More Related