alternating headers and function call - javascript

I'm trying to create this webpage for homework where I have to state which function I'm testing and give the result after. For example:
"Testing function1" --> should be a heading (h1....h6)
result
"Testing function2"
result1
...
According to the homework rules, i have to put my javascript code in head and call the functions in body.
I tried thinking of a way where I don't need to re-type
<script type="text/javascript"> </script>
a few times. Any ideas?

There's nothing wrong with having <script.../script> a few times, if that's the order it appears in the page. You don't need to group all your scripts into one <script> tag for neatness or anything.
It's pretty common to see a block of HTML then a <script> after it which does something relating to that HTML (bad practice yes, but not something to worry about just yet when you're learning).
Unless there's something specifically saying you can't use more than one inline script, I'd just say make it easy for yourself.
You could use some document.writes if you really wanted to, or something along those lines (.innerHTML is another option) but that'll just generate messier code. Keep your HTML as HTML, and where possible, don't write Javascript that creates HTML.
All in one:
<script type="text/javascript">
document.write('<h1>Testing f1()</h1><p>' + function1() + '</p><h1>Testing f2()</h1><p>' + function2() + '</p>');
</script>
Yes it's one line, but damn, how annoying would that be to debug if it was something a little more complex?
My recommendation:
<h1>Testing f1()</h1>
<p>
<script type="text/javascript">
function1();
</script>
</p>
<h1>Testing f2()</h1>
<p>
<script type="text/javascript">
function2();
</script>
</p>
Yes it's more lines, but it's much easier to see what it's doing at a glance - you don't need to actually read it, it's very very obvious.

Related

Javascript code in classic asp

Hello I have a JavaScript code and I want to use it in ASP file but my error code says:
Active Server Pages error 'ASP 0138'
Nested Script Block
/reklamsag.html, line 3
A script block cannot be placed inside another script block.
My code is:
<script src="http://ad.reklamport.com/scripts/rp.js" type="text/javascript"></script>
<script type="text/javascript">
document.write("<script src='http://ad.reklamport.com/rpgetad.ashx?tt=t_canvecan_anasayfa_300x250&ciid=&rnd="+Math.random()%99999999+"'></"+"script>");
</script>
Someone says use code in external file and include it asp file i use this include code but it didn't work:
<!--#include file="reklamsag.html"-->
There is a technique to split the word "<script" into two parts such as "<scr" and "ipt" .
document.write("<scr"+"ipt src....></scr"+"ipt>");
Your code can go like this:
<script src="http://ad.reklamport.com/scripts/rp.js" type="text/javascript"></script>
<script type="text/javascript">
document.write("<scr"+"ipt src='http://ad.reklamport.com/rpgetad.ashx?tt=t_canvecan_anasayfa_300x250&ciid=&rnd="+Math.random()%99999999+"'></"+"scr"+"ipt>");
</script>
That's an incorrect way to load external JavaScript.
I understand the reasoning behind this is to prevent caching, since you already have server side language at your disposal, just have this and it will have the desired effect:
<script type="text/javascript" src="http://ad.reklamport.com/rpgetad.ashx?tt=t_canvecan_anasayfa_300x250&ciid=&rnd=<%=CLng(Timer())%>"></script>
This will append the amount of seconds since 12 AM, which is pretty much the same as random number. If you want extra layer or "uniqueness" you can add year, month and day.

Uncaught ReferenceError $ is not defined

I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).
I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.
I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
and in my main template (the one that gets rendered on all pages) I have:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
edit.js:
(even putting it within the script tag directly on the page I want to use it on doesn't work)
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});​
HTML:
(it's embedded in a larger page)
<head>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
</head>
... my html code..
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?
My two questions are:
What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?
I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.
First you need to place the jQuery script tag first.
Second, you need to do one of the following things:
Put your code within this function:
$(document).ready(function(){/*CODE HERE*/});
Or like this:
$(function(){
/*CODE HERE*/
});
The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.
Edit:
$(function(){
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});​
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Script tag for jQuery should come before your custom javascript.
Follow by edit.js
<script type="text/javascript" src="static/edit.js"></script>
Try removing the language attribute..sometimes work for me. It's obsolete now .. i think
You need to include jquery before you can use it.

javascript when new tag printed execute And mystery function syntax

I have Js Src code that contain Jsonp api functions. Where ever this Js Src code got printed i got to check first if the "api tag" printed already , if it did -> execute the api function , if the "api tag" have not got printed yet , wait for the tag to get printed on the screen and then execute the api functions.
for example i have this code
<html>
<head>
<!-- js code - contain Jsonp functions -->
<script type="text/javascript" src="jsonp.js"></script>
</head>
<body>
<!-- when this newtag get print , the function starts -->
<newtag:api size="small">myNewTag</newtag:api>
</body>
I don't know where the user will decide to put the JS code , it may be in the head , body or in the middle of the page , since i have this mystery i cant do something like this :
<newtag:api size="small">myNewTag</newtag:api>
<script> startJsonp(); </script>
because if the js code did not printed yet the order will not be execute.
and if the Js code got print in the head so it will not work since the "api tag" did not got printed yet.
to make the api work i need the "api tag" to be printed on the screen already for the Jsonp functions to work.
what i can do to solve this?
what is the porpoise to write JS function like that?
(function(){
// do something
})();
thank you so much!
There are several solutions for this problem:
Using jQuery's ready function. E.g.:
jQuery.ready(function(){ startJsonp(); })
Using window.onload. The problem is that you can unintended override another window.onready function. E.g.:
window.onready = startJsonp();
Using document.addEventListener and document.attachEvent. Eg.:
if (document.addEventListener){
document.addEventListener('load', startJsonp, false);
} else if (el.attachEvent){
document.attachEvent('onload', startJsonp);
}

How to include text file into javascript

Is there any way to load some text from another file into javascript, without server side code?
I was thinking to use another element to hold the text inside some comments, but I don't know how to read it's source code with javascript.
Something like:
<script src="myfile.js"></script>
<script> function readMyText() { ... }</script>
In myfile.js:
/* some text */
You can put anything you want into a script tag if you give it a "type" that's not something the browser understands as meaning "JavaScript":
<script id='Turtle' type='text/poem'>
Turtle, turtle, on the ground;
Pink and shiny - turn around.
</script>
You can get the contents via the "innerHTML" property:
var poemScript = document.getElementById('Turtle');
var poem = poemScript.innerHTML;
Here is a jsfiddle to demonstrate.
That trick is popular lately with people doing client-side page building via templates.
Without using ajax or any server code... sorry mate but you can't :(
Building on Pointy's answer, to import from local files do this:
<script src="foo.txt" id="text" type="text">
</script>
You could also use this to target an external file:
<script src="http://foo.txt"></script>

How to correctly include javascript code in chameleon/zpt template (pyramid)?

I'm trying to embed some code between <script> </script> tags, pyramid however doesn't like it and gives me
ExpatError: not well-formed (invalid token)
Probably because i have && in my code. I tried using & instead, but then it didn't get interpreted in the browser.
The same thing happens when i try to put it in CDATA block.
When I move the code to a separate js file it works. I'd like to keep it in the same file for now, just to enable quick corrections.
So, how should I do it?
EDIT:
I get the same error even for templates as simple as this one:
<html
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal">
<head>
</head>
<body>
<span onclick="alert(true && false);">test</span>
</body>
</html>
I think you're supposed to put && (i.e. two times the HTML entity code).
This should work:
<script type="text/javascript">
//<![CDATA[
// my javascript
//]]>
</script>
Have you tried adding a type attribute to your script tag?:
<script type="text/javascript">
...
</script>
It looks like xhtml issue, as w3c validator reported the same error.
I was thinking if there's a switch to change the document type parsed by chameleon to html, but then it wouldn't be possible to include tal and metal namespaces.
Hence it is expected behavior

Categories