JS Playground: 12/06

A lot of people is talking about an unobtrusive javascript. OK, but I don't understand why they have not came with idea to add users some possibility to switch off javascript on sites. It shouldn't be to complicated, if your scripts are really unobtrusive.

In case that of onobtrusive js:

site work completely without script

script is in your head section

if you are clever all are in one script
even if you need script at the end of your body tag you can add it into one single script

Anyway you can never know, that in some end user browser is problematic with your script. So why donť let user to simple switch them off without complicated browser settings.

How to add script to another script

Bellow is simple example how to include scripts in another header script


function loadAnotherScript(){
AnotherScript=document.body.appendChild(document.createElement('script'));
AnotherScript.type='text/javascript';
AnotherScript.src='script-file-url.js';
AnotherScript.setAttribute('defer','defer')
}
//use some onload event

This technic will allow you to keep all the scripts in one file and in combination with php you can any time send maximum two scripts for a site. One header script and one through this header script.

How to send php as js?

Again very simple thing.


<?php
header("Content-type: text/javascript");
?>

Why to send php as js? Because than you can split javascript to small snippets a put them together on final site. Try to study this keywords dynamic css with php on Google to see what I mean, because it again seems no one do such things with js.

Final Scriptswitcher, what I am talking about.

My php and english language are not good, so sorry for that. For this reason I change someone else styleswitcher code, which looks very simple for this demonstration and can be found at a lot germans phorums. So code is here:


<?php
if(empty($_GET['scriptsrc'])){
if(empty($_COOKIE['scriptsrc'])){$js_name="site";}
else{$js_name=$_COOKIE['scriptsrc'];}
}
else{$js_name=$_GET['scriptsrc'];}
setcookie("scriptsrc", $js_name, time()+(60*60*24*30), "/scriptswitcher/", ".xy.wz.cz");
$_GET['scriptsrc']=$js_name;
echo "<?xml version=\"1.0\" encoding=\"windows-1250\"?>\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
<head>
<title>Scriptswitcher</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<script type="text/javascript" src="<?php echo $js_name?>.js"></script>
</head>
<body>
<form action="<?php echo $_SERVER['SCRIPT_NAME']?>" method="get">
<fieldset>
<select name="scriptsrc">
<option value="site" selected="selected">Default</option>
<option value="none">None</option>
</select>
<input type="submit" value="Switch Script" />
</fieldset>
</form>
<h1>Scriptswitcher</h1>
<ul>
<li><a href="index.php?scriptsrc=<?php echo $js_name?>" title="Script switch">Script switch</a></li>
</ul>
</body>
</html>

Example:

Javascript Scriptswitcher

So I thing here is a long way for scripters to make they site really unobtrusive, and I hope someone more experienced in js, php and english will rewrite this idea to real english and explain everything what I forget to.

JS Playground

O mně

Links

29.12.06

Why people don´t make scriptswitcher

How to add script to another script

How to send php as js?

Final Scriptswitcher, what I am talking about.

Example:

Some select replacement