Can a jsp file hold javascript - javascript

Hello everyone quick question.
First time working with java script
I have a jsp file that will create a data grid and one of the columns of the data grid are checkboxes. My question is can a JSP file contain javascript in it or will I have to create a different file for just the javascript. The function of the java script will be a select all button.
If JSP can hold javascript where does the code belong? by this I mean what headers does the code reside int?
<html>
Thanks for the help everyone.

I've just answered a similar question here:
https://stackoverflow.com/questions/25059168/java-websocket-client-in-jsp-possible/25059382#25059382
The generic answer is: JSP can contain anything that a regular HTML page can contain. JSP is an HTML extended with JSP tags that are processed on a server. After the JSP tags are processed and a response is generated there is no any difference between that response and a regular HTML.
So, the question really is where to store the java scripts in an HTML. I think, the cleanest way would be to put them to a separate file or files and then use a <script> tag with an 'src' attribute:
<script src="<java-script-url>"></script>
But in cases when java scripts are not that big and complicated, it's OK to include them to the page itself under <head> element of your page.

Script tags should be added under the head tag of the HTML node.
The script tag can then simply contain JavaScript.
This should not be any different from adding a script tag to a normal html page.
<html>
<head>
<script type="text/javascript"><!-- required for FF3 and Opera --><jsp:text> </jsp:text></script>
</head>
</html>
Add inline javascript to the body of the jsp:text (jsp:text may not be necessary, I am not sure), or add a src="" attribute containing the path relative (or absolute) to the URL the browser will consume the page from.

Yes, it technically can. You'd simply put it under a <script> tag inside <head>. However, I recommend including a JavaScript file using a <script> tag, instead of inserting JavaScript directly into your JSP.

There is no dependency between JavaScript and JSP because JavaScript is used for client side scripting and JSP is used to produce HTML pages or contents dynamically using Java EE. JavaScript can be used along with HTML on any browser that supports JavaScript (all browsers we use for work and development supports JavaScript).
Feel free to write JavaScript functions and code for HTML page to create an interactive website, it doesn't matter whether you are using ASP, JSP or PHP for server side scripting and dynamic HTML content generation because all these frameworks produce and use HTML, CSS, JavaScript and Media Contents. Your browser can only understand HTML, CSS and JavaScript, its the web server application which understands JSP and its Java code.
Why don't you write this code in your JSP page and check yourself whether it works or not.
<script type="text/javascript">alert('Hello World!');</script>
JavaScript is not limited to be written inside <head> tag, you can write it anywhere you want in a HTML page. There are some cases in which you would like to write a JavaScript function at the end of <body> tag.

Related

Better way to write HTML instead of document.write()

On my website I have a menu button that goes on every page and also a comments section. Instead of copying and pasting this into every single HTML file I created a JavaScript file that creates all of the HTML via the document.write function. This works fine, but as it is getting more and more lengthy and complicated it is also getting harder and harder to find elements and attributes since they are all squashed in one line.
I want to know if there is a better way to do this because I feel this is not the correct way due to it being so messing and disorganized.
I am just using a JavaScript file. It would look something like this:
document.write("<div id="id"></div>");
but with a lot more HTML.
I would suggest templating with a server side language such as PHP. This will allow you to format your different sections so that they are easily readable. Also it will work even if JavaScript is turned off on the browser.
<html>
<head></head>
<?php require("menu.php"); ?>
<!-- HTML body content -->
<?php require("comments.php"); ?>
</html>
If you want to stick with a client side approach then you can just put your menu and comments into separate html files and use jQuery to load it using
$('#Menu').load('menu.html');
$('#CommentSection').load('comments.html');
You can use jquery
Put your button in its own .html file like button.html with .load() in main html file.
$('#WhereYouWantItID').load('whatfolder/button.html');
This will load the button.html file to a specific target on your page

Include html in html through javascript

My question is similar to this one
How to include an HTML page into another HTML page without frame/iframe?
But the answers are not working for me. Objects and iframes create a box with scrollbars, which I don't want, and if I have links to other pages, I would like the whole page to change, not just what's inside the box.
This instruction doesn't work
<!--#include virtual="/footer.html" -->
I want to use only html, because this is how the website has been built and we are not redesigning it. I am only doing this for content modification purposes.
Is it a bad practice to write an html header (or footer) in a javascript file then include the .js in all of my html files?
1st edit
I have about 70 different html static pages.
I want to update contents such as the logo, the menu, the meta description of the web site, the text color, etc. but at the moment, I have to make each of these modifications 70 different times.
I used javascript for the html part of the menu, because the menu worked with javascript anyway, and included the file in all of my html files.
function writeJS(){
var strVar="";
strVar += "<body bgcolor=\"#000000\">";
strVar += "<div class=\"Main_container\">";
...
document.write(strVar);
}
writeJS();
I don't know if it is a good or bad idea to do the same with those tags for example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" ...
2nd edit
Although the html/javascript option was viable, we decided to invest a couple of days to go for a wordpress.org site (cheaper and better in the long run).
This instruction doesn't work at all
<!--#include virtual="/footer.html" -->
...probably becaue SSI is not enabled. Presumably you're telling us this because you think it would give you the result you want - implying that part of the question is why didn't it work? What did you do to investigate?
Is it a bad practice to write an html header (or footer) in a javascript file then include the .js in all of my html files?
It's not about bad practice - it won't work - you can inject html from javascript - but you need javascript code to do the injecting. Also this contradicts your earlier statement:
I want to use only html
The code you've provided does not inject html it appends it. The problem with document.write is that it only writes to the end of the document input stream. And if that stream is already closed, it re-opens it and clears the current HTML. There's never a good reason to use document.write(). Consider:
<html>
<div id="header">
<noscript>....</noscript>
</div>
<div id="page_specific_content">
...
</div>
<div id="footer">
<noscript>....</noscript>
</div>
</html>
and...
function addHeader()
{
var el=document.getElementById("header");
if (el) {
el.innerHTML="...";
}
}
But this is still a bad way to write a dynamic website. Even if you don't want to run ASP or PHP or PERL or serverside JS or.... on your production server, it'd make a lot more sense to to dfevelop using a proper CMS or templating system then scrape the HTML to get a static version for publication.
Yes, it is bad practice. Use the right tool for the right job.
For most of the things you mention, you need to use an external stylesheet (bgcolor in 2013?). This will already prevent you from having to change 70 files.
If there's also content you wish to share between pages, the proper way would be to use server-side scripting (such as php) to include it.
Including it client side is messy and will only work partly. You can only load things that go into the DOM (so not your meta information or your Head element's content). Plus your site will be completely disabled when a user does not have javascript enabled (not that common these days, but still).
I guess there could be numerous ways to do this:
Use SSI as described in the solution at How to include an HTML page into another HTML page without frame/iframe?
If you have php or similar scripting languages and feel confortable, you could use it.
Use simple js injection using JQuery or native JS code. See: https://stackoverflow.com/a/676409/2027264
Use IFrames with some CSS to get rid of scrollbars
Use Javascript templates(Underscore, backbone and many others). Also see: What Javascript Template Engines you recommend? and http://en.wikipedia.org/wiki/Javascript_templating
Hope this helps.
I'm fairly sure that include solution only works server side. Did you try the jQuery solution that was provided on that page? It seems to fit your javascript requirement:
If you mean client side then you will have to use JavaScript or frames.
Simple way to start, try jQuery
$("#links").load("/Main_Page #jq-p-Getting-Started li");
Source comment.

Embedding large portions of CSS and JS into <head> without links

So... Just so you have less reasons to call me an idiot, here's why I need this:
I'm currently working on an offline project that uses jruby. So, to generate reports on the fly, it was decided (by my superiors) to use JavaFX's WebView component - so, HTML, CSS and JS.
But here's the catch: no using file system. All the content is drawn from DB and generated on the fly. No internet either. So all the content to be loaded into the WebView is to be in a single file, however enormous.
I have an HTML page and two huge files - one js, one css. When I use <link> tag for css and <script src="..."> for js - all works. Both in a browser and if I artificially load the page into a WebView. But if should I copy-paste the files into corresponding <style> and <script> tags (as it, probably, will be handled in the program), half the things do not work. Is there a special way for doing it right?
Here are the html, css and JS I'm working with (html is filled with sample data so it can be seen if everything works):
html filecss filejavascript file
You could try and merge them. Read more about this here.

Why does any social site like Reddit use this method?

See what Reddit uses to add one of its buttons:
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
This JavaScript adds an <iframe> to the page, then the <iframe> adds the HTML code.
Why doesn’t the JavaScript add the HTML directly?
To isolate the button's markup and style from the web site's own CSS rules.
This technique is called as unobstrusive linking of JavaScript. This is one of the good practices of designing a web-page with graceful degradation. The actual HTML doesn't carry any references to JavaScript, and JavaScript is not supposed to cause any content manipulation.
Another reason why the JavaScript is included at the end of file, is that the web page can show without waiting for the JavaScript to be completely downloaded. This is the exact complement to why CSS files are included in the beginning (to prevent content from showing up before styles are set.)

SEO issue: Use ASHX in the src of script tag

If I called an ashx page as the src for a script tag and it outputs all the values and a document.write of the contents. Would this been seen by the robots or would this text not get picked up at all since its in a script tag?
For example,
<script src="sitemenu.ashx" type="text/javascript"></script>
SEO is one of the requirements of the project and so I wanna ask if this is okay to have my site menu in the .ashx file.
Thank you.
The problem is not the ASHX, it's document.write.
Dynamically client-side built documents do not get indexed by the major search engines.

Categories

Resources