Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie Javascript question

    Hi,

    I am just beginning out with Javascript and trying to complete a simple login page. Clicking on the Login button should bring up a message 'Access authorised' or 'Access denied' in the 'output' div of the page. Unfortunately only 'Access Denied' displays, even if the password entered is correct. There are no messages displayed in the Error Console.

    Any advice greatly appreciated!

    Code:
    <html>
    	<head>
    	<title>Function Example</title>
    	<script language="javascript" type="text/javascript">
    	function isAccessAuthorised(enteredPassword)
    	{
    	var result;
    	if(enteredPassword=="password")
    	{
    		result=true;
    	}
    	else
    	{
    		result=false;
    	}
    	return result;
    	}	
    
    	function buttonClicked()
    	{
    	var isAuthorised = isAccessAuthorised("enteredPassword").value;
    	if(isAuthorised==true)
    	{
    	document.getElementById("output").innerHTML=<p>Access authorised</p>;
    	}
    	else
    	{
    	document.getElementById("output").innerHTML=<p>Access denied</p>;
    	}
    }
    	
    	</script>
    	</head>
    	<body>
    	   	<form>
    			<input type="text" id="username" /> <br/>
    			<input type="text" id="enteredPassword" /> <br/>
    			<input type="button" onClick="buttonClicked()" value="Login">
    		</form>
    	<div id="output">
    	</div>
    	</body>
    	</html>
    Last edited by jaime82; 06-12-2011 at 06:31 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en">
    	<head>
    	<title>Function Example</title>
    	<script type="text/javascript">
    	function isAccessAuthorised(enteredPassword)
    	{
    	var result;
    	if(enteredPassword=="password")
    	{
    		result=true;
    	}
    	else
    	{
    		result=false;
    	}
    	return result;
    	}	
    
    	function buttonClicked()
    	{
    	var pass = document.getElementById("enteredPassword").value;
    	var isAuthorised = isAccessAuthorised(pass);
    	if(isAuthorised)
    	{
    	document.getElementById("output").innerHTML="<p>Access authorised</p>";
    	}
    	else
    	{
    	document.getElementById("output").innerHTML="<p>Access denied</p>";
    	}
    }	
    	</script>
    	</head>
    	<body>
    	   	<form>
    			<input type="text" id="username" /> <br/>
    			<input type="text" id="enteredPassword" /> <br/>
    			<input type="button" onClick="buttonClicked()" value="Login">
    		</form>
    	<div id="output">
    	</div>
    	</body>
    	</html>
    I haven't tested it
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey that's great, it works now. I guess forgetting put quotes around the <p> elements was a pretty elementary mistake, I get that, but I'm not sure I understand how the variable 'pass' works here. Does it become an argument of the 'isAccessAuthorised' variable? And then on the following line, the 'if' statement is not followed by any sort of condition for the browser to check whether to execute the following command or not, how does that work?

    It would be great if somebody could explain the principle behind this to me quickly, I'm still very new to this. Thanks a million!

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The 'pass' variable stores the value entered into text input called 'enteredPassword'. This variable is then passed to the function called 'buttonClicked'. This function can then do something according the value stored in the variable.

    The function 'enteredPassword' returns a value (a result) which is either true or false. This is stored in another variable called 'isAuthorised'. So the subsequent if statement is equivalent to
    Code:
    if (isAuthorised == true) {
        // do this
    else {
        // do something else
    }
    which is frequently abbreviated to 'if (isAuthorised)' (because this will be either true or false ).
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you! I guess what confuses me slightly is the way in which isAccessAuthorised first has the argument 'enteredPassword' at the beginning of the first function and then in the buttonClicked function picks up the 'pass' variable as its argument instead. I guess I somehow assumed that functions have fixed arguments. I guess that's not the case.

    One other thing: once defined, function names are "global" in the sense that they can be referred to anywhere in the script without having to define them again in any way? Whereas this is not the case with variables is it, you cannot reference a variable inside a function if it was "created" in another function?

    Thanks again!

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by jaime82 View Post
    Thank you! I guess what confuses me slightly is the way in which isAccessAuthorised first has the argument 'enteredPassword' at the beginning of the first function and then in the buttonClicked function picks up the 'pass' variable as its argument instead. I guess I somehow assumed that functions have fixed arguments. I guess that's not the case.

    One other thing: once defined, function names are "global" in the sense that they can be referred to anywhere in the script without having to define them again in any way? Whereas this is not the case with variables is it, you cannot reference a variable inside a function if it was "created" in another function?
    Functions have fixed argument names, but when the function is called (used) the value stored in this argument will be different each time. This is essentially why functions are so useful.

    Yes, functions can be called from anywhere within the page and variables defined within it are not available outside the function. (Well, almost.. but don't worry about that now .)

    Variables can also be created outside of any function and can then be used anywhere in the code. These are global variables but we try hard to avoid these

    [I have to complete this description by saying that functions can contain other functions that would not be accessible outside the main function but, again, this shouldn't be of concern to you at the stage you're at.]
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    if(enteredPassword=="password")

    Login scripts using Javascript are hopelessly insecure as anyone can read the password with View Source. Youu need to use server-side scripting.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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