Berorientasi pada objek JavaTutorial Script (OOJS) dengan Contoh
Apa itu Konsep OOPS JavaNaskah?
Seringkali, variabel atau array tidak cukup untuk mensimulasikan situasi kehidupan nyata. JavaSkrip memungkinkan Anda membuat objek yang bertindak seperti objek di dunia nyata. Seorang siswa atau rumah dapat menjadi objek yang memiliki banyak karakteristik unik tersendiri. Anda dapat membuat properti dan metode untuk objek Anda agar pemrograman menjadi lebih mudah. Jika objek Anda adalah seorang siswa, objek tersebut akan memiliki properti seperti nama depan, nama belakang, id, dll., dan metode seperti calculateRank, changeAddress, dll. Jika objek Anda adalah rumah, objek tersebut akan memiliki properti seperti jumlah kamar, warna cat, lokasi, dll., dan metode seperti calculateArea, changeOwner, dll.
Cara Membuat Objek
Anda dapat membuat objek seperti ini:
var objName = new Object(); objName.property1 = value1; objName.property2 = value2; objName.method1 = function() { line of code }
OR
var objName= {property1:value1, property2:value2, method1: function() { lines of code} };
Akses Properti dan Metode Objek
Anda dapat mengakses properti suatu objek seperti ini:
objectname.propertyname;
Anda dapat mengakses metode suatu objek seperti ini:
objectname.methodname();
Coba sendiri Contoh ini:
<html> <head> <title>Objects!!!</title> <script type="text/javascript"> var student = new Object(); student.fName = "John"; student.lName = "Smith"; student.id = 5; student.markE = 76; student.markM = 99; student.markS = 87; student.calculateAverage = function() { return (student.markE + student.markM + student.markS)/3; }; student.displayDetails = function() { document.write("Student Id: " + student.id + "<br />"); document.write("Name: " + student.fName + " " + student.lName + "<br />"); var avg = student.calculateAverage(); document.write("Average Marks: " + avg); }; student.displayDetails(); </script> </head> <body> </body> </html>
Konstruktor OOPS
Namun membuat objek semacam ini tidak terlalu berguna karena di sini juga, Anda harus membuat objek berbeda untuk siswa berbeda. Inilah konstruktor objek ke dalam gambar. Konstruktor objek membantu Anda membuat tipe objek yang dapat digunakan kembali untuk memenuhi kebutuhan masing-masing instance.
Coba sendiri Contoh ini:
<html> <head> <script type="text/javascript"> function Student(first, last, id, english, maths, science) { this.fName = first; this.lName = last; this.id = id; this.markE = english; this.markM = maths; this.markS = science; this.calculateAverage = function() { return (this.markE + this.markM + this.markS)/3; } this.displayDetails = function() { document.write("Student Id: " + this.id + "<br />"); document.write("Name: " + this.fName + " " + this.lName + "<br />"); var avg = this.calculateAverage(); document.write("Average Marks: " + avg + "<br /><br />"); } } var st1 = new Student("John", "Smith", 15, 85, 79, 90); var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82); var st3 = new Student("Kevin", "White", 4, 93, 89, 90); var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45); st1.displayDetails(); st2.displayDetails(); st3.displayDetails(); st4.displayDetails(); </script> </head> <body> </body> </html>
Loop Melalui Properti suatu Objek
sintaks:
for (variablename in objectname) { lines of code to be executed }
Untuk/dalam a lingkaran biasanya digunakan untuk mengulang properti suatu objek. Anda dapat memberikan nama apa pun untuknya variabel, namun nama objeknya harus sama dengan nama objek yang sudah ada dan perlu Anda ulangi.
Coba sendiri Contoh ini:
<html> <head> <script type="text/javascript"> var employee={first:"John", last:"Doe", department:"Accounts"}; var details = ""; document.write("<b>Using for/in loops </b><br />"); for (var x in employee) { details = x + ": " + employee[x]; document.write(details + "<br />"); } </script> </head> <body> </body> </html>