js - usmanlive.com · js output writing into an html element, using innerhtml. writing into the...
TRANSCRIPT
![Page 1: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/1.jpg)
JSVERY VERY BASIC
![Page 2: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/2.jpg)
Helping Material https://www.w3schools.com/js/default.asp
Use it as a reference Guide
Usman Akram http://usmanlive.com CUI LAHORE 2
![Page 3: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/3.jpg)
Where to write JsScript Tag
<script>document.getElementById("demo").innerHTML = "My First JavaScript";</script>
Or Make a separate Js file and attach like below
<script src="/js/myScript1.js"></script>
Usman Akram http://usmanlive.com CUI LAHORE 3
![Page 4: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/4.jpg)
Js OutputWriting into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().
First use console.log() and alert for beginners
Usman Akram http://usmanlive.com CUI LAHORE 4
![Page 5: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/5.jpg)
Statementsx stores the value 5
y stores the value 6
z stores the value 11
Usman Akram http://usmanlive.com CUI LAHORE 5
var x, y, z; // Statement 1x = 5; // Statement 2y = 6; // Statement 3z = x + y; // Statement 4
![Page 6: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/6.jpg)
Comments
Usman Akram http://usmanlive.com CUI LAHORE 6
var x = 5; // I will be executed
// var x = 6; I will NOT be executed
![Page 7: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/7.jpg)
Case Sensitive
Usman Akram http://usmanlive.com CUI LAHORE 7
var lastname, lastName;lastName = "Doe";lastname = "Peterson";
![Page 8: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/8.jpg)
Much Like Algebraprice1, price2, and total, are variables:
Usman Akram http://usmanlive.com CUI LAHORE 8
var price1 = 5;var price2 = 6;var total = price1 + price2;
![Page 9: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/9.jpg)
OperatorsOperator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
Usman Akram http://usmanlive.com CUI LAHORE 9
![Page 10: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/10.jpg)
Assignment Operators
Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y
Usman Akram http://usmanlive.com CUI LAHORE 10
![Page 11: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/11.jpg)
String Operators
Usman Akram http://usmanlive.com CUI LAHORE 11
var txt1 = "John";var txt2 = "Doe";var txt3 = txt1 + " " + txt2;
![Page 12: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/12.jpg)
String And Numbers1055Hello5
Usman Akram http://usmanlive.com CUI LAHORE 12
var x = 5 + 5;var y = "5" + 5;var z = "Hello" + 5;
![Page 13: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/13.jpg)
Comparison OperatorsOperator
Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
Usman Akram http://usmanlive.com CUI LAHORE 13
![Page 14: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/14.jpg)
Logical Operators
Operator
Description
&& logical and
|| logical or
! logical not
Usman Akram http://usmanlive.com CUI LAHORE 14
![Page 15: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/15.jpg)
Data TypesJavaScript Types are Dynamic
Usman Akram http://usmanlive.com CUI LAHORE 15
var length = 16; // Numbervar lastName = "Johnson"; // Stringvar x = {firstName:"John", lastName:"Doe"}; // Object
![Page 16: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/16.jpg)
UndefinedUndefined
In JavaScript, a variable without a value, has the value undefined. The type is also undefined.
Usman Akram http://usmanlive.com CUI LAHORE 16
![Page 17: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/17.jpg)
NullIn JavaScript null is "nothing". It is supposed to be something that doesn't exist.
Usman Akram http://usmanlive.com CUI LAHORE 17
typeof undefined // undefinedtypeof null // object
null === undefined // falsenull == undefined // true
![Page 18: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/18.jpg)
Premitive Data
Usman Akram http://usmanlive.com CUI LAHORE 18
typeof "John" // Returns "string"typeof 3.14 // Returns "number"typeof true // Returns "boolean"typeof false // Returns "boolean"typeof x // Returns "undefined" (if x has no value)
![Page 19: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/19.jpg)
JavaScript Functions
Usman Akram http://usmanlive.com CUI LAHORE 19
// The function returns the product of p1 and p2function myFunction(p1, p2) {return p1 * p2;
}
![Page 20: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/20.jpg)
Declare and Call a Function
Usman Akram http://usmanlive.com CUI LAHORE 20
var x = myFunction(4, 3);// Function is called, return value will end up in x
function myFunction(a, b) {return a * b; // Function returns the product of a and b
}
![Page 21: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/21.jpg)
Objects Properties and Objects
car.name = Fiat
car.model = 500
car.weight = 850kg
car.color = white
car.start()
car.drive()
car.brake()
car.stop()
Usman Akram http://usmanlive.com CUI LAHORE 21
![Page 22: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/22.jpg)
Defining an Object
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
Usman Akram http://usmanlive.com CUI LAHORE 22
var person = {firstName: "John",lastName: "Doe",age: 50,eyeColor: "blue"
};
![Page 23: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/23.jpg)
More Advance Usage
Usman Akram http://usmanlive.com CUI LAHORE 23
var person = {firstName: "John",lastName : "Doe",id : 5566,fullName : function() {return this.firstName + " " + this.lastName;
}};
![Page 24: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/24.jpg)
The this KeywordIn a function definition, this refers to the "owner" of the function.
In the example above, this is the person object that "owns" the fullName function.
In other words, this.firstName means the firstNameproperty of this object.
Usman Akram http://usmanlive.com CUI LAHORE 24
![Page 25: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/25.jpg)
JavaScript EventsHTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on these events.
Examples ◦An HTML web page has finished loading
◦An HTML input field was changed
◦An HTML button was clicked
Usman Akram http://usmanlive.com CUI LAHORE 25
![Page 26: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/26.jpg)
Binding Events
Usman Akram http://usmanlive.com CUI LAHORE 26
<button onclick=“alert(‘you clicked me’)">Click Me
</button>
![Page 27: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/27.jpg)
Common HTML Events
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
Usman Akram http://usmanlive.com CUI LAHORE 27
![Page 28: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/28.jpg)
JavaScript ArraysInstead of
We Use Something like this
Usman Akram http://usmanlive.com CUI LAHORE 28
var cars = ["Saab", "Volvo", "BMW"];
var car1 = "Saab";var car2 = "Volvo";var car3 = "BMW";
![Page 29: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/29.jpg)
How to Access Array Element
Usman Akram http://usmanlive.com CUI LAHORE 29
var name = cars[0];
![Page 30: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/30.jpg)
ForEach
Usman Akram http://usmanlive.com CUI LAHORE 30
var txt = "";var numbers = [45, 4, 9, 16, 25];numbers.forEach(myFunction);
function myFunction(value) {txt = txt + value + "<br>";
}
![Page 31: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/31.jpg)
Array.map()This example multiplies each array value by 2 and create a new value
Usman Akram http://usmanlive.com CUI LAHORE 31
var numbers1 = [45, 4, 9, 16, 25];var numbers2 = numbers1.map(myFunction);function myFunction(value) {return value * 2;
}
![Page 32: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/32.jpg)
Array.filter()The filter() method creates a new array with array elements that passes a test.
Usman Akram http://usmanlive.com CUI LAHORE 32
var numbers = [45, 4, 9, 16, 25];var over18 = numbers.filter(myFunction);function myFunction(value, index, array) {return value > 18;
}
![Page 33: JS - usmanlive.com · Js Output Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert()](https://reader033.vdocuments.mx/reader033/viewer/2022052002/6014f8c8d90a2d2d535bc75c/html5/thumbnails/33.jpg)
Math ObjectMath.PI;
Math.round(4.7); // returns 5Math.round(4.4); // returns 4
Math.pow(8, 2); // returns 64
Math.sqrt(64); // returns 8
……
Usman Akram http://usmanlive.com CUI LAHORE 33