Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 8

JAVASCRIPT IN

A360
Introduction
 JavaScript is a programming language that allows you to implement complex things on web pages. 
 It is dynamically typed programming language.
 JavaScript gives HTML designers a programming tool.
 JS is both a client side and server-side scripting language.
 Where Can We Run JS:
 Adding JS to your HTML files.
 In browser console
 In your local machine by installing Node.JS
JavaScript Variables
 4 Ways to Declare a JavaScript Variable:
• Using var
• Using let
• Using const
• Using nothing
 If you want a general rule: always declare variables with const.
 If you think the value of the variable can change, use let.

var x = 5; let x = 5; x = 5; const price1 = 5;


var y = 6; let y = 6; y = 6; const price2 = 6;
var z = x + y; let z = x + y; z = x + y; let total = price1 + price2;
JavaScript Strings
 We can declare a string using 

txt1 = "what a very"; 


txt2 = "nice day"; 
txt3 = txt1+txt2;

txt3 = "what a very nice day"

 Adding Strings and Numbers:

5 + 5 = 10

"5" + 5 = "55"

 If you add a number and a string, the result will be a string. 


JavaScript DOM
 When a web page is loaded, the browser creates a Document Object Model of the page.

 With the object model, JavaScript gets all the power it needs to create dynamic HTML:
 JavaScript can change all the HTML elements in the page
 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page
JavaScript DOM
Methods Description
document.getElementById() Select the unique element with given id. In case there are 2 same ID
then it selects the first element.
document.getElementsByClassName() Select collection elements with given classname
document.getElementsByTagName() Select collection elements with given tagname
document.querySelector() Select element the first element on the basic of CSS string
document.querySelectorALL() Select a list of elements on the basic of CSS string
JavaScript Events
 The change in the state of an object is known as an Event. When javascript code is included in HTML, js reacts
over these events and allow the execution. This process of reacting over the events is called Event Handling.

Event Performed Event Handler Description

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the element

mouseup onmouseup When the mouse button is released over the element

submit onsubmit When the user submits the form

change onchange When the user modifies or changes the value of a form element

Keydown Onkeydown  When the user press and then release the key
JavaScript Fetch
 The fetch() method in JavaScript is used to request to the server and load the information on the webpages. The
request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.

fetch('url') //api for the get request


.then(response => response.json())
.then(data => console.log(data));

let formData = new FormData();


formData.append('name', 'John');
formData.append('password', 'John123');

fetch("api/SampleData",
    {
        body: formData,
        method: "post"
    });

You might also like