Jump to content

why would you write an entire application in JS?


skaterdav85

Recommended Posts

Is there any reason why you wouldn't? I've written applications in js. It's much more user friendly and works well if you don't want to mess around with flash or java. Which are obviously more powerful and secure but js is much easier to jump into in my opinion. Especially with jquery I think anyone could write this application in 20-30 minutes.

Link to comment
Share on other sites

well obviously you would use JS in an application. the keyword here is entirely. If you use JS to write your entire application, does that mean you have a bunch of document.write statements writing html and css to the page? that doesn't sound very efficient.... Im not sure what it means to write an application entirely in JS.

Link to comment
Share on other sites

They probably mean a web application which involves the pervasive use of JavaScript - something like, say, Google Docs. Obviously using document.write everywhere would be rather stupid.

Link to comment
Share on other sites

the environment I develop in uses Javascript (no HTML/CSS) exclusively, albeit more in an API context. backend is typically handled with Java or PHP.

Link to comment
Share on other sites

Writing an application in JS does not necessarily mean constructing the HTML user interface with JavaScript. You would normally write the interface the same way you'd write any other page. The user interacts with the application the same way you normally trigger JavaScript stuff -- clicking buttons, entering text, and so on. It's easy to imagine a simple spreadsheet being constructed this way.Saving data (the end product of most applications) is another matter. Usually this means interacting with a server (the back end), so in that sense the application is not entirely JavaScript, but more of a hybrid. On the other hand, HTML5 creates several techniques for storing LARGE amounts of data on the user's hard drive (larger than a cookie, I mean) and in a variety of formats, and several browsers have implemented this already. So in that sense creating an entire app in JavaScript (with an HTML interface) is now a possibility.

Link to comment
Share on other sites

It wouldn't be all that difficult to write only Javascript, but it's going to be fairly limited in how it displays if you're not taking advantage of CSS at least. In my big application, other than a couple framesets on another page this is the only HTML in the thing:

app.lms.startup = function(){  //Ext.getDom("title_banner").style.display = "none";  var uf_list = [];  var ajax_con = new Ext.data.Connection({ url: "io.php", method: "post"});  var wait_box;  var reg_frm_flag = false;  var submit_login = function()  {	var login_frm = Ext.getCmp("login_form");	if (login_frm.getForm().isValid())	  login_frm.getForm().submit({		method: "POST",		waitTitle: "Connecting",		waitMsg: "Sending Credentials...",		url: "io.php",		scope: this,		params: {page_mode: "login"},		success: function(frm, act)		{		  Ext.getCmp("login_win").close();		  window.location.reload();		},		failure: this.submit_failure	  });	else	{	  Ext.Msg.alert("Warning", "Please fill out all required fields.");	}  }  var submit_reg = function()  {	if (!this.lms_opts.user_register)	{	  Ext.Msg.alert('Notice', 'User registrations have been disabled.  Only administrators can register new users.');	  return;	}	var reg_frm = Ext.getCmp("reg_form");	if (reg_frm.getForm().isValid())	{	  reg_frm.getForm().submit({		method: "POST",		waitTitle: "Connecting",		waitMsg: "Sending Information...",		url: "io.php",		scope: this,		params: {page_mode: "register"},		success: function(frm, act)		{		  Ext.Msg.alert('Registration Succeeded', 'Thank you for registering.  You may now log in.', function(btn, text)			{			  show_login.call(this);			},			this		  );		},		failure: this.submit_failure	  });	}	else	{	  Ext.Msg.alert("Warning", "Please fill out all required fields.");	}  }  var show_reg = function()  {	if (!this.lms_opts.user_register)	{	  Ext.Msg.alert('Notice', 'User registrations have been disabled.  Only administrators can register new users.');	  return;	}	if (uf_list.length == 0)	{	  ajax_con.request({		params: {page_mode: "get_uf_data"},		scope: this,		callback: receive_user_fields	  });	  wait_box = Ext.Msg.wait("Loading data...");	}	else	  update_user_fields();  }  var receive_user_fields = function (options, success, response)  {	var resp_obj;	wait_box.hide();	if (success && response.status == 200)	{	  resp_obj = Ext.util.JSON.decode(response.responseText);	  uf_list = resp_obj.data;	  update_user_fields.call(this);	}	else	{	  Ext.Msg.show({		title: "Warning",		msg: "Communication with the server failed, please try again.  " + response.status + ": " + response.statusText,		buttons: Ext.Msg.OK,		icon: Ext.Msg.WARNING	  });	}  }  // a version of this function also appears in user-main.js  var update_user_fields = function()  {	var login = Ext.getCmp("login_win");	var reg_frm = Ext.getCmp("reg_form");	var combo_opts;	login.setWidth(600);	login.setHeight(500);	Ext.getCmp("login_content").getLayout().setActiveItem("reg_form");	login.center();	if (!reg_frm_flag) // only do this once	{	  var nr = 0;	  var tabindex = 7;	  if (this.lms_opts.licensing)		tabindex++;	  for (var i = 0; i < uf_list.length; i++)	  {		if (uf_list[i].shown == 1)		{		  if (uf_list[i].dropdown == 1)			xt = "combo";		  else if (uf_list[i].check_num == 1)			xt = "numberfield";		  else if (uf_list[i].check_date == 1)			xt = "datefield";		  else			xt = "textfield";		  ab = (uf_list[i].allow_blank == 1) ? true : false;		  f = {			xtype: xt,			allowBlank: ab,			disabled: uf_list[i].editable == 0,			name: uf_list[i].id,			fieldLabel: uf_list[i].description,			tabIndex: tabindex++		  }		  if (uf_list[i].maxlen > 0)			f.maxLength = uf_list[i].maxlen;		  if (uf_list[i].minlen > 0)			f.minLength = uf_list[i].minlen;		  if (xt == "numberfield" || xt == "datefield")		  {			if (uf_list[i].maxval > 0)			  f.maxValue = uf_list[i].maxval;			if (uf_list[i].minval > 0)			  f.minValue = uf_list[i].minval;		  }		  if (xt == "combo")		  {			combo_opts = [];			for (j = 0; j < uf_list[i].drop_options.length; j++)			{			  if (uf_list[i].drop_options[j].admin == false)				combo_opts.push(uf_list[i].drop_options[j]);			}			f.editable = false;			f.triggerAction = "all";			f.forceSelection = true;			f.hiddenName = uf_list[i].id;			f.mode = "local";			f.store = new Ext.data.SimpleStore({			  fields: ['disp_order', 'label', 'val'],			  data: combo_opts			});			f.displayField = "label";			f.valueField = "val";		  }		  		  // custom validation		  if (uf_list[i].validation_rule != '')		  {			f.validation_rule = uf_list[i].validation_rule;			f.validation_text = uf_list[i].validation_text;			f.listeners = {			  'valid': function (field)			  {				var regex = new RegExp(field.validation_rule);				var val = field.getValue();				if (!regex.test(val))				{				  field.markInvalid(field.validation_text);				}			  },			  scope: this			};		  }		  reg_frm.items.get(1).items.get(nr++).add(f);		  if (nr > 1)			nr = 0;		}	  }	  reg_frm_flag = true;	  reg_frm.doLayout();	}	login.doLayout();  }  var show_login = function()  {	var login = Ext.getCmp("login_win");	login.setWidth(this.lms_opts.login_box_w);	login.setHeight(this.lms_opts.login_box_h);	Ext.getCmp("login_content").getLayout().setActiveItem("login_form");	login.center();	login.doLayout();  }  var show_pass_reset = function()  {	var login = Ext.getCmp("login_win");	login.setWidth(350);	login.setHeight(300);	Ext.getCmp("login_content").getLayout().setActiveItem("reset_form");	login.center();	login.doLayout();  }  var submit_reset = function()  {	var reset_frm = Ext.getCmp("reset_form");	if (reset_frm.getForm().isValid())	  reset_frm.getForm().submit({		method: "POST",		waitTitle: "Connecting",		waitMsg: "Sending Data...",		url: "io.php",		scope: this,		params: {page_mode: "reset_password"},		success: function(frm, act)		{		  Ext.Msg.alert('Information', act.result.info, function(btn, text)			{			  show_login.call(this);			}		  );		},		failure: this.submit_failure	  });	else	{	  Ext.Msg.alert("Warning", "Please fill out all required fields.");	}  }  var preload_complete = function()  {	var login_buttons = [	  {		text: "Log In",		formBind: true,		scope: this,		handler: submit_login	  }	];	if (this.lms_opts.user_register)	{	  login_buttons.push({		text: "Register",		scope: this,		handler: show_reg	  });	}	login_buttons.push({	  text: "Reset Password",	  scope: this,	  handler: show_pass_reset	});	var login_frm = new Ext.FormPanel({	  labelWidth: 75,	  labelAlign: "right",	  bodyStyle: "background: transparent; padding-bottom: 10px;",	  border: false,	  anchor: "100%",	  url: "io.php",	  id: "login_form",	  items: [		{		  xtype: "panel",		  layout: "column",		  border: false,		  bodyStyle: "background: transparent;",		  items: [			{			  xtype: "panel",			  columnWidth: .5,			  border: true,			  bodyStyle: "background: transparent; margin-bottom: 20px; padding: 5px;",			  autoScroll: true,			  height: this.lms_opts.login_box_h - 80,			  html: this.lms_opts.login_text			},			{			  xtype: "panel",			  columnWidth: .5,			  border: false,			  bodyStyle: "background: transparent; margin-bottom: 20px; padding-left: 5px;",			  layout: "form",			  defaults: {				xtype: "textfield",				allowBlank: false,				anchor: "95%"			  },			  items: [				{				  xtype: "panel",				  border: false,				  anchor: "100%",				  bodyStyle: "background: transparent; margin-bottom: 20px;",				  html: "<div>Please enter your username and password below to log in.</div>"				},				{				  id: "username",				  fieldLabel: "Username",				  name: "username"				},				{				  id: "password",				  fieldLabel: "Password",				  inputType: "password",				  name: "password"				}			  ]			}		  ]		}	  ],	  buttons: login_buttons	});  	var col1_items = [	  {		id: "reg_username",		fieldLabel: "Username",		name: "username",		allowBlank: false,		maxLength: 50,		minLength: 3,		tabIndex: 1	  },	  {		id: "fname",		fieldLabel: "First Name",		name: "fname",		allowBlank: false,		maxLength: 255,		tabIndex: 3	  },	  {		id: "reg_password",		fieldLabel: "Password",		inputType: "password",		name: "password",		allowBlank: false,		minLength: 4,		tabIndex: 5	  }	];	var col2_items = [	  {		id: "email",		fieldLabel: "Email",		name: "email",		allowBlank: this.lms_opts.email_optional,		/* vtype: "email", */		maxLength: 255,		tabIndex: 2	  },	  {		id: "lname",		fieldLabel: "Last Name",		name: "lname",		allowBlank: false,		maxLength: 255,		tabIndex: 4	  },	  {		id: "conf_password",		fieldLabel: "Confirm Password",		inputType: "password",		name: "conf_password",		allowBlank: false,		tabIndex: 6	  }	];	if (this.lms_opts.licensing)	{	  col1_items.push({		id: "reg_lic_key",		fieldLabel: "License Key",		name: "lic_key",		allowBlank: false,		maxLength: 20,		tabIndex: 7	  });	  col2_items.push({		hidden: true,		hideLabel: true,		hideMode: "visibility",		allowBlank: true	  });	}	var reg_frm = new Ext.FormPanel({	  labelWidth: 125,	  labelAlign: "right",	  bodyStyle: "background: transparent; margin-bottom: 10px;",	  border: false,	  url: "io.php",	  id: "reg_form",	  autoHeight: true,	  anchor: "100%",	  waitMsgTarget: "login_win",	  items: [		{		  xtype: "panel",		  border: false,		  anchor: "100%",		  bodyStyle: "background: transparent; margin-bottom: 20px;",		  html: "<div>Enter your information below to register.</div>"		},		{		  layout: "column",		  anchor: "100%",		  bodyStyle: "background: transparent;",		  border: false,		  defaults: {			columnWidth: .5,			layout: "form",			border: false,			bodyStyle: "background: transparent; padding-left: 5px;"		  },		  items: [			{			  id: "reg_col_1",			  defaults: {				xtype: "textfield",				anchor: "95%"			  },			  items: col1_items			},			{			  id: "reg_col_2",			  defaults: {				xtype: "textfield",				anchor: "95%"			  },			  items: col2_items			}		  ]		}	  ],	  buttons: [		{		  text: "Register",		  formBind: true,		  scope: this,		  handler: submit_reg		},		{		  text: "Cancel",		  scope: this,		  handler: show_login.createDelegate(this)		}	  ]	});		var reset_frm = new Ext.FormPanel({	  labelWidth: 100,	  labelAlign: "right",	  bodyStyle: "background: transparent; margin-bottom: 10px;",	  border: false,	  autoHeight: true,	  anchor: "100%",	  url: "io.php",	  id: "reset_form",	  defaults: {		xtype: "textfield",		width: 150	  },	  items: [		{		  xtype: "panel",		  border: false,		  anchor: "100%",		  bodyStyle: "background: transparent; margin-bottom: 10px;",		  html: "<div>To reset your password, enter the email address that you registered with.</div>"		},		{		  id: "reset_email",		  fieldLabel: "Email Address",		  name: "email"		},		{		  xtype: "panel",		  border: false,		  anchor: "100%",		  bodyStyle: "background: transparent; margin-bottom: 10px; margin-top: 20px;",		  html: "<div>If you don't know which email address you registered with, you may also enter your username.</div>"		},		{		  id: "reset_username",		  fieldLabel: "Username",		  name: "username"		}	  ],	  buttons: [		{		  text: "Reset",		  formBind: true,		  scope: this,		  handler: submit_reset		},		{		  text: "Cancel",		  scope: this,		  handler: show_login.createDelegate(this)		}	  ]	});	var login = new Ext.Window({	  bodyStyle: "padding: 2px",	  closable: false,	  height: this.lms_opts.login_box_h,	  width: this.lms_opts.login_box_w,	  id: "login_win",	  onEsc: Ext.emptyFn,	  frame: true,	  title: "Log In",	  layout: "fit",	  items: [		{		  id: "login_content",		  layout: "card",		  border: false,		  bodyStyle: "background: transparent;",		  activeItem: 0,		  items: [			login_frm,			reg_frm,			reset_frm		  ]		}	  ]	});	login.show();	login.center();	var form_nav = new Ext.KeyNav("login_form", {	  'enter': submit_login	});  }  this.load_options(preload_complete); // load LMS options}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...