The Dynamic Nature of JavaScript

JavaScript
1

I don’t know whether that’s a good thread title or not, but we’ll go with it anyway! :slight_smile:

Ok, so I’m slightly confused regarding the dynamic nature of JavaScript and how it outputs content in the HTML markup source code.

If we want to add any dynamic content to a Web page with PHP (in PHP tags obviously) then we can. If we view the source of the Web page then we’ll see the content within the markup, whether the PHP is inline or has been written to the page through a templating system.

However, I’ve had a look around the Internet and done a few little experiments myself and have come to the conclusion that any content coded within JavaScript won’t appear in the actual source code of the HTML markup / page. A simple example is below:

date.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Date</title>
		<script type="text/javascript" src="date.js"></script>
	</head>

	<body>
		<div>
			<p id="dateField"></p>
		</div>
	</body>
</html>

date.js

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

function currentDate() {
	var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
	var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
	
	var now = new Date();
	var dateString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate() + ", " + now.getFullYear();

	document.getElementById("dateField").innerHTML = dateString;
}

addLoadEvent(currentDate);

Now, if you load up date.html in the Web browser and view the source code everything appears as normal however, nothing appears within the

<p id="dateField"></p>

tags. If you had a similar date script written with PHP then it would appear in the view source code.

So I guess my question is - Can someone explain to me exactly HOW dynamic JavaScript is?

What content will appear in the markup source code of a document and what won’t? Is there a way to have the content within a JS script appear in the source code as it usually would?

If the content within the JS code doesn’t exist in the actual source code after the Web page has been fully loaded, does that mean that the said content won’t appear to search engines? Doesn’t this mean that, like Flash content, the content within a JS script is not search engine friendly?

Hope I can get some clarification and help on this. Thanks.

Andrew Cooper

2

If you use Firefox, pressing Ctrl+U (or View > View Source) just brings up the downloaded HTML, before JavaScript does anything with it. If you want to see the source after JS has done its thing, select everything on the page (ctrl+A) and then right-click, View Selection Source. You’ll note there is no Doctype (it isn’t a part of the DOM) and HTML inserted by javascript will (almost certainly) lack indentations. It also shows the HTML after the browser engine has fixed things like mismatched tags, tags which should have been closed and other sloppy markup.

You can also use Firebug; the HTML tab will show the same thing, but with nice indentations.

The DOM is a tree of elements floating somewhere in the innards of the browser. JavaScript adds, modifies and removes them. That is what changes. It can be output as text for the convenience of the human (what you see when you do “View Selection Source”). But it is impossible for JS to add things to the DOM without affecting the DOM, therefore JS can’t add things to the “HTML Source” without it being present there.

It’s worth knowing that JavaScript is interpreted by the browser the moment it is downloaded. It only operates on the DOM, however, when you tell it to. This can be either immediately after the browser has parsed it (i.e. when you don’t tell it to wait) or after the DOM or the entire contents of the page (including images) have loaded (that is, if you instruct it to wait). It can of course operate on the DOM well after that, upon user interaction or if you’ve set up a timer.

From what I gather, HTML added by JavaScript isn’t seen by search engines, but hopefully someone else can confirm this - I don’t know how much they’ve progressed in recent times.

3

I forget if rendered is the actual term for it, but there’s the page’s DOM and there’s the browser’s rendered DOM. View-source shows the page’s DOM, although last I knew there was a Firefox plugin (Firebug? I have it disabled now so I can’t check) that could let you look at the rendered DOM too.

AFAIK search engines don’t have javascript, although I’ve heard rumors of that changing, so no, they won’t see the rendered DOM, only the page DOM.

4

This is best approached by working and thinking about the page as if it were being viewed purely as HTML.

After you have the HTML content that you need for the page, you use CSS to adjust its presentation.

Finally, you use scripting to affect the behaviour of the page.

That is correct. Some smart search engines like Google might scan the rendered page after scripting has been applied, but you cannot guarantee on this occurring with a majority of search engines.

That is right. This is why some sites sniff the user agent, so that if they recognise a search spider they can provide a text/only content version of the page.

When using scripting, the best solution is to leave the page content on the page, where it belongs, and then to use scripting to affect the behaviour of the page, which can include hiding parts of the page content until some event occurs later on.

5

Yes

I agree with this 100% Much better to have everything there and use javascipt to hide it than to not have everything there and use javascript to show it.

Although if you’re showing different content to users and Google, Google might not like it too much so be careful. Although AFAIK someone needs to report the page before they take any action against it.

6

The first 3 pages uses a good analogy to help clarify the serverside vs clientside distinction.

7

Sorry for the late reply. I kept meaning to reply to this thread but I procrastinate! :nono:

I see. So that means that no markup or content will be inserted into the actual HTML Source unless you use document.write, but then we wouldn’t use that. So JavaScript is unable to insert any markup or content into the actual HTML Source. I get that then. Cheers.

Yup, it seems so. So JavaScript isn’t search engine friendly then. I kind of knew that already regarding JS powered navigation menus and all the fuss surrounding it, but I didn’t know the extent of it. Now I do.

Yea, you’re absolutely right there. That does help when you think of it that way. Helps remind you of the structural, stylistic and behavioural layers.

Thanks, this is especially helpful. I’m going to make a new thread specifically on this to gain a better understanding of where JavaScript should be used and when it crosses over with PHP and the like. Thanks though for that particular sentence! :slight_smile:

Cheers, it’s a good read for anyone, even if you’ve already read it before. You often forget things when there’s so much to learn about Web Design as a whole!

Thanks guys, really appreciate the help. You should help me out in the next thread I’m going to post on JS :wink:

Andrew Cooper

8

I see. So that means that no markup or content will be inserted into the actual HTML Source unless you use document.write, but then we wouldn’t use that. So JavaScript is unable to insert any markup or content into the actual HTML Source. I get that then. Cheers.

It depends on your definition of “HTML source”. If you mean the HTML document that gets downloaded by the browser then no, javascript cannot change that. If you mean the HTML source after javascript has done its stuff, then yes.

9

I mean when you click on “View Source” in any Web browser, the normal view source without any special plugins / add-ons etc. From the different ways of inserting markup / content into the Web page the only method that actually inserts markup / content into the “HTML Source” / “View Source” is when using document.write, but of course we don’t use that. So technically speaking, JS can’t insert markup / content into the “HTML Source” / “View Source”, yea?

Thanks in advance for confirmation. :tup:

Andrew Cooper

10

No, document.write does not insert HTML into the text you see with “view source”. You can test this yourself.

So technically speaking, JS can’t insert markup / content into the “HTML Source” / “View Source”, yea?

Yea. JS can only insert content into the DOM.

“Special” representations of the DOM will include this stuff added by javascript, such as Firebug or the “view selection source” in Firefox.

In terms of what you see in any “view source” scenario, document.write is no different to the better DOM methods.

11

Using document.write to insert markup / content into the HTML document. As for my interpretation, document.write has inserted markup / content into the HTML Source dynamically.

Using the DOM methods way of createElement() and createTextNode() to insert markup / content into the HTML Document. As for my interpretation, the DOM methods way has not inserted markup / content into the HTML Source in any way.

But I understand that it doesn’t matter which way you use or even if its innerHTML - Search engines will still ignore the content. I just meant that document.write inserts it into the actual HTML View Source, but of course that wouldn’t happen because we never use document.write anymore anyway. It doesn’t matter about document.write anyway, I’ll never be using it.

My point is, is that there isn’t any way to insert markup / content via JS and have it appear with the rest of the static HTML markup and content when viewing the HTML View Source. Correct?

Cheers,

Andrew Cooper

12

I think we’re splitting hairs now. The “HTML Source” is just a text document downloaded by the browser. JavaScript has no control over this.

The browser parses the text document into a meaningful internal representation, called the DOM, which at its simplest is like a tree of elements. JavaScript is then parsed by the browser and it can add or remove things to the DOM. This does not change that original text document, which is now pretty much forgotten.

The browser can choose what it shows you in a “view-source” window. It can show the original text document downloaded, or a textual representation of the current state of the DOM at the time that you choose to “view source”. In Firefox this is achieved by selecting a chunk of the document (or all of it) and choosing “view selection source” in the context menu.

I don’t think I can be any clearer than this.

13

Ok, I understand what you’re saying here.

I think I get you here too. JS can add, manipulate and remove items in the DOM but at the end of the day the HTML text file on it’s own, with or without any JS files attached to it will remain the same.

I know you’re trying :stuck_out_tongue: and thanks for being patient. It’s just me, sometimes I like making life harder for myself (and others it seems!) by complicating things. I thing we misunderstood each other when Firefoxs’ “View Selection Source” came into things. :confused:

Andrew Cooper

PS: Can someone approve them two image attachments so people will know what I was talking about in that post?