Straight Tips: November 2018

elevateZoom (Requires jQuery)

Tuesday, November 20, 2018

JavaScript - Apply CSS Style In Scope

This method associates unique Ids to desired elements and then CSS Styles can be applied to them!

Test code here (Click)!

appendChild() in use:

<!DOCTYPE html>

<div>    <!-- _________________________________________________________ -->

<h2> 111111 </h2> <h2> 222222 </h2> <h2> 333333 </h2>
<h3> AAAAAA </h3> <h3> BBBBBB </h3> <h3> CCCCCC </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode;
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);
New_Style_El = document.createElement("style");
New_Style_El_Options = document.createTextNode('  [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:red;}  ');
New_Style_El.appendChild(New_Style_El_Options);
document.head.appendChild(New_Style_El);
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode;
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);
New_Style_El = document.createElement("style");
New_Style_El_Options = document.createTextNode('  [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:gold;}  ');
New_Style_El.appendChild(New_Style_El_Options);
document.head.appendChild(New_Style_El);
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode;
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);
New_Style_El = document.createElement("style");
New_Style_El_Options = document.createTextNode('  [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:blue;}  ');
New_Style_El.appendChild(New_Style_El_Options);
document.head.appendChild(New_Style_El);
</script>

</div>

document.write() in use:

<!DOCTYPE html>

<div>    <!-- _________________________________________________________ -->

<h2> 111111 </h2> <h2> 222222 </h2> <h2> 333333 </h2>
<h3> AAAAAA </h3> <h3> BBBBBB </h3> <h3> CCCCCC </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);      
document.write('<style> [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:red;} </style>');
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);      
document.write('<style> [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:Gold;} </style>');
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);      
document.write('<style> [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:Blue;} </style>');
</script>

</div>

Keywords:
JavaScript - Apply CSS Style In Scope
JavaScript - Elements Unique Id

Monday, November 19, 2018

JavaScript - Static Variables\Objects For Functions (IIFE Alternative)

Manually associate unique "Global_Static_Objects" to functions alternative! (Click here)

Automatically associate unique "Global_Static_Objects" to functions alternative by pre-editing scripts! (Click here)

Test code here (Click)!

<script>

var Static = [];                    //(just for test) "var" declares "Static" variable as global object
Static.x = "xxx Main Static";

var Local = [];                     //(just for test) "var" declares "Local" variable as global object
Local.x = "xxx Main Local";


var Test = (function () {     //_____________ Test(Function) _______________

var Static = [];             //"var" declares "Static" variable as static object in this function
Static.x = 1;

  return function () {

  var Local = [];           //"var" declares "Local" variable as local object in this function

  if (typeof Local.x === "undefined") {Local.x = 0};

  alert(Static.x++ + " - " + Local.x++);

  };

})();                      //_____________ Test(Function) - End _______________


Test(); Test(); Test(); Test();

alert(Static.x + " - " + Local.x);

alert(Test);

</script>

Keywords:
JavaScript - Static Variables\Objects For Functions (IIFE Alternative)
JavaScript - Static Variables For Functions (IIFE Alternative)
JavaScript - Static Objects For Functions (IIFE Alternative)

Sunday, November 18, 2018

JavaScript - String Swap (No Delimiters Required)

This method (click here) requires #@ and #! Delimiters!

The below method does not require delimiters:

Test code here (Click)!

Example1

<!DOCTYPE html>

<script>

String = "ABCD"; 

Replaced = String.replace(/./ig, function(AllMatch, Match1, Match2, MatchX, OffsetPosition, SourceString){

alert(AllMatch + " - " + Match1 + " - " + Match2 + " - " + MatchX + " - " + OffsetPosition + " - " + SourceString);

if (AllMatch === "A") {return "B"};
if (AllMatch === "B") {return "A"};
if (AllMatch === "C") {return "D"};
if (AllMatch === "D") {return "C"};

return AllMatch;

});

alert("" +
String   + " = String"   +  "\n"  +
Replaced + " = Replaced" +
"");

</script>

Example2

<!DOCTYPE html>

<script>

String = "Joe Ana Marcus Fiana"; 

Replaced = String.replace(/Joe|Ana|Marcus|Fiana/ig, function(AllMatch, Match1, Match2, MatchX, OffsetPosition, SourceString){

alert(AllMatch + " - " + Match1 + " - " + Match2 + " - " + MatchX + " - " + OffsetPosition + " - " + SourceString);

if (AllMatch === "Joe") {return "Ana"};
if (AllMatch === "Ana") {return "Joe"};
if (AllMatch === "Marcus") {return "Fiana"};
if (AllMatch === "Fiana") {return "Marcus"};

return AllMatch;

});

alert("" +
String   + " = String"   +  "\n"  +
Replaced + " = Replaced" +
"");

</script>

Example 3 - using Matched Subpatterns

<!DOCTYPE html>

<script>

String = "Joe Ana Marcus Fiana"; 

Replaced = String.replace(/(Joe)|(Ana)|(Marcus)|(Fiana)/ig, function(AllMatch, Match1, Match2, Match3, Match4, OffsetPosition, SourceString){

alert(AllMatch + " - " + Match1 + " - " + Match2 + " - " + Match3 + " - " + Match4 + " - " + OffsetPosition + " - " + SourceString);

if (Match1) {return "Ana"};
if (Match2) {return "Joe"};
if (Match3) {return "Fiana"};
if (Match4) {return "Marcus"};

return AllMatch;

});

alert("" +
String   + " = String"   +  "\n"  +
Replaced + " = Replaced" +
"");

</script>

Keywords:
JavaScript - String Swap (No Delimiter Required)
JavaScript - Word Swap (No Delimiter Required)
JavaScript - Text Swap (No Delimiter Required)
JavaScript - Replace Multiple Strings At Once

Friday, November 16, 2018

JavaScript - Static Objects For Functions

The code below is based on this code (Click for more infos)!

Test code here (Click)!

- Place functions inside the "<textarea>" element!
- Add "@@@_Create_Local_Static_Objects_@@@" inside each function and the code will automatically create a "Static" and "Local" objects for them!

The functions will be Pre-Edited then they will be written to the document (DOM)!

<!DOCTYPE html>

<textarea id="User_Script_Content">       <!-- ______________ (User_Script_Content - [TextArea] - Start) ___________ -->

        <script>

        var Local  = []; Local.x  = "xxx Main Local  xxx";
        var Static = []; Static.x = "xxx Main Static xxx";


        f(); f(); f(); f(); j(); j(); j(); j();
        f(); f(); f(); f(); j(); j(); j(); j();

        alert(Static.x + " - " + Local.x);


        function f() {    //_____ f(function) _____

        // The below line is required in order to a "Local" and "Static" objects be created for this function:
        @@@_Create_Local_Static_Objects_@@@

        if (typeof Static.x === "undefined") {Static.x = 0};
        Static.x++

        if (typeof Local.x === "undefined") {Local.x = 0};
        Local.x++

        alert("f() => " + Static.x + " - " + Local.x);

        };


        function j() {    //_____ j(function) _____

        // The below line is required in order to a "Local" and "Static" objects be created for this function:
        @@@_Create_Local_Static_Objects_@@@

        if (typeof Static.x === "undefined") {Static.x = 0};
        Static.x++

        if (typeof Local.x === "undefined") {Local.x = 0};
        Local.x++

        alert("j() => " + Static.x + " - " + Local.x);

        };

        </script>

</textarea>    <!-- ______________________ (User_Script_Content - [TextArea] - End) ____________________________ -->

<script>       <!-- ______________________ (User_Script_Content - [Pre-Edition] - Start) _______________________ -->

      //____ Get text from "User_Script_Content" <textarea> element! ____

User_Script_Content = document.getElementById("User_Script_Content").value;


      //____ Create "Local" and "Static" Objects ____

if (typeof Global_Static_Object_Next === "undefined") {Global_Static_Object_Next = 0};

User_Script_Content = User_Script_Content.replace(/@@@_Create_Local_Static_Objects_@@@/ig, function(){Global_Static_Object_Next++; return '' +
'if (typeof Global_Static_Object_' + Global_Static_Object_Next + ' === "undefined") {Global_Static_Object_' + Global_Static_Object_Next + ' = []};  \n'  + 
'var Static = Global_Static_Object_' + Global_Static_Object_Next + '; \n'      +
'var Local = [];'         +
''});

alert(User_Script_Content);


      //____ Write to document (DOM)! ____

document.write(User_Script_Content);

</script>   <!-- ____________________________ (User_Script_Content - [Pre-Edition] - End) ____________________________ -->

keyword:
JavaScript - Static Objects For Functions
JavaScript - Local Objects For Functions
JavaScript - Pre-Edit Script
JavaScript - Script Pre-Edition
JavaScript - Pre-Edit Html
JavaScript - Html Pre-Edition

Wednesday, November 14, 2018

JavaScript - Alternative for Functions Static Variables!

This method basically allows you to use "Local" object to store functions local values and "Static" object to store functions static values!

To create the functions "Static" objects, use unique global variable names based on the function name itself such as "Function_Test_Function", "Function_ScreenGet_Function", "Function_Calculate8776_Function", "Class_Function_Test_Class", etc, etc, etc ...!

<!DOCTYPE html>

<script>

var Local = [];     //(just for testing): "var" declares "Local" variable as Global and turns it into an object (= [])
var Static = [];    //(just for testing): "var" declares "Static" variable as Global and turns it into an object (= [])

Local.x = "xxx Main Local xxx"; Static.x = "xxx Main Static xxx"; Local.y = "yyy Main yyy";

Test(); Test(); Test(); Test();

alert(Local.x + " - " + Static.x + " - " + Local.y + " - " + Function_Test_Function.x);

function Test () {      //_________ Test(Function) _____________

//Creating a Global "Function_Test_Function" object! (to store this function static vars values!)
if (typeof Function_Test_Function === "undefined") {Function_Test_Function = []};

var Local = [];        //"var" declares "Local" variable as local and turns it into an object (= [])

var Static = Function_Test_Function;    //"var" declares "Static" variable as local then the reference of "Function_Test_Function" object is stored inside it!

Local.x = "xxx f() xxx ";

if (typeof Static.x === "undefined") {Static.x = 0};
Static.x++

if (typeof Local.y === "undefined") {Local.y = 0};
Local.y++

alert(Local.x + " - " + Static.x + "/" + Function_Test_Function.x + " - " + Local.y);

};


</script>

When a function returns, javascript automatically clears all its "Local" variables values!

If you need a value to be remembered between the function calls, you need to store that value in a "Static" variable of that same function!

Unfortunately, javascript does not support functions "Static" variables! (Most languages that I know support it!)

So, an alternative is:

- lets say your function name is "Test"

- inside the function, create a "global" object based on your function's name, example: "Function_Test_Function"

- inside the function, declare "Static" variable as local object by passing the reference of "Function_Test_Function" object inside it!

- now you can store static values of your function through the local "Static" object, example: Static.x, Static.y, Static.data, etc, etc

note that:

- using "Static.x" or "Function_Test_Function.x" is the same thing, but the former is more practical to use then the latter!

- both "Static" or "Function_Test_Function" variables reference the same object stored in the ram memory!

- "Static" or "Function_Test_Function" variables don't contain the object's values, they contain only a reference to an object stored in the memory!

Keywords:
JavaScript - Alternative for Functions Static Variables!

Straight Tips

jQuery

elevateZoom (Requires jQuery)

Microsoft Store (Donation)

Facebook Messenger (Donation)

Activation Code - Donation (Multiple Options)

Request Web\PHP\JavaScript\HTML Project !

Advertise On This Blog!

Ads (Reserved)