Category: Javascript

Convert PHP script to JavaScript

Convert PHP script to JavaScript

  • Add the “base-reality/php-to-javascript”: “>=0.0.3” to your project’s composer.json file:

    “require”:{ “base-reality/php-to-javascript”: “0.1.16” }

    Or the latest tagged version. The dev master should only be used for development, not production.\
  • Include the Composer SPL autoload file in your project: require_once(‘../vendor/autoload.php’);

    Call the converter: 
 $phpToJavascript = new PHPToJavascript\PHPToJavascript();
   $phpToJavascript->addFromFile($inputFilename); $jsOutput =
   $phpToJavascript->toJavascript();

$jsOutput will now contain an auto-generated Javascript version of the PHP source file.

Countdown timer in Javascript

Code to create a timer till a specific datetime.

Below is the code to create a timer till a specific datetime.

For this sample, the deadline is 5/16/2021 11:26:00

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript">

     function getTimeRemaining(endtime) {
      var d = new Date();
      var t = endtime.getTime() - d.getTime(); 

      var seconds = Math.floor((t / 1000) % 60);
      var minutes = Math.floor((t / 1000 / 60) % 60);
      var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
      var days = Math.floor(t / (1000 * 60 * 60 * 24));
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
     }

   function initializeCountdown(id, endtime) {
    var clock = document.getElementById(id); 
    var daysSpan = clock.querySelector('.days');
    var hoursSpan = clock.querySelector('.hours');
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');

   function updateTimer() {
        var t = getTimeRemaining(endtime);
       
        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
            clearInterval(timeinterval);
        }
     }
     updateTimer();

     var timeinterval = setInterval(updateTimer, 1000);
    }

    window.onload = function () {
     var deadline = new Date("5/16/2021 11:26:00"); // The datetime of the 
     deadline
     initializeCountdown('clockdiv', deadline);
  }
</script>
</head>

<body>
<form id="form1" runat="server">
   
<div id="clockdiv">
  <div style="float:left;">
    <span class="days"></span>
    <div>Days</div>
  </div>
  <div style="float:left;">
    <span class="hours"></span>
    <div>Hours</div>
  </div>
  <div style="float:left;">
    <span class="minutes"></span>
    <div>Minutes</div>
  </div>
  <div style="float:left;">
    <span class="seconds"></span>
    <div>Seconds</div>
  </div>
</div>
</form>
</body>
</html>

Output –

ECMAScript 2018 (ES9)

ES9 provides syntactic support for asynchronous iteration – synchronous iterators and asynchronous iterables, which is just like regular iterators, except that they have a next() method that returns in Promise.

The feature set of ES9 has been set by TC39 committee. Checkout the new release process here. It is basically a 5 stage process starting with Stage 0.

Stage 0: Strawman (draft proposal after brainstorming)

Stage 1: Proposal (Make the case for the solution and identify the potential challenges)

Stage 2: Draft (Describe the syntax and semantics)

Stage 3: Candidate (Indicates that further work require users feedback)

Stage 4: Finished (The edition is ready to be included in the formal ECMAScript standard)

So, whats new in ES9 –

1. Asynchronous Iteration –

Finally!!! Its there !!!

We can use await on loops.

ES9 provides syntactic support for asynchronous iteration – synchronous iterators and asynchronous iterables, which is just like regular iterators, except that they have a next() method that returns in Promise. Have a look at the detailed proposal here

for await (const l of readLines(path)) { console.log(l); }

     

2. Promise.prototype.finally –

Execution of callback functions become easy with Promise. A Promise chain can either succeed or fell into a catch exception block. Sometimes, we want to run the code regardless of the output.

With ES9, we can use finally() block that allows to add the final logic at one place regardless of the outcome.

Have a look at the detailed proposal here

function doSomething() { 
method1() 
.then(method2)
.catch(er) { console.log(er); })
.finally(() =>{ // final logic here }); }

     

3. Regex Changes –

In total, there were 4 RegExp changes –

  • s (dotAll) flag for regular expressions –

    ES9 introduces the use of s flag which match any character, including line terminators. Have a look the the detailed proposal here

 /hello.es9/s.test('hello\nes9');// true
  • RegExp named capture groups –

    Another great feature we are getting with ES9 as it improves readability and maintainability. Detailed proposal can be viewed here

 
const pattern = /(?\d{4})-(?\d{2})-(?\d{2})/u; 
const result = pattern.exec('2018-06-25'); 
// → result.groups.year === '2018' 
// → result.groups.month === '06' 
// → result.groups.day === '25'
  • RegExp Look behind Assertions –

Assertions are regular expressions that either are true or false based on the match found. ECMAScript currently have lookahead assertions that do this in forward direction. ES9 comes with an extension to lookbehind, both positive and negative. Detailed proposal can be viewed here

Positive lookbehind make sure that the pattern is always preceded by another pattern:

 
const pattern = /(?=\$)\d+/u; 
const result = pattern.exec('$45'); 
// result[0] === '45'

Negative lookbehind make sure that the pattern is not preceded by another pattern:


const pattern = /(?lt;!\$)\d+/u;
const result = pattern.exec('$45');
// → result[0] === '45'
  • RegExp Unicode Property Escapes

This feature enables us to access the Unicode character properties natively in ECMAScript regular expressions as before the developers have to depend on other libraries which adds up to the run time dependency cost. Detailed proposal can be viewed here


/\p{Script=Greek}/u.test('μ') // prints true

4. Rest/Spread Properties –

The three-dot operator (…) was introduced with ECMA2015 and has been used for array literals. ES2018 introduces rest/spread feature for object destructuring as well as arrays. Detailed proposal can be viewed here


const values = {a: 5, b: 6, c: 7, d: 8};
const {a, ...n} = values;
console.log(a); // prints 5
console.log(n); // prints {b: 6, c: 7, d: 8}

This was all about ES9.

Let’s see what they will come up with the next version.

Array.map vs Array.forEach

forEach can be used just like a traditional ‘for loop’ that iterates each of the array element once.

If you are working with JavaScript, then you must have come across these two similar looking array methods: Array.prototype.map() and Array.prototype.forEach().

Most of the developers thinks that Array.map function and forEach for an Array is the same, but it is not. Lets see some examples:
1. Array.prototype.forEach
forEach can be used just like a traditional ‘for loop’ that iterates each of the array element once.

let arrayElements = ['A','C','D'];  
arrayElements.forEach((ele)=>{  
  console.log(ele);  
 })

The above example will generate the following –
A
C
D

2. Array.prototype.map
The map() function creates a new Array with the results of calling a function for every element of the calling array.

let arrayElements = [1, 4, 6];  
var result = arrayElements .map((ele)=>{  
  return (ele * 2);  
});  
console.log(result);

The output of the code is:
[ 2, 8, 12 ]
In the above example we are iterating through each element of Array and multiplying it by 2.

How to stop an event propagation in javascript?

You can stop the event propagation by doing this – 

function stopEventPropagation(event) {

if (event.stopPropagation) {
event.stopPropagation();   // W3C model
} else {
event.cancelBubble = true; // IE model
}

}