How do I run code I have written in JavaScript? - javascript

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>

Related

Chrome developer environment for Javascript

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>

External JavaScript file not working - ReferenceError

So, I have this really weird error. I am trying to link to an external JS file from my HTML file. Whatever I do, the functions in that external JS file can not be called.
This is my HTML code:
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
<script type="text/javascript">
//some other JavaScript...
function test() {
extTest();
}
</script>
</head>
<body>
<button type="button" onclick="test();">Test</button>
</body>
</html>
And this is my external JavaScript file:
function extTest() {
alert("Hello world");
}
(I simplified both code blocks to contain only the necessary lines.)
So, whenever I click the button, the function extTest() is supposed to open a popup saying "Hello world". But extTest() is not called. Instead, I get a ReferenceError saying "extTest is not defined". The problem occurs in Firefox as well as Chrome and Edge.
Both files (HTML and JS) are in the same directory on my laptop. I tried linking to the JS file with a relative link (as shown in the code above), a relative link using . for current directory (./cookies.js), and an absolute link (/C:/...). I also tried putting the JS file in its own folder and linking to it, it didn't work.
I'd consider myself rather a beginner when it comes to JavaScript, but I already used external JS files and it worked. Do you guys have any idea where this error comes from? I mean, I could put all the code from the external file into the script in the HTML file, but I'm really curious why it's not working the other way.
Any hints are highly appreciated, thank you in advance.
You can use just like this, you don't need to make another function inside because i suppose you make the js code in cookies.js
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
</head>
<body>
<button type="button" onclick="extTest();">Test</button>
</body>
</html>
I'd say initially it looks like you are declaring your function test but not invoking it. Try putting a line below that just has:
test ();
A question, if you similarly invoke your extTest function at the bottom of your external .js file, by which I mean again putting a line that says
extTest(); does it work as intended? If it doesn't, then there may be another issue at hand.

Locally sourcing Javascript in HTML

Extreme beginner here guys so please explain as easily as possible.
I've read multiple variations of this and still am unable to figure it out, any help is greatly appreciated.
What I am wanting is a local environment to be able to learn HTML & javascript, but cannot get the script source inside HTML to correctly reference the .js file sitting in the exact same folder as the .html file. I am testing in a Chrome browser just referencing the .html file on my local machine via file:///C:/JavaScript/Index.html.
2 files(index.html and JS.js), both located locally on C:\Javascript
HTML Code:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="C:\JavaScript\JS.js"></script>
</body>
</html>
-Based on what I read, if they are in the same folder I should be able to just reference <Script src="JS.js"> as there is no folder structure to look through, is that correct?
-I've also tried to absolute path via <script src="file:///C:/JavaScript/JS.js"> and related versions of <Script src="C:\Javascript\JS.js"> that do not work either.
In my JS.js file, I have nothing but alert(); to test functionality, as my reasoning for incorrect sourcing.
If I simply write <script>alert();</script> without referencing any outside source, the alert works as planned.
Thank you in advance!
I'd recommend popping open Chrome's Developer Tools to see where the issue may lie (and, if you're new to development, these are tools that are built into Chrome that will make your life so much easier).
Your assumption about not requiring a path should be correct: if you're referencing another file that lives in the same directory, omitting a full path will cause the browser to assume the path is relative (e.g. "right next to") to the current file:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="JS.js"></script>
</body>
</html>

Load an HTML when another is display without modify him

Before all, I just want to apologize to my bad English (french school are not so good for practicing other languages ...).
I have a header.html on my site. I cannot modify him because it's not mine.
I just want to call an other html (one of mine, that i can modify, we can name it toto.html), when header.html is display (in other words, it's not a Java functions who call my other html, it's header.html).
I've tried some Jquery functions (like load()), Javascript and even the macro <#include from HTML, but without success.
Thanks to all for your responses.
Have a good day !
I have the following files in one directory:
helloworld.html
<p>hello!</p>
test.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$('#container').load('helloworld.html');
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Loading test.html in browser produces "hello!", so check if you jQuery is loaded properly.
Can you post example here to show us the context and how your page header.html is included in your site ?
I thinks it's not possible to do that : "(in other words, it's not a Java functions who call my other html, it's header.html)"
If you're not able to modify header.html or the way your page is called, it would be difficult to load anything else.

jQuery script not working when page viewed on localhost

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.

Categories

Resources