HTML code :
<html>
<head>
</head>
<body>
<script type="text/javascript" src="/js/colorbook.js"></script>
<script type="text/javascript">
book.init();
</script>
</body>
</html>
JS code :
var book = (function(){
init = function(){
console.log ( "initialized")
}return init();
}());
Question : The above code works. But I am unable to understand how?. Can any of JS guys help me here or guide me how should I start debug this code to understand it.
Ok so as per your comment. The Javascript you have there is all executed sequentially as the browser reads it from the incoming data stream. That being said, All javascript contained within the first script tag will be executed. Then the second script tag will be executed in sequence as well.
So right now you can look at the book.init() as being the last provided javascript call to be executed.
I tried your JS code in jsfiddle and could not get it to work check This Fiddle to see what I mean.
What is happening in your JS code is the last () at the end of the var book declaration executes the anonymous function which will print the line to the console. However from the code you supplied the book variable never gets a book.init() method. So once that call is reached it will throw an error of undefined.
Related
I'm trying to connect my HTML files with the parser server. I followed the direction of the back4app guides and added the following code to the head of index.html. But the browser kept telling me Parse is not defined.
<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
<script type="text/javascript">
Parse.serverURL = "https://parseapi.back4app.com";
Parse.initialize(
"MY_APP_ID",
"MY_JS_KEY"
);
</script>
Can you please test the code below?
<script src="https://cdnjs.cloudflare.com/ajax/libs/parse/2.1.0/parse.js"></script>
<script type="text/javascript">
function myFunction() {
Parse.initialize("APP_ID", "JS_KEY");
Parse.serverURL = 'https://parseapi.back4app.com/';
}
/</script>
while trying to change the voices in the p5.speech, setVoice function just not working at all...
I've been tried both string and index, but still went wrong, is there anyone can help? I would be really appreciated!!
Thanks!
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/addons/p5.dom.js">
</script>
<script src="p5.speech.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<button id='talks'>
click to talk
</button>
<script>
$('#talks').click(function(){
console.log('hi')
var talk= new p5.Speech()
talk.onLoad=Voices
function Voices(){
talk.listVoices()
talk.setVoice('Google UK English Male')
}
talk.speak("What's up")}
</script>
</body>
</html>
below is the output of talk.listVoices() :
enter image description here
Firstly my answer is not the full solution, but there are some simple SyntaxErrors in your example. Thats why it's not runable for me at all.
You are opening click( but didn't close it, for better clearance i reformatted your code and added the closing bracket.
A function normally get's called with brackets, so it should be Voices();
This is not necessary for every Browser, but normally an ending line in JavaScript get's an ;
$('#talks').click(
function(){
console.log('hi');
var talk= new p5.Speech();
talk.onLoad=Voices();
function Voices(){
talk.listVoices();
talk.setVoice('Google UK English Male');
}
talk.speak("What's up");
}
)
With that changes i get an console output like this:
VM43:3: hi
p5.speech.js:136 p5.Speech: voices not loaded yet!
p5.speech.js:89 p5.Speech: voices loaded!
I wrote the following HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML page</title>
</head>
<body>
<script src='http://localhost:3000?callback=mycallbackFunction'> </script>
<script>
function mycallbackFunction(data) {
alert('here');
alert (data['a']);
}
</script>
</body>
</html>
As you can see, the script tag includes a JSONP request to a remote server.
In addition, I wrote the following node.js file and ran it as a server:
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.jsonp({'a': 'blabla'});
});
app.listen(3000);
After I had run the node.js file and opened the browser with the html page, I expected to see a pop-up window of alert. But, no. I didn't see anything.
The Network Tab in Developer Tools shows that the request has been accepted:
Do you know how to resolve it?
You need to swap the order of your <script> elements.
Explanation:
Express is correctly serving a script that looks like myCallbackFunction({'a': 'blabla'}), which is exactly what you hoped for. However, this script runs immediately, and myCallbackFunction has yet to be defined, so nothing happens. Then, in the next <script> block, you define myCallbackFunction, but this is useless, since the (failed) call has already happened in the previous <script>.
Also, you have a case mismatch on the C in mycallbackFunction -- make sure the capitalization agrees between the callback parameter and the name of your function.
The solution is to switch the order of both script tags:
<body>
<script>
function mycallbackFunction(data) {
alert('here');
alert (data['a']);
}
</script>
<script src='http://localhost:3000?callback=mycallbackFunction'> </script>
</body>
Using the following:
LowEast = agent.get('https://rs.alarmnet.com/TotalConnectComfort/Device/Control/12345')
puts LowEast.parser.xpath("//script[#type='text/javascript']")
Returns what follows, which I have somewhat truncated for brevity. Specifically, I would like to extract the two pieces of information prior to each semicolon and then I'll figure out how to dump them into a log file. I haven't seen how to do this, but it seems like it shouldn't be to hard. If I've missed a similar question, I apologize.
<script type="text/javascript" src="/TotalConnectComfort/Scripts/Control/Control.Urls.js?v=1.5.46"></script>
<script type="text/javascript" src="/TotalConnectComfort/Scripts/Control/Control.Init.js?v=1.5.46"></script>
<script type="text/javascript">
$(document).ready(function()
{
///////////////////// pass model data to client-side logic /////////////////////
Control.Model.set(Control.Model.Property.batteryStatus, 0);
Control.Model.set(Control.Model.Property.commercial, false);
Control.Model.set(Control.Model.Property.communicationLost, false);
Control.Model.set(Control.Model.Property.coolLowerSetpLimit, 50.0000);
Control.Model.set(Control.Model.Property.coolNextPeriod, 88);
Control.Model.set(Control.Model.Property.coolSetpoint, 78.0000);
Control.Model.set(Control.Model.Property.coolUpperSetptLimit, 99.0000);
Control.Model.set(Control.Model.Property.deadband, 0.0000);
Just use scan:
text.scan /Control.Model.set\((.*), (.*)\);/
Here is my html.
<html>
<head>
<script src="closure-library/closure/goog/base.js"></script>
<script src="hello.js"></script>
</head>
<body onload="sayHi()">
</body>
</html>
And here is my hello.js file.
var options = {
"style" : "background:#EEE;"
}
function sayHi() {
goog.require("goog.dom");
var header = goog.dom.createDom("h1", options, "hello world");
goog.dom.appendChild(document.body, header);
}
Why does Chrome Console issue this error?
Uncaught TypeError: Cannot call method 'createDom' of undefined
In general, I don't think I can require a library in the same code block in which I call a function from the library. I just saw this in the documentation, but I was wondering why.
In uncompiled Closure code, each goog.require(NAMESPACE) results in a call to:
document.write('<script src="SCRIPT_PROVIDING_NAMESPACE"></script>');
The dependencies are defined with calls to goog.addDependency(relativePath, provides, requires) in deps files generated with depswriter.py. Using the Chrome Developer Tools, the Elements tab shows all of the <script> elements dynamically inserted based on the Closure Library dependencies defined in deps.js.
In your example, when sayHi() is triggered by the body onload event, a new <script> element is inserted in the header. However, this new <script> element has not yet loaded goog.dom. Therefore, goog.dom is undefined.
If you change hello.js as follows:
goog.require("goog.dom");
var options = {
"style" : "background:#EEE;"
}
function sayHi() {
var header = goog.dom.createDom("h1", options, "hello world");
goog.dom.appendChild(document.body, header);
}
Then goog.require("goog.dom") gets executed prior to the onload event and the inserted <script> element has a chance to load dom.js prior to the call to sayHi().