HyperAccess Development Page

Overview

Use for

JavaScript Can Change HTML Content
- document.getElementById("demo").innerHTML = "Hello JavaScript";
JavaScript Can Change HTML Attribute Values
- document.getElementById('myImage').src='pic_bulbon.gif
JavaScript Can Change HTML Styles (CSS)
- - document.getElementById("demo").style.fontSize = "35px";
JavaScript Can Hide/Show HTML Elements
- - document.getElementById("demo").style.display = "none";

How to include in html document via

use <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script > -
Placing scripts at the bottom of the body tag element improves the display speed, because script interpretation slows down the display.
in externl files < script> src="myScript.js" </script > can use a full url

libraries / frameworks

Jquery
React JS
Vue.js

References

Langauge snapshot

Variables	Keywords echo are case-insensitive, variables are case-sensitive. delared by var (or let) for reassigned variables, const for variable that cannot be reassigned Names rules A variable starts with a letter, or $ _ , They can contain letters, digits underscores and dollar signs Data types, numbers, strings, objects, When adding a number and a string, JavaScript will treat the number as a string
Operators	Arithmetic operators: + - * / % ** ++ -- Assignment operators: = += -= /= %= Comparison operators: == === (= and same type) != <> > < >= <= Increment/Decrement operators: ++$x(pre-increment) $x++(post-increment) ans -- options Logical operators: and, or, xor,&&, \|\| and ! === (equal value and equal type), String operators: . ($x. $y ) and .= $x .= $y Array operators: Examples Conditional assignment operators:Examples Full list
statements	termaites by ;
Arrays	JavaScript does not support arrays with named indexes. In JavaScript, arrays always use numbered indexes. Array are dynamic add via push or index Example var cars = ["Saab", "Volvo", "BMW"]; cars[0] = "Opel"; document.getElementById("demo").innerHTML = cars[0]; you can have variables of different types in the same Array. Elements can be functions ie myArray[0] = Date.now; myArray[1] = myFunction; Array Properties and Methods create empty array by var array = [] ; length, sort looping through use stand for loop and the function array.forEach(function) adding items use push myarray.push("item") ; or by index which can leave holes
Objects	in javascript most varaiables are actually objects, however in this case we take objects for building assocaited arrays ie arrays of key, values, Created : var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; Objects are mutable: They are addressed by reference, not by value. ie var x = person; create a pointer/reference not a new item/copy Accessing: person.age ; person["age"] ; x= "age" ; person[x] ; are all valid loop using for (x in person) { txt += person[x];} w3 objects
Conditional Statements	Use if to specify a block of code to be executed, if a specified condition is true Use else to specify a block of code to be executed, if the same condition is false Use else if to specify a new condition to test, if the first condition is false Use switch to specify many alternative blocks of code to be executed full details of Conditional Statements
JSON	Exchanging data between a browser and a server, the data can only be text. JSON is text, and we can convert any JavaScript object into JSON, and send JSON to the server. We can also convert any JSON received from the server into JavaScript objects. This way we can work with the data as JavaScript objects, with no complicated parsing and translations. Sending data convert from rray to JSON - var myJSON = JSON.stringify(myObj); Receiving data convert from JSON - var myObj = JSON.parse(myJSON);
Built in Functions	PHP has more than 1000 built-in functions Including:- Dates: date(format,timestamp) : format= Y/m/d and l day of week Files: abilty to open/create read/write files, search trees /upload files etc Read more Filters: used to validate and sanitize external input. Read More

Promises

JavaScript is single threaded, meaning that two bits of script cannot run at the same time; they have to run one after another. A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Normally these events are handled by using callbacks events and event complete blocks. whilst Events are great for things that can happen multiple times on the same object when you do not care for the order other with database, queues you must hand the events in order, promises enable a simple syntax to hand async chained events

Example of basic Promise

Example Trying to fetch data from somewhere else on the internet. We don't get the data eventually, because it really depends on the user's internet connection. Even though we don't know exactly when the data will arrive, we can add a then handler to our promise so that we can do something about it once it has arrived.


						
fetch("https://somewebsite.com/posts/1")
      .then((response) => {
              // when data returned process it whenever it return
              console.log(response.ok)
      } )
.catch((err) => {
    // if error is return ie 404 
    console.error("Failed to fetch post!")
})

Queuing asynchronous actions -Chaining

Asynchronous database call
calls php to return JSON from databse, on success process json data


 fetch('pdo-select-fetch.php', {
         method: 'post',
         body: JSON.stringify(data)
      }).then(function (response) {
             return response.json();
      })
      .then(function (data) {		
		     for(i =0 ; i < data.length ; i++)
             {         .... }

Summary
used to simplfy the coding of async fucntion enable you to conactae on what to do rather then timing of events

References

Read me

web.dev

Code structures

Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus

DOM Manipulation selection

Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus

DOM Manipulation changes

Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus

References

For further information

Javascript Cheatsheet WIP Comming soon

JavaScript makes your site or project dynamic

Use for

How to include in html document via

libraries / frameworks

References

References