Please enable JavaScript.
Coggle requires JavaScript to display documents.
JavaScript (Operators (Equality operators (==, can compare number and…
JavaScript
Operators
-
-
-
-
-
-
+=, -=, /=, *= like python
-
Equality operators
==, can compare number and string-number
===, strict equality check :red_flag:
!, <, >, <=, >=, !=: like python
!==, :strict equality check
LOGICAL Operators
&&(AND), ||(OR), XOR not implemented in JS
-
Data
Numeric e.g(13, 3.14, -23 ..)
string e.g (" ", ' ')
-
+, work as concatenation operator even if one operand is number :check:
-, *, /, if string contains number Math operations will be performed :red_flag: else NaN will be returned
-
-
-
-
-
-
-
ARRAY(python list)
new Array(), [ ] :like Python
-
-
-
METHODS
.reverse()
.shift(): removes element from front
.unshift(): add elements at front
.pop(): remove last
.push(): add at the end
.splice(): remove elements starting from index
.slice(): like python's \:, also support -ve indexing
.indexOf(): search element list python .index
.join(): like Python, default sep=','
FUNCTION
-
-
-
Usually we can create functions anywhere
but it is a practise to create functions first and later call
Browser loads the all JS first then execute,
so doen't matter where we declared function
Functions are evaluated at run-time, not at declaration time :check:
-
-
MISC
Variables
always create variable first and then use it
otherwise automatically created variable will have
global scope
-
-
SCOPE
Global
-
If a variable is not defined and we directly use
it then browser will treat it as global variable even inside function :red_flag:
-
const
-
-
Good practise: HTML elements we work in the JS,
we should create as const at the beginning of the script
and then work :star:
-
Loading of JS
Browser loads the page in sequence
so if we import JS at starting when DOM is not created
we may get error, so while loading JS we can specify
defer keyword in <script tag>
-
-
-
OBJECTS
-
var course = {
attr: 'value'
update:function(){ return ++course.attr};
};
very helpful to create objects in this way, its like python dict
-
-
-
EVENT HANDLING
Everything that happens in the browser is registered as an event
open browser, enter url and hit Enter, click, Move-mouse,
user-interact with browser in anyway browser handle with
pre-registered responses
Steps
- identify the element which we want to add interactive behaviour
element1.onClick = myfunc; / it will register function/
- what event we want to handle
- what function we want to run when event triggers
-
Event Function
function eventHandle(e){
e.preventDefault();
}
usually we refer event object by e which is passed
when function is called
-
-
Event Listener
-
element1.addEventListener("event", eventHandleFunc, false/true)
last argument is for piling events, check MDN
for most cases last arg is false
IF we want to pass argument to eventHandler function
we can do so by creating anonymous function and
calling eventHandler inside this anonymous function :star:
Nice trick
-
BEST PRACTISES
-
JS debugging
1st look into console, it will tell how many errors
which line the error occurred,
-
-
there are multiple console methods like error, info etc
good for debugging
-
-
-
MINIFICATION
-
In sources-tool of developer-tools, there is a
option to pretty print which unminifies the code.
-
-
-
ResponsiveImages
For different screen resolution, size
we can load different images, called responsive images
srcset, sizes attribute for img tag (HTML5)
-
Timer
setInterval(method-name, <time-in-millisec>,
returns interval ID
we can save interval object returned from setInterval()
and later call clearInterval() to clear the interval :star:
-
-