H2S72: Rationalizing the role of JS in web-dev:

<Lengstorf, Leggetter pg-22> JavaScript is a client-side scripting language, which means that it is executed on the user’s computer. This makes it ideal for tasks such as animating the elements on a page, doing calculations on-the-fly, and various other actions that would otherwise be extremely inconvenient if they required a page refresh. Hu: With so much valuable | functionality already | carved-out by PHP and HTML-5, much better documented paradigms, according to these authors, what remains for JavaScript, which is redundant with both #, is to specifically handle return of data situations<Turing> when the client triggers such a request, with an interaction, on the page, without refreshing the entire page.

H3S1: Dynamic update without refresh:

Hu: An important distinction between this heading and true real.time-updates<WP.MIC-H2S66> is that the client is specifically requesting the data, as indicated by the interaction, rather than leaving a connection open, listening. Lengstorf, Leggetter<pg-22>: This technique is commonly referred to as AJAX: Asynchronous JavaScript and XML. The XML part of this term came about because the request would commonly return XML data. Although this isn’t the common use case anymore, the name has stuck. What AJAX allows, in essence, is for a different page to be loaded and its contents returned to the current page using JavaScript. The page that is loaded can receive data from the AJAX request, process it, store it, retrieve new data, and return that data to the script that requested it.

H4S1: Case-study: in.page-interaction:

Hu: When users click the Delete icon on this page, they would like # a confirmation step, before this action is confirmed # JavaScript can enable this icon to change, load additional data upon it being clicked, and facilitate a dynamic update, the removal of this row, without the page needing to refresh entirely. Such a feature, frankly, is a minute | detail, as the functionality can also be built with refresh, separate pages, redirs, as is our current step. Only when clients have a high-volume of interactions with the site, in general, like, in the thousands, per day, will this improve the experience, by about 10% marginally, but it is by no means a valid | competitive advantage.

H4S2: Briefest<ultimate><fbno>AJAX lit-rev:

Hu: It seems like AJAX is able to make post and get requests to another file, including one that pulls from a MySQL database, both without refreshing, or at least the semblance of, according to consensus among the 300,000 dolts as users.

H5S1: XMLHttpRequest:

W3: The XMLHttpRequest object is used to exchange data with a server. To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:

open(method, url, async)	Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous)
send()	Sends the request to the server (used for GET)
send(string)	Sends the request to the server (used for POST)

H6S1: GET vs POST, a JS-perspective: Hu: GET vs POST are HTTP request types, and recall that these are prog.lang-agnostic. Relative to JS, however, these are the pertinent | details. W3: GET is simpler and faster than POST, and can be used in most cases. However, always use POST requests when:

• A cached file is not an option (update a file or database on the server).
• Sending a large amount of data to the server (POST has no size | limitations).
• Sending user input (which can contain unknown | characters), POST is more robust and secure than GET.

H6S2: XML lit-rev:

W3<a-r>:

• XML stands for eXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• XML is a W3C Recommendation

Hu: XML is 1) a form of caching, 2) a structure for protocol payloads. W3: The XML above is quite self-descriptive:

• It has sender information
• It has receiver information
• It has a heading
• It has a message body

W3: XML is just information wrapped in tags. XML and HTML were designed with different goals:

• XML was designed to carry data – with focus on what data is
• HTML was designed to display data – with focus on how data looks
• XML tags are not predefined like HTML tags are

The XML language has no predefined tags. These tags are “invented” by the author of the XML document. XML stores data in plain text format.<W3-snytax>: XML documents must contain one root element that is the parent of all other elements:

H6S3: With the XMLHttpRequest object you can define a function to be executed when the request receives an answer. The function is defined in the onreadystatechange property of the XMLHttpResponse object:

// Khoury: Access the onreadystatechange event for the XMLHttpRequest object. 
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Hu: According to Khoury<a-r>, function() { that is assigned as the value to xttp.onreadystatechange is a separate | function that is “fired off” when the ready state changes #<anthro> “We can make a function fire off every time the .readyState changes by listening<massive-break><1000.fold-qtum,blast>, and using this .onreadystatechange | event, and there’s a function that fires off, any time that the .readyState changes.

H6S4: XMLHttpRequest.responseText:<H6S6-below>

<dev-Mozilla>: The read-only XMLHttpRequest property responseText returns the text received from a server following a request being sent. Value: A string which contains either the textual data received using the XMLHttpRequest or null if the request failed or "" if the request has not yet been sent by calling send(). While handling an asynchronous request, the value of responseText always has the current content received from the server, even if it’s incomplete because the data has not been completely received yet. You know the entire content has been received when the value of readyState becomes XMLHttpRequest.DONE (4), and status becomes 200 ("OK").

const xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

// If specified, responseType must be empty string or "text"
xhr.responseType = 'text';

xhr.onload = () => {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.response);
      console.log(xhr.responseText);
    }
  }
};

xhr.send(null);

H6S5: XMLHttpRequest.send:

H6S6: onload:

xhttp.onload = function() {

Hu: A built.in:<Mozilla, a-r>: The load event is fired when an XMLHttpRequest transaction completes successfully. Hu: This is a built.in-listener for AJAX, and runs continuously, in blocking | mode, until the result of an HTTP–response is delivered, and this constitutes the conclusion of the transaction, a two-sided event. Any additional built-ins that reference the HTTP–response, such as this.responseText<a-r>, should be chained to this event, by being written inside the function that it activates.

H6S7: xhttp.setRequestHeader:<Mozilla>: The XMLHttpRequest method setRequestHeader() sets the value of an HTTP request header. When using setRequestHeader(), you must call it after calling open(), but before calling send(). 

H7S1: POST-method: The POST-method can be specified using H8S1: Encoding type: application/x-www-form-urlencoded (default):

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Hu: This is one of several encoding | types # available for the POST-method.<Mozilla>: the keys and values are encoded in key-value | tuples separated by '&', with a '=' between the key and the value. Non-alphanumeric | characters in both keys and values are percent encoded: this is the reason why this type is not suitable to use with binary | data (use multipart/form-data instead). Example form:

POST /test HTTP/1.1
Host: foo.example
Content-Type: application/x-www-form-urlencoded
Content-Length: 27

field1=value1&field2=value2

H4S3: Investigating onclick x document.getElementById<Turing>:

Hu: Another interesting pull from the JS.hodge-podge: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick, https://www.w3schools.com/jsref/event_onclick.asp, https://www.w3schools.com/jsref/met_document_getelementbyid.asp Hu: Passes the eye test of real-time, at least, and I see no documentation that there’s an HTTP-request in there. Note that getElementById is 100% case-sensitive.

W3<a-r, HTML-DOM><merger>: The following example changes the content (the innerHTML) of the <p> element with id="demo":

document.getElementById("demo").innerHTML = "Hello World!";

H4S4: JavaScript HTML DOM:

Hu: DOM = Document Object Model. W3<a-r>: With the HTML DOM, JavaScript can access and change all the elements of an HTML document. With the object model, JavaScript gets all the power it needs to create dynamic HTML:

• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page

W3: In the DOM, all HTML elements are defined as objects.

H5S1: Finding HTML elements: W3<a-r>:

Method	Description
document.getElementById(id)	Find an element by element id
document.getElementsByTagName(name)	Find elements by tag name
document.getElementsByClassName(name)	Find elements by class name

<!-- finds the element with id="intro" -->
const element = document.getElementById("intro");
<!-- finds all <p> elements -->
const element = document.getElementsByTagName("p");
<!-- finds all elements with class="intro" -->
const x = document.getElementsByClassName("intro");

H6S1: W3: If you want to find all HTML elements that match a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method. This example returns a list of all <p> elements with class="intro".

const x = document.querySelectorAll("p.intro");

H6S2: This example finds the form element with id="frm1", in the forms collection:

const x = document.forms["frm1"];

H5S2: Changing HTML elements: W3<a-r>:

Property	Description
element.innerHTML =  new html content	Change the inner HTML of an element
element.attribute = new value	Change the attribute value of an HTML element
element.style.property = new style	Change the style of an HTML element
Method	Description
element.setAttribute(attribute, value)	Change the attribute value of an HTML element

W3: The easiest way to modify the content of an HTML element is by using the innerHTML property. To change the content of an HTML element, use this syntax:

document.getElementById(id).innerHTML = new HTML
<p id="p1">Hello World!</p>
document.getElementById("p1").innerHTML = "New text!";

Example explained:

• The HTML document above contains a <p> element with id="p1"
• We use the HTML DOM to get the element with id="p1"
• A JavaScript changes the content (innerHTML) of that element to “New text!”

<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

Example explained:

• The HTML document above contains an <h1> element with id="id01"
• We use the HTML DOM to get the element with id="id01"
• A JavaScript changes the content (innerHTML) of that element to “New Heading”

H6S1: To change the value of an HTML attribute, use this syntax:

document.getElementById(id).attribute = new value
<img id="myImage" src="smiley.gif">
<script>document.getElementById("myImage").src = "landscape.jpg";</script>

Example explained:

• The HTML document above contains an <img> element with id="myImage"
• We use the HTML DOM to get the element with id="myImage"
• A JavaScript changes the src attribute of that element from “smiley.gif” to “landscape.jpg”

H6S2: To change the style of an HTML element: W3: The following example changes the style of a <p> element:

document.getElementById(id).style.property = new style
<p id="p2">Hello World!</p> <script>
document.getElementById("p2").style.color = "blue"; </script>

H5S3: Adding or deleting:

Method	Description
document.createElement(element)	Create an HTML element
document.removeChild(element)	Remove an HTML element
document.appendChild(element)	Add an HTML element
document.replaceChild(new, old)	Replace an HTML element
document.write(text)	Write into the HTML output stream

H5S4: Adding event handlers:

Method	Description
document.getElementById(id).onclick = function(){code}	Adding event handler code to an onclick event

H5S5: Finding HTML objects: A small sampling<W3, a-r>:

document.referrer	Returns the URI of the referrer (the linking document)
document.cookie	Returns the document’s cookie
document.URL	Returns the complete URL of the document

H5S6: document.write(): W3: In JavaScript, document.write() can be used to write directly to the HTML output stream:

<p>Bla bla bla</p>

<script> document.write(Date());
 </script>

<p>Bla bla bla</p>

Output: Bla, bla, bla

Mon Nov 14 2022 21:55:47 GMT-0500 (Eastern Standard Time)

Bla, bla, bla

H5S7: Form validation:

W3<a-r>:

H5S8: W3: The value property sets or returns the value of the value attribute of a text field.

document.getElementById("myText").value = "Johnny Bravo";
<!-- Return the value property: -->
textObject.value
<!-- Set the value property: -->
textObject.value = text

W3: Return value: a string, representing the value of the text field. Hu: This string can be assigned as the value of a variable.

H5S9: .value:

W3: The value property sets or returns the value of the value attribute of a text | field. Hu: This applies primarily to input fields, such as <textarea>

H5S10: .innerHTML:

W3: The innerHTML property sets or returns the HTML content (inner HTML) of an element. This applies to HTML elements, such as <p>.

H4S5: DOM x Events:

An event is when something will be delivered to you.

W3<a-r>: The HTML DOM allows you to execute code when an event occurs. Events are generated by the browser when “things happen” to HTML elements:

• An element is clicked on
• The page has loaded
• Input fields are changed

H5S1: JS x Events x DOM:

W3: A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute:

onclick=JavaScript

Hu: Not all DOM events are user-triggered, and this is an important point, because there are certain | features that we would like to run by automation. Multiple functions can be executed by the same HTML event:

onkeyup="live_message(), test_message()"

Examples of HTML events:

• When a user clicks the mouse<user-triggered>
• When a web page has loaded<automation>
• When an image has been loaded<automation>
• When the mouse moves over an element<hybrid>
• When an input field is changed<user-triggered>
• When an HTML form is submitted<user-triggered>
• When a user strokes a key<user-triggered>

In this example, the content of the <h1> element is changed when a user clicks on it<function-less!>:

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

In this example, a function is called from the event handler:

<h1 onclick="changeText(this)">Click on this text!</h1>
<script> function changeText(id) {
  id.innerHTML = "Ooops!";
} </script>

W3: The HTML DOM allows you to assign events to HTML elements using JavaScript: in the example below, a function named displayDate is assigned to an HTML element with the id="myBtn". The function will be executed when the button is clicked.

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script> document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
} </script>

H5S2: Events references:

https://www.w3schools.com/jsref/dom_obj_event.asp, https://www.w3schools.com/js/js_htmldom_events.asp

H5S3: onmessage:

Create a new EventSource object, and specify the URL of the page sending the updates.
Each time an update is received, the onmessage event occurs.

source.onmessage = function(event) {
document.getElementById("myDIV").innerHTML += event.data + "
";
};

Output:

The server time is: Tue, 15 Nov 2022 15:59:27 +0000
The server time is: Tue, 15 Nov 2022 15:59:30 +0000
The server time is: Tue, 15 Nov 2022 15:59:34 +0000

etc. Full code: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmessage_sse

Questions: What is the php code in /html/demo_sse.php? Not specified. Why is there is a ; after the } in this clause(1)? What is “EventSource”, a built-in? What is .data? Is everything after “.” a built-in? .onopen seems like a DOM event, but haven’t read about it. Does this clause define, and execute a function? That would be unusual. What is “typeof”? The if line is confusing, in general.

(1)<anthro, 11/15>: could be optional, seems to follow some function-defs.

H5S4: addEventListener: W3<a-r>:The addEventListener() method attaches an event handler to an element.

element.addEventListener(event, function, useCapture)

Parameter	Description
event	Required. The name of the event. Do not use the “on” prefix. Use “click” not “onclick”. The Complete List of DOM Events.
function	Required. The function to run when the event occurs.
useCapture	Optional (default = false). false – The handler is executed in the bubbling phase. true – The handler is executed in the capturing phase.

Return value: none. Example: Click the button to change its background color:

<button id="myBtn">Try it</button>

<script> document.getElementById("myBtn").addEventListener("click", function() {
  this.style.backgroundColor = "red";
}); </script>

H5S5: onload:

W3<a-r>: Execute a JavaScript immediately after a page has been loaded: The onload event occurs when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). The onload event can be used to check the visitor’s browser type and browser version, and load the proper version of the web page based on the information.

H6S1: HTML element:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onload_html

H6S2: JS object:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onload_dom

H6S3: JS object, addEventListener:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onload_addeventlistener

H4S6: DOM-objs:

https://www.w3schools.com/jsref/dom_obj_document.asp

H4S7: EventTarget:

dev-Mozilla<a-r>: The EventTarget | interface is implemented by objects that can receive events and may have listeners for them. In other words, any target of events implements the three methods associated with this interface.

EventTarget.addEventListener()

<dev-Mozilla>: Registers an event handler of a specific event | type on the EventTarget.

H3S2: Pseudo.hack-extensions to built.in-HTML,interactivity:

Hu: HTML-interactivity falls into 2 broad categories: forms and links, of which buttons are a subcategory. Some websites prefer to have more custom interactions, whatever they may be, and some of these can be handled by JavaScript.

H4S1: jQuery:

<Lengstorf, Leggetter pg-22> Handling user events: When the user interacts with the app—whether it’s a click, a tap, or a swipe—the browser fires an event that jQuery can detect and perform a task based on the user’s action. Hu: Question: how do we use jQuery, inside WAMP?<WP.MIC-H2S70> Including jQuery:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/03.js"></script>
</body>

H5S1: Code example <via Lengstorf, Leggetter>, dynamic highlighting interaction, built-in, w/ jQuery:

(function($) {
 // Highlights the element contained in the <code> tag
 $('code').hover(
 function() {
 var elem = $(getElementName(this)),
 bg = elem.css("background");
 elem.data('bg-orig', bg).css({ "background": "yellow" });
 },
 function() {
 var elem = $(getElementName(this)),
 bg = elem.data('bg-orig');
 $(elem).css({ "background": bg });
 }
 );
 /**
 * Retrieves the element name contained within a code tag
 */
 function getElementName(element) {
 return String($(element).text().match(/\w+/));
 }
})(jQuery);

• Bind two functions to the hover event for each tag: one for when the mouse enters the hover state, and one for when it exits the hover.
• Detect the tag name inside the element using jQuery’s .text() method; use a simple regular expression to remove any characters that are not alphanumeric (to remove the opening and closing brackets); and cast the matched string as a String to prevent a bug.
• On hover, find matching elements, store the original background color on each element using .data(); then change the background color to yellow using .css().
• When the hover ends, retrieve the original background color with .data(); then restore it using .css(

H3S3: JS.front-end,library:

H4S1: JS-operators:

H5S1: W3<a-r>: The Addition Assignment Operator (+=) adds a value to a variable.

let x = 10;
x += 5;

Ouput: 15. Example 2:

const element = document.getElementById("demo");
  element.innerHTML += element.innerHTML;

Hu: += can be used with a string, to concatenate a new string, to its end. The following code generates a button, that adds a new instance of the existing string, in<p id=”demo”>#

<button onclick="myFunction()">Try it</button>
<p id="demo">Click the button double this text.</p>

<script>
function myFunction() {
  const element = document.getElementById("demo");
  element.innerHTML += element.innerHTML;
}
</script>

H4S2: Variable-types:

H5S1: const keyword:

Hu: Used to declare a variable<unintuitive>that cannot be redeclared, with a different value, reassigned; such variables have block scope<?>JavaScript const variables must be assigned a value when they are declared.

H5S2: var-scope in JS:

Hu: According to JS, only variables declared without an explicit keyword #, while the containing script is not in ‘strict’ mode, will have global | scope, if declared inside a function. We tested this:

<button type="button" id="start" onclick="variable_test()">Test-declare</button>
<button type="button" id="start" onclick="console_log()">Console-log</button>
<script> function variable_test() {
	const carName = "Volvo";
}
function console_log() {
	console.log(carName);
}
	</script>
<!-- https://flare/testing-progress/JavaScript/variable.scope-test.php -->
<!-- test-prog: 
	Testing:
		After variable_test is clicked, when no keyword is used in var-declr #
		'Volvo' is printed to console, after console_log is also run. 
			Test passed. 
		Console_log clicked, but variable_test was not previously clicked. 
		Nothing is printed to console. Error: Uncaught ReferenceError: carName is not defined
			Test passed. 
		'var' keyword is used to declare carName var; variable_name is clicked,
		then console_log is clicked. 
			Test passed: ReferenceError: carName is not defined. Expected based on doc. 
		'let' keyword is used to declare carName. 
			Test passed: ReferenceError: carName is not defined.
		'const' keyword is used to declare carName. 
			Test passed: ReferenceError: carName is not defined.
	Doc: https://www.w3schools.com/js/js_scope.asp -->

H4S3: Try and catch:

Hu: The try and catch method is a unique | implementation of a conditional–str in JS, for a specific | case:

The try statement defines a code block to run (to try).
The catch statement defines a code block to handle any error.
The finally statement defines a code block to run regardless of the result.
The throw statement defines a custom error.

<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

Hu: When used inside this threaded-bracket str, the catch statement will catch whatever is defined within the try | block, whereas without it, there’s no way to directly | refer to an obj that is itself erroneous<Turing>. Perhaps the code looks a bit sloppy with this inclusion, I would use it, half, in testing | documents # err.message itself is able to catch the error, and the rest, defining where to display:

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}

W3: If you use throw together with try and catch, you can control program flow and generate custom error messages. Hu: A user.defined-throw will create a custom | return for a particular execution case, such as x < 5, where x is a variable defined in the function, and this custom | return can be equated to an error. The value following the throw | keyword is what is returned. W3: The finally statement lets you execute code, after try and catch, regardless of the result:

<script>
function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "is empty";
    if(isNaN(x)) throw "is not a number";
    x = Number(x);
    if(x > 10)   throw "is too high";
    if(x < 5)  throw "is too low";
  }
  catch(err) {
    message.innerHTML = "Input " + err;
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

Using the Test Input field here, the output to the “demo” and “p01” are:

1) If the input is <5: the demo input field is wiped, by finally, and “Input is too low” is displayed in p01. 2) If the input is between 5 and 10: the demo input field is wiped, by finally, and nothing is displayed in p01. 3) If the input is >10, the demo input field is wiped, by finally, and “Input is too high” is displayed in p01.

H4S4: Promises:

Hu: Promises were first covered in<WP.MIC-H2S123,H3S1>

H5S1: Promise.prototype.then(): Mozilla: The then() method returns a Promise. It takes up to two arguments: callback functions for the fulfilled and rejected cases of the Promise. Demo:

const promise1 = new Promise((resolve, reject) => {
  resolve('Success!');
});
promise1.then((value) => {
  console.log(value);
  // expected output: "Success!"
});

Output to console: “Success!” Promise(arguments):

executor

A function to be executed by the constructor. It receives two | functions as parameters: resolutionFunc and rejectionFunc. Any errors thrown in the executor will cause the promise to be rejected, and the return value will be neglected. The semantics of executor are detailed below.

then(onFulfilled)
then(onFulfilled, onRejected)
then(
  (value) => { /* fulfillment handler */ },
  (reason) => { /* rejection handler */ },
);

Mozilla<a-r>: A Function | asynchronously called if the Promise is fulfilled. This function has one argument, the fulfillment value. If it is not a function, it is internally | replaced with an identity function ((x) => x) which simply passes the fulfillment value forward.

H4S5: Interfaces:

Hu: An interface is analogous<half>to a func–fam in PHP, usually defined separately; however, in JS, the fam is described under a single | header, such as MediaStream, and they require a variable to be declared before they can be used, because they are assumed to act upon a value<Turing>. Generally, interfaces are associated with object.oriented-prog<WP.MIC-H2S134>, but JS obviously abuses this feature, which they did not invent, to no fault of Eich’s, beyond the abuse, because he’s not the one who claimed their invention. H5S1: Idiots prefer JS because they fallaciously associated it with o.o-p, but this association, is due to the fact that JS itself fallaciously over-defined funcs in o.o-p terms, a true sh*t-sammich<sorry>. Making a Mormon almost curse will be remembered<👼> H5S2: Further confounding general | comprehension of JS-syntax is the sloppy ‘.’ notation separating value and method, in the interface | setup, and I’m pretty sure the application of this already loosey-goose is itself malpracticed via ambiguous definitions, at least 5% upwards 20% of the time, with about half being itself o.o-p.

H3S4: JS-APIs:

Read: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction

H3S5: Calling a same.script-PHP,func from JS function-exec<Turings-dirty!>

A standard way to run a PHP-func in an external | script is with AJAX<WP.MIC-H2S121><WP.MIC-H2S123>

H4S1: HTML/JS vs PHP Multi-threading:

<WP.MIC-H2S47>: We need a double-thread, where we feed what is in JS into PHP as an argument, and then we need to grab the output, out, and assign that, as the value of replay.src<WP.MIC-H2S123,H3S4.H4S6-H5S1,H5S1><WP.MIC-H2S88>and this is thematic, of the necessity to use PHP to parse the output of an HTTP-req.

Previously, it was conceived # that running PHP code repeatedly, like JS is able to do, more natively, thanks to setInterval, and supporting | functionality, righteously, because JS runs in the browser, and is responsive to user | interaction, was impossible, but with the possibility of nesting a <?php ?> encapsulation<#n-p><WP.MIC-H2S35,H3S1.H4S1-H5S1>, we can run a PHP-func, upon each loop, at various depths, triggered by the setInterval; however, more research is needed, including the potential of re-implementing an intermediate HTTP-req, to also feed arguments with data from JS, such as user | input, also, into the php | func; possibly, earlier, where that user input is captured, we can declare a php-var, within a separate | encap. In any case, we will shelf this case, for now.

H5S1: Critical error-case: calling PHP w/ require:

C:\wamp64\www\flare\testing-progress\MediaDevices\record.play-remote,auto; comments from the prior document in HTML are being passed as part of the string<WP.MIC-H2S116>as a result of some broken parsing in the HTTP.req-pathway; we’ll need to bump these comments into PHP in the main-docs.

References:

Realtime Web Apps by Lengstorf and Leggetter, via Apress.

https://www.w3schools.com/php/php_ajax_php.asp

https://www.w3schools.com/js/js_ajax_php.asp

https://www.w3schools.com/js/js_htmldom.asp

https://www.w3schools.com/js/js_operators.asp

https://www.w3schools.com/js/js_validation.asp

https://www.w3schools.com/js/js_htmldom_css.asp

https://www.w3schools.com/js/js_htmldom_events.asp

https://www.w3schools.com/jsref/dom_obj_event.asp, https://www.w3schools.com/js/js_htmldom_events.asp

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

https://www.w3schools.com/jsref/event_onload.asp

https://www.w3schools.com/jsref/prop_text_value.asp

https://www.w3schools.com/js/js_errors.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

AJAX:

https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp

https://www.w3schools.com/xml/xml_whatis.asp

https://www.w3schools.com/xml/xml_syntax.asp

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/load_event

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseText

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

APIs:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction

Variables:

https://www.w3schools.com/js/js_scope.asp

https://github.com/yakun-hu/flare/blob/main/testing-progress/JavaScript/Test-passed/variable.scope-test.php

Calling PHP from JS:

https://sebhastian.com/call-php-function-from-javascript/: from this video, I got the idea that a php-encap can be used just as well in a JS-func as in HTML, but the article does not address how to feed what is from JS # as an argument into the PHP-func.