title | description | created | updated |
---|---|---|---|
Javascript-Cheatsheet |
beginner friendly javascript tips |
2022-10-17 |
2022-10-0 |
A programming Language which performs logic operation and calculation similar to other language but different because of following reasons:-
A tree like structure of html which can be manipulated through javascript
Add Script Tag in body of the HTML document
<script src="filename.js"></script>
Javascript programs run in the console section of the website
console.log("hello world")
Temporary memorary location to store data or a container that holds a value
To create a variable in JavaScript, use the let,var, and const keyword follow by the variable name
SYNTAX : let variableName;
It doesn't need any datatype to define a variable name that's why It is called Loosely typed language.
A variable whose value can't be changed.
let num = 123; let name = 45
A string is a sequence of one or more characters that may consist of letters, numbers, or symbols. Strings in JavaScript are primitive data types and immutable, which means they are unchanging
They are wrapped with double quotes(" ") or single quote (' ')
let num = "user"; let name = 'hello world'
let num = 10n;
let num; console.log(num) //undefined
let num = null; It’s just a special value which represents “nothing”, “empty” or “value unknown
let num = True; let alpha = false
The purpose of symbols is to create unique property keys that are guaranteed not to clash with keys from other code
A++ : Postfix increment operator-
A-- : Postfix decrement operator.
++A : Prefix increment operator.
--A : Prefix decrement operator.
< : Less than operator.
> : Greater than operator.
<= : Less than or equal operator.
>= : Greater than or equal operator.
== : Equality operator.
!= : Inequality operator.
=== : Strict equality operator.
!== : Strict inequality operator.
&& : Logical AND.
**|| :**Logical OR.
? : - condition ? expressionIfTrue : expressionIfFalse
An entry control loop , it checks condition at entry time
SYNTAX : while(condition)
An exit control loop , it checks condition at exit time
SYNTAX : do { statements } while(condition)
if to specify a block of code to be executed, if a specified condition is true else to specify a block of code to be executed, if the same condition is false else if to specify a new condition to test, if the first condition is false
SYNTAX : if (condition) statement1 else statement2
Switch statements is used to select one of many code blocks to be executed.
SYNTAX : switch(expression) { case x: // code block break; case y: // code block break; default: // code block }
Switch is used for changing values and if...else is used for range of values
For statement creates a loop with 3 optional expressions: SYNTAX : for (expression 1; expression 2; expression 3) { // code block to be executed } Expression 1 is executed (one time) before the execution of the code block.
Expression 2 defines the condition for executing the code block.
Expression 3 is executed (every time) after the code block has been executed.
A set of instructions or a block of code that performs the task. It leads to reusability of code and provide structure to code Anything inside the function will only be executed when it is called.
SYNTAX : function functionName();
- Alert : This one we’ve seen already. It shows a message and waits for the user to press “OK”.
SYNTAX : alert("Hello");
- Prompt : The function prompt accepts two arguments:
SYNTAX : result = prompt(title, [default]);
- Confirm The function confirm shows a modal window with a question and two buttons: OK and Cancel. The result is true if OK is pressed and false otherwise
SYNTAX : result = confirm(question);
- Collection of elements of same type.
- Store multiple values at one place.
SYNTAX : let variablename = ["","",""];
To Access Arrays: variableName[indexNumber];
DOM stands for Document Object Model. It is a programming interface that allows us to create, change, or remove elements from a website document. DOM manipulation is when you use JavaScript to add, remove, and modify elements of a website
Interaction with the webpage by clicking on the webpage or moving the cursor.And after interaction the change happen is called Events
By which we perform these events or interactions like buttons or any key structure they are called ***Event Handlers***
And behind all these event handler the code written for that event and event handlers are called ***Event Listeners***
To access the elements on the webpage or in the HTML codes we use Document
If an element has the id attribute, we can get the element using this method and change its properties
If an element has the class attribute, we can get the element using this method and change its properties
If an element is in the tag, we can get the element using this method and change its properties
To select a first element of the CSS selector
All elements inside element matching the given CSS selector are selected.
To make changes inside the HTML code
To change backgroundcolor
To change Textcolor
To change width
and so on... we can change the styling
method sets a new value to an attribute
To change the link
To change the image
To change Input(of html code input) type
To change the value of placeholder
mousedown/mouseup : Mouse button is clicked/released over an element.
mouseover/mouseout : Mouse pointer comes over/out from an element.
mousemove : Every mouse move over an element triggers that event.
onclick : Triggers after mousedown and then mouseup over the same element if the left mouse button was used.
dblclick : Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays.