Js Introduction
- JavaScript is programming or scripting language of the Web.
- JavaScript is a programming language that adds interactivity to your website.
- JavaScript is working on client side and server side
- JavaScript is to program the behavior of web pages
-
JavaScript Can Change HTML Content using getElementById()
EX:
document.getElementById("demo").innerHTML = "Hello JavaScript"; - JavaScript Can Change HTML Attribute Values
-
JavaScript Can Change HTML Styles (CSS)
EX:
document.getElementById("demo").style.fontSize = "35px"; -
JavaScript Can Hide HTML Elements
EX:
document.getElementById("demo").style.display = "none"; -
JavaScript Can Show HTML Elements
EX:
document.getElementById("demo").style.display = "block"; -
In HTML, JavaScript code is inserted between
<script>and</script>tags.You can place any number of scripts in an HTML document.
- JavaScript function is placed in the
<head>section of an HTML page. - a JavaScript function is placed in the
<body>section of an HTML page. - Scripts can also be placed in external files
- JavaScript function is placed in the
Js Output
JavaScript Display Possibilities
- Writing into an HTML element, using innerHTML. EX:
- Writing into the HTML output using document.write(). EX:
- Writing into an alert box, using window.alert(). EX:
- Writing into the browser console, using console.log(). EX:
- JavaScript Print EX:
JavaScript Statements
- A JavaScript program is a list of programming statements.
- Semicolons separate JavaScript statements.
- JavaScript ignores multiple spaces.
-
EX:
let x, y, z; // Statement 1 x = 5; // Statement 2 y = 6; // Statement 3 z = x + y; // Statement 4 - JavaScript Line Length and Line Breaks
EX:
document.getElementById("demo").innerHTML = "Hello Dolly!"; - JavaScript statements can be grouped together in code blocks
EX:
function myFunction() { document.getElementById("demo1").innerHTML = "Hello Dolly!"; document.getElementById("demo2").innerHTML = "How are you?"; }
Synatx& Variables
-
JavaScript Syntax
JavaScript syntax is the set of rules, how JavaScript programs are constructed
EX:
// How to create variables: var x; let y; // How to use variables: x = 5; y = 6; let z = x + y; -
JavaScript Values
The JavaScript syntax defines two types of values:
- Fixed values called Literals.
- Variable values called Variables.
-
JavaScript Literals
- Numbers are written with or without decimals:10.2 or 100
- Strings are text, written within double or single quotes: "Hello" 'hello'
-
JavaScript Expressions
An expression is a combination of values, variables, and operators, which computes to a value.
the combination called an evaluation. -
JavaScript Identifiers
- JavaScript variables must be identified with unique names.
- Names can contain letters, digits, underscores, and dollar signs.
- Names must begin with a letter
- Names can also begin with $ and _ (but we will not use it in this tutorial)
- Names are case sensitive (y and Y are different variables)
- Reserved words (like JavaScript keywords) cannot be used as names
-
JavaScript is Case Sensitive
-
JavaScript Comments
- Single Line Comments (//) EX:
let x = 5; // Declare x, give it the value of 5 - multi line comments (/* */) EX:
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
JavaScript Variables
There are 3 ways to declare a JavaScript variable: * Using var* Using let
* Using const
- Variables (var) Variables are containers for storing data (values).
EX:
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
Variables defined with let cannot be Redeclared.
EX:
let x = "Ahmed mohamed";
let x = 0;
// SyntaxError: 'x' has already been declared
Variables defined with let must be Declared before use.EX:
let x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
// only in block
}
// Here x is 10
Variables defined with let have Block Scope.EX:
{
let x = 2;
}
// x can NOT be used here out of scope
Use const when you declare:
A new Array
A new Object
A new Function
A new RegExp
Variables defined with const cannot be Redeclared.
EX:
var x = 2; // Allowed
const x = 2; // Not allowed
{
let x = 2; // Allowed
const x = 2; // Not allowed
}
{
const x = 2; // Allowed
const x = 2; // Not allowed
}
Variables defined with const cannot be Reassigned.EX:
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
Variables defined with const have Block Scope.EX:
const x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
JS Operators
-
Arithmetic Operators
operator Description EX (+) Addition let x = 5; let y = 2; let z = x + y; // result is 7(-) Subtraction let x = 5; let y = 2; let z = x - y; // result is 3(*) Multiplication let x = 5; let y = 2; let z = x * y; // result is 10(**) Exponentiation let x = 5; let z = x ** 2; // result is 25(/) Division let x = 5; let y = 2; let z = x / y; // result is 2.5(%) Modulus (Remainder) let x = 5; let y = 2; let z = x % y; // result is 1(++) Increment let x = 5; x++; let z = x; // result is z=7(--) Decrement let x = 5; x--; let z = x; // result is z=3 -
Assignment Operators
operator Expression Same As EX (=) x = y x = y let x = 10; "using x for all" (+=) x += y x = x + y x += 5; (-=) x -= y x = x - y x -= 5; (*=) x *= y x = x * y x *= 5; (/=) x /= y x = x / y x /= 5; (%=) x %= y x = x % y x %= 5; (%=) x %= y x = x % y x %= 5; (<<=) x <<= y x = x << y x <<= 5; (>>=) x >>= y x = x >> y x >>= 5; (>>>=) x >>>= y x = x >>> y x >>>= 5; (&=) x &= y x = x & y x &= 5; (^=) x ^= y x = x ^ y x ^= 5; (|=) x |= y x = x | y x |= 5; (**=) x **= y x = x ** y x **= 5; -
Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Operator Description Comparing Returns (==) equal to x == 8 false x == 5 true x == "5" true (===) equal value and equal type x === 5 true x === "5" false (!=) not equal x != 8 true (!==) not equal value or not equal type x !== 5 false x !== "5" true x !== 8 true (>) greater than x > 8 false (<) less than x < 8 true (>=) greater than or equal to x >= 8 false (<=) less than or equal to x <= 8 true -
Logical Operators
Logical operators are used to determine the logic between variables or values.
Operator Description Example && and (x < 10 && y > 1) is true || or (x == 5 || y == 5) is false ! not !(x == y) is true -
String Operators
the + operator used to add string "concatenate"
EX:
let text1 = "Ahmed"; let text2 = "mohamed"; let text3 = text1 + " " + text2; //result Ahmed mohamed OR "adding strings and numbers" let x = 5 + 5; //result 10 let y = "5" + 5; //result 55 let z = "Hello" + 5; //Hello5
JS Numbers
-
Numbers
- Decimal EX: let x = 3.14;
- Without Decimal EX: let y = 3;
- scientific EX: let y = 123e-5;
-
Precision
EX:
let x = 999999999999999; // x will be 999999999999999 let y = 9999999999999999; // y will be 10000000000000000 -
add two strings
EX:
let x = "10"; let y = "20"; let z = x + y; // z will be 1020 (a string)
-
Numbers Methods
- toString() Method :returns a number as a string.
EX:
let x = 123; x.toString(); // returns 123 from variable x (123).toString(); // returns 123 from literal 123 (100 + 23).toString(); // returns 123 from expression 100 + 23 - toExponential() Method : returns a string, with a number rounded and written using exponential notation.
EX:
let x = 9.656; x.toExponential(2); // returns 9.66e+0 x.toExponential(4); // returns 9.6560e+0 x.toExponential(6); // returns 9.656000e+0 - toFixed() Method: returns a string, with the number written with a specified number of decimals
EX:
let x = 9.656; x.toFixed(0); // returns 10 x.toFixed(2); // returns 9.66 x.toFixed(4); // returns 9.6560 x.toFixed(6); // returns 9.656000 -
toPrecision() Method: returns a string, with a number written with a specified length
EX:
let x = 9.656; x.toPrecision(); // returns 9.656 x.toPrecision(2); // returns 9.7 x.toPrecision(4); // returns 9.656 x.toPrecision(6); // returns 9.65600 -
valueOf() Method : returns a number as a number
EX:
let x = 123; x.valueOf(); // returns 123 from variable x (123).valueOf(); // returns 123 from literal 123 (100 + 23).valueOf(); // returns 123 from expression 100 + 23
- toString() Method :returns a number as a string.
-
Global JavaScript Methods
method Description Example Number() Returns a number, converted from its argument. Number(true); // returns 1 Number("10"); // returns 10 Number("10.33"); // returns 10.33 Number("10,33"); // returns NaN Number("10 33"); // returns NaN Number("Ahmed"); // returns NaNparseFloat() Parses its argument and returns a floating point number parseFloat("10"); // returns 10 parseFloat("10.33"); // returns 10.33 parseFloat("10 20 30"); // returns 10 parseFloat("10 years"); // returns 10 parseFloat("years 10"); // returns NaNparseInt() Parses its argument and returns an integer parseInt("-10"); // returns -10 parseInt("10.33"); // returns 10 parseInt("10 20 30"); // returns 10 parseInt("10 years"); // returns 10 parseInt("years 10"); // returns NaN -
Number Properties
Property Description Example MAX_VALUE Returns the largest number possible in JavaScript let x = Number.MAX_VALUE;MIN_VALUE Returns the smallest number possible in JavaScript let x = Number.MIN_VALUE;POSITIVE_INFINITY Represents infinity (returned on overflow) let x = Number.POSITIVE_INFINITY;NEGATIVE_INFINITY Represents negative infinity (returned on overflow) let x = Number.NEGATIVE_INFINITY;NaN Represents a "Not-a-Number" value let x = Number.NaN; let x = 100 / "Apple";
Math
-
Math Properties
Examples :
Math.E // returns Euler's number Math.PI // returns PI Math.SQRT2 // returns the square root of 2 Math.SQRT1_2 // returns the square root of 1/2 Math.LN2 // returns the natural logarithm of 2 Math.LN10 // returns the natural logarithm of 10 Math.LOG2E // returns base 2 logarithm of E Math.LOG10E // returns base 10 logarithm of E -
Math Methods
method Description Example Math.round(x) Returns x rounded to its nearest integer Math.round(4.9); // returns 5 Math.round(4.4); // returns 4 Math.round(-4.2); // returns -4Math.ceil(x) Returns x rounded up to its nearest integer Math.ceil(4.9); // returns 5 Math.ceil(-4.2); // returns -4 Math.ceil(4.4); // returns 5Math.floor(x) Returns x rounded down to its nearest integer Math.floor(4.9); // returns 4 Math.floor(4.4); // returns 4 Math.floor(-4.2); // returns -5Math.trunc(x) Returns the integer part of x Math.trunc(4.9); // returns 4 Math.trunc(4.2); // returns 4 Math.trunc(-4.2); // returns -4Math.sign() Returns if x is negative, null or positive Math.sign(-4); // returns -1 Math.sign(0); // returns 0 Math.sign(4); // returns 1Math.pow(x,y) returns the value of x to the power of y Math.pow(8, 2); // returns 64Math.sqrt(x) returns the square root of x Math.sqrt(64); // returns 8Math.abs() returns the absolute (positive) value of x Math.abs(-4.7); // returns 4.7Math.sin() returns the sine (a value between -1 and 1) of the angle x (given in radians). Math.sin(90 * Math.PI / 180); // returns 1 (the sine of 90 degrees)Math.cos() returns the cosine (a value between -1 and 1) of the angle x (given in radians). Math.cos(0 * Math.PI / 180); // returns 1 (the cos of 0 degrees)Math.min() and Math.max() can be used to find the lowest or highest value in a list of arguments Math.min(0, 150, 30, 20, -8, -200); // returns -200Math.random() returns a random number between 0 (inclusive), and 1 (exclusive) Math.random(); // returns a random numberMath.log() returns the natural logarithm of x Math.log(1); // returns 0Math.log2() returns the base 2 logarithm of x. Math.log2(8); // returns 3