I am at the start of learning Javascript, but within the first 10min I hit on a Chrome issue. I'm attempting to display the code I wrote with Visual Studio in the Chrome console, but rather than showing the code in the section below the menus 'Element', 'Console', 'Source' etc, the code displays exactly as I wrote it, but in the view panel including all html tags below the menu section 'Apps', 'Bookmarks', 'Customize Links' etc. How do I resolve this, any answers?
I tried to use ctrl-o to open the .js file whilst in Visual Studio and also whilst on Chrome, but only the file path to the .js file opened, and when subsequently clicking on the file it looked like the image below.
chrome not displaying JavaScript code in the location I want it to be
To clarify - you are loading a .js file in the browser which is what is displaying in chrome (the content of that file).
What you want to do is run that js file and have Chrome's JavaScript interpreter (V8) parse that information. To do that, you must add your script to an index.html page and then in index.html, load that e.g something like <script type="text/javascript" src="script.js"></script>
Alternatively, you can just run the JavaScript directly in index.html via
<script type="text/javascript">
// your JavaScript
</script>
You are opening the javascript file directly in the browser, not opening an .html file with a javascript tag. That's why Chrome is showing you the file content.
If you want to execute your javascript code in the Chrome console, paste it directly in the "console" tab of the developer tools.
If you want to execute your javascript code in a web page, you have to create an html file with a script tag loading your javascript code, something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="main.js"></script>
</head>
<body>
</body>
</html>
In order to see your html content on browser you should load .html file instead of loading .js file
you can include your javascript code in two ways
Add your Javascript code inside the script tagcreate a new javascript file with extension .js and add it in your html file
Example1 (Adding Javascript inside script tag)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
console.log("good morning");
alert("good morning");
</script>
</body>
</html>
Example2 (Adding Javascript from external file)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="nameOfFile.js"></script>
</body>
</html>
Related
I am using a local HTML file with link to an external script (located in the same directory) that worked when in the file, but externally doesn't. Neither Firefox nor Chrome. Code:
<html>
<head>
<script type="text/javascript" src="docket.js"> </script>
</head>
<body onload="doFunction()"> ...
The script is in a .js file, which has (simplified):
function doFunction() ....
For one, you shouldn't include the script tags in your external js file.
Also try to move the script line at the bottom before the closing body tag.
If after removing, it still doesn't work, you should open the developer tools to get clue of what is going on.
index.html:
<!DOCTYPE html>
<head>
...
</head>
<body onload="doFunction()">
...
<script type="text/javascript" src="docket.js"></script>
</body>
</html>
docket.js:
function doFunction() {
alert("hello...");
}
Note: no script tags
As per w3school - https://www.w3schools.com/tags/tag_script.asp
The external script file cannot contain the tag.
The syntax for script tag is -
<script src="URL">
Where your URL is -
1. An absolute URL - points to another web site (like src="http://www.example.com/example.js") OR
2. A relative URL - points to a file within a web site (like src="/scripts/example.js")
Note: with HTML5, type attribute for script tag is optional.
I'd suggest to add a noscript tag just to make sure you have JS enabled in your browser.
<noscript>Your browser does not support JavaScript!</noscript>
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.
I'm trying to use Remark.js to create HTML presentations based on the template provided. The template includes the textarea tag with id='source' where the markdown is simply copied in. I wanted to go for a solution where I can leave the template and just change the file that is loaded, so that I don't have to work inside the HTML file and keep the markdown separate.
I've tried using jQuery (I'm a noob) but it does not seem to work, the page stays empty. Here's what I tried:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My presentation</title>
<link rel='stylesheet' type='text/css' href='presentation.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://gnab.github.io/remark/downloads/remark-latest.min.js'></script>
</head>
<body>
<textarea id="source"> </textarea>
<script>
$('#source').load('presentation.md');
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
I don't get any errors in the JS console, but I also don't see anything. When I simply copy the file into the textarea it works, as expected, so the markdown file is OK.
I ran Chrome with the --allow-file-access-from-files so that at least I don't get the cross-origin requests error. However, that is not satisfactory as I intend to place the HTML file (and the related files) in Dropbox. If possible, I don't want to run a web server locally as it's just a 'simple' HTML file with some text copied in from another file.
What's the best way to achieve this, i.e. copying in a file as-is?
This willl solve your problem:
Create the remark after you loaded the data by adding the call to your callback function.
<script>
$('#source').load('presentation.md', function() {
var slideshow = remark.create();
});
</script>
I am a beginner, all I have done is practiced writing code in Codecademy. After extensive searches of google for how to run a .js file, I turned up nothing. I assume I am asking the wrong question, and I am sure it is simple, but I couldn't find anything.
open an editor. Simplest one is notepad
Write basic HTML there like below
<html>
<head>
</head>
<body>
Hello World!
</body>
</html>
Add a script tag and write your js inside it like below
<html>
<head>
<script>
alert("hello");
</script>
</head>
<body>
Hello World!
</body>
</html>
or you can write your js code in a file and save as .js file and link that in the above code
<html>
<head>
<script src="myScript.js"></script>
</head>
<body>
Hello World!
</body>
</html>
Save this as yourfile.HTML and open in any browser
Here's a link to learn more: http://www.w3schools.com/js/js_whereto.asp.
This is an addition to previous answers.
If you want to practice simple JavaScript instructions and code snippets like you did in Codecademy you can use:
Your browser console, I believe pressing F12 will open it on all popular browsers
JS Console
Node.js's REPL (installation instructions)
First install and setup Nodejs in your machine. Then write your javascript and save it in a folder. Open the command prompt inside the folder and write the command to execute.
node a.js
Run javascript in your browser simply use this methods:
1. use jsfiddle.net
2. use developer console your browser (how to open console in Chrome/Firefox/Safari you can read in Wiki)
3. write your own file with extention .html and put it:
<script>
alert('Hello world!');
</script>
into the file, save file and open on browser.
Every method have own benefits when you discover JS. We developers use every day all of this methods.
You are to create a file with extension .html, so open up notepad or similar program and write the following:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//Your code
alert("You made your fist javascript!");
</script>
</body>
</html>
Your javascript actions and codes go inside the <script> tag.
When running a .js file, you just need to add it in your web page. Example.
If you have this as the content of a .js file say hello.js
alert('Yow!');
to use it, you create an HTML file
<html>
<body>
<script src="hello.js"></script>
</body>
</html>
I'm just starting to playing around on a Mac for the first time and I have created a very simple HTML page that uses jQuery to do a simple text swap when an h1 tag is clicked.
When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.
Here's the code:
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello()
{ $('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?
I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.
Steve
Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.
If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.
One last thing, make a habit to avoid onclick, do this instead:
<script type="text/javascript" charset="utf-8">
function sayHello()
{
$('#foo').text('Hi there!');
}
//wait DOM loaded
jQuery(function($){
$('#foo').click(function(){
sayHello();
});
});
</script>
Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.