Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Tuesday, August 8, 2017

Javascript Memory Limit and Usage in Chrome



<script>
// Thank you stackoverflow user B. Gruenbaum
console.log('performance.memory.jsHeapSizeLimit='+performance.memory.jsHeapSizeLimit);
// will give you the JS heap size
console.log('performance.memory.usedJSHeapSize='+performance.memory.usedJSHeapSize);
// how much you're currently using
</script>

Slightly off topic from post title, the following may be an issue in the problem set being thought on in regards to memory limits: JSON object sizes.
In my scenario I had static reference data in CSV format. I converted to JSON files ( e.g. materials.json).  Here is standalone PHP script you can place in directory of JSON files and get file sizes and javascript memory info all together.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="format-detection" ></meta>
<title>JS Memory Size</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<?php
foreach(glob('*.json') as $file) {
   print "<script type='text/javascript' src='".$file."' ></script>".PHP_EOL;
}
?>

<script>
$(document).ready(function(){
  console.log('performance.memory.jsHeapSizeLimit='+performance.memory.jsHeapSizeLimit);
  // will give you the JS heap size
  console.log('performance.memory.usedJSHeapSize='+performance.memory.usedJSHeapSize);
  // how much you're currently using
  $('#jsHeapSizeLimit').text(performance.memory.jsHeapSizeLimit);
  $('#usedJSHeapSize').text(performance.memory.usedJSHeapSize);
});
</script>
<style>
td {
align:left;
border:1px dotted #000000;
padding:5px;
}
</style>
</head>
<body>
<h1>JS Memory Size</h1>
<table><tr>
<th>Size</th><th>Info</th>
</tr>
 <td id='jsHeapSizeLimit'></td><td>Size Limit</td>
</tr><tr>
 <td id='usedJSHeapSize'></td><td>Currently Used</td>
</tr>
<?php
foreach(glob('*.json') as $file) {
   print "<tr><td>".filesize($file)."</td><td>".$file."</td></tr>".PHP_EOL;
}
?>
</table>
</body>
</html>
<?php
die();
?>

Tuesday, April 4, 2017

Force use of HTTPS with Javascript

<script>
location.protocol=='https:' ? console.log(window.location.href) : replace('https:'+location.hostname+location.pathname);
</script>

Friday, March 17, 2017

See inventory of function in javascript files

Place this script in same directory your javascript files are, view in browser.
(and yes I know there is grep -n 'function' *.js but I like things I can see in browser)
 <?php
header("Content-Type:text/plain") ;
$files=glob('*.js');
$searchfor = 'function';
foreach($files as $file) {
print $file.PHP_EOL;
$contents=file_get_contents($file);
$pattern = preg_quote($searchfor, '/');
$pattern = "/^.*$pattern.*\$/m";
if(preg_match_all($pattern, $contents, $matches)){
  print count($matches[0])." total functions".PHP_EOL;
  print implode("\n", $matches[0]);
}
}
?>

Example out:

main.js
37 total functions
function checkExists(myVar) {
function consoleLogTime(input) {
function debugMsg(input) {
function getQuerystring(key, default_)
function selectCustomer(input) {
function listCreate(arrayValues, arrayText, myClass) {
function optionListCreate(arrayValues, arrayText) {
function validateEmail(x) {
function checkEmailExists(email) {
      success: function(result) {
      error: function(result) {
function passwordReset(email) {
      success: function(result) {
      error: function(result) {
function listArray(myArray) { 
function getJsonTable(url, table, tag) {
 $.getJSON(url+'?table='+table, function(data){
        $.each(data, function(index,item) {
$(document).ready(function(){
     success: function(result) {
     error: function(result) {
$('#signin').click(function() {
$('#signup').click(function() {
$("#passwordReset").click(function() { 
$("#emailB").blur(function() { 
$('.mytype').click(function() {
$("#passwordconfirmB").keyup(function() { 
$("#passwordconfirmB").blur(function() { 
$("#workorder").ready(function() { 
$("select").ready(function() { 
$("#bids").change(function() { 
$("#about").click(function() { 
$('.submit').click(function() {
      success: function(result) {
      error: function(result) {
$("#selectacustomer").click(function() { 
$(".customerSelect").click(function() { 


Monday, January 9, 2017

Javascript misterClean string cleaner

function misterClean(x) {
   x = x.replace(/^\s+|\s+$/gm,''); // remove end whitespace
   x = x.replace(/(\r\n|\n|\r)/gm,""); // remove line breaks
   return x;
}

Tuesday, April 5, 2016

Make Sure Element is Visible and Displayed : Javascript

function makeVisible(id) {
 if($('#'+id).css('display') == 'none') {
 $('#'+id).css('display','block');
 }
 if($('#'+id).css('visibility') == 'hidden') {
 $('#'+id).css('visibility','visible');
 }
 console.log('makeVisible visibility '+$('#'+id).css('visibility'));
 console.log('makeVisible display  '+$('#'+id).css('display'));
}

function testPreviewImage() {
 makeVisible('Preview_Div');
 makeVisible('Preview_Image');
 $('#Preview_Div').zIndex(16777261);
 $('#Preview_Image').zIndex(16777271);
}

Tuesday, December 22, 2015

Smooth expansion of DIV with jQuery

var bigWidth=800;
$("#map").width() == bigWidth ?
 $("#map").fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).animate({ height: 400, width: 400 }) :
 $("#map").fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).animate({ height: 400, width: 800 });

Tuesday, December 15, 2015

Javascript padding


 function pad(str, character, max, side, visibility) {
  str = str.toString();
  console.log('inside pad: '+str);
  var pad;
  var output;
  pad='';
  for (var i=str.length;i<max;i++ ) {
       pad = pad + character;
  }
  pad="<span style='visibility:"+ visibility + "'>" + pad + "</span>";
  side=='left'?  output=pad+str : output=str+pad ;
  return output;
 }

input=$('#serialnumber').text(); 
$('#serialnumber').html(  pad( input, 'F', 16, 'right', 'hidden')  );

Friday, October 30, 2015

Javascript: If undefined or null or string length equals zero return false

function checkExists(myVar) {

 if (typeof myVar === 'undefined')  { return false;  }
 if ( myVar === null )      { return false;  }
 if ( myVar.length == 0)            { return false; } 
 
 return true;
 
}

Friday, July 17, 2015

Class.each with ajax for each

$('.routeInfo').each(function(){
    // 
    fid = $(this).attr("fid");
    id = $(this).attr("id");
    uniqueID = $(this).attr("uniqueID");
    $.ajax({
            url: '/route.php',
            type: 'GET',
            data: { fid: fid , user: 'fred' } ,
            success: function (response ) {
                 if(response.length > 5) {
                        $("#" + id).html('ROUTE STATUS: '+response);                   
                                     }  else {
                                     $("#" + id).html('ROUTE STATUS: Not Routed');
                                       }
            },
            error: function () { console.log('ajax error'); }
        });
     });  

Thursday, July 16, 2015

Button click animation

$("button").click(function(){
 this.animate({ opacity: '0.1'}, "slow" );
 this.animate({ opacity: '1.0'}, "fast");
});

Tuesday, February 10, 2015

Javascript Element Diagnostic Function

function elementResearch(elementType, searchVal) {
 // e.g. elementType = 'input'
 console.log(" elementResearch begin in element type " + elementType);
 $('body').find(elementType).each(
           function(unusedIndex, child) {
               if(child.value==searchVal && searchVal!='') { 
                  console.log("___ELEMENTRESEARCH FOUND THE VALUE YOU ARE TESTING!!!___"); 
                  console.log("the child.name you are wanting is: " + child.name); 
                  $(child).each(function() {
               $.each(child.attributes, function() {
               if(this.value!='hidden') {
                         console.log( elementType + " || attribute name:" +  this.name + " || attribute value:" +this.value);
                 }
                 }); // each attr
              }); // each child
            } // if big match
                  if(searchVal=='') {
                  $(child).each(function() {
                  $.each(child.attributes, function() {
                  console.log( elementType + " || attribute name:" +  this.name + " || attribute value:" +this.value);
               }); // each attr  
                }); // each child
                } // if searchVal==""
       }); // each input
} // function



elementResearch('input', 'TEST');

Wednesday, December 17, 2014

Javascript jQuery Scroll Event Listener Print Scroll Position to Console Log

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    console.log(scroll);
});

Save scroll position for reload or ajax call for new content

var scroll = 0;
scroll = $(window).scrollTop();
console.log(scroll); 
location.reload();
$(window).scrollTop(scroll);

Thursday, December 4, 2014

Iterating over all cookies and local storage

console.log('COOKIES LIST BEGIN');
var theCookies = document.cookie.split(';');
 for (var i = 1 ; i <= theCookies.length; i++) {
        console.log(theCookies[i-1]);
    }
console.log('COOKIES LIST END');
console.log('localStorage LIST BEGIN');
for(var i in localStorage) {
       console.log(localStorage[i]);
        }

 for(var i=0, len=localStorage.length; i " + value);
    if(key == 'GetSystemStatus') {
            var bill = value.search(/ bill=\"8\" /);
            console.log(bill);
            bill != -1 ? console.log('did NOT find') : console.log('found it'); }
        }
        } 

Wednesday, November 12, 2014

jQuery. Get ID of each element in a class using .each

$('.myClassName').each(function() {
    console.log( this.id );
});

Thursday, September 4, 2014

Javascript counter and location.reload


 var interval = "";
 var incrementVar = 0;
 function increment(){
        incrementVar++;
        console.log(incrementVar);
        if(incrementVar>30) {
    location.reload(); 
    window.clearInterval(interval);
    incrementVar = 0;
         }
          
    }

   $(document).ready(function(){
    interval = setInterval( increment, 1000);
   }) 

Friday, October 18, 2013

Validate email with jQuery and my own hack


// validate email function, after function other code relative to its use
// 

function validateEmail(x)
{
var tld="";
console.log(x);
var splitAt = x.split("@");
if(!splitAt[1]) {return false;}
var username = splitAt[0];
var domainTLD = splitAt[1].split(".");
var domain=domainTLD[0];
for(var i=1;i<5;i++) {
   if(domainTLD[i]) { console.log(i +" "+ domainTLD[i]); tld=domainTLD[i] ;}
}
var usernameLength = username.length;
var domainLength = domain.length;
var tldLength = tld.length;
msg=username;
console.log(msg);
msg=domain;
console.log(msg);
msg=tld;
console.log(msg);
msg=usernameLength;
console.log(msg);
msg=domainLength;
console.log(msg);
msg=tldLength;
console.log(msg);
if ( tldLength < 3 || tldLength > 3 || domainLength < 2 || usernameLength < 1 || /\d/.test(tld) )
  {
  console.log(x + " not a valid e-mail address");
  return false;
  } 
else {
  return true;
     }
}

// just some vars not pertinent to email validation
var timedFade = 1000;
var msg="";

// document ready code block below
 
$(document).ready(function(){
msg="document.ready"; console.log(msg); msg="";

$( "#email" ).blur(function() {
var email=$( "#email" ).val();
console.log(email);
 if (validateEmail(email)) { 
  console.log("good email");  
  $("#email-status-message").text("");
  $("#email-status-message").fadeOut(timedFade); 
       } 
else { 
  console.log("bad email"); 
  $("#email-status-message").text("please enter valid email");  
  $("#email-status-message").fadeIn(timedFade); 
 }
});


}) 

Saturday, July 14, 2012

Javascript Object Detection

Example objects used to "rough" detect a particular browser
Scheme Detects
document.getElementById Firefox1+, IE5+, Opera7+, Safari, and most modern browsers in general.
window.getComputedStyle Firefox1+ and Opera 8+, and Safari 2+
window.globalStorage Firefox2+
window.globalStorage && window.postMessage Firefox3+
document.getElementsByClassName Firefox3+ and Opera 9.5+, and Safari 3+
document.querySelector Firefox3.5+, IE8+ (in standards compliant mode only), Opera9.5+, and Safari 3+
document.all IE4+
window.attachEvent IE5+
window.createPopup IE5.5+
document.compatMode && document.all IE6+
window.XMLHttpRequest IE7+, Firefox1+, and Opera8+
window.XMLHttpRequest && document.all

or:

document.documentElement && typeof document.documentElement.style.maxHeight!="undefined"

IE7+

Note: First scheme will fail if visitor explicitly disables native xmlHTTPRequest support (under Toolbar-> Internet Options-> Advanced). The second one will not.

XDomainRequest IE8+
document.documentMode IE8+ (detects IE8 in a specific document mode, such as standards complaint).

Because IE8 can render a page in various different modes depending on the page's doctype plus the presence of certain HTML elements, documentMode is an IE8+ property that returns a different number depending on the mode the page is being rendered in. They are:

5 Page is running in IE5 mode (aka "quirks mode").
7 Page is running in IE7 standards mode.
8 Page is running in IE8 standards mode.
9 Page is running in IE9 standards mode.

This means that even though the user is using IE8 or IE9, for example, if a webpage is missing a valid doctype, document.documentMode will return 5.

XDomainRequest && window.msPerformance IE9+

window.msPerformance is a IE9+ property you can use to detect IE9. There are other IE9 only window properties you can use in place of it as well for the purpose. See a list here.

window.opera Opera (any version)

* Since Opera by default also identifies itself as IE (apart from Opera), with support for many of IE's proprietary objects, the IE detection schemes above will also return true for Opera. Use "window.opera" in combination to filter out Opera browsers.

if (document.documentElement && typeof document.documentElement.style.maxHeight!="undefined")
alert("You're using IE7")

The following detects a page using IE8 standards compliant mode:

if (document.documentMode==8)
alert("IE8 standards mode")

Sunday, July 1, 2012

Music Frequencies as Javascript Variables

<script type="text/javascript" >

var notes = [ 
 ['C' , '16.35'] , 
 ['C#' , '17.32'] , 
 ['D' , '18.35'] , 
 ['Eb' , '19.45'] , 
 ['E' , '20.60'] , 
 ['F' , '21.83'] , 
 ['F#' , '23.12'] , 
 ['G' , '24.50'] , 
 ['G#' , '25.96'] , 
 ['A' , '27.50'] , 
 ['Bb' , '29.14'] , 
 ['B' , '30.87'] , 
 ['C' , '32.70'] , 
 ['C#' , '34.65'] , 
 ['D' , '36.71'] , 
 ['Eb' , '38.89'] , 
 ['E' , '41.20'] , 
 ['F' , '43.65'] , 
 ['F#' , '46.25'] , 
 ['G' , '49.00'] , 
 ['G#' , '51.91'] , 
 ['A' , '55.00'] , 
 ['Bb' , '58.27'] , 
 ['B' , '61.74'] , 
 ['C' , '65.41'] , 
 ['C#' , '69.30'] , 
 ['D' , '73.42'] , 
 ['Eb' , '77.78'] , 
 ['E' , '82.41'] , 
 ['F' , '87.31'] , 
 ['F#' , '92.50'] , 
 ['G' , '98.00'] , 
 ['G#' , '103.8'] , 
 ['A' , '110.0'] , 
 ['Bb' , '116.5'] , 
 ['B' , '123.5'] , 
 ['C' , '130.8'] , 
 ['C#' , '138.6'] , 
 ['D' , '146.8'] , 
 ['Eb' , '155.6'] , 
 ['E' , '164.8'] , 
 ['F' , '174.6'] , 
 ['F#' , '185.0'] , 
 ['G' , '196.0'] , 
 ['G#' , '207.7'] , 
 ['A' , '220.00'] , 
 ['Bb' , '233.1'] , 
 ['B' , '246.9'] , 
 ['C' , '261.6'] , 
 ['C#' , '277.2'] , 
 ['D' , '293.7'] , 
 ['Eb' , '311.1'] , 
 ['E' , '329.6'] , 
 ['F' , '349.2'] , 
 ['F#' , '370.0'] , 
 ['G' , '392.0'] , 
 ['G#' , '415.3'] , 
 ['A' , '440.0'] , 
 ['Bb' , '466.2'] , 
 ['B' , '493.9'] , 
 ['C' , '523.3'] , 
 ['C#' , '554.4'] , 
 ['D' , '587.3'] , 
 ['Eb' , '622.3'] , 
 ['E' , '659.3'] , 
 ['F' , '698.5'] , 
 ['F#' , '740.0'] , 
 ['G' , '784.0'] , 
 ['G#' , '830.6'] , 
 ['A' , '880.0'] , 
 ['Bb' , '932.3'] , 
 ['B' , '987.8'] , 
 ['C' , '1047'] , 
 ['C#' , '1109'] , 
 ['D' , '1175'] , 
 ['Eb' , '1245'] , 
 ['E' , '1319'] , 
 ['F' , '1397'] , 
 ['F#' , '1480'] , 
 ['G' , '1568'] , 
 ['G#' , '1661'] , 
 ['A' , '1760'] , 
 ['Bb' , '1865'] , 
 ['B' , '1976'] , 
 ['C' , '2093'] , 
 ['C#' , '2217'] , 
 ['D' , '2349'] , 
 ['Eb' , '2489'] , 
 ['E' , '2637'] , 
 ['F' , '2794'] , 
 ['F#' , '2960'] , 
 ['G' , '3136'] , 
 ['G#' , '3322'] , 
 ['A' , '3520'] , 
 ['Bb' , '3729'] , 
 ['B' , '3951'] , 
 ['C' , '4186'] , 
 ['C#' , '4435'] , 
 ['D' , '4699'] , 
 ['Eb' , '4978'] , 
 ['E' , '5274'] , 
 ['F' , '5588'] , 
 ['F#' , '5920'] , 
 ['G' , '6272'] , 
 ['G#' , '6645'] , 
 ['A' , '7040'] , 
 ['Bb' , '7459'] , 
 ['B' , '7902']  
                  ] ;

</script>

Monday, May 14, 2012

Walk DOM and report ID's and Parents

function walkReport() {
$("body").find("*").andSelf().each(function() {
    var parent = $(this).parent().attr("id");
    console.log(this.nodeName+" "+this.id+" and my parent is "+parent);   
});
}

Saturday, November 21, 2009

Javascript Popup

Within header of HTML document that launches the popup:
<script type="text/javascript">
var theURL = '/global_files/sending.php'
var width  = 200;
var height = 50;
function popWindow() {
newWindow = window.open(theURL,'newWindow','toolbar=no,menubar=no,left=200,top=300,resizable=no,scrollbars=no,status=no,location=no,width='+width+',height='+height);
}
 </script>
/global_files/sending.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META NAME="Author" CONTENT="Lance Miller, this.is.lance.miller@gmail.com">
<title>
Sending
</title>
<style type="text/css" media="all">
  @import url("<?php echo ${css_remote}; ?>");
</style>
<style type="text/css">
body {
background:#CCCCCC;
color:#000000;
}
</style>
<script type="text/javascript">
var howLong = 3000;
t = null;
function closeMe(){
t = setTimeout("self.close()",howLong);
}

window.onload=function() {
closeMe()
self.focus()
}
</script>
</head>
<body>
sending please wait...
</body>
</html>