Where do I store files for the src method? - javascript

I am learning JavaScript and there is this:
<script type="text/javascript" src="myjava.js">
</script>
Where would I store "myjava.js"? Would it find it if the file is on my desktop?

You should put the javascript file in the same folder your html file is residing. I highly discourage the use of absolute path to specify the src since you will have to edit the references once you move your file from one place to another. Also, a good organization is necessary while writing web apps so I recomment you to create a proper directory structure such as:
webroot
yourpage.html
js
myjava.js
css
styles.css
images
1.jpg
With such directory organization, your work looks properly structured. So now you can reference the javascript file as <script type="text/javascript" src="./js/myjava.js"> </script>

For static html pages, the JavaScript file must be in the same folder as the html file, from which it is called. Otherwise you should use a relative path - ../path/somefolder/myjava.js or full path.
Example:
<script type="text/javascript" src="C:/Documents%20and%20Settings/USER/Desktop/some.js"></script>

The value value of the src attribute of a <script> element is the URL to a script file. This URL can be relative or absolute.
If the page containing the <script> element is located at, for example, http://mysite.net/someDir/myPage.htm, and the script file is in the same directory, you can use any of the following for your src attribute.
<script src="myscript.js"></script>
<script src="/someDir/myscript.js"></script>
<script src="//mysite.net/someDir/myscript.js"></script>
<script src="http://mysite.net/someDir/myscript.js"></script>
If you are loading the page from your computer, save the script file in the same directory as your html file, and use a relative path.

Related

My js array wont display with console.log in chrome browser

console.log doesn't display what I want it to show in my chrome browser dev console.
I have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="script.js">
console.log(amazingCars);
var amazingCars =["BMW","Lexus","Ford","Mercedes"];
amazingCars.pop();
console.log(amazingCars);
amazingCars.sort();
console.log(amazingCars);
amazingCars.length;
console.log(amazingCars.length);
</script>
</body>
</html>
The directions for the assignment are the following:
Link the JavaScript page to the HTML page.
Create an array named amazingCars that contains four values:
BMW
Lexus
Ford
Mercedes
Remove the last value from the array
Next, sort the array in alphabetical order
Lastly, find the length of the array
I dont understand why it isn't displaying or the reason of this issue
If you are putting your JS code in html just add them between<script></script> tag.
You do not need to add src for script unless your JavaScript code is coming from a separate script file.
The src attribute specifies the URL of an external script file.
If you want to run the same JavaScript on several pages in a web site,
you should create an external JavaScript file, instead of writing the
same script over and over again. Save the script file with a .js
extension, and then refer to it using the src attribute in the
<script> tag
.
As per the instructions that you are following : "Link the JavaScript page to the HTML page."
Create another file "index.js" in your project directory.
Move your js code into the index.js file in your project directory and then use :
<script src="index.js"></script> in your HTML.
Firstly, make the <script src="index.js"></script> seperate from the code in the head, also unless if you have a seperate javascript file you dont need the src part at all, and secondly the first console.log outputs it before definition, creating an error. I hope this helped
You have to change <script src="script.js"> to <script>.
Alternatively you can keep it this way and create a script.js file and copy paste all the code you have inside the <script> tag to the file. This file need to be in the same folder as your index.html file.

How can I add an HTML file that references other JS files in Google Sites?

I was trying to set up a page on Google Sites to show of my work with some HTML canvas games I made. However, Google Sites' "Insert HTML" option is severely limited, it only lets you enter HTML code that has no external dependencies to work. As you can imagine, the kind of things I want to upload have textures, audio and multiple js files scattered throughout the code. All js files are referenced on the main HTML file, but this isn't working, it isn't picking up the other files and it's just showing a white screen.
Here is all of the HTML code (as you can imagine, 99% of the work is JS):
<html>
<div id="canvas_div_no_cursor">
<canvas id="gameCanvas" width="800"
height="600"></canvas>
</div>
<script type="text/javascript">
document.getElementById('canvas_div_no_cursor').style.cursor = "none";
</script>
<script src="js/classes.js"></script>
<script src="js/HUD.js"></script>
<script src="js/movement.js"></script>
<script src="js/gameplay.js"></script>
<script src="js/graphics.js"></script>
<script src="js/input.js"></script>
<script src="js/audio.js"></script>
<script src="js/Main.js"></script>
</html>
That's about it, all the rest of the code in in those referenced js files. Yes, I uploaded the whole folder to Drive, and even tried importing the html through there, it won't even let me. I searched online to no avail, does anyone have a clue to how I can do this? The only viable option I see is to transfer all the code from the files to the single HTMl file, but I don't even know if it would accept other calls such as .mp3 files and .png files.
You can upload the needed files to Google Drive and get a directo download link to them with this site. Once you have that, simply change the src with the direct link and it should import it.

HTML cannot load css and js file in iOS/OSX project

it work perfect when the css and javascript write in the HTML file, but it is not working after extracting the javascript code to a separate file. have some way to fix it? Thanks in advance!
Get it, We do not need to add the detail path to load the js/css file. No matter which folder u put your css/js file, just do like this:
<link rel="stylesheet" type="text/css" href="your.css">
<script src="your.js"></script>
don't do this:
<link rel="stylesheet" type="text/css" href="css/your.css">
<script src="js/your.js"></script>
If www has sub-folders, when drag it into Xcode, make sure select Create folder references for any added folders. This option will keep www structure. js/css files will loaded successfully.

dynamic reference to javascript file

I have a master page with a reference to javascript file that is js folder.
Both File and masterpage are in the root directory.
Many of my forms are in different folders Like
Root>first>abc.aspx
Root>second>def.aspx
Root>second>anotherFolder>def.aspx
I kept the reference like this
<script type="text/javascript" src="js/Check.js"></script>
I also tried src="<%= Page.ResolveUrl("~/js/Check.js") %>" and src="~/js/Check.js". While using Page.ResolveUrl and Server.ResolveUrl page shows error.
What i need to do so that any form in any directory get the reference of the file.
I dont want to do ../ and ../../ in every form.
<script type="text/javascript" src="/js/Check.js"></script>
you can use "/" --> web site root
If you're running your Visual Studio's internal server for debugging then firstly remove the virtual folder it insists on using.
Do this by selecting the root of your site in VS Solution explorer, then right-click and choose "Properties Window" - in the properties change "Virtual Path" from your "AppName" to /
This virtual path plays havoc with all sorts of paths..I find that if i don't make this change in VS then when I DO get all my paths working they won't work when I put the site on a live server that isn't using a virtual site.
Then set your JS reference to <script type="text/javascript" src="/js/Check.js"></script> - using the root / in your src.
UPDATE
If you really want to keep the virtual folder then you can try this - using ResolveClientUrl():
First, add Runat="Server" to your <head>
<head runat="server" id="myhead">
<script type="text/javascript" src='<%=ResolveClientUrl("~/js/check.js") %>' />

How to put JavaScript from tutorial into my website?

I'm new to JavaScript and I'm trying to get a slideshow working in my website. I'm following this tutorial: http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited
Unfortunately it doesn't go into a beginners level of detail as to how to get it installed. I know what I should do with the HTML and the CSS but I'm not sure where I should be putting the JavaScript. Does it go in a separate file or something? How do I get it to work?
Also I'm trying to do this within cakephp so if there's any specific cakey thing I can do that'd be awesome!
Copy all that JavaScript on your referenced page. Save to a new file slide.js or something like that.
Edit your HTML document to include a reference to the jQuery libraby, and that new JavaScript file you've just created:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://mysite.com/slide.js" />
You can put JavaScript in an external file with a .js extension, and include that in an HTML page using the script tag:
<script type="text/javascript" src="yourscript.js"></script>
Alternatively, you can write the script directly in the script element:
<script type="text/javascript">
//Your script here
</script>
Also note that as the tutorial you are following uses jQuery, you will need to download and include the jQuery library in your page.
The script tags can be placed anywhere in the document, but are usually found inside the head tag, or just before the closing body tag.
Welcome on SO Helen.
That script uses the jQuery library so you have to also include that. http://jquery.com/
JavaScript can best be placed in seperate file with the extension .js
Add the javascript files just before the </body> tag on your page like:
<script src="/js/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/js/jquery/jquery-slideshow2.js" type="text/javascript"></script>

Categories

Resources