HTML/Javascript Confusion - javascript

I have an extremely basic html document written as the following:
<html>
<head>
<title>A Basic Javascript Game</title>
</head>
<body>
<script language="JavaScript" src="mygame.js">
</script>
</body>
</html>
I've created an according Javascript file, have made sure that it's syntax is alright. The first line of the mygame.js file is:
var persontotalkto = prompt("You wake up one Saturday morning. The Holidays just started, and you can't wait to tell your family where you've decided for all of us to go on vacation! Who do you talk to: WIFE, SON, or DAUGHTER?").toUpperCase();
But when I open the html file, I'm not getting any prompt whatsoever. I have javascript enabled, so what is the problem?

Change the script tag to either the HTML4 version:
<script type="text/javascript" src="mygame.js"></script>
Or the HTML5
<script src="mygame.js"></script>
(Either will work on any browser released this millennium.)

Change
<script language="JavaScript" src="mygame.js">
</script>
to
<script type="text/javascript" src="mygame.js">
</script>

Related

linking JavaScript to HTML file

I am at my wits end with linking a javaScript file to my main.html, they are both in the same folder.
I have viewed multiple Stack overflow topics regarding this question, and for some reason none of the solutions solve my answer.
My current code is what I have below:
[main.html]
<!DOCTYPE html>
<head>
<link rel="javascript" href="jsfile.js">
<title>JavaScript</title>
</head>
<body>
<div class="Header">
<h1>JS Basics</h1>
</div>
</body>
[jsfile.js]
document.write("Hello World");
This code does not display the "Hello World" message, however if i insert the code directly into the HTML file it does.
I appreciate any and all help on this matter.
Add like following not with link.
<script type="text/javascript" src="jsfile.js"></script>
Just type:
<script src="yourJavascriptFilename.js"></script>
Most importantly add this line to the bottom of your body tag to avoid your browsing requesting JavaScript to be loaded before displaying your HTML.
You're using the incorrect link for JavaScript.
Try using this instead
<script src="jsfile.js"></script>

Code text appears instead of executing

I need some helping loading my JavaScript game on Chrome.
I wanted to code the traditional Snake game in JavaScript using a framework called p5.js, and I started with the canvas. The problem happens when I open the JavaScript file in Chrome (which I linked in my index.html file with a script tag).
Instead of the grey canvas appearing, per my JavaScript code, the code itself shows up on the Chrome page. Here's my code, have a look:
HTML
Snake | JS
<body>
<script src="F:\Code\JS\p5\p5-zip\p5.js" type="text/javascript"></script>
<script src="F:\Code\JS\p5\p5-zip\addons\p5.dom.js" type="text/javascript"></script>
<script src="F:\Code\JS\p5\p5-zip\addons\p5.sound.js" type="text/javascript"></script>
<script src="F:\Code\JS\Snake\sketch.js" type="text/javascript"></script>
</body>
</html>
And here's the JS:
function setup() {
createCanvas(800, 800);
}
function draw() {
background(51);
}
Specs:
Chrome, Windows 10 Anniversary Edition.
P.S. Javascript is enabled, I have checked.
Try these things
1) Test your js code on www.codepen.io/pen/, some javascript doesn't run properly when local. (F:\Code)
2) Try to put your script at the end of the body tag. Attention that the scripts are loaded in the order they appear. Consider the dependencies.
Assuming the path F:\Code\JS\p5\p5-zip\ to your files are correct and you are not working in a zipped folder.
You should have a file like index.html, wich will be the root of your website.
Here's a minimal example, including your scripts:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src = "F:\Code\JS\p5\p5-zip\p5.js" type="text/javascript"></script>
<script src = "F:\Code\JS\p5\p5-zip\addons\p5.dom.js" type="text/javascript"></script>
<script src = "F:\Code\JS\p5\p5-zip\addons\p5.sound.js" type="text/javascript"></script>
<script src = "F:\Code\JS\Snake\sketch.js" type = "text/javascript"></script>
</body>
</html>
Your javascript files should be placed in the bottom of the page,
just before the closing body tag
You must reference your js file in a good order for preventing some dependency issues
If you are able to browse your index.html file, right click on the page -> "show source code" and try to click on your js files reference, if the path is not correct you will have a 404 not found error.

Using jquery in js file

Okay so all I am trying to do is make the jquery work in my javascript file which is linked to a html file. I created a totally new file for this to test it. The whole contents of the html file are:
<!DOCTYPE html>
<html>
<script src="C:\Users\Me\Desktop\Programming\jquery-1.12.4" type="text/javascript"></script>
<script src="check.js"></script>
<head> <h1>test</h1>
</head>
<body>
</body>
</html>
And the whole content of the js file is
$("h1").css("color", "red");
But when I open the html file in chrome the change I put in the js file with jquery doesn't show up (e.g the heading is not red). I just want to figure out how to make it so that it does.
EDIT:
Thanks for the help everybody, I was able to make it work :)
did you try this?
$(document).ready(function(){
$("h1").css("color", "red");
});
not sure but, does your browser access local files directly? im pretty sure that browser sandbox gonna reject that, maybe cors plugin on chrome?
EDIT:
try importing this instead...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Move your <h1> tag to be in the <body>
Move your <script> tags to the <head>
Replace your code in your JS file with what imvain2 said, so
that the JS will load once your document is ready.
Make sure you are correctly referencing your jQuery script. You can even use this to test it out:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Try to use jQuery CDN, this way you don't need to worry if jQuery loaded correctly or not.
$(document).ready(function() {
$("h1").css("color", "red");
});
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="check.js"></script>
<head></head>
<body>
<h1>test</h1>
</body>
</html>
There are a couple issue as described in other posts. All your meta, script, css references, etc. should go int the <head> and never header tags. Also need to correctly reference your javascript files.
<head>
</head>
<body>
<header>
<h1>test</h1>
</header>
</body>
Example: JSFiddle
If you want to use jquery in .js file all you need to do is type: src=" ..." above code.

Why is my Flot plot function not working?

I'm trying to follow this tutorial to make a simple graph. However, I'm getting an empty divider when I load the page.
Relevant code:
<head>
<script language="javascript" type="text/javascript" src="js/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
$.plot($("#graphs"), [[[0,0],[1,1]]);
});
</script>
</head>
<body>
<div id="graphs" style="width:600px; height:400px">
</div>
</body>
I have page.php in the www directory, then the two .js files in www/js/flot
You have an unnecessary bracket in your code.
$(document).ready(function(){
$.plot($("#graph"), [[0,0],[1,1]]);
});
Working example: http://jsfiddle.net/ym6dbt10/3/
You should use your browser console to debug that kind of problems, if you don't understand the error it gives, write it down here to maybe people can help, if you just write it doesn't work, it gives no information.

Loading jquery from google doesn't work (for me)

Ah the wretched noob I am, the following html document doesn't alert anyone of my cry for help. Anyone know why?
<html>
<head>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
This works for me:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
Just fixed the src in the script tag.
Edit: Actually, the original syntax would work fine if you load the page in a non-local context. Leaving out the protocol implies that the 'current' protocol would be used depending on whether resources are loaded over http or https. Loading it locally implies that the script is loaded from file:///ajax.googleapis.com/...., which obviously won't resolve to anything. See here for more information. Thanks to #PetrolMan for pointing to the HTML 5 boiler plate site.
That same syntax is used in the HTML5 Boilerplate:
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.2.min.js'>\x3C/script>")</script>
It's
http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
not
//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
You are missing an http: in front of the url in the src attribute of the <script> tag:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
The source is jacked up. Use
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
Possible values for the Src Attribute are
•An absolute URL - points to another web site (like src="http://www.example.com/example.js")
•A relative URL - points to a file within a web site (like src="/scripts/example.js")
So you should have your URL as http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

Categories