Scribd
Upload
138 views6 pages

Advance JS

Uploaded by

then mozhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
138 views6 pages

Advance JS

Uploaded by

then mozhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

ADVANCE JAVASCRIPT: JAVASCRIPT AND OBJECTS

A JavaScript object is an entity having state and behavior For example: car, pen, bike, chair, glass,
keyboard, monitor etc. JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. We don’t create class to get the object. But, we direct create
objects.
Creating Objects in JavaScript:
There are 3 ways to create objects.
 By object literal:
The syntax of creating object using object literal
object={property1:value1,property2:value2…..propertyN:valueN}
<script>
emp={id:102,name:”Shyam Kumar”,salary:40000}
document.write(emp.id+” “+emp.name+” “+emp.salary);
</script>
 By creating instance of Object directly (using new keyword):
The syntax of creating object directly
var objectname=new Object();
New keyword is used to create object.
<script>
var emp=new Object();
emp.id=101;
emp.name=”Ravi Malik”;
emp.salary=50000;
document.write(emp.id+” “+emp.name+” “+emp.salary);
</script>
 By using an object constructor (using this keyword):
you need to create function with arguments. Each argument value can be assigned in the current object by
using this keyword. The this keyword refers to the current object.
The example of creating object by object constructor,
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
JAVASCRIPT OWN OBJECTS
an object is a collection of properties, where each property is a key-value pair.
This example creates a new object called person:
const person = {
firstName: 'John',
lastName: 'Doe'
};
The person object has two properties: firstName and lastName.
a property of an object can be either own or inherited.
A property that is defined directly on an object is own while a property that the object receives from its
prototype is inherited.
The following creates an object called employee that inherits from the person object:
const employee = Object.create(person, {
job: {
value: 'JS Developer',
enumerable: true
}
});
The employee object has its own property job, and inherits firstName and lastName properties from its
prototype person.
The hasOwnProperty() method returns true if a property is own.
console.log(employee.hasOwnProperty('job')); // => true
console.log(employee.hasOwnProperty('firstName')); // => false
console.log(employee.hasOwnProperty('lastName')); // => false
console.log(employee.hasOwnProperty('ssn')); // => false
A property that is directly defined on an object is an own property. The obj.hasOwnProperty() method
determines whether or not a property is own.
THE DOM AND WEB
 The document object represents the whole html document.
 When html document is loaded in the browser, it becomes a document object. It is the root
element that represents the html document.
 It has properties and methods. By the help of document object, we can add dynamic content to
our web page.
 It is the object of window.
window.document Is same as document
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows
programs and scripts to dynamically access and update the content, structure, and style of a document."
Properties of document object:

Methods of document object:


We can access and change the contents of document by its methods.
write("string") - writes the given string on the doucment.
writeln("string")- writes the given string on the doucment with newline character at the end.
getElementById() - returns the element having the given id value.
getElementsByName() - returns all the elements having the given name value.
getElementsByClassName() - returns all the elements having the given class name.
Accessing field value by document object:
<script type="text/javascript">
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
DOM AND BROWSER ENVIRONMENTS
 JavaScript was created for web browsers. But, since then, it has expanded and become a language
with different platforms and uses.
 A platform can be a browser, a web-server, or another host. Each of them includes a platform-
specific functionality.
 For JavaScript specification, it is a host environment.
 A host environment has its own objects and functions in addition to the language core.
 Web browsers allow controlling web pages.
The “root” object named window has two roles
It is considered a global object for JavaScript code.
It presents the “browser window”, providing methods to control it.
function welcome() {
console.log("Welcome to W3Docs");
}
// global functions are global object methods:
window.welcome();
Document Object Model (DOM)
 Document Object Model (DOM) is targeted at representing the overall page content as objects
that can be transformed.
 The document object is considered the primary “entry point” to the page. It allows you to change
or create anything on the page.
// change the background color to green
document.body.style.background = "green";
// change it back after 2 second
setTimeout(() => document.body.style.background = "", 2000);
 The DOM specification explains a document structure, providing objects to manipulate it. Some
non-browser instruments also use DOM.
Browser Object Model (BOM)
The Browser Object Model (BOM) represents extra objects provided by the host environment to work
with anything excluding the document.
alert(location.href); // shows current URL
if (confirm("Go to Google?")) {
location.href = "https://www.google.com/"; // redirect the browser to another
URL
}
The functions such as alert/confirm/prompt are also a part of BOM
FORMS AND VALIDATIONS
The code gets the values of various form fields (name, email, what, password,
address) using Form.
Data Validation:
 Name Validation: Checks if the name field is empty or contains any digits.
 Address Validation: Checks if the address field is empty.
 Email Validation: Checks if the email field is empty or lacks the ‘@’ symbol.
 Password Validation: Checks if the password field is empty or less than 6 characters long.
 Selection Validation: Checks if a is selected.
 Error Handling: Displays alerts if any of the fields fail validation criteria. Sets focus back to the
respective field.
returns true if all validation checks pass, indicating that the form can be submitted. Otherwise, it returns
false, preventing form submission. Sets focus to the first field that failed validation, ensuring the user’s
attention is drawn to the problematic field.
Ex.
if (address === "") {
window.alert
("Please enter your address.");
address.focus();
return false;
}

if (email === "" || !email.includes('@')) {


window.alert
("Please enter a valid e-mail address.");
email.focus();
return false;
}

if (password.length < 6) {
alert ("Password should be atleast 6 character long");
password.focus();
return false;
}

You might also like