html and JavaScript

Log_erLog_er FamiliarMember, Familiar
edited January 2019 in Off-Topic 74.95 Karma
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>
<html>
<body>
<script>
ellipse(200,200,140,140);
</script>
</body>
</html>

(I've only been working with coding for about 6 months)

Comments

  • TumbleweedTumbleweed Member
    70.10 Karma
    I think your starting code is wrong? Usually I start off with, when doing websites:


    <!DOCTYPE html>
    <head>
    css here
    </head>
    <body>
    html here
    </body>
    </html>


    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!
  • Log_erLog_er FamiliarMember, Familiar
    74.95 KarmaFamiliar

    I think your starting code is wrong? Usually I start off with, when doing websites:


    <!DOCTYPE html>
    <head>
    css here
    </head>
    <body>
    html here
    </body>
    </html>


    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
  • TumbleweedTumbleweed Member
    70.10 Karma
    Log_er said:

    I think your starting code is wrong? Usually I start off with, when doing websites:


    <!DOCTYPE html>
    <head>
    css here
    </head>
    <body>
    html here
    </body>
    </html>


    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! :)
  • JuIiusJuIius Member
    123.85 Karma
    @JackFury might know something about this.
  • Log_erLog_er FamiliarMember, Familiar
    74.95 KarmaFamiliar
    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.)

    <html> 
    <head>
    <title>Mighty Ellipse</title>
    </head>

    <body>
    <canvas id="mycanvas"></canvas>
    </body>

    <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js">;
    </script>

    <script>
    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);
    </script>

    </html>

    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
  • Log_erLog_er FamiliarMember, Familiar
    74.95 KarmaFamiliar
    @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?
    image.png 68K
  • Log_erLog_er FamiliarMember, Familiar
    74.95 KarmaFamiliar
    @Eagence Is there an easier way? This is all very confusing.
  • 'Sir.Fox''Sir.Fox' Member
    edited January 2019 26.85 Karma
    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.
  • Log_erLog_er FamiliarMember, Familiar
    74.95 KarmaFamiliar
    '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.