Javascript Cheatsheet WIP Comming soon

JavaScript makes your site or project dynamic

JavaScript is a mostly used as a client-side scripting language (but can be used on server) mainly used to make web pages interactive and dynamic. JavaScript makes your site or project dynamic

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

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

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