html and JavaScript

Log_erLog_er Member
edited January 2019 in Off-Topic
I really need help. I am trying to use basic JavaScript and html to make a website for my stem class project. The only problem is that I can't figure out how to use JavaScript in my html code. I am aware of the script tags, but my JavaScript doesn't work with it. Let's say I was trying to draw a simple circle. I learned that, in JavaScript, a circle is ellipse(x,y,width,height); but it doesn't work.
Here's my code so far:
<!DOCTYPE html> ellipse(200,200,140,140);
(I've only been working with coding for about 6 months)

Comments

  • I think your starting code is wrong? Usually I start off with, when doing websites:
    <!DOCTYPE html> css here html here

    It looks to me like you're missing Head. Also not sure if I started off with "!DOCTYPE" in the html. I don't know how you're coding the website, so it might make a difference. Hope this helps in some way!
  • I think your starting code is wrong? Usually I start off with, when doing websites:
    <!DOCTYPE html> css here html here

    It looks to me like you're missing Head. Also not sure if I started off with "!DOCTYPE" in the html. I don't know how you're coding the website, so it might make a difference. Hope this helps in some way!

    The head is not required. And I'm not using css yet. I'm trying to get JavaScript to work. !DOCTYPE is how I learned to start my html code :p
  • Log_er said:

    I think your starting code is wrong? Usually I start off with, when doing websites:
    <!DOCTYPE html> css here html here

    It looks to me like you're missing Head. Also not sure if I started off with "!DOCTYPE" in the html. I don't know how you're coding the website, so it might make a difference. Hope this helps in some way!

    The head is not required. And I'm not using css yet. I'm trying to get JavaScript to work. !DOCTYPE is how I learned to start my html code :p
    I was just thinking maybe it wasn't working yet because the head wasnt there? Not sure :P Sorry I couldn't help! Goodluck with the Javascript! :)
  • @JackFury might know something about this.
  • Eagence said:

    Example usage of JavaScript embeded into HTML, Is this what you ask?
    (Example recalls "ProcessingJS", download "ProcessingJS" file of MIT & add it to website.)

     

    Mighty Ellipse



    var programCode = function(processingInstance) { with (processingInstance) { //Window Size size(400, 320); frameRate(30); //Actual Drawing strokeWeight(3); stroke(140, 0, 0); fill(186, 0, 0); rect(156, 62, 72, 66, 500); rect(155, 60, 60, 60, 20); rect(170, 70, 60, 60, 20); line(205, 62, 225, 75); line(165, 62, 182, 72); line(155, 80, 170, 90); line(160, 115, 175, 125); strokeWeight(3); fill(255, 255, 255); ellipse(200, 100, 40, 21); stroke(247, 183, 94); fill(0, 0, 0); ellipse(200, 100, 20, 20); fill(0, 0, 0); ellipse(200, 100, 15, 18); stroke(140, 0, 0); line(194, 90, 208, 90); line(194, 89, 206, 90); line(194, 110, 212, 109); line(194, 111, 206, 111); //Additional Text var f = createFont("cursive"); textFont(f);textSize(25); text("Looks Like You Need Help", 46, 180); text("May I Help ?", 133, 230); }}; var canvas = document.getElementById("mycanvas"); var processingInstance = new Processing(canvas, programCode);

    Link for examples with "ProcessingJS":
    https://www.khanacademy.org/computer-programming/processingjs-inside-webpages-template/5157014494511104

    Link for examples without "ProcessingJS":
    https://www.w3schools.com/js/js_whereto.asp
    or
    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse

    Also directly by HTML, SVG:
    https://www.w3schools.com/graphics/svg_intro.asp
    I'll try that thanks. I was trying to get the canvas set up yesterday but it wasn't working. I didn't realize I had to use window size. Thanks again lol I really needed help for my school project. I'm probably doing the hardest project in my class xD
  • @Eagence I used some of your code and got the canvas to work. I was testing functions and variables when I ran into a problem. When I press 'a' the script doesn't add 1 to the score. Could you take a look at it?
  • @Eagence Is there an easier way? This is all very confusing.
  • 'Sir.Fox''Sir.Fox' Member
    edited January 2019
    First in the body you need to create a canvas like this
    < canvas id=canvas1>< /canvas>
    Then style it in css. You could add more tags but its cleaner this way
    < style>
    .canvas1 {
    Height:100px;
    Width:100px;
    < /style>
    }

    Then I think it is easier to make shapes with html.
    But with javascript you need a draw function.
    That will let you see it.

    Sorry if I said something wrong I haven't done this for a little bit.
  • 'Sir.Fox' said:

    First in the body you need to create a canvas like this
    < canvas id=canvas1>< /canvas>
    Then style it in css. You could add more tags but its cleaner this way
    < style>
    .canvas1 {
    Height:100px;
    Width:100px;
    < /style>
    }

    Then I think it is easier to make shapes with html.
    But with javascript you need a draw function.
    That will let you see it.

    Sorry if I said something wrong I haven't done this for a little bit.

    I tried putting an if statement in the draw function but it doesn't work. I learned basic js from code.org
Sign In or Register to comment.