alert()top
alert('This is an alert Box')
array()top
//initialise
code = new Array();
code = new Array(5);
code = new Array("PHP", "ASP", "JSP", "Java");
//use
code[3] = 'Java';
code.length; //4
array. :- //use "arrayName." in front of the following
concat()
join()
pop()
push()
reverse()
shift()
slice(begin[,end])
sort()
splice(start_int, until_int, "add element");
toString()
unshift('add to start'[, 'add another'])
confirm()top
var answer = confirm('Are you sure?');
cookie()top
function setCookie (name, value, expires, path, domain, secure){
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
setCookie("cookiename", "cookievalue",
"Sat, 03-Jun-2006 18:14:23 GMT", "/");
//Get Cookie
function getCookie(name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset)
if (end == -1) {
end = cookie.length;
}
cookieStr = unescape(cookie.substring(offset, end));
}
}
return(cookieStr);
}
getCookie("cookiename");
document.write()top
document.write('This is JavaScript');
for()top
for(i=0; i<10; i++){
document.write(i + ".<br/>");
}
for(i in array){
document.write(i + "<br/>");
}
lengthtop
'eltreno'.length; //7
MutationObservertop
Overview
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Blogs
https://medium.com/@abbeal/listening-to-the-dom-changes-with-mutationobserver-b53a068a58d2
https://theblogpros.com/2019/04/26/getting-to-know-the-mutationobserver-api/
https://www.smashingmagazine.com/2019/04/mutationobserver-api-guide/
https://davidwalsh.name/mutationobserver-api
MutationObserver Options
MDN provides detail on the options for MutationObserver:
childList: Set to true if additions and removals of the target node's child elements (including text nodes) are to be observed.
attributes: Set to true if mutations to target's attributes are to be observed.
characterData Set: to true if mutations to target's data are to be observed.
subtree: Set to true if mutations to not just target, but also target's descendants are to be observed.
attributeOldValue: Set to true if attributes is set to true and target's attribute value before the mutation needs to be recorded.
characterDataOldValue: Set to true if characterData is set to true and target's data before the mutation needs to be recorded.
attributeFilter: Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.
That's a lot to be aware of when listening to one node and/or child nodes!
MutationRecord 9 property types
https://dom.spec.whatwg.org/#mutationrecord
record . type
Returns "attributes" if it was an attribute mutation. "characterData" if it was a mutation to a
CharacterData node. And "childList" if it was a mutation to the tree of nodes.
record . target
Returns the node the mutation affected, depending on the type. For "attributes",
it is the element whose attribute changed. For "characterData", it is the CharacterData node.
For "childList", it is the node whose children changed.
record . addedNodes
record . removedNodes
Return the nodes added and removed respectively.
record . previousSibling
record . nextSibling
Return the previous and next sibling respectively of the added or removed nodes, and null otherwise.
record . attributeName
Returns the local name of the changed attribute, and null otherwise.
record . attributeNamespace
Returns the namespace of the changed attribute, and null otherwise.
record . oldValue
The return value depends on type. For "attributes", it is the value of the changed
attribute before the change. For "characterData", it is the data of the changed node
before the change. For "childList", it is null.
Call
$( document ).ready(function() {
if (window.MutationObserver) {
if (typeof some_var_flag_to_initiate_MutationObserver != "undefined") {
trackDom();
}
}
});
function trackDom(){
var observer = new MutationObserver(function(e) {
alert(e[0].type + ' ' + e[0].target.textContent);
// if (mutation.type === 'characterData') {
// if (mutation.type === 'childList') {
//GET AJAX TYPE to track what is up
});
/
var config = {attributes: true,childList: true, characterData: true, subtree: true};
if ($('#some_id').length){
observer.observe($('#some_id')[0], config);
}
}
Nodetop
# Install requirements from package. json npm i # run an app node app.js # Monitor and restart node when files change nodemon app.js # check node running ps aux | grep node
operatorstop
!= !== < <= == === > >= % return remainder + ++ - -- / * || && !
prompt()top
prompt('What is your name','Type name here');
random()top
create random numbers
between 0 and 4 // 4 not inclusive unless you round Math.random()*4 // 2.3645473638 Math.round(Math.random()*4) // round number 0-4 is inclusive between 2 and 6 Math.round(Math.random()*6)+2 // 2-6 inclusive
replace()top
newString = aString.replace("findThis","replaceWithThis");
//==============================================
//replace textarea line breaks with <br/> tags
rExp1 = /\r\n/gi;
rExp2 = /\r/gi;
rExp3 = /\n/gi;
value = document.formname.textareaname.value;
value = value.replace(rExp1,"<br/>");
value = value.replace(rExp2,"<br/>");
value = value.replace(rExp3,"<br/>");
//==============================================
//replace & < > characters ready for insert into xml
//NOTE: order of replaceing is important
rExp1 = />/gi;
value = value.replace(rExp1,">");
rExp2 = /</gi;
value = value.replace(rExp2,"<");
rExp3 = /&/gi;
value = value.replace(rExp3,"&");
rExp4 = /&/gi;
value = value.replace(rExp4,"&");
rExp5 = /</gi;
value = value.replace(rExp5,"<");
rExp6 = />/gi;
value = value.replace(rExp6,">");
setTimeout()top
call function every # milliseconds
function functionName(){
if (expression){
//do again
setTimeout("functionName()", 50);
}
}
window.open()top
window.open('http://www.eltreno.com', 'windowname',
'width=600, height=600, directories=yes,
location=yes, menubar=yes, scrollbars=yes,
status=yes, toolbar=yes, resizable=yes');
