Executing JS function immediately in plain JS - javascript

I'm attempting to learn to use three.js. I don't know much JS but I figured I'd pick it up as I went along. I'm having difficulty getting the following two things to work together:
fire.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="fire.css">
<script type="text/javascript" href="js/fire.js"></script>
<script type="text/javascript" href="js/three.js"></script>
</head>
<body onload="fire()"></body>
</html>
js/fire.js:
function fire() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
var box_geometry = new THREE.BoxGeometry(1, 1, 1);
var box_material = new THREE.MeshBasicMaterial();
var cube = new THREE.Mesh(box_geometry, box_material);
scene.add(cube);
var animate = function() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y -= 0.01;
renderer.render(scene, camera);
};
animate();
}
I'm getting an undefined reference error that fire() doesn't exist when I attempt to use onload (I don't know what the little options contained within tags are called).
I am using Python's SimpleHTTPServer (python -m SimpleHTTPServer) to host this code locally. I'm not sure if this is known to have any issues. I managed to get this code to work using the same setup, so it seems that my issue lies in figuring out how best to use JS without actually embedding it in my HTML since that seems cleanest.
I also ran fire.js through jslint to make sure I didn't have any syntax errors and it looks okay. (feel free to check my work).
So, I'm at a loss. How do I make these two cooperate? (Preferably using plain JavaScript, just for the moment)

Use the src attribute not href for referencing external JavaScript files:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="fire.css">
<script type="text/javascript" src="js/fire.js"></script>
<script type="text/javascript" src="js/three.js"></script>
</head>
For future reference, you can use the Network tab (in Chrome's Developer Tools) to verify the external file is actually getting loaded correctly.

Related

Linking index.html with main.js file

Webpage is empty, main.js file is not being linked despite them being in the same folder. Npt is used & Vite is used for 3d effects, cameras, etc.
index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Abd </title>
</head>
<body>
hello
<canvas id="bg"></canvas>
<script type="module" src="/main.js"></script>
</body>
</html>
style.css code:
canvas {
position: fixed;
top: 0;
left: 0;
}
main.js code:
import './style.css'
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
camera.position.setZ(30);
renderer.render( scene,camera );
const geometry = new THREE.TorusGeometry( 10,3,16,100)
const material = new THREE.MeshBasicMaterial( {color:
0xFF6347,wireframe:true});
const torus=new THREE.Mesh( geometry,material);
scene.add(torus)
function animate() {
requestAnimationFrame( animate );
renderer.render(scene,camera);
}
animate()
Empty webpage- javascript not being linked
Are these files in the root folder of your site? Using a / in your URL tells HTML that your file is found there. If that's your issue, you should be able to fix this just by changing /main.js to main.js.
Try to put:
<script src=".js-path"> </script>
to your <head> section
if the script file is in another directory you can access this by putting "./" before the script path
there are a couple of things you need to look at.
First of all, JavaScript modules allow a program to be divided into multiple sequences of statements and declarations. <script type=module> is used to load JavaScript modules inside web pages.
To link a Javascript file to your HTML file, you have to use the <script> tag with a scr attribute. Since the javascript file is in the same folder as the HTML file, you can write the tag like this: <script src="main.js"> .
Good luck my friend.

How to link JavaScript frameworks/extensions in HTML?

I have seen a lot of frameworks and extensions recently and all for a lot of different things. It is hard for me to do things using just raw JavaScript or raw jQuery. I want to use these JS extensions/frameworks but the problem is that I don't know how to link them to my HTML document.
For Example: <script src="some link of fw/ext" type="text/javascript"></script> I put this in the <head> of my HTML and then write my code in a different file named "script.js" (made using notepad) but the code doesn't seem to work.
I know this is a problem because I don't link it properly.
I want to work with fabric.js on a project related to HTML5 canvas. I think I need to link both, my code and the framework in some way but I'm not sure as to how should I do it.
My HTML code :
<!DOCTYPE html>
<html>
<head>
<title>Code Example</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javscript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
</head>
<body>
<canvas id="draw" width="250px" height="250px">This if browser doesn't support HTML5
</canvas>
</body>
</html>
My JS Code:
var canvas = new fabric.Canvas('draw');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 100;
canvas.freeDrawingBrush.color = "#ff0000";
Should work somewhat like this : http://jsfiddle.net/MartinThoma/B525t/5/
You need to load fabric.js first at the header and then you need to load your js file order matters.
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js'></script>
<script type='text/javascript' src='yourjsfile.js'></script
In case you are not clear on how to add elements to the canvas. Then here is one snippet which could help you.
Also wrap your code inside onload() function so that when the script loads, the #draw element is available
window.onload = function() {
var canvas = new fabric.Canvas('draw');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = "#ff0000";
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// you need to add the object to canvas
canvas.add(rect);
}

DOM Not Loading In Chrome App

I have a simple HTML5 Snake game that uses canvas that I want to package as a Chrome App. Here is my normal HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Snake</title>
<link rel="stylesheet" href="snake.css">
</head>
<body>
<canvas id="canvas" width="700" height="700"></canvas>
<script type="text/javascript" src="food.js"></script>
<script type="text/javascript" src="snake.js"></script>
<script type="text/javascript" src="point.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas"),
game = new Game(canvas, new Snake(canvas), new Food(canvas));
game.init();
game.run();
}
</script>
</body>
</html>
However the script in the HTML is not allowed. So I removed it and placed it main.js which creates the window. I provide a callback that is the same as window.onload above because my understanding is that this is the chrome app equivalent:
chrome.app.runtime.onLaunched.addListener(function() {
"use strict";
chrome.app.window.create('snake.html', {
bounds: {
width: 800,
height: 800
}
}, function() {
var canvas = document.getElementById("canvas"),
game = new Game(canvas, new Snake(canvas), new Food(canvas));
game.init();
game.run();
});
});
This runs after the DOM appears to have loaded but document.getElementById always returns null. Looking at the document in the developer tools it looks like only the scripts are loaded even though I can see the canvas in the app window (I have a border around the canvas). Can anyone tell me what is going on? Where is the appropriate place to access the DOM from when window.onload doesn't work?
main.js is running on the background / event page and is not in the same context as the newly created window's DOM. You can interact with that context as documented on the create callback, but it's not how I recommend solving this.
Instead, from your main.js simply create the window, and from the HTML file load script code that executes directly.
window.html:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="700" height="700"></canvas>
<script ...</script>
<script type="text/javascript" src="window.js"></script>
window.js:
var canvas = document.getElementById("canvas"),
game = new Game(canvas, new Snake(canvas), new Food(canvas));
game.init();
game.run();

I get the error "createjs is not defined" even though I linked to the file

Here I have a very simple script.
stage = new createjs.Stage("myCanvas");
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0,0,40);
And my HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
<script src="mainScript.js"></script>
<script src="create.js"></script>
</head>
<body>
<canvas id="myCanvas" width=1000 height=500 ></canvas>
</body>
</html>
Yet it does not work. I get this error:
"createjs is not defined"
But in my HTML it is linked to file. Is there anything else that could be causing this?
<script src="create.js"></script>
<script src="mainScript.js"></script>
Your code needs to execute AFTER including create.js - order matters.
There are a couple problems with your code.
First, and to directly answer the question, you have to load the library which constructs the createjs object before you load your script which instantiates it. Change the order of the script tags you have in your head.
Second, your instantiation will execute before the canvas element is added to the DOM. To fix this you need to listen for the document's onload event. Then execute your code.
Third, to get the red circle object to actually show up you need to append it to the canvas and then call the stages update method.
Ex:
window.onload = function(){
stage = new createjs.Stage("myCanvas");
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0,0,40);
stage.addChild(circle);
stage.update();
}
For angular projects the above answers might not be sufficient to solve the problem. What I did:
myAngularModule.service('preloadservice', function ($rootScope) {
if (typeof createjs === 'undefined') {
setTimeout(continueAfterWait, 500);
} else {
continueAfterWait();
}
var continueAfterWait = function () {
var queue = new createjs.LoadQueue();
//...
}
}

Why isn't the following javascript code working? (Crafty.js used)

I am a newbie, in crafty as well as js, so pardon me if I might have made very silly errors in the following program.
What is wrong with the following code? The following code is supposed to create 5*5 matrix where each block would be a 60 pixel high and wide iceblock as stored in iceblock.jpg.
window.onload=function()
{
Crafty.init(500,500);
Crafty.canvas();
Crafty.sprite(60,"iceblock.jpg",{block : [0,0]});
Crafty.c("iceblock",function(){
init: function(){
this.addComponent("2D, Canvas, Mouse, block");
this.w = 60;
this.h = 60;
}
});
};
for(var i=0;i<5;i++)
{
for(var j=0;j<5;j++)
{
Crafty.e("iceblock").attr({x: i*60,y: j*60})
}
}
The corresponding HTML code is:-
<!DOCTYPE html>
<head>
<script type="text/javascript" src="crafty.js"></script>
<script type="text/javascript" src="assignment.js"></script>
<title>My Crafty Game</title>
</head>
<body>
</body>
</html>
When I open the HTML page, the complete output page is blank.
This is the link to the image.
http://postimage.org/image/ivqfhmjt9/
PS:- Is there a less annoying way to indent our code instead of putting 4 spaces infront of each line? Very time consuming and tedious.
For reference, see this thread https://groups.google.com/forum/?fromgroups#!topic/craftyjs/OkG5rFb3tqo
Or the code here http://jsfiddle.net/cYxeZ/

Categories