I have two files screen.html and db_fun.js.I have declared a variable at just the beginning as follows:
db_fun.js
var name = "abc";
now i tried to access this variable in the screen.html file as follows
screen.html
<html>
<body>
<form name = "screen" action = "db_fun.js">
<p> <script>document.write(name);</script> </p>
</form>
</body>
<script src="db_fun.js" type="text/javascript" />
</html>
it doesn't print nethn. Y so?
add this to the head
<script type="text/javascript" src="db_fun.js"></script>
I think that you should move
<script src="db_fun.js" type="text/javascript" />
In the head of the page. I.e. before document.write.
Because in the moment where you are trying to print 'name', the variable is still not created. Also I think that it is not a very good practice to use document.write to add content to your page. Try using jQuery or some other library. For example:
$(document).ready(function() {
$("p").html(name);
});
That's because you are inserting your JavaScript in the page footer. You have to firstly load your javascript file into your web site (in the head section for example) and then use your variable.
Related
I have an application that allows the use of inline javascript, but not javascript from source files. I'm trying to modify a webpage to open on this browser, and need to know how to put the javascript files from the webpage inline.
Use <script> tags in your HTML. They can go anywhere - I prefer inside the <head> tag:
<head>
<script type="text/javascript">
// put anything here - any type of valid javascript works
// if you import jquery, you can use jquery here too!
</script>
</head>
You should place your imported code into the script tag in your HTML page (application in your case), look at the following example:
<html>
<head>
<script type="text/javascript">
//Import your JS script here, e.g.:
function doSomething(){
..
}
</script>
</head>
<body>...</body>
</html>
This question already has answers here:
javascript <script> tag - code execution before src download
(4 answers)
Closed 8 years ago.
I am relatively new to JavaScript so this might be somewhat trivial. However I can't seem to find the answer to this question.
Say I have a JavaScript file (bar.js) with a function in it called foo(). I want to call this function (foo) inside a script tag. I would like it to work like so.
<script type="text/javascript" src="bar.js">
foo();
</script>
I am not able to get this to work. I have ran the JavaScript console with my browser and what it seems to be doing is...nothing. No syntax errors or anything.
I can run a function similarly with a button click...using the script tag above and this.
<button type="button" onclick="foo();">Click Me</button>
I could do it this way, but in the actual circumstance I need to pass parameters into the function that is being called on the button click. I can't get those recognized either. I'm sure that something to do with scope.
The way I tried this was like so...
<script type="text/javascript" src="bar.js">
var a = "blah";
var b = "blab";
</script>
.... (some more html)
<button type="button" onclick="foo(a,b);">Click me </button>
Here I get that a is undefined. Which leads me to think that it is a scope problem. The script tag is in the head section and the button is in the body section. Can you put script tags outside of the head and body tags to make global data?
Thanks for the help in advance.
I have never used jsfiddle before and was having trouble getting it to work so I'll just post and example code here.
<html>
<head>
<script type="text/javascript" src="bar.js">
</script>
<!--From what yall say I should have another script
tag here for anything else. Say some variable?-->
<script type="text/javascript">
var a = "hello";
var b = "text";
</script>
</head>
<body>
<!--This should work now?-->
<button type="button" onclick="foo(b,a)">
Click me
</button>
</body>
</html>
bar.js contents:
function foo(id,string){
document.getElementById(id).innerHTML = string;
}
I got this to work.
Thanks everyone.
You need to first include the javascript containing the function:
<script type="text/javascript" src="bar.js"></script>
and then call it in another script tag:
<script type="text/javascript">
foo();
</script>
In your example you seem to have mixed 2 notions into a single script tag which is invalid: include an external javascript file and in the body of the script tag write your code.
According to the specification:
The script may be defined within the contents of the SCRIPT element or
in an external file. If the src attribute is not set, user agents must
interpret the contents of the element as the script. If the src has a
URI value, user agents must ignore the element's contents and retrieve
the script via the URI.
So basically you should avoid such situations and have separate script tags for including external files and for writing inline js.
I'm writing java script code in script tag in head like:
<head>
<script language="javascript">
object o = new object({....});
</script>
</head>
and trying to use object a in body tag
<body>
<script>
alert(o.value);
</script>
</body>
how can i access object from body???
is their any alternatives?
<head>
<script language="javascript">
var o = new Object();
o.value="a"
</script>
</head>
<body>
<script>
$(document).ready(function()
{
alert(o.value)
});
</script>
</body>
In this case var a is accessible in complete application, but one thing you need to make sure if you are using external JS files then it must be loaded when you using the variable. try onload function to assure JS is loaded and ready to use in body:
window.onload = function ()
{
alert(a);
}
Since your variable is declared outside any functions it can be accessed from anywhere in your document from the same script block or from a seperate script block like in your example. it can even be accessed from html event-attributes like this (note that its better to attach events to html elements using using js):
<button onclick="alert(a);">Click this button to open an alert!</button>
I know this question are asked hundreds of times :( but I just want to learn more :).
My question is simple, can I pass a value to a js file like this, if not, how ?
<script type="text/javascript" src="./js/create.js?method=create"></script>
Yes, you notice that I have a parameter method=create which I want to use in my create.js.
I know in jquery ajax, we have an easy way, but you must notice that the ajax method is in included in the js file, how could I pass a parameter to the js file itself ?
Any answer is welcome :)
Thanks.
This works perfect for me:
<script src="js/script.js" id="myScript" data-url="my_variable"></script>
inside the script.js file:
var myUrl = document.getElementById("myScript").getAttribute( "data-url" );
"myUrl = my_variable" inside the code
you can use myUrl everywhere.
Not really, no. What you can do is this:
<script type="text/javascript">
var method = "create";
</script>
<script type="text/javascript" src="./js/create.js"></script>
Another way is to only define functions inside your javascript file, and then invoke after it has loaded.
<script type="text/javascript" src="./js/create.js"></script>
<script type="text/javascript">
runMyLoadedCode("create");
</script>
Third way is belying my first simplistic answer: access the script tag itself and parse it. You can see here how to access the tag that has loaded your script; take its src value and cut it up to locate your method=create.
I came accross this html multiple file upload tutorial: http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/
I'm new to web programming enough to not being able to understand how to make a code from the two sections of the 'complete code' in this tutorial, which basically are:
A. Some html code:
<h3>Choose file(s)</h3>
<p>
<input id="files-upload" type="file" multiple>
</p>
<p id="drop-area">
<span class="drop-instructions">or drag and drop files here</span>
<span class="drop-over">Drop files here!</span>
</p>
<ul id="file-list">
<li class="no-items">(no files uploaded yet)</li>
</ul>
B. And some javascript:
(function () {
var filesUpload = document.getElementById("files-upload"),
dropArea = document.getElementById("drop-area"),
fileList = document.getElementById("file-list");
function uploadFile (file) {
[etc]
I recognize the code, but I don't understand where a part of code beginning with (function () is supposed to go into my code.
So my question is: how should the javascript part be placed in my code.
[Edit]
Thanks for your complementary answers!
Either just before the </body> tag, between a <script type="text/javascript"></script> tag like this:
<body>
<!-- other stuff -->
<script type="text/javascript">
(function () {
// this is your function's core
})();
</script>
</body>
Or within the <head></head> tag, also between a <script type="text/javascript"></script>, but you have (probably) to wait until the DOM correctly loaded. For example, using jQuery:
<head>
<!-- other stuff -->
<script type="text/javascript">
$(function() {
(function () {
// this is your function's core
})();
});
</script>
</head>
Or even within an external JavaScript file, where you'll also have (probably) to wait until the DOM correctly loaded. For example, once again using jQuery:
file myScripts.js
$(function() {
(function () {
// this is your function's core
})();
});
file myDocument.html
<head>
<!-- other stuff -->
<script type="text/javascript" src="/path/to/myScripts.js"></script>
</head>
Javascript is placed inside onClick, onMouseOver, etc. attributes, as well as inside <script type="text/javascript"> tags.
They can be anywhere inside the <head> or <body> tags (place it after the elements you are accessing, so that they load).
w3 Schools has a Javascript reference to get you started.
Create a file with .js extension so yourFile.js.
Put your java-script code in it...
At the end of HTML file place this inside:
<script src="yourFile.js"></script>
Make sure your js is in the same directory as is your html...
Just put the javascript inside <script></script> tags after your upload form.
The post you linked to has a complete working demo of the code it describes which can be found here:
http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html
A good way to experiment with this kind of code snippet is to paste the required section into a tool like JSFiddle
Since the code includes getElementById but nothing like window.onload or any other deferring tactic, it MUST be placed AFTER the form you want it to affect. To be on the safe side, you can place it in a <script> tag immediately before </body>.