To my understanding AJAX makes javascript asynchronous. I am new to AJAX, but noticed when creating scripts to the html document there is an attribute for async for scripts. Do these do the same thing as AJAX or am I wishfully thinking. I would find it very useful to use php within my already existing javascript file used in DOM generation. Why? To make life easier and as OO as possible. The only real thing I want out of this is to use php to output my php file generated from javascript, but later I would like to generate php directly using javascript methods.
index.php
<!DOCTYPE html>
<script type="text/javascript" src="jWebKit.js"></script>
<script>
var div = new Div();
div.setPosition(Div.FIXED);
div.setBounds(100,0,100,100);
div.horizontalAlign(Div.LEFT);
div.setPosition(Div.RELATIVE);
</script>
jWebKit.js
var head;
var body;
var jScript;
var devScript;
var phpScript;
(function(){
document.open();
jScript = document.createElement("script");
jScript.src = "jWebKit.js";
jScript.type = "text/javascript";
devScript = document.createElement("script");
phpScript = document.createElement("script");
php.type = "text/javascript";
php.text = 'document.write("<?php fopen("testfile.php", "w") ;?>");'; // This is the target script needed for file output below...
phpScript.async = 'true';
}());
window.onload = function(){
var cutScript;
head = document.head;
body = document.body;
cutScript = head.innerHTML.toString().replace(jScript.outerHTML.toString(),'');
devScript.text = phpScript.innerHTML.toString() + cutScript.replace('<script>', '').replace('</script>','');//Does not work!
body.appendChild(devScript);
head.innerHTML = head.innerHTML.toString().replace(cutScript,'');
alert(document.documentElement.outerHTML);
document.close();
};
function Div(){
Div.STATIC = 'static';
Div.ABSOLUTE = 'absolute';
Div.RELATIVE = 'relative';
Div.FIXED = 'fixed';
Div.SOLID = 'solid';
Div.DOTTED = 'dotted';
Div.LEFT = 0;
Div.CENTER = 1;
Div.RIGHT = 2;
Div.TOP = 0;
Div.MIDDLE = 1;
Div.BOTTOM = 2;
var ELEMENT;
var CSS;
var horizontalAlign;
var verticalAlign;
var colorQueue;
(function() {
this.div = document.createElement('div');
ELEMENT = this.div;
CSS = this.div.style;
CSS.border = '1px solid black';
document.body.appendChild(this.div);
}());
this.setPosition = function(postype){
if(!horizontalAlign && !verticalAlign){
CSS.position = postype;
}
}
this.setBounds = function(x,y,width,height){
CSS.left = x + 'px';
CSS.top = y + 'px';
CSS.width = width + 'px';
CSS.height = height + 'px';
}
this.setColorQueue = function(r,g,b){
colorQueue = 'rgb(' + new Array(r,g,b) + ')';
alert(colorQueue);
}
this.horizontalAlign = function(horiz){
var freeSpaceX = ((window.innerWidth - ELEMENT.offsetWidth) / 2);
var defPadding = '8px';
var defPaddingCenter;
var defPaddingRight;
var defPaddingLeft;
horizontalAlign = true;
this.setBounds(0,0,100,100);
if(CSS.position == 'relative' || CSS.position == 'absolute'){
CSS.position = 'absolute';
defPaddingCenter = 12;
defPaddingRight = 4;
defPaddingLeft = 8;
}else if(CSS.position == 'fixed'){
defPaddingCenter = 4;
defPaddingRight = 4;
defPaddingLeft = 8;
}
if(horiz == 0){
if(!verticalAlign){
CSS.marginTop = defPadding;
}CSS.marginLeft = defPaddingLeft + 'px';
}else if(horiz == 1){
if(!verticalAlign){
CSS.marginTop = defPadding;
}CSS.marginLeft = freeSpaceX - defPaddingCenter + 'px';
}else if(horiz == 2){
if(!verticalAlign){
CSS.marginTop = defPadding;
}CSS.marginLeft = (freeSpaceX - defPaddingRight) * 2 + 'px';
}
}
}
