Recursive Functions

Recursive functions call themselves
Make sure to write the base exit & Modify the input counter or you will shoot for infinity.

To read more about recursion here is a good blog post: LINK

Here is an example:

This function will print:
5
4
3
2
1

An that is a basic intro to recursion.

Now I read an article that says that you can create the Fibonacci sequence using Recursion.

Example of the Fibonacci sequence:
[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

and here is my code to generate recursive Fibonacci:

and here is the run time:

 

Latter I found a more compact solution in the internet:

This little code might seem better but is not, this has an exponential run time, my solution that has more code, actually has a much much better execution time.

here is the run-time for the same tests using the short code (Note I had to delete the call for fib 50 because would just take forever.):


Here are a couple of basic functions that use recursion:


Here is my take on the recursive solution to the Merge-Sort algorithm:

If you are new to recursive functions this might not make sense, but the real importance goes in the line with the code: return joinarr( myMerge(h1), myMerge(h2) )

Here is the complete code:

.

 


Category: JS | Comments Off on Recursive Functions

JavaScript DOM Manipulation

Here are some of my notes in how to do some of the dome manipulation using JavaScript.

How to change a picture when clicking a button

There are several ways to do this one is, “event listeners”, and other would be using “onclick”

In the following examples, we have the pictures in a folder call “IMG” and I name them numerically, from 0 to 36. and the js code generate a random number and it gets cocatenated in to a string containing the location and name of the file to load to img-frame.

Example using Function and onclick=””

Example using event listeners.

Here are some examples of the code working:

works good.

.

Category: JS | Comments Off on JavaScript DOM Manipulation

XMLHttp

The XMLHttpRequest API : Link

Basic example of a call processed:

.

Category: JS | Comments Off on XMLHttp

Fetch() API – JavaScript

Before you study this topic make sure to understand: PromisesJSON 

Video Tutorial Resources: Link1Link2 – Link3

Examples using the “FETCH() API

This example is from this: Video-Link, in this example we:

  • create a constant named “root” and load it with a Free API-Url 
  • Invoke fetch( root, { method: “GET” } ) with the parameters “root”, and the method: “GET”
  • Use “.then” passing an anonymous function that receives the response when the promise is fulfill
  • This anonymous uses the proto method “.json” to modify the data, and return it.
  • Use “.then” by chaining, it receives the data and prints it.

In the next example we do the same but we add “.catch()” so we can catch if the API do not provide a 200 response:

Another example:

One practice exercise:

Here we are getting the Title: “Harry Potter 1 and the Philosopher’s Stone” from the API and rend it to the DOM  <div id=”div1″>

 

.

 

Category: JS | Comments Off on Fetch() API – JavaScript

Web-Pack

Exaple :

 

.

Category: JS | Comments Off on Web-Pack

ES7

Here is the information about ES7, but before we get there there are a couple of configurations that we need to do to the Dev-Environment. first you need the first part of the environment on this: link

Make sure that you do the last part in the bottom for ED7, and when finish check your file: package.json the part of babel should have the “es2016”  if not type it yourself.

 


 

.

Category: JS | Comments Off on ES7

ES6

Here are some links and information that will help us in the learning and implementation of the JavaScript 2015-ES6, some of the new features do the same that old ones do but in many cases the code running under the hood has been upgrade to be less taxing on the hardware and system requirements, in some other cases make it so we do the same but using less code and making it less redundant, and in some other cases it give us new features that previously exist only in our wishlist.

Whit no more delay, here are the links and examples for ES6.

  • Exploring ES6 (online book): LInk  —  Link2
  • ES6 New Features (online guide): LInk
  • Top 10 ES6 Features Every Busy JavaScript Developer Must Know: Link
  • How to learn ES6: Link
  • ES6 CheatSheets: LINK   —   Link2

Variables:

Template Literals:

This would be a new way for Concatenation and String-Interpolation, using “Backtics” [ ` ] <– key left of key [ 1 ]

The Spread Operator:

This provide a way to manipulate Arrays and Objects.

Another example would be:

The spread operator is an Array, and you can use any of the array methods. on it.

Destructuring Assignment – Arrays

This allow to extract data from arrays and objects into separate variables.

Destructuring Assignment – Objects

Arrow Functions:

On Arrow functions () => {}   the word “this” is not bind to the function but to the object where the function is encapsulated.


Build-In Methods

Map() Method:

This calls a function on each element on the array,

Filter() Method:

Returns a new array based on the original:

repeat()

startWith()  endsWith()  includes()

isFinite()

 

arr.reduce(…)

The “.reduce” method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

—————————————————–

Adding values from an array or numbers (next two code examples):

Note: the accumulator:

The accumulator is the first parameter: arr.reduce( ( accum, cval ) => { return accum += cval }, Accumulator );

and the Accumulator can have an initial value.

 

—————————————————–

Array to Object, with number or occurances:

The result will be:

—————————————————–

Adding values from an array of objects:

—————————————————–

Average of an Array of numbers:

—————————————————–

Concatenation of sub arrays: 

—————————————————–

Function Composition:

—————————————————–

Array of names to array of names.length:

Note:  you can do this easier with .map(…) just want to use .push(..) inside of .reduce(…) this case.

—————————————————–

Array of names to Object of name: length  

 

 

Other Methods:

There are lots of methods that can help you in your code, Here is list of Array methods from MDN: Link

And here is a list of Object Methods from MDN: Link


Modules:

Modules allow to spread data among different files, using “Export & Import” and works with: Fuctions, Objects, Primitive variables. as “let or const

The next code is an example of a regular way

Default Exports

Now the next code is based on the last one but will use the default method.

Classes

Example of a basic Class:

Inheritance in ES6 Classes or “extends” —> Example 1

In this example we are using the inherited “ greet() ” function but if you want to have one different you just need to write one and that will overwrite the one inherited.

Then we can add more data to make the Class Snake more unique. and we will overwrite the “greet()” method

** Static Methods in Classes:

This allows you access to use the methods of a class without need to create a “NEW” instance of the class.

** Classes & Prototypes

Data Structures

Maps:

Maps have Keys & Values just like an Object, the difference is that in objects we can not use some words as a key because is a “reserve word” and the key in an object are primarily strings, however in Maps you can use any kind of “data type” as a key, like: numbers, objects, and even functions.

Converting a two dimensional Array to a Map

Application, we will count how many times a character repeats on a string.

 

Closures

This tool allow us to create function factories here is one example:

Closures:  Private Methods

Generators

This new feature allow a function to Pause, return the current state of the Generator, then resume from it left it. To create ” function* ” to pause use “yield” and to resume “.next()” and we DO NOT use the word “new”  when creating instances of the generator.

I encounter several problems here find solution to WebPack

 

Asynchronous Programming

Promises:

Promises can exist in one of the three following states:

  1. pending.
  2. fulfilled.
  3. rejected.

HTTP & Fetch:

  • GET: retrives data and has no secondary effect.
  • POST: sends data to a server to add resources.
  • HEAD: ask for metadata information.
  • DELETE: removes a specify resource.
  • PATCH: partially modify the resource.

To practice go to:  jsonplaceholder.typicode.com this is a tool that simulates an API, for testing.

Scroll down and click the link: ” GET    /post/1 ” this will take you to a page were you will find some return JSON data.

But what we really want is to have this data in our program so we can manipulate it, to do this we use the following code:

But what we really want is the data, to do that we will go to the: “ __proto__: Response” and the method: ” json ”  which will convert this data into a pure JSON Object.

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

Now lest do another example using the free API for Books from Google:

in this case we got the information for a book: “ title:Harry Potter 1 and the Philosopher’s Stone

 

 

.

Category: JS | Comments Off on ES6

Utah JS – CLOSURES

So…  What is a Closure?

MDN: Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions ‘remember’ the environment in which they were created.

The way I see it: A closure is an “Individual Instance of Function withing a Function that refer to its own Independent variables” and those are “_Private variables” that  belong to this specific instance, those variables do not get Garbage Collected. This means that the closure remembers and have access to “its own instance of: Siblings-Variables and Environment” from where this closure was created, even after the “Outter: Function, variables, & Environment” was Garbage collected.

This closures are Inner Functions that have access to the Outer function, and global variables, the “Inner Closure function” can be “Named” or “Anonymous”.

Whit this information we can say that closures are” New, Secure, and Independient Instances of a Functin withing a Function that can remember the enviroment in which was created. Now lest do a little comparation with the last class of Prototype.

Things to keep in mind when using JS-Closures

  • They are secure (Notpads).
  • Not a Silver Bullet.
  • Heavy on the resources.

In JavaScript often there are few ways to do the same thing, so choose wisely if you need to use JS-Closures, the following are some examples of Closures in Action.

Jen Silva Taco-Truck

This example is about “Jen“, she grab her savings and purchase a Taco-Truck, in this enterprise she decide to use the power of JS-Closures to run the Payroll, click the following link to see a website with the live example:  Jen Taco-Truck.

This example provide a hypothetical example of one use of the JS-Closures.

OCTO-CATCH

For  “JS” Jen Silva taco business has been good and now she es branching out, she partner with the hotel HYATT ZIVA down in Puerto Vallarta Mexico, there she will run a side business where the guest of the hotel can Scuba-Dive to Catch Octopus. The following is an explanation of how the business work:

You Purchase a Diving Package:

  • 5 Dives.
  • 5 Oxygen Tanks, each tank last 1 hour ( 1/3 Rule ).
  • Number of Octopus allow to catch on each dive: Variate.
  • Morning Catch Free Game (at your own risk).

 

Here is the official website: OCTO-CATCH.

JS CENTURY BANK

Times has bee good and “JS” decide to branch out again and now she has open a Bank. Yes you heard it right, one of those financial institutions where we deposit our money for safe keeping and other reasons, and she decide to use JavaScript Closures to handle the Account Information required in such enterprise.

The mechanics are simple, when a new customer desires to open an account an employee uses the company portal to create the account make deposits and print information about the Accounts.

Here is the official website: JS CENTURY BANK.

Wrap-Up

JavaScript Closures is one great tool you should have in your tool box, we already know that this is Not a Silver Bullet but it is a bullet, and under right circumstances you can use it, and Kill IT, just remember that tools are as good as the hands that use them, so we need to keep growing at our craft, and practice.

I hope this article on JS-Closures was of help to you, now is time for a call to ACTION.

  1. Study Closures.
  2. Thanks event organizers.
  3. Add me to LinkedIn: Edmundo Rubio.

All code is Live in the websites and the following: GitHub Repo.

I leave you with a philosophical thought:

Coding is when we take time to find and develop solutions for every day problems, combining the computing power of machines and the far reach of the internet, to create TOOLS that are easily available and a solution to those every day problems.

“First we build tools, then they build us”  Marshall McLuhan.

Category: JS | Comments Off on Utah JS – CLOSURES

JSON

JavaScript Object Notation === JSON

Link to validate JSON:   JSONLint

JSON is the standard way to manipulate and transfer data.

Here is a 30 minute video that teach the basics of JSON & AJAX: Link  –  Video

Using Handlebars.js : Video

For an extensive list of API from MDN: Link

myjson.com: Link

Create your own JSON files and hosted in the net, jsonblob.com : Link

. . . . . . . . . . . . . . .

Basic NPM Server

This server looks for changes and auto restart when changes are done similar to the Web-Pack Auto-Reload

After installation, to used, in the terminal type: ” nodemon  <file-name> ”

. . . . . . . . . . . . . . .

JSON

——————————————————————

Example: Js-Object  –> JSON  –>  Js-Object

Using an Object and Posting information in DOM.

Results of previous code on ” index.html ” :

——————————————————————

Here is one a little more fun:

It does the same that the one before but It gets it data from an external file: “data.json”, to make it work make sure that in the Indext.html you have a <div id=”root”>.

here is the configuration of the files:

Here is the code:

Results in the DOM:

 

.

Category: JS | Comments Off on JSON

JS Numbers

Things related to Numbers

The Object Number.  MDN  —  W3

The Object Math. W3  —  MDN


Round a Number to a Int.

Round to TWO Decimals   — Float —

Round Up  or Down a number:

Round Up or Down to (x) decimals. — String —

Is Integer?

String to Number:

 Number toString:

Square Root of a number:

How to get the Decimals form a Number

Random Numbers

 

 

Computing the least common multiple of an integer array from: LINK

ES5:

ES6:

sd

.

Category: JS | Comments Off on JS Numbers

Closures Taco-Truck

So what is closure in javascript?

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The way I see it: A closure is an “Individual Instance of Function withing a Function that refer to its own Independent variables” and those are “_Private variables” that  belong to this specific instance, those variables do not get Garbage Collected.

This means that the closure remembers and have access to “its own instance of: Siblings-Variables and Environment” from where this closure was created, even after the “Outter: Function, variables, & Environment” was Garbage collected.

This closures are Inner Functions that have access to the Outer function, and global variables, the “Inner Closure function” can be “Named” or “Anonymous

One use for closures are creation of independent Instances of a specific algorithm.

For more documentation: MDN  —  medium  — JS-Blog

 

Example:

Taco-Truck

This is “Jennifer“, she grab her saivings and purchase a Taco-Truck, also hire two employees to run the enterprise: “Elena & Maria“, and some times her 17 year old brother “Hector” works few days, what you don’t know is that Jennifer also likes JavaScript and she decide to create a program to do the payroll using “JavaScript Closures

Elena and Maria both get paid $10.00 USD per hour and Hector $8.00, to keep the quality, and customer satisfaction HIGH she has a FaceBook page where costumes can give likes to the employee that give the best service, and whoever gets the most likes gets a $15.00 USD Bonus to be pay with next week check.

with the previous information “Jennifer” wrote the next code:

Then open the console and play with the following commands:

  • check;       -to see the function’s
  • maria();    -to run the “maria” instance of the function.
  • elena()      -to run the “elena” instance of the function.
  • console.dir(elena);    -to analize the current state of the “elena” instance function, and its variables (closures).

Here is an example of some of the commands:

There you will be able to see how you can create a new instance for each employee, also you can analize the current variables values by using the console.dir(elena); command. those variables are totally independent of each other, and they not get affected when another instances is modify.

Other Applications for CLOSURES:

Here is a real life example where a closures to update the DOM: JsBin

 

Articles & Examples from the Internet:

Articles with info in Closures: Bov  — medium  —  JERF

Example 1:

Example 2:

In the JavaScript (or any ECMAScript) language, in particular, closures are useful in hiding the implementation of functionality while still revealing the interface.

For example, imagine you are writing a class of date utility methods and you want to allow users to lookup weekday names by index but you don’t want them to be able to modify the array of names you use under the hood.

Note that the days array could simply be stored as a property of the dateUtil object but then it would be visible to users of the script and they could even change it if they wanted, without even needing your source code. However, since it’s enclosed by the anonymous function which returns the date lookup function it is only accessible by the lookup function so it is now tamper-proof.

 

x

Category: JS | Comments Off on Closures Taco-Truck

Higher Order Functions -or- Callback Functions

Higher Order Functions -or- Callback Functions

  • Functions that ACCEPT other functions as “Parameter ===  Call-Back-Function”.
  • Enhance the behavior of other functions.

Higher Order Functions Accept Call-Back-Function as parameter.

First let me start with a example of a call back, that shows why this was used for the connection to the API.

In JavaScript Function are: “Firs Class Objects” and you can pass: “Functions” into “Functions” as arguments.

Simple Example:

Simple Example to choose add or Multiply:

Before we dig into the Built-In Functions, lest study the Fat Arrow Function:

 

Specifying parameters:

Specifying a body:

Example of both:

 

for more information read the full article: LINK   –    LINK2

Wes Bos Explanation: LINK

Example using Traditional syntax and Arrow syntax:

Traditional Syntax:

Arrow Syntax:

 

Built-In Functions:

You can create your own functions, but there are few that some one already create for us, they are very useful and here is a list of those with examples, for a complete list see: LINK

01- arr.forEach();

Exactly like a For, but you no need to take the counter to access each element in the array

The callback receives three arguments:

  1. The current element value
  2. The current element index
  3. The array being traversed

02 – arr.filter();

this higher-order function returns a new subarray with every element from the original array that passes on the test provided by callback, i.e., if callback returns true for a particular element, then this element gets included in the subarray to be returned.

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1 – callback is applied to the 1st element of the original array, and if the result is true, then this element gets included in the new array to be returned.
2 – callback is applied to the 2nd element of the original array, and if the result is true, then this element gets included in the new array to be returned.
3 – And so on… until the last element of the array is processed, then the new array is returned as the result of fi

03- arr.map();

this returns a new array with the results of callback applied to every element from the original array, in the same order.

  • The callback receives three arguments:
  • The current element value
  • The current element index

The array being traversedThis is how it works:

1- callback is applied to the 1st element of the original array, and the result is stored as the 1st element of the new array to be returned.
2- callback is now applied to the 2nd element of the original array, and the result is stored as the 2nd element of the new array to be returned.
3- And so on… until the last element of the array is processed, then the new array is returned as the result of map.

Next we will modify again the program by mapping the calculation of civilians in a separated step, right after filter. This way, map will result in a new array containing the number of civilians, in the same order of the starships elements right after filter. Now, forEach can be called over the civilian numbers, simply to sum up the civilians total.

04- arr.reduce();

this higher-order function reduces an array into a single value, as explained in Understand Javascript Array Reduce in 1 Minute[7]. It first applies callback against initialValue and then consecutively on each value of the array, from left to right.

The callback receives four arguments:

  • The previous value
  • The current value
  • The current index
  • The array being traversed

This is how it works:

1- callback is applied to initialValue, which comes as the 2nd argument (the current value).
2- callback is now applied to the 1st element of the array (which comes as the 2nd argument, the current value), and the result of the previous step comes as the 1st argument, the previous value).
3- callback is now applied to the 2st element of the array (which comes as the 2nd argument, the current value), and the result of the previous step comes as the 1st argument, the previous value).
4- And so on… until the last element of the array is processed, and this final result is then returned as the result of reduce.

05- arr.some();

this higher-order function returns true if there is any element in the array that passes on the test provided by callback, and false otherwise.

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1- callback is applied to the 1st element of the array, and if the result is true, then somereturns true.
2- Otherwise, callback is applied to the 2nd element of the array, and again if the result is true, then some returns true.
3- And so on… until the last element of the array is processed, if true was never returned then some returns false.

06- arr.every();

This higher-order function returns true if every element in the array passes on the test provided by callback, and false otherwise.

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1- callback is applied to the 1st element of the array, and if the result is false, then every returns false.
2- Otherwise, callback is applied to the 2nd element of the array, and again if the result is false, then every returns false.
3- And so on… until the last element of the every is processed, if false was never returned then every returns true.

07- arr.finIndex();

this will provide the index of the first element in which the test is “True”, and ignore all the rest, but if none is true it will return ” -1 “:

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1- callback is applied to the 1st element of the original array, and if the result is true, then this element is returned as the result of find/findIndex.
2- Otherwise, callback is applied to the 2nd element of the original array, and again if the result is true, then this element is returned as the result of find/findIndex.
3- And so on… until the last element of the array is processed, if true was never returned then find returns undefined / findIndex returns -1.

07- arr.YOUR-OWN();

Here is where you can create your own function to fit your specific and unique needs.

x

Category: JS | Comments Off on Higher Order Functions -or- Callback Functions

JavaScript promises

To Read more about Promises: MDN – Link1

This is an alternative system for managing Async-Programming in JavaScript, alternative because we have other ways to do this like Call-Backs. a really good explanation is in this videos: Link – Link2 Art1 – Art2

A promise is always in one of the following staties:

  1. Pending: Initial state, not fulfilled nor rejected.
  2. Fulfilled: Successful operation.
  3. Rejected: Failed operation.
  4. Settled: The promise is either: Fulfilled or Rejected, but not pending

Here is another graphic of the structure of the promise:

In the following example we use the: ” setTimeout() ” to create a situation where we can decide if we want to resolve or reject our promise, depending in which is executed firs, change the values of the time to see how the promise is resolved or rejected using the the methods: then or catch.

You can handle multiple promises at once and wait until all have been “resolve” before continue with the code. again change the times in “myProm1” to see how it resolves or executes.

An this is how promises work.

3 Dallas Cowboys Promise examples:

Example: 1

Your uncle has PROMISE you that if the Dallas Cowboys wins tonight’s game, he will meet you at IN & OUT for a hamburgers dinner is on him. and here is the code.

 

Example: 2

Next week he PROMISE that if the Dallas Cowboys win you he will pay for the Hamburgers again, and he make another promise that if the N.Y. Giants lose he will pay the Tickets for the Movies. but if one of the conditions is not meet both PROMISES are off the table, is like all or nothing.

 

Example: 3

Dallas vs Packers games results for the Playoffs.

.

Category: JS | Comments Off on JavaScript promises

Debuger & Dev Tools

Links: Link-1

List of Console commands:

  • console.log(myVar, “String”);
  • console.info(myVar, “String”);
  • console.warn(myVar, “String”);
  • console.debug(myVar, “String”);
  • console.error(myVar, “String”);
  • console.log(‘%c I see smurfs!’, ‘color: green; font-weight: bold;’);
  • console.log(‘%c I see the sky!’, ‘background: blue; font-weight: bold;’);

Node Inspect –> debuging

This test will be executed running the Node.js environment, and first you need some code example:

Now in the terminal type the following commands.

Here you will get something like:

Here the code stops at the very beginning, and if you want to check any variables, you will get errors you need to CONTINUE to the 1st debugger statement. by entering: ” c ”

Before you start testing the variables you need to enter in REPL mode, by entering: ” repl ”

Now you can type any variable to see what is the value at this specific moment.

To move to the next DEBUGGER point you need to exit the REPL mode (  [Ctrl] + c  ) and then CONTINUE ( ” c ” ), then enter to REPL ( “repl” ) mode again

 

 

Applications (Resources) Panel:

  • local storage
  • Cookies
  • IndexDB
  • Session Storage
  • Cache
  • etc…

Udemy Lecture-6  3:55 min.

Test for Mobile Development (Elements):

In the top left corner there click the Icon that looks like a Phone in front of a Tablet “Toggle Device Toolbar” this should change the page view to a “Mobile Device”.

There you can choose what devise: Ipad, Iphone, Galaxy, etc…..   and you can also “Rotate” the view. to see how the site would be display when the user flips the phone.

 

Network Panel:

(dont forget to Disable Cache) Udemy Lecture-8  13:55 min.  Here you can

  • Record
  • Take Pictures.
  • See individual Files: Type, Size, Time to load.
  • Filter result by file type

Audits Panel

Makes an Audit of the Loading of the page, provide color Feed-Back and suggestions.

Go to the Audit Tabs. and select both Audits: “Network Utilization” and “Web Page Performance” then select: “Reload Page and Audit on Load” and click RUN and wait. Note: Make sure you dont have any Break-Points or those will stop the load and you will not be able to get your report.

You will get a Report with colors: Green, Yellow, Red and you know what each color mean.

  • When you see many files of the same type: “.css” “.js” etc.. you can combine some of those files to make the page rank better and faster.
  • You can also enable Compression (Uglify them) in some files to make them load faster.
  • Also you can Turn-On Browser Catching.
  • Check Un-Use CSS Rules and delete them

 

Google PageSpeed Insights

This might not be on the browser but definitely is a Developer Tool created by Google.

Go to this Link and paste the URL of the website that you want to analyze, this will add another way to Audit the page and find the recommendations provide by Google.

 


Notes in how to debug JavaScript Code

JSHint  /  JSLint  (“use strict”)

BREAK-POINTS:

  1. Standard Break Points.
  2. Conditional Break Points.

Open Dev-Tools / Sources

The standard Br-P’s: can be created and then play to review Variables at different times in the Code-Execution.

The Conditional Br-P’s: Create a regular Br-p. then Right-Click / Edit Break-Point.   then type your condition for this BR to be executed Example (  myNumber === 181 ) and “Enter”, it will look Yellow, this means is a “Conditional-BR”. Now Restart the Page: If the variable “myNumber” is not equal to “181” at the time of execution, the BR. will be skip.

—  —  —  —  —  —  —  —  —    Br-P Commands    —  —  —  —  —  —  —  —  —

Step Over: Create a Br-P. from were you want to go Line by Line. refresh and then press “Step Over” Note: (this will go line by line but will skip “FUNCTIONS“)

Step Into: Create a Br-P. from were you want to go Line by Line, refresh. You will notice that this goes Line by Line but: This will go Line by Line including “FUNCTIONS

Step Out: Same instructions  of “Step Into” but when you are done reviewing the FUNCTIONS click “Step Out” and it will go to the “Conventional Lines of Code

WATCHES:

   In the Right-Panel of the sources Tab.  is a “Watch Box” option. Go to the Center-Panel with the “file.js” and select the variable that you want to Watch, “Right-Click / Add Selected Tex to Watches“, also create a Br-P. and refresh the page, you also should create another Br-P, in the line of code that you would like to start reviewing the variable, and then use “Step Over” or “Step Into” to go line by line, but each time you can see the “Watch Box” the values of the the selected “Variable” at each specific line of code.

   Note:  You can “Add-Watch-Expressions” like: ” myArray” , ” myArray.length ” , “myArray[myArray.length-1]” ,  Etc….

SCOPE:

   Here you can find the values of many variables of that specific scope at that specific Br-P.

The CONSOLE:

You can use this commands in the Console and in your Code.js file

console.log(); Prinst to the Console

console.clear(); Clears the Console.

console.assert( expressions, “-m”); Custom-Made Errors:  Example: console.assert( arr.length >= 5, “Array length is: ” + arr.length);

console.table(var, [arr]); to see just specific items of a big “file.json” providing a array of Keys, and will print a “Table” Example:  Console.table(data, [“name”, “gender”, “email”]); x In the console you can see a very beautiful and sortable table. with the Colums: “Index”  –  “name”  –  “gender”  –  “email”.

Multi-Line Commands: We know that we can run JavaScript in the console, but evertytime you hit “Enter” it runs the code, so this keeps you coding one line at the time, if you want to type Two or more lines of code on the console before you execute them. To go to the following line without executing:  “Shift” + “Enter

 

Snippets:

Go to the Sources-Tab / Snippets-SubTab   (Video 42.08 mts)

You can write your own snippets to help you to run commands that help you.  Like STYLING an error in the console. Example: console.log(“%c Error”, “color: white; background red;”); or get the JQuery version.

 

Live Editing “file.js” :

Go to: Sources Tab / Sources SubTab: Select the “file.js” to Edit.  In the center pannel you will be able to edit the “file.js” you will see an Asterisk in the Name SubTab:  ” file.js* ” the asterisk meas it been changed, you can save that file by: Right-Click on the file “Save As…” give it a name, or you can Overwrite the current file by Clicking “Save” chose the location of your current file and click “Replace”

 

Call Stack:

Bottoms Up, something to be executed firs will be on the bottom of the stack.

This will not show all the variables like scope does, this will only show what functions have been call,

 

 

 

 


x 26.39

Category: JS | Comments Off on Debuger & Dev Tools

User Error Handling: Try, Throw, Catch.

Here we will learn how to handle the errors made for the User input.


Error Throw, Catch, Finally

Here is an example:

Imagine that you assign a new programmer in your team to handle the code for the response for the responses of a nonprofit organization, and just in case that there is an error in the code you wrap it in a TRY & CATCH statements, just in case that there is an error and to be able to catch it:

A secod code example:

 

x

 

Category: JS | Comments Off on User Error Handling: Try, Throw, Catch.

JQuery


Links: JQuery  –  GoogleHosted

JQuery allow: DOM Manipulation, Event Handling, and Animation.

x

Category: JS | Comments Off on JQuery

Event Listener

Notes:


Links: MDN  –  Tut1  –  W3

Example:

Adding a new line of Text to the body of the HTML document.

Example:  guestbook.mycode.website   –    ColorSquares

In the example GuestBook we add new paragraphs with customize text and color.

“Mouse Hover” + “window.onload”

In the calculator they use <p>  instead  of <li>     Udemy.com Video: Link  –  Github

x

Category: JS | Comments Off on Event Listener

JS Resources

This post is the place were I will put some of the links that contain some information that I found useful during my learning of J.S.

Tutorial: Tut.Point  –  W3S  –  MDN  –