Download presentation
Presentation is loading. Please wait.
1
2017, Fall Pusan National University Ki-Joune Li
JavaScript – Objects 2017, Fall Pusan National University Ki-Joune Li
2
JavaScript Objects – Basic Concepts
Object in JavaScript is a collection of variables with Methods, Properties (variables), Definitions, Constructor In JavaScript, almost everything is object Booleans can be objects (if defined with the new keyword) Numbers can be objects (if defined with the new keyword) Strings can be objects (if defined with the new keyword) Dates, Maths, Regular Expression, Arrays, Functions, Objects are always objects Except primitives – string, number, Boolean, null, undefined
3
JavaScript Objects – Basic Concepts
Object has Method Properties (Attributes) Definition (e.g. macro definition) Creating an object Using a literal object new Object() operator User-defined Object constructor Built-in JavaScript Constructor – Object(), String(), Number(), Boolean(), Array(), RegExp(), Function(), Date() RegExp: Regular Expression Object – search pattern to search in a string Syntax: /pattern/modifiers Example: var patt=/w3schools/i
4
JavaScript Objects – Basic Concepts
Primitive Types vs. Objects Some primitive types can be created as objects example: they can be compared : But NOT Recommend to create primitive as an object – Why ? Object-Object is not comparable – example var x = "John"; var y = new String("John"); <script> var x = "John"; // x is a string var y = new String("John"); // y is an object document.getElementById("demo").innerHTML = (x==y); </script>
5
JavaScript Objects – Basic Concepts
Adding New Methods Adding methods to an object is done inside the constructor function: Example function person(firstName, lastName, age, eyeColor) { this.firstName = firstName; this.lastName = lastName; this.age = age; this.eyeColor = eyeColor; this.changeName = function (name) { this.lastName = name; }; }
6
JavaScript Objects – String Object
Many methods can be applied search can receive regular expression as well. var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length; var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate"); var str = "Please locate where 'locate' occurs!"; var pos = str.search("locate"); var str = "Apple, Banana, Kiwi"; var res = str.slice(7, 13) var str = "Apple, Banana, Kiwi"; var res = str.substr(7, 6); str = "Please visit Microsoft!"; var n = str.replace("Microsoft", "W3Schools"); str = "Please visit Microsoft and Microsoft!"; var n = str.replace(/Microsoft/g, "W3Schools");
7
JavaScript Objects – String Object
var text1 = "Hello World!"; // String var text2 = text1.toUpperCase(); // text2 is text1 converted to upper var text1 = "Hello World!"; // String var text2 = text1.toLowerCase(); // text2 is text1 converted to lower var text1 = "Hello"; var text2 = "World"; var text3 = text1.concat(" ", text2); var str = "HELLO WORLD"; str.charAt(0); // returns H var str = "HELLO WORLD"; str[0]; // returns H NOT a good idea, NOT Safe var txt = "a,b,c,d,e"; // String txt.split(","); txt.split("|");
8
JavaScript Objects – Other Objects
Number Object Math Object and Math Random
9
JavaScript – Array Objects
JavaScript supports array objects as other high level language. sort.js function start() { var a=[10, 1, 9, 2, 30, 8, 7, 4, 5, 5]; outputArray("Data Items in the original order: ", a, document.getElementById("originalArray")); a.sort(CompareIntegers); outputArray("Data Items in the sorted order: ", a, document.getElementById("sortedArray")); } function outputArray(heading, theArray, output) { output.innerHTML=heading+theArray.join(" "); // insert blank between elements function CompareIntegers(a, b) { return a-b;} window.addEventListener("load", start, false); Run start when this HTML document is loaded
10
JavaScript – Array Objects
<!DOCTYPE html> <html> <body> <h2>JavaScript array</h2> <p>This is a sample function:</p> <script src="javaSample-array.js"></script> <!-- include js file --> <p id="originalArray"></p> <p id="sortedArray"></p> </body> </html>
11
JavaScript – Array Objects
Find Max example. findMax.js function start() { var a=[10, 1, 9, 2, 30, 8, 7, 4, 5, 5]; var maxValue=findMax(a); outputArray("max value: ", maxValue, document.getElementById("result")); } function outputArray(heading, v, output) { output.innerHTML=heading+v; // insert blank between elements function findMax(a) { var v=-100; for(var i in a) { if (a[i]> v) v=a[i];} // for(var i=0; i<a.length;i++) return v; window.addEventListener("load", start, false);
12
JavaScript – Array Objects
<!DOCTYPE html> <html> <body> <h2>JavaScript array</h2> <p>This is a sample function:</p> <script src="javaSample-array.js"></script> <p id=“result"></p> </body> </html>
13
JavaScript – Array Objects
Multi-dimensional Array 10 1 9 2 30 8 var a=[[10, 1], [9, 2], [30, 8]]; 10 1 9 2 30 8 7 var a=[[10, 1], [9, 2], [30, 8, 7]]; var a=new Array(3); // allocate 2 rows a[0]=new Array(2); // allocate 2 columns to row 0 a[1]=new Array(2); // allocate 2 columns to row 1 a[2]=new Array(3); // allocate 3 columns to row 0
14
JavaScript Objects – Prototypes
Once an object is created, we may add a new property or method. function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } var myFather = new Person("John", "Doe", 50, "blue"); var myMother = new Person("Sally", "Rally", 48, "green"); myFather.nationality = "English"; myFather.name = function () {return this.firstName + " " + this.lastName; };
15
JavaScript Objects – Prototypes
We can also add new properties or method using prototype <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } Person.prototype.nationality = "English"; var myFather = new Person("John", "Doe", 50, "blue"); document.getElementById("demo").innerHTML ="My father is " + myFather.nationality; Person.prototype.name = function() { return this.firstName + " " + this.lastName; }; document.getElementById("demo").innerHTML ="My father is " + myFather.name(); </script> </body></html>
Similar presentations
