skaterdav85 Posted September 30, 2010 Share Posted September 30, 2010 why would you write an entire application in JS? I came across this tutorial on net-tuts and you have to pay to see it, but the preview mentions writing an entire application in JS.http://net.tutsplus.com/tutorials/javascri...emium-tutorial/ Link to comment Share on other sites More sharing options...
MrFish Posted September 30, 2010 Share Posted September 30, 2010 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 More sharing options...
skaterdav85 Posted September 30, 2010 Author Share Posted September 30, 2010 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 More sharing options...
Synook Posted September 30, 2010 Share Posted September 30, 2010 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 More sharing options...
ApocalypeX Posted September 30, 2010 Share Posted September 30, 2010 Does anyone even use document.write lol? Link to comment Share on other sites More sharing options...
MrAdam Posted September 30, 2010 Share Posted September 30, 2010 Actually, Google Analytics uses document.write() within the tracking code they hand out. Link to comment Share on other sites More sharing options...
thescientist Posted September 30, 2010 Share Posted September 30, 2010 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 More sharing options...
jeffman Posted September 30, 2010 Share Posted September 30, 2010 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 More sharing options...
justsomeguy Posted September 30, 2010 Share Posted September 30, 2010 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.