Jump to content

Graphic & Animation


L8V2L

Recommended Posts

Canvas is much more versatile and more efficient than SVG. SVG is a format to save vector data, which is different than displaying an image on the screen, which is what the canvas does.

 

You should forget about SVG because it's interfering with your learning of Javascript.

Link to comment
Share on other sites

Canvas is much more versatile and more efficient than SVG. SVG is a format to save vector data, which is different than displaying an image on the screen, which is what the canvas does.You should forget about SVG because it's interfering with your learning of Javascript.

LIKE HLL IT IS! My plan is to go through JavaScript JSON, AJAX and the reference on w3s, which I have already done... well almost done. I'm through with the DOM html object, and just going to check out two html object; canvas, script and a few other. Then I go back over html, html5, css, css3; between the section, I'm going to go through the JavaScript section again; every time I finish a section, I'm going to go through the JavaScript section again, after I'm through with that section of html and css, I'm going to go through xml section(for my understanding of SVG), between each subsection of xml I'm going to go through the JavaScript section; alone side of all of this, there is a few books I want to read, one is on webGL with no libraries(which I see as a evolve form of plugin(they never left)) involve in it.... And that's pretty much my plan. I mean it; I want to be a wizard of JavaScript, JavaScript wizard!!!JavaScript Vader: And soon, you will be. Soon. Edited by L8V2L
Link to comment
Share on other sites

LIKE HLL IT IS! My plan is to go through JavaScript JSON, AJAX and the reference on w3s, which I have already done... well almost done. I'm through with the DOM html object, and just going to check out two html object; canvas, script and a few other. [...]

 

And yet... where is your code? It doesn't matter how many times you go "through" the material. You need to write code. You could create an example HTML file for each major group of features which thoroughly demonstrates those features.

Link to comment
Share on other sites

the defer async properties of the script tag seem to be the ideal for having the script execute after the page have loaded instead of the onload event. The onload event is ... a little trouble to grasp I want to say.

Edited by L8V2L
Link to comment
Share on other sites

Onload waits for all the resources, including images and videos, before running a script. The async and defer attributes only wait for the HTML code to load before running.

  • Like 1
Link to comment
Share on other sites

HTML documents are defined by HTML elements.HTML ElementsAn HTML element is everything from the start tag to the end tag:So the tags/nodes aren't the elements themselves but the contents/textNodes between the tags.nodes are the html's elements... right?

Edited by L8V2L
Link to comment
Share on other sites

An element is a type of node. A node is a part of a data structure called a tree.

 

Tags and everything between them are a text representation of an element.

Link to comment
Share on other sites

<!DOCTYPE html><html><head><style>h1 {color:red;}h2 {color:blue;}p {color:green;}</style><script>function hch(){var h1 = document.getElementsByTagName("h1")[0];h1.onclick = function(){h1.style.visibility = "hidden";}}window.onload = hch; /*Was going to post for help on figuring this out, I be having trouble with the onload event handler. Until I just put the hold thing in a function. I need more understand on this though, cause it can't be that easy. What else can I do???*/</script></head><body><h1>All header 1 elements will be red</h1><h2>All header 2 elements will be blue</h2><p>All text in paragraphs will be green.</p></body></html>
Link to comment
Share on other sites

An element is a type of node. A node is a part of a data structure called a tree. Tags and everything between them are a text representation of an element.

Yeah that don't help much... what I read on w3s and what you are posting to me... are different... I'm just going to go by w3c definition.
Link to comment
Share on other sites

//What's the different between:function poo(){return();}//parentheses.  //And this:function foo(){return{};}//curly braces.
Link to comment
Share on other sites

//What's the different between:function poo(){return();}//parentheses.  //And this:function foo(){return{};}//curly braces.

 

Why do you ask? Where did you get this? Why do you feel this is a useful question? Why did you need to ask when you could simply test it yourself and discover the answer?

Link to comment
Share on other sites

You may have misunderstood the definition.

I like this post above in another word of saying you are right... do you get notify of the likes? I didn't want to have to type it out, so I just like it.

The first case returns nothing, The second case returns an empty object.

No... I mean, I saw that before, I saw it when it was returning... function I believe, I was trying the code example modfitying it, and I remember of it, so I through I ask. I remember it had function in it, and it was a... closure for each function I belive, and you connect the functioin as so outerfunction.colsurefunction, and as you connect to each closure in the return which wrap them in curly braces, they will return the value that closure contain, if I remember correctly... the closures was modify to be as a get and set function type with out using those keyword. I hope you understand what I'm trying to detail to you.Another discussion on web webGl, so I watch a conference video on youtube about it, and they said it was similar to c language, it rememind me of raycasting(which I try to learn, but no tutorial give a very good visual understanding and there is no book that I could find on amezon(or maybe that was just a search done on orally site...)). Any info youcan give on this. I didn't watch the hold video, just part of it, and a code that they show of each example of the effects it gave off. I want to learn it, but it make my diesre to try to make svg more than just a graphic viewer mower powerful. Edited by L8V2L
Link to comment
Share on other sites

Forget WebGL, it's too complicated, it requires knowledge of other, more complicated programming languages. Just focus on learning Javascript.

Link to comment
Share on other sites

Forget WebGL, it's too complicated, it requires knowledge of other, more complicated programming languages. Just focus on learning Javascript.

The mobile version is so cool.... I'm not talking about learning it now, I just would like to talk on it. But looking at it, I'll say p.js(process) is more concise in typing, but you can define 3d object in SVG too and it's a more familiar API then both language, if only they'll speed up the animation attribute for SVG(or maybe it's just my system). I'll like your comment on this please.I'll never stop learning JavaScript, I came to far to stop, and I like(love) it. All language that I speak on is an API to be manipulated by js. I'm not going off course, I appreciate your words thought. Speaking on these APIs is speaking on js for me, cause my mind goes back to "how can I... Through js.." And only enforce me to learn it more. Edited by L8V2L
Link to comment
Share on other sites

cars = ["BMW", "Volvo", "Saab", "Ford"];text = "";list: {    text += cars[0] + "<br>";     text += cars[1] + "<br>";     text += cars[2] + "<br>";     break list; // I understand that it's reading through the list but still... Example.    text += cars[3] + "<br>";     text += cars[4] + "<br>";     text += cars[5] + "<br>"; }document.getElementById("demo").innerHTML = text;
function myFunction() {var text = "", i = 0;hi:    for (;i < 5;) {        text += "The number is " + i + "<br>";        (i == 3)?(break hi):(i++);// <--- it's not working.        //i++;        //if(i == 3){break hi;}    }    document.getElementById("demo").innerHTML = text;}
Ingolme I been listen to Sonic R(races) tracks, while studying. Went through the hold play list, but mostly stick to living in the city and a diamond in the sky. Edited by L8V2L
Link to comment
Share on other sites

I understand that it's reading through the list

I don't think you do understand. What is "list"? On the line where that identifier appears, what exactly is it?

it's not working

No kidding, it's a syntax error. Break does not evaluate to a value. I don't think you understand the ternary operator either. The ternary operator evaluates to a value (like all operators do), so you can't put something there that does not evaluate to a value.
Link to comment
Share on other sites

I don't think you do understand. What is "list"? On the line where that identifier appears, what exactly is it?I don't know, that's why I', asking you.

Link to comment
Share on other sites

"list:" is whats called a label. its a reference point for various control structures (mostly loops) when they come across a break or continue. say that you have 2 nested loops and you come to a condition inside the inner loop where you want to skip the rest of the current iteration of the outer loop. you can say "continue" but without a label javascript will assume that you want to skip the rest of the iteration of the INNER loop and not the outer loop; Actually, simply using break in this case will work, but only if there is no code after the inside loop. I could have written the logic in this example better if I were to actually use this code, but this should be good enough to illustrate how it's used

outer:for(var tens = 0, text; tens<10;tens++,console.log(text)){   text="";  inner:  for(var ones = 0; ones< 10;ones++){    if((tens*10+ones)%33===0)      continue outer;    text += (""+tens+ones+"  ");  }  }

I labeled (a.k.a. named) the outside loop as "outer" so whenever I use the break or continue word and the "outer" label javascript will know that I'm referring to that loop and not the wrong one. I also labeled the inside loop, but only for completeness, I never use the label. what should happen here is that the two loops should count through 100 numbers (00 to 99), with each tens on a separate line. and when it hits a number divisible by 33 it skips the rest of the numbers one the line and works on the next group of tens. so the console should print out

10 11 12 13 14 15 16 17 18 1920 21 22 23 24 25 26 27 28 2930 31 3240 41 42 43 44 45 46 47 48 4950 51 52 53 54 55 56 57 58 5960 61 62 63 64 6570 71 72 73 74 75 76 77 78 7980 81 82 83 84 85 86 87 88 8990 91 92 93 94 95 96 97 98

the 1st line is completely skipped because the loop starts at zero and zero is fully divisible by 33 (0/33 = 0)the 30's stop at 32 since 33 is divisible and so the rest of the line is skippedsame for the 60's and 66. and the 90's and 99.As said before I could have simply used "break;" instead of "continue outer;" since in this example I have no code after the inner loop thus both will actually perform the same thing. however if I place the console.log() after the inner loop instead and used break....

outer:for(var tens = 0, text; tens<10;tens++){   text="";  inner:  for(var ones = 0; ones< 10;ones++){    if((tens*10+ones)%33===0)      break;    text += (""+tens+ones+"  ");  }  console.log(text)  }

this should print the same output, but now code after the inner loop is also executed. when javascript see the "break;" and see no label with it, it instanty assumes the break is for the closest looping structure. If instead you said "break outer;" NOTHING will print as 00 is the very 1st number which is also divisible by 33 and thus breaks out of the entire operation

  • Like 1
Link to comment
Share on other sites

Hadien, Thanks for the explanations, I like(meaning I click like) it for your time spent to write it.Sorry to both you Hadien, and JSG. I know what a label is. I was more asking of how:

cars = ["BMW", "Volvo", "Saab", "Ford"];text = "";list: {    text += cars[0] + "<br>";     text += cars[1] + "<br>";     text += cars[2] + "<br>";     break list; // I understand that it's reading through the list but still... Example./*How is it breaking out?? I could just except it, but how is it breaking it? is it cause it's in a black? So the list referring to the hold black??? How is it breaking out? It's not like a for loop or a conductions where3 the interpreter come across it and meet the condition... (in a snake like voice)What is the magic use here to make it work(snake sound) yeah, tell me.(back to me) If you still don't understand what I'm asking, that's okay, thanks for your time. I understand now why JSG was like that, it throw me off. comprehensive... I didn't relay my message clearly, or in the right wording.*/       text += cars[3] + "<br>";     text += cars[4] + "<br>";     text += cars[5] + "<br>"; }document.getElementById("demo").innerHTML = text;
Edited by L8V2L
Link to comment
Share on other sites

When you typed list:{...} and populated the lines inside those curly braces with statements, not properties you basically created a "control structure" and not an "object" and then called it "list". When the interpreter came across "break list;" it told itself that it will not even look at the rest of the code inside the "list" control structure that you've created. so it instantly jumped to where the closing curly brace was and just continued from there.

 

there is no real benefit to creating your own control structure like this. It is valid code and works like a charm... but it merely makes your code obfuscated, ambiguous, confusing. It is better to simply use functions instead as then you have more control of the scope and it is far easier to re-execute the code this way. Plus far more people will be able to follow along.

 

It is of no use to anyone if you intentionally make obfuscated code and then ask help from others to understanding how or why it works, at worse you would only be wasting other's time. If you ever intend to work in a collaboration with other people you need to make your code easy to digest because if an event comes along that a problem arises, and you could not be contacted, AND people could not fix the problem because they could not understand your code, then you or even the entire project at hand could be canned.

 

Don't go looking for trouble (as in coding complexly) , especially at the expense of others. Do so only if really necessary (and fully document why you did it and how). Simplicity is a virtue in programming, and the world just turns a lot better when more people can follow along. The same can be said about properly formatting your code. don't write comment on the same line as functioning code. And properly indent and space out your code. The best of us can and will forget this from time to time, but problems can be solved much sooner if people who are debugging aren't having so much trouble just reading the code.

 

 

 

Back to the point, labels exist in javascript as an option. They have their uses as I mentioned previously. But more often than not, its better to try and avoid using them when possible as usually there are better ways of doing something without scratching people's heads.

  • Like 2
Link to comment
Share on other sites

When you typed list:{...} and populated the lines inside those curly braces with statements, not properties you basically created a "control structure" and not an "object" and then called it "list". When the interpreter came across "break list;" it told itself that it will not even look at the rest of the code inside the "list" control structure that you've created. so it instantly jumped to where the closing curly brace was and just continued from there. there is no real benefit to creating your own control structure like this. It is valid code and works like a charm... but it merely makes your code obfuscated, ambiguous, confusing. It is better to simply use functions instead as then you have more control of the scope and it is far easier to re-execute the code this way. Plus far more people will be able to follow along. It is of no use to anyone if you intentionally make obfuscated code and then ask help from others to understanding how or why it works, at worse you would only be wasting other's time. If you ever intend to work in a collaboration with other people you need to make your code easy to digest because if an event comes along that a problem arises, and you could not be contacted, AND people could not fix the problem because they could not understand your code, then you or even the entire project at hand could be canned. Don't go looking for trouble (as in coding complexly) , especially at the expense of others. Do so only if really necessary (and fully document why you did it and how). Simplicity is a virtue in programming, and the world just turns a lot better when more people can follow along. The same can be said about properly formatting your code. don't write comment on the same line as functioning code. And properly indent and space out your code. The best of us can and will forget this from time to time, but problems can be solved much sooner if people who are debugging aren't having so much trouble just reading the code. Back to the point, labels exist in javascript as an option. They have their uses as I mentioned previously. But more often than not, its better to try and avoid using them when possible as usually there are better ways of doing something without scratching people's heads.

Thanks, I like(click like) to show my appreciation for your time. A "control structure"... I didn't create that, I copy it off the example. I've taking to mind of my comments. Edited by L8V2L
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...