PHP Intl Class Datetime Defaults Tutorial

PHP Intl Class Datetime Defaults Tutorial

PHP Intl Class Datetime Defaults Tutorial

Onto the recent PHP Intl Class Datetime Tutorial start to a PHP Current Datetime Intl Using Internationalization web application we see a way forward improving …

  • default Locale and TimeZone presented …
    Locale
    <?php

    $defloc=Locale::acceptFromHttp($_SERVER['HTTP_ACCEPT_LANGUAGE']);

    ?>
    Timezone
    <?php

    $deficc=explode('_', str_replace('_posix','',$defloc))[-1 + sizeof(explode('_', str_replace('_posix','',$defloc)))];
    $yourtzlist="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('timezone').value=this.value; }\" id=tzsel><option id=\"toptone\" value=''>Optionally select a TimeZone below ...</option><option value='Africa/Abidjan' data-geo='5.31666,-4.03334,GMT,CI,+0'>Africa/Abidjan</option><option value='Africa/Accra' data-geo='5.55,-0.21667,GMT,GH,+0'>Africa/Accra</option><option value='Africa/Addis_Ababa' data-geo='9.03333,38.7,EAT,ET,+3'>Africa/Addis_Ababa</option><option value='Africa/Algiers' data-geo='36.78333,3.05,CET,DZ,+1'>Africa/Algiers</option> ... blah ... blah ... blah ... </select>";

    if (strpos($yourtzlist, ',' . $deficc . ',') !== false) {
    $ourtz=explode('<', explode('>', explode(',' . $deficc . ',', $yourtzlist)[1])[1])[0];
    } else {
    $ourtz="''"; //date.timezone; // ($_SERVER['TZ'] ?? (file_get_contents('/etc/timezone') ?: file_get_contents('/etc/localtime')))
    }

    ?>
  • add accompanying dropdown ways to select values from a list of what is available on Locale and TimeZone (as above) and Calendar …
    <?php

    $calsel='';
    if (1 == 1) {
    $bundle=new ResourceBundle('','ICUDATA');
    $cnames=[];
    $calendars=$bundle->get('calendar');
    foreach ($calendars as $n=>$v) {
    if ($calsel == '') {
    $calsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('calendar').value=this.value; }\" id=calsel><option value=''>Optionally select a Calendar system below ...</option></select>";
    }
    $calsel=str_replace("</select>", "<option value='" . $n . "'>" . $n . "</option></select>", $calsel);
    $cnames[]=$n;
    }
    }

    $locsel='';
    $arrl=ResourceBundle::getLocales('');
    for ($df=0; $df<sizeof($arrl); $df++) {
    if (strpos(($arrl[$df] . '_'), '_') !== false) { //} && strpos($arrl[$df], '0') === false) {
    if ($locsel == '') {
    $locsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('locale').value=tzdef(this.value); }\" id=locsel><option id=\"loptone\" value=''>Optionally select a Locale below ...</option></select>";
    }
    $locsel=str_replace("</select>", "<option value='" . $arrl[$df] . "'>" . $arrl[$df] . "</option></select>", $locsel);
    }
    }

    ?>
  • change input type=text placeholder reflect any previously selected Locale and TimeZone and/or Calendar …
    <?php echo ”

    echo "<h1>Show Current Time</h1><br><h3>RJM Programming - December, 2024</h3><br><h4>As per (white background textboxes optional) ...</h4><br><br><form method=GET onsubmit=\"if (document.getElementById('calendar').value.trim() != '') { document.getElementById('calendar').name='calendar'; } if (document.getElementById('locale').value.trim() == '' || document.getElementById('timezone').value.trim() == '') { return false; } return true;\" action=\"./i_eg.php\">
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:yellow; id=locale name=locale placeholder=" . (isset($_GET['locale']) ? urldecode($_GET['locale']) : (isset($_POST['locale']) ? urldecode($_POST['locale']) : $defloc)) . " value='' title=Locale></input> " . $locsel . "
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:yellow; id=timezone name=timezone placeholder=" . (isset($_GET['timezone']) ? urldecode($_GET['timezone']) : (isset($_POST['timezone']) ? urldecode($_POST['timezone']) : $ourtz)) . " value='' title=TimeZone></input> " . $yourtzlist . "
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:white; id=calendar placeholder=" . (isset($_GET['calendar']) ? urldecode($_GET['calendar']) : (isset($_POST['calendar']) ? urldecode($_POST['calendar']) : "gregorian")) . " value='' title=Calendar></input> " . $calsel . "
    <br><br><input style=background-color:lightgreen; type=submit value=Display></input>
    </form>
    ";

    “; ?>

… and regarding Locale selections take the opportunity to gather up to the top of Locale and TimeZone dropdowns any options relevant to any Locale first selected …

<?php echo ”

<scri" . "pt type=text/javascript>
var ctynames=\"" . str_replace("\n","",$ctynames) . "\";
var canmakenothing=false, firstloc='';

function tzdef(inloc) { // wrapper around Locale dropdown selected value
var inicc=inloc.replace(/\-/g,'_').split('_')[eval(-1 + inloc.replace(/\-/g,'_').split('_').length)];
var jnicc=inicc;
var newtstuff='', newlstuff='', newts=0, newls=0, tvalis='';
if (ctynames.indexOf(\" value='\" + inicc + \"'>\") != -1) {
jnicc=ctynames.split(\" value='\" + inicc + \"'>\")[1].split('<')[0];
}
if (document.getElementById('timezone').value == '' && inicc.trim() != '' && inicc == inicc.toUpperCase() && eval('' + inicc.length) == 2) {
var tzoh=document.getElementById('tzsel').innerHTML;
var aftertopt=document.getElementById('toptone').outerHTML;
var tzloh=document.getElementById('locsel').innerHTML;
var afterlopt=document.getElementById('loptone').outerHTML;
var tzs=tzoh.split(',' + inicc + ',');
if (eval('' + tzs.length) > 1) {
//document.getElementById('timezone').value=tzs[1].split('>')[1].split('<')[0];
tvalis=tzs[1].split('>')[1].split('<')[0];
newtstuff+='<option value=\"' + tvalis + '\">' + tvalis + '</option>';
for (newts=1; newts<eval('' + tzs.length); newts++) {
if (tzs[newts].split('>')[1].split('<')[0] != tvalis) {
newtstuff+='<option value=\"' + tzs[newts].split('>')[1].split('<')[0] + '\">' + tzs[newts].split('>')[1].split('<')[0] + '</option>';
}
}
tzs=tzloh.split('_' + inicc + '\"');
if (eval('' + tzs.length) > 1) {
newlstuff+='<option value=\"' + inloc + '\">' + inloc + '</option>';
for (newls=1; newls<eval('' + tzs.length); newls++) {
if (tzs[newls].split('>')[1].split('<')[0] != inloc) {
newlstuff+='<option value=\"' + tzs[newls].split('>')[1].split('<')[0] + '\">' + tzs[newls].split('>')[1].split('<')[0] + '</option>';
}
}
}
}
if (tzoh.indexOf(aftertopt) != -1 && newtstuff != '') {
document.getElementById('tzsel').innerHTML=aftertopt.replace(' id=', ' data-id=').replace(' value=\"', ' value=\" ').replace(' a Time', ' ' + jnicc + ' Time') + newtstuff + aftertopt + tzoh.split(aftertopt)[1];
}
if (tzloh.indexOf(afterlopt) != -1 && newlstuff != '') {
document.getElementById('locsel').innerHTML=afterlopt.replace(' id=', ' data-id=').replace(' value=\"', ' value=\" ').replace(' a Locale', ' ' + jnicc + ' Locale') + newlstuff + afterlopt + tzloh.split(afterlopt)[1];
}
if (tvalis != '') { document.getElementById('timezone').value=tvalis; }
document.getElementById('locsel').value=inloc;
firstloc=inicc;
canmakenothing=true;
}
if (document.getElementById('tzsel').value == ' ' && canmakenothing) {
if (inicc != firstloc) {
document.getElementById('tzsel').value='';
}
}
return inloc.replace(/\-/g,'_');
}
</scr" . "ipt>

“; ?>

… containing an ISO-3166 2 letter Country Code at it’s end, mentioning that country’s name in that first option of the TimeZone dropdown, so that some users will see a Country Name in the mix, adding to relatability, perhaps.

We feel this considerably improves the User Experience using a changed “second draft” PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Tutorial is shown below.

PHP Intl Class Datetime Tutorial

PHP Intl Class Datetime Tutorial

We’re back revisiting the PHP intl “Internationalization” class mentioned in “the AlmaLinux install feeling” PHP Mbstring Multibyte String and Intl Class Tutorial

Reading a bit, we cottoned onto three data items being central to Datetime PHP intl usage being …

  1. locale
  2. timezone
  3. calendar … optional

… and, so, we’re starting our “learning curve” (we got great help from this excellent website developing …

<?php

if (isset($_GET['locale']) && isset($_GET['timezone']) && isset($_GET['calendar'])) {
$DateTime = new DateTime();
$IntlDateFormatter = new IntlDateFormatter(
urldecode($_GET['locale']) . '@calendar=' . urldecode($_GET['calendar']),
IntlDateFormatter::FULL,
IntlDateFormatter::FULL,
urldecode($_GET['timezone']),
IntlDateFormatter::TRADITIONAL);

echo '<p>' . $IntlDateFormatter->format($DateTime) . '</p><br><br>';
}

?>

…) in today’s “first draft” “proof of concept” offering here, as a PHP web application, you can also try below …


Previous relevant PHP Mbstring Multibyte String and Intl Class Tutorial is shown below.

PHP Mbstring Multibyte String and Intl Class Tutorial

PHP Mbstring Multibyte String and Intl Class Tutorial

We’re revisiting the PHP Mbstring Multibyte String Primer Tutorial of the past to see where we stand now with PHP 8 and …

  • mbstring “Multibyte String” extension … and …
  • intl “Internationalization Functions” extension

… and discovered that we can happily now have a chance incorporating these functionalities into PHP serverside logic into the future. We tested this with a tweaked mbstring_test.php “old way” live run and “new way” live run via the writing of a couple of “proof of concepts” …


Previous relevant PHP Mbstring Multibyte String Primer Tutorial is shown below.

PHP Mbstring Multibyte String Primer Tutorial

PHP Mbstring Multibyte String Primer Tutorial

Our (Mac OS X laptop) local MAMP web server is an Apache/PHP/MySql web server. In this environment you can find out a lot with some PHP code as per …

<?php phpinfo(); ?>

… and if, in doing this, you find a reference to the “mbstring” Multibyte String Information functionality existing, you are a lucky candidate to introduce some internationalization code into your PHP code, for those occasions where the destination language uses a UTF-8 character set where individual characters can not be described by the ascii character set from decimal 0 to decimal 255. In other words, it takes more than one byte to describe each character of the language. There are many languages like this, a few being the Chinese languages, Japanese and Korean.

We followed a lot of the advice of the very useful link (thanks) to create some PHP called …

… where we show what we always suspected but were too shy to ask, and didn’t flesh it out before … doh! … you can’t split a Chinese phrase’s characters into their individual characters and expect those characters individually translated bring you back to the sense of the Chinese phrase to start with.

So we take the Chinese phrase 火车票 (which translates into English as “Train tickets” … and we thank Google Translate for help with all this) and use PHP mbstring’s mb_str_split to properly split the Chinese into its constituent multibyte (UTF-8) characters (and along the way, show that PHP str_split messes up this same task, as you’d probably guess would happen), and then translate all these into English using Google Translate, as an intellectual exercise.

If this exercise makes you …

  • a) fall on the floor laughing
  • b) hit a gong with a huge hammer
  • c) cook up some deep fried dumplings
  • d) put the left chopstick in the right ear and the right chopstick in the left ear (please ask for adult supervision) … translation: do not do this
  • e) while reading you sweep the cat under the rug (no animals were harmed in the making of this blog posting)

… then we’re here to tell you that you need to take a Bex and have a lie down.

We are just showing in PHP that if the mbstring functionality is available to you, that the mbstring library of functionality can help with some Internationalization issues you may be grappling with and that this PHP code you could try via this live run link.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Making of iPhone Videos Play Around the Traps Tutorial

Making of iPhone Videos Play Around the Traps Tutorial

Making of iPhone Videos Play Around the Traps Tutorial

Especially as far as video creation goes with the set of web browser brands, on mobile and non-mobile platforms, going around, it can be valid to ask …

Does it play everywhere?

… because it’s surprising what can arise sometimes.

During last week we had one happen, where our …

  • original MOV video the iPhone (Camera app in Video mode) created … and we AirDroped to MacBook Air (macOS) …
  • converted via (macOS command line) …

    ffmpeg -i IMG_2910.MOV squidgy.m4v

  • and then played, online, via …

    <video style="width:100%;" controls><source type=video/mp4 src=/squidgy.m4v></source></video>

    “crashed and burned” just, quietly, didn’t play on any Safari incarnation of web browser, though did for Google Chrome, for example

… so annoying!

We asked the Open Source community, no doubt, and we liked this great advice, to, at first, try (on macOS command line) …


ffmpeg -i IMG_2910.MOV -c:v libx264 -pix_fmt yuv420p -profile:v main -level:v 3.1 -an squidgy.m4v

… creating a different set of problems, until we went …


ffmpeg -i IMG_2910.MOV -c:v libx264 -pix_fmt yuv420p -profile:v main -level:v 3.1 -an squidgy.mp4

… teamed with the blog posting video playing HTML …


<video style="width:100%;" controls><source type=video/mp4 src=/squidgy.mp4></source></video>

… as per …

… instead, to make everyone browser happy (as well as any readers of HTML/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial who persisted)!

Yes, but thinking on it, those early readers will have noticed audio present on that previous video incarnation. We wanted to get it back, and it contextualizes things. Well, we went back to the source (but didn’t ask any horses) to use ffmpeg to extract an audio “track” if you will, via …


ffmpeg -i IMG_2910.MOV squidgy.m4a

… and uploaded this, then looked for help and found this great link, thanks, getting us to …


<video id=myvideo style=width:95%; controls>
<source type=video/mp4 src=/squidgy.mp4></source>
<audio id=myaudio>
<source type=audio/mp4 src=/squidgy.m4a></source></audio>
<script>
// Thanks to https://stackoverflow.com/questions/6433900/syncing-html5-video-with-audio-playback
var myvideo=null, myaudio=null, change_time_state=true;
function syncit() {
myvideo = document.getElementById("myvideo");
myaudio = document.getElementById("myaudio");
change_time_state = true;
myvideo.onplay = function(){
myaudio.play();
if(change_time_state){
myaudio.currentTime = myvideo.currentTime;
change_time_state = false;
}
}
myvideo.onpause = function(){
myaudio.pause();
change_time_state = true;
}
}
setTimeout(syncit, 5000);
</script>
</video>

… as per …

… to help, more, with context.

If this was interesting you may be interested in this too.

Posted in eLearning, Operating System, Photography, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

PHP Intl Class Datetime Tutorial

PHP Intl Class Datetime Tutorial

PHP Intl Class Datetime Tutorial

We’re back revisiting the PHP intl “Internationalization” class mentioned in “the AlmaLinux install feeling” PHP Mbstring Multibyte String and Intl Class Tutorial

Reading a bit, we cottoned onto three data items being central to Datetime PHP intl usage being …

  1. locale
  2. timezone
  3. calendar … optional

… and, so, we’re starting our “learning curve” (we got great help from this excellent website developing …

<?php

if (isset($_GET['locale']) && isset($_GET['timezone']) && isset($_GET['calendar'])) {
$DateTime = new DateTime();
$IntlDateFormatter = new IntlDateFormatter(
urldecode($_GET['locale']) . '@calendar=' . urldecode($_GET['calendar']),
IntlDateFormatter::FULL,
IntlDateFormatter::FULL,
urldecode($_GET['timezone']),
IntlDateFormatter::TRADITIONAL);

echo '<p>' . $IntlDateFormatter->format($DateTime) . '</p><br><br>';
}

?>

…) in today’s “first draft” “proof of concept” offering here, as a PHP web application, you can also try below …


Previous relevant PHP Mbstring Multibyte String and Intl Class Tutorial is shown below.

PHP Mbstring Multibyte String and Intl Class Tutorial

PHP Mbstring Multibyte String and Intl Class Tutorial

We’re revisiting the PHP Mbstring Multibyte String Primer Tutorial of the past to see where we stand now with PHP 8 and …

  • mbstring “Multibyte String” extension … and …
  • intl “Internationalization Functions” extension

… and discovered that we can happily now have a chance incorporating these functionalities into PHP serverside logic into the future. We tested this with a tweaked mbstring_test.php “old way” live run and “new way” live run via the writing of a couple of “proof of concepts” …


Previous relevant PHP Mbstring Multibyte String Primer Tutorial is shown below.

PHP Mbstring Multibyte String Primer Tutorial

PHP Mbstring Multibyte String Primer Tutorial

Our (Mac OS X laptop) local MAMP web server is an Apache/PHP/MySql web server. In this environment you can find out a lot with some PHP code as per …

<?php phpinfo(); ?>

… and if, in doing this, you find a reference to the “mbstring” Multibyte String Information functionality existing, you are a lucky candidate to introduce some internationalization code into your PHP code, for those occasions where the destination language uses a UTF-8 character set where individual characters can not be described by the ascii character set from decimal 0 to decimal 255. In other words, it takes more than one byte to describe each character of the language. There are many languages like this, a few being the Chinese languages, Japanese and Korean.

We followed a lot of the advice of the very useful link (thanks) to create some PHP called …

… where we show what we always suspected but were too shy to ask, and didn’t flesh it out before … doh! … you can’t split a Chinese phrase’s characters into their individual characters and expect those characters individually translated bring you back to the sense of the Chinese phrase to start with.

So we take the Chinese phrase 火车票 (which translates into English as “Train tickets” … and we thank Google Translate for help with all this) and use PHP mbstring’s mb_str_split to properly split the Chinese into its constituent multibyte (UTF-8) characters (and along the way, show that PHP str_split messes up this same task, as you’d probably guess would happen), and then translate all these into English using Google Translate, as an intellectual exercise.

If this exercise makes you …

  • a) fall on the floor laughing
  • b) hit a gong with a huge hammer
  • c) cook up some deep fried dumplings
  • d) put the left chopstick in the right ear and the right chopstick in the left ear (please ask for adult supervision) … translation: do not do this
  • e) while reading you sweep the cat under the rug (no animals were harmed in the making of this blog posting)

… then we’re here to tell you that you need to take a Bex and have a lie down.

We are just showing in PHP that if the mbstring functionality is available to you, that the mbstring library of functionality can help with some Internationalization issues you may be grappling with and that this PHP code you could try via this live run link.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , | Leave a comment

HTML/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial

HTML/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial

HTML/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial

One way a lot of us learn something new is to …

  • have a way to an answer be modelled for us … then …
  • perhaps, for a different problem presented, of the same ilk, we might need to model again, or have less modelling, or have no modelling needed at all … then …
  • over time we might be able to solve this type of problem independently

… that last step important when being examined on a topic. We’re equating “modelling” with “hints” in our web application, where, today, further to yesterday’s HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial, we’ve introduced a new emoji button 🤝 the user can click to receive a hint in their Javascript scratchpad used to code for a Simultaneous Linear Equation “intersection point” solution.

There is a bit of a juggle trying to keep “various webpage players” above the fold, and for the first time we can remember we’re accessing the relevant element CSS vertical-align property in a Javascript DOM way, as well as using the incredibly useful [Element].scrollIntoView() there at one point …


function yourhandhold() {
var ik=-1;
var tac=document.getElementById('tascratch').value;
var newlines='';
if (hhcnt == 0) {
newlines+='<br> // Get first y isolated, by dividing both sides of equation by ' + your_y1 + ' ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;
newlines+='<br> your_x1 = eval((' + your_x1 + ') / (' + your_y1 + ')); // ' + eval((your_x1) / (your_y1)) + '';
newlines+='<br> your_f1 = eval((' + your_f1 + ') / (' + your_y1 + ')); // ' + eval((your_f1) / (your_y1)) + '';
newlines+='<br> your_y1 = 1; // y = ' + eval((your_x1) / (your_y1)) + 'x + (' + eval((your_f1) / (your_y1)) + ') <br><br> ';
hiddenm=eval((your_x1) / (your_y1));
hiddenf=eval((your_f1) / (your_y1));
tac=tac.replace('// ... hopefully by here', newlines + '// ... hopefully by here');
document.getElementById('tascratch').value=tac.replace(/\<br\>/g, String.fromCharCode(10));
document.getElementById('tdleft').style.verticalAlign='middle';
hhcnt++;
document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';
} else if (hhcnt == 1) {
newlines+='<br> // Get second y isolated, by dividing both sides of equation by ' + your_y2 + ' ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;
newlines+='<br> your_x2 = eval((' + your_x2 + ') / (' + your_y2 + ')); // ' + eval((your_x2) / (your_y2)) + '';
newlines+='<br> your_f2 = eval((' + your_f2 + ') / (' + your_y2 + ')); // ' + eval((your_f2) / (your_y2)) + '';
newlines+='<br> your_y2 = 1; // y = ' + eval((your_x2) / (your_y2)) + 'x + (' + eval((your_f2) / (your_y2)) + ') // ... meaning ... <br> // ' + eval((your_x1) / (your_y1)) + 'x + (' + eval((your_f1) / (your_y1)) + ') = ' + eval((your_x2) / (your_y2)) + 'x + (' + eval((your_f2) / (your_y2)) + ') <br><br> ';
tac=tac.replace('// ... hopefully by here', newlines + '// ... hopefully by here');
document.getElementById('tascratch').value=tac.replace(/\<br\>/g, String.fromCharCode(10));
document.getElementById('tdleft').style.verticalAlign='bottom';
hhcnt++;
document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';
} else if (hhcnt == 2) {
newlines+='<br> // Gather x over on left ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;
newlines+='<br> // ' + eval(eval((your_x1) / (your_y1)) - eval((your_x2) / (your_y2))) + 'x = (' + eval((your_f2) / (your_y2)) + ') - (' + eval((your_f1) / (your_y1)) + ') <br><br> ';
hiddend=eval(eval((your_x1) / (your_y1)) - eval((your_x2) / (your_y2)));
tac=tac.replace('// ... hopefully by here', newlines + '// ... hopefully by here');
document.getElementById('tascratch').value=tac.replace(/\<br\>/g, String.fromCharCode(10));
hhcnt++;
document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';
} else if (hhcnt == 3) {
newlines+='<br> // Isolate that x by dividing both sides by ' + hiddend + ' ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;
newlines+='<br> // ' + 'x = (' + eval(eval(eval((your_f2) / (your_y2)) / hiddend) - eval(eval((your_f1) / (your_y1)) / hiddend)) + ') <br><br> ';
tac=tac.replace('// ... hopefully by here', newlines + '// ... hopefully by here');
document.getElementById('tascratch').value=tac.replace(/\<br\>/g, String.fromCharCode(10));
hiddenx=eval(eval(eval((your_f2) / (your_y2)) / hiddend) - eval(eval((your_f1) / (your_y1)) / hiddend));
hhcnt++;
document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';
} else if (hhcnt == 4) {
newlines+='<br> // Plug that x into either y (as isolated) equation ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;
newlines+='<br> // ' + 'y = (' + hiddenm + ' * (' + hiddenx + ')) + (' + hiddenf + ') ';
newlines+='<br> // ' + 'y = (' + eval(hiddenf + eval(hiddenm * hiddenx)) + ') <br><br> ';
newlines+='<br> ' + 'thisxintercept = ' + hiddenx + '; ';
newlines+='<br> ' + 'thisyintercept = ' + eval(hiddenf + eval(hiddenm * hiddenx)) + '; <br><br> ';
tac=tac.replace('// ... hopefully by here', newlines + '// ... hopefully by here');
document.getElementById('tascratch').value=tac.replace(/\<br\>/g, String.fromCharCode(10));
checkyours(); // document.getElementById('yourcheck').click();
document.getElementById('tdleft').style.verticalAlign='bottom';
document.getElementById('s').click();
hhcnt++;
document.getElementById('tascratch').rows=eval(0 + eval('' + document.getElementById('tascratch').value.split(String.fromCharCode(10)).length));
}

if (ik < 0) {
document.getElementById('tascratch').rows=eval(1 + eval('' + document.getElementById('tascratch').value.split(String.fromCharCode(10)).length));
}

setTimeout(function(){ isokay=true; document.getElementById('yourhh').scrollIntoView(); }, 2000);
}

… to try to help the user out a bit, here, as far as a User Experience goes, with our changed simultaneous_linear.html Simultaneous Linear Equations web application.


Previous relevant HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial is shown below.

HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial

What yesterday’s HTML/Javascript Simultaneous Line Equations Revisit Tutorial lacked, in our opinion, was a way in for the user to interact with it’s web application. To add this new optional functionality might have a dual advantage …

  • learn about Simultaneous Linear Equations in an interactive way, more likely to sink in and be remembered …
  • study and create some Javascript coding

This involves a user …

  • using a suggested template …

    function beforepresolve() {
    your_x1 = document.getElementById("x1").value;
    your_y1 = document.getElementById("y1").value;
    your_f1 = document.getElementById("f1").value;
    your_x2 = document.getElementById("x2").value;
    your_y2 = document.getElementById("y2").value;
    your_f2 = document.getElementById("f2").value;
    s_w_big='function you_solve_equations() { <br>' + ' thisxintercept = 0; <br>' + ' thisyintercept = 0; <br><br>' + ' your_y1 = ' + your_y1 + '; ';
    s_w_big+='<br>' + ' your_x1 = ' + your_x1 + '; ';
    s_w_big+='<br>' + ' your_f1 = ' + your_f1 + '; ';
    s_w_big+='<br>' + ' your_y2 = ' + your_y2 + '; ';
    s_w_big+='<br>' + ' your_x2 = ' + your_x2 + '; ';
    s_w_big+='<br>' + ' your_f2 = ' + your_f2 + '; ';

    s_w_big+='<br><br> document.getElementById("yans").placeholder="Intersection point is (0,0)"; <br><br> // So you have Javascript variables above to play around with (new ones prefix with "var ") ... <br><br><br><br> // ... hopefully by here you have calculated <br> // thisxintercept and thisyintercept to match the Solve click answer<br><br> if (thisxintercept != 0 || thisyintercept != 0) { <br> var myans="Intersection point is (" + thisxintercept + "," + thisyintercept + ")"; <br> document.getElementById("yans").value=myans;<br> } <br>';

    s_w_big+='<br>}<br><br>you_solve_equations(); <br>';

    if (!document.getElementById('tascratch')) {
    document.getElementById('helpout').innerHTML='<details><summary>Optionally try solving in Javascript scratchpad below ...</summary><textarea cols=95 id=tascratch>' + s_w_big.replace(/\<br\>/g, String.fromCharCode(10)) + '</textarea><br><br><button id=yourcheck onclick=checkyours(); style=background-color:lightgreen;>Check Working Above ...</button>  <input id=yans type=text placeholder="Intersection point is (0,0)" value="" style=width:70%;></input><br></details><br>';
    } else {
    document.getElementById('tascratch').value=s_w_big.replace(/\<br\>/g, String.fromCharCode(10));
    document.getElementById('yans').value='';
    }

    document.getElementById('tascratch').rows=eval(1 + eval('' + s_w_big.split('<br>').length));

    s_w_big="";
    }

    … to create some Javascript to calculate a Simultaneous Linear Equation intersection point (x,y)
  • our web application executing that Javascript …

    function checkyours() {
    var tag = document.createElement('script');
    tag.innerHTML = document.getElementById('tascratch').value;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.insertAdjacentElement("afterend", tag);
    }

    … this way, instantaneously, and without navigating to any new webpages

Again, then, why not try a changed simultaneous_linear.html Simultaneous Linear Equations web application.


Previous relevant HTML/Javascript Simultaneous Line Equations Revisit Tutorial is shown below.

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

It’s the anniversary of HTML/Javascript Simultaneous Line Equations Tutorial!

Happy (11th give or take) Anniversary … release of HTML/Javascript Simultaneous Line Equations Tutorial! Many happy Javascript returns … chortle, chortle.

On revisiting it’s Simultaneous Line Equations web application, we were a bit lost with the initial form settings, given the default input numbers, unchanged, resulted in an ill-defined result … not a good look … and we apologize for this. So, we’ve fixed that with a pretty simple new randomizer Javascript function …


function mixitup() {
document.getElementById("x1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("x2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
}

… we also slot in at the document.body onload event intervention point … our favourite … aaaaaahhhh!

And then, a flash back to high school days, when every mathematics teacher there stressed how important it was to show your workings. You know in Netflix this will amount to some screen zooming into some code somewhere ticking through the codelines meaningfully … but really … it is just boring hardish slog to “Show Workings”, which we do here via a “reveal” functionality with details/summary usage, but given we remember Linear Equations from mathematics, and it interested us, we decided to show the (no doubt less efficient Javascript guise for) coding steps mimicking the Substitution Method so well explained, thanks, by HTTP://sydney.edu.au/stuserv/documents/maths_learning_centre/simeqns.pdf

Why not try the changed simultaneous_linear.html Simultaneous Linear Equations web application.

Stop Press

The Other Day at Lawson Station Tutorial

The Other Day at Lawson Station Tutorial

We had an …

Ephemeral 101

… lesson this morning at Lawson train station. We came across this …


… reminding us of the rubber snake guest appearance in Citizen Science Primer Tutorial! Funny later, but a bit concerning at the time, especially in summer, in some parts hereabouts in the Blue Mountains. Well … you had to be there!

We did not plant this, but it looks like 6 ply, if you want to try it. Alas, a bit before filming, when a train went by, we could not get the camera out quick enough to see it gyrating a lot better than this!

Stop Press … later today …

It’s still there!


If this was interesting you may be interested in this too.


Previous relevant HTML/Javascript Simultaneous Line Equations Tutorial is shown below.

HTML/Javascript Simultaneous Line Equations Tutorial

HTML/Javascript Simultaneous Line Equations Tutorial

Here is a tutorial showing some client-side basics in HTML and Javascript that can solve a pair of Simultaneous Linear Equations. The inspiration for this came from the tutorial here.

Sometimes a graphical representation of the Line Equations can help visualize the situation, so for this we call on a previous tutorial PHP/Javascript/HTML Google Chart Line Chart Tutorial.

This HTML/Javascript solution uses an HTML form to collect information, and it is a lot like Javascript form validation to do the mathematics, so the previous tutorial Javascript Form Validation Primer Tutorial has many similarities in its coding structure to today’s tutorial.

Link to some downloadable HTML programming code … rename to simultaneous_linear.html

Hope you get some ideas from today’s tutorial.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Hope you get some ideas from today’s tutorial.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial

What yesterday’s HTML/Javascript Simultaneous Line Equations Revisit Tutorial lacked, in our opinion, was a way in for the user to interact with it’s web application. To add this new optional functionality might have a dual advantage …

  • learn about Simultaneous Linear Equations in an interactive way, more likely to sink in and be remembered …
  • study and create some Javascript coding

This involves a user …

  • using a suggested template …

    function beforepresolve() {
    your_x1 = document.getElementById("x1").value;
    your_y1 = document.getElementById("y1").value;
    your_f1 = document.getElementById("f1").value;
    your_x2 = document.getElementById("x2").value;
    your_y2 = document.getElementById("y2").value;
    your_f2 = document.getElementById("f2").value;
    s_w_big='function you_solve_equations() { <br>' + ' thisxintercept = 0; <br>' + ' thisyintercept = 0; <br><br>' + ' your_y1 = ' + your_y1 + '; ';
    s_w_big+='<br>' + ' your_x1 = ' + your_x1 + '; ';
    s_w_big+='<br>' + ' your_f1 = ' + your_f1 + '; ';
    s_w_big+='<br>' + ' your_y2 = ' + your_y2 + '; ';
    s_w_big+='<br>' + ' your_x2 = ' + your_x2 + '; ';
    s_w_big+='<br>' + ' your_f2 = ' + your_f2 + '; ';

    s_w_big+='<br><br> document.getElementById("yans").placeholder="Intersection point is (0,0)"; <br><br> // So you have Javascript variables above to play around with (new ones prefix with "var ") ... <br><br><br><br> // ... hopefully by here you have calculated <br> // thisxintercept and thisyintercept to match the Solve click answer<br><br> if (thisxintercept != 0 || thisyintercept != 0) { <br> var myans="Intersection point is (" + thisxintercept + "," + thisyintercept + ")"; <br> document.getElementById("yans").value=myans;<br> } <br>';

    s_w_big+='<br>}<br><br>you_solve_equations(); <br>';

    if (!document.getElementById('tascratch')) {
    document.getElementById('helpout').innerHTML='<details><summary>Optionally try solving in Javascript scratchpad below ...</summary><textarea cols=95 id=tascratch>' + s_w_big.replace(/\<br\>/g, String.fromCharCode(10)) + '</textarea><br><br><button id=yourcheck onclick=checkyours(); style=background-color:lightgreen;>Check Working Above ...</button>  <input id=yans type=text placeholder="Intersection point is (0,0)" value="" style=width:70%;></input><br></details><br>';
    } else {
    document.getElementById('tascratch').value=s_w_big.replace(/\<br\>/g, String.fromCharCode(10));
    document.getElementById('yans').value='';
    }

    document.getElementById('tascratch').rows=eval(1 + eval('' + s_w_big.split('<br>').length));

    s_w_big="";
    }

    … to create some Javascript to calculate a Simultaneous Linear Equation intersection point (x,y)
  • our web application executing that Javascript …

    function checkyours() {
    var tag = document.createElement('script');
    tag.innerHTML = document.getElementById('tascratch').value;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.insertAdjacentElement("afterend", tag);
    }

    … this way, instantaneously, and without navigating to any new webpages

Again, then, why not try a changed simultaneous_linear.html Simultaneous Linear Equations web application.


Previous relevant HTML/Javascript Simultaneous Line Equations Revisit Tutorial is shown below.

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

It’s the anniversary of HTML/Javascript Simultaneous Line Equations Tutorial!

Happy (11th give or take) Anniversary … release of HTML/Javascript Simultaneous Line Equations Tutorial! Many happy Javascript returns … chortle, chortle.

On revisiting it’s Simultaneous Line Equations web application, we were a bit lost with the initial form settings, given the default input numbers, unchanged, resulted in an ill-defined result … not a good look … and we apologize for this. So, we’ve fixed that with a pretty simple new randomizer Javascript function …


function mixitup() {
document.getElementById("x1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("x2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
}

… we also slot in at the document.body onload event intervention point … our favourite … aaaaaahhhh!

And then, a flash back to high school days, when every mathematics teacher there stressed how important it was to show your workings. You know in Netflix this will amount to some screen zooming into some code somewhere ticking through the codelines meaningfully … but really … it is just boring hardish slog to “Show Workings”, which we do here via a “reveal” functionality with details/summary usage, but given we remember Linear Equations from mathematics, and it interested us, we decided to show the (no doubt less efficient Javascript guise for) coding steps mimicking the Substitution Method so well explained, thanks, by HTTP://sydney.edu.au/stuserv/documents/maths_learning_centre/simeqns.pdf

Why not try the changed simultaneous_linear.html Simultaneous Linear Equations web application.

Stop Press

The Other Day at Lawson Station Tutorial

The Other Day at Lawson Station Tutorial

We had an …

Ephemeral 101

… lesson this morning at Lawson train station. We came across this …


… reminding us of the rubber snake guest appearance in Citizen Science Primer Tutorial! Funny later, but a bit concerning at the time, especially in summer, in some parts hereabouts in the Blue Mountains. Well … you had to be there!

We did not plant this, but it looks like 6 ply, if you want to try it. Alas, a bit before filming, when a train went by, we could not get the camera out quick enough to see it gyrating a lot better than this!

Stop Press … later today …

It’s still there!


If this was interesting you may be interested in this too.


Previous relevant HTML/Javascript Simultaneous Line Equations Tutorial is shown below.

HTML/Javascript Simultaneous Line Equations Tutorial

HTML/Javascript Simultaneous Line Equations Tutorial

Here is a tutorial showing some client-side basics in HTML and Javascript that can solve a pair of Simultaneous Linear Equations. The inspiration for this came from the tutorial here.

Sometimes a graphical representation of the Line Equations can help visualize the situation, so for this we call on a previous tutorial PHP/Javascript/HTML Google Chart Line Chart Tutorial.

This HTML/Javascript solution uses an HTML form to collect information, and it is a lot like Javascript form validation to do the mathematics, so the previous tutorial Javascript Form Validation Primer Tutorial has many similarities in its coding structure to today’s tutorial.

Link to some downloadable HTML programming code … rename to simultaneous_linear.html

Hope you get some ideas from today’s tutorial.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , | Leave a comment

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

It’s the anniversary of HTML/Javascript Simultaneous Line Equations Tutorial!

Happy (11th give or take) Anniversary … release of HTML/Javascript Simultaneous Line Equations Tutorial! Many happy Javascript returns … chortle, chortle.

On revisiting it’s Simultaneous Line Equations web application, we were a bit lost with the initial form settings, given the default input numbers, unchanged, resulted in an ill-defined result … not a good look … and we apologize for this. So, we’ve fixed that with a pretty simple new randomizer Javascript function …


function mixitup() {
document.getElementById("x1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("x2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
}

… we also slot in at the document.body onload event intervention point … our favourite … aaaaaahhhh!

And then, a flash back to high school days, when every mathematics teacher there stressed how important it was to show your workings. You know in Netflix this will amount to some screen zooming into some code somewhere ticking through the codelines meaningfully … but really … it is just boring hardish slog to “Show Workings”, which we do here via a “reveal” functionality with details/summary usage, but given we remember Linear Equations from mathematics, and it interested us, we decided to show the (no doubt less efficient Javascript guise for) coding steps mimicking the Substitution Method so well explained, thanks, by HTTP://sydney.edu.au/stuserv/documents/maths_learning_centre/simeqns.pdf

Why not try the changed simultaneous_linear.html Simultaneous Linear Equations web application.

Stop Press

The Other Day at Lawson Station Tutorial

The Other Day at Lawson Station Tutorial

We had an …

Ephemeral 101

… lesson this morning at Lawson train station. We came across this …


… reminding us of the rubber snake guest appearance in Citizen Science Primer Tutorial! Funny later, but a bit concerning at the time, especially in summer, in some parts hereabouts in the Blue Mountains. Well … you had to be there!

We did not plant this, but it looks like 6 ply, if you want to try it. Alas, a bit before filming, when a train went by, we could not get the camera out quick enough to see it gyrating a lot better than this!

Stop Press … later today …

It’s still there!


If this was interesting you may be interested in this too.


Previous relevant HTML/Javascript Simultaneous Line Equations Tutorial is shown below.

HTML/Javascript Simultaneous Line Equations Tutorial

HTML/Javascript Simultaneous Line Equations Tutorial

Here is a tutorial showing some client-side basics in HTML and Javascript that can solve a pair of Simultaneous Linear Equations. The inspiration for this came from the tutorial here.

Sometimes a graphical representation of the Line Equations can help visualize the situation, so for this we call on a previous tutorial PHP/Javascript/HTML Google Chart Line Chart Tutorial.

This HTML/Javascript solution uses an HTML form to collect information, and it is a lot like Javascript form validation to do the mathematics, so the previous tutorial Javascript Form Validation Primer Tutorial has many similarities in its coding structure to today’s tutorial.

Link to some downloadable HTML programming code … rename to simultaneous_linear.html

Hope you get some ideas from today’s tutorial.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , | Leave a comment

Webpage Before Onload Event Client Server Report Tutorial

Webpage Before Onload Event Client Server Report Tutorial

Webpage Before Onload Event Client Server Report Tutorial

And so, today, we expose all the fun we’ve been having running an Apache/PHP/MySql web server where both …

… as they feature in the webpage creation paradigm. And it’s not always PHP … we like The Three P’sPHP and Python and Perl all there installed on our AlmaLinux RJM Programming domain web server.

Us adding in new (in order)

  1. Serverside settings … augmenting, and preceding (in time) …
  2. Clientside findings

… shows this fuller picture, the whole of “Serverside settings” happening before any webpage document.body onload event. Yes, that serverside is optional, and many a great website makes no reference to serverside anything, except in the sense of where it lives, which is a web server, somewhere out there in Internet Land.

But it’s not as much fun ignoring these serverside aspects to what’s possible. Think database, then you need serverside, just as one example.

And this is why PHP and Javascript are such a great combination. PHP …

<?php

$results="";
$plus="";

foreach ($_GET as $name => $val) {
if ($results == "") {
$plus="+";
$results="<br><br>Serverside settings:<br><br>";
$results.="$" . "_SERVER['SERVER_PORT']=\"" . $_SERVER['SERVER_PORT'] . "\"; <br>";
$results.="$" . "_SERVER['SERVER_NAME']=\"" . $_SERVER['SERVER_NAME'] . "\"; <br>";
$results.="$" . "_SERVER['SCRIPT_FILENAME']=\"" . $_SERVER['SCRIPT_FILENAME'] . "\"; <br>";
$results.="$" . "_SERVER['REQUEST_URI']=\"" . $_SERVER['REQUEST_URI'] . "\"; <br>";
$results.="$" . "_SERVER['QUERY_STRING']=\"" . $_SERVER['QUERY_STRING'] . "\"; <br>";
}
$results.="$" . "_GET['" . $name . "']=\"" . str_replace('+',' ',urldecode($val)) . "\"; <br>";
}

foreach ($_POST as $name => $val) {
if ($results == "") {
$plus="+";
$results="<br><br>Serverside settings:<br><br>";
if (strpos($results, "REQUEST_URI") === false) {
$results.="$" . "_SERVER['SERVER_PORT']=\"" . $_SERVER['SERVER_PORT'] . "\"; <br>";
$results.="$" . "_SERVER['SERVER_NAME']=\"" . $_SERVER['SERVER_NAME'] . "\"; <br>";
$results.="$" . "_SERVER['SCRIPT_FILENAME']=\"" . $_SERVER['SCRIPT_FILENAME'] . "\"; <br>";
$results.="$" . "_SERVER['REQUEST_URI']=\"" . $_SERVER['REQUEST_URI'] . "\"; <br>";
}
}
$results.="$" . "_POST['" . $name . "']=\"" . str_replace('+',' ',urldecode($val)) . "\"; <br>";
}

if ($results == "") {
$results="<br><br>Serverside settings:<br><br>";
$results.="$" . "_SERVER['SERVER_PORT']=\"" . $_SERVER['SERVER_PORT'] . "\"; <br>";
$results.="$" . "_SERVER['SERVER_NAME']=\"" . $_SERVER['SERVER_NAME'] . "\"; <br>";
$results.="$" . "_SERVER['SCRIPT_FILENAME']=\"" . $_SERVER['SCRIPT_FILENAME'] . "\"; <br>";
$results.="$" . "_SERVER['REQUEST_URI']=\"" . $_SERVER['REQUEST_URI'] . "\"; <br>";
$plus="+";
}

?>

… can go around and infill Javascript, used (ie. infilled) here …

<?php echo ”

var clientstuff=\"" . str_replace('"','" + String.fromCharCode(34) + "', $results) . "\";
clientstuff+='<br><br><br>ClientSide findings:<br><br>';

“; ?>

… in the tweaked before_document_onload.php PHP web application.


Previous relevant Webpage Before Onload Event Report Tutorial is shown below.

Webpage Before Onload Event Report Tutorial

Webpage Before Onload Event Report Tutorial

Although Javascript DOM used on the clientside of webpage production online thrives after the document.body onload event, we’ve been finding, especially regarding hashtag usage, more and more uses even before the document.body onload event. Why this interest?

  1. the earlier you glean information the easier it is to mould the webpage data you create, as a programmer …
  2. personally, the reason for our interest in this mini project was to do with a webpage navigation idea we wondered about …

    Supposing document.referrer contained hashtag data it could mean there is a new way to share data between same domain webpages in a navigation chain.

… but our document.referrer work here (and we did some at Webpage Vertical Position Return Content Tutorial as well) showed …

  • document.referrer has become less and less reliable with web browsers over the years …
  • now sometimes relying on real user button clicks to be populated … and … saddest of all …
  • never contains location.hash hashtag data the way document.URL can

Oh, well! Never mind, there is a lot more to consider with this clientside only (so far) “proof of concept” PHP web application. Why PHP for a clientside web application? Well, HTML is a subset of PHP, to our mind. In fact, just HTML content can be plonked as the content of a nominally .php named webfile and perform the same (ie. regarding a web server, at the other end, supporting PHP such as, locally, a MAMP Apache/PHP/MySql one or the AlmaLinux one up at the RJM Programming domain). We’re using PHP so as to move on tomorrow to show the serverside of a webpage creation potential workflow.

Try it out to see a bit of what is possible for four navigational concepts …

  1. form method=GET action=[here’sLookingAtYouKid] address bar URLs
  2. form method=POST action=[here’sLookingAtYouKid]
  3. iframe src=[asWithMethodGetURL] … bringing into play window.parent and window.top
  4. popup window.open([asWithMethodGetURL], ‘_blank’, ‘[positioningStuff]’) … bringing into play window.opener


Previous relevant Webpage Vertical Position Return Content Tutorial is shown below.

Webpage Vertical Position Return Content Tutorial

Webpage Vertical Position Return Content Tutorial

The improvement, today, onto yesterday’s Webpage Vertical Position Return Tutorial is, nominally, to allow the user to specify what their table cell wording should be, as a comma separated string entered via a Javascript prompt window and accessed via a minus sign “a” link in amongst the header elements.

Along the way, we realized a thing about returns to the same web application using the same web browser previously used. The nature of the web application with its scrolling will cause autocompletion at the web browser address bar to …

HTTP://www.rjmprogramming.com.au/HTMLCSS/returning_to_start.html#lime

… or something similar. Within the web application this causes “location.hash” to get a value, and the implication of this is that for the working of the web application, including going off to external links and arriving back appropriately positioned, via that external webpage’s back button/link we need to differentiate …

  • a web browser address bar entry such as …
    HTTP://www.rjmprogramming.com.au/HTMLCSS/returning_to_start.html#maroon
    … as you first enter the web application from nowhere (ie. above is typed or copied into the web browser address bar and you act to navigate to that URL (with location.hash defined)) … as distinct from …
  • a web browser address bar entry such as …
    HTTP://www.rjmprogramming.com.au/HTMLCSS/returning_to_start.html#maroon
    … as you return to the web application via one of those external webpage back button/link

What might help, at the client level or server level (as our web application is serverside PHP)? Well, at client level there is …

document.referrer

… which is a client (ie. seen by Javascript) data item that contains a URL of a webpage navigated from or nothing/blank/null when you navigated to the webpage from the web browser address bar directly …


// initialization of global variable
var documentreferrer=('' + document.referrer);

// document.body part of onload event logic ...
function onl() {
var ourrect;
if (('' + location.hash) != '' && ('' + documentreferrer) == '') {
location.href=document.URL.split('#')[0];
}

for (var ii=0; iidocumentreferrer='x';
// rest of onload logic
}

In that last scenario we actually check for this via a filled in “location.hash” value and redirect to a URL with no hash part so that the changed second draft “proof of concept” live run you can also try for yourself.


Previous relevant Webpage Vertical Position Return Tutorial is shown below.

Webpage

Webpage Vertical Position Return Tutorial

We have a very simple “proof of concept” web application to present today. The reason for our “webpage position return” idea centres around four concepts …

Today we … Whereas usually we …
  • “a” link navigation that is target=_self (ie. default navigation that stays on the same web browser tab clobbering content)
  • webpage vertical scrolling of content to “below the fold”
  • hashtag # navigation
  • use of web browser back link/button
  • “a” link navigation that is target=_blank (ie. to a new web browser tab leaving original webpage unaffected)
  • try for “no webpage vertical scrolling of content required”
  • try for “no need for hashtag # navigation”
  • try for “no need for use of web browser back link/button”

So what happens if no hashtag # navigation happens ahead of navigating to a new webpage via an “a” link set to target=_self? It will, unless catered for (and there is a mix out there), will return back to that previous webpage at its topmost positioning (as far as vertical scrolling goes). The internal hashtag # navigation concerns taken in our proof of concept allows the return to be either exactly, or nearly, returned to …

  • the appropriate webpage … doh! …
  • at an apt vertical scrolling position

See what we mean, and what we are talking about with our first draft “proof of concept” live run you can also try below …

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Webpage Before Onload Event Report Tutorial

Webpage Before Onload Event Report Tutorial

Webpage Before Onload Event Report Tutorial

Although Javascript DOM used on the clientside of webpage production online thrives after the document.body onload event, we’ve been finding, especially regarding hashtag usage, more and more uses even before the document.body onload event. Why this interest?

  1. the earlier you glean information the easier it is to mould the webpage data you create, as a programmer …
  2. personally, the reason for our interest in this mini project was to do with a webpage navigation idea we wondered about …

    Supposing document.referrer contained hashtag data it could mean there is a new way to share data between same domain webpages in a navigation chain.

… but our document.referrer work here (and we did some at Webpage Vertical Position Return Content Tutorial as well) showed …

  • document.referrer has become less and less reliable with web browsers over the years …
  • now sometimes relying on real user button clicks to be populated … and … saddest of all …
  • never contains location.hash hashtag data the way document.URL can

Oh, well! Never mind, there is a lot more to consider with this clientside only (so far) “proof of concept” PHP web application. Why PHP for a clientside web application? Well, HTML is a subset of PHP, to our mind. In fact, just HTML content can be plonked as the content of a nominally .php named webfile and perform the same (ie. regarding a web server, at the other end, supporting PHP such as, locally, a MAMP Apache/PHP/MySql one or the AlmaLinux one up at the RJM Programming domain). We’re using PHP so as to move on tomorrow to show the serverside of a webpage creation potential workflow.

Try it out to see a bit of what is possible for four navigational concepts …

  1. form method=GET action=[here’sLookingAtYouKid] address bar URLs
  2. form method=POST action=[here’sLookingAtYouKid]
  3. iframe src=[asWithMethodGetURL] … bringing into play window.parent and window.top
  4. popup window.open([asWithMethodGetURL], ‘_blank’, ‘[positioningStuff]’) … bringing into play window.opener


Previous relevant Webpage Vertical Position Return Content Tutorial is shown below.

Webpage Vertical Position Return Content Tutorial

Webpage Vertical Position Return Content Tutorial

The improvement, today, onto yesterday’s Webpage Vertical Position Return Tutorial is, nominally, to allow the user to specify what their table cell wording should be, as a comma separated string entered via a Javascript prompt window and accessed via a minus sign “a” link in amongst the header elements.

Along the way, we realized a thing about returns to the same web application using the same web browser previously used. The nature of the web application with its scrolling will cause autocompletion at the web browser address bar to …

HTTP://www.rjmprogramming.com.au/HTMLCSS/returning_to_start.html#lime

… or something similar. Within the web application this causes “location.hash” to get a value, and the implication of this is that for the working of the web application, including going off to external links and arriving back appropriately positioned, via that external webpage’s back button/link we need to differentiate …

  • a web browser address bar entry such as …
    HTTP://www.rjmprogramming.com.au/HTMLCSS/returning_to_start.html#maroon
    … as you first enter the web application from nowhere (ie. above is typed or copied into the web browser address bar and you act to navigate to that URL (with location.hash defined)) … as distinct from …
  • a web browser address bar entry such as …
    HTTP://www.rjmprogramming.com.au/HTMLCSS/returning_to_start.html#maroon
    … as you return to the web application via one of those external webpage back button/link

What might help, at the client level or server level (as our web application is serverside PHP)? Well, at client level there is …

document.referrer

… which is a client (ie. seen by Javascript) data item that contains a URL of a webpage navigated from or nothing/blank/null when you navigated to the webpage from the web browser address bar directly …


// initialization of global variable
var documentreferrer=('' + document.referrer);

// document.body part of onload event logic ...
function onl() {
var ourrect;
if (('' + location.hash) != '' && ('' + documentreferrer) == '') {
location.href=document.URL.split('#')[0];
}

for (var ii=0; iidocumentreferrer='x';
// rest of onload logic
}

In that last scenario we actually check for this via a filled in “location.hash” value and redirect to a URL with no hash part so that the changed second draft “proof of concept” live run you can also try for yourself.


Previous relevant Webpage Vertical Position Return Tutorial is shown below.

Webpage

Webpage Vertical Position Return Tutorial

We have a very simple “proof of concept” web application to present today. The reason for our “webpage position return” idea centres around four concepts …

Today we … Whereas usually we …
  • “a” link navigation that is target=_self (ie. default navigation that stays on the same web browser tab clobbering content)
  • webpage vertical scrolling of content to “below the fold”
  • hashtag # navigation
  • use of web browser back link/button
  • “a” link navigation that is target=_blank (ie. to a new web browser tab leaving original webpage unaffected)
  • try for “no webpage vertical scrolling of content required”
  • try for “no need for hashtag # navigation”
  • try for “no need for use of web browser back link/button”

So what happens if no hashtag # navigation happens ahead of navigating to a new webpage via an “a” link set to target=_self? It will, unless catered for (and there is a mix out there), will return back to that previous webpage at its topmost positioning (as far as vertical scrolling goes). The internal hashtag # navigation concerns taken in our proof of concept allows the return to be either exactly, or nearly, returned to …

  • the appropriate webpage … doh! …
  • at an apt vertical scrolling position

See what we mean, and what we are talking about with our first draft “proof of concept” live run you can also try below …

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , | Leave a comment