I've scoured the net and stackoverflow looking for help, but can't seem to find any and I consider myself officially stumped. All of my code worked without a problem when it was all within standard script tags, then as soon as I moved them to their own .js file it crapped out. Help! This is what I now have in index.html (I've cut out all the irrelevant code since I'm just testing):
<html>
<head>
<title>PhoneGap Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/lib/jquery-1.7.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/jqtouch-jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/jqtouch.js"></script>
<script type="text/javascript" src="databasecalls.js"></script>
</head>
<body onload="init();">
<p>Some stuff here</p>
</body>
</html>
Then, this is what I have in databasecalls.js:
alert("file loaded");
function init(){
document.addEventListener("deviceready", phoneReady, false);
}
function phoneReady(){
// **** first, open the database ****
alert("Start making DB object");
dbShell = window.openDatabase("TimeBlogger", "1.0", "TimeBlogger", 20000000);
alert("Created DB object");
//and run another function if the setup is successful (displayEntries)
dbShell.transaction(setupDBTable, errorHandler, getDBProjectEntries)
}
So, unless I am mistaken, I should at the very least get alert(); to run as soon as it is read into index.html, right? I'm not even getting that! Is there something with the phonegap API that I missed... like everything needs to be in index.html or something?
Thanks in advance!
Justin
Related
At a complete loss here for what I assume is a very simple problem, thanks for the help in advance.
I have a HTML doc;
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Sketch</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="main.js"></script>
<script src="https://use.fontawesome.com/1f87fe0ccc.js"></script>
</head>
and here is my main.js file
function _(selector) {
return document.querySelector(selector);
}
function setup() {
const canvas = createCanvas(650, 600);
canvas.parent("canvas-wrapper");
background = color(255);
}
This should be creating a white canvas on my webpage but nothing is happening and Im concerned I have linked the file incorrectly.
There are several errors with your code. First off, you need to call all the functions that are supposed to run some code: This is how you do it: function_name().
The second thing you do is to define the function createCanvas, This function name looks similar to the P5JS library's createCanvas function, so I'm assuming that you are trying to use P5JS.
Add this to your head tag:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>
For more information please visit P5JS Library
I'm just starting on JavaScript and I'm following along this online course where it claims that if I insert <script> tags at the bottom of the page just before the <body> closing tag I should be able to see the website render first followed by the JavaScript code, but it is actually executing the other way around, the JavaScript code executes first and it's not until after I click "OK" on the message popping up that I'm able to see the website fully rendered.
Here is the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script src="scripts.js"></script>
</body>
</html>
scripts.js
alert("This text should appear after page is fully rendered");
I honestly don't know if this is how the code is supposed to work. Do alert(); scripts always execute first? Maybe the browser has something to do with it? (I'm using the latest version of Chrome). Anyhow, a well explained answer of what's happening would be much appreciated.
Personally, I would do something more like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script>
window.onload = function() {
alert('This should now load after the page.');
}
</script>
</body>
</html>
The window.onload = fun... says "wait until the page has finished loading". Depending on what the browsers decide to (with images, layout, plugins etc.), this may or may not work for you.
Or even something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script async defer src="scripts.js"></script>
</body>
</html>
With this example, the async attribute means "grab this script file in the background" and the defer means "wait until the page has loaded to execute it".
when I am typing react.js code that is given in bucky's react.js tutorial series it is not getting executed but when pasting it from bucky's github repo. it is getting executed.....Can any one help me out please...and the code is.
<html>
<head>
<title>
creating component
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\react.min.js"></script>
<script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\react-dom.min.js"></script><script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\browser.min.js"></script>
</head>
<body>
<div id="container_new"></div>
<script type="text/babel" >
var mycomponent=React.createClass({
render: function(){
return(<p>this is new component </p>);
}
});
ReactDOM.render(<mycomponent />,document.getElementById('container_new'));
</script>
</body>
</html>
I don't believe you can include the JavaScript files in the context of the location on your hard drive "c:\". I think you need to be running them using a web server (IIS, Node, etc.) and then include them using relative or absolute web paths (http://localhost/mytest/src/js/react-dom.min.js).
I'm trying to start a webpage with knockou.js
I'm trying to follow the instruction on the web and create very simple page, but for some reason i don't get the binding... maybe i miss a definiation or something like that? can anybody help with that?
That my page:
<html class="rtl">
<head>
<title>changeup - קבל שער</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<script type='text/javascript' src='bower_components/knockout.js/knockout.js'></script>
</head>
<body cz-shortcut-listen="true">
Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript">
var viewModel = {
myMessage: ko.observable() // Initially blank
};
viewModel.myMessage("Hello, world!"); // Text appears
</script>
</body>
</html>
but the only think i get on my browser is: "Today's message is:"
Read through the documentation under the subject Activating Knockout, you have to apply the bindings as well, add:
ko.applyBindings(viewModel);
after viewModel.myMessage("Hello, world!");
I'm building a mobile game with HTML5 and Javascript, for Android devices.
Android doesn't support HTML5 Audio, that's why i've choose to use a phonegap plugin : https://github.com/phonegap/phonegap-plugins/tree/master/Android/LowLatencyAudio
My structure is very simple, i've got 3 objects.
game, which is my main object.
animation, which is my object where are all my sprites animations.
sound, which all my sound are played, looped or stopped.
Here, my index.html file :
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" charset="UTF-8" src="cordova.js"></script>
<script type="text/javascript" charset="UTF-8" src="PGLowLatencyAudio.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/src/pixi.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/game.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/sound.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/animation.js"></script>
<script type="text/javascript" charset="UTF-8">
function onDeviceReady(){
PGLowLatencyAudio.preloadFX('drum','assets/son/drum/drumPiste1.mp3', game.sound.successHandler, game.sound.errorHandler);
};
function onBodyLoad(){
document.addEventListener("deviceready",onDeviceReady,false);
};
</script>
</head>
<body onload="onBodyLoad()">
<div id="wrapper"></div>
<script type="text/javascript" charset="UTF-8">
game.init();
game.sound.init();
game.animation.init();
</script>
</body>
I'm using the PGLowLatencyAudio.preloadFX function of the plugin, to preload my mp3 file.
After, I call my init function of my object sound, which is like that :
game.sound = {
init: function(){
soundsArray = [];
game.sound.playSound();
},
successHandler: function(result){
alert(result);
},
errorHandler: function(error){
alert(error);
},
playSound: function(){
PGLowLatencyAudio.play('drum', game.sound.successHandler, game.sound.errorHandler);
},
};
In my init function, i call my playSound function, to play the sound i've previously preload.
It try to play sound before preload, but i don't understand why.
Error message is : A reference does not exist for the specified audio id.
Here's the link, which i followed for a similar project earlier.
It has the solution to the problem !