welcome back you beautiful people in

this episode I want to show you guys

this technique and this technique I

learned after years and years of doing

programming writing functions and then

you know when I'm trying to add new

arguments the functions break and so

this is hopefully going to help you guys

out to keep your code maintainable and

you can do this on JavaScript or PHP or

any other language that has functions so

it's more of a technique

that you should consider at some point

in time it might make your life easier

in the long run when you have to you

know edit code that you've been building

for years and years or even months upon

months right because you don't want to

do much more edits than you should and

I'll get into the technique and I'll

explain it and hopefully you'll get to

see how powerful it is

as we go along in the process so let's

turn over to the code and here what we

have is a function that I created in

JavaScript called sum and sum the

function sum use uses these arguments so

we have set these that these required

arguments that are needed to be

submitted in order to get the sum okay

and you could you know these are random

things I just used it don't think of it

as any particular logic all that we're

doing is going we're just going to

calculate sum so that's what we're doing

here we get this we have we create some

variable and then we add up all these

arguments here and then we return some

and when we do that without unknown

because this is the example I want to

show you this should work totally fine

okay so as you can see we're going to

console.log whatever the sum is of these

values here and that should work so

great we got one five seven one okay so

we have this sum

now of course sometimes what we want to

do is we want to adjust a function we

want to add in an argument right so all

we do is if we have an argument a new

argument we put you know new let's call

it just new okay and in order to

of course we need to sum the new

argument now so we add new right so

that's you know it should be it let's

name it new value right new underscore

value yeah it doesn't really

uh just so we understand so I'm saving

that I'm going to run back some again

and see what happens

okay so we got none not a number right

um now the reason why we likely got the

not in number none is because there's a

missing argument here so wherever sum is

being called it requires all of these

arguments

unless you set them as null or a default

value of some sort it's going to return

that non-value if it does not have all

of the arguments that are available here

all right and

um I want to show you this example by on

because obviously this is a very simple

example this simple example we are only

calling the sum function once right we

just cancel login one time but let's say

you have a full program

and so I have I'm going to add in these

functions operation one operation two

operation tree and these also call this

sum function

all of these are going to fill okay so

let me show you what I mean you're going

to get the Nan value

if I run this operation 1 is not

operation 2 is not operation three is

none all because we added a new

argument

within the function right

so what can we do about this how can we

optimize this so that we don't always

have to refer back to

um the arguments here being

you know these these things are going to

change in this case it did change

because we added new value now

everything all of this is broken because

we did we did that one little change

that we did well instead of using

an argument or you know multiple

arguments within here why don't we use

something like an object for example or

in PHP an associative array that might

help things so what we could do for

example is we could change all of this

to args

to arcs right

and then we could instead of doing or

you know doing this where we manually

add this we could dynamically

change this but let's let's start one

thing let's let's start one thing which

is let's change it to X as I said and

now

let's see

we have we created we create an object

and we call this one example args right

just to make it easy and this is an

object

okay you can use uh you can use perhaps

a an array but in this case I'm using

objects for a reason and let's see here

we do Heights

and in this case we look at the values

here 800 blah blah blah so we create

that 800 we do width

600 we do X

which is I said 10 we do Y which is 20.

we do a which is one

we do p which is 2

we do age

which is 38

and we do velocity

which is a hundred

okay so now we have now we have an

object that we can pass into this sums

but this is going to break all right so

here's what we could do right

we could make this more Dynamic we could

say sum is zero we set some to be equal

to zero and then we go through

the keys of this args

right because we want to we'll push this

in but we have to go through the keys of

this Alex this e x args will become args

when we when we use it in a in the

actual function except when we call the

actual function

so we change our code

let's go for let's let's get the keys

first which is object

dot keys

of ax okay

and now we can go through each key

so let's save our bar I equals zero key

I is less than

Keys dot length

I plus plus

and here now

we get the value okay so we get VAR

value

is equal to

args

well let's get a key right we have to

actually get the actual key so the

actual key will be key is I

right

and then we get VAR value

of Val which is equal to

args

the key that will give us a value

and now that we have the value right so

the key all these Keys we got was

actually here right these are the keys

on the left hand side and then these are

the values on the right hand side so

when we what we got was when we said

object.keys we got the keys height with

X Y A B all of that was returned as an

array and this is the keys array and

then what we did was we checked we went

through each one of the keys so we

checked the keys at length we went with

I the index is I then we got what each

key

name is right so we got a key name here

which is height in this case

um on on I equals zero and then we got

the actual value which is Rags key right

so args or whatever the key name is

would give us the value and that's what

we have and now we do the sum which is

we take sum plus equal Val

I know what we should have is it will

return sum after it does all of that and

that's fine

but now we have to change of course how

this function works so we already have

this example args and all we have to do

now is we put in ex arcs here ex arcs

here

okay now I'm going to close I'm just

going to stop uh running this for a

while so I'm going to uncomment it out

what did I do

I mean comment to talk that's it right

and now this should work it should

return

the value again one five seven one okay

now all of these operations we have to

adjust these operations one time and

let's say we do the same thing so

instead we do

e x ax we you'll get the point in a

minute it's just taking a little long e

x arcs okay

and we do this

for all of them

we got operation one two three two

succeeded which we expect okay so here's

the thing now we want to add that new

value right now let's add that new value

so let's say in ex arcs we want to add

the new value we just put the new value

then this is a thousand just so we see

the difference or let's put that let's

put ten thousand right so we added in

the new value

and now as you can see we don't actually

have to edit any of our operations

anymore because the logic takes care of

it the logic is going to call

um you know call the algorithm the sum

algorithm is going to go through Each

One automatically figured out I'll sum

it up and

now if we run this

I made an error somewhere here

okay yeah

now if we run this

it works

right and we could do the same thing so

let's say we had a b let's go for C

10 d 20. e

30 okay

again now all of these functions that

we're using it you don't have to do

anything right isn't that great that you

don't have to edit now the functions

uh well the function arguments anymore

in multiple spots remember let's say

this is ten thousand lines of code you

wouldn't go through changing that all

the time so it's best to really

in in some circumstances I know that's

it's not always reasonable for all but

in some circumstances like this

um to use something like an object or

inside an array instead of using

multiple arguments in here and that

means that the code becomes more

maintainable Dynamic and then you know

you just have an easier time working

with it now there is another scenario

okay so there's another scenario which

is this

let's see that we wanted to add like a

label let's say we wanted to do some

different sort of

um

I don't know output that that requires

you to add additional arguments but you

don't want these arguments to be summed

parts right this will obviously not work

so for example let's say that we wanted

to name this label for some reason let's

say we wanted to add some text to this

object right this would not work

because what we should get is likely

none

or we get tests okay so it actually

added

it added test the string to the end of

it which is not exactly what we want

right because we wanted it to return an

actual

value in this case might be an integer

or something so you change it to a

string when you added this text in

or you again you would have to do some

altering but you can do that ultimate

all without editing

a lot of your functions you just have to

focus on your main function

and here's what we do here's what we

could do so this is something you could

do all right so we could

change how this works

and instead add a new object and call

these object numbers

and you might be wondering well what is

that going to do I'll show you

and now you should be able to add label

test but this will break some

but that's a good thing it only breaks

the main function it doesn't break all

the other functions so now instead of

looking for

object dot object.keys on args right

remember ARG is going to push in

whatever is in here e x args and all of

these examples right what you would now

want to do is you would want this to be

numbers now you could do it that way or

you could just type you could just do

period numbers as long as it exists okay

and then you would get the keys

and then you get the keys here and then

you have to make sure that you use

numbers here

and this

should work

and also

it would then allow you to do something

like this

we output the label right so we wanted

to Output the label we could output

label so let's say we put test test

instead was the sum of all values ah

we could use aux label here we could

comma and then we could use sum and what

that would do

is

the sum of all values are the number the

sum of values are number c and that way

we didn't break all the other functions

that we would have created before right

um isn't that kind of cool right so as

long as it's it it now as I said it

doesn't always make sense to do this but

many times it does

right and one of the challenges that

comes in with using something like this

where you use an entire object is that

sometimes you may forget what the

argument should be

so what I learned to do was I usually

have some comments above

um where I say what args is so args

should contain

or sometimes I just I just copy and

paste you know I was like Ada explain it

like that should contain blah blah blah

or you just say args is an object right

and then

you could likely copy and paste what an

example object looks like

that's not too hard

right

just copy and paste what that object

looks like in here

and now you have a way of remembering

what the object actually has in it right

and that's how you could kind of solve

this problem and what that will also do

is it will also you'll also add

documentation to each of your function

anyways which is nice as well

um so I hope this helps you guys out I

know that most times you may not need

this if you're running small programs

but if you're going to run thousands

upon thousands of lines it's really

important to decide whether you want to

do it now as opposed to having it to do

it later on where it requires a lot more

time to to be spent you know trying to

reconvert code so it's better to just

make the code AS dynamic as possible

with that being said if you did like

this video please like

Please Subscribe it goes a really really

long way and hopefully this will help

someone else out as well it's gonna also

help of course obviously the channel

um I know most people don't really care

too much about the channel but it does

really help me out as well in the

process of reaching more people like you

that love coding and of course it's

going to help someone from and see if

maybe save them yes out of their life

um when instead of breaking code that

they could have just easily not broken

they could have they thought about it in

terms of using these objects but that

being said have a wonderful day you guys

and see you guys again soon thanks bye

 

hey guys welcome back to another quick

video here we have where we're working

on jQuery and I have a scenario for you

and I've already plotted out

um a written note an HTML file here and

uh this is the scenario so the scenario

is uh we have a table within our body

section we already have jQuery loaded

all right we already have a ready

function ready and we're going to do

some editing here soon but we have a

scenario where we have a table as you

can see here the table is here and we

have rows TR means rows and within the

ruse we have

um

cells right we have cells so I just have

string one string two string three Etc

and I have basically one two three four

rows

and each of these rows has three columns

one two three and what that looks like

is this okay so this is what it looks

like string one two three four five six

and the scenario is this

what if we wanted to change all of these

the text Within These tables Within

These uh these cells

how would we do this with jQuery

now there's a few ways to do this

obviously there's you know with

programming there's always multiple ways

of doing this

but what we could initially see is that

all of the areas that we want to change

the text they are the T they have the TD

tag

so in theory

we could basically use this TD tag to

change all of the content for all of

these elements right so let's call it an

element right we'll call it TD or the

cell an element and let's change this

dynamically

all with basically one line of code

so we already initialized the jQuery uh

ready function so we have a function

here

and what I'm about to do is I'm going to

change all of the text within this

to something that I want okay so the

easiest way and this is not necessarily

the recommended way I'm just showing you

how it is uh we'll talk about why this

could be a problem and how we could go

about fixing this problem as well is uh

like this so we could open up our dollar

sign

we could choose to select using using

the selector in this case the selector

would be TD without the dot or the

number sign because in this case it's an

actual tag so with a tag when you're

pointing to a tag you don't need to put

anything in front of it you just put in

the the tag itself with all the arrows

and then inside there you could do HTML

and then inside there we could see

uh

you know hello okay

and this should in theory this should in

theory

do something wonderful let's see we're

going to save it we're going to run it

back

okay as you can see

all of these change to hello

okay which is awesome right

um

and you may be wondering well why would

you ever want to do something like this

well firstly let's say you were you know

setting up uh

let's say that you were you do you were

building a social platform page and

let's say it's on the profile page let's

see that this was the profile page and

in multiple spots on this page you would

want to have the person's name for

example to be repeated so for example

there might be at the top here you'd

want uh a guy named John and on the

right hand side you might still want his

name to be John so you'll put that there

instead of having to write multiple

lines of code to edit and to remember

where you need to make changes

you could just simply do something like

this where you know which tag is where

you want to put the name and then you

just edit it with one line like this

so let me show you okay so first of

first of all let me mention that this

might be bad if you have multiple tables

right so if you had multiple tables of

different data you would want to use

such a generic tag generic selector

which in this case is the tag because it

would edit every single table and of

course those are the tables may have

different information you don't want to

edit so let's refine this a little bit

let's just see

um and in this case let's change this to

John let's say we wanted to specify that

in a specific

area we wanted to name uh something John

the person's name basically there's a

well an easier way to do this which is

we could go ahead by adding a class so

for example let's say that we wanted

this area here in string two which is in

the middle here to be John

we could do something like name this

class name so we could literally name it

name right

and let's see uh I oh well you know what

let me let me show you the the

placeholders back please so you are

aware of the names okay so we have all

of this here string one two three Etc

and what I changed was

um I what I added was class name for

string two which is string two is in the

middle

and let's see string 12 we wanted to

also put John's name in there then you

do the same thing for John's name

right so on the string here you name the

class name

and then what you could do is go back up

and instead we use again a different

selector this time we'd use it you we'd

use it the class dot name well the name

is the class right and you have to put

the dot in for it to know that it's a

class and then you put in the HTML and

let's put John do okay

and we save that and then we reload

and what that would do is it would make

John appear on both sides

and so as again I'm coming back to the

point that uh you may not necessarily

need like a high-end high-end framework

like like uh react to do something as

simple as this you could just use an

online jQuery to do that and as you can

see it did it really really fast

now there's another

um way of doing this but you don't have

to do it because this Does this does it

so well

um which is you could use each function

there's also the each function let me

show what each function looks like so

basically that's dollar sign

in this case name

dot each

and then you can provide it with a

function

with an empty argument of course you

don't need an argument

but it's assumed that what this would do

is we would look it would look for every

matching element by this class name

which is name so it would go through

each one

and it would basically it's like a for

Loop but you do get to see the for Loop

and that's what this does so in essence

you may be wondering well how do how

would you change each one as long as you

use the each function

there's

this becomes available the actual with

this so what this refers to is whichever

element

that it matches so it would match this

one

right string two

and it would match this one string 12.

right

and so this would first match string two

and then it would loop again and match

this one and go along like that right

it's as I said it's more or the same

thing so this is just a longer way of

doing it you could change the HTML here

and you can put John too and it should

do the same thing so if we save this and

we run this

we should see no change it should do the

same thing

so you have two options of being able to

change

Things based on their tags well not tags

but uh the the classes

and you wouldn't want to do this with an

ID right the the reason we use this we

use the class is because

um there can be multiple classes of the

same name

however ID is meant to be unique so we

that's why we didn't use ID instead of

name now it would work but it's not best

practice to do that

um so with that being said I want to

keep this video short so I'll probably

stop here but I hope that this helped

you out in terms of

um how you could use uh jQuery to

quickly and what I mean quickly there's

very little setup there's very little

configuration required to be able to

change uh spots or change text in

multiple areas at the same time

with that being said please make sure to

like And subscribe and if of course you

have any questions on how to do

something please let me know and I'll

try to work on a tutorial to help you

guys out thanks so much see you guys

again soon bye

 

hey guys in this episode I'm gonna show you guys how to quickly begin using jQuery to manipulate of course uh EO web pages and so forth so hope this is going to be a quick one uh right on the screen right now I'm using vs code and I have created already an index.html file and it's an absolutely blank file as you can see and on the browser it's totally blank so we're going to do this really quickly I'm going to create a very much Bare Bones HTML file and then we're going to integrate jQuery into it and see how it works and hopefully this is going to be as I said quick so you don't have to spend too much time on it alright so first thing is we of course create HTML tags and we create the head tag as well and we'll name this we have to name this page so we just name this demo and that's pretty much it for our head tags no an HTML document also has to have a body tag as well and we'll just probably put hello wheel just to make sure that something appears on the page there we go we have a Hello World um page and with you know Hollywood is in within the body section okay so what is the quickest way of doing this is probably to load jQuery from CDN of some sort um so let's do that very quickly I like to use cloudflare so I'm going to search for jQuery cloudflare CDN and when you do that you get the first link is cdnjs.com click on that and here we have a list of files that is available on the CDN now the one that we want to use is of course this one that is slightly orange or pink it depends on of course your screen colors um and we're particularly using the min.js you can use the dot GS without the Min but Min stands for minified which means that the file is usually going to be smaller okay so it's going to be quicker to download as well but because we link into it you won't have to download anything right I'm talking about like opening it in the browser the browser has to pull this file to the user and so forth so anyways go ahead and use just go ahead and click on copy script tag so when you click on that we go back to our vs code and right under the head just paste that in and you don't have to worry too much about what everything is I'm not going to explain that as I said this is a very very quick crash course into getting something to work now we basically this is not going to do anything to say on the UI side and in other words you're not going to see any difference here so for example I saved this file the HTML file and I'm going to go back to the demo page and nothing really happens right or at least at least not on the front side of things but we'll get to what you need to do in order to utilize the jQuery library that we know imported in okay so first thing is first to make this easier we need to probably create a div all right so we're going to make a div container and let's class this container let's name it something so we'll name this placeholder and we're gonna stick with hello world for a second we're going to change this make sure that you get rid of this um tag there it's going to break the HTML code and when we reload this nothing again is going to change but something did change in the background we'll get to that as I get into the inspector but just stay tuned don't leave us yet okay so now we have a placeholder and we have a class that we could reference this please order this div element to as we saw we already pulled in the the library and now we're gonna create another script here and this time we're going to put in some text into here so to the first thing we need to do is understand how jQuery works when it gets executed all right so the first thing jQuery requires you to usually do is to access jQuery use the dollar sign and then you put here document and then there's a ready function and I'll explain it ready function just now already function which requires a function as well which doesn't have any arguments Open brackets here all right now here let's to get something to get something going we'll use the console okay so I'll explain all this as we go along but the console is going to see um page has been loaded okay so let me explain what's happening here so it's basically whenever the document loads or it's ready we want to run this function and this is all of course this is Javascript right so what it is saying is the entire page should load before whatever is inside of this function here whatever isn't this function here will be executed and you want this to happen the reason why you want this to happen is because you want to make sure that all the containers load whatever the containers are they load first or else jQuery will not be able to find that container if it needs to manipulate the container I'll explain that even for you as we go along so just stay tuned okay so let's execute what's happening here and I'll explain again what's happening if we look at the inspector so we go back to the page we're going to reload this nothing happens but I'm going to open up the inspector which is Ctrl shift I of Chrome and I'm gonna go to this section called console I hope that you could see that and as I click on Console you'll notice it says pH has been looted the fact that this this is this says pH has been looted means that whatever data was stored in the HTML file that has to loot completely first before the function inside here is going to Output page has been loaded so this console.log is not jQuery but it's it's part of JavaScript and basically it allows you to output something to this console here when you're doing debugging and that's what's happening here and we need as I said we need this to occur we need to put whatever our code is within this ready function so to speak so that it actually is able to find the placeholder in other words the placeholder has to load first before you could manipulate the police holder itself all right and that's what this function is actually doing so if I were to I'll give you the example as we go along but let's say we want to manipulate this let's say we want to change hello world into something else right all we have to do is within this function we do the same format here dollar sign whatever it is so this is usually a tag of some sort that we need to use and in this case the tag will be the class all right well in when I say tag it's actually the the CSS name basically all right so you'll see what I mean here so a class usually has a dot in front of it so let's go dollar sign Open brackets make sure to put quotations and you think that you could just type in placeholder here to reference it but that won't work you need to actually put whatever the class name because this is a class you have to put a period a dot in front of it and that's telling it that's basically referencing this div element here okay so that's what it does this this part is referencing this element here and now we could change what is inside here by calling the function dot HTML and let's see welcome now if I save that as I said this whole page is going to load in the browser this function is going to wait until this full page loads it has to load the entire thing before it gets executed and then it's going to execute page has been loaded onto the console and then it's going to change the text of this div here let's go it's going to happen really really fast there we go see it's really super fast so it's it makes you feel as though it's not happening in steps but it's actually happening in steps and there's a reason why and let me show you something so let's see that we wanted to we we didn't use the ready function let's say we didn't use the ready function let's say we put this this outside of this ready function and let's say we just we hide that okay let's see we said welcome first before we looted the page there's a chance it may not happen there we go notice it said hello world which is the original which is the original um uh text in this container notice that even though we call the placeholder properly right which pointed to this placeholder div element here and we tried to change it it did not change and as I said the reason is that you need to wait you need to use this ready function which loads the entire page freeze and then manipulate whatever is in these uh these containers all right so I hope that that at least explains how to uh you know how to begin using uh jQuery super fast but I needed to explain the ready function please in order to do that so let's um this is not the only way that you could actually reference this uh placeholder for example let's say instead of a class you had an ID so I'm going to remove this that this part that doesn't work okay and we're going to bring back in the the code that actually works let's say that this was not a class but it was an ID instead like that this code would not work because it's pointing to a class it's looking for a class that does not exist anymore so if we reload here it's going to just say hello world again it's not going to work if we go back into placeholder we know based on CSS that in order to reference an ID right an i an element by its ID we need to put the uh the number sign okay so if I save that and then I go back here and reload is going to work so basically it overwrote what was in hello world using this these functions you know this command basically I'm going to call things command functions you know it's pretty much the same thing at the end of the day it doesn't really matter as long as you can get this really quickly to work with it uh is there anything else I need to show you I think that is just the beginning okay this is just a quick video as I said of how to go about using jQuery and I think we solved that problem of how to go about using jQuery it does look a little bit confusing but the more you use it you'll realize how wonderful jQuery is and I don't want to you know I don't want to say anything you know negative about react whatever works for you guys it works for you guys but to me jQuery is so much faster so much easier to use not faster in terms of speed but it's just so much easier to implement something in jQuery especially if you know what you're doing as well in fact you could sort of imitate a lot of things that react does but we'll go along uh hopefully depending on if the video is in demand then I'm going to continue on so make sure to like subscribe commenting as well let me know if there's a if if this is something you're interested in learning and I will continue to create videos on jQuery because I think it's super awesome I use it even up to no and um it's been a wonderful experience so far with that being said thanks so much and I'll see you guys again soon bye