How Should use external javascript library in jquery? - javascript

What's wrong in my initialization, when I trying to use external javascript library in jquery
and I want to get a custom value from my pages and then manipulate that value by using external javascript plugin and then return back new value(or replace with old value),
below is my code:
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="external-library.js"></script>
<script>
var OldValue;
var NewValue;
OldValue = $(".raw-Data").html();
NewValue = new External-function(OldValue);
$(document).ready(function() {
$(".result").text(NewValue);
});
</script>
</head>
<body>
<div class="raw-Data">1318781876406</div>
<div class="result"></div>
</body>
</html>
When I add my <script> section in my document <head> section like above code all things works correctly and I haven't any problem,
But the problem arise when I want to add <script> section in end of document before closing <body> tag
because Drupal CMS initializing javascript library in bottom of document.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="raw-Data">1318781876406</div>
<div class="result"></div>
<script src="jquery.js"></script>
<script src="External-Library.js"></script>
<script>
var OldValue;
var NewValue;
$(document).ready(function() {
OldValue = $(".raw-Data").html();
NewValue = new ExternalFunction(OldValue);
$(".result").text(NewValue);
});
</script>
</body>
</html>
I want to know what's the correct and compacted method to do this.
Thanks for any help or suggestion.

JS variable names / function cannot contain - sign.
the common naming convention used by javascript is camelCase
so that New-Value should become newValue
and External-Function should change to externalFunction
see javascript variable naming convention on w3schools for more information :
https://www.w3schools.com/js/js_conventions.asp

Related

Multiple js files in an html page

I'm writing some codes in P5JS. And I want to add multiple JS files to my HTML page. But when I do that, only the last one is displayed on the page. How can I show all of them?! And how can I style each one? For example I want to show one of them on top of the page, then have some HTML files or texts or whatever, then another JS file below them. How can style them using CSS? I have already linked the CSS file to the HTML page.
The site didn't allow me to paste the code the way I wanted so I uploaded the picture here
Thanks..
You can put all of the js files either in the head section:
<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
or you can put it at the bottom of the file:
<html>
<head>
</head>
<body>
</body>
<script src=script1.js></script>
<script src=script2.js></script>
</html>
If you're going to add multiple p5js sketches to one HTML document you could create p5 instances to keep all variables out of the global scope of your page.
Example if the following was saved as 'sketch.js':
var sketch = function( p ) {
var x = 100;
var y = 100;
p.setup = function() {
p.createCanvas(700, 410);
};
p.draw = function() {
p.background(0);
p.fill(255);
p.rect(x,y,50,50);
};
};
var myp5 = new p5(sketch);
and then you would import the sketch and use it in a div in your HTML.
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</style>
</head>
<body>
<div id="sketch"></div>
</body>
</html>
You would then repeat for other sketches. You can even have multiple p5js sketches in one js file.
With the code for your sketches and html this would probably be fairly quick to resolve.

Handlebars is not defined

I am new at JS and never tried Handlebars before. I'm trying a very bare-bones example from a tutorial. I have downloaded handlebars-v4.0.5.js from the Handlebars website and included it in my page, as follows, along with a template I precompiled, name-table.js. I'm trying my god damned hardest to complete this tutorial but I can't, because when I run the following code, I get ReferenceError: Handlebars is not defined which I can't for the life of me understand, if the file I downloaded from Handebars' own site is in any way valid.
<html>
<head>
<meta charset='UTF-8'>
<title>Test Page!</title>
<script type='text/javascript'>
function init() {
document.getElementById('button').addEventListener('click', buttonClick, false);
}
function buttonClick() {
var injection = Handlebars.templates['name-table'];
document.getElementById('button').innerHTML = injection;
console.log('hello, world.');
}
window.addEventListener('load', init, false);
</script>
</head>
<body>
<button id='button'>Button</button>
<div id='content'></div>
<script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
<script type='text/javascript' rel='js/name-table.js'></script>
</body>
</html>
Edit:
The answer I marked solved the problem. Another error appears in this code, and I want to let anyone reading this know that var injection as defined in this code is a function, not a string as I had thought. This code will work if rel is changed to src as in the answer given, and if we use document.getElementById('button').innerHTML = injection(); (note the parens).
You are not loading in Handlebars (or your name-table script). You currently have the following markup:
<script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
<script type='text/javascript' rel='js/name-table.js'></script>
You should be using the src attribute instead of the rel attribute for script tags.
<script type='text/javascript' src='js/handlebars-v4.0.5.js'></script>
<script type='text/javascript' src='js/name-table.js'></script>
The Mozilla documentation does not specify the rel attribute as a valid script tag attribute.
Include this line:
<script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
You are done.
Thanks.

writing javascript in html page

I found JavaScript I like to use but I need It to be written in the html page and not as a separate file ... Here is a JS fiddle
Here is how I tried to write it:
<head>
<style>
p span {color:blue;}
</style>
</head>
<body>
<p>sony sensor 2.1mp</p>
<script>
$('p').html(function(index, value) {
return value.replace(/(\d+)/g, '<span>$1</span>');
});
</script>
</body>
I know that I can wrap the numbers with <span> tag but
in my actual page I have numbers dozens of times during the text and this is way I rather use the script...
What do I need to change in the script to make it work?
Two things, use <script type='text/javascript'></script>. And add a reference to jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
and put your scripts inside $(document).ready().
I think you really should take a look at this
Update
As you're using jquery you will need to add the scripts to your page, and all your jquery code must be inside $(document).ready(function(){ }), it will look like this.
<head>
<style>
p span {color:blue;}
</style>
</head>
<body>
<p>sony sensor 2.1mp</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('p').html(function(index, value) {
return value.replace(/(\d+)/g, '<span>$1</span>');
});
})
</script>
</body>

Getting the title of the page and displaying it - JS

var lPT = document.title.split(' -')[0];
$('.pageBar .left').text(lPT);
With above code snippet, I am trying to display the title of webpage as in below example,
'Home - Sample Website' would come out as 'Home'
The html would be,
<div class="pageBar"><div class="left"></div></div>
I am trying this, but it is not displaying the title. I am relatively new to JS, and I would like to know, what am I doing wrong?
Try using this,
var lPT = document.title.split('-')[0].trim();
$('.pageBar .left').text(lPT);
Also, make use that you are not getting errors in the browser console and you have included the jquery file before this snippet.
Make sure that page title contains - else it will not show anything.
Check below example:
var lPT = document.title.split(' -')[0];
console.log(lPT);
$('.pageBar .left').text(lPT);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Sarjan - My page</title>
<div class="pageBar"><div class="left"></div></div>
Just like T.J.Crowder said:
you need to import jquery
you need to place your code after the you want to manipulate with that code (otherwise when your code runs the DOM element with the .pageBar does not exists yet )
Here is an example:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home - Sample Website</title>
</head>
<body>
<div class="pageBar">
<div class="left">
Sample text
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var lPT = document.title.split(' -')[0];
$('.pageBar .left').text(lPT);
</script>
</body>
</html>

How to call a function from javascript file and save the return value as global

Inside an HTML I have a script:
<script src="info.js" type="text/javascript"></script>
Inside info.js there is a function, lets say getInfo(key) which returns info.
How can I call a function located inside info.js from my html, so that I can use this variable inside the whole html document?
w3schools does not explain how to do this
Something like this:
var global; // global var
// js code...
// function
function myFunc(){
global = getInfo(key);
}
This might help you understand what's going on.
Let's say the code below is located inside info.js
function getSomething(){
return "something";
}
Now your HTML might look like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="info.js" type="text/javascript"></script>
</head>
<body>
<span id="mySpan"></span>
<script>
var myText = getSomething();
$('#mySpan').text(myText); //this uses jQuery so you'll need to include that
</script>
</body>
</html>
If I got you correctly, that you want to use that info in all your html file, here's my answer. Let me know if it helps or if you meant anything else, I'll think accordingly.
<html>
<head>
<script src="info.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var info = getInfo(key);
$('div.myinfo').html(info);
});
</script>
</head>
<div class="myinfo"></div>
</html>
You have the desired information in a javascript var and you can assign it as value to a input/select element or copy it as html to a div/td/p/h1 etc.
Just use it like this:
var info = getInfo(key);
As long as your calling script follows the method in info.js (and assuming the function is not private) it should be accessible in any script

Categories

Resources