www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Simple Javascript login

  1. #1
    Join Date
    Dec 2010
    Posts
    59

    Simple Javascript login

    so, i've been delving into javascript more lately trying to become more efficient at it. I've created a simple form, here it is...

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function login(){
    
    	A=document.frm1.username.value;
    	B=document.frm1.password.value;
    	
    if(A=="pdiddles03" && B=="cookies"){
    	document.write("thank you for logging in, please wait while you are redirected...");
    	window.location="http://m.yahoo.com"
    
    }
    
    else{
    	alert("incorrect username or password");
    	return false;
    }
    
    
    }
    
    	
    
    </script>
    <style type="text/css">
    
    .login{
    	margin-left: auto;
    	position: relative;
    	width: 200px;
    	height: 300px;
    	background: red;
    }
    </style>
    </head>
    <body>
    <h3>Login Page</h3>
    <div class="login">
    
    
    <form name="frm1" action="home.html">
    What is your username?<input type="text" value="" name="username">
    Password<input type="text" value="" name="password">
    <input type="button" value="submit" onclick="login()">
    </form>
    <script type="text/javascript" src="login.js"></script>
    
    </div>
    I want to know if it's possible to create an array of user name and passwords so that if one of them are typed in, they will login and be redirected.

    Don't worry, I know this is not a secure way of making log in pages, this is just for fun and education for myself!

    Thanks in advance!

  2. #2
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Hi,

    1) Don't declare your variables as 'A'. This way you create a global variable.

    Code:
    A === window.A
    FYI
    Code:
    window.location === location
    Always use var ;-)

    2) Always use === instead of == to compare values in JavaScript

    3) Never use document.write()

    4) Checkout jQuery

    5) And in answer to your question:
    Code:
    var password = document.frm1.password.value;
    			
    // Array with passwords
    var array = ['one', 'two', 'three'];
    
    for ( i = 0; i < array.length; i++ ) {
    				
    	if ( password === array[i] ) {
    		alert('match');
    	}
    				
    }

  3. #3
    Join Date
    Dec 2010
    Posts
    59
    Now what's the reason behind never using document.write()?

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Christophe27 View Post
    2) Always use === instead of == to compare values in JavaScript
    Why always? You can not say that one operator is better than the other... It depends on the scope of the comparison. == will compare the values. === will compare the values AND the types. Now, it is up to the coding needs.

  5. #5
    Join Date
    Mar 2011
    Posts
    65
    3) Never use document.write()
    It's bad practice for it will put some Text mostly somewhere in the HTML code where it doesn't belong.

    The good way would be to set up an empty div somewhere, e.g. <div id="successmessage"></div> and to set the html content on success (e.g. in jQuery: $("#successmessage").html("Successfully logged in");

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by pdiddles03 View Post
    Now what's the reason behind never using document.write()?
    I would not say never. But the main reason is that document.write() is not a dynamic method. Either it will overwrite the document (almost the same as if you would have changed the session), or, if used locally, will be of no significant use, most of the time.

  7. #7
    Join Date
    Dec 2010
    Posts
    59
    Ok, so can you use javascript and jquery together? if not, how would you validate a form through jquery? or even write if...else statements?

  8. #8
    Join Date
    Dec 2010
    Posts
    59
    Oh, and just a off subject, there is huge amounts of info that is bad about javascript. I also found that there is no guides to tell you what is proper form and what isn't.

    Also, what is the difference between all these languages? xhtml, html, html5. People talk about them as if their different but they don't seem to much different. which one is better to use with javascript at this point?

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    JQuery is JavaScript. If you have no other special needs, write your codes in native JavaScript syntax.

    JQuery is nothing but a structured JavaScript library. One of many others. It was meant to ease the coding in case of very intricate jobs (complex fade in, fade out effects, drag-n-drop applications, things like that). Moreover, don't jump to JQuery while you don't learn the basis of the language, which is JavaScript.

  10. #10
    Join Date
    Dec 2010
    Posts
    59
    Well I know that jquery is supposed to ease coding for special effects but can you use jquery and javascript together. By looking it looks like jquery does not include any if...else statements. So can I use normal javascript syntax along with jquery?

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by pdiddles03 View Post
    xhtml, html, html5. People talk about them as if their different but they don't seem to much different. which one is better to use with javascript at this point?
    Use whichever. But if you use one of them, use it properly, and take care of the HTML or XHTML syntax

    See also:
    http://www.webstandards.org/learn/ar...skw3c/oct2003/

    Regarding the HTML5, that is innovative mainly because it adds new HTML elements and, together with some special JavaScript methods, extends the document's dynamic possibilities. Under an HTML5 you may code either in HTML strict mode, or in XHTML strict mode, it does not matter. The problem is that HTML5 is new and its new features are not fully implemented in all the browsers. Or even not implemented in some older ones.

    And, yes: structurally speaking, there are neither radical nor even big differences between HTML, XHTML and HTML5

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by pdiddles03 View Post
    Well I know that jquery is supposed to ease coding for special effects but can you use jquery and javascript together. By looking it looks like jquery does not include any if...else statements. So can I use normal javascript syntax along with jquery?
    As I said, JQuery is JavaScript. Nothing more, nothing less. Of course you may use them altogether. In fact, what looks somehow different in JQuery are the custom methods, which, in fact, call some code lines, in the external JQuery JS core files, written in native JavaScript. For instance:
    Code:
    $("#someid")
    is nothing but the native JavaScript reference:
    Code:
    document.getElementById('someid')
    and it has in the backstage (the loaded external JQuery core file) exactly the same method.

  13. #13
    Join Date
    Dec 2010
    Posts
    59
    Thanks for your help kor. I've been racking my brain about this language. Trying to understand it. This is going to be the first programming language I'm really learning. After I read the first posts about not using document.write(), I sat in bad last night for a hr or 2 and just thought about how it could be done other ways. Or How i could write the same script using jquery. I'm a nerd I know.

  14. #14
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Start from the basis:

    - HTML, XHTML, HTML4 5 are markup languages. They are simple languages to annotate text, images and multimedia on a document. In fact we are talking about the HTML family versions of the same language: HTML.
    - CSS is a style language. It express the presentation of an already structured (structured with HTML, let's say) document.
    - JavaScript is a client-side scripting language.
    - AJAX is a technique used on the client-side to create asynchronous web applications, most of the time in relationship with a server-side application. It implies a special request object (and its properties), JavaScript and, more or less, XML.
    - PHP is a server-side scripting language.
    - MySQL is a relational database management system. It runs on server-side a server and it provides multi-user access to a number of databases.

    That is the least you have to know, in different degrees of knowledge , in order to create and develop web documents and applications.

  15. #15
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Quote Originally Posted by pdiddles03 View Post
    Thanks for your help kor. I've been racking my brain about this language. Trying to understand it. This is going to be the first programming language I'm really learning. After I read the first posts about not using document.write(), I sat in bad last night for a hr or 2 and just thought about how it could be done other ways. Or How i could write the same script using jquery. I'm a nerd I know.
    The difference between the HTML versions is like the reviewing of a book. The first edition is what it is, but in every new addition, some parts are left out (deprecated) and some part are added. HTML5 is cool in my opinion, however, mainly for the JS developer. I have created an HTML5 audioplayer, played arround with te geolocation API and communication API. It's fun!

    @Kor: I always use === instead of ==, especially when dealing with booleans. Also I never put {} on the next line. It's good practice since it can gives errors.

    Like Kor said (twice), jQuery is JavaScript. jQuery is a javascript library written using the JS chaining pattern. I have learned jQuery first. With jQuery you can get things done quickly.

    To learn jQuery: http://blog.themeforest.net/screenca...-video-series/

    When you are enthousiast and want to become a hardcore JS programmer, you can check out JavaScript The definitive guide. You mentioned somewhere, what are the good parts, and what are the bad parts of JS. Check out: JavaScript - The good parts of Douglas Crockford. Also don't forget to check out videos from Douglas Crockford: http://javascript.crockford.com/

    After all that, you can check out: http://www.amazon.com/JavaScript-Pat...8335909&sr=1-1

    Instead of document.write() you can use the append() (or prepend() or before), or methods like that) of jQuery.You can use this to integrate text or HTML elements.

    Code:
    $('#id').append('hi there');
    
    <div id="id"></div>
    A common frustration of new JS developers is wondering why events (click for example) doesn't work with integrated HTML elements. Onload you bind the click-event to all HTML elements you want, but when you implement new HTML, you have to rebind a new click-event to that particular HTML element. In jQuery use .live().

    Success!

    Christophe

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles