How to show graph instead of tables? - javascript

Please I need help. I found really cool code: https://codepen.io/chris-creditdesign/pen/cypJf but after I put the code into one HTML file, I can only see the output as tables (there should be a graph)
What is wrong with the code ?
I saved the code from page into a single HTML file as shown below:
<!DOCTYPE html>
<html>
<body>
HTML CODE HERE
<style>
CSS CODE HERE
</style>
<script>
JS CODE HERE
</script>
</body>
</html>
but my result are tables (I expect graphs:)

You need add to project additional library.
in your case it's
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://d3js.org/d3.v3.min.js
input these libraries before your code - in the head where the style also belongs
P.S.
In the future don't forget to watch the setting of pen project

Related

Link two JavaScript files to work together on top of an HTML page

I have homework for my programming class which requires that I work with JS classes. On top of that, I have to work with HTML and the classes have to be defined on a separate .js file. I've done all the work, and it runs ok if the classes are defined on the same .js file, but it stops working as soon as I paste the code on a different file. I've tried importing the classes on the primary file, but I could make it work (I've tried different import codes because I've found different answers to this question on Google but no one worked, that's why I'm asking here). I believe it's probably because I'm doing something wrong at importing, but I just can't find the error.
Although your code works, keeping js files at the top of the HTML will delay the load time of the page. In a simple scenario like a homework, there's no need to worry, but in large projects it becomes crucial.
And by reading your code, it just starts when all page has already loaded, so no need to put it in the head.
Have you tried doing this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="first.js"></script>
<script src="second.js"></script>
<p>Hello World!</p>
</body>
</html>
First, I'll share some code. This is my HTML head:
<head>
<meta charset="utf-8">
<title>Obligatorio1</title>
<link rel="stylesheet" href="css/estilos.css">
<script src="js/funciones.js"></script>
<script src="js/clases.js"></script>
</head>
This is my relevant code on the first JS:
window.addEventListener('load',inicio)
function inicio(){
document.getElementById("botonAgregarPersonas").addEventListener("click",registroPersonas);
}
let personas=[];
function registroPersonas(){
let nombre=document.getElementById("nombrePersonas").value.trim();
let seccion=document.getElementById("seccionPersonas").value;
let mail=document.getElementById("emailPersonas").value.trim();
let esta=false;
for (i=0;i<personas.length&&!esta;i++){
if (nombre==personas[i].nombre) {
esta=true;
}
}
if (esta){
alert("Nombre ya ingresado");
}else {
let Per = new Persona (nombre, seccion, mail);
personas.push(Per);
let texto=Per.nombre+" - Sección: "+Per.seccion+" - "+Per.mail;
agregarElementoEnLista(texto);
agregarEnComboCompras(Per.nombre);
agregarCheckboxes(Per.nombre);
}
}
function agregarElementoEnLista (texto){
let nodoLi=document.createElement("LI");
let nodoTexto=document.createTextNode(texto);
nodoLi.appendChild(nodoTexto);
document.getElementById("lista").appendChild(nodoLi);
And this is the code of my second JS file (the one with the class):
class Persona{
constructor(nombre, seccion, mail){
this.nombre=nombre;
this.seccion=seccion;
this.mail=mail;
}
}
I'll start saying that, while I've found out the issue, I don't understand why does it happen.
Ok, as you can see on the last piece of code, the parameters have the same name as the class attributes. If I would try copying the code on the first JS file, it would work without any issue, but as soon as I work with that code on a separate JS file it would stop working. After touching every part of the code, I ended up changing the parameters name so it would be different than the class attributes, it looks like this now:
class Persona{
constructor(_nombre, _seccion, _mail){
this.nombre=_nombre;
this.seccion=_seccion;
this.mail=_mail;
}
}
And that code right there works totally fine, without changing anything on the rest of the files (neither the first JS file nor the HTML one).
If anyone understands more than me on why does this happens, feel free to edit this answer.
Thanks everyone for the help!

HTML will not execute JavaScript functions

I am trying to get a very simple javascript project going, but I cannot get any function to execute. Here is a simple example. It is obviously just an example. I have tried everything I can think of to get the browser to recognize that I am trying to call a function that has been defined, but it never does anything but just display the text, rather than call anything. In the below example, I simply get a page with the text: "varTimesTwo(3);"
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
</script>
varTimesTwo(3);
</body>
</html>
your code is wrong, you have to place varTimesTwo(3); inside the script tag, like this:
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
varTimesTwo(3);
</script>
</body>
</html>
Keep all JavaScript code in the script tags, or better yet, in a file
separate from the html file using <script src="myjsfile.js"></script>
You can use document.write(string) to write a string to the document.
This string is treated as HTML so you need to use <p>text</p> or <br> to get line breaks.
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
document.write("3 times two is "+varTimesTwo(3));
</script>
</body>
</html>
Alternatively, you can use window.alert(string) or simply alert(string) to pop up an alert box. But if you have turned off pop-ups in the browser, these will not pop up.
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
alert("3 times two is "+varTimesTwo(3));
</script>
</body>
</html>
console.log(string) writes to the debugging console, which you can see on many browsers with either control-shift-J or F12.
The javascript debugging console is also useful for learning javascript without messing with input and output. Anything you type in the JS console is immediately executed, so you can define functions there and play with them without having to write additional code to write the output or read input.
Finally, these techniques are insufficient for most websites as they are actually used. Instead, what is done is to define an html container element and change the text or html that is inside. jQuery provides a browser-independent method of manipulating the document to change items on the page.

How to link a JS file externally?

I faced this problem.The Condition needed is that the external file should not include script tag.But in order to call a function the script tag is needed.The code is a mere example.Also is there any other alternative to link the External JS file.
<!DOCTYPE html>
<html>
<body>
<script src="Friendship.js">
</script>
</body>
</html>
The code for the external JS is:
<!DOCTYPE html>
<head>
<script>
function mySpace()
{
document.getElementById("playa").innerHTML="Friendship is always a sweet responsibility, never an opportunity.
";
}
</script>
<body>
<h1><tt>Friendship</tt></h1>
<p id="playa">"One of the most beautiful qualities of true friendship is to understand and to be understood.
"</p>
<button type="button" onclick="mySpace()">Click Here !</button>
</body>
</html>
A Javascript file, should only contain JavaScript code. It should not contain HTML, CSS or any other markup.
Based on your example above, you should have the following two files:
index.html
<!DOCTYPE html>
<html>
<body>
<!-- Link to external JavaScript file -->
<script src="friendship.js"></script>
<h1><tt>Friendship</tt></h1>
<p id="playa">"One of the most beautiful qualities of true friendship is to understand and to be understood."</p>
<button type="button" onclick="mySpace()">Click Here !</button>
</body>
</html>
friendship.js
// This is a comment
function mySpace()
{
document.getElementById("playa").innerHTML="Friendship is always a sweet responsibility, never an opportunity.";
}
Notes
The friendship.js is pure JavaScript (or comments as per my example above). You should not add any HTML tags to the JavaScript file such as <html>, <body>, etc. You also do not need to include <script> tags which will generate errors.
is it possible to write the JS code without an HTML declaration
I'm not exactly sure what you mean by this, but I'll attempt to explain. If you were to visit http://www.example.com/friendship.js then you would be shown the raw JavaScript code in that file. The code would not be executed automatically. You will need to initiate the JavaScript from an HTML file itself, just as you've done in your HTML with onclick="mySpace()".

Having trouble with jmHighlight

I am very new to Javascript (ok, I've done 'Hello World' alright =]) and my other web programming skills are very limited.
I am trying to implement jmHighlight into one of my already created webpages but found I can't even get it to work in a clean page of its own. I've obviously made a very rudimentary mistake somewhere but can't figure out where so I'm hoping someone can help.
Here's what I've tried which doesn't work:
<!DOCTYPE html>
<html>
<head>
<style>
.context {
font-size:14px;
font-family:verdana;
}
span.highlight {
background-color:#000000;
font-color:#ffffff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.jmHighlight.min.js"></script>
</head>
<body>
<p class="context">some text</p>
<input type="button" value="Try it" onclick="myFunc()">
<script>
function myFunc(){
jQuery(".context").jmHighlight("some");
alert("Done!");
}
</script>
</body>
</html>
The alert works so I think the basic code is ok, I think its more the syntax of the plugin I've gotten wrong. The author shows his work here: here on GitHub and altered his syntax in section 2 for a fixed keyword ('some') instead of using a text box for now. The include is in the same location as my page, but doesn't show in the debugger when I preview the page as loaded...
I have also tried lifting the code from his basic example Fiddle here but still can't get it to work. I've also had a look at other jmHighlight questions here on SO, but can't manipulate them to work for me.
If someone could kindly point me in the right direction, or supply me with a very simple but complete working example that I can dissect myself to figure out where I went wrong, I'd be very appreciative!
This code is working in Chrome, I have tried it and here is a fiddle which also shows it is working.
The only thing I think may not be right is your path to jmHighlight or the version of jmHighlight.
jmHighlight was also renamed to jquery.mark. Here is a rawgit URL pointing to the .min.js:
https://rawgit.com/julmot/jquery.mark/master/dist/jquery.mark.min.js

Beginner JavaScript: using src

EDIT:[Honestly this works fine you can read my edit comment below.]
So I am very new to JavaScript. This book I have tells me that I can write the script code in another file that has a .js extension. What it doesn't tell me is what should be in that .js extension.
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body>
The content of
your page goes here.
</body>
</html>
Lets say I wanted to make an alert message in the java script file. Inside the "fileName.js" would all I write be:
alert("This is an alert box");
and then save it and call it quits? Cause that is what I have so far and nothing doing.
EDIT:
Ok I want to add this in for anyone in trouble like I was. Turns out, this works perfectly. The comments below are a great help for further information. But the thing I did not realize was that on my Mac I needed to start the path to file at /Users. I feel dumb but at least I figured it out. Thanks all for your help.
Use " instead of ”:
<script src="path/to/file/fileName.js"></script>
^ ^
Generally your js files will have objects and Methods that are called/used from you main page.
So you html wiil look like :
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body onload="showAlert();">
The content of
your page goes here.
</body>
</html>
and you js will look like:
function showAlert(){
alert("This is an alert box");
}
Look into events and listeners. For example, if you want the alert to come up when the page loads, your html file would have:
<body onload="functionName()">
</body>
And you javascript file would have:
function functionName() {
alert("alert message");
}
Usually you would write your Javascript code as a series of functions that you can call whenever you need. So yes, you can write a single statement the way you did but most times its functions.

Categories

Resources