JS-OOP
<Beginner JS><Function><Variable><Loop-If><OOP>
this member
it represents the class itself
it has direct access to all properties of its parent class
function Hand(side,fingers,nails){
this.LeftOrRight =side;
this.NbrOfFingers=fingers
this.NailState=nails;
}
- name of the class : Hand
- properties :
- (side,fingers,nails) // properties of the function / of the class
- NailState // property of the argument
- argument (value provided for each property)
- this.LeftOrRight =side; // argument of the function / of the class
- =nails; // argument of the argument
- class:
- function Hand(side,fingers,nails){this.LeftOrRight =side;this.NbrOfFingers=fingersthis.NailState=nails;}
This
It has direct access to all properties of its parent class
You must use it to create a class
Before using a class you must declare it.
var dogHand=newHand("Right",5,false,true);
- name of the object: dogHand
- name of the class: Hand
- arguments: "Right",5,false,true
Method
Action performed by an object.
It is also created like a function.
You must also use `This` here.
A Class will contain many group of items
- n items
- Author1 Title1 CopyrightYear1
- Author2 Title2 CopyrightYear2
- .....
A method calls one of the group of items of the class
So a method is a subgroup of a class
Author2 Title2 CopyrightYear2 : this is calling just 1 item only
Basic class creation
function WBook(bookName,writer,Ypublish){
this.title=bookName;
this.author=writer;
this.CpyYear=Ypublish;
}
Objects creation
Declaring variables is necessary
function displayCollection(){
var book1= new WBook ("How","Roger",1981);
doc.frmBooks.txtTitle1.value=book1.title;
doc.frmBooks.txtAuth1.value=book1.Author;
doc.frmBooks.txtCopYear1.value=book1.CpyYear;
}
With the use of methods some objects may be able to perform actions.
Creating a method
A function can not be created in another function.
That is why. you have to specify it belongs to the class.
function WBook (bookName, writer, yearPublished){
this.Title=bookName;
this.Author=writer;
this.CopyrightYear=yearPublished;
this.DisplayTitle=showTitle;
this.DisplayAuthor=IdAuthor;
this.DisplayYear=ShowBYear;
}
function showTitle(){
doc.frmBooks.txtTitle1.value=this.Title;
}
function IdAuthor(){
doc.frmBooks.txtAuthor1.value=this.Author;
}
function ShowBYear(){
doc.frmBooks.txtCopyrightYear1.value=this.CopyrightYear;
}
function displayCollection(){
var abook=new WBook("CompOrg","Greg",1192);
abook.DisplayTitle();
abook.DisplayAuthor();
abook.DisplayYear();
}
Passing an object as argument
This allows to access any of the objects properties and methods.
It is placed before the body.
function showbook(oneBook){
doc.frmBooks.txtTitle.value=oneBook.Title;
doc.frmBooks.txtAuthor.value=oneBook.Author;
doc.frmBooks.txtCYear.value=oneBook.CYear;
}
function displayCollection()
{
var aBook=new wBook("Moby","Paul",1998);
showBook(aBook);
}
</script>
</head>
<body>
Returning object from a function
It is
- for declaring a local variable of an object in a function
- for processing that object
- for returning it when the function exists
With function returning an object, by calling the function, you can assign it to variable declared (from the same type of objects)
function createBook(){
var aBook=new wBook("Colly","Rocky",19)
return aBook;
}
//after this part it is same as previous
function showBook (oneBook){
....}
// here a change
function displayCollection(){
var aBook=createBook();
showBook(aBook);
}
An Object as a Property of another Object
Synthesis
TR: Buraya kadar gösterilen her şey, aynı şeyi farklı şekillerde nasıl yapılabilir diye anlatılıyordu.
Built in classes
window.open()
Open in new window for blank page
<input type="button" name="bNW" value="cNW" OnClick="window.Open();">
for a website
<input type="button" name="bNW" value="cNW" OnClick="window.Open('http://www.fctx.com','wnd New');">
for empty new window
<input type="button" name="bNW" value="cNW" OnClick="window.Open('...','_blank');">
for opening page in same window
<input type="button" name="bNW" value="cNW" OnClick="window.Open('...','_self');">
The syntax
window.open([webpage],[wndName],[Options],[Replace])
Properties of a window
OnClick="window.open('http://......', .....);"
- size: 'width=420,height=320');"
- fullscreen: ,'fullscreen=yes');" // default is no
- location: 'top=100,left=40');" // default is top left
- resizable: 'resizable=no');" // default is yes
- menubar: 'menubar=no');" // default is yes
- toolbar: 'toolbar=no');" // default is yes
- scrollbar: 'scrollbar=no');" // default is yes
- statusbar: 'statusbar=no');" // default is yes
Advanced JS
ESLint is a static code analysis tool that checks your JavaScript code for common problems, such as syntax errors, formatting issues, code style violations, and potential bugs
source: https://www.linkedin.com/advice/0/what-benefits-using-eslint-code-quality-consistency#:~:text=ESLint%20is%20a%20static%20code,for%20code%20quality%20and%20consistency.
Comments
Post a Comment