JAVA SCRIPT
JAVA SCRIPT
JAVA SCRIPT
// single line comment
Select,Ctrl+/
Alt+mouse left clik multiple write
/*-----------*/ multi line comment
<script>
[Link] (“hello world”);
Alert(“me”);
</script>
Operators (+, -, *, /)
Operations (value ex:.. 35,36
There are 3 ways to declare a JavaScript variable:
Using var
Using let
Using const
div. Container . = class
button#click #=id
<body>
<h1>welcome to this javaScript Tutorial</h1>
<div id=”firstcontainer” class="con">
<button id="clicl">click me</button>
</div>
<div class="con">
<p>this is a paregraph</p>
</div>
</body>
<script >
[Link]("hello world");
// alert("you have been hacked");
</script>
DOM manipulation
Handle html page ND css page
Type in console web browser
[Link] = "Manish";
erase all
document. getElementsByTagName('h1')
document. getElementsByTagName('h1')[0]
control css
document. getElementsByTagName('h1')[0].[Link] = "99px"
[Link]('h1')[0].[Link]= "hidden"
[Link]('h1')[0].[Link] = "none"
<script >
[Link]("hello world");
// alert("you have been hacked");
// [Link]("this is document write")
[Link]("this is warning");
[Link]("this is an error");
</script>
[Link] to print in javaScript
[Link](“”)= write on document
[Link] console API
[Link](“”)= write on console
[Link](“this is warning”); for warning
[Link](“this is an error”); for error
[Link]()= for clear
<script src="[Link]"></script>
Connect to java page
3. JavaScript Variables
// what are variables? - Containers to store value
Data types in JavaScript
//numbers
var number1 = 34;
var number2 = 56;
[Link] (number1 + number2);
// string
var str1 = “this is string”;
var str2 = ‘this is string’;
//objects
Key value pairs
//Booleans (true or flase)
var a = true;
var b = false;
[Link](a,b);
undefined
// var und = underfind;
Var und;
[Link](und);
Var n = null ;
[Link](n);
At a very high level , there are Tow types of
data types in javaScript
1. Primitive data types: undefined, null, number, string, Boolean, symbol
2. Reference data types: Arrays and objects
Array
var arr = [1,2,3,4,5]
[Link](arr)
//print= 12345
[Link](arr[0])
//print=1
//opreators in javaScript
//opretors in javascript
//arithmetic operators
var a = 100;
var b = 56;
[Link]("the value of a - b is", a-b);
[Link]("the value of a + b is", a+b);
[Link]("the value of a * b is", a*b);
[Link]("the value of a / b is", a/b);
assignment operators
//assignment operators
var c = b;
// c += 2;
c -= 2;
c *= 2;
c /= 2;
[Link](c);
== is comparison opreators
var x = 26;
var y = 56;
[Link](x == y);
[Link](x >= y);
[Link](x <= y);
[Link](x > y);
[Link](x < y);
//logical opeators
Or
[Link](true || true);
[Link](true || false);
[Link](false || false);
And
[Link](true && true);
[Link](true && false);
[Link](false && false);
Not
[Link](!false);
// [Link](!true);
Conditionals in javaScript
If, else
var age = 4;
if (age > 8){
[Link]('you are not a kid');
}
else{
[Link]('you are a kid');
}
If-else ladder
//if-else ladder
var age = 8;
if(age >32){
[Link]('you are not a kidd');
}
else if(age> 26){
[Link]('abhi tu cokara nahi dokara hai');
}
else if(age> 22){
[Link]('abhi tu cokara nahi hai bhau tu ');
}
else if(age> 18){
[Link]('abhi tu cokara nahi hai');
}
else{
[Link]('you are child');
[Link]("End of ladder");
}
Loop
For-lop
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
[Link](arr);
for(var i=0;i<[Link];i++){
[Link](arr[i]);
}
[Link]
[Link](function(element){
[Link](element);
})
While loop
Var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let j=0;
while(j<[Link]){
[Link](arr[j]);
j ++;
}
Do-while-loop
Var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Let j=0;
//do-while;
do{
[Link](arr[j]);
j++;
}while (j < [Link]);
Continue nd break;
for(var i=0;i<[Link];i++){
if(i==2){
//break;
countinue;
}
[Link](arr[i]);
}
Array Methods
et myArr = ["fan", "camera", 34, null, true];
// Array Methods
[Link]([Link]);
//[Link](); *remove last array
//[Link]("manish"); *add new array
//[Link](); *remove frist arry
// [Link]("manish"); * add on frist
const newLen = [Link]("manish"); *count array lenth
[Link](newLen);
//[Link]([Link]("MANISH")) *count arrary
[Link](myArr);
//string Methods in javaScript
// String methods in javaScript
let myLovelyString = "manish is a good boy good";
// [Link]([Link]);
// [Link]([Link]("good"))
// [Link]([Link]("good"))
//[Link]([Link](1,4))
d = [Link]("manish", "Rohan");
[Link](d, myLovelyString)
Date
let myDate =new Date();
[Link](myDate);
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
DOM Manipulation
The DOM Programming Interface
The HTML DOM can be accessed with JavaScript (and with other programming
languages).
In the DOM, all HTML elements are defined as objects.
The programming interface is the properties and methods of each object.
A property is a value that you can get or set (like changing the content of an HTML
element).
A method is an action you can do (like add or deleting an HTML element).
The getElementById Method
The most common way to access an HTML element is to use the id of the element.
In the example above the getElementById method used id="demo" to find the element.
The innerHTML Property
The easiest way to get the content of an element is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.
The innerHTML property can be used to get or change any HTML element,
including <html> and <body>.
Finding HTML Elements
Method Description
[Link](id) Find an element by element id
[Link](name) Find elements by tag name
[Link](name Find elements by class name
)
Changing HTML Elements
Property Description
[Link] = new html content Change the inner HTML of an element
[Link] = new value Change the attribute value of an HTML el
[Link] = new style Change the style of an HTML element
Method Description
[Link](attribute, value) Change the attribute value of an HTML el
[Link](element Create an HTML element
)
[Link](element) Remove an HTML element
[Link](element) Add an HTML element
[Link](new, old) Replace an HTML element
[Link](text) Write into the HTML output stream
Adding and Deleting Elements
[Link]
<script>
[Link]("demo").innerHTML = "Hello World!";
</script>
document
[Link]
[Link]('click').click()
[Link]('click').[Link] = 'blue'
[Link]('click').[Link] = '2px solid blue'
elemClass[0].[Link]("text-success")
elemClass[0].innerHTML
elemClass[0].innerText
removeChild(element); ----> removes an element
//DOM Manipulation
let elem = [Link]('click');
[Link](elem);
let elemClass = [Link]('container');
[Link](elemClass);
//elemClass[0].[Link] = "yellow";
elemClass[0].[Link]("bg-primary")
elemClass[0].[Link]("text-success")
// [Link]([Link]);
// [Link]([Link]);
// [Link](elemClass[0].innerHTML);
// [Link](elemClass[0].innerText);
tn = [Link]('div')
[Link](tn)
createElement = [Link]('p');
[Link] = "this is a created para";
tn[0].appendChild(createElement);
createdElement2=[Link]('p');
[Link] = "this is a created bold para";
tn[0].replaceChild(createElement2, createdElement);
removeChild(element); ----> removes an element