Scribd
Upload
9 views

Module 2

The document discusses JavaScript and DOM manipulation. It covers JavaScript basics and introduction, DOM and DOM manipulation methods like getElementById, querySelector, getElementsByClassName and querySelectorAll. It also discusses Date object, form validation, exception handling and regular expressions in JavaScript.

Uploaded by

Kulumlo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Module 2

The document discusses JavaScript and DOM manipulation. It covers JavaScript basics and introduction, DOM and DOM manipulation methods like getElementById, querySelector, getElementsByClassName and querySelectorAll. It also discusses Date object, form validation, exception handling and regular expressions in JavaScript.

Uploaded by

Kulumlo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Module 2- Front End Development

2.1 Javascript-
2.1.1 Javascript Introduction- JavaScript is a cross-platform, object-oriented scripting language used to make
webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.). There are also more advanced
server side versions of JavaScript such as Node.js, which allow you to add more functionality to a website than downloading
files (such as realtime collaboration between multiple computers).

Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model
(DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user
events such as mouse clicks, form input, and page navigation.

Example –

Different ways of displaying Hello world using javascript


<html>
<body>
<p id="p1"></p>
<script>
//diffrent ways to display hello world using js
console.log("hello world");
document.write("hello all");
document.getElementById('p1').textContent="hello world";
document.getElementById('p1').innerHTML="hello world";
</script>
</body>
</html>

SRC Code Link-

https://akshayaprabhu0101.blogspot.com/2022/08/different-ways-to-display-hello-world.html

2.1.2 Javascript DOM -

1.DOM-Document Object Model. It is tree of nodes/elements created by the browser. Javascript can be used to
read/write/manipulate to the DOM. DOM is an Object Oriented Representation.

1.2 DOM Document Object-The document object represents your web page.

If you want to access any element in an HTML page, you always start with accessing the document object.
1.3 DOM Methods-

1.getElementById()- The Document method getElementById() returns an Element object representing the element whose
id property matches the specified string. It is used to find an element by element id.

Exa mple source code-


<html ><body>

<p id="p1"></p>
<script>
//format text using js
document.getElementById('p1').innerHTML="<b>viva</b>";
document.getElementById('p1').style.fontSize='40px';
document.getElementById('p1').style.color='blue';
document.getElementById('p1').style.background='red';
</script>
</body>
</html>

SRC Code Link-

https://akshayaprabhu0101.blogspot.com/2022/08/format-text-using-js.html

2.querySelector()- querySelector() returns the first Element within the document that matches the specified selector, or
group of selectors. If no matches are found, null is returned.

Syntax-

querySelector(selectors)

Example Source Code-


<!DOCTYPE html>
<html lang="en">
<body>
<p id="p1"></p>
<ul>
<li class="lis">home</li>
<li class="lis">Contact Us</li>
<li class="lis">About Us</li>
<li class="lis">Services</li>
</ul>

<script>
//change content of 1st li
document.querySelector('li').textContent="viva";
//changes color of 1st even li
document.querySelector('li:nth-child(even)').style.color='red';
//changes color of 3rd li
document.querySelector('li:nth-child(3)').style.color='blue';
</script>
</body>
</html>

SRC Code link-

https://akshayaprabhu0101.blogspot.com/2022/08/change-content-of-li-using-queryselector.html
3.getElementsByClassName()- The getElementsByClassName method of Document interface returns an array-like object
of all child elements which have all of the given class name(s). When called on the document object, the complete document
is searched, including the root node.

Syntax-

document.getElementsByClassName(classname)

Example Source Code-

<!DOCTYPE html>
<html lang="en">
<body>
<ul class="uls">
<li class="lis">home</li>
<li class="lis">services</li>
<li class="lis">contact us</li>
<li class="lis">about us</li>
</ul>
<script>
const item=document.getElementsByClassName('lis');
console.log(item);
item[0].style.color='blue';
item[1].textContent='Viva';
item[2].style.background='gray';
item[3].style.color='red';
</script>
</body>
</html>

SRC CODE LINK-

https://akshayaprabhu0101.blogspot.com/2022/08/changing-contents-and-formatting-text.html

4. querySelectorAll()- The Document method querySelectorAll() returns a static (not live) NodeList representing a list of
the document's elements that match the specified group of selectors.

Syntax-

querySelectorAll(selectors)

Example Source Code-

<!DOCTYPE html>
<html lang="en">
<body>
<ul class="uls">
<li class="lis">home</li>
<li class="lis">services</li>
<li class="lis">contact us</li>
<li class="lis">about us</li>
</ul>
<script>
const items=document.querySelectorAll('li:nth-child(odd)');
items.forEach(function(item){
item.innerHTML='i am in red color';
item.style.color='red';
});
</script>
</body>
</html>

SRC code link-

https://akshayaprabhu0101.blogspot.com/2022/08/change-content-and-color-using.html

2. Date Object- Date objects are created with the new Date() constructor. T here are 4 ways to create a new date object.

• new Date()
• new Date(year, month, day, hours, minutes, seconds, milliseconds)
• new Date(milliseconds)
• new Date(date string)

Example Source Code-

<!DOCTYPE html>
<html lang="en">
<body>
<p id="p1"></p>
<button id="btn">Click Me</button>
<script>
//change content of paragraph as current date on click event
document.getElementById('btn').addEventListener('click',onclick);
function onclick(e){
const d=new Date();
document.getElementById('p1').innerHTML=d;
}
</script>
</body>
</html>

SRC code link-

https://akshayaprabhu0101.blogspot.com/2022/08/doctype-html-html-lang-en-body-p-id-p1.html
3.Validation In JS- HTML form validation can be done by JavaScript. If a form field is empty, this function alerts a
message, and returns false, to prevent the form from being submitted.

<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" id="input">
<button type="button" id='btn'>submit</button>
<script>
document.getElementById('btn').addEventListener('click',validate);
function validate(){
const x=document.getElementById('input').value;
if(x==''){
alert('Please Enter Name');
}
}
</script>
</body>
</html>

Src code link-

https://akshayaprabhu0101.blogspot.com/2022/08/form-validation-in-js.html

<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" id="input">
<button type="button" id='btn'>submit</button>
<script>
document.getElementById('btn').addEventListener('click',validate);
function validate(){
const x=document.getElementById('input').value;
if(isNaN(x)){
alert('Please Enter Number');
}
}
</script>
</body>
</html>
SRC Code Link

https://akshayaprabhu0101.blogspot.com/2022/08/form-validation-using-js.html

4. Exception Handling- The try statement defines a code block to run (to try). The try statement allows you to define a
block of code to be tested for errors while it is being executed. The catch statement allows you to define a block of code to
be executed, if an error occurs in the try block. The catch statement defines a code block to handle any error. The finally
statement lets you execute code, after try and catch, regardless of the result

A ReferenceError is thrown if you use (reference) a variable that has not been declared

A SyntaxError is thrown if you try to evaluate code with a syntax error.

4.1 Syntax-

try {

Block of code to try

catch(err) {

Block of code to handle errors

finally {

Block of code to be executed regardless of the try / catch result

4.2 Example Source Code-

<!DOCTYPE html>
<html lang="en">
<body>
<script>
try{
eval('hello world')
}
catch(e){
console.log(e);
}
finally{
console.log("finally block executes no matter what");
}
</script>
</body>
</html>

SRC Code Link-

https://akshayaprabhu0101.blogspot.com/2022/08/exception-handling-in-js-part-1.html
<!DOCTYPE html>
<html lang="en">
<body>
<script>
try{
console.log(p);
}
catch(e){
console.log(e);
}
finally{
console.log("finally block executes no matter what");
}
</script>
</body>
</html>

SRC Code Link

https://akshayaprabhu0101.blogspot.com/2022/08/exception-handling-in-js-part-2.html

5. Regular Expressions-

A regular expression is a pattern of characters.

The pattern is used to do pattern-matching "search-and-replace" functions on text.

In JavaScript, a RegExp Object is a pattern with Properties and Methods.

5.1 Syntax-

/pattern/modifier(s);

/hello/ A regular expression

/hello/i A case-insensitive regular expression

/hello/g Perform a global match


5.2 Brackets-

[abc] Matches any character between the brackets

[^abc] Matches any character not between the brackets

[0-9] Matches any character between the brackets

[^0-9] Matches any character not between the brackets

5.3 Quantifiers-

n* Matches any string that contains zero or more occurrences of n

n$ Matches any string with n at the end of it

^n Matches any string with n at the beginning of it

n{X} Matches any string that contains a sequence of X n's

n{X,Y} Matches any string that contains a sequence of X and Yn's

5.4 Example Source code-

<!DOCTYPE html>
<html lang="en">
<body>
<script>
let re;
re=/hello/i; //case insensitive
re=/^hello/; //must start with hello
re=/hello$/; //must end with hello
re=/h.llo/; //any char only once
re=/h*llo/; //any char more than one time

re=/[ha]llo/; //only h or a allowed(only 1)


re=/[^ha]llo/; //any char except h or a allowed(only 1)
re=/[A-Za-z]llo/; //any alphabet allowed(only 1)
re=/[0-9]llo/; //any digit allowed(only 1)
re=/hel[a-z]{2}o/; //any small letter, exactly 2 times
re=/hel[a-z]{1,3}o/;//any small letter,1-3 times.

const res=re.exec('allhello all');


console.log(res);
</script>
</body>
</html>

SRC Code Link-

https://akshayaprabhu0101.blogspot.com/2022/08/regular-expressions-in-js.html
6. Event Handling in JS-

Event handlers can be used to handle and verify user input, user actions, and browser actions:

• Things that should be done every time a page loads


• Things that should be done when the page is closed
• Action that should be performed when a user clicks a button
• Content that should be verified when a user inputs data

Many different methods can be used to let JavaScript work with events:

• HTML event attributes can execute JavaScript code directly


• HTML event attributes can call JavaScript functions
• You can assign your own event handler functions to HTML elements
• You can prevent events from being sent or being handled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">Click Me</button>
<script>
//click event
document.getElementById('btn').addEventListener('click',loadData)
function loadData(){
document.write("btn clicked")
}
//double click
document.getElementById('btn').addEventListener('dbclick',loadData)
function loadData(){
document.write("double clicked")
}

//mouseenter
document.getElementById('btn').addEventListener('mouseenter',loadData)
function loadData(){
document.write("mouse enter")
}

//mouseleave
document.getElementById('btn').addEventListener('mouseleave',loadData)
function loadData(){
document.write("mouse leaves")
}

</script>
</body>
</html>

7. DHTML with JS-

DHTML stands for Dynamic HTML. Dynamic means that the content of the web page can be customized or changed
according to user inputs i.e. a page that is interactive with the user. In earlier times, HTML was used to create a static page.
It only defined the structure of the content that was displayed on the page. With the help of CSS, we can beautify the HTML
page by changing various properties like text size, background color etc. The HTML and CSS could manage to navigate
between static pages but couldn’t do anything else. If 1000 users view a page that had their information for eg. Admit card
then there was a problem because 1000 static pages for this application build to work. As the number of users increase, the
problem also increases and at some point it becomes impossible to handle this problem.

To overcome this problem, DHTML came into existence. DHTML included JavaScript along with HTML and CSS to make
the page dynamic. This combo made the web pages dynamic and eliminated this problem of creating static page for each
user. To integrate JavaScript into HTML, a Document Object Model(DOM) is made for the HTML document. In DOM,
the document is represented as nodes and objects which are accessed by different languages like JavaScript to manipulate
the document. In below example DHTML Example has been dynamically added using JS.

Example-

<html>
<body>
<h4 id="h4"></h4>
<script>
document.getElementById('h4').innerHTML="DHTML Example";
document.getElementById('h4').style.backgroundColor='red';
</script>
</body>
</html>
8. JSON Introduction- The JSON format is syntactically similar to the code for creating JavaScript objects. Because of
this, a JavaScript program can easily convert JSON data into JavaScript objects. Since the format is text only, JSON data
can easily be sent between computers, and used by any programming language. JSON stands for JavaScript Object Notation

• JSON is a text format for storing and transporting data


• JSON is "self-describing" and easy to understand
• SON is a lightweight data-interchange format
• JSON is plain text written in JavaScript object notation
• JSON is used to send data between computers
• JSON is language independent

JavaScript has a built in function for converting JSON strings into JavaScript objects:

JSON.parse()

JavaScript also has a built in function for converting an object into a JSON string:

JSON.stringify()

Example JSON file

9.JSON XMLHTTPRequest- XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data
from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting
what the user is doing. XMLHttpRequest is used heavily in AJAX programming. Despite its name, XMLHttpRequest can
be used to retrieve any type of data like JSON, plain text, not just XML.
9.1 XMLHttpRequest.response- Returns an ArrayBuffer, a Blob, a Document, a JavaScript object, or a string, depending
on the value of XMLHttpRequest.responseType, that contains the response entity body.

9.2 XMLHttpRequest.responseText- Returns a string that contains the response to the request as text, or null if the request
was unsuccessful or has not yet been sent.

9.3 XMLHttpRequest.status- Returns the HTTP response status code of the request.

9.4 XMLHttpRequest.open()- Initializes a request.

9.5 XMLHttpRequest.send()- Sends the request. If the request is asynchronous (which is the default), this method returns
as soon as the request is sent.

9.6 load- Fired when an XMLHttpRequest transaction completes successfully. Also available via the onload event handler
property.

Example Source Code

https://akshayaprabhu0101.blogspot.com/2022/08/json-xmlhttprequest.html

News API Code

https://akshayaprabhu0101.blogspot.com/p/json-xmlhttprequest-using-news-api.html

You might also like